From c59d79d084655111ec58fff6d321004f46a1ed44 Mon Sep 17 00:00:00 2001 From: Victor Azevedo <34415964+victrme@users.noreply.github.com> Date: Sun, 25 Sep 2022 11:04:41 +0200 Subject: [PATCH] Better settings managment readability --- src/scripts/settings.ts | 137 +++++++++++++++++++++------------------- src/settings.html | 6 +- src/styles/_dark.scss | 3 +- 3 files changed, 77 insertions(+), 69 deletions(-) diff --git a/src/scripts/settings.ts b/src/scripts/settings.ts index f97f8060..7a8e042e 100644 --- a/src/scripts/settings.ts +++ b/src/scripts/settings.ts @@ -48,6 +48,8 @@ import { weather, } from './index' +type Langs = keyof typeof langList + function initParams(data: Sync, settingsDom: HTMLElement) { // if (settingsDom == null) { @@ -536,28 +538,9 @@ function initParams(data: Sync, settingsDom: HTMLElement) { cssInputSize(paramId('cssEditor')) // - // Settings management - - paramId('i_importfile').addEventListener('change', function () { - if (!this.files || (this.files && this.files.length === 0)) { - return - } - - const file = this.files[0] - const reader = new FileReader() + // Settings managment - reader.onload = () => { - try { - if (typeof reader.result === 'string') { - const json = JSON.parse(window.atob(reader.result)) - paramsImport(json) - } - } catch (err) { - console.log(err) - } - } - reader.readAsText(file) - }) + const { exportAsFile, copyImportText, importAsText, importAsFile } = settingsMgmt() const toggleSettingsMgmt = (toggled: boolean) => { clas(paramId('export'), !toggled, 'shown') @@ -567,50 +550,16 @@ function initParams(data: Sync, settingsDom: HTMLElement) { paramId('s_export').addEventListener('click', () => toggleSettingsMgmt(false)) paramId('s_import').addEventListener('click', () => toggleSettingsMgmt(true)) - paramId('exportfile').addEventListener('click', () => { - const a = $('downloadfile') - - if (!a) return - - chrome.storage.sync.get(null, (data) => { - a.setAttribute('href', `data:text/plain;charset=utf-8,${window.btoa(JSON.stringify(data))}`) - a.setAttribute('download', `bonjourrExport-${data?.about?.version}-${randomString(6)}.txt`) - a.click() - }) - }) - - paramId('copyimport').addEventListener('click', async function () { - try { - const area = $('area_export') as HTMLInputElement - await navigator.clipboard.writeText(area.value) - this.textContent = tradThis('Copied') - setTimeout(() => { - const domimport = $('copyimport') - if (domimport) { - domimport.textContent = tradThis('Copy text') - } - }, 1000) - } catch (err) { - console.error('Failed to copy: ', err) - } - }) - - paramId('i_importtext').addEventListener('keyup', function () { - try { - JSON.parse(this.value) - $('importtext')?.removeAttribute('disabled') - } catch (error) { - $('importtext')?.setAttribute('disabled', '') - } - }) - - paramId('importtext').addEventListener('click', function () { - paramsImport(JSON.parse(($('i_importtext') as HTMLInputElement).value)) - }) - + paramId('b_exportfile').addEventListener('click', () => exportAsFile()) + paramId('b_exportcopy').addEventListener('click', (e) => copyImportText(e.target as HTMLButtonElement)) + paramId('i_importfile').addEventListener('change', (e) => importAsFile(e.target as HTMLInputElement)) + paramId('i_importtext').addEventListener('keyup', (e) => importAsText((e.target as HTMLInputElement).value)) paramId('b_resetconf').addEventListener('click', () => paramsReset('conf')) paramId('b_resetyes').addEventListener('click', () => paramsReset('yes')) paramId('b_resetno').addEventListener('click', () => paramsReset('no')) + paramId('b_importtext').addEventListener('click', function () { + paramsImport(JSON.parse(($('i_importtext') as HTMLInputElement).value)) + }) // // A11y tabbing inputs control @@ -661,6 +610,68 @@ function initParams(data: Sync, settingsDom: HTMLElement) { }) } +function settingsMgmt() { + async function copyImportText(target: HTMLButtonElement) { + try { + const area = $('area_export') as HTMLInputElement + await navigator.clipboard.writeText(area.value) + target.textContent = tradThis('Copied') + setTimeout(() => { + const domimport = $('b_exportcopy') + if (domimport) { + domimport.textContent = tradThis('Copy text') + } + }, 1000) + } catch (err) { + console.error('Failed to copy: ', err) + } + } + + function exportAsFile() { + const a = $('downloadfile') + + if (!a) return + + chrome.storage.sync.get(null, (data) => { + a.setAttribute('href', `data:text/plain;charset=utf-8,${window.btoa(JSON.stringify(data))}`) + a.setAttribute('download', `bonjourrExport-${data?.about?.version}-${randomString(6)}.txt`) + a.click() + }) + } + + function importAsText(string: string) { + try { + JSON.parse(string) + $('b_importtext')?.removeAttribute('disabled') + } catch (error) { + $('b_importtext')?.setAttribute('disabled', '') + } + } + + function importAsFile(target: HTMLInputElement) { + if (!target.files || (target.files && target.files.length === 0)) { + return + } + + const file = target.files[0] + const reader = new FileReader() + + reader.onload = () => { + try { + if (typeof reader.result === 'string') { + const json = JSON.parse(window.atob(reader.result)) + paramsImport(json) + } + } catch (err) { + console.log(err) + } + } + reader.readAsText(file) + } + + return { exportAsFile, copyImportText, importAsText, importAsFile } +} + function cssInputSize(param: Element) { setTimeout(() => { const cssResize = new ResizeObserver((e) => { @@ -693,8 +704,6 @@ function changelogControl(settingsDom: HTMLElement) { logdismiss.onclick = () => dismiss() } -type Langs = keyof typeof langList - function translatePlaceholders(settingsDom: HTMLElement | null) { if (!settingsDom) { return diff --git a/src/settings.html b/src/settings.html index cf0bf85e..82286ca5 100644 --- a/src/settings.html +++ b/src/settings.html @@ -898,10 +898,10 @@

- +
- +
@@ -915,7 +915,7 @@

- +
diff --git a/src/styles/_dark.scss b/src/styles/_dark.scss index e771db64..49a195f2 100644 --- a/src/styles/_dark.scss +++ b/src/styles/_dark.scss @@ -172,8 +172,7 @@ } input[type='text'], - input[type='url'], - pre#i_export { + input[type='url'] { background-color: #39383d; color: white;