magnus/routeros_dns
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Cleanup of old code, open toplevel automatically if settings changed

Browse source
This commit is contained in:
Magnus Åhall 2026-02-25 15:43:15 +01:00
parent fc82a299f8
commit 3ea290b2e2
1 changed files with 26 additions and 53 deletions
Download patch file Download diff file Expand all files Collapse all files

79
static/js/dns.mjs
View file

@ -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()
}// }}}
}