Fix Some errors

Fix Input-Fields (not all fixed <3 pls dome)

public/theme/admin/js/scripts.js

@@ -75,6 +75,10 @@ class VUtils {
         return valueOne === undefined ? valueTwo : valueOne;
     }
 
+    static tempId() {
+        return 'temp_' + Math.random().toString(36).substr(2, 16);
+    }
+
     static nodePrototypes() {
         Node.prototype.find = function (selector) {
             return this.closest(selector);
@@ -422,26 +426,61 @@ class FormHandler {
 }
 
 (function () {
-    const body = $('body');
-    body.addDelegatedEventListener('change input', 'input', (e, el) => {
-        let errorMessage = $('.error-message', el.find('form'));
-        if (errorMessage) {
-            errorMessage.classList.add('hide')
+    class VButton extends HTMLElement {
+        constructor() {
+            super();
+            let self = this;
+            self.id = self.id || VUtils.tempId();
+            self.label = document.createElement('label');
+            self.input = document.createElement('input');
+            self.errorBox = document.createElement('span');
+            self.errorBox.classList.add('error');
+            self.errorBox.innerHTML = self.dataset.error;
+            self.label.setAttribute('for', self.id);
+            self.input.id = self.id;
+            self.label.innerHTML = self.dataset.label;
+            self.input.value = self.innerHTML.trim();
+            self.innerHTML = '';
+            self.input.required = self.hasAttribute('required');
+            self.input.name = self.getAttribute('name');
+            self.appendChild(self.input)
+            self.appendChild(self.label)
+            self.appendChild(self.errorBox);
+            self.input.addMultiListener('change input', self.cb.bind(self));
         }
-        let parent = el.parentNode;
-        if (el.value === "") {
-            parent.classList.remove('focus')
-        } else {
-            parent.classList.add('focus')
+
+        connectedCallback() {
+            let cl = this.classList;
+            if (this.input.value === "") {
+                cl.remove('focus')
+            } else {
+                cl.add('focus')
+            }
         }
-        if (el.checkValidity()) {
-            parent.classList.add('valid');
-            parent.classList.remove('invalid');
-        } else {
-            parent.classList.remove('valid');
-            parent.classList.add('invalid');
+
+        cb(e) {
+            let el = e.currentTarget
+            let errorMessage = $('.error-message', el.find('form'));
+            if (errorMessage) {
+                errorMessage.classList.add('hide')
+            }
+            let cl = this.classList;
+            if (el.value === "") {
+                cl.remove('focus')
+            } else {
+                cl.add('focus')
+            }
+            if (el.checkValidity()) {
+                cl.add('valid');
+                cl.remove('invalid');
+            } else {
+                cl.remove('valid');
+                cl.add('invalid');
+            }
         }
-    })
+    }
+
+    customElements.define("v-button", VButton);
 
     if ($('#login')) {
         new FormHandler('form#login', 'body', () => {
@@ -450,4 +489,187 @@ class FormHandler {
             $('.error-message', el).classList.remove('hide');
         })
     }
+})();
+(() => {
+    class VEdit {
+        constructor(selector) {
+            let self = this;
+            self.editor = selector instanceof HTMLElement ? selector : $(selector);
+            self.todoOnKey = {};
+            self.keys = [];
+            self.backup = [];
+            self.taberr = [">", " ", "\n", "<"];
+            self.name = 'veditor-' + self.editor.id;
+            self.init();
+            self.selfClosing = ["img", "area", "base", "br", "col", "embed", "hr", "img", "input", "link", "menuitem", "meta", "param", "source", "track"];
+            self.restore();
+        }
+
+        init() {
+            let self = this;
+            self.editor.addEventListener('keydown', self.handleKey.bind(self));
+            self.addKey('Tab', self.pressTab.bind(self));
+            self.addKey('<', self.addEmptyTags.bind(self));
+            self.addKey('ctrl-z', self.undo.bind(self));
+            self.addKey('ctrl-s', self.store.bind(self));
+            self.addKey('ctrl-shift-S', self.delete.bind(self));
+            self.editor.classList.add(self.name, 'veditor')
+        }
+
+        registerSelfClosing(name) {
+            this.selfClosing.push(name);
+        }
+
+        restore() {
+            let item = localStorage.getItem(this.name);
+            if (item) {
+                this.editor.value = item;
+            }
+        }
+
+        delete() {
+            localStorage.removeItem(this.name);
+            console.log(`[VEdit] Editor: ${this.name} removed`);
+        }
+
+        store() {
+            localStorage.setItem(this.name, this.editor.value);
+            console.log(`[VEdit] Editor: ${this.name} saved`);
+        }
+
+        handleKey(e) {
+            let self = this;
+            if ((e.ctrlKey && e.key === 'Control')
+                || (e.shiftKey && e.key === 'Shift')) {
+                return;
+            }
+            let key;
+            if (e.ctrlKey && e.shiftKey) {
+                key = 'ctrl-shift-' + e.key;
+            } else if (e.ctrlKey) {
+                key = 'ctrl-' + e.key;
+            }
+            if (key) {
+                if (this.keys.indexOf(key) !== -1) {
+                    e.preventDefault();
+                    this.todoOnKey[key]();
+                    return;
+                }
+            }
+            let cont = self.editor.value;
+            const pos = self.editor.selectionStart
+            if (self.backup.length > 50) {
+                self.backup.shift();
+            }
+            self.backup.push([cont, pos]);
+            if (self.keys.indexOf(e.key) > -1) {
+                e.preventDefault();
+                let w = self.todoOnKey[e.key](pos, cont, this.editor);
+                w[0].push(cont.substr(pos))
+                self.afterWork(w);
+            }
+        }
+
+        undo() {
+            let back = this.backup.pop() || [this.editor.value, this.editor.selectionStart];
+            this.editor.value = back[0];
+            this.editor.setSelectionRange(back[1], back[1]);
+        }
+
+        afterWork(data) {
+            this.setText(data[0].join(""));
+            this.editor.setSelectionRange(data[1], data[1]);
+        }
+
+        setText(text) {
+            this.editor.value = text;
+        }
+
+        addKey(name, func) {
+            this.todoOnKey[name] = func;
+            this.keys.push(name);
+        }
+
+        addEmptyTags(pos, cont, e) {
+            return [[cont.substr(0, pos), '<>'], pos + 1];
+        }
+
+        pressTab(pos, cont, e) {
+            let self = this;
+            let sub, prevContent, moveTo = pos;
+            if (pos === 0 || self.taberr.indexOf(cont[pos - 1]) !== -1) {
+                sub = `    `;
+                moveTo += 4;
+                prevContent = cont.substr(0, pos);
+            } else if (self.taberr.indexOf(cont[pos - 1]) === -1) {
+                let i = 2;
+                while (self.taberr.indexOf(cont[pos - i]) === -1 && pos - i > 0) {
+                    i++;
+                }
+                if (pos - i > 0) {
+                    i -= 1;
+                }
+                let gen = self.generateTag(cont.substr(pos - i, i).trim());
+                sub = gen[0];
+                moveTo = pos - i + gen[1];
+                prevContent = cont.substr(0, pos - i);
+            }
+            return [[prevContent, sub], moveTo]
+        }
+
+        generateTag(sub) {
+            let raw,
+                groups = {'.': [], '#': []},
+                keys = Object.keys(groups),
+                cGroup = 'cl',
+                split = sub.split(/([#.])/g);
+            raw = split.shift();
+            for (let item of split) {
+                if (keys.indexOf(item) > -1) {
+                    cGroup = item;
+                    continue;
+                }
+                groups[cGroup].push(item);
+            }
+            let second = '';
+            if (groups["."].length > 0) {
+                second += ` class="${groups["."].join(" ")}"`;
+            }
+            if (groups['#'].length > 0) {
+                second += ` id="${groups['#'].join("-")}"`;
+            }
+            const c = this.selfClosing;
+            let close = '';
+            if (c.indexOf(raw.trim()) === -1) {
+                close = `</${raw}>`;
+            }
+            let pre = `<${raw}${second}>`;
+            return [`${pre}${close}`, pre.length];
+        }
+    }
+
+    class VEditor extends HTMLElement {
+        constructor() {
+            super();
+            this.editor = document.createElement('textarea');
+            this.editor.innerHTML = this.innerHTML;
+            this.editor.id = this.getAttribute('name');
+            for (let attribute of this.attributes) {
+                this.editor.setAttribute(attribute.name, attribute.value);
+            }
+            this.innerHTML = '';
+            this.appendChild(this.editor);
+            this.edit = new VEdit(this.editor);
+        }
+
+        connectedCallback() {
+            this.edit.restore();
+        }
+
+        disconnectedCallback() {
+            this.edit.save();
+        }
+    }
+
+    customElements.define("v-editor", VEditor);
 })();