init
This commit is contained in:
commit
3d91068e08
71 changed files with 4490 additions and 0 deletions
10
src/app.path
Normal file
10
src/app.path
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
@import External/external
|
||||
Core/Template
|
||||
Core/CustomElements
|
||||
Core/Config
|
||||
Core/Notification
|
||||
Core/ModalController
|
||||
Core/EventHandler
|
||||
Core/Registry
|
||||
|
||||
app
|
||||
44
src/app/Core/Config.js
Normal file
44
src/app/Core/Config.js
Normal file
|
|
@ -0,0 +1,44 @@
|
|||
(() => {
|
||||
class Config {
|
||||
constructor() {
|
||||
this._config = {};
|
||||
this.updateCB = {};
|
||||
}
|
||||
|
||||
get data() {
|
||||
return this._config;
|
||||
}
|
||||
|
||||
get(key, def = null) {
|
||||
if (this._config[key] !== undefined) {
|
||||
return this._config[key];
|
||||
}
|
||||
this.set(key, def);
|
||||
return def;
|
||||
}
|
||||
|
||||
getFloat(key, def = 0) {
|
||||
return parseFloat(this.get(key, def));
|
||||
}
|
||||
|
||||
getInt(key, def) {
|
||||
return parseInt(this.get(key, def));
|
||||
}
|
||||
|
||||
set(key, value) {
|
||||
this._config[key] = value;
|
||||
if (this.updateCB[key]) {
|
||||
this.updateCB[key](value);
|
||||
}
|
||||
}
|
||||
|
||||
onUpdate(s, cb) {
|
||||
this.updateCB[s] = cb;
|
||||
}
|
||||
}
|
||||
|
||||
moduleLoader.isModuleLoaded(['Registry'], () => {
|
||||
window.config = new Config();
|
||||
registry.set('config', window.config);
|
||||
});
|
||||
})();
|
||||
257
src/app/Core/CustomElements.js
Normal file
257
src/app/Core/CustomElements.js
Normal file
|
|
@ -0,0 +1,257 @@
|
|||
(() => {
|
||||
|
||||
class NavItem extends HTMLElement {
|
||||
constructor() {
|
||||
super()
|
||||
if (!this.hasAttribute('tabindex')) {
|
||||
this.setAttribute('tabindex', '0');
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
class VInput extends HTMLElement {
|
||||
constructor() {
|
||||
super();
|
||||
let self = this;
|
||||
self.id = self.id || VUtils.tempId();
|
||||
let val = self.innerHTML;
|
||||
self.innerHTML = '';
|
||||
let input = self.input = self.createNew('input', {id: self.id})
|
||||
let label = self.createNew('label', {content: self.dataset.label});
|
||||
self.createNew('span', {classes: 'error', content: self.dataset.error});
|
||||
label.setAttribute('for', self.id);
|
||||
input.type = self.getAttribute('type') || 'text';
|
||||
input.value = val.trim();
|
||||
input.required = self.hasAttribute('required');
|
||||
input.name = self.getAttribute('name');
|
||||
input.addMultiListener('change input', self.cb.bind(self));
|
||||
}
|
||||
|
||||
get value() {
|
||||
return this.input.value;
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
this.cb({currentTarget: this.input}, true);
|
||||
}
|
||||
|
||||
cb(e, noInvalid) {
|
||||
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 {
|
||||
if (!noInvalid) {
|
||||
cl.remove('valid');
|
||||
cl.add('invalid');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
class VSwitch extends HTMLElement {
|
||||
constructor() {
|
||||
super();
|
||||
const id = this.dataset.id || VUtils.tempId();
|
||||
$('input', this).id = id;
|
||||
$('label', this).setAttribute('for', id);
|
||||
}
|
||||
}
|
||||
|
||||
class VSlider extends HTMLElement {
|
||||
constructor() {
|
||||
super();
|
||||
this.input = $('input', this);
|
||||
this.input.id = this.dataset.id || VUtils.tempId();
|
||||
this.input.addEventListener('input', this.changeValue.bind(this));
|
||||
this.cur = $('.current', this);
|
||||
this.cur.addEventListener('input', this.onChange.bind(this));
|
||||
this.cur.addEventListener('keypress', this.onKey.bind(this));
|
||||
this.cur.addEventListener('focusout', this.onChange.bind(this));
|
||||
this.checkStepSize();
|
||||
this.minLabel = $('.min', this);
|
||||
this.maxLabel = $('.max', this);
|
||||
}
|
||||
|
||||
checkStepSize() {
|
||||
const stepSize = this.input.getAttribute('step');
|
||||
const max = parseFloat(this.input.getAttribute('max'));
|
||||
const min = parseFloat(this.input.getAttribute('min'));
|
||||
if (stepSize === "" && max - min <= 1) {
|
||||
this.input.setAttribute('step', "0.05");
|
||||
}
|
||||
}
|
||||
|
||||
set value(value) {
|
||||
this.input.value = value;
|
||||
this.changeValue();
|
||||
this.dispatchEvent(new Event('input'));
|
||||
}
|
||||
|
||||
get value() {
|
||||
return this.input.value;
|
||||
}
|
||||
|
||||
set max(value) {
|
||||
this.input.max = value;
|
||||
this.maxLabel.innerHTML = value;
|
||||
}
|
||||
|
||||
get max() {
|
||||
return this.input.max;
|
||||
}
|
||||
|
||||
set min(value) {
|
||||
this.input.min = value;
|
||||
this.minLabel.innerHTML = value;
|
||||
}
|
||||
|
||||
get min() {
|
||||
return this.input.min;
|
||||
}
|
||||
|
||||
onKey(evt) {
|
||||
const code = evt.keyCode;
|
||||
if (code === 44 || code === 46) return;
|
||||
if (code < 48 || code > 57 || code === 13) evt.preventDefault();
|
||||
}
|
||||
|
||||
changeValue() {
|
||||
this.cur.innerText = this.input.value;
|
||||
}
|
||||
|
||||
onChange(e) {
|
||||
if (e.type === 'focusout') {
|
||||
this.cur.innerText = this.input.value;
|
||||
return;
|
||||
}
|
||||
try {
|
||||
const text = this.cur.innerText.trim();
|
||||
if (text === '') {
|
||||
this.cur.innerText = 0;
|
||||
}
|
||||
let val = parseFloat(text.replace(",", "."));
|
||||
let min = parseFloat(this.input.getAttribute('min'));
|
||||
let max = parseFloat(this.input.getAttribute('max'));
|
||||
if (val < min) val = min;
|
||||
if (val > max) val = max;
|
||||
if (isNaN(val)) {
|
||||
val = this.input.value;
|
||||
}
|
||||
let step = this.input.step || 1;
|
||||
if (Math.floor(step) === step) {
|
||||
val = Math.round(val);
|
||||
}
|
||||
this.input.value = val;
|
||||
} catch (err) {
|
||||
this.cur.innerText = this.input.value;
|
||||
PrettyConsole.error(VSlider, err);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
class VColor extends HTMLElement {
|
||||
constructor() {
|
||||
super();
|
||||
this.input = $('input', this);
|
||||
this.blob = $('.colorBlob', this);
|
||||
this.addEventListener('input', this.onChange.bind(this));
|
||||
}
|
||||
|
||||
onChange() {
|
||||
requestAnimationFrame(() => {
|
||||
this.blob.style.backgroundColor = this.input.value;
|
||||
});
|
||||
}
|
||||
|
||||
set value(value) {
|
||||
this.input.value = value;
|
||||
this.onChange();
|
||||
this.dispatchEvent(new Event('input'));
|
||||
}
|
||||
|
||||
get value() {
|
||||
return this.input.value;
|
||||
}
|
||||
}
|
||||
|
||||
class VCollapseHead extends HTMLElement {
|
||||
constructor() {
|
||||
super();
|
||||
if (!$('.btn-ripple', this)) {
|
||||
this.createNew('div', {
|
||||
classes: ['ripple']
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
class GUIItem extends HTMLElement {
|
||||
constructor() {
|
||||
super();
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
requestAnimationFrame(() => {
|
||||
this.update();
|
||||
})
|
||||
}
|
||||
|
||||
update() {
|
||||
let bindItem = $('[data-bind]', this);
|
||||
if (bindItem && bindItem.dataset.bind && bindItem.dataset.bind.trim() !== '') {
|
||||
let bind = bindItem.dataset.bind;
|
||||
if (bindItem.nodeName === 'INPUT' && bindItem.type === 'checkbox') {
|
||||
bindItem.checked = config.get(bind, bindItem.checked);
|
||||
} else if (bindItem.nodeName === 'V-SELECT') {
|
||||
this.initVSelect(bindItem, bind);
|
||||
} else {
|
||||
bindItem.value = config.get(bind, bindItem.value);
|
||||
}
|
||||
if (!bindItem._hasEvent) {
|
||||
bindItem.addEventListener('input', () => {
|
||||
if (bindItem.nodeName === 'INPUT' && bindItem.type === 'checkbox') {
|
||||
config.set(bind, bindItem.checked);
|
||||
} else if (bindItem.nodeName === 'V-SELECT') {
|
||||
config.set(bind, bindItem.rawValue);
|
||||
} else {
|
||||
config.set(bind, bindItem.value);
|
||||
}
|
||||
bindItem._hasEvent = true;
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
initVSelect(bindItem, bind) {
|
||||
let value = config.get(bind, bindItem.rawValue).toString().split(", ");
|
||||
bindItem.options.forEach(item => {
|
||||
if (value.indexOf(item.value) === -1) {
|
||||
item.removeAttribute('selected');
|
||||
} else {
|
||||
item.setAttribute('selected', value.indexOf(item.value) !== -1);
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
customElements.define("v-input", VInput);
|
||||
customElements.define("v-switch", VSwitch);
|
||||
customElements.define("v-slider", VSlider);
|
||||
customElements.define("v-color", VColor);
|
||||
customElements.define("nav-item", NavItem);
|
||||
customElements.define("v-gui-item", GUIItem);
|
||||
customElements.define("v-collapse-head", VCollapseHead);
|
||||
})();
|
||||
52
src/app/Core/EventHandler.js
Normal file
52
src/app/Core/EventHandler.js
Normal file
|
|
@ -0,0 +1,52 @@
|
|||
(() => {
|
||||
class EventHandler {
|
||||
constructor() {
|
||||
this.events = {};
|
||||
document.body.addDelegatedEventListener('click', '[data-event]', this.handleClickEvent.bind(this))
|
||||
}
|
||||
|
||||
handleClickEvent(ev, el) {
|
||||
this.send(el.dataset.event, el);
|
||||
}
|
||||
|
||||
addEvent(events, cb) {
|
||||
let names = events.split(",");
|
||||
for (let name of names) {
|
||||
this.events[name.trim()] = cb;
|
||||
}
|
||||
}
|
||||
|
||||
addEvents(obj) {
|
||||
let keys = Object.keys(obj);
|
||||
for (let key of keys) {
|
||||
this.addEvent(key, obj[key]);
|
||||
}
|
||||
}
|
||||
|
||||
handleEvent(event) {
|
||||
let data = event.data;
|
||||
if (!data.cmd) {
|
||||
return false;
|
||||
}
|
||||
return this.send(data.cmd, data.data, data.status);
|
||||
}
|
||||
|
||||
// will send the request to internal events
|
||||
send(name, data, status = 'success') {
|
||||
if (this.events[name]) {
|
||||
try {
|
||||
this.events[name](data, status);
|
||||
} catch (e) {
|
||||
PrettyConsole.error(EventHandler, e.message);
|
||||
}
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
moduleLoader.registerInit(i => {
|
||||
window.eventHandler = new EventHandler();
|
||||
moduleLoader.finishModule('EventHandler');
|
||||
});
|
||||
})();
|
||||
13
src/app/Core/Math.js
Normal file
13
src/app/Core/Math.js
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
class VMath {
|
||||
static lerp(a, b, f) {
|
||||
return (a + (b - a) * f);
|
||||
}
|
||||
|
||||
static clamp(value, min, max) {
|
||||
return value < min ? min : value > max ? max : value;
|
||||
}
|
||||
|
||||
static easeIn(a) {
|
||||
return a * a * a;
|
||||
}
|
||||
}
|
||||
96
src/app/Core/ModalController.js
Normal file
96
src/app/Core/ModalController.js
Normal file
|
|
@ -0,0 +1,96 @@
|
|||
class ModalController {
|
||||
constructor() {
|
||||
const self = this;
|
||||
self.modalContainer = $('v-modal-container');
|
||||
self.observer = new MutationObserver(function () {
|
||||
if (self.modalContainer.children.length > 0) {
|
||||
self.modalContainer.classList.add('open');
|
||||
} else {
|
||||
self.modalContainer.classList.remove('open');
|
||||
}
|
||||
});
|
||||
const config = {attributes: false, childList: true, characterData: false};
|
||||
self.observer.observe(self.modalContainer, config);
|
||||
}
|
||||
|
||||
static create(header, content, closeButton = true) {
|
||||
return registry.get('modal').createModal(header, content, closeButton);
|
||||
}
|
||||
|
||||
createModal(header, content, closeButton) {
|
||||
return template.render('gui/modal', {
|
||||
header: header,
|
||||
content: content,
|
||||
closeButton: closeButton ? '' : 'close'
|
||||
}).then(node => {
|
||||
this.modalContainer.appendChild(node);
|
||||
if (closeButton) {
|
||||
node.addDelegatedEventListener('click', '.close-modal', () => {
|
||||
console.log("remove");
|
||||
node.remove();
|
||||
})
|
||||
}
|
||||
return node;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
class ConfirmDialog {
|
||||
constructor() {
|
||||
const self = this;
|
||||
this.dissmiss = new Promise((resolve, reject) => {
|
||||
self.resolve = resolve;
|
||||
self.reject = reject;
|
||||
});
|
||||
this.id = VUtils.tempId();
|
||||
}
|
||||
|
||||
static async create(header, text, options) {
|
||||
const dialog = new ConfirmDialog();
|
||||
const data = dialog.getContent(text, options);
|
||||
const content = await template.renderOn('gui/dialog-confirm', data);
|
||||
const modal = await ModalController.create(header, content, false);
|
||||
modal.addDelegatedEventListener('click', '.modal-confirm-button', (ev, el) => {
|
||||
dialog.close(el.dataset.value);
|
||||
});
|
||||
dialog.modal = modal;
|
||||
return dialog.onDismiss();
|
||||
}
|
||||
|
||||
static async createBasic(header, text) {
|
||||
return this.create(header, text, [
|
||||
{
|
||||
type: 'error',
|
||||
value: "0",
|
||||
content: 'Nein',
|
||||
}, {
|
||||
type: 'primary',
|
||||
value: "1",
|
||||
content: 'Ja',
|
||||
}
|
||||
]);
|
||||
}
|
||||
|
||||
getContent(text, options) {
|
||||
return {
|
||||
text: text,
|
||||
options: options
|
||||
}
|
||||
}
|
||||
|
||||
close(value) {
|
||||
this.modal.remove();
|
||||
this.resolve(value);
|
||||
}
|
||||
|
||||
onDismiss() {
|
||||
return this.dissmiss;
|
||||
}
|
||||
}
|
||||
|
||||
(() => {
|
||||
moduleLoader.isModuleLoaded(['Registry'], () => {
|
||||
const modal = new ModalController();
|
||||
registry.set('modal', modal);
|
||||
})
|
||||
})();
|
||||
25
src/app/Core/Network.js
Normal file
25
src/app/Core/Network.js
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
class Network {
|
||||
static getStaticUrl(path) {
|
||||
if (!path.startsWith('/')) {
|
||||
path = '/' + path;
|
||||
}
|
||||
return path;
|
||||
}
|
||||
|
||||
static async requestUrl(path) {
|
||||
let url = this.getStaticUrl(path);
|
||||
let raw = await fetch(url)
|
||||
if (!raw.ok) {
|
||||
return Promise.reject(`Failed to load: ${url}`);
|
||||
}
|
||||
return await raw.text();
|
||||
}
|
||||
|
||||
static loadAll(array, richUrl) {
|
||||
const promises = []
|
||||
for (const name of array) {
|
||||
promises.push(this.requestUrl(richUrl + name));
|
||||
}
|
||||
return Promise.allSettled(promises);
|
||||
}
|
||||
}
|
||||
87
src/app/Core/Notification.js
Normal file
87
src/app/Core/Notification.js
Normal file
|
|
@ -0,0 +1,87 @@
|
|||
class NotificationHandler {
|
||||
constructor() {
|
||||
this.outer = $('v-notification');
|
||||
this.toast = $('v-toast');
|
||||
this.notifications = [];
|
||||
}
|
||||
|
||||
static get instance() {
|
||||
if (NotificationHandler._instance === undefined) {
|
||||
NotificationHandler._instance = new NotificationHandler();
|
||||
}
|
||||
return NotificationHandler._instance;
|
||||
}
|
||||
|
||||
static createNotification(message, type, time, toast = false) {
|
||||
time = parseInt(time || "3000");
|
||||
let handler = NotificationHandler.instance,
|
||||
notification = new NotificationItem(message, type, time, toast);
|
||||
handler.notifications.push(notification);
|
||||
notification.show();
|
||||
return notification;
|
||||
}
|
||||
|
||||
static createToast(message, type = 'info') {
|
||||
let handler = NotificationHandler.instance,
|
||||
notification = new NotificationItem(message, type, 2000, true);
|
||||
handler.notifications.push(notification);
|
||||
notification.show();
|
||||
return notification;
|
||||
}
|
||||
}
|
||||
|
||||
class NotificationItem {
|
||||
constructor(message, type, time, toast = false) {
|
||||
this.outer = NotificationHandler.instance.outer;
|
||||
this.toastCon = NotificationHandler.instance.toast;
|
||||
this.message = message;
|
||||
this.type = type;
|
||||
this.time = time || 1000;
|
||||
this.isRemoved = false;
|
||||
this.toast = toast;
|
||||
}
|
||||
|
||||
async show() {
|
||||
let self = this,
|
||||
endless = self.time === -1;
|
||||
self.updateContent(self.message);
|
||||
if (!endless) {
|
||||
setTimeout(this.remove.bind(this), self.time)
|
||||
}
|
||||
}
|
||||
|
||||
async remove() {
|
||||
if (this.isRemoved) {
|
||||
return;
|
||||
}
|
||||
this.isRemoved = true;
|
||||
const cont = this.toast ? this.toastCon : this.outer;
|
||||
cont.removeChild($('#' + this.id));
|
||||
let not = NotificationHandler.instance.notifications,
|
||||
index = not.indexOf(this);
|
||||
not.splice(index, 1);
|
||||
}
|
||||
|
||||
updateContent(message) {
|
||||
this.id = VUtils.tempId();
|
||||
let self = this,
|
||||
isEndless = self.time === -1,
|
||||
data = {
|
||||
message: message,
|
||||
type: self.type,
|
||||
id: self.id
|
||||
};
|
||||
if (isEndless && !self.toast) data.type += ' endless';
|
||||
const tpl = self.toast ? 'gui/toast' : 'gui/notification';
|
||||
const cont = self.toast ? self.toastCon : self.outer;
|
||||
template.renderOn(tpl, data).then(html => {
|
||||
cont.prepend(document.createRange().createContextualFragment(html));
|
||||
if (!self.toast) $(`#${self.id} .fade-bar`).style.animationDuration = isEndless ? '1000ms' : `${self.time + 1}ms`;
|
||||
});
|
||||
}
|
||||
|
||||
updateMessageOnly(message) {
|
||||
let item = $(`#${this.id} .message`);
|
||||
if (item) item.innerHTML = message;
|
||||
}
|
||||
}
|
||||
18
src/app/Core/PreLoader.js
Normal file
18
src/app/Core/PreLoader.js
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
class PreLoader {
|
||||
constructor() {
|
||||
this.preloadData = {};
|
||||
moduleLoader.registerModule(PreLoader);
|
||||
Network.requestUrl('/out/preload-list.json').then(data => {
|
||||
this.preloadData = JSON.parse(data);
|
||||
PrettyConsole.debug(PreLoader, this.preloadData)
|
||||
moduleLoader.finishModule(PreLoader)
|
||||
}).catch(err => {
|
||||
moduleLoader.moduleErrored(PreLoader, err);
|
||||
PrettyConsole.error(PreLoader, err);
|
||||
})
|
||||
}
|
||||
|
||||
getData(name) {
|
||||
return this.preloadData[name] || [];
|
||||
}
|
||||
}
|
||||
112
src/app/Core/PrettyConsole.js
Normal file
112
src/app/Core/PrettyConsole.js
Normal file
|
|
@ -0,0 +1,112 @@
|
|||
class PrettyConsole {
|
||||
static setColour(module, color) {
|
||||
module = this.getModuleNameFromArgs([module]);
|
||||
if (!this.colours) {
|
||||
this.colours = {};
|
||||
}
|
||||
this.colours[module] = color;
|
||||
}
|
||||
|
||||
static getColour(module) {
|
||||
if (!this.colours) {
|
||||
this.colours = {};
|
||||
}
|
||||
if (!this.colours.hasOwnProperty(module)) {
|
||||
this.colours[module] = this.rgbToHex(...this.hexToRgb(this.generateHexFromString(module)));
|
||||
}
|
||||
return this.colours[module];
|
||||
}
|
||||
|
||||
static log(...args) {
|
||||
const module = this.getModuleNameFromArgs(args);
|
||||
if (args.length === 1 && !Array.isArray(args[0])) {
|
||||
this.output(module, "#5c6bc0", args[0], 'log');
|
||||
} else {
|
||||
if (args.length === 1) args = args[0];
|
||||
this.outputGroup(module, "#5c6bc0", args, 'log');
|
||||
}
|
||||
}
|
||||
|
||||
static error(...args) {
|
||||
const module = this.getModuleNameFromArgs(args);
|
||||
if (args.length === 1 && !Array.isArray(args[0])) {
|
||||
this.output(module, "#c62828", args[0], 'error');
|
||||
} else {
|
||||
if (args.length === 1) args = args[0];
|
||||
this.outputGroup(module, "#c62828", args, 'error');
|
||||
}
|
||||
}
|
||||
|
||||
static warn(...args) {
|
||||
const module = this.getModuleNameFromArgs(args);
|
||||
if (args.length === 1 && !Array.isArray(args[0])) {
|
||||
this.output(module, "#f9a825", args[0], 'warn');
|
||||
} else {
|
||||
if (args.length === 1) args = args[0];
|
||||
this.outputGroup(module, "#f9a825", args, 'warn');
|
||||
}
|
||||
}
|
||||
|
||||
static debug(...args) {
|
||||
const module = this.getModuleNameFromArgs(args);
|
||||
if (args.length > 1) {
|
||||
this.outputGroup(module, '#e91e63', args, 'debug');
|
||||
} else {
|
||||
this.output(module, '#e91e63', args[0], 'debug');
|
||||
}
|
||||
}
|
||||
|
||||
static output(module, style, message, type) {
|
||||
const color = this.getColour(module);
|
||||
if (typeof message === "object") {
|
||||
console[type](`%c[${module}]`, `color:${color};font-weight: bold;`, message);
|
||||
return;
|
||||
}
|
||||
console[type](`%c[${module}] %c ${message}`, `color:${color};font-weight: bold;`, `color: ${style}`);
|
||||
}
|
||||
|
||||
static outputGroup(module, style, messages, type) {
|
||||
const color = this.getColour(module);
|
||||
console.group(`%c===[${module}]===`, `color:${color};font-weight: bold;`);
|
||||
for (let message of messages) {
|
||||
if (type === 'debug' && typeof message === 'string') {
|
||||
message = `%c${message}`;
|
||||
console.debug(message, `color: ${style}`);
|
||||
} else {
|
||||
console[type](message);
|
||||
}
|
||||
}
|
||||
console.groupEnd();
|
||||
}
|
||||
|
||||
static generateHexFromString(string = "") {
|
||||
let hash = 0, len = string.length;
|
||||
for (let i = 0; i < len; i++) {
|
||||
string.charCodeAt(i)
|
||||
hash = ((hash << 5) - hash) + string.charCodeAt(i);
|
||||
hash |= 0; // to 32bit integer
|
||||
}
|
||||
return Math.abs(hash).toString(16).slice(0, 6);
|
||||
}
|
||||
|
||||
static hexToRgb(hex) {
|
||||
let bigint = parseInt(hex, 16);
|
||||
let r = (bigint >> 16) & 255;
|
||||
let g = (bigint >> 8) & 255;
|
||||
let b = bigint & 255;
|
||||
return [r, g, b];
|
||||
}
|
||||
|
||||
static rgbToHex(r, g, b) {
|
||||
return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
|
||||
}
|
||||
|
||||
static getModuleNameFromArgs(args) {
|
||||
if (typeof args[0] === 'function') {
|
||||
const x = args.shift();
|
||||
return x.name;
|
||||
}
|
||||
return 'App';
|
||||
}
|
||||
}
|
||||
PrettyConsole.setColour("APP", '#90ff20');
|
||||
20
src/app/Core/Registry.js
Normal file
20
src/app/Core/Registry.js
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
(() => {
|
||||
class Registry {
|
||||
constructor() {
|
||||
this.items = {};
|
||||
}
|
||||
|
||||
get(name) {
|
||||
return this.items[name];
|
||||
}
|
||||
|
||||
set(name, item) {
|
||||
this.items[name] = item;
|
||||
}
|
||||
}
|
||||
|
||||
moduleLoader.registerInit(i => {
|
||||
window.registry = new Registry();
|
||||
moduleLoader.finishModule('Registry');
|
||||
})
|
||||
})();
|
||||
33
src/app/Core/Template.js
Normal file
33
src/app/Core/Template.js
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
const TemplateModule = "Template";
|
||||
(() => {
|
||||
class Template {
|
||||
constructor() {
|
||||
moduleLoader.registerModule(TemplateModule);
|
||||
this.onInit();
|
||||
}
|
||||
|
||||
onInit() {
|
||||
PrettyConsole.log(TemplateModule, "Initialize...")
|
||||
window.template = new VTepLCore({
|
||||
path: "/out/tpl/",
|
||||
cache: false // we want never caching :) i mean it's nice but horrible to update // maybe adding later checksum
|
||||
});
|
||||
PrettyConsole.debug(TemplateModule, "Use Cache? " + template.cache)
|
||||
// init requests
|
||||
this.loadArray(preLoader.getData('tpl'), true).catch(console.error);
|
||||
}
|
||||
|
||||
async loadArray(files, moduleLoading = false) {
|
||||
window.template.loadArray(files).then(() => {
|
||||
if (moduleLoading) moduleLoader.finishModule(TemplateModule);
|
||||
}).catch(err => {
|
||||
PrettyConsole.error(TemplateModule, err);
|
||||
if (moduleLoading) moduleLoader.moduleErrored(TemplateModule, err);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
moduleLoader.registerInit(() => {
|
||||
new Template();
|
||||
})
|
||||
})();
|
||||
210
src/app/External/SelectJs.js
vendored
Normal file
210
src/app/External/SelectJs.js
vendored
Normal file
|
|
@ -0,0 +1,210 @@
|
|||
(function () {
|
||||
window._openVSelect = null;
|
||||
|
||||
requestAnimationFrame(e => {
|
||||
document.body.addEventListener('click', ev => {
|
||||
if (window._openVSelect && ev.target.closest('v-select') !== window._openVSelect) {
|
||||
window._openVSelect.toggle(false);
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
class VSelectElement extends HTMLElement {
|
||||
constructor() {
|
||||
super();
|
||||
let self = this;
|
||||
self.rawValue = "";
|
||||
self.setAttribute('tabindex', '0');
|
||||
requestAnimationFrame(() => {
|
||||
self.update();
|
||||
})
|
||||
}
|
||||
|
||||
get value() {
|
||||
return this._value;
|
||||
}
|
||||
|
||||
set value(value) {
|
||||
this._value = value;
|
||||
this.dispatchEvent(new Event('input'));
|
||||
}
|
||||
|
||||
|
||||
get required() {
|
||||
return this.hasAttribute('required');
|
||||
}
|
||||
|
||||
set required(flag) {
|
||||
this.toggleAttribute('required', Boolean(flag));
|
||||
}
|
||||
|
||||
get name() {
|
||||
return this.getAttribute('name');
|
||||
}
|
||||
|
||||
set name(val) {
|
||||
this.toggleAttribute('name', val);
|
||||
}
|
||||
|
||||
get form() {
|
||||
return this.closest('form');
|
||||
}
|
||||
|
||||
get options() {
|
||||
return $$('v-options v-option', this);
|
||||
}
|
||||
|
||||
get selected() {
|
||||
return $$('v-options v-option[selected]', this);
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
/* const selected = this.selected;
|
||||
if (selected) return;*/
|
||||
const options = Array.prototype.slice.call(this.options);
|
||||
const values = this.dataset.value ? this.dataset.value.split(",") : [""];
|
||||
if (values.length === 1 && values[0].trim() === '') {
|
||||
return;
|
||||
}
|
||||
options
|
||||
.filter(item => values.indexOf(item.getAttribute('value')) !== -1)
|
||||
.forEach(item => item.setAttribute('selected', 'true'));
|
||||
}
|
||||
|
||||
update() {
|
||||
let selected = [],
|
||||
lbl = $('v-label', this),
|
||||
fd = new FormData();
|
||||
this.selected.forEach(e => {
|
||||
selected.push(e.innerText);
|
||||
fd.append(this.name, e.value);
|
||||
})
|
||||
if (lbl.attributeChangedCallback) {
|
||||
lbl.attributeChangedCallback('value', '', selected.join(", "));
|
||||
}
|
||||
this.isValid = !(this.required && selected.length === 0);
|
||||
this.rawValue = selected.join(", ");
|
||||
this.value = fd;
|
||||
}
|
||||
|
||||
checkValidity() {
|
||||
return this.isValid;
|
||||
}
|
||||
|
||||
toggle(open) {
|
||||
if (window._openVSelect && window._openVSelect.toggleSelect && open) {
|
||||
window._openVSelect.toggleSelect(false);
|
||||
}
|
||||
const options = $('v-options', this);
|
||||
if (!open || this.isOpen) {
|
||||
options.style.maxHeight = '0';
|
||||
window._openVSelect = false;
|
||||
this.isOpen = false;
|
||||
this.update();
|
||||
} else {
|
||||
options.focus();
|
||||
let height = 0,
|
||||
children = options.children;
|
||||
for (let i = 0; i < children.length; i++) {
|
||||
height += children[i].offsetHeight;
|
||||
}
|
||||
options.style.maxHeight = height + 'px';
|
||||
window._openVSelect = this;
|
||||
this.isOpen = true;
|
||||
}
|
||||
let l = $('v-label', this).classList;
|
||||
if (this.isOpen) {
|
||||
l.add('open');
|
||||
} else {
|
||||
l.remove('open');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
class VSelectOptionElement extends HTMLElement {
|
||||
constructor() {
|
||||
super();
|
||||
this._value = this.getAttribute('value');
|
||||
this.addEventListener('click', e => {
|
||||
let parent = this.parentNode.parentNode,
|
||||
select = !this.selected;
|
||||
if (!parent.hasAttribute('multiple')) {
|
||||
parent.toggle(false);
|
||||
for (let item of parent.selected) {
|
||||
if (item !== this) {
|
||||
item.removeAttribute('selected');
|
||||
}
|
||||
}
|
||||
}
|
||||
if (!this.disabled) {
|
||||
this.attributeChangedCallback('selected', false, select, true);
|
||||
this.parentNode.parentNode.update();
|
||||
}
|
||||
});
|
||||
this.createNew('div', {classes: ['ripple']});
|
||||
}
|
||||
|
||||
static get observedAttributes() {
|
||||
return ['selected', 'disabled', 'value'];
|
||||
}
|
||||
|
||||
get value() {
|
||||
return this._value;
|
||||
}
|
||||
|
||||
set value(value) {
|
||||
this._value = value;
|
||||
}
|
||||
|
||||
attributeChangedCallback(name, oldValue, newValue, force) {
|
||||
if (name === 'selected' && this.hasAttribute('disabled')) {
|
||||
this.removeAttribute(name);
|
||||
return;
|
||||
}
|
||||
if (name === 'disabled' && newValue === true && this.hasAttribute('selected')) {
|
||||
this.attributeChangedCallback('selected', false, false);
|
||||
}
|
||||
|
||||
if (force) {
|
||||
if (newValue) {
|
||||
this.setAttribute(name, newValue);
|
||||
} else {
|
||||
this.removeAttribute(name);
|
||||
}
|
||||
}
|
||||
this[name] = newValue;
|
||||
}
|
||||
}
|
||||
|
||||
class VLabel extends HTMLElement {
|
||||
constructor() {
|
||||
super();
|
||||
this.span = this.createNew('span');
|
||||
this.createNew('div', {classes: ['ripple']});
|
||||
this.empty = this.getAttribute('empty') || "";
|
||||
this.span.innerHTML = this.getAttribute("value") || this.empty;
|
||||
this.addEventListener('click', this.openPopUp.bind(this));
|
||||
}
|
||||
|
||||
static get observedAttributes() {
|
||||
return ['empty', 'value'];
|
||||
}
|
||||
|
||||
openPopUp() {
|
||||
this.parentNode.toggle(true);
|
||||
}
|
||||
|
||||
attributeChangedCallback(name, oldValue, newValue) {
|
||||
if (name === 'value') {
|
||||
this.span.innerHTML = newValue || this.empty;
|
||||
}
|
||||
this[name] = newValue;
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define("v-label", VLabel);
|
||||
customElements.define("v-option", VSelectOptionElement);
|
||||
customElements.define("v-select", VSelectElement);
|
||||
})();
|
||||
|
||||
|
||||
72
src/app/External/VCollapse.js
vendored
Normal file
72
src/app/External/VCollapse.js
vendored
Normal file
|
|
@ -0,0 +1,72 @@
|
|||
(() => {
|
||||
const defaultConfig = "{\"outer\":\"v-collapse\",\"listenTo\":\"body\",\"itemSelector\":\"v-collapse-item\",\"headSelector\":\"v-collapse-head\",\"contentSelector\":\"v-collapse-content\"}";
|
||||
|
||||
window.VCollapse = class VCollapse {
|
||||
constructor(options = {}) {
|
||||
this.options = Object.assign(options, JSON.parse(defaultConfig));
|
||||
this.initListener();
|
||||
}
|
||||
|
||||
initListener() {
|
||||
const self = this,
|
||||
opt = self.options;
|
||||
$(opt.listenTo).addDelegatedEventListener('click', opt.headSelector, (e, el) => {
|
||||
self.toggleItem(el, false);
|
||||
});
|
||||
this.resize();
|
||||
window.addEventListener('resize', this.resize.bind(this));
|
||||
}
|
||||
|
||||
toggleItem(el, forceClose, noClose) {
|
||||
if (!el._maxHeight) {
|
||||
this.resize();
|
||||
}
|
||||
if (!noClose && el.find(this.options.outer).hasAttribute('accordion')) {
|
||||
this.closeAll(el);
|
||||
}
|
||||
let parent = el.find(this.options.itemSelector),
|
||||
cont = $(this.options.contentSelector, parent),
|
||||
cl = parent.classList;
|
||||
if (cl.contains('open') || forceClose) {
|
||||
cont.style.maxHeight = '0px';
|
||||
cl.remove('open');
|
||||
} else {
|
||||
cont.style.maxHeight = parent._maxHeight + 'px';
|
||||
cl.add('open');
|
||||
}
|
||||
}
|
||||
|
||||
closeAll(el) {
|
||||
const self = this,
|
||||
opt = self.options,
|
||||
items = $$(opt.headSelector, el.find(opt.outer));
|
||||
VUtils.forEach(items, e => {
|
||||
if (e !== el) {
|
||||
self.toggleItem(e, true, true);
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
calcHeight(el) {
|
||||
let children = $(this.options.contentSelector, el).children,
|
||||
height = 0;
|
||||
VUtils.forEach(children, e => {
|
||||
height += e.offsetHeight;
|
||||
})
|
||||
el._maxHeight = height;
|
||||
}
|
||||
|
||||
resize() {
|
||||
const self = this,
|
||||
opt = self.options,
|
||||
items = $$(opt.itemSelector, $(opt.listenTo));
|
||||
VUtils.forEach(items, e => {
|
||||
self.calcHeight(e);
|
||||
if (e.classList.contains('open')) {
|
||||
$(opt.contentSelector, e).style.maxHeight = parent._maxHeight + 'px';
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
new VCollapse();
|
||||
})();
|
||||
77
src/app/External/VRipple.js
vendored
Normal file
77
src/app/External/VRipple.js
vendored
Normal file
|
|
@ -0,0 +1,77 @@
|
|||
class VRipple {
|
||||
constructor(options = {}) {
|
||||
if (!VUtils.isUsed) {
|
||||
throw "VRipply is only with Public VUtils usable!"
|
||||
}
|
||||
let self = this;
|
||||
self.options = JSON.parse('{"classes":["ripple__effect"],"target":"body","selector":".ripple"}');
|
||||
VUtils.mergeOptions(self.options, options);
|
||||
if (self.options.selector.indexOf("#") > -1) {
|
||||
throw "ID's are not allowed as selector!";
|
||||
}
|
||||
this.instanceCheck();
|
||||
this.ripples = [];
|
||||
requestAnimationFrame(this.initHandler.bind(this));
|
||||
}
|
||||
|
||||
instanceCheck() {
|
||||
let opts = this.options;
|
||||
const rawKey = [opts.target, opts.selector, opts.classes.join(".")].join(" ");
|
||||
VRipple.instances = VRipple.instances || {};
|
||||
VRipple.instances[rawKey] = this;
|
||||
}
|
||||
|
||||
initHandler() {
|
||||
let self = this;
|
||||
let selector = self.options.selector;
|
||||
let target = $(self.options.target);
|
||||
target.addDelegatedEventListener('mousedown touchstart', selector, (e, el) => {
|
||||
let pos = e.touches ? e.touches[0] : e;
|
||||
let parent = el.parentNode;
|
||||
let circle = el.createNew('span', self.options);
|
||||
let bounds = parent.getBoundingClientRect();
|
||||
let x = pos.clientX - bounds.left;
|
||||
let y = pos.clientY - bounds.top;
|
||||
circle.style.top = y + 'px';
|
||||
circle.style.left = x + 'px';
|
||||
circle._mouseDown = true;
|
||||
circle._animationEnded = false;
|
||||
self.ripples.push(circle);
|
||||
});
|
||||
document.body.addDelegatedEventListener('animationend', '.' + VUtils.get(self.options.classes, ''), self.rippleEnd.bind(self))
|
||||
if (!document.body._vRippleInit) {
|
||||
document.body.addMultiListener('mouseup touchend mouseleave rippleClose', e => {
|
||||
let keys = Object.keys(VRipple.instances);
|
||||
for (let key of keys) {
|
||||
for (let ripple of VRipple.instances[key].ripples) {
|
||||
requestAnimationFrame(x => {
|
||||
self.rippleEnd.bind(VRipple.instances[key])(e, ripple);
|
||||
});
|
||||
}
|
||||
}
|
||||
})
|
||||
document.body._vRippleInit = true;
|
||||
}
|
||||
}
|
||||
|
||||
rippleEnd(ev, el) {
|
||||
const parent = el.parentNode;
|
||||
if (parent) {
|
||||
if (ev.type === 'animationend') {
|
||||
el._animationEnded = true;
|
||||
} else {
|
||||
el._mouseDown = false;
|
||||
}
|
||||
if (!el._mouseDown && el._animationEnded) {
|
||||
if (el.classList.contains('to-remove')) {
|
||||
el.parentNode.removeChild(el);
|
||||
this.ripples.splice(this.ripples.indexOf(el), 1)
|
||||
} else {
|
||||
el.classList.add('to-remove');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const rippler = new VRipple();
|
||||
70
src/app/External/VTepL/Core.js
vendored
Normal file
70
src/app/External/VTepL/Core.js
vendored
Normal file
|
|
@ -0,0 +1,70 @@
|
|||
class VTepLCore {
|
||||
constructor({path, suffix, template, cache} = {}) {
|
||||
this.templates = {};
|
||||
this.dir = path || '/tpl/';
|
||||
this.suffix = suffix || 'tpl';
|
||||
this.path = template || `${this.dir}%s.${this.suffix}`;
|
||||
this.cache = cache === undefined ? true : cache;
|
||||
}
|
||||
|
||||
// Add download queue!
|
||||
async loadTemplate(name) {
|
||||
if (this.templates[name]) {
|
||||
return null;
|
||||
}
|
||||
this.templates[name] = true; // small hack to prevent double loading :)
|
||||
let path = this.path.replace('%s', name);
|
||||
let data = await Network.requestUrl(path)
|
||||
this.addTpl(name, data);
|
||||
loader.addLoadedItems(1);
|
||||
return null;
|
||||
}
|
||||
|
||||
async loadArray(names) {
|
||||
loader.addToLoadItem(names.length)
|
||||
const promises = []
|
||||
for (const name of names) {
|
||||
promises.push(this.loadTemplate(name));
|
||||
}
|
||||
await Promise.all(promises)
|
||||
}
|
||||
|
||||
addTpl(name, content) {
|
||||
let temp = this.templates[name] = new VTepLTemplate(name, content, this);
|
||||
temp.parseContent(this.cache);
|
||||
}
|
||||
|
||||
async renderOn(name, data) {
|
||||
if (this.templates[name]) {
|
||||
return await this.templates[name].render(data);
|
||||
}
|
||||
PrettyConsole.warn("VTepLRender", `Template: "${name}" dont exist`);
|
||||
return '';
|
||||
}
|
||||
|
||||
renderTo(element, name, data = {}) {
|
||||
this.renderOn(name, data).then(html => {
|
||||
element.innerHTML = html;
|
||||
})
|
||||
}
|
||||
|
||||
// gets a html node element
|
||||
render(name, data = {}) {
|
||||
return this.renderOn(name, data).then(html => {
|
||||
const template = document.createElement('template');
|
||||
template.innerHTML = html.trim();
|
||||
return template.content.firstChild;
|
||||
})
|
||||
}
|
||||
|
||||
async renderToAsync(element, name, data = {}) {
|
||||
return this.renderOn(name, data).then(html => {
|
||||
element.innerHTML = html;
|
||||
})
|
||||
}
|
||||
|
||||
has(toRender) {
|
||||
return this.templates[toRender]
|
||||
}
|
||||
|
||||
}
|
||||
205
src/app/External/VTepL/Interpreter.js
vendored
Normal file
205
src/app/External/VTepL/Interpreter.js
vendored
Normal file
|
|
@ -0,0 +1,205 @@
|
|||
class VTepLInterpreter {
|
||||
constructor(parser, core) {
|
||||
this.parser = parser;
|
||||
this.data = [];
|
||||
this.content = '';
|
||||
this.core = core;
|
||||
}
|
||||
|
||||
async render(data) {
|
||||
let self = this;
|
||||
self.data = data;
|
||||
let newData = await self.interpreter(self.parser.parsed);
|
||||
self.data = [];
|
||||
return newData[0];
|
||||
}
|
||||
|
||||
// This stuff is slow as fuck xD Optimize parser to create faster interpreter
|
||||
async interpreter(parsed, index = 0) {
|
||||
let self = this;
|
||||
let types = VParserTypes;
|
||||
let tplCont = '';
|
||||
for (let i = index; i < parsed.length; i++) {
|
||||
let item = parsed[i],
|
||||
content = item.content;
|
||||
switch (item.type) {
|
||||
case types.content:
|
||||
tplCont += content;
|
||||
break;
|
||||
case types.variable:
|
||||
tplCont += self.getVariable(content)
|
||||
break;
|
||||
case types.assign:
|
||||
let data = content.split("="),
|
||||
key = data.shift();
|
||||
self.setVariable(data.join("=").trim().replace(/"/g, ""), key.trim());
|
||||
break;
|
||||
case types.forEach:
|
||||
let d = await this.handleForEach(item, parsed, i);
|
||||
i = d[0];
|
||||
tplCont += d[1];
|
||||
break;
|
||||
case types.for:
|
||||
let fd = await this.handleFor(item, parsed, i);
|
||||
i = fd[0];
|
||||
tplCont += fd[1];
|
||||
break;
|
||||
case types.if:
|
||||
let id = await this.handleIf(item, parsed, i);
|
||||
i = id[0];
|
||||
tplCont += id[1];
|
||||
break;
|
||||
case types.include:
|
||||
tplCont += await this.handleInclude(item);
|
||||
break;
|
||||
case types.ifEnd:
|
||||
tplCont += content;
|
||||
return [tplCont, i];
|
||||
case types.forEnd:
|
||||
tplCont += content;
|
||||
return [tplCont, i];
|
||||
default:
|
||||
console.warn("Invalid Type found");
|
||||
break;
|
||||
}
|
||||
}
|
||||
return [tplCont, parsed.length];
|
||||
}
|
||||
|
||||
getVariable(variable, isEqualCheck = false) {
|
||||
variable = variable.toString();
|
||||
if (!isEqualCheck) {
|
||||
let v = variable.split("==");
|
||||
if (v.length > 1) {
|
||||
return this.getEqual(v[0].trim(), v[1].trim());
|
||||
}
|
||||
v = variable.split("?");
|
||||
if (v.length > 1) {
|
||||
return this.getIsDefined(v[0].trim(), v[1].trim());
|
||||
}
|
||||
v = variable.split("||");
|
||||
if (v.length > 1) {
|
||||
return this.getDefault(v[0].trim(), v[1].trim());
|
||||
}
|
||||
}
|
||||
if (this.data[variable]) {
|
||||
return this.data[variable];
|
||||
}
|
||||
let split = variable.split("."),
|
||||
prevVar = this.data;
|
||||
for (let i = 0; i < split.length; i++) {
|
||||
prevVar = prevVar[split[i]] || prevVar;
|
||||
}
|
||||
if (typeof prevVar === 'string') {
|
||||
return prevVar;
|
||||
}
|
||||
if (typeof prevVar === 'number') {
|
||||
return prevVar.toString();
|
||||
}
|
||||
return '';
|
||||
}
|
||||
|
||||
getEqual(variable1, variable2) {
|
||||
let split = variable2.split("?");
|
||||
let var1 = this.getVariable(variable1, true);
|
||||
let var2 = this.getVariable(split[0].trim(), true);
|
||||
if (split.length > 1) {
|
||||
let newSplit = split[1].split(":");
|
||||
let right = newSplit[1] || '';
|
||||
return var1 === var2 ? newSplit[0].trim() : right.trim();
|
||||
}
|
||||
return var1 === var2 ? 'true' : 'false';
|
||||
}
|
||||
|
||||
setVariable(value, variable) {
|
||||
let c = this.getVariable(value);
|
||||
if (c !== '') {
|
||||
value = c;
|
||||
}
|
||||
this.data[variable] = value;
|
||||
}
|
||||
|
||||
async handleForEach(item, parsed, i) {
|
||||
let content = item.content.split(" as ");
|
||||
let root = this.getVariable(content[0].trim());
|
||||
let addTo = 0,
|
||||
isInvalid = false;
|
||||
if (root === '') {
|
||||
isInvalid = true;
|
||||
root = {invalid: "true"};
|
||||
}
|
||||
if (typeof root === 'string') {
|
||||
root = JSON.parse(root);
|
||||
}
|
||||
if (Array.isArray(root) && root.length === 0) {
|
||||
root.push("");
|
||||
isInvalid = true;
|
||||
}
|
||||
let d = Object.keys(root),
|
||||
raw = '',
|
||||
varContent = content[1].trim().split(",");
|
||||
for (let x of d) {
|
||||
if (varContent.length === 2) {
|
||||
this.setVariable(x, varContent[1]);
|
||||
}
|
||||
this.setVariable(root[x], varContent[0]);
|
||||
let data = await this.interpreter(parsed, i + 1);
|
||||
addTo = data[1];
|
||||
raw += data[0];
|
||||
}
|
||||
if (isInvalid) {
|
||||
raw = '';
|
||||
}
|
||||
return [addTo, raw];
|
||||
}
|
||||
|
||||
async handleInclude(item) {
|
||||
let split = item.content.split(";"),
|
||||
name = split.shift(),
|
||||
data = {};
|
||||
await this.core.loadTemplate(name);
|
||||
for (let item of split) {
|
||||
let d = item.split("="),
|
||||
index = d.shift(),
|
||||
dat = d.join("=");
|
||||
if (!dat.startsWith("\"")) {
|
||||
dat = this.getVariable(dat);
|
||||
} else {
|
||||
dat = dat.replace(/"/g, "");
|
||||
}
|
||||
|
||||
data[index] = dat;
|
||||
}
|
||||
return await this.core.renderOn(name, data);
|
||||
}
|
||||
|
||||
async handleFor(item, parsed, ind) {
|
||||
let content = item.content.split(" as "),
|
||||
addTo = 0,
|
||||
count = content[0].trim().split(".."),
|
||||
max = parseInt(count[1]),
|
||||
min = parseInt(count[0]),
|
||||
newContent = '';
|
||||
for (let i = min; i < max; i++) {
|
||||
this.setVariable(i.toString(), content[1]);
|
||||
let data = await this.interpreter(parsed, ind + 1);
|
||||
addTo = data[1];
|
||||
newContent += data[0];
|
||||
}
|
||||
return [addTo, newContent];
|
||||
}
|
||||
|
||||
async handleIf(item, parsed, i) {
|
||||
let data = await this.interpreter(parsed, i + 1);
|
||||
return [data[1], data[0]];
|
||||
}
|
||||
|
||||
getIsDefined(variable, value) {
|
||||
return this.getVariable(variable, true) !== '' ? value : '';
|
||||
}
|
||||
|
||||
getDefault(variable, value) {
|
||||
let vars = this.getVariable(variable, true);
|
||||
return vars !== '' ? vars : value;
|
||||
}
|
||||
}
|
||||
208
src/app/External/VTepL/Parser.js
vendored
Normal file
208
src/app/External/VTepL/Parser.js
vendored
Normal file
|
|
@ -0,0 +1,208 @@
|
|||
const VParserTypes = {
|
||||
content: 0,
|
||||
variable: 1,
|
||||
for: 2,
|
||||
forEach: 3,
|
||||
forContent: 4,
|
||||
forEnd: 5,
|
||||
if: 6,
|
||||
ifContent: 7,
|
||||
ifEnd: 8,
|
||||
assign: 9,
|
||||
include: 10,
|
||||
none: -1,
|
||||
};
|
||||
|
||||
|
||||
class VTpeLParser {
|
||||
constructor(name, content) {
|
||||
let self = this;
|
||||
self.name = name;
|
||||
self.legex = content.trim();
|
||||
self.index = 0;
|
||||
self.content = '';
|
||||
self.parsed = [];
|
||||
self.contexts = [0];
|
||||
self.line = 1;
|
||||
self.charPos = 1;
|
||||
}
|
||||
|
||||
tokenize() {
|
||||
let self = this;
|
||||
for (self.index = 0; self.index < self.legex.length; self.index++) {
|
||||
let i = self.index,
|
||||
char = self.legex.charAt(i);
|
||||
self.charPos++;
|
||||
if (char === "\n") {
|
||||
self.line++;
|
||||
self.charPos = 0;
|
||||
}
|
||||
if (self.nextContains('/* ', i, true)) {
|
||||
self.extract(' */', VParserTypes.none)
|
||||
} else if (self.nextContains('// ', i, true)) {
|
||||
self.extract("\n", VParserTypes.none);
|
||||
} else if (self.nextContains('<!--', i, true)) {
|
||||
self.extract('-->', VParserTypes.none);
|
||||
} else if (self.nextContains('{for(', i, true)) {
|
||||
self.extract(')}', VParserTypes.for);
|
||||
self.contexts.push(VParserTypes.for);
|
||||
} else if (self.nextContains('{include(', i, true)) {
|
||||
self.extract(')}', VParserTypes.include);
|
||||
self.contexts.push(VParserTypes.include);
|
||||
} else if (self.nextContains('{foreach(', i, true)) {
|
||||
self.extract(')}', VParserTypes.forEach);
|
||||
self.contexts.push(VParserTypes.forEach);
|
||||
} else if (self.nextContains('{/for}', i, true)) {
|
||||
self.addType(VParserTypes.forEnd);
|
||||
self.contexts.pop();
|
||||
} else if (self.nextContains('{if(', i, true)) {
|
||||
self.extract(')}', VParserTypes.if);
|
||||
self.contexts.push(VParserTypes.if);
|
||||
} else if (self.nextContains('{/if}', i, true)) {
|
||||
self.addType(VParserTypes.ifEnd);
|
||||
self.contexts.pop();
|
||||
} else if (self.nextContains('$${', i, true)) {
|
||||
self.extract('}', VParserTypes.assign);
|
||||
} else if (self.nextContains('${', i, true)) {
|
||||
self.extract('}', VParserTypes.variable);
|
||||
} else {
|
||||
self.content += char;
|
||||
}
|
||||
}
|
||||
self.addType(VParserTypes.content);
|
||||
return self.parsed;
|
||||
}
|
||||
|
||||
addType(type) {
|
||||
let self = this;
|
||||
let content = self.content.replace(/^\n+|\n+$/g, ''),
|
||||
instructions = self.findInstructions(type);
|
||||
self.content = '';
|
||||
if (type !== VParserTypes.none) {
|
||||
if (type === VParserTypes.content && content === '') {
|
||||
return null;
|
||||
}
|
||||
return self.parsed.push({
|
||||
content: content,
|
||||
type: type,
|
||||
context: self.contexts[self.contexts.length - 1],
|
||||
instructions: instructions
|
||||
});
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
nextContains(find, index, add = false) {
|
||||
let count = this.nextContainsRaw(this.legex, find, index);
|
||||
if (add && count > 0) {
|
||||
this.index += count;
|
||||
}
|
||||
return count > 0 || count === -1;
|
||||
}
|
||||
|
||||
nextContainsRaw(raw, find, index) {
|
||||
if (typeof find === "string") {
|
||||
find = find.split("");
|
||||
}
|
||||
let count = find.length;
|
||||
if (count < 1) {
|
||||
return -1;
|
||||
}
|
||||
for (let i = 0; i < count; i++) {
|
||||
let nc = raw.charAt(index + i);
|
||||
if ((find[i] === '\n' && nc === undefined)) {
|
||||
return count;
|
||||
}
|
||||
if (find[i] !== nc) {
|
||||
return 0;
|
||||
}
|
||||
}
|
||||
return count;
|
||||
}
|
||||
|
||||
extract(findUntil = '}', type = 1) {
|
||||
let self = this;
|
||||
self.addType(0);
|
||||
findUntil = findUntil.split("")
|
||||
let content = '',
|
||||
index = self.index,
|
||||
legex = self.legex,
|
||||
firstFind = findUntil.shift();
|
||||
for (let i = self.index; i < legex.length; i++) {
|
||||
let char = legex.charAt(i);
|
||||
if (char === firstFind && self.nextContains(findUntil, i + 1)) {
|
||||
// PrettyConsole.debug("Parser", `[${index} > ${i}] >> ${content}`);
|
||||
// console.debug(`[Parser][${index} > ${i}] >> ${content}`);
|
||||
self.index = i + findUntil.length;
|
||||
self.content = content.trim();
|
||||
self.addType(type);
|
||||
return;
|
||||
}
|
||||
content += char;
|
||||
}
|
||||
if (firstFind === "\n") {
|
||||
self.index = legex.length;
|
||||
self.content = content.trim();
|
||||
self.addType(type);
|
||||
return
|
||||
}
|
||||
throw `Template "${self.name}" Parsing Failed because variable at Position: ${index} <${self.line}:${self.charPos}> not closed!`;
|
||||
}
|
||||
|
||||
// @todo implement split operator Splitter
|
||||
getOperators(string) {
|
||||
let statements = [];
|
||||
let innerCon = '';
|
||||
for (let i = 0; i < string.length; i++) {
|
||||
let c = string.charAt(i);
|
||||
if (innerCon === '' && c === ' ') {
|
||||
continue;
|
||||
}
|
||||
if (c === '(') {
|
||||
if (innerCon !== '') {
|
||||
statements.push(this.parseOperator(innerCon));
|
||||
}
|
||||
innerCon = '';
|
||||
for (let x = 1; x < string.length; x++) {
|
||||
let char = string.charAt(i + x);
|
||||
if (char === ')') {
|
||||
i = i + x;
|
||||
break;
|
||||
}
|
||||
innerCon += char;
|
||||
}
|
||||
statements.push(this.parseOperator(innerCon));
|
||||
innerCon = '';
|
||||
} else {
|
||||
innerCon += c;
|
||||
}
|
||||
}
|
||||
if (innerCon !== '') {
|
||||
statements.push(this.parseOperator(innerCon));
|
||||
}
|
||||
return statements;
|
||||
}
|
||||
|
||||
parseOperator(operatorString) {
|
||||
return this.operator(operatorString);
|
||||
}
|
||||
|
||||
findInstructions(type) {
|
||||
if (type === VParserTypes.if) {
|
||||
return this.getOperators(this.content);
|
||||
}
|
||||
// @todo add support for assign, for, foreach and variables... can optimize interpreter times because we dont need to find it then
|
||||
return [];
|
||||
}
|
||||
|
||||
// right needs to be a string or a operator and should not be null!
|
||||
// left cant be null! this is the case if it's ! operator
|
||||
operator(op, left, right) {
|
||||
return {
|
||||
type: op,
|
||||
lvalue: left,
|
||||
r: right
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
26
src/app/External/VTepL/Template.js
vendored
Normal file
26
src/app/External/VTepL/Template.js
vendored
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
class VTepLTemplate {
|
||||
constructor(name, content, core) {
|
||||
this.name = name;
|
||||
this.tpl = content;
|
||||
this.parser = new VTpeLParser(name, content);
|
||||
this.core = core;
|
||||
}
|
||||
|
||||
async render(data = {}) {
|
||||
return await new VTepLInterpreter(this.parser, this.core).render(data);
|
||||
}
|
||||
|
||||
parseContent(cache) {
|
||||
if (cache) {
|
||||
let storage = localStorage.getItem("vtepl-" + this.name);
|
||||
if (storage) {
|
||||
this.parser.parsed = JSON.parse(storage);
|
||||
return;
|
||||
}
|
||||
}
|
||||
this.parser.tokenize();
|
||||
if (cache) {
|
||||
localStorage.setItem("vtepl-" + this.name, JSON.stringify(this.parser.parsed));
|
||||
}
|
||||
}
|
||||
}
|
||||
147
src/app/External/VUtils.js
vendored
Normal file
147
src/app/External/VUtils.js
vendored
Normal file
|
|
@ -0,0 +1,147 @@
|
|||
class VUtils {
|
||||
static makePublic() {
|
||||
if (VUtils.isUsed) {
|
||||
return;
|
||||
}
|
||||
moduleLoader.registerModule("VUtils")
|
||||
this.initHandlers();
|
||||
VUtils.isUsed = true;
|
||||
PrettyConsole.log("VUtils", "VUtils is now available in the Global Space! no VUtils. anymore needed");
|
||||
moduleLoader.finishModule("VUtils")
|
||||
}
|
||||
|
||||
static initHandlers() {
|
||||
window.$ = this.$;
|
||||
window.$$ = this.$$;
|
||||
window.tryCatch = this.tryCatch;
|
||||
VUtils.nodePrototypes();
|
||||
}
|
||||
|
||||
static $(selector, from) {
|
||||
from = from || document;
|
||||
return from.querySelector(selector);
|
||||
}
|
||||
|
||||
static $$(selector, from) {
|
||||
from = from || document;
|
||||
return from.querySelectorAll(selector);
|
||||
}
|
||||
|
||||
static tryCatch(data, callback, error) {
|
||||
data = VUtils.wrap(data, []);
|
||||
error = error || console.error;
|
||||
callback = callback || console.log;
|
||||
try {
|
||||
callback(...data);
|
||||
} catch (e) {
|
||||
error(e);
|
||||
}
|
||||
}
|
||||
|
||||
static forEach(items, cb, error) {
|
||||
for (let i = 0; i < items.length; i++) {
|
||||
VUtils.tryCatch([items[i], i], cb, error);
|
||||
}
|
||||
}
|
||||
|
||||
static get(valueOne, value) {
|
||||
return this.wrap(valueOne, value);
|
||||
}
|
||||
|
||||
static mergeKeys(root, target) {
|
||||
root = root || {};
|
||||
let keys = Object.keys(root);
|
||||
for (let key of keys) {
|
||||
target[key] = root[key];
|
||||
}
|
||||
return target;
|
||||
}
|
||||
|
||||
static mergeOptions(target, root) {
|
||||
root = root || {};
|
||||
let keys = Object.keys(root);
|
||||
for (let key of keys) {
|
||||
target[key] = VUtils.get(root[key], target[key]);
|
||||
}
|
||||
return target;
|
||||
}
|
||||
|
||||
static wrap(valueOne, valueTwo) {
|
||||
let x = typeof valueTwo;
|
||||
if (!(valueOne instanceof Array) && valueTwo instanceof Array) {
|
||||
return [valueOne];
|
||||
}
|
||||
if (x === 'string' && valueOne instanceof Array) {
|
||||
return valueOne.join(".");
|
||||
}
|
||||
return valueOne === undefined ? valueTwo : valueOne;
|
||||
}
|
||||
|
||||
static tempId() {
|
||||
return 'temp_' + Math.random().toString(36).substr(2, 16);
|
||||
}
|
||||
|
||||
static hexToRgb(hex) {
|
||||
hex = hex.replace("#", "");
|
||||
let bigint = parseInt(hex, 16),
|
||||
r = (bigint >> 16) & 255,
|
||||
g = (bigint >> 8) & 255,
|
||||
b = bigint & 255;
|
||||
|
||||
return [r / 255, g / 255, b / 255];
|
||||
}
|
||||
|
||||
static nodePrototypes() {
|
||||
Node.prototype.find = function (selector) {
|
||||
return this.closest(selector);
|
||||
};
|
||||
Node.prototype.createNew = function (tag, options = {}) {
|
||||
let el = document.createElement(tag);
|
||||
if (options.classes) {
|
||||
el.classList.add(...VUtils.get(options.classes, []));
|
||||
}
|
||||
el.id = VUtils.get(options.id, '');
|
||||
el.innerHTML = VUtils.get(options.content, "");
|
||||
VUtils.mergeKeys(options.dataset, el.dataset);
|
||||
if (VUtils.get(options.append, true) === true) {
|
||||
this.appendChild(el);
|
||||
}
|
||||
|
||||
return el;
|
||||
};
|
||||
Node.prototype.addDelegatedEventListener = function (type, aim, callback, err) {
|
||||
if (!callback || !type || !aim)
|
||||
return;
|
||||
this.addMultiListener(type, (event) => {
|
||||
let target = event.target;
|
||||
if (event.detail instanceof HTMLElement) {
|
||||
target = event.detail;
|
||||
}
|
||||
if (target instanceof HTMLElement) {
|
||||
if (target.matches(aim)) {
|
||||
VUtils.tryCatch([event, target], callback, err);
|
||||
} else {
|
||||
const parent = target.find(aim);
|
||||
if (parent) {
|
||||
VUtils.tryCatch([event, parent], callback, err);
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
Node.prototype.addMultiListener = function (listener, cb, options = {}) {
|
||||
let splits = listener.split(" ");
|
||||
for (let split of splits) {
|
||||
this.addEventListener(split, cb, options);
|
||||
}
|
||||
};
|
||||
String.prototype.firstUpper = function () {
|
||||
return this.charAt(0).toUpperCase() + this.slice(1);
|
||||
};
|
||||
String.prototype.firstLower = function () {
|
||||
return this.charAt(0).toLowerCase() + this.slice(1);
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
VUtils.makePublic();
|
||||
8
src/app/External/external.path
vendored
Normal file
8
src/app/External/external.path
vendored
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
External/VTepL/Core
|
||||
External/VTepL/Interpreter
|
||||
External/VTepL/Parser
|
||||
External/VTepL/Template
|
||||
External/VUtils
|
||||
External/VRipple
|
||||
External/VCollapse
|
||||
External/SelectJs
|
||||
28
src/app/app.js
Normal file
28
src/app/app.js
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
class App {
|
||||
async ignite() {
|
||||
window.onerror = (err) => {
|
||||
PrettyConsole.error(err);
|
||||
}
|
||||
moduleLoader.ignite();
|
||||
moduleLoader.finishModule('Startup');
|
||||
}
|
||||
|
||||
finish() {
|
||||
setTimeout(() => {
|
||||
$('v-loading-screen').classList.add('hide');
|
||||
}, 300)
|
||||
$('body').addDelegatedEventListener('click', '.menu-toggle', () => {
|
||||
$('v-app').classList.toggle('open');
|
||||
})
|
||||
PrettyConsole.debug(App, moduleLoader.modules);
|
||||
}
|
||||
}
|
||||
|
||||
const app = new App();
|
||||
moduleLoader.setCb(app.finish.bind(app));
|
||||
(() => {
|
||||
app.ignite().catch(onerror => {
|
||||
PrettyConsole.error(App, onerror);
|
||||
alert("App Startup failed... open console to see details");
|
||||
});
|
||||
})();
|
||||
173
src/app/startup.js
Normal file
173
src/app/startup.js
Normal file
|
|
@ -0,0 +1,173 @@
|
|||
const EVENT_MODULE_LOADED = "module-loaded";
|
||||
|
||||
class Startup {
|
||||
constructor(modules) {
|
||||
this.modules = modules;
|
||||
this.cb = null;
|
||||
this.isErrored = false;
|
||||
this.isAllLoadedFired = false;
|
||||
document.addEventListener(EVENT_MODULE_LOADED, this.allModulesLoaded.bind(this));
|
||||
}
|
||||
|
||||
setCb(cb) {
|
||||
this.cb = cb;
|
||||
}
|
||||
|
||||
setErrCb(cb) {
|
||||
this.errCb = cb;
|
||||
}
|
||||
|
||||
finishModule(name) {
|
||||
name = Startup.getName(name);
|
||||
this.modules[name] = !0;
|
||||
PrettyConsole.debug(name, "Module Loading Done");
|
||||
document.dispatchEvent(new CustomEvent(EVENT_MODULE_LOADED, {detail: name}));
|
||||
}
|
||||
|
||||
moduleErrored(name, error) {
|
||||
name = Startup.getName(name);
|
||||
if (this.errCb) {
|
||||
this.errCb(name, error);
|
||||
}
|
||||
this.isErrored = true;
|
||||
document.dispatchEvent(new CustomEvent(`module-errored`, {
|
||||
data: {name, error}
|
||||
}));
|
||||
}
|
||||
|
||||
isModuleLoaded(names, cb) {
|
||||
let self = this;
|
||||
if (typeof names === 'string') {
|
||||
names = [names];
|
||||
}
|
||||
let pendingModules = names.filter(function (module) {
|
||||
return !self.modules[Startup.getName(module)]
|
||||
});
|
||||
if (pendingModules.length > 0) {
|
||||
function listener() {
|
||||
document.removeEventListener(EVENT_MODULE_LOADED, listener);
|
||||
self.isModuleLoaded.bind(self)(pendingModules, cb);
|
||||
}
|
||||
|
||||
document.addEventListener(EVENT_MODULE_LOADED, listener);
|
||||
} else {
|
||||
cb();
|
||||
}
|
||||
}
|
||||
|
||||
registerModule(name) {
|
||||
this.modules[Startup.getName(name)] = false;
|
||||
}
|
||||
|
||||
allModulesLoaded() {
|
||||
if (this.isErrored) {
|
||||
return false;
|
||||
}
|
||||
if (this.isAllLoadedFired) {
|
||||
return true;
|
||||
}
|
||||
for (let module in this.modules) {
|
||||
if (this.modules.hasOwnProperty(module) && !this.modules[module]) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
this.isAllLoadedFired = true;
|
||||
if (this.cb) {
|
||||
this.cb();
|
||||
}
|
||||
document.dispatchEvent(new CustomEvent('startupFin'));
|
||||
return true;
|
||||
}
|
||||
|
||||
ignite() {
|
||||
document.dispatchEvent(new CustomEvent('ignite'));
|
||||
}
|
||||
|
||||
registerInit(onInit) {
|
||||
document.addEventListener('ignite', onInit);
|
||||
}
|
||||
|
||||
loadOtherJsFiles(files) {
|
||||
for (let file of files) {
|
||||
this.registerModule(file[1]);
|
||||
let script = document.createElement('script');
|
||||
script.onload = () => {
|
||||
moduleLoader.finishModule(file[1]);
|
||||
}
|
||||
script.onerror = (err) => {
|
||||
moduleLoader.moduleErrored(file[1], err);
|
||||
}
|
||||
script.src = file[0];
|
||||
document.body.appendChild(script);
|
||||
}
|
||||
}
|
||||
|
||||
static getName(name) {
|
||||
if (typeof name === 'function') {
|
||||
return name.name;
|
||||
}
|
||||
return name;
|
||||
}
|
||||
}
|
||||
|
||||
class Loader {
|
||||
constructor() {
|
||||
document.addEventListener(EVENT_MODULE_LOADED, this.loadProgress.bind(this));
|
||||
document.addEventListener('startupFin', this.finish.bind(this));
|
||||
this.loadingText = document.querySelector('v-loading-text');
|
||||
this.loadingPerc = document.querySelector('v-loading-stats');
|
||||
this.loadingScreen = document.querySelector('v-loading-screen');
|
||||
this.loaded = 0;
|
||||
this.toLoad = 0;
|
||||
this.isErrored = false;
|
||||
}
|
||||
|
||||
addToLoadItem(i) {
|
||||
this.toLoad += i;
|
||||
}
|
||||
|
||||
addLoadedItems(i) {
|
||||
this.loaded += i;
|
||||
this.loadProgress();
|
||||
}
|
||||
|
||||
loadProgress() {
|
||||
if (this.isErrored) return;
|
||||
let loaded = 0,
|
||||
keys = Object.keys(moduleLoader.modules);
|
||||
for (let key of keys) {
|
||||
if (moduleLoader.modules[key]) {
|
||||
loaded++;
|
||||
}
|
||||
}
|
||||
loaded += this.loaded;
|
||||
let toLoad = keys.length + this.toLoad;
|
||||
const perc = ((loaded / toLoad) * 100).toFixed(2) + "%";
|
||||
this.loadingScreen.style.setProperty('--loading-scale', perc);
|
||||
this.loadingPerc.innerText = `${loaded} / ${toLoad} (${perc})`;
|
||||
}
|
||||
|
||||
onError(module, error) {
|
||||
this.isErrored = true;
|
||||
this.loadingText.innerText = "Errored";
|
||||
this.loadingPerc.innerHTML = `Module ${module} failed to load<br>${error}`;
|
||||
this.loadingScreen.style.setProperty('--loading-color', '#fa0000');
|
||||
PrettyConsole.error("Startup", `Module ${module} failed to load`)
|
||||
}
|
||||
|
||||
finish() {
|
||||
document.removeEventListener('module-loaded-progress', this.loadProgress.bind(this));
|
||||
}
|
||||
}
|
||||
|
||||
const moduleLoader = new Startup({
|
||||
'Startup': false,
|
||||
});
|
||||
const loader = new Loader();
|
||||
moduleLoader.setErrCb(loader.onError.bind(loader));
|
||||
const preLoader = new PreLoader();
|
||||
moduleLoader.isModuleLoaded('PreLoader', () => {
|
||||
moduleLoader.loadOtherJsFiles([
|
||||
['/out/app/app.min.js', 'app.js'],
|
||||
]);
|
||||
});
|
||||
0
src/icons/.gitkeep
Normal file
0
src/icons/.gitkeep
Normal file
3
src/icons/close.svg
Normal file
3
src/icons/close.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg enable-background="new 0 0 512 512" version="1.1" viewBox="0 0 512 512" xml:space="preserve"
|
||||
xmlns="http://www.w3.org/2000/svg"><path d="m443.6 387.1-131.2-131.7 131.5-130c5.4-5.4 5.4-14.2 0-19.6l-37.4-37.6c-2.6-2.6-6.1-4-9.8-4s-7.2 1.5-9.8 4l-130.9 129.6-131.1-129.5c-2.6-2.6-6.1-4-9.8-4s-7.2 1.5-9.8 4l-37.3 37.6c-5.4 5.4-5.4 14.2 0 19.6l131.5 130-131.1 131.6c-2.6 2.6-4.1 6.1-4.1 9.8s1.4 7.2 4.1 9.8l37.4 37.6c2.7 2.7 6.2 4.1 9.8 4.1 3.5 0 7.1-1.3 9.8-4.1l130.6-131.2 130.7 131.1c2.7 2.7 6.2 4.1 9.8 4.1 3.5 0 7.1-1.3 9.8-4.1l37.4-37.6c2.6-2.6 4.1-6.1 4.1-9.8-0.1-3.6-1.6-7.1-4.2-9.7z"/></svg>
|
||||
|
After Width: | Height: | Size: 646 B |
1
src/icons/error.svg
Normal file
1
src/icons/error.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 192 512"><path fill="currentColor" d="M176 432c0 44.112-35.888 80-80 80s-80-35.888-80-80 35.888-80 80-80 80 35.888 80 80zM25.26 25.199l13.6 272C39.499 309.972 50.041 320 62.83 320h66.34c12.789 0 23.331-10.028 23.97-22.801l13.6-272C167.425 11.49 156.496 0 142.77 0H49.23C35.504 0 24.575 11.49 25.26 25.199z"></path></svg>
|
||||
|
After Width: | Height: | Size: 403 B |
6
src/icons/help-circle.svg
Normal file
6
src/icons/help-circle.svg
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
|
||||
stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon-help-circle">
|
||||
<circle cx="12" cy="12" r="10"/>
|
||||
<path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/>
|
||||
<line x1="12" y1="17" x2="12.01" y2="17"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 356 B |
4
src/icons/info.svg
Normal file
4
src/icons/info.svg
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
<svg focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 192 512">
|
||||
<path fill="currentColor"
|
||||
d="M20 424.229h20V279.771H20c-11.046 0-20-8.954-20-20V212c0-11.046 8.954-20 20-20h112c11.046 0 20 8.954 20 20v212.229h20c11.046 0 20 8.954 20 20V492c0 11.046-8.954 20-20 20H20c-11.046 0-20-8.954-20-20v-47.771c0-11.046 8.954-20 20-20zM96 0C56.235 0 24 32.235 24 72s32.235 72 72 72 72-32.235 72-72S135.764 0 96 0z"></path>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 460 B |
4
src/icons/success.svg
Normal file
4
src/icons/success.svg
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
<svg focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
|
||||
<path fill="currentColor"
|
||||
d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"></path>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 426 B |
5
src/icons/warning.svg
Normal file
5
src/icons/warning.svg
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="exclamation-triangle" role="img" xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 576 512">
|
||||
<path fill="currentColor"
|
||||
d="M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937 0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154 0l239.94 416.028zM288 354c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"></path>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 675 B |
5
src/loader.path
Normal file
5
src/loader.path
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
Core/PrettyConsole
|
||||
Core/Network
|
||||
Core/Math
|
||||
Core/PreLoader
|
||||
startup
|
||||
44
src/theme/_base.scss
Normal file
44
src/theme/_base.scss
Normal file
|
|
@ -0,0 +1,44 @@
|
|||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
*:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background-color: $bg;
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
font-family: 'Inter', sans-serif;;
|
||||
}
|
||||
|
||||
.hideAll {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
vertical-align: middle;
|
||||
font-size: 1em;
|
||||
shape-rendering: geometricPrecision;
|
||||
transition: transform .5s cubic-bezier(.22, .61, .36, 1);
|
||||
stroke-width: 5px;
|
||||
text-align: center;
|
||||
margin-right: .5rem;
|
||||
|
||||
&.block {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
v-content {
|
||||
display: block;
|
||||
}
|
||||
|
||||
v-collapse-content .inner {
|
||||
padding: 1rem;
|
||||
}
|
||||
60
src/theme/_loading.scss
Normal file
60
src/theme/_loading.scss
Normal file
|
|
@ -0,0 +1,60 @@
|
|||
@import "variable";
|
||||
|
||||
v-loading-screen {
|
||||
background-color: #000;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
z-index: 10000;
|
||||
|
||||
&.hide {
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
transition-delay: 1s;
|
||||
transition: opacity 1s;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
v-loading-text {
|
||||
font-family: monospace;
|
||||
font-size: 4vw;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
v-loading-stats {
|
||||
font-family: monospace;
|
||||
color: var(--loading-color, $primary);
|
||||
display: block;
|
||||
font-size: .75rem;
|
||||
margin-top: .2rem;
|
||||
height: 1.5rem;
|
||||
letter-spacing: .01rem;
|
||||
text-align: center;
|
||||
transition: color .5s ease-in;
|
||||
}
|
||||
|
||||
v-loader {
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 30vw;
|
||||
height: 1vw;
|
||||
background-color: $loader-delay-color;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
width: var(--loading-scale, 0);
|
||||
height: 100%;
|
||||
transition: all .5s ease-in;
|
||||
background-color: var(--loading-color, $primary);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
42
src/theme/_scrollbar.scss
Normal file
42
src/theme/_scrollbar.scss
Normal file
|
|
@ -0,0 +1,42 @@
|
|||
|
||||
::-webkit-scrollbar {
|
||||
width: 3px;
|
||||
height: 3px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-button {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #e1e1e1;
|
||||
border: 0 none #ffffff;
|
||||
border-radius: 100px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:active {
|
||||
background: $primary;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: #666666;
|
||||
border: 0 none #ffffff;
|
||||
border-radius: 46px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track:hover {
|
||||
background: #666666;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track:active {
|
||||
background: #666666;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-corner {
|
||||
background: transparent;
|
||||
}
|
||||
31
src/theme/_variable.scss
Normal file
31
src/theme/_variable.scss
Normal file
|
|
@ -0,0 +1,31 @@
|
|||
$bg: #303030;
|
||||
$darker: #212121;
|
||||
$transparentDark: rgba(33, 33, 33, 0.39);
|
||||
$nav: #1b1b1b;
|
||||
|
||||
$primary: #3949ab;
|
||||
$second: #ff0089;
|
||||
$active: #4dbb5d;
|
||||
|
||||
$loader-delay-color: rgb(1, 21, 29);
|
||||
|
||||
$hoverDark: rgba(0,0,0,.6);
|
||||
|
||||
$successBorder: #39ab48;
|
||||
$errorBorder: #a70101;
|
||||
$warningBorder: #ff7700;
|
||||
|
||||
$box-shadow-1: 0 .3rem .34rem rgba(0, 0, 0, 0.16), 0 .3rem .34rem rgba(0, 0, 0, 0.23);
|
||||
$box-shadow-2: 0 .3rem .4rem rgba(0, 0, 0, 0.16), 0 .3rem .4rem rgba(0, 0, 0, 0.23);
|
||||
|
||||
$textColor: #fff;
|
||||
$textColorLessBrightness: #dcdcdc;
|
||||
$textColorMoreLessBrightness: #aaa;
|
||||
|
||||
$surfaceOnColor: #e9e9e9;
|
||||
$errorInYourFace: #f32f32;
|
||||
$errorInYourFaceBorder: #cf1b1b;
|
||||
$errorColor: #c51162;
|
||||
$errorOnColor: #8e0038;
|
||||
$validColor: #39ab48;
|
||||
$validOnColor: #39ab48;
|
||||
150
src/theme/components/_btn.scss
Normal file
150
src/theme/components/_btn.scss
Normal file
|
|
@ -0,0 +1,150 @@
|
|||
.btn {
|
||||
font-size: inherit;
|
||||
border: none;
|
||||
background: $primary radial-gradient(circle at 0px 0px, #3949ab 0%, rgba(0, 0, 0, .2) 100%) no-repeat;
|
||||
color: #fff;
|
||||
padding: 0.3em 1.1em;
|
||||
margin: .2em 0;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
user-select: none;
|
||||
border-radius: .1rem;
|
||||
box-shadow: $box-shadow-1;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
transition: background-color .5s, box-shadow .5s;
|
||||
|
||||
&:focus {
|
||||
box-shadow: $box-shadow-2;
|
||||
}
|
||||
|
||||
&--empty {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
&--outline {
|
||||
background: transparent;
|
||||
border: 1px solid $primary;
|
||||
}
|
||||
|
||||
&--space {
|
||||
margin-top: .5rem;
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
|
||||
&[disabled] {
|
||||
background: $hoverDark !important;
|
||||
color: #303030 !important;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
&--valid {
|
||||
background: $validColor radial-gradient(circle at 0px 0px, $validColor 0%, rgba(0, 0, 0, .2) 100%) no-repeat;
|
||||
}
|
||||
|
||||
&--accent {
|
||||
background: $second radial-gradient(circle at 0px 0px, $second 0%, rgba(0, 0, 0, .2) 100%) no-repeat;
|
||||
}
|
||||
|
||||
&--warn {
|
||||
background: $warningBorder radial-gradient(circle at 0px 0px, $warningBorder 0%, rgba(0, 0, 0, .2) 100%) no-repeat;
|
||||
}
|
||||
&--error {
|
||||
background: $errorBorder radial-gradient(circle at 0px 0px, $errorBorder 0%, rgba(0, 0, 0, .2) 100%) no-repeat;
|
||||
}
|
||||
|
||||
&--icon {
|
||||
.icon {
|
||||
font-size: 1em;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-fab {
|
||||
border-radius: 2em;
|
||||
width: 2em;
|
||||
height: 2em;
|
||||
padding: .2em;
|
||||
}
|
||||
|
||||
.ripple {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
background: transparent;
|
||||
pointer-events: stroke;
|
||||
|
||||
&__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(99, 99, 99, 0.2);
|
||||
animation: a-ripple .5s ease-in;
|
||||
pointer-events: none;
|
||||
|
||||
&.to-remove {
|
||||
animation: remove-ripple .5s;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn--outline .ripple__effect {
|
||||
background: rgba(57, 73, 171, .5);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.btn__content {
|
||||
z-index: 1;
|
||||
font-weight: 400;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@keyframes remove-ripple {
|
||||
from {
|
||||
opacity: 1;
|
||||
}
|
||||
to {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes a-ripple {
|
||||
0% {
|
||||
opacity: 0;
|
||||
padding-bottom: 0;
|
||||
width: 0;
|
||||
}
|
||||
25% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
width: 200%;
|
||||
padding-bottom: 200%;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-line {
|
||||
text-align: right;
|
||||
|
||||
button {
|
||||
margin-right: 0.2em;
|
||||
margin-left: 0.2em;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
button:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
85
src/theme/components/_collapse.scss
Normal file
85
src/theme/components/_collapse.scss
Normal file
|
|
@ -0,0 +1,85 @@
|
|||
v-collapse {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
v-collapse-item.open {
|
||||
margin-top: .5rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
v-collapse-item, v-collapse-content, v-collapse-head {
|
||||
display: block;
|
||||
}
|
||||
|
||||
v-collapse-item {
|
||||
margin-top: 0;
|
||||
transition: box-shadow .5s, margin .3s;
|
||||
box-shadow: #3949ab;
|
||||
|
||||
&.open {
|
||||
box-shadow: $box-shadow-1;
|
||||
|
||||
v-collapse-content {
|
||||
overflow: unset;
|
||||
animation: collapse-overflow .5s linear;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes collapse-overflow {
|
||||
0%, 99% {
|
||||
overflow: hidden;
|
||||
}
|
||||
100% {
|
||||
overflow: unset;
|
||||
}
|
||||
}
|
||||
|
||||
v-collapse-item:not(:last-child) {
|
||||
v-collapse-head {
|
||||
border-bottom: 0.05rem solid rgba(59, 59, 59, .3);
|
||||
}
|
||||
}
|
||||
|
||||
v-collapse-head {
|
||||
padding: 1rem .5rem;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
background-color: rgba(0, 0, 0, .2);
|
||||
color: #ffffff;
|
||||
font-weight: bold;
|
||||
position: relative;
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
border: solid #fff;
|
||||
border-width: 0 .1rem .1rem 0;
|
||||
width: .5rem;
|
||||
height: .5rem;
|
||||
position: absolute;
|
||||
right: 1em;
|
||||
margin-top: .1rem;
|
||||
transform: rotate(45deg);
|
||||
transition: .3s;
|
||||
}
|
||||
}
|
||||
|
||||
v-collapse-item.open {
|
||||
v-collapse-head:after {
|
||||
transform: rotate(225deg);
|
||||
margin-top: .4rem;
|
||||
}
|
||||
}
|
||||
|
||||
v-collapse-content {
|
||||
max-height: 0;
|
||||
overflow: hidden;
|
||||
transition: max-height .5s cubic-bezier(0.65, -0.02, 0.56, 1.04);
|
||||
background-color: rgba(0, 0, 0, .05);
|
||||
}
|
||||
|
||||
.collapse-inner {
|
||||
display: block;
|
||||
padding: 1rem;
|
||||
}
|
||||
29
src/theme/components/_color.scss
Normal file
29
src/theme/components/_color.scss
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
input[type="color"] {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.colorBlob {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
}
|
||||
|
||||
.color-picker {
|
||||
display: block;
|
||||
position: relative;
|
||||
margin: .2rem 0;
|
||||
height: 1.5rem;
|
||||
width: 4rem;
|
||||
border-radius: 5rem;
|
||||
overflow: hidden;
|
||||
box-shadow: $box-shadow-1;
|
||||
|
||||
input {
|
||||
position: absolute !important;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
111
src/theme/components/_input.scss
Normal file
111
src/theme/components/_input.scss
Normal file
|
|
@ -0,0 +1,111 @@
|
|||
v-input input {
|
||||
font-size: 1em;
|
||||
background-color: rgba(0, 0, 0, .4);
|
||||
border: none;
|
||||
border-bottom: 0.15em solid $primary;
|
||||
color: $textColor;
|
||||
padding: 0.5em;
|
||||
}
|
||||
|
||||
v-input.focus input,
|
||||
v-input input:focus {
|
||||
border-color: $second;
|
||||
}
|
||||
|
||||
v-input.valid input {
|
||||
border-color: $validOnColor;
|
||||
}
|
||||
|
||||
v-input.invalid input {
|
||||
border-color: $errorInYourFaceBorder;
|
||||
}
|
||||
|
||||
v-input {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-bottom: 0.2em;
|
||||
position: relative;
|
||||
font-size: 1.3rem;
|
||||
padding-top: 1em;
|
||||
|
||||
&.no-space {
|
||||
padding-top: .1em;
|
||||
}
|
||||
}
|
||||
|
||||
v-input label {
|
||||
font-size: .7em;
|
||||
position: absolute;
|
||||
top: 1.8em;
|
||||
left: .5em;
|
||||
pointer-events: none;
|
||||
vertical-align: middle;
|
||||
transform: translateY(50%);
|
||||
color: #dcdcdc;
|
||||
transition: all .2s ease-out;
|
||||
}
|
||||
|
||||
v-input.focus label,
|
||||
v-input input:focus ~ label {
|
||||
top: 0.3em;
|
||||
left: 0;
|
||||
transform: translateY(0);
|
||||
font-size: .6em;
|
||||
}
|
||||
|
||||
v-input .error {
|
||||
display: none;
|
||||
}
|
||||
|
||||
v-input.invalid .error {
|
||||
margin-top: 0.2em;
|
||||
display: block;
|
||||
font-size: .7em;
|
||||
color: $errorInYourFace;
|
||||
}
|
||||
|
||||
$height: 1.5rem;
|
||||
$innerHeight: 1rem;
|
||||
$width: 3rem;
|
||||
$innerWidth: 1rem;
|
||||
|
||||
v-switch {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
margin-top: .5rem;
|
||||
|
||||
input {
|
||||
position: absolute;
|
||||
appearance: none;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
border-radius: 9999px;
|
||||
width: $width;
|
||||
height: $height;
|
||||
background-color: $hoverDark;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
margin-right: 0.5rem;
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
background-color: #dcdcdc;
|
||||
position: absolute;
|
||||
top: 0.2rem;
|
||||
left: 0.25rem;
|
||||
height: $innerHeight;
|
||||
width: $innerWidth;
|
||||
border-radius: 9999px;
|
||||
transition: .5s;
|
||||
}
|
||||
}
|
||||
|
||||
input:checked + label:after {
|
||||
transform: translateX($width - $height);
|
||||
background-color: $primary;
|
||||
}
|
||||
}
|
||||
79
src/theme/components/_modal.scss
Normal file
79
src/theme/components/_modal.scss
Normal file
|
|
@ -0,0 +1,79 @@
|
|||
v-modal-container {
|
||||
display: none;
|
||||
|
||||
&.open {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
z-index: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, .7);
|
||||
}
|
||||
|
||||
v-modal {
|
||||
display: block;
|
||||
max-width: 768px;
|
||||
min-width: 300px;
|
||||
z-index: 1;
|
||||
background-color: #333333;
|
||||
color: #fff;
|
||||
box-shadow: $box-shadow-1;
|
||||
|
||||
v-modal-head, v-modal-content {
|
||||
display: block;
|
||||
padding: .2rem;
|
||||
}
|
||||
|
||||
v-modal-head {
|
||||
background-color: #212121;
|
||||
box-shadow: $box-shadow-1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.headline {
|
||||
padding: .5rem 1rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
v-modal-content {
|
||||
padding: 1rem;
|
||||
|
||||
.button-group {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-top: 1rem;
|
||||
|
||||
.btn {
|
||||
margin-right: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.close-modal {
|
||||
margin-left: auto;
|
||||
fill: #fff;
|
||||
cursor: pointer;
|
||||
|
||||
* {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
&.close {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
141
src/theme/components/_notification-look.scss
Normal file
141
src/theme/components/_notification-look.scss
Normal file
|
|
@ -0,0 +1,141 @@
|
|||
@import "../variable";
|
||||
|
||||
v-notification, v-toast {
|
||||
top: 10vh;
|
||||
padding-bottom: .3rem;
|
||||
height: 90vh;
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
v-notification {
|
||||
width: 90%;
|
||||
max-width: 400px;
|
||||
right: .3rem;
|
||||
}
|
||||
|
||||
v-toast {
|
||||
right: 0;
|
||||
left: 0;
|
||||
margin: 0 auto;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
v-notification-toast {
|
||||
margin-bottom: 10px;
|
||||
box-shadow: $box-shadow-1;
|
||||
overflow: hidden;
|
||||
background-color: $darker;
|
||||
color: #fff;
|
||||
border-radius: 9999rem;
|
||||
animation: toastOut ease-in-out 2000ms;
|
||||
display: flex;
|
||||
|
||||
.message {
|
||||
padding: 1rem 1.5rem;
|
||||
}
|
||||
|
||||
.icon-wrap {
|
||||
background-color: $primary;
|
||||
font-size: 1.3em;
|
||||
padding: .5em .5em .5em 1rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.icon {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
&.success {
|
||||
background-color: $successBorder;
|
||||
}
|
||||
|
||||
&.error {
|
||||
background-color: $errorBorder;
|
||||
}
|
||||
|
||||
&.warning {
|
||||
background-color: $warningBorder;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
v-notification-item {
|
||||
margin-bottom: 10px;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
box-shadow: $box-shadow-1;
|
||||
overflow: hidden;
|
||||
background-color: $darker;
|
||||
|
||||
.message {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.fade-bar {
|
||||
animation: fadeOut ease-in-out 3000ms;
|
||||
height: .25rem;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
transform-origin: left;
|
||||
background-color: $primary;
|
||||
|
||||
&.endless {
|
||||
animation: endlessFade ease-in-out 500ms infinite;
|
||||
}
|
||||
|
||||
&.success {
|
||||
background-color: $successBorder;
|
||||
}
|
||||
|
||||
&.error {
|
||||
background-color: $errorBorder;
|
||||
}
|
||||
|
||||
&.warning {
|
||||
background-color: $warningBorder;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@keyframes fadeOut {
|
||||
from {
|
||||
transform: scaleX(1);
|
||||
}
|
||||
to {
|
||||
transform: scaleX(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes toastOut {
|
||||
0%, 90% {
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
transform: translateY(200%);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes endlessFade {
|
||||
0% {
|
||||
transform: scaleX(1);
|
||||
transform-origin: right;
|
||||
}
|
||||
49% {
|
||||
transform-origin: right;
|
||||
}
|
||||
50% {
|
||||
transform: scaleX(0);
|
||||
transform-origin: left;
|
||||
}
|
||||
100% {
|
||||
transform: scaleX(1);
|
||||
}
|
||||
}
|
||||
94
src/theme/components/_range.scss
Normal file
94
src/theme/components/_range.scss
Normal file
|
|
@ -0,0 +1,94 @@
|
|||
.range {
|
||||
-webkit-appearance: none;
|
||||
width: 100%;
|
||||
margin: .5rem 0;
|
||||
background-color: rgba(0, 0, 0, 0.12);
|
||||
|
||||
&.center {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
&.right {
|
||||
margin-left: 10%;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&::-webkit-slider-runnable-track {
|
||||
width: 100%;
|
||||
height: .3rem;
|
||||
cursor: pointer;
|
||||
background-color: rgba(0, 0, 0, 0.12);
|
||||
color: rgba(0, 0, 0, 0.12);
|
||||
border-radius: 9999px;
|
||||
border: none;
|
||||
}
|
||||
|
||||
&::-webkit-slider-thumb {
|
||||
border: 0 solid rgba(0, 0, 30, 0);
|
||||
height: 1rem;
|
||||
width: 1rem;
|
||||
border-radius: 9999px;
|
||||
background: $primary;
|
||||
cursor: pointer;
|
||||
-webkit-appearance: none;
|
||||
margin-top: -.33rem;
|
||||
}
|
||||
|
||||
&::-moz-range-track {
|
||||
width: 100%;
|
||||
height: .3rem;
|
||||
cursor: pointer;
|
||||
background-color: rgba(0, 0, 0, 0.12);
|
||||
color: rgba(0, 0, 0, 0.12);
|
||||
border-radius: 9999px;
|
||||
border: none;
|
||||
}
|
||||
|
||||
&::-moz-range-thumb {
|
||||
border: 0 solid rgba(0, 0, 30, 0);
|
||||
height: 1rem;
|
||||
width: 1rem;
|
||||
border-radius: 9999px;
|
||||
background: $primary;
|
||||
cursor: pointer;
|
||||
margin-top: -.33rem;
|
||||
}
|
||||
}
|
||||
|
||||
.input-range {
|
||||
display: block;
|
||||
position: relative;
|
||||
margin-bottom: 2rem;
|
||||
|
||||
.max, .min, .current {
|
||||
font-size: .8em;
|
||||
color: #dcdcdc;
|
||||
position: absolute;
|
||||
bottom: -1rem;
|
||||
}
|
||||
|
||||
.current {
|
||||
display: block;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
font-weight: bold;
|
||||
color: $second;
|
||||
}
|
||||
}
|
||||
|
||||
.min {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.max {
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
87
src/theme/components/_select.scss
Normal file
87
src/theme/components/_select.scss
Normal file
|
|
@ -0,0 +1,87 @@
|
|||
$borderRadius: 4px;
|
||||
|
||||
v-select, v-options, v-option, v-label {
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
v-select {
|
||||
display: block;
|
||||
position: relative;
|
||||
margin-bottom: .5rem;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
|
||||
v-label {
|
||||
border-color: rgba(0, 0, 0, .8);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
v-label {
|
||||
padding: .5rem 1rem;
|
||||
background-color: rgba(0, 0, 0, .1);
|
||||
border: 0.1rem solid rgba(0, 0, 0, .6);
|
||||
color: $textColor;
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
position: relative;
|
||||
margin-top: .5rem;
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
border: solid #fff;
|
||||
border-width: 0 .1rem .1rem 0;
|
||||
height: .5rem;
|
||||
width: .5rem;
|
||||
position: absolute;
|
||||
right: 1.1em;
|
||||
margin-top: .1rem;
|
||||
transition: .3s;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
&.open:after {
|
||||
transform: rotate(-135deg);
|
||||
margin-top: .4rem;
|
||||
}
|
||||
}
|
||||
|
||||
v-options {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
max-height: 0;
|
||||
background-color: $bg;
|
||||
z-index: 1000;
|
||||
cursor: pointer;
|
||||
color: $textColor;
|
||||
box-shadow: $box-shadow-1;
|
||||
width: 100%;
|
||||
transition: max-height .3s;
|
||||
}
|
||||
|
||||
|
||||
v-option {
|
||||
padding: .5rem 1rem .5rem .5rem;
|
||||
position: relative;
|
||||
|
||||
&:not(:last-child) {
|
||||
border-bottom: solid 1px #333;
|
||||
}
|
||||
}
|
||||
|
||||
v-option:not([disabled]):hover {
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
v-option[selected] {
|
||||
background-color: $primary;
|
||||
color: $textColor;
|
||||
}
|
||||
|
||||
v-option[disabled] {
|
||||
color: $textColorMoreLessBrightness;
|
||||
}
|
||||
63
src/theme/gui/_graph.scss
Normal file
63
src/theme/gui/_graph.scss
Normal file
|
|
@ -0,0 +1,63 @@
|
|||
.graphContent {
|
||||
position: relative;
|
||||
height: 250px;
|
||||
background-color: #171717;
|
||||
margin: 20px auto;
|
||||
box-shadow: $box-shadow-1;
|
||||
|
||||
canvas {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.indicator {
|
||||
display: inline;
|
||||
font-size: .5rem;
|
||||
border: 1px solid #dcdcdc;
|
||||
color: #dcdcdc;
|
||||
padding: 2px;
|
||||
vertical-align: middle;
|
||||
|
||||
&.running {
|
||||
border-color: $successBorder;
|
||||
color: $successBorder;
|
||||
}
|
||||
|
||||
&.warning {
|
||||
border-color: $warningBorder;
|
||||
color: $warningBorder;
|
||||
}
|
||||
|
||||
&.finished {
|
||||
border-color: $primary;
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
|
||||
.table {
|
||||
margin-bottom: 20px;
|
||||
width: 50%;
|
||||
@media only screen and (max-width: 860px) {
|
||||
width: 100%;
|
||||
|
||||
.table-group .right {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
.table-group {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
margin-top: 5px;
|
||||
border-bottom: 0.001em solid #dcdcdc;
|
||||
|
||||
.left {
|
||||
min-width: 50%
|
||||
}
|
||||
}
|
||||
}
|
||||
44
src/theme/gui/_header.scss
Normal file
44
src/theme/gui/_header.scss
Normal file
|
|
@ -0,0 +1,44 @@
|
|||
#main-header {
|
||||
background-color: #1b1b1b;
|
||||
color: #ffffff;
|
||||
box-shadow: $box-shadow-1;
|
||||
display: flex;
|
||||
|
||||
.logo {
|
||||
display: block;
|
||||
font-family: monospace;
|
||||
font-size: 32px;
|
||||
font-weight: bolder;
|
||||
padding: .5rem 1rem;
|
||||
}
|
||||
|
||||
nav {
|
||||
margin-left: auto;
|
||||
display: flex;
|
||||
|
||||
nav-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0.5rem 1rem;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(0, 0, 0, .5) !important;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background-color: rgba(0, 0, 0, .3);
|
||||
&:after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
width: 100%;
|
||||
height: 4px;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background-color: $primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
11
src/theme/gui/_page.scss
Normal file
11
src/theme/gui/_page.scss
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
.error-page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
|
||||
.wrapper {
|
||||
padding: 1rem;
|
||||
}
|
||||
19
src/theme/main.scss
Normal file
19
src/theme/main.scss
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
@import "variable";
|
||||
@import "base";
|
||||
@import "scrollbar";
|
||||
@import "loading";
|
||||
|
||||
// Components
|
||||
@import "components/btn";
|
||||
@import "components/input";
|
||||
@import "components/select";
|
||||
@import "components/range";
|
||||
@import "components/color";
|
||||
@import "components/collapse";
|
||||
@import "components/modal";
|
||||
@import "components/notification-look";
|
||||
|
||||
// GUI
|
||||
@import "gui/header";
|
||||
@import "gui/graph";
|
||||
@import "gui/page";
|
||||
Loading…
Add table
Add a link
Reference in a new issue