Initial dashboard

static/js/lib/custom_html_element.mjs

@@ -0,0 +1,51 @@
+/* Use data-el or data-field attribute.
+ * Element with data-el="hum-ding" is accessible as this.elHumDing and fields with
+ * data-field="long-dong" as this.fieldLongDong.
+ *
+ * All field values can be retrieved with fieldValues() and uses the data-field attribute
+ * as LongDong as key.
+ */
+
+export class CustomHTMLElement extends HTMLElement {
+	constructor(useShadow) {// {{{
+		super()
+
+		this._fields = new Map()
+
+		const workOn = useShadow ? this.attachShadow({ mode: 'open' }) : this
+		workOn.appendChild(this.constructor.tmpl.content.cloneNode(true))
+		workOn.querySelectorAll('*').forEach(el => {
+			const field = el.dataset.field
+			if (field !== undefined) {
+				const fieldName = this.toElementName('field', field)
+				this[fieldName] = el
+				this._fields.set(this.toElementName('', field), el)
+			}
+
+			const name = el.dataset.el
+			if (name !== undefined) {
+				const elName = this.toElementName('el', name)
+				this[elName] = el
+				el.classList.add('el-' + name)
+			}
+		})
+	}// }}}
+	allFields() {// {{{
+		return this._fields
+	}// }}}
+	fieldValues() {// {{{
+		const state = {}
+		for (const [name, field] of this._fields) {
+			if (field.tagName.toLowerCase() == 'input' && field.getAttribute('type').toLowerCase() == 'checkbox')
+				state[name] = field.checked
+			else
+				state[name] = field.value
+
+		}
+		return state
+	}// }}}
+	toElementName(prefix, str) {// {{{
+		str = prefix + '-' + str
+		return str.replace(/-(id|[a-z])/g, match => match.toUpperCase().replace('-', ''))
+	}// }}}
+}