Better settings managment readability

victrme · Sep 25, 2022 · c59d79d · c59d79d
1 parent d365a11
commit c59d79d
Show file tree

Hide file tree

Showing 3 changed files with 77 additions and 69 deletions.
diff --git 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
@@ -898,10 +898,10 @@ <h2 class="trn">
 				<textarea id="area_export" autocorrect="off" spellcheck="false" aria-labelledby="s_export"></textarea>
 
 				<div>
-					<button id="copyimport" class="trn">Copy text</button>
+					<button id="b_exportcopy" class="trn">Copy text</button>
 
 					<div id="save_wrapper">
-						<button id="exportfile" class="trn">Export as file</button>
+						<button id="b_exportfile" class="trn">Export as file</button>
 						<a id="downloadfile" href="" download="" aria-hidden="true" tabindex="-1">export download link</a>
 					</div>
 				</div>
@@ -915,7 +915,7 @@ <h2 class="trn">
 
 				<div>
 					<input id="i_importtext" type="text" placeholder="or paste as text" aria-labelledby="importtext" />
-					<button id="importtext" class="trn">Import</button>
+					<button id="b_importtext" class="trn">Import</button>
 				</div>
 			</div>
 		</div>

diff --git 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;