Keyboard handler, recursively open folders upwards

static/css/index.css

@@ -175,6 +175,13 @@ button {
 				user-select: none;
 				display: flex;
 
+				&.created {
+					* {
+						color: #44aa00 !important;
+						font-weight: bold;
+					}
+				}
+
 				.subdomains {
 					display: none;
 				}

static/js/dns.mjs

@@ -5,7 +5,7 @@ export class Application {
 		window._mbus = new MessageBus()
 		this.settings = new Settings()
 		this.records = this.parseRecords(records)
-		this.topFolder = new Folder(this, 'root')
+		this.topFolder = new Folder(this, null, 'root')
 		this.recordsTree = null
 		this.settingsIcon = null
 
@@ -53,7 +53,7 @@ export class Application {
 				// to be able to update them when necessary.
 				let folder = currFolder.subfolders.get(label)
 				if (folder === undefined) {
-					folder = new Folder(this, accFolderName)
+					folder = new Folder(this, currFolder, accFolderName)
 					currFolder.subfolders.set(label, folder)
 				}
 				currFolder = folder
@@ -110,6 +110,8 @@ export class Application {
 			document.body.appendChild(this.recordsTree)
 			document.body.appendChild(this.settingsIcon)
 			document.body.appendChild(this.createIcon)
+
+			document.body.addEventListener('keydown', event => this.handlerKeys(event))
 		}
 
 		// Top root folder doesn't have to be shown.
@@ -125,6 +127,29 @@ export class Application {
 		this.setBoxedFolders(this.settings.get('boxed_folders'))
 
 	}// }}}
+	handlerKeys(event) {// {{{
+		let handled = true
+
+		// Every keyboard shortcut for the application wide handler is using Alt+Shift
+		// for consistency and that it works with a lot of browsers.
+		if (!event.altKey || !event.shiftKey || event.ctrlKey) {
+			return
+		}
+
+		switch (event.key.toLowerCase()) {
+			case 'n':
+				new RecordDialog(new Record()).show()
+				break
+
+			default:
+				handled = false
+		}
+
+		if (handled) {
+			event.stopPropagation()
+			event.preventDefault()
+		}
+	}// }}}
 	handlerTop(event) {// {{{
 		const topEl = event.target.closest('.top')
 
@@ -154,7 +179,6 @@ export class Application {
 				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`)
-				console.log(records)
 			}
 
 			for (const r of records) {
@@ -186,9 +210,10 @@ export class Application {
 }
 
 class Folder {
-	constructor(app, name) {// {{{
+	constructor(app, parentFolder, name) {// {{{
 		this.application = app
 		this.open = false
+		this.parentFolder = parentFolder
 		this.folderName = name
 		this.subfolders = new Map()
 		this.records = []
@@ -205,11 +230,12 @@ class Folder {
 	}// }}}
 	addRecord(rec) {// {{{
 		this.records.push(rec)
+		rec.setFolder(this)
 	}// }}}
 	openFolder(recursive) {// {{{
 		this.open = true
-		this.div.classList.add('open')
+		this.div?.classList.add('open')
-		this.div.classList.remove('closed')
+		this.div?.classList.remove('closed')
 
 		if (recursive)
 			this.subfolders.forEach(folder => folder.openFolder(recursive))
@@ -280,6 +306,7 @@ class Record {
 	constructor(data) {// {{{
 		this.data = data || {}
 
+		this.folder = null
 		this.imgIcon = null
 		this.divFQDN = null
 		this.divType = null
@@ -337,6 +364,9 @@ class Record {
 
 		this.data[key] = value
 	}// }}}
+	setFolder(folder) {// {{{
+		this.folder = folder
+	}// }}}
 	render() {// {{{
 		if (this.divFQDN === null) {
 			this.imgIcon = document.createElement('img')
@@ -405,14 +435,36 @@ class Record {
 				// The data is read from the server/routeros device
 				// since it could have manipulated the data.
 				this.data = json.Record
-				if (created)
+				if (created) {
 					_app.records.push(this)
+				}
 
 				_app.cleanFolders()
 				_app.renderFolders()
 				_app.render()
+
+				// renderFolders is setting the folder the record resides in.
+				// It can now be expanded to the parent folder.
+				if (created) {
+					this.openParentFolders()
+					this.divFQDN.classList.add('created')
+					setTimeout(
+						() => this.divFQDN.classList.remove('created'),
+						1000,
+					)
+				}
 			})
 	}// }}}
+
+	openParentFolders(folder) {// {{{
+		if (folder === undefined)
+			folder = this.folder
+
+		folder?.openFolder(false)
+
+		if (folder?.parentFolder)
+			this.openParentFolders(folder.parentFolder)
+	}// }}}
 }
 
 class RecordDialog {