Fix Some errors
Fix Input-Fields (not all fixed <3 pls dome)
This commit is contained in:
parent
f7b7b6c956
commit
a34201ffc2
6 changed files with 308 additions and 134 deletions
|
|
@ -1 +1 @@
|
||||||
:focus{outline:0}*{box-sizing:border-box}body,html{width:100vw;height:100vh;overflow:hidden;padding:0;margin:0;background:#1f2857;background:linear-gradient(144deg,#1f2954 25%,#000 50%,#5e002c 80%);background-attachment:fixed;color:#fff;font-family:sans-serif;font-size:16px}.hide{display:none!important}v-table{display:block}v-table v-table-footer,v-table v-table-header,v-table v-table-row{display:grid;grid-auto-columns:1fr;grid-auto-flow:column;-moz-column-gap:20px;column-gap:20px}v-table v-table-header h2{text-align:center}v-table v-table-row{margin:10px 0}v-table .grid12{grid-template-columns:repeat(12,[col-start] 1fr);-moz-column-gap:5px;column-gap:5px}v-table .grid12 .col-1to4{grid-column:1/3}v-table .grid12 .col-1to6{grid-column:1/6}v-table .grid12 .col-5to6{grid-column:5/6}v-table .grid12 .col-6to11{grid-column:6/11}v-table .grid12 .col-6to9{grid-column:6/9}v-table .grid12 .col-9to10{grid-column:9/10}v-table .grid12 .col-11to13{grid-column:11/13}v-label,v-option,v-options,v-select{display:inline-block;box-sizing:border-box}v-select{display:block;position:relative;margin-bottom:.5rem}v-label{padding:.5rem 1rem;background-color:#3949ab;color:#fff;cursor:pointer;display:block;border-radius:4px}v-options{position:absolute;display:flex;border-radius:4px;flex-direction:column;overflow:hidden;max-height:0;top:.5rem;left:.5rem;background-color:#3949ab;z-index:1000;cursor:pointer;color:#fff;box-shadow:0 3px 6px rgba(0,0,0,.16),0 3px 6px rgba(0,0,0,.23)}v-option{padding:.5rem 1rem;min-width:200px}v-option:not([disabled]):hover{background-color:rgba(0,0,0,.3)}v-option[selected]{background-color:#3949ab;color:#fff}v-option[disabled]{color:#aaa}main{display:flex;height:100vh;overflow:hidden}.menu{width:220px;background-color:#1b1b1b;box-shadow:0 3px 6px rgba(0,0,0,.16),0 3px 6px rgba(0,0,0,.23);flex-shrink:0;display:flex;flex-direction:column}.menu .logo{text-align:center;font-family:monospace}.menu div[data-link]{padding:.75rem .5rem;position:relative}.menu div[data-link]:after{background-color:#3949ab;content:"";position:absolute;left:0;bottom:0;height:3px;width:100%;transform:scaleX(0);transition:transform .4s;transform-origin:left}.menu div[data-link]:hover:after{transform:scaleX(1)}.menu div[data-link]:last-child{margin-top:auto}.menu div[data-link].active{font-weight:700}.content-area{padding:0 1%;margin:1rem 1.5rem;flex-grow:1;overflow-y:auto;width:100%;max-height:100%;background:rgba(27,27,27,.5)}.content-area .inline{display:inline}.content-area .inline div{display:inline}.content-area .btn-line{margin-top:35px}.content-area .btn-line div{text-align:right}.content-area .btn-line div button{display:inline;margin-left:10px;min-width:100px}.content-area textarea{background:rgba(27,27,27,.5);color:#fff;margin:15px 0 0 0;font-family:sans-serif;font-size:1.1rem}.content-area .modules div{padding:6px 20px 6px 0}.content-area .icon-cont div{display:inline-block;vertical-align:middle;margin-top:5px}.content-area .icon-cont .icon{width:18px;height:18px;background-size:cover;margin:0 15px 0 0;fill:#fff}.content-area .icon-cont .icon-add{background-image:url(../images/icon/ic_add_circle_outline_24px.svg)}.content-area .icon-cont .icon-edit{background-image:url(../images/icon/ic_edit_24px.svg)}.content-area .icon-cont .icon-visibility{background-image:url(../images/icon/ic_visibility_24px.svg)}.content-area .icon-cont .icon-delete{background-image:url(../images/icon/ic_delete_24px.svg)}.content-area .icon-cont .icon-arrow-back{background-image:url(../images/icon/ic_arrow_back_24px.svg);width:24px;height:24px}.content-area .description{margin-top:25px}.content-area .fix-pad{padding-top:14px}
|
:focus{outline:0}*{box-sizing:border-box}body,html{width:100vw;height:100vh;overflow:hidden;padding:0;margin:0;background:#1f2857;background:linear-gradient(144deg,#1f2954 25%,#000 50%,#5e002c 80%);background-attachment:fixed;color:#fff;font-family:sans-serif;font-size:16px}.hide{display:none!important}v-table{display:block}v-table v-table-footer,v-table v-table-header,v-table v-table-row{display:grid;grid-auto-columns:1fr;grid-auto-flow:column;-moz-column-gap:20px;column-gap:20px}v-table v-table-header h2{text-align:center}v-table v-table-row{margin:10px 0}v-table .grid12{grid-template-columns:repeat(12,[col-start] 1fr);-moz-column-gap:5px;column-gap:5px}v-table .grid12 .col-1to4{grid-column:1/3}v-table .grid12 .col-1to6{grid-column:1/6}v-table .grid12 .col-5to6{grid-column:5/6}v-table .grid12 .col-6to11{grid-column:6/11}v-table .grid12 .col-6to9{grid-column:6/9}v-table .grid12 .col-9to10{grid-column:9/10}v-table .grid12 .col-11to13{grid-column:11/13}v-label,v-option,v-options,v-select{display:inline-block;box-sizing:border-box}v-select{display:block;position:relative;margin-bottom:.5rem}v-label{padding:.5rem 1rem;background-color:#3949ab;color:#fff;cursor:pointer;display:block;border-radius:4px}v-options{position:absolute;display:flex;border-radius:4px;flex-direction:column;overflow:hidden;max-height:0;top:.5rem;left:.5rem;background-color:#3949ab;z-index:1000;cursor:pointer;color:#fff;box-shadow:0 3px 6px rgba(0,0,0,.16),0 3px 6px rgba(0,0,0,.23)}v-option{padding:.5rem 1rem;min-width:200px}v-option:not([disabled]):hover{background-color:rgba(0,0,0,.3)}v-option[selected]{background-color:#3949ab;color:#fff}v-option[disabled]{color:#aaa}main{display:flex;height:100vh;overflow:hidden}.menu{width:220px;background-color:#1b1b1b;box-shadow:0 3px 6px rgba(0,0,0,.16),0 3px 6px rgba(0,0,0,.23);flex-shrink:0;display:flex;flex-direction:column}.menu .logo{text-align:center;font-family:monospace}.menu div[data-link]{padding:.75rem .5rem;position:relative}.menu div[data-link]:after{background-color:#3949ab;content:"";position:absolute;left:0;bottom:0;height:3px;width:100%;transform:scaleX(0);transition:transform .4s;transform-origin:left}.menu div[data-link]:hover:after{transform:scaleX(1)}.menu div[data-link]:last-child{margin-top:auto}.menu div[data-link].active{font-weight:700}.content-area{padding:0 1%;margin:1rem 1.5rem;flex-grow:1;overflow-y:auto;width:100%;max-height:100%;background:rgba(27,27,27,.5)}.content-area .inline{display:inline}.content-area .inline div{display:inline}.content-area .btn-line{margin-top:35px}.content-area .btn-line div{text-align:right}.content-area .btn-line div button{display:inline;margin-left:10px;min-width:100px}.content-area textarea{background:rgba(27,27,27,.5);color:#fff;margin:15px 0 0 0;font-family:sans-serif;font-size:1.1rem;min-width:100%}.content-area .modules div{padding:6px 20px 6px 0}.content-area .icon-cont div{display:inline-block;vertical-align:middle;margin-top:5px}.content-area .icon-cont .icon{width:18px;height:18px;background-size:cover;margin:0 15px 0 0;fill:#fff}.content-area .icon-cont .icon-add{background-image:url(../images/icon/ic_add_circle_outline_24px.svg)}.content-area .icon-cont .icon-edit{background-image:url(../images/icon/ic_edit_24px.svg)}.content-area .icon-cont .icon-visibility{background-image:url(../images/icon/ic_visibility_24px.svg)}.content-area .icon-cont .icon-delete{background-image:url(../images/icon/ic_delete_24px.svg)}.content-area .icon-cont .icon-arrow-back{background-image:url(../images/icon/ic_arrow_back_24px.svg);width:24px;height:24px}.content-area .description{margin-top:25px}.content-area .fix-pad{padding-top:14px}
|
||||||
|
|
@ -1 +1 @@
|
||||||
:focus{outline:0}*{box-sizing:border-box}body,html{width:100vw;height:100vh;overflow:hidden;padding:0;margin:0;background:#1f2857;background:linear-gradient(144deg,#1f2954 25%,#000 50%,#5e002c 80%);background-attachment:fixed;color:#fff;font-family:sans-serif;font-size:16px}.hide{display:none!important}.btn{border:none;background:#3949ab radial-gradient(circle at 0 0,#3949ab 0,rgba(0,0,0,.2) 100%) no-repeat;color:#fff;padding:5px 15px;margin:10px 0;cursor:pointer;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border-radius:4px;box-shadow:0 2px 5px 0 rgba(0,0,0,.26);overflow:hidden;display:flex;justify-content:center;align-items:center;transition:.5s}.btn--outline{background:0 0;border:1px solid #3949ab}.btn:focus{box-shadow:0 3px 8px 1px rgba(0,0,0,.4)}.btn--valid{background:#39ab48 radial-gradient(circle at 0 0,#39ab48 0,rgba(0,0,0,.2) 100%) no-repeat}.btn--accent{background:#ff0089 radial-gradient(circle at 0 0,#ff0089 0,rgba(0,0,0,.2) 100%) no-repeat}.btn--warn{background:#f87229 radial-gradient(circle at 0 0,#f87229 0,rgba(0,0,0,.2) 100%) no-repeat}.btn-fab{border-radius:2rem;width:2em;height:2em;padding:5px}.btn-ripple{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;background:0 0}.btn-ripple__effect{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);opacity:1;width:200%;height:0;padding-bottom:200%;border-radius:50%;background:rgba(190,190,190,.3);-webkit-animation:a-ripple .4s ease-in;animation:a-ripple .4s ease-in}.btn-ripple__effect.to-remove{-webkit-animation:remove-ripple .2s linear;animation:remove-ripple .2s linear}.btn--outline .btn-ripple__effect{background:rgba(57,73,171,.5);z-index:-1}.btn__content{z-index:1;font-weight:400;pointer-events:none}@-webkit-keyframes remove-ripple{from{opacity:1}to{opacity:0}}@keyframes remove-ripple{from{opacity:1}to{opacity:0}}@-webkit-keyframes a-ripple{0%{opacity:0;padding-bottom:0;width:0}25%{opacity:1}100%{width:200%;padding-bottom:200%}}@keyframes a-ripple{0%{opacity:0;padding-bottom:0;width:0}25%{opacity:1}100%{width:200%;padding-bottom:200%}}.input-group input{background-color:rgba(0,0,0,.4);border:none;border-bottom:2px solid #3949ab;color:#fff;padding:6px}.input-group input:focus,.input-group.focus input{border-color:#ff0089}.input-group.valid input{border-color:#39ab48}.input-group.invalid input{border-color:#cf1b1b}.input-group{display:flex;flex-direction:column;margin-bottom:3px;position:relative;padding-top:.7rem}.input-group.no-space{padding-top:.1rem}.input-group label{font-size:.7rem;position:absolute;top:.7rem;left:6px;height:1rem;vertical-align:middle;transform:translateY(50%);color:#dcdcdc;transition:all .2s ease-out}.input-group input:focus~label,.input-group.focus label{top:0;left:0;transform:translateY(0);font-size:.6rem}.input-group .error{display:none}.input-group.invalid .error{margin-top:2px;display:block;font-size:.7rem;color:#f32f32}.switch{display:flex;flex-direction:row;align-items:center;padding:5px 20px 5px 0}.switch input{position:absolute;-webkit-appearance:none;-moz-appearance:none;appearance:none;opacity:0}.switch label{display:block;border-radius:10px;width:40px;height:20px;background-color:#e9e9e9;position:relative;cursor:pointer;margin-right:.5rem}.switch label:after{content:'';background-color:#c51162;position:absolute;top:2px;left:2px;height:16px;width:16px;border-radius:10px;transition:.5s}.switch input:checked+label:after{transform:translateX(20px);background-color:#007769}
|
:focus{outline:0}*{box-sizing:border-box}body,html{width:100vw;height:100vh;overflow:hidden;padding:0;margin:0;background:#1f2857;background:linear-gradient(144deg,#1f2954 25%,#000 50%,#5e002c 80%);background-attachment:fixed;color:#fff;font-family:sans-serif;font-size:16px}.hide{display:none!important}.btn{border:none;background:#3949ab radial-gradient(circle at 0 0,#3949ab 0,rgba(0,0,0,.2) 100%) no-repeat;color:#fff;padding:7px 1.1rem;margin:10px 0;cursor:pointer;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border-radius:4px;box-shadow:0 2px 5px 0 rgba(0,0,0,.26);overflow:hidden;display:flex;justify-content:center;align-items:center;transition:.5s}.btn--outline{background:0 0;border:1px solid #3949ab}.btn:focus{box-shadow:0 3px 8px 1px rgba(0,0,0,.4)}.btn--valid{background:#39ab48 radial-gradient(circle at 0 0,#39ab48 0,rgba(0,0,0,.2) 100%) no-repeat}.btn--accent{background:#ff0089 radial-gradient(circle at 0 0,#ff0089 0,rgba(0,0,0,.2) 100%) no-repeat}.btn--warn{background:#f87229 radial-gradient(circle at 0 0,#f87229 0,rgba(0,0,0,.2) 100%) no-repeat}.btn-fab{border-radius:2rem;width:2em;height:2em;padding:5px}.btn-ripple{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;background:0 0}.btn-ripple__effect{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);opacity:1;width:200%;height:0;padding-bottom:200%;border-radius:50%;background:rgba(190,190,190,.3);-webkit-animation:a-ripple .4s ease-in;animation:a-ripple .4s ease-in}.btn-ripple__effect.to-remove{-webkit-animation:remove-ripple .2s linear;animation:remove-ripple .2s linear}.btn--outline .btn-ripple__effect{background:rgba(57,73,171,.5);z-index:-1}.btn__content{z-index:1;font-weight:400;pointer-events:none}@-webkit-keyframes remove-ripple{from{opacity:1}to{opacity:0}}@keyframes remove-ripple{from{opacity:1}to{opacity:0}}@-webkit-keyframes a-ripple{0%{opacity:0;padding-bottom:0;width:0}25%{opacity:1}100%{width:200%;padding-bottom:200%}}@keyframes a-ripple{0%{opacity:0;padding-bottom:0;width:0}25%{opacity:1}100%{width:200%;padding-bottom:200%}}.input-group input{background-color:rgba(0,0,0,.4);border:none;border-bottom:2px solid #3949ab;color:#fff;padding:calc(.75rem - 1px)}.input-group input:focus,.input-group.focus input{border-color:#ff0089}.input-group.valid input{border-color:#39ab48}.input-group.invalid input{border-color:#cf1b1b}.input-group{display:flex;flex-direction:column;margin-bottom:3px;position:relative;padding-top:.7rem}.input-group.no-space{padding-top:.1rem}.input-group label{font-size:.7rem;position:absolute;top:.7rem;left:6px;height:1.5rem;pointer-events:none;vertical-align:middle;transform:translateY(50%);color:#dcdcdc;transition:all .2s ease-out}.input-group input:focus~label,.input-group.focus label{top:0;left:0;transform:translateY(0);font-size:.6rem}.input-group .error{display:none}.input-group.invalid .error{margin-top:2px;display:block;font-size:.7rem;color:#f32f32}.switch{display:flex;flex-direction:row;align-items:center;padding:5px 20px 5px 0}.switch input{position:absolute;-webkit-appearance:none;-moz-appearance:none;appearance:none;opacity:0}.switch label{display:block;border-radius:10px;width:40px;height:20px;background-color:#e9e9e9;position:relative;cursor:pointer;margin-right:.5rem}.switch label:after{content:'';background-color:#c51162;position:absolute;top:2px;left:2px;height:16px;width:16px;border-radius:10px;transition:.5s}.switch input:checked+label:after{transform:translateX(20px);background-color:#007769}
|
||||||
|
|
@ -75,6 +75,10 @@ class VUtils {
|
||||||
return valueOne === undefined ? valueTwo : valueOne;
|
return valueOne === undefined ? valueTwo : valueOne;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
static tempId() {
|
||||||
|
return 'temp_' + Math.random().toString(36).substr(2, 16);
|
||||||
|
}
|
||||||
|
|
||||||
static nodePrototypes() {
|
static nodePrototypes() {
|
||||||
Node.prototype.find = function (selector) {
|
Node.prototype.find = function (selector) {
|
||||||
return this.closest(selector);
|
return this.closest(selector);
|
||||||
|
|
@ -422,26 +426,61 @@ class FormHandler {
|
||||||
}
|
}
|
||||||
|
|
||||||
(function () {
|
(function () {
|
||||||
const body = $('body');
|
class VButton extends HTMLElement {
|
||||||
body.addDelegatedEventListener('change input', 'input', (e, el) => {
|
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));
|
||||||
|
}
|
||||||
|
|
||||||
|
connectedCallback() {
|
||||||
|
let cl = this.classList;
|
||||||
|
if (this.input.value === "") {
|
||||||
|
cl.remove('focus')
|
||||||
|
} else {
|
||||||
|
cl.add('focus')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
cb(e) {
|
||||||
|
let el = e.currentTarget
|
||||||
let errorMessage = $('.error-message', el.find('form'));
|
let errorMessage = $('.error-message', el.find('form'));
|
||||||
if (errorMessage) {
|
if (errorMessage) {
|
||||||
errorMessage.classList.add('hide')
|
errorMessage.classList.add('hide')
|
||||||
}
|
}
|
||||||
let parent = el.parentNode;
|
let cl = this.classList;
|
||||||
if (el.value === "") {
|
if (el.value === "") {
|
||||||
parent.classList.remove('focus')
|
cl.remove('focus')
|
||||||
} else {
|
} else {
|
||||||
parent.classList.add('focus')
|
cl.add('focus')
|
||||||
}
|
}
|
||||||
if (el.checkValidity()) {
|
if (el.checkValidity()) {
|
||||||
parent.classList.add('valid');
|
cl.add('valid');
|
||||||
parent.classList.remove('invalid');
|
cl.remove('invalid');
|
||||||
} else {
|
} else {
|
||||||
parent.classList.remove('valid');
|
cl.remove('valid');
|
||||||
parent.classList.add('invalid');
|
cl.add('invalid');
|
||||||
}
|
}
|
||||||
})
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
customElements.define("v-button", VButton);
|
||||||
|
|
||||||
if ($('#login')) {
|
if ($('#login')) {
|
||||||
new FormHandler('form#login', 'body', () => {
|
new FormHandler('form#login', 'body', () => {
|
||||||
|
|
@ -451,3 +490,186 @@ class FormHandler {
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
})();
|
})();
|
||||||
|
(() => {
|
||||||
|
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);
|
||||||
|
})();
|
||||||
2
public/theme/admin/js/scripts.min.js
vendored
2
public/theme/admin/js/scripts.min.js
vendored
File diff suppressed because one or more lines are too long
|
|
@ -29,7 +29,7 @@ class User
|
||||||
if (isset($_SESSION['userID']) || $this->username !== 'GUEST') {
|
if (isset($_SESSION['userID']) || $this->username !== 'GUEST') {
|
||||||
// try to load user from id!
|
// try to load user from id!
|
||||||
$user = DatabaseHandler::get()->getOne("SELECT * FROM users WHERE id = :id OR username = :name AND isActive = 1", [
|
$user = DatabaseHandler::get()->getOne("SELECT * FROM users WHERE id = :id OR username = :name AND isActive = 1", [
|
||||||
':id' => $_SESSION['userID'],
|
':id' => $_SESSION['userID'] ?? -1,
|
||||||
':name' => $this->username
|
':name' => $this->username
|
||||||
]);
|
]);
|
||||||
if ($user !== null) {
|
if ($user !== null) {
|
||||||
|
|
|
||||||
|
|
@ -33,11 +33,13 @@
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<h3>Add new Role</h3>
|
<h3>Add new Role</h3>
|
||||||
<div class="input-group">
|
<v-button
|
||||||
<input id="new-role-name" required name="newRoleName">
|
class="input-group"
|
||||||
<label for="new-role-name">New Role Name</label>
|
data-label="New Role Name"
|
||||||
<span class="error">New Role Name is required</span>
|
id="new-role-name"
|
||||||
</div>
|
required
|
||||||
|
name="newRoleName"
|
||||||
|
data-error="New Role Name is required"></v-button>
|
||||||
<button class="btn btn--primary">
|
<button class="btn btn--primary">
|
||||||
<span class="btn-ripple"></span>
|
<span class="btn-ripple"></span>
|
||||||
<span class="btn__content">Add</span>
|
<span class="btn__content">Add</span>
|
||||||
|
|
@ -70,11 +72,13 @@
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<h3>Role Name</h3>
|
<h3>Role Name</h3>
|
||||||
<div class="input-group">
|
<v-button
|
||||||
<input id="change-role-name" required name="roleName">
|
class="input-group"
|
||||||
<label for="change-role-name">Change Name</label>
|
data-label="Change Name"
|
||||||
<span class="error">New Role Name is required</span>
|
id="change-role-name"
|
||||||
</div>
|
required
|
||||||
|
name="roleName"
|
||||||
|
data-error="Role Name is required"></v-button>
|
||||||
</div>
|
</div>
|
||||||
</v-table-row>
|
</v-table-row>
|
||||||
<v-table-row>
|
<v-table-row>
|
||||||
|
|
@ -206,7 +210,7 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="icon-cont">
|
<div class="icon-cont">
|
||||||
<div class="icon icon-edit"></div>
|
<div class="icon icon-edit"></div>
|
||||||
<div class="text">versustunez (Maurice Grönewald)</div>
|
<div class="text">versustunez (Maurice Grönwoldt)</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="icon-cont">
|
<div class="icon-cont">
|
||||||
<div class="icon icon-edit"></div>
|
<div class="icon icon-edit"></div>
|
||||||
|
|
@ -216,11 +220,12 @@
|
||||||
<div>
|
<div>
|
||||||
<h3>Add new User</h3>
|
<h3>Add new User</h3>
|
||||||
<div class="add-new-role max-width">
|
<div class="add-new-role max-width">
|
||||||
<div class="input-group">
|
<v-button
|
||||||
<input id="new-user-name" required name="newUserName">
|
class="input-group"
|
||||||
<label for="new-user-name">New User Name</label>
|
data-label="New User Name"
|
||||||
<span class="error">New User Name is required</span>
|
required
|
||||||
</div>
|
name="newUserName"
|
||||||
|
data-error="New User Name is required"></v-button>
|
||||||
</div>
|
</div>
|
||||||
<button class="btn btn--primary">
|
<button class="btn btn--primary">
|
||||||
<span class="btn-ripple"></span>
|
<span class="btn-ripple"></span>
|
||||||
|
|
@ -245,28 +250,38 @@
|
||||||
</v-table-row>
|
</v-table-row>
|
||||||
<v-table-row>
|
<v-table-row>
|
||||||
<div>
|
<div>
|
||||||
<div class="description">Username:</div>
|
<v-button
|
||||||
<div class="input-group">
|
class="input-group"
|
||||||
<input id="new-user-name" required name="newUserName">
|
data-label="Username"
|
||||||
<label for="new-user-name">EngineerTrooper</label>
|
required
|
||||||
<span class="error">User Name is required</span>
|
name="newUserName"
|
||||||
</div>
|
data-error="New User Name is required">EngineerTrooper
|
||||||
<div class="description">Author Name:</div>
|
</v-button>
|
||||||
<div class="input-group">
|
<v-button
|
||||||
<input id="new-author-name" required name="newAuthorName">
|
class="input-group"
|
||||||
<label for="new-author-name">Dominic Seela</label>
|
data-label="Author Name"
|
||||||
<span class="error">Author Name is required</span>
|
required
|
||||||
</div>
|
name="newAuthorName"
|
||||||
|
data-error="Author Name is required">Dominic Seela
|
||||||
|
</v-button>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<div class="description">E-Mail:</div>
|
<v-button
|
||||||
<div class="input-group">
|
class="input-group"
|
||||||
<input id="new-email-address" required name="newEMailAddress" value="kontakt@engineertrooper.com">
|
data-label="E-Mail"
|
||||||
<label for="new-email-address">kontakt@engineertrooper.com</label>
|
required
|
||||||
<span class="error">E-Mail Address is required</span>
|
name="newEMailAddress"
|
||||||
</div>
|
data-error="E-Mail Address is required">kontakt@engineertrooper.com
|
||||||
|
</v-button>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
|
<v-button
|
||||||
|
class="input-group"
|
||||||
|
data-label="E-Mail"
|
||||||
|
required
|
||||||
|
name="newEMailAddress"
|
||||||
|
data-error="E-Mail Address is required">kontakt@engineertrooper.com
|
||||||
|
</v-button>
|
||||||
<div class="description">New Password:</div>
|
<div class="description">New Password:</div>
|
||||||
<div class="input-group">
|
<div class="input-group">
|
||||||
<input id="new-password" required name="newPassword">
|
<input id="new-password" required name="newPassword">
|
||||||
|
|
@ -302,73 +317,6 @@
|
||||||
</v-table-footer>
|
</v-table-footer>
|
||||||
</v-table>
|
</v-table>
|
||||||
|
|
||||||
|
|
||||||
<v-table>
|
|
||||||
<v-table-header>
|
|
||||||
<h2>User: engineertrooper</h2>
|
|
||||||
</v-table-header>
|
|
||||||
<v-table-row>
|
|
||||||
<div class="icon-cont">
|
|
||||||
<div class="icon icon-arrow-back"></div>
|
|
||||||
</div>
|
|
||||||
</v-table-row>
|
|
||||||
<v-table-row>
|
|
||||||
<div>
|
|
||||||
<div class="description">Username:</div>
|
|
||||||
<div class="input-group">
|
|
||||||
<input id="new-user-name" required name="newUserName" value="engineertrooper">
|
|
||||||
<span class="error">User Name is required</span>
|
|
||||||
</div>
|
|
||||||
<div class="description">Author Name:</div>
|
|
||||||
<div class="input-group">
|
|
||||||
<input id="new-author-name" required name="newAuthorName" value="Dominic Seela">
|
|
||||||
<span class="error">Author Name is required</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<div class="description">E-Mail:</div>
|
|
||||||
<div class="input-group">
|
|
||||||
<input id="new-email-address" required name="newEMailAddress" value="kontakt@engineertrooper.com">
|
|
||||||
<span class="error">E-Mail Address is required</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<div class="description">New Password:</div>
|
|
||||||
<div class="input-group">
|
|
||||||
<input id="new-password" required name="newPassword">
|
|
||||||
<label for="new-password"></label>
|
|
||||||
<span class="error">New Password is required</span>
|
|
||||||
</div>
|
|
||||||
<div class="description">New Password repeat:</div>
|
|
||||||
<div class="input-group">
|
|
||||||
<input id="new-password-repeat" required name="newPasswordRepeat">
|
|
||||||
<label for="new-password-repeat"></label>
|
|
||||||
<span class="error">New Password Repeat is required</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</v-table-row>
|
|
||||||
<v-table-row class="btn-line">
|
|
||||||
<div>
|
|
||||||
<button class="btn btn--valid">
|
|
||||||
<span class="btn-ripple"></span>
|
|
||||||
<span class="btn__content">Save</span>
|
|
||||||
</button>
|
|
||||||
<button class="btn btn--primary">
|
|
||||||
<span class="btn-ripple"></span>
|
|
||||||
<span class="btn__content">Reset</span>
|
|
||||||
</button>
|
|
||||||
<button class="btn btn--warn">
|
|
||||||
<span class="btn-ripple"></span>
|
|
||||||
<span class="btn__content">Delete User</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</v-table-row>
|
|
||||||
<v-table-footer>
|
|
||||||
Dies ist der Footer.
|
|
||||||
</v-table-footer>
|
|
||||||
</v-table>
|
|
||||||
|
|
||||||
|
|
||||||
<v-table>
|
<v-table>
|
||||||
<v-table-header>
|
<v-table-header>
|
||||||
<h2>Pages</h2>
|
<h2>Pages</h2>
|
||||||
|
|
@ -463,11 +411,13 @@
|
||||||
<v-table>
|
<v-table>
|
||||||
<div>
|
<div>
|
||||||
<h3>Add new Page</h3>
|
<h3>Add new Page</h3>
|
||||||
<div class="input-group">
|
<v-button
|
||||||
<input id="new-user-name" required name="newUserName">
|
class="input-group"
|
||||||
<label for="new-user-name">New Page Name</label>
|
data-label="New Page Name"
|
||||||
<span class="error">New Page Name is required</span>
|
id="new-page-name"
|
||||||
</div>
|
required
|
||||||
|
name="newPageName"
|
||||||
|
data-error="New Page Name is required"></v-button>
|
||||||
<button class="btn btn--primary">
|
<button class="btn btn--primary">
|
||||||
<span class="btn-ripple"></span>
|
<span class="btn-ripple"></span>
|
||||||
<span class="btn__content">Add Page</span>
|
<span class="btn__content">Add Page</span>
|
||||||
|
|
@ -493,14 +443,16 @@
|
||||||
<h3>Seitenname:</h3>
|
<h3>Seitenname:</h3>
|
||||||
</v-table-row>
|
</v-table-row>
|
||||||
<v-table-row>
|
<v-table-row>
|
||||||
<div class="input-group">
|
<v-button
|
||||||
<input id="new-page-name" required name="newPageName">
|
class="input-group"
|
||||||
<label for="new-role-name">New Page Name</label>
|
data-label="New Page Name"
|
||||||
<span class="error">New Page Name is required</span>
|
id="new-page-name"
|
||||||
</div>
|
required
|
||||||
|
name="newPageName"
|
||||||
|
data-error="New Page Name is required"></v-button>
|
||||||
</v-table-row>
|
</v-table-row>
|
||||||
<v-table-row>
|
<v-table-row>
|
||||||
<textarea name="pageTextArea" rows="25">!</textarea>
|
<v-editor name="pageTextArea" rows="25">!</v-editor>
|
||||||
</v-table-row>
|
</v-table-row>
|
||||||
<v-table-row class="btn-line">
|
<v-table-row class="btn-line">
|
||||||
<div>
|
<div>
|
||||||
|
|
@ -525,7 +477,7 @@
|
||||||
<v-label empty="Current Author"></v-label>
|
<v-label empty="Current Author"></v-label>
|
||||||
<v-options>
|
<v-options>
|
||||||
<v-option value="engineertrooper">engineertrooper (Dominic Seela)</v-option>
|
<v-option value="engineertrooper">engineertrooper (Dominic Seela)</v-option>
|
||||||
<v-option value="versustunez">versustunez (Maurice Grönewald)</v-option>
|
<v-option value="versustunez">versustunez (Maurice Grönwoldt)</v-option>
|
||||||
</v-options>
|
</v-options>
|
||||||
</v-select>
|
</v-select>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue