Cleanup of old code, open toplevel automatically if settings changed

static/js/dns.mjs

@@ -119,7 +119,7 @@ export class Application {
 		folders.sort(this.sortFolders)
 
 		for (const folder of folders)
-			this.recordsTree.append(folder.toElement())
+			this.recordsTree.append(folder.render())
 
 		// Subscribe to settings update since the elements they will change
 		// exists now.
@@ -149,52 +149,6 @@ export class Application {
 			event.stopPropagation()
 			event.preventDefault()
 		}
-	}// }}}
-	handlerTop(event) {// {{{
-		const topEl = event.target.closest('.top')
-
-		let records, types, values
-		if (topEl.classList.contains('open')) {
-			records = document.querySelectorAll(`[data-top$="${topEl.dataset.self}"]`)
-			types = document.querySelectorAll(`[data-top$="${topEl.dataset.self}"] + .type`)
-			values = document.querySelectorAll(`[data-top$="${topEl.dataset.self}"] + .type + .value`)
-
-			for (const r of records) {
-				r.classList.remove('show')
-				r.classList.remove('open')
-			}
-
-			for (const r of types)
-				r.classList.remove('show')
-			for (const r of values)
-				r.classList.remove('show')
-
-			topEl.classList.remove('open')
-		} else {
-			if (event.shiftKey) {
-				records = document.querySelectorAll(`[data-top$="${topEl.dataset.self}"]`)
-				types = document.querySelectorAll(`[data-top$="${topEl.dataset.self}"] + .type`)
-				values = document.querySelectorAll(`[data-top$="${topEl.dataset.self}"] + .type + .value`)
-			} else {
-				records = document.querySelectorAll(`[data-top="${topEl.dataset.self}"]`)
-				types = document.querySelectorAll(`[data-top="${topEl.dataset.self}"] + .type`)
-				values = document.querySelectorAll(`[data-top="${topEl.dataset.self}"] + .type + .value`)
-			}
-
-			for (const r of records) {
-				r.classList.add('show')
-				if (event.shiftKey && r.classList.contains('top'))
-					r.classList.add('open')
-			}
-			for (const r of types)
-				r.classList.add('show')
-			for (const r of values)
-				r.classList.add('show')
-
-			topEl.classList.add('open')
-		}
-
-
 	}// }}}
 	handlerSettingsUpdated({ key, value }) {// {{{
 		if (key == 'boxed_folders') {
@@ -212,7 +166,6 @@ export class Application {
 class Folder {
 	constructor(app, parentFolder, name) {// {{{
 		this.application = app
-		this.open = false
 		this.parentFolder = parentFolder
 		this.folderName = name
 		this.subfolders = new Map()
@@ -221,6 +174,9 @@ class Folder {
 		this.div = null
 		this.divSubfolders = null
 		this.divRecords = null
+
+		const topLevelOpen = this.application.settings.get('toplevel_open')
+		this.open = (topLevelOpen && this.labels().length <= 1)
 	}// }}}
 	name() {// {{{
 		return this.folderName.toLowerCase()
@@ -256,15 +212,13 @@ class Folder {
 		else
 			this.openFolder(event.shiftKey)
 	}// }}}
-	toElement() {// {{{
+	render() {// {{{
 		if (this.div === null) {
 			this.div = document.createElement('div')
 			this.div.classList.add('folder')
 			this.div.classList.add(this.open ? 'open' : 'closed')
 			if (this.labels().length == 1)
 				this.div.classList.add('top-most')
-			this.div.dataset.top = this.labels().slice(1).join('.')
-			this.div.dataset.self = this.name()
 
 			const firstLabel = this.labels()[0]
 			const restLabels = this.labels().slice(1).join('.')
@@ -291,13 +245,21 @@ class Folder {
 		subfolders.sort(this.application.sortFolders)
 
 		for (const folder of subfolders)
-			this.divSubfolders.append(folder.toElement())
+			this.divSubfolders.append(folder.render())
 
 		// Records are refreshed.
-		this.divRecords.replaceChildren()
 		for (const rec of Array.from(this.records))
 			this.divRecords.append(...rec.render())
 
+		// Open this folder automatically if it is a toplevel folder and the settings change to open.
+		_mbus.subscribe('settings_updated', ({ detail: { key, value }}) => {
+			if (key !== 'toplevel_open')
+				return
+
+			if (value && this.labels().length <= 1)
+				this.openFolder()
+		})
+
 		return this.div
 	}// }}}
 }
@@ -521,6 +483,8 @@ class RecordDialog {
 		this.dlg.addEventListener('close', () => this.dlg.remove())
 		document.body.appendChild(this.dlg)
 		this.dlg.showModal()
+
+		this.dlg.querySelector('.name').focus()
 	}// }}}
 	enterKeyHandler(event) {// {{{
 		if (event.key == "Enter")
@@ -541,6 +505,7 @@ class Settings {
 	constructor() {// {{{
 		this.settings = new Map([
 			['boxed_folders', true],
+			['toplevel_open', true],
 		])
 
 		// Read any configured settings from local storage, but keeping default value
@@ -567,6 +532,7 @@ class SettingsDialog {
 
 		this.dlg = null
 		this.elBoxedFolders = null
+		this.elToplevelOpen = null
 	}// }}}
 	show() {// {{{
 		this.dlg = document.createElement('dialog')
@@ -574,6 +540,8 @@ class SettingsDialog {
 
 		this.dlg.innerHTML = `
 			<input type="checkbox" id="boxed-folders"> <label for="boxed-folders">Boxed folders</label>
+			<input type="checkbox" id="toplevel-open"> <label for="toplevel-open">Toplevel domains open</label>
+
 			<div class="buttons">
 				<button class="save">Save</button>
 			</div>
@@ -583,6 +551,10 @@ class SettingsDialog {
 		this.elBoxedFolders = this.dlg.querySelector('#boxed-folders')
 		this.elBoxedFolders.checked = boxedFolders
 
+		const topLevelOpen = this.application.settings.get('toplevel_open')
+		this.elToplevelOpen = this.dlg.querySelector('#toplevel-open')
+		this.elToplevelOpen.checked = topLevelOpen
+
 		// Event listeners are connected.
 		this.dlg.querySelector('.save').addEventListener('click', () => this.save())
 		this.dlg.addEventListener('close', () => this.dlg.remove())
@@ -593,6 +565,7 @@ class SettingsDialog {
 	}// }}}
 	save() {// {{{
 		this.application.settings.set('boxed_folders', this.elBoxedFolders.checked)
+		this.application.settings.set('toplevel_open', this.elToplevelOpen.checked)
 		this.dlg.close()
 	}// }}}
 }