diff --git a/build/iui.js b/build/iui.js index e940907..5597bda 100644 --- a/build/iui.js +++ b/build/iui.js @@ -5784,9 +5784,8 @@ var _default = _IUI.IUI.module( /*#__PURE__*/function (_IUIElement) { window.router.on("route", function (e) { self.textContent = ''; // clear everything - var html = ""; - var route = e.route; - var current = document.createElement("div"); + let route = e.route; + let current = document.createElement("div"); current.innerHTML = route.caption; self.append(current); diff --git a/package.json b/package.json index a5c8351..0b247bc 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@esiur/iui", - "version": "1.1.2", + "version": "1.1.3", "description": "Interactive User Interface", "main": "iui.js", "type": "module", diff --git a/src/Core/App.js b/src/Core/App.js index 2149881..0842707 100644 --- a/src/Core/App.js +++ b/src/Core/App.js @@ -2,29 +2,28 @@ import { IUI } from "../Core/IUI.js"; import RefsCollection from "./RefsCollection.js"; -export default IUI.module(class App extends IUIElement { +export default IUI.module( + class App extends IUIElement { constructor() { - super(); - this.refs = new RefsCollection(this); + super(); + this.refs = new RefsCollection(this); } create() { - this._register("load"); - window.app = this; + this._register("load"); + window.app = this; } - created() { + IUI.bind(this, this, "/", { app: this, refs: this.refs }); - IUI.bind(this, this, "/", {app: this, refs: this.refs}); + // update referencing + this.refs._build(); - // update referencing - this.refs._build(); - - //IUIElement._make_bindings(this); - this.render(); - this._emit("load", { app: this }); - this.loaded = true; + //IUIElement._make_bindings(this); + this.render(); + this._emit("load", { app: this }); + this.loaded = true; } - -}); \ No newline at end of file + } +); diff --git a/src/Core/Binding.js b/src/Core/Binding.js index 64c4dc7..1f17752 100644 --- a/src/Core/Binding.js +++ b/src/Core/Binding.js @@ -2,382 +2,357 @@ import { IUI } from "./IUI.js"; export const BindingType = { - IUIElement: 0, // this will never happen ! - TextNode: 1, - ContentAttribute: 2, - Attribute: 3, - HTMLElementDataAttribute: 4, - IUIElementDataAttribute: 5, - IfAttribute: 6, - RevertAttribute: 7 + IUIElement: 0, // this will never happen ! + TextNode: 1, + ContentAttribute: 2, + Attribute: 3, + HTMLElementDataAttribute: 4, + IUIElementDataAttribute: 5, + IfAttribute: 6, + RevertAttribute: 7, }; export const AttributeBindingDestination = { - Field: 0, - Attribute: 1 + Field: 0, + Attribute: 1, }; -const AsyncFunction = Object.getPrototypeOf(async function () { }).constructor; +const AsyncFunction = Object.getPrototypeOf(async function () {}).constructor; export class Binding { - static create(nodeOrAttributeOrIUIElement, scope) { - var code, isAsync, type, attrType, attrKey, func, script; + static create(nodeOrAttributeOrIUIElement, scope) { + var code, isAsync, type, attrType, attrKey, func, script; - //if (nodeOrAttributeOrIUIElement.created) - // debugger; + //if (nodeOrAttributeOrIUIElement.created) + // debugger; - if (nodeOrAttributeOrIUIElement instanceof IUIElement) { - isAsync = nodeOrAttributeOrIUIElement.hasAttribute("async"); - type = BindingType.IUIElement; - } else if (nodeOrAttributeOrIUIElement instanceof Text) {// nodeOrAttribute.nodeType == 3) { - if (!nodeOrAttributeOrIUIElement.wholeText.match(/\${.*}/)) - return null; - type = BindingType.TextNode; - isAsync = nodeOrAttributeOrIUIElement.parentElement.hasAttribute("async"); - //code = "return `" + nodeOrAttributeOrIUIElement.wholeText + "`;"; + if (nodeOrAttributeOrIUIElement instanceof IUIElement) { + isAsync = nodeOrAttributeOrIUIElement.hasAttribute("async"); + type = BindingType.IUIElement; + } else if (nodeOrAttributeOrIUIElement instanceof Text) { + // nodeOrAttribute.nodeType == 3) { + if (!nodeOrAttributeOrIUIElement.wholeText.match(/\${.*}/)) return null; + type = BindingType.TextNode; + isAsync = nodeOrAttributeOrIUIElement.parentElement.hasAttribute("async"); + //code = "return `" + nodeOrAttributeOrIUIElement.wholeText + "`;"; - script = nodeOrAttributeOrIUIElement.wholeText; - - code = `try {\r\n context.value = \`${script}\`\r\n}\r\n catch(ex) { context.error = ex; }` + script = nodeOrAttributeOrIUIElement.wholeText; - - nodeOrAttributeOrIUIElement.data = ""; - nodeOrAttributeOrIUIElement.created = true; - } else if (nodeOrAttributeOrIUIElement instanceof Attr) { + code = `try {\r\n context.value = \`${script}\`\r\n}\r\n catch(ex) { context.error = ex; }`; - if (nodeOrAttributeOrIUIElement.name.startsWith("async::")) { - isAsync = true; - attrType = AttributeBindingDestination.Attribute; - attrKey = nodeOrAttributeOrIUIElement.name.substr(7); - } - else if (nodeOrAttributeOrIUIElement.name.startsWith("::")) { - isAsync = false; - attrType = AttributeBindingDestination.Attribute; - attrKey = nodeOrAttributeOrIUIElement.name.substr(2); - } - else if (nodeOrAttributeOrIUIElement.name.startsWith("async:")) { - isAsync = true; - attrType = AttributeBindingDestination.Field; - attrKey = nodeOrAttributeOrIUIElement.name.substr(6); + nodeOrAttributeOrIUIElement.data = ""; + nodeOrAttributeOrIUIElement.created = true; + } else if (nodeOrAttributeOrIUIElement instanceof Attr) { + if (nodeOrAttributeOrIUIElement.name.startsWith("async::")) { + isAsync = true; + attrType = AttributeBindingDestination.Attribute; + attrKey = nodeOrAttributeOrIUIElement.name.substr(7); + } else if (nodeOrAttributeOrIUIElement.name.startsWith("::")) { + isAsync = false; + attrType = AttributeBindingDestination.Attribute; + attrKey = nodeOrAttributeOrIUIElement.name.substr(2); + } else if (nodeOrAttributeOrIUIElement.name.startsWith("async:")) { + isAsync = true; + attrType = AttributeBindingDestination.Field; + attrKey = nodeOrAttributeOrIUIElement.name.substr(6); - // skip scope - // if (attrKey == "scope") - // return null; - } - else if (nodeOrAttributeOrIUIElement.name.startsWith(":")) { - isAsync = false; - attrType = AttributeBindingDestination.Field; - attrKey = nodeOrAttributeOrIUIElement.name.substr(1); + // skip scope + // if (attrKey == "scope") + // return null; + } else if (nodeOrAttributeOrIUIElement.name.startsWith(":")) { + isAsync = false; + attrType = AttributeBindingDestination.Field; + attrKey = nodeOrAttributeOrIUIElement.name.substr(1); - // skip scope - // if (attrKey == "scope") - // return null; - } - else { - return null; - } + // skip scope + // if (attrKey == "scope") + // return null; + } else { + return null; + } - // isAsync = nodeOrAttributeOrIUIElement.value.search("await"); + // isAsync = nodeOrAttributeOrIUIElement.value.search("await"); -// code = "return " + nodeOrAttributeOrIUIElement.value + ";"; + // code = "return " + nodeOrAttributeOrIUIElement.value + ";"; - script = nodeOrAttributeOrIUIElement.value - code = `try {\r\n context.value = ${script}; \r\n}\r\n catch(ex) { context.error = ex; }` + script = nodeOrAttributeOrIUIElement.value; + code = `try {\r\n context.value = ${script}; \r\n}\r\n catch(ex) { context.error = ex; }`; - let sentence = attrKey.split("-"); - for (var i = 1; i < sentence.length; i++) - sentence[i] = sentence[i].charAt(0).toUpperCase() + sentence[i].slice(1); - attrKey = sentence.join(""); + let sentence = attrKey.split("-"); + for (var i = 1; i < sentence.length; i++) + sentence[i] = + sentence[i].charAt(0).toUpperCase() + sentence[i].slice(1); + attrKey = sentence.join(""); - if (attrKey == "content") - type = BindingType.ContentAttribute; - else if (attrKey == "if") { - type = BindingType.IfAttribute; - //displayMode = - } - else if (attrKey == "revert") - type = BindingType.RevertAttribute; - else if (attrKey != "data") - type = BindingType.Attribute; - else if (nodeOrAttributeOrIUIElement.ownerElement instanceof IUIElement) - type = BindingType.IUIElementDataAttribute; - else - type = BindingType.HTMLElementDataAttribute; + if (attrKey == "content") type = BindingType.ContentAttribute; + else if (attrKey == "if") { + type = BindingType.IfAttribute; + //displayMode = + } else if (attrKey == "revert") type = BindingType.RevertAttribute; + else if (attrKey != "data") type = BindingType.Attribute; + else if (nodeOrAttributeOrIUIElement.ownerElement instanceof IUIElement) + type = BindingType.IUIElementDataAttribute; + else type = BindingType.HTMLElementDataAttribute; + } + + // test the function + + let scopeKeys = Object.keys(scope); + let scopeValues = Object.values(scope); + + try { + let args = ["data", "d", "context", "_test", ...scopeKeys]; + + if (isAsync) func = new AsyncFunction(...args, code); + else func = new Function(...args, code); + } catch (ex) { + console.log("Test failed: " + ex, code); + return null; + } + + let rt = new Binding(); + Object.assign(rt, { + isAsync, + type, + attrType, + attrKey, + func, + target: nodeOrAttributeOrIUIElement, + checked: false, + script, + scopeKeys, + scopeValues, + }); + return rt; + } + + constructor() { + this.watchList = []; + let self = this; + this.listener = function (name, value) { + self.render(self.data); + }; + } + + _findMap(thisArg) { + // @TODO: Map thisArg too + let map = {}; + + let detector = { + get: function (obj, prop) { + if (typeof prop == "string") { + obj[prop] = {}; + return new Proxy(obj[prop], detector); } + }, + }; + this.checked = true; - // test the function + let proxy = new Proxy(map, detector); - let scopeKeys = Object.keys(scope); - let scopeValues = Object.values(scope); + try { + let d = this.func.apply(thisArg, [ + proxy, + proxy, + {}, + true, + ...this.scopeValues, + ]); + this.map = map; + return d; + } catch (ex) { + //console.log("Proxy failed", ex); + this.map = map; + } + } + + async _execute(thisArg, data) { + if (!this.checked) this._findMap(thisArg); + + let context = {}; + var rt = this.func.apply(thisArg, [ + data, + data, + context, + false, + ...this.scopeValues, + ]); + + //console.log(rt); + if (rt instanceof Promise) await rt; + + if (context.error != undefined) { + console.log( + "Execution failed", + context.error.name + ": " + context.error.message, + this.script, + this.target + ); + return; + } else if (context.value == undefined) { + return; + } else if (context.value instanceof Promise) { + try { + return await context.value; + } catch (ex) { + console.log( + "Execution failed", + ex.name + ": " + ex.message, + this.script, + this.target + ); + } + } else { + return context.value; + } + } + + unbind() { + this.data = null; + for (var i = 0; i < this.watchList.length; i++) + this.watchList[i].data.off(this.watchList[i].event, this.listener); + this.watchList = []; + } + + bind(data, map) { + if (data == null) return; + + if (data?.on) { + for (var p in map) { + let event = ":" + p; + data.on(":" + p, this.listener); + this.watchList.push({ data, event }); + + this.bind(data[p], map[p]); + } + + //if (this.watchList.includes(data)) + // this.watchList.push({ data, event : }); + } else { + for (var p in map) { + this.bind(data[p], map[p]); + } + } + } + + async render(data) { + // @TODO: Checking properties bindings moved here + if (data != this.data) this.unbind(); + + try { + if (this.type === BindingType.IUIElement) { + //let d = this.func.apply(this.target, [data, data]); + //if (d instanceof Promise) + // d = await d; + + let d = await this._execute(this.target, data); + + await this.target.setData(d); + } else if (this.type === BindingType.TextNode) { try { - let args = ["data", "d", "context", "_test", - ...scopeKeys] - - if (isAsync) - func = new AsyncFunction(...args, code); - else - func = new Function(...args, code); - } - catch (ex) { - console.log("Test failed: " + ex, code); - return null; - } + let d = await this._execute(this.target.parentElement, data); + if (d === undefined) return false; + //if (d instanceof Promise) + // d = await d; - let rt = new Binding(); - Object.assign(rt, { isAsync, type, attrType, attrKey, func, target: nodeOrAttributeOrIUIElement, checked: false, script, scopeKeys, scopeValues }); - return rt; + this.target.data = d; // (d === undefined) ? "" : d; + + if (data != this.data) { + this.data = data; + this.bind(data, this.map); + } + } catch (ex) { + this.target.data = ""; + } + } + // Content Attribute + else if (this.type == BindingType.ContentAttribute) { + let targetElement = this.target.ownerElement; + + let d = await this._execute(targetElement, data); + + if (d === undefined) return false; + + //if (d instanceof Promise) + // d = await d; + + targetElement.innerHTML = d; + + if (window?.app?.loaded) { + await IUI.create(targetElement); + IUI.bind( + targetElement, + true, + "content", + targetElement.__i_bindings?.scope + ); + // update references + targetElement.__i_bindings?.scope?.refs?._build(); + await IUI.created(targetElement); + await IUI.render(targetElement, targetElement._data, true); + } + //await IUI.updateTree(targetElement); + } else if (this.type == BindingType.IfAttribute) { + let d = await this._execute(this.target.ownerElement, data); + + //if (d === undefined) + // return false; + + this.target.ownerElement.style.display = d ? "" : "none"; + } else if (this.type == BindingType.RevertAttribute) { + let d = await this._execute(this.target.ownerElement, data); + if (d === undefined) return false; + //if (d instanceof Promise) + // d = await d; + } + // Attribute + else if (this.type === BindingType.Attribute) { + //if (this.target.ownerElement.hasAttribute("debug")) + // debugger; + + let d = await this._execute(this.target.ownerElement, data); + + if (d === undefined) return false; + + //if (d instanceof Promise) + // d = await d; + + if (this.attrType == AttributeBindingDestination.Field) + this.target.ownerElement[this.attrKey] = d; + else this.target.ownerElement.setAttribute(this.attrKey, d); + + if (data != this.data) { + this.data = data; + this.bind(data, this.map); + } + } + + // Data Attribute of IUI Element + else if (this.type === BindingType.IUIElementDataAttribute) { + let d = await this._execute(this.target.ownerElement, data); + //if (d === undefined) + // return false; + + //if (d instanceof Promise) + // d = await d; + await this.target.ownerElement.setData(d); + } + // Data Attribute of HTML Element + else if (this.type == BindingType.HTMLElementDataAttribute) { + let d = await this._execute(this.target.ownerElement, data); + if (d === undefined) return false; + //if (d instanceof Promise) + // d = await d; + this.target.ownerElement.data = d; + } + + return true; + } catch (ex) { + // console.log(ex); + return false; } - - constructor() { - this.watchList = []; - let self = this; - this.listener = function (name, value) { - self.render(self.data); - }; - } - - _findMap(thisArg) { - - // @TODO: Map thisArg too - let map = {}; - - let detector = { - get: function (obj, prop) { - if (typeof prop == "string") { - obj[prop] = {}; - return new Proxy(obj[prop], detector); - } - } - }; - - this.checked = true; - - let proxy = new Proxy(map, detector); - - try { - let d = this.func.apply(thisArg, [proxy, proxy, {}, true - , ...this.scopeValues]); - - this.map = map; - return d; - } - catch (ex) { - //console.log("Proxy failed", ex); - this.map = map; - } - } - - async _execute(thisArg, data) { - if (!this.checked) - this._findMap(thisArg); - - let context = {}; - var rt = this.func.apply(thisArg, [data, data, context, false, - ...this.scopeValues]); - - //console.log(rt); - if (rt instanceof Promise) - await rt; - - if (context.error != undefined) - { - console.log("Execution failed", context.error.name + ": " + context.error.message, this.script, this.target); - return; - } - else if (context.value == undefined) - { - return; - } - else if (context.value instanceof Promise) - { - try - { - return await context.value; - } catch(ex) { - console.log("Execution failed", ex.name + ": " + ex.message, this.script, this.target); - } - } - else - { - return context.value; - } - } - - unbind() { - this.data = null; - for (var i = 0; i < this.watchList.length; i++) - this.watchList[i].data.off(this.watchList[i].event, this.listener); - this.watchList = []; - } - - bind(data, map) { - if (data == null) - return; - - if (data?.on) { - - for (var p in map) { - let event = ":" + p; - data.on(":" + p, this.listener); - this.watchList.push({ data, event}); - - this.bind(data[p], map[p]); - } - - //if (this.watchList.includes(data)) - // this.watchList.push({ data, event : }); - } - else { - for (var p in map) { - this.bind(data[p], map[p]); - } - } - } - - - - async render(data) { - - // @TODO: Checking properties bindings moved here - if (data != this.data) - this.unbind(); - - try { - if (this.type === BindingType.IUIElement) { - //let d = this.func.apply(this.target, [data, data]); - //if (d instanceof Promise) - // d = await d; - - let d = await this._execute(this.target, data); - - await this.target.setData(d); - } - else if (this.type === BindingType.TextNode) { - - try { - - let d = await this._execute(this.target.parentElement, data); - - if (d === undefined) - return false; - //if (d instanceof Promise) - // d = await d; - - this.target.data = d;// (d === undefined) ? "" : d; - - if (data != this.data) { - this.data = data; - this.bind(data, this.map); - } - - } - catch (ex) { - this.target.data = ""; - } - } - // Content Attribute - else if (this.type == BindingType.ContentAttribute) { - - let targetElement = this.target.ownerElement; - - let d = await this._execute(targetElement, data); - - if (d === undefined) - return false; - - //if (d instanceof Promise) - // d = await d; - - targetElement.innerHTML = d; - - if (window?.app?.loaded) - { - await IUI.create(targetElement); - IUI.bind(targetElement, true, "content", targetElement.__i_bindings?.scope); - // update references - targetElement.__i_bindings?.scope?.refs?._build(); - await IUI.created(targetElement); - await IUI.render(targetElement, targetElement._data, true); - } - //await IUI.updateTree(targetElement); - - } - else if (this.type == BindingType.IfAttribute) - { - let d = await this._execute(this.target.ownerElement, data); - - //if (d === undefined) - // return false; - - this.target.ownerElement.style.display = d ? "" : "none"; - } - else if (this.type == BindingType.RevertAttribute) - { - let d = await this._execute(this.target.ownerElement, data); - if (d === undefined) - return false; - //if (d instanceof Promise) - // d = await d; - - } - // Attribute - else if (this.type === BindingType.Attribute) { - - //if (this.target.ownerElement.hasAttribute("debug")) - // debugger; - - let d = await this._execute(this.target.ownerElement, data); - - if (d === undefined) - return false; - - //if (d instanceof Promise) - // d = await d; - - if (this.attrType == AttributeBindingDestination.Field) - this.target.ownerElement[this.attrKey] = d; - else - this.target.ownerElement.setAttribute(this.attrKey, d); - - if (data != this.data) { - this.data = data; - this.bind(data, this.map); - } - } - - // Data Attribute of IUI Element - else if (this.type === BindingType.IUIElementDataAttribute) { - - - - let d = await this._execute(this.target.ownerElement, data); - //if (d === undefined) - // return false; - - //if (d instanceof Promise) - // d = await d; - await this.target.ownerElement.setData(d); - } - // Data Attribute of HTML Element - else if (this.type == BindingType.HTMLElementDataAttribute) { - - let d = await this._execute(this.target.ownerElement, data); - if (d === undefined) - return false; - //if (d instanceof Promise) - // d = await d; - this.target.ownerElement.data = d; - } - - return true; - } - catch (ex) { - // console.log(ex); - return false; - } - } - -} \ No newline at end of file + } +} diff --git a/src/Core/BindingList.js b/src/Core/BindingList.js index 6075ddf..5be1764 100644 --- a/src/Core/BindingList.js +++ b/src/Core/BindingList.js @@ -1,37 +1,32 @@ - export default class BindingList extends Array { - - constructor(target, scope) { - super(); - this.target = target; - this.scope = scope; - this.events = []; - } + constructor(target, scope) { + super(); + this.target = target; + this.scope = scope; + this.events = []; + } - destroy(){ - for(var i = 0; i < this.length; i++) - this[i].unbind(); - this.scope = {}; - this.target = null; - for(var i = 0; i < this.events.length; i++) - this.target.removeEventListener(this.events[i].name, this.events[i].handle); - } + destroy() { + for (var i = 0; i < this.length; i++) this[i].unbind(); + this.scope = {}; + this.target = null; + for (var i = 0; i < this.events.length; i++) + this.target.removeEventListener( + this.events[i].name, + this.events[i].handle + ); + } - addEvent(name, handle) - { - this.target.addEventListener(name, handle); - this.events.push({name, handle}) - } + addEvent(name, handle) { + this.target.addEventListener(name, handle); + this.events.push({ name, handle }); + } - getArgumentsNames(){ - if (this.scope == null) - return []; + getArgumentsNames() { + if (this.scope == null) return []; - let rt; - for (var i in this.scope.length) - rt.push(i); - return rt; - } - - -} \ No newline at end of file + let rt; + for (var i in this.scope.length) rt.push(i); + return rt; + } +} diff --git a/src/Core/IUI.js b/src/Core/IUI.js index 78e7ea3..ae7f60b 100644 --- a/src/Core/IUI.js +++ b/src/Core/IUI.js @@ -1,68 +1,56 @@ import IUIElement from "./IUIElement.js"; import { Binding, BindingType } from "./Binding.js"; //import Route from '../Router/Route.js'; -import BindingList from "./BindingList.js"; - +import BindingList from "./BindingList.js"; export class IUI { + static _menus = []; + static views = []; + static modules = {}; + static registry = []; - static _menus = []; - static views = []; - static modules = {}; - static registry = []; + static format(input) { + if (typeof input == "string" || input instanceof String) { + let template = document.createElement("template"); + template.innerHTML = input; + let nodes = template.content.cloneNode(true).childNodes; + return nodes; + } else if (input instanceof HTMLCollection) return input; + else if (input instanceof HTMLElement) return [input]; + else return []; + } - static format(input) { - if (typeof input == "string" || input instanceof String) { - let template = document.createElement("template"); - template.innerHTML = input; - let nodes = template.content.cloneNode(true).childNodes; - return nodes; + static observer = new IntersectionObserver( + function (entries) { + // isIntersecting is true when element and viewport are overlapping + // isIntersecting is false when element and viewport don't overlap + for (var i = 0; i < entries.length; i++) { + if (entries[i].isIntersecting) { + if (entries[i]._require_update) entries[i].update(); } - else if (input instanceof HTMLCollection) - return input; - else if (input instanceof HTMLElement) - return [input]; - else - return []; + } + }, + { threshold: [0] } + ); + + static async created(element) { + for (var i = 0; i < element.children.length; i++) { + let e = element.children[i]; + if (e instanceof IUIElement) await e.created(); + await IUI.created(e); } + } - static observer = new IntersectionObserver(function(entries) { - // isIntersecting is true when element and viewport are overlapping - // isIntersecting is false when element and viewport don't overlap - for(var i = 0; i < entries.length; i++) - { - if (entries[i].isIntersecting) - { - if (entries[i]._require_update) - entries[i].update(); - } - } + static async create(element) { + for (let i = 0; i < element.children.length; i++) { + let e = element.children[i]; + if (e instanceof IUIElement) { + await e.create(); + } - }, { threshold: [0] }); - - - static async created (element) { - - for (var i = 0; i < element.children.length; i++) { - let e = element.children[i]; - if (e instanceof IUIElement) - await e.created(); - await IUI.created(e); - } + await IUI.create(e); } - - static async create(element) - { - - for (let i = 0; i < element.children.length; i++) { - let e = element.children[i]; - if (e instanceof IUIElement) { - await e.create(); - } - - await IUI.create(e); - } - /* + /* let router = document.getElementsByTagName("i-router")[0]; await router.create(); @@ -73,286 +61,256 @@ export class IUI { console.log(elements[i]); await elements[i].create(); } - */ - - //for(var i = 0; i < IUI.registry.length; i++) - //{ - // IUI.extend(IUI.registry[i], IUI.registry[i].properties); - // await IUI.registry[i].create(); - // //await IUI.registry[i].updateAttributes(); - //} - //return; - } + */ - static get(o) - { - return document.getElementById(o); + //for(var i = 0; i < IUI.registry.length; i++) + //{ + // IUI.extend(IUI.registry[i], IUI.registry[i].properties); + // await IUI.registry[i].create(); + // //await IUI.registry[i].updateAttributes(); + //} + //return; + } - //for(var i = 0; i < IUI.registry.length; i++) - // if (IUI.registry[i].id == o) - // return IUI.registry[i]; - //return null; - } + static get(o) { + return document.getElementById(o); - static put(o) - { - IUI.registry.push(o); - } + //for(var i = 0; i < IUI.registry.length; i++) + // if (IUI.registry[i].id == o) + // return IUI.registry[i]; + //return null; + } - static remove(id) - { - for(var i = 0; i < IUI.registry.length; i++) - if (IUI.registry[i].el.id == id) - { - IUI.registry.splice(i, 1); - break; - } - } + static put(o) { + IUI.registry.push(o); + } - static module(objectClass) - { - let moduleName = objectClass.moduleName; + static remove(id) { + for (var i = 0; i < IUI.registry.length; i++) + if (IUI.registry[i].el.id == id) { + IUI.registry.splice(i, 1); + break; + } + } - if (IUI.modules[moduleName] === undefined) { - customElements.define("i-" + moduleName, objectClass); - IUI.modules[moduleName] = { - cls: objectClass, init: function (properties) { - return new objectClass(properties); - } - }; - } - - return objectClass; - } + static module(objectClass) { + let moduleName = objectClass.moduleName; - static extend(properties, defaults, overwrite) - { - if (properties == null) - properties = defaults; - else - for(var i in defaults) - if (overwrite) - properties[i] = defaults[i]; - else if (properties[i] === undefined) - properties[i] = defaults[i]; - return properties; - } + if (IUI.modules[moduleName] === undefined) { + customElements.define("i-" + moduleName, objectClass); + IUI.modules[moduleName] = { + cls: objectClass, + init: function (properties) { + return new objectClass(properties); + }, + }; + } + return objectClass; + } - static bind(element, skipAttributes, sourcePath, scope) { + static extend(properties, defaults, overwrite) { + if (properties == null) properties = defaults; + else + for (var i in defaults) + if (overwrite) properties[i] = defaults[i]; + else if (properties[i] === undefined) properties[i] = defaults[i]; + return properties; + } - // ::Attribute - // : Field - // async:: Async Attribute - // async: Async Field - // @ Event + static bind(element, skipAttributes, sourcePath, scope) { + // ::Attribute + // : Field + // async:: Async Attribute + // async: Async Field + // @ Event - // skip element ? - if (element.hasAttribute("skip") - || element.hasAttribute("i-skip") - || element instanceof HTMLTemplateElement) - return; + // skip element ? + if ( + element.hasAttribute("skip") || + element.hasAttribute("i-skip") || + element instanceof HTMLTemplateElement + ) + return; - // tags to skip - //if (element instanceof HTMLScriptElement ) - //return; - - let bindings; - - - if (scope == null) - scope = {}; + // tags to skip + //if (element instanceof HTMLScriptElement ) + //return; - // get refs before they get overwritten - //let refs = scope?.refs; + let bindings; - // some element extended or overwritten the binding arguments - if (element.scope != null) - IUI.extend(scope, element.scope, true); - else if (element.hasAttribute(":scope")) - { - let script = element.getAttribute(":scope"); - let code = `try {\r\n context.value = ${script}; \r\n}\r\n catch(ex) { context.error = ex; }` - let func = new Function("context", code); - let context = {}; + if (scope == null) scope = {}; - func.call(element, context); + // get refs before they get overwritten + //let refs = scope?.refs; - if (context.error != undefined) - console.log("Scope binding failed", context.error.name + ": " + context.error.message, this.script, this.target); - else if (context.value != undefined - && context.value instanceof Object) - IUI.extend(scope, context.value, true); - } - - let scopeArgs = Object.keys(scope); - let scopeValues = Object.values(scope); + // some element extended or overwritten the binding arguments + if (element.scope != null) IUI.extend(scope, element.scope, true); + else if (element.hasAttribute(":scope")) { + let script = element.getAttribute(":scope"); + let code = `try {\r\n context.value = ${script}; \r\n}\r\n catch(ex) { context.error = ex; }`; + let func = new Function("context", code); + let context = {}; + func.call(element, context); - bindings = new BindingList(element, scope); + if (context.error != undefined) + console.log( + "Scope binding failed", + context.error.name + ": " + context.error.message, + this.script, + this.target + ); + else if (context.value != undefined && context.value instanceof Object) + IUI.extend(scope, context.value, true); + } - if (skipAttributes) - { - // copy attributes bindings - if (element.__i_bindings != null) - for(var i = 0; i < element.__i_bindings.length; i++) - if (element.__i_bindings[i].type != BindingType.TextNode) - bindings.push(element.__i_bindings[i]); - } - else - { - element.__i_bindings?.destroy(); + let scopeArgs = Object.keys(scope); + let scopeValues = Object.values(scope); - // compile attributes - for (var i = 0; i < element.attributes.length; i++) { + bindings = new BindingList(element, scope); - // skip scope - if (element.attributes[i].name == ":scope") - continue; + if (skipAttributes) { + // copy attributes bindings + if (element.__i_bindings != null) + for (var i = 0; i < element.__i_bindings.length; i++) + if (element.__i_bindings[i].type != BindingType.TextNode) + bindings.push(element.__i_bindings[i]); + } else { + element.__i_bindings?.destroy(); - if (element.attributes[i].name.startsWith("@")){ + // compile attributes + for (var i = 0; i < element.attributes.length; i++) { + // skip scope + if (element.attributes[i].name == ":scope") continue; - // make events - let code = element.attributes[i].value; - //let code = `try {\r\n context.value = ${script}; \r\n}\r\n catch(ex) { context.error = ex; }` - let func = new Function("event", ...scopeArgs, code); - let handler = (event) => { - func.call(element, event, ...scopeValues); - } + if (element.attributes[i].name.startsWith("@")) { + // make events + let code = element.attributes[i].value; + //let code = `try {\r\n context.value = ${script}; \r\n}\r\n catch(ex) { context.error = ex; }` + let func = new Function("event", ...scopeArgs, code); + let handler = event => { + func.call(element, event, ...scopeValues); + }; - bindings.addEvent(element.attributes[i].name.substr(1), handler); - } - else - { - let b = Binding.create(element.attributes[i], - bindings.scope); + bindings.addEvent(element.attributes[i].name.substr(1), handler); + } else { + let b = Binding.create(element.attributes[i], bindings.scope); - if (b != null) { - if (b.type == BindingType.HTMLElementDataAttribute - || b.type == BindingType.IUIElementDataAttribute) - element.dataMap = b; - else if (b.type == BindingType.RevertAttribute) - element.revertMap = b; - else - bindings.push(b); - } - } - } - - - // add reference - // if (element.hasAttribute("ref")) { - // let ref = element.getAttribute("ref"); - // if (refs[ref] == null) - // refs[ref] = element; - // else if (refs[ref] == element){ - // // do nothing - // } - // else if (refs[ref] instanceof Array){ - // refs[ref].push(element); - // } else { - // var firstRef = refs[ref]; - // refs[ref] =[firstRef, element]; - // } - // } + if (b != null) { + if ( + b.type == BindingType.HTMLElementDataAttribute || + b.type == BindingType.IUIElementDataAttribute + ) + element.dataMap = b; + else if (b.type == BindingType.RevertAttribute) + element.revertMap = b; + else bindings.push(b); + } } + } - // get new refs (scope might been overwritten) - //refs = scope?.refs; + // add reference + // if (element.hasAttribute("ref")) { + // let ref = element.getAttribute("ref"); + // if (refs[ref] == null) + // refs[ref] = element; + // else if (refs[ref] == element){ + // // do nothing + // } + // else if (refs[ref] instanceof Array){ + // refs[ref].push(element); + // } else { + // var firstRef = refs[ref]; + // refs[ref] =[firstRef, element]; + // } + // } + } - // compile nodes - for (var i = 0; i < element.childNodes.length; i++) { - let el = element.childNodes[i]; - if (el instanceof IUIElement) { - // @TODO: check if the IUI element handles the binding - IUI.bind(el, false, sourcePath, scope); - } - else if (el instanceof HTMLScriptElement) - { + // get new refs (scope might been overwritten) + //refs = scope?.refs; - try - { - // this because HTML parser don't evaluate script tag - /// let func = new Function("//# sourceURL=iui://" + sourcePath + "-" + Math.round(Math.random() * 10000) + "\r\n return " + el.text.trim()); - let func = new Function(...scopeArgs, - "//# sourceURL=iui://" + sourcePath + "-" - + Math.round(Math.random() * 10000) - + "\r\n" + el.text.trim()); + // compile nodes + for (var i = 0; i < element.childNodes.length; i++) { + let el = element.childNodes[i]; + if (el instanceof IUIElement) { + // @TODO: check if the IUI element handles the binding + IUI.bind(el, false, sourcePath, scope); + } else if (el instanceof HTMLScriptElement) { + try { + // this because HTML parser don't evaluate script tag + /// let func = new Function("//# sourceURL=iui://" + sourcePath + "-" + Math.round(Math.random() * 10000) + "\r\n return " + el.text.trim()); + let func = new Function( + ...scopeArgs, + "//# sourceURL=iui://" + + sourcePath + + "-" + + Math.round(Math.random() * 10000) + + "\r\n" + + el.text.trim() + ); - let rt = func.apply(el.parentElement, scopeValues); + let rt = func.apply(el.parentElement, scopeValues); - console.log("rt", rt); + console.log("rt", rt); - if (typeof (rt) === "object") { - for (var k in rt) - el.parentElement[k] = rt[k]; - } - } - catch (ex) { - console.log(ex); - } - } - else if (el instanceof HTMLElement) { - IUI.bind(el, false, sourcePath, scope); - } - else if (el instanceof Text) { - let b = Binding.create(el, bindings.scope); - if (b != null) - bindings.push(b); - } + if (typeof rt === "object") { + for (var k in rt) el.parentElement[k] = rt[k]; + } + } catch (ex) { + console.log(ex); } + } else if (el instanceof HTMLElement) { + IUI.bind(el, false, sourcePath, scope); + } else if (el instanceof Text) { + let b = Binding.create(el, bindings.scope); + if (b != null) bindings.push(b); + } + } - element.__i_bindings = bindings; - } + element.__i_bindings = bindings; + } - static async render(element, data, textNodesOnly = false) { - - if (!element.__i_bindings) { - return; - } + static async render(element, data, textNodesOnly = false) { + if (!element.__i_bindings) { + return; + } - let bindings = element.__i_bindings; + let bindings = element.__i_bindings; - if (textNodesOnly) { - for (var i = 0; i < bindings.length; i++) - if (bindings[i].type == BindingType.TextNode) - await bindings[i].render(data); - } else { - // render attributes & text nodes - for (var i = 0; i < bindings.length; i++) - await bindings[i].render(data); - } + if (textNodesOnly) { + for (var i = 0; i < bindings.length; i++) + if (bindings[i].type == BindingType.TextNode) + await bindings[i].render(data); + } else { + // render attributes & text nodes + for (var i = 0; i < bindings.length; i++) await bindings[i].render(data); + } - // render children - for (var i = 0; i < element.children.length; i++) { - let el = element.children[i]; - if (el instanceof IUIElement) - // @TODO should check if the element depends on parent or not - if (el.dataMap != null) { - // if map function failed to call setData, we will render without it - if (!(await el.dataMap.render(data))) - await el.render(); - } - else - await el.setData(data); - else { - if (el.dataMap != null) - await el.dataMap.render(data); - else - el.data = data; + // render children + for (var i = 0; i < element.children.length; i++) { + let el = element.children[i]; + if (el instanceof IUIElement) + if (el.dataMap != null) { + // @TODO should check if the element depends on parent or not + // if map function failed to call setData, we will render without it + if (!(await el.dataMap.render(data))) await el.render(); + } else await el.setData(data); + else { + if (el.dataMap != null) await el.dataMap.render(data); + else el.data = data; - //let data = e.mapData(data); - await IUI.render(el, el.data); - } - } - } -}; + //let data = e.mapData(data); + await IUI.render(el, el.data); + } + } + } +} -export function iui(selector) -{ - return IUI.get(selector); +export function iui(selector) { + return IUI.get(selector); - /* + /* if ((typeof selector === 'string' || selector instanceof String) && selector.length > 0) { var els = document.querySelectorAll(selector); @@ -365,64 +323,58 @@ export function iui(selector) } */ - if (typeof(this) == "undefined" || this == window) - { - var o = IUI.get(selector); - if (o) - return o; - else - { - var el; + if (typeof this == "undefined" || this == window) { + var o = IUI.get(selector); + if (o) return o; + else { + var el; - if (typeof Node === "object" ? o instanceof Node : ( - selector && typeof selector === "object" && typeof selector.nodeType === "number" && typeof selector.nodeName==="string") || selector === window) - { - el = selector; - } - else if (typeof selector === 'string' || selector instanceof String) - { - if (selector[0] == ".") - el = document.getElementsByClassName(selector.substr(1)); - else - el = document.getElementById(selector); - } + if ( + typeof Node === "object" + ? o instanceof Node + : (selector && + typeof selector === "object" && + typeof selector.nodeType === "number" && + typeof selector.nodeName === "string") || + selector === window + ) { + el = selector; + } else if (typeof selector === "string" || selector instanceof String) { + if (selector[0] == ".") + el = document.getElementsByClassName(selector.substr(1)); + else el = document.getElementById(selector); + } - if (el) - { - var rt = {}; - var makeFunc = function(module){ - return function(){ - if (el instanceof HTMLCollection) - { - let rt = []; - for(var i = 0; i < el.length; i++) - { - var args = [el[i]]; - for(var j = 0; j < arguments.length; j++) - args.push(arguments[j]); - rt.push(IUI.modules[module].init.apply(this, args)); - } - return rt; - } - else - { - var args = [el]; - for(var i = 0; i < arguments.length; i++) - args.push(arguments[i]); - return IUI.modules[module].init.apply(this, args); - } - } - }; + if (el) { + var rt = {}; + var makeFunc = function (module) { + return function () { + if (el instanceof HTMLCollection) { + let rt = []; + for (var i = 0; i < el.length; i++) { + var args = [el[i]]; + for (var j = 0; j < arguments.length; j++) + args.push(arguments[j]); + rt.push(IUI.modules[module].init.apply(this, args)); + } + return rt; + } else { + var args = [el]; + for (var i = 0; i < arguments.length; i++) + args.push(arguments[i]); + return IUI.modules[module].init.apply(this, args); + } + }; + }; - for(var m in IUI.modules) - rt[m] = makeFunc(m); - - return rt; - } - } - } - - /* + for (var m in IUI.modules) rt[m] = makeFunc(m); + + return rt; + } + } + } + + /* IUI.registry.push(this); @@ -486,7 +438,6 @@ iui.prototype.ne = function(tag) } */ - /* iui.prototype.destroy = function() { diff --git a/src/Core/IUIElement.js b/src/Core/IUIElement.js index cffb07b..159c534 100644 --- a/src/Core/IUIElement.js +++ b/src/Core/IUIElement.js @@ -1,178 +1,154 @@ import { IUI } from "./IUI.js"; -import { Binding, BindingType, AttributeBindingDestination } from "./Binding.js"; +import { + Binding, + BindingType, + AttributeBindingDestination, +} from "./Binding.js"; export default class IUIElement extends HTMLElement { - constructor(defaults) { - super(); + constructor(defaults) { + super(); - this._events = []; - this._data = null; - this._defaults = defaults; - - for (var i in defaults) - if (this[i] == undefined) - try { - this[i] = defaults[i]; - } catch { - // mostly because modifying dom attributes are not allowed in custom elements creation - } + this._events = []; + this._data = null; + this._defaults = defaults; - this._register("data"); - } - - static get moduleName(){ - return this.name.toLowerCase(); - } - - - get cssClass(){ - if (this.hasAttribute("css-class")) - return this.getAttribute("css-class"); - //else - // return this.constructor.moduleName; - } - - set cssClass(value) - { - this.classList.remove(this.cssClass); - this.setAttribute("css-class", value); - this.classList.add(value); - } - - async render() { - await IUI.render(this, this._data); - } - - _getParentData() { - var p = this.parentElement; - do { - if (p.data !== undefined) - return p.data; - } while (p = p.parentElement); - - return undefined; - } - - async setData(value) { - this._data = value; - this._emit("data", {data: value}); - await IUI.render(this, value); - } - - - get data() { - return this._data; - } - - async revert(){ - let e = this; - - do { - var p = e.parentElement; - - if (e.revertMap != null) - await e.revertMap.render(p?.data); - } while (e = p); - } - - async update(data) { - if (data == undefined) { - // get parent data - if (this.dataMap != null) { - await this.dataMap.render(this._getParentData()); - } else - await this.setData(this.data); - } - else { - // apply specified data - if (this.dataMap != null) { - await this.dataMap.render(data); - } else - await this.setData(data); - } - } - - // bindings arguments - get scope(){ - return null; - } - - // this meant to be inherited - modified() { - - } - - connectedCallback() { - if (this.hasAttribute("css-class")) - { - this.classList.add(this.getAttribute("css-class")); - } - else - { - let className = this.constructor.moduleName; - this.setAttribute("css-class", className); - this.classList.add(className); - } - } - - disconnectedCallback() { - // console.log("removed", this); - } - - adoptedCallback() { - - //console.log("adopted", this); - - } - - //appendChild(node) { - // // do some bindings - // super.appendChild(node); - //} - - created() { - - } - - create() { - - } - - destroy() { - IUI.registry.splice(IUI.registry.indexOf(this), 1); - if (this.parentNode) - this.parentNode.removeChild(this); - } - - - - _emit(event, values) { - //var args = Array.prototype.slice.call(arguments, 1); - var e = new CustomEvent(event, values); - for (let i in values) { - if (e[i] === undefined) - e[i] = values[i]; + for (var i in defaults) + if (this[i] == undefined) + try { + this[i] = defaults[i]; + } catch { + // mostly because modifying dom attributes are not allowed in custom elements creation } - try - { - return this.dispatchEvent(e); - } - catch(ex) - { - console.log(ex); - } + this._register("data"); + } + + static get moduleName() { + return this.name.toLowerCase(); + } + + get cssClass() { + if (this.hasAttribute("css-class")) return this.getAttribute("css-class"); + //else + // return this.constructor.moduleName; + } + + set cssClass(value) { + this.classList.remove(this.cssClass); + this.setAttribute("css-class", value); + this.classList.add(value); + } + + async render() { + await IUI.render(this, this._data); + } + + _getParentData() { + var p = this.parentElement; + do { + if (p.data !== undefined) return p.data; + } while ((p = p.parentElement)); + + return undefined; + } + + async setData(value) { + this._data = value; + this._emit("data", { data: value }); + await IUI.render(this, value); + } + + get data() { + return this._data; + } + + async revert() { + let e = this; + + do { + var p = e.parentElement; + + if (e.revertMap != null) await e.revertMap.render(p?.data); + } while ((e = p)); + } + + async update(data) { + if (data == undefined) { + // get parent data + if (this.dataMap != null) { + await this.dataMap.render(this._getParentData()); + } else await this.setData(this.data); + } else { + // apply specified data + if (this.dataMap != null) { + await this.dataMap.render(data); + } else await this.setData(data); + } + } + + // bindings arguments + get scope() { + return null; + } + + // this meant to be inherited + modified() {} + + connectedCallback() { + if (this.hasAttribute("css-class")) { + this.classList.add(this.getAttribute("css-class")); + } else { + let className = this.constructor.moduleName; + this.setAttribute("css-class", className); + this.classList.add(className); + } + } + + disconnectedCallback() { + // console.log("removed", this); + } + + adoptedCallback() { + //console.log("adopted", this); + } + + //appendChild(node) { + // // do some bindings + // super.appendChild(node); + //} + + created() {} + + create() {} + + destroy() { + IUI.registry.splice(IUI.registry.indexOf(this), 1); + if (this.parentNode) this.parentNode.removeChild(this); + } + + _emit(event, values) { + //var args = Array.prototype.slice.call(arguments, 1); + var e = new CustomEvent(event, values); + for (let i in values) { + if (e[i] === undefined) e[i] = values[i]; } - - _encapsulateEvent(code){ - return `try {\r\n ${code} \r\n}\r\n catch(ex) { console.log(ex.name + ":" + ex.message, this); }`; + try { + return this.dispatchEvent(e); + } catch (ex) { + console.log(ex); } + } - _register(event) { - this._events.push(event); + _encapsulateEvent(code) { + return `try {\r\n ${code} \r\n}\r\n catch(ex) { console.log(ex.name + ":" + ex.message, this); }`; + } - /* + _register(event) { + this._events.push(event); + + /* if (this.hasAttribute("@" + event)) { let handler = this.getAttribute("@" + event); if (handler.match(/^[A-Za-z\$_]+(?:[\$_][A-Za-z0-9]+)*$/g) === null) { @@ -198,15 +174,15 @@ export default class IUIElement extends HTMLElement { } } */ - } + } - off(event, func) { - this.removeEventListener(event, func); - return this; - } + off(event, func) { + this.removeEventListener(event, func); + return this; + } - on(event, func) { - this.addEventListener(event, func, false); - return this; - } -} \ No newline at end of file + on(event, func) { + this.addEventListener(event, func, false); + return this; + } +} diff --git a/src/Core/Path.js b/src/Core/Path.js new file mode 100644 index 0000000..1dbb3b4 --- /dev/null +++ b/src/Core/Path.js @@ -0,0 +1,12 @@ +export default class Path { + /** + * Similar to `os.path.join` in nodejs. + * @param {...String} args + * @returns {String} + */ + static join() { + return Array.from(arguments) + .join("/") + .replace(/\/{1,}/g, "/"); + } +} diff --git a/src/Core/RefsCollection.js b/src/Core/RefsCollection.js index 6fd5d65..35b4f21 100644 --- a/src/Core/RefsCollection.js +++ b/src/Core/RefsCollection.js @@ -1,46 +1,35 @@ +export default class RefsCollection { + constructor(rootElement) { + this._rootElement = rootElement; + } -export default class RefsCollection -{ + _build(element, append) { + if (element == undefined) element = this._rootElement; - constructor(rootElement){ - this._rootElement = rootElement; - } + if (!append) + for (var i in this) + if (i != "_rootElement" && i != "_build") delete this[i]; - _build(element, append) { + for (var i = 0; i < element.children.length; i++) { + let child = element.children[i]; - if (element == undefined) - element = this._rootElement; - - if (!append) - for(var i in this) - if (i != "_rootElement" && i != "_build") - delete this[i]; - - for(var i = 0; i < element.children.length; i++) - { - let child = element.children[i]; - - if (child.hasAttribute("ref")) - { - let ref = child.getAttribute("ref"); - if (this[ref] == null) - this[ref] = child; - else if (this[ref] == child){ - // do nothing - } - else if (this[ref] instanceof Array){ - this[ref].push(child); - } else { - var firstRef = this[ref]; - this[ref] =[firstRef, child]; - } - } - - if (child.refs != undefined) - // opt out if the element handles referencing - break; - else - this._build(child, true); + if (child.hasAttribute("ref")) { + let ref = child.getAttribute("ref"); + if (this[ref] == null) this[ref] = child; + else if (this[ref] == child) { + // do nothing + } else if (this[ref] instanceof Array) { + this[ref].push(child); + } else { + var firstRef = this[ref]; + this[ref] = [firstRef, child]; } + } + + if (child.refs != undefined) + // opt out if the element handles referencing + break; + else this._build(child, true); } -} \ No newline at end of file + } +} diff --git a/src/Data/DataList.js b/src/Data/DataList.js index 265b1ea..c729180 100644 --- a/src/Data/DataList.js +++ b/src/Data/DataList.js @@ -1,14 +1,13 @@ import IUIElement from "../Core/IUIElement.js"; -export default IUI.module(class DataList extends IUIElement -{ - constructor(properties) - { - super(properties); - } - - create() - { - this.style.display = "none"; - } -}); \ No newline at end of file +export default IUI.module( + class DataList extends IUIElement { + constructor(properties) { + super(properties); + } + + create() { + this.style.display = "none"; + } + } +); diff --git a/src/Data/Field.js b/src/Data/Field.js index d0c8097..cc17fb3 100644 --- a/src/Data/Field.js +++ b/src/Data/Field.js @@ -1,62 +1,56 @@ import IUIElement from "../Core/IUIElement.js"; import { IUI } from "../Core/IUI.js"; - -export default IUI.module(class Field extends HTMLElement -{ - constructor() - { - super(); - } - - static get moduleName(){ - return this.name.toLowerCase(); +export default IUI.module( + class Field extends HTMLElement { + constructor() { + super(); } - create() - { - // if (this.formatter === undefined) { - // // load script - // for (var i = 0; i < this.children.length; i++) - // if (this.children[i] instanceof HTMLScriptElement) { - // //this.formatter = new Function this.children[i]. - // } - // } + static get moduleName() { + return this.name.toLowerCase(); + } - //this.style.display = "none"; + create() { + // if (this.formatter === undefined) { + // // load script + // for (var i = 0; i < this.children.length; i++) + // if (this.children[i] instanceof HTMLScriptElement) { + // //this.formatter = new Function this.children[i]. + // } + // } + //this.style.display = "none"; } get name() { - return this.getAttribute("name"); + return this.getAttribute("name"); } set name(value) { - this.setAttribute("name", value); + this.setAttribute("name", value); } serialize(tag) { + let template = document.createElement("template"); + let node = document.createElement(tag ?? "div"); + let width = null, + name = null, + type = null; - let template = document.createElement("template"); - let node = document.createElement(tag ?? "div"); - let width = null, name = null, type = null; + // copy attributes + for (var i = 0; i < this.attributes.length; i++) { + let attr = this.attributes[i]; + if (attr.name == "width") width = attr.value; + else if (attr.name == "name") name = attr.value; + else if (attr.name == "type") type = attr.value; + else node.setAttribute(attr.name, attr.value); + } - // copy attributes - for (var i = 0; i < this.attributes.length; i++) { - let attr = this.attributes[i]; - if (attr.name == "width") - width = attr.value; - else if (attr.name == "name") - name = attr.value; - else if (attr.name == "type") - type = attr.value; - else - node.setAttribute(attr.name, attr.value); - } + // copy html - // copy html + node.innerHTML = this.innerHTML; - node.innerHTML = this.innerHTML; - - return { node, width, name, type }; + return { node, width, name, type }; } -}); \ No newline at end of file + } +); diff --git a/src/Data/Form.js b/src/Data/Form.js index df1ffa1..0ac6391 100644 --- a/src/Data/Form.js +++ b/src/Data/Form.js @@ -2,70 +2,62 @@ import { IUI } from "../Core/IUI.js"; import Modifiable from "./Modifiable.js"; -export default IUI.module(class Form extends IUIElement { +export default IUI.module( + class Form extends IUIElement { constructor() { - super(); + super(); } - static _copy(val){ - if (typeof val === 'object' && val !== null) - { - let rt = {}; - for(var i in val) - if (val[i] instanceof Array) - // copy array - rt[i] = [...val[i]]; - else - rt[i] = val[i]; + static _copy(val) { + if (typeof val === "object" && val !== null) { + let rt = {}; + for (var i in val) + if (val[i] instanceof Array) + // copy array + rt[i] = [...val[i]]; + else rt[i] = val[i]; - return rt; - } - else - return val; + return rt; + } else return val; } async create() { - //var elements = this.querySelectorAll("*[field]"); - //for (var i = 0; i < elements.length; i++) - // this.form[elements[i].getAttribute("field")] = elements[i]; + //var elements = this.querySelectorAll("*[field]"); + //for (var i = 0; i < elements.length; i++) + // this.form[elements[i].getAttribute("field")] = elements[i]; } async setData(value) { - this.original = value; - //var copy = {}; - //Object.assign(copy, value); - super.setData(new Modifiable(this.original));// Form._copy(this.original)); - //super.setData({ ...this.original }); + this.original = value; + //var copy = {}; + //Object.assign(copy, value); + super.setData(new Modifiable(this.original)); // Form._copy(this.original)); + //super.setData({ ...this.original }); } - async reset() { - //super.setData({ ...this.original }); - super.setData(new Modifiable(this.original));//Form._copy(this.original)); - return this; + //super.setData({ ...this.original }); + super.setData(new Modifiable(this.original)); //Form._copy(this.original)); + return this; } - - get diff() { + return this._data._diff; - return this._data._diff; + if (this.original == null) return this._data; - if (this.original == null) - return this._data; + var rt = {}; + for (var i in this._data) + if (this._data[i] != this.original[i]) { + if ( + this._data[i] instanceof Array && + Form._areEqual(this._data[i], this.original[i]) + ) + continue; + else rt[i] = this._data[i]; + } - - var rt = {}; - for (var i in this._data) - if (this._data[i] != this.original[i]) - { - if (this._data[i] instanceof Array && Form._areEqual(this._data[i], this.original[i])) - continue; - else - rt[i] = this._data[i]; - } - - return rt; + return rt; } - -}); \ No newline at end of file + } +); diff --git a/src/Data/Include.js b/src/Data/Include.js index a041ccf..cc5b3b8 100644 --- a/src/Data/Include.js +++ b/src/Data/Include.js @@ -2,114 +2,110 @@ import IUIElement from "../Core/IUIElement.js"; import { IUI } from "../Core/IUI.js"; import RefsCollection from "../Core/RefsCollection.js"; -export default IUI.module(class Include extends IUIElement -{ - constructor() - { - super(); - this.refs = new RefsCollection(); +export default IUI.module( + class Include extends IUIElement { + constructor() { + super(); + this.refs = new RefsCollection(); } - get src(){ - return this.getAttribute("src"); + get src() { + return this.getAttribute("src"); } - set src(value){ - this.setAttribute("src", value); - this._load(value); + set src(value) { + this.setAttribute("src", value); + this._load(value); } - get scope() { - return {view: this, refs: this.refs}; + return { view: this, refs: this.refs }; } - async _load(url) - { - if (this._loading) - return; + async _load(url) { + if (this._loading) return; - this._loading = true; + this._loading = true; - let src = url.replace(/^\/+|\/+$/g, ''); + let src = url.replace(/^\/+|\/+$/g, ""); - this.classList.add(this.cssClass + "-loading"); + this.classList.add(this.cssClass + "-loading"); - let x = await fetch(src); + let x = await fetch(src); - if (x.status == 200) - { - let t = await x.text(); + if (x.status == 200) { + let t = await x.text(); - this.innerHTML = t; + this.innerHTML = t; - //let xeval = (code) => eval(code); + //let xeval = (code) => eval(code); - if (window?.app?.loaded) - { - await IUI.create(this); - IUI.bind(this, true, "include:" + src, - IUI.extend(this._i__bindings.scope, this.scope, true)); - - this.refs._build(); - await IUI.created(this); - await IUI.render(this, this._data, true); - } + if (window?.app?.loaded) { + await IUI.create(this); + IUI.bind( + this, + true, + "include:" + src, + IUI.extend(this._i__bindings.scope, this.scope, true) + ); - // // call create for the new elements - // var newElements = this.querySelectorAll("*"); - // for (var i = 0; i < newElements.length; i++) { - // var el = newElements[i]; - - // // set route for all elements - // //newElements[i].route = this.route; - // el.route = this.route; - // el.view = this; - // if (el.hasAttribute("ref")) { - // this.refs[el.getAttribute("ref")] = el; - // } - - // if (el instanceof HTMLScriptElement) { - // // this because HTML parser don't evaluate script tag - // let func = new Function("//# sourceURL=iui://" + src + "-" + Math.round(Math.random() * 10000) + "\r\n return " + el.text.trim());// "return " + el.text + ";"); - - // let rt = func.call(el.parentElement); - - // //let rt = xeval.call(el.parentElement, "//# sourceURL=iui://" + src + Math.round(Math.random() * 10000) + "\r\n (" + el.text + ")"); - // if (typeof (rt) === "object") { - // for (var k in rt) - // el.parentElement[k] = rt[k]; - // } - // } - // } + this.refs._build(); + await IUI.created(this); + await IUI.render(this, this._data, true); } - this.classList.remove(this.cssClass + "-loading"); + // // call create for the new elements + // var newElements = this.querySelectorAll("*"); + // for (var i = 0; i < newElements.length; i++) { + // var el = newElements[i]; - // if (window?.app?.loaded) - // { - // await IUI.create(this); - // await IUI.created(this); + // // set route for all elements + // //newElements[i].route = this.route; + // el.route = this.route; + // el.view = this; + // if (el.hasAttribute("ref")) { + // this.refs[el.getAttribute("ref")] = el; + // } - // for(let i = 0; i < this.children.length; i++) - // { - // let el = this.children[i]; - // IUIElement._make_bindings(el); - // await IUIElement._renderElement(el, el._data); + // if (el instanceof HTMLScriptElement) { + // // this because HTML parser don't evaluate script tag + // let func = new Function("//# sourceURL=iui://" + src + "-" + Math.round(Math.random() * 10000) + "\r\n return " + el.text.trim());// "return " + el.text + ";"); + + // let rt = func.call(el.parentElement); + + // //let rt = xeval.call(el.parentElement, "//# sourceURL=iui://" + src + Math.round(Math.random() * 10000) + "\r\n (" + el.text + ")"); + // if (typeof (rt) === "object") { + // for (var k in rt) + // el.parentElement[k] = rt[k]; + // } // } // } + } - this._loading = false; + this.classList.remove(this.cssClass + "-loading"); + + // if (window?.app?.loaded) + // { + // await IUI.create(this); + // await IUI.created(this); + + // for(let i = 0; i < this.children.length; i++) + // { + // let el = this.children[i]; + // IUIElement._make_bindings(el); + // await IUIElement._renderElement(el, el._data); + // } + // } + + this._loading = false; } - async create() - { - if (this.hasAttribute("src")) - await this._load(this.getAttribute("src")); + async create() { + if (this.hasAttribute("src")) await this._load(this.getAttribute("src")); } async created() { - this.refs._build(); + this.refs._build(); } - -}); \ No newline at end of file + } +); diff --git a/src/Data/Layout.js b/src/Data/Layout.js index 09c5fb8..0198c07 100644 --- a/src/Data/Layout.js +++ b/src/Data/Layout.js @@ -1,64 +1,60 @@ import IUIElement from "../Core/IUIElement.js"; -import Field from './Field.js'; +import Field from "./Field.js"; import { IUI } from "../Core/IUI.js"; -export default IUI.module(class Layout extends HTMLElement// IUIElement -{ - constructor() - { - super(); - } - - static get moduleName(){ - return this.name.toLowerCase(); +export default IUI.module( + class Layout extends HTMLElement { + // IUIElement + constructor() { + super(); } - //create() - //{ - // for (var i = 0; i < this.children.length; i++) - // if (this.children[i] instanceof Field) { - // this[this.children[i].name] = this.children[i]; - // this.fields.push(this.children[i]); - // } - - // this.style.display = "none"; - //} - - static getHTML(el, removeSelf = false) { - for (var i = 0; i < el.children.length; i++) - if (el.children[i] instanceof Layout) { - let layout = el.children[i]; - let rt = layout.innerHTML; - - if (removeSelf) - el.removeChild(layout); - return rt; - } - - return null; - } - - static get(el, tag, removeSelf = false, collection = false) { - - for (var i = 0; i < el.children.length; i++) - if (el.children[i] instanceof Layout) { - let layout = el.children[i]; - let rt = collection ? {} : []; - for (var j = 0; j < layout.children.length; j++) { - if (layout.children[j] instanceof Field) { - let fd = layout.children[j].serialize(tag); - if (collection) - rt[fd.name] = fd; - else - rt.push(fd); - } - } - - if (removeSelf) - layout.parentElement.removeChild(layout); - return rt; - } - - return null; + static get moduleName() { + return this.name.toLowerCase(); } -}); \ No newline at end of file + + //create() + //{ + // for (var i = 0; i < this.children.length; i++) + // if (this.children[i] instanceof Field) { + // this[this.children[i].name] = this.children[i]; + // this.fields.push(this.children[i]); + // } + + // this.style.display = "none"; + //} + + static getHTML(el, removeSelf = false) { + for (var i = 0; i < el.children.length; i++) + if (el.children[i] instanceof Layout) { + let layout = el.children[i]; + let rt = layout.innerHTML; + + if (removeSelf) el.removeChild(layout); + return rt; + } + + return null; + } + + static get(el, tag, removeSelf = false, collection = false) { + for (var i = 0; i < el.children.length; i++) + if (el.children[i] instanceof Layout) { + let layout = el.children[i]; + let rt = collection ? {} : []; + for (var j = 0; j < layout.children.length; j++) { + if (layout.children[j] instanceof Field) { + let fd = layout.children[j].serialize(tag); + if (collection) rt[fd.name] = fd; + else rt.push(fd); + } + } + + if (removeSelf) layout.parentElement.removeChild(layout); + return rt; + } + + return null; + } + } +); diff --git a/src/Data/Modifiable.js b/src/Data/Modifiable.js index 4758f22..b4298b3 100644 --- a/src/Data/Modifiable.js +++ b/src/Data/Modifiable.js @@ -1,139 +1,111 @@ -export default class Modifiable -{ - static _copy(val){ - if (typeof val === 'object' && val !== null) - { - let rt = {}; - for(var i in val) - if (val[i] instanceof Array) - // copy array - rt[i] = [...val[i]]; - else - rt[i] = val[i]; +export default class Modifiable { + static _copy(val) { + if (typeof val === "object" && val !== null) { + let rt = {}; + for (var i in val) + if (val[i] instanceof Array) + // copy array + rt[i] = [...val[i]]; + else rt[i] = val[i]; - return rt; - } - else - return val; + return rt; + } else return val; + } + + // @TODO: Remove this when esiur adds suport to partially modified arrays with modified flag + static _areEqual(ar1, ar2) { + if (!(ar1 instanceof Array) || !(ar2 instanceof Array)) return false; + + if (ar1.length != ar2.length) return false; + + for (var i = 0; i < ar1.length; i++) if (ar1[i] != ar2[i]) return false; + + return true; + } + + constructor(original) { + this._events = {}; + this._data = Modifiable._copy(original); + this._original = original; + + for (let p in this._data) { + if (p.startsWith("_")) continue; + + this._register(":" + p); + + Object.defineProperty(this, p, { + get() { + return this._data[p]; + }, + set(value) { + this._data[p] = value; + this._emit(":" + p, value); + }, + }); } + } - // @TODO: Remove this when esiur adds suport to partially modified arrays with modified flag - static _areEqual(ar1, ar2) - { - if (!(ar1 instanceof Array) || !( ar2 instanceof Array)) - return false; + get _diff() { + if (this._original == null) return this._data; - if (ar1.length != ar2.length) - return false; + var rt = {}; + for (var i in this._data) + if (this._data[i] != this._original[i]) { + if ( + this._data[i] instanceof Array && + Modifiable._areEqual(this._data[i], this._original[i]) + ) + continue; + else rt[i] = this._data[i]; + } - for(var i = 0; i < ar1.length; i++) - if (ar1[i] != ar2[i]) - return false; - - return true; - } + return rt; + } - constructor(original){ + _register(event) { + this._events[event] = []; + } - this._events = {}; - this._data = Modifiable._copy(original); - this._original = original; + _emit(event) { + event = event.toLowerCase(); + var args = Array.prototype.slice.call(arguments, 1); + if (this._events[event]) + for (var i = 0; i < this._events[event].length; i++) + if (this._events[event][i].f.apply(this._events[event][i].i, args)) + return true; - for(let p in this._data) - { - if (p.startsWith("_")) - continue; + return false; + } - this._register(":" + p); + _emitArgs(event, args) { + event = event.toLowerCase(); + if (this._events[event]) + for (var i = 0; i < this._events[event].length; i++) + if (this._events[event][i].f.apply(this._events[event][i].i, args)) + return true; + return this; + } - Object.defineProperty(this, p, { - get() { - return this._data[p]; - }, - set(value) { - this._data[p] = value; - this._emit(":" + p, value); - } - }); - } + on(event, fn, issuer) { + if (!(fn instanceof Function)) return this; - } + event = event.toLowerCase(); + // add + if (!this._events[event]) this._events[event] = []; + this._events[event].push({ f: fn, i: issuer == null ? this : issuer }); + return this; + } - - get _diff() { - if (this._original == null) - return this._data; - - var rt = {}; - for (var i in this._data) - if (this._data[i] != this._original[i]) - { - if (this._data[i] instanceof Array && Modifiable._areEqual(this._data[i], this._original[i])) - continue; - else - rt[i] = this._data[i]; - } - - return rt; - } - - _register(event) - { + off(event, fn) { + event = event.toLowerCase(); + if (this._events[event]) { + if (fn) { + for (var i = 0; i < this._events[event].length; i++) + if (this._events[event][i].f == fn) + this._events[event].splice(i--, 1); + } else { this._events[event] = []; + } } - - - _emit(event) - { - event = event.toLowerCase(); - var args = Array.prototype.slice.call(arguments, 1); - if (this._events[event]) - for(var i = 0; i < this._events[event].length; i++) - if (this._events[event][i].f.apply(this._events[event][i].i, args)) - return true; - - return false; - } - - _emitArgs(event, args) - { - event = event.toLowerCase(); - if (this._events[event]) - for(var i = 0; i < this._events[event].length; i++) - if (this._events[event][i].f.apply(this._events[event][i].i, args)) - return true; - return this; - } - - on(event, fn, issuer) - { - if (!(fn instanceof Function)) - return this; - - event = event.toLowerCase(); - // add - if (!this._events[event]) - this._events[event] = []; - this._events[event].push({f: fn, i: issuer == null ? this: issuer}); - return this; - } - - - off(event, fn) - { - event = event.toLowerCase(); - if (this._events[event]) - { - if (fn) - { - for(var i = 0; i < this._events[event].length; i++) - if (this._events[event][i].f == fn) - this._events[event].splice(i--, 1); - } - else - { - this._events[event] = []; - } - } - } -} \ No newline at end of file + } +} diff --git a/src/Data/Repeat.js b/src/Data/Repeat.js index 9e32979..8df0c97 100644 --- a/src/Data/Repeat.js +++ b/src/Data/Repeat.js @@ -1,65 +1,56 @@ import IUIElement from "../Core/IUIElement.js"; import { IUI } from "../Core/IUI.js"; -export default IUI.module(class Repeat extends IUIElement -{ - constructor() - { - super({ _data: [] }); - this.list = []; +export default IUI.module( + class Repeat extends IUIElement { + constructor() { + super({ _data: [] }); + this.list = []; } - _isDirectDecedent(x){ - while(x = x.parentElement) - if (x == this) - return true; - else if (x instanceof Repeat && x != this) - return false; + _isDirectDecedent(x) { + while ((x = x.parentElement)) + if (x == this) return true; + else if (x instanceof Repeat && x != this) return false; } - create() - { - ////////////// - /// Create /// - ////////////// - - if (this._created) - debugger; + create() { + ////////////// + /// Create /// + ////////////// - this._created = true; - - // create template to speed avoid HTML parsing each time. - let repeatables = this.querySelectorAll("*[repeat]"); - - repeatables = Array.from(repeatables).filter(x=>this._isDirectDecedent(x)); + if (this._created) debugger; - if (repeatables.length > 0) - { + this._created = true; - this._repeatNode = repeatables[0].cloneNode(true); - this._container = repeatables[0].parentElement; - this._beforeNode = repeatables[0].nextSibling; - repeatables[0].parentElement.removeChild(repeatables[0]); - } - else - { - if (this.children.length > 0) - this._repeatNode = this.children[0].cloneNode(true); - else - this._repeatNode = document.createElement("div"); + // create template to speed avoid HTML parsing each time. + let repeatables = this.querySelectorAll("*[repeat]"); - this.innerHTML = ""; - this._container = this; - } + repeatables = Array.from(repeatables).filter(x => + this._isDirectDecedent(x) + ); + if (repeatables.length > 0) { + this._repeatNode = repeatables[0].cloneNode(true); + this._container = repeatables[0].parentElement; + this._beforeNode = repeatables[0].nextSibling; + repeatables[0].parentElement.removeChild(repeatables[0]); + } else { + if (this.children.length > 0) + this._repeatNode = this.children[0].cloneNode(true); + else this._repeatNode = document.createElement("div"); - // var newElements = this.querySelectorAll("*"); - // for (var i = 0; i < newElements.length; i++) - // newElements[i].repeat = this; + this.innerHTML = ""; + this._container = this; + } - // var self = this; + // var newElements = this.querySelectorAll("*"); + // for (var i = 0; i < newElements.length; i++) + // newElements[i].repeat = this; - /* + // var self = this; + + /* this._repeatModified = function(propertyName, value) { @@ -86,83 +77,72 @@ export default IUI.module(class Repeat extends IUIElement */ } - - clear() - { - for (var i = 0; i < this.list.length; i++) - this._container.removeChild(this.list[i]); - this.list = []; - this._data = []; + clear() { + for (var i = 0; i < this.list.length; i++) + this._container.removeChild(this.list[i]); + this.list = []; + this._data = []; } - get data() { - return super.data; + return super.data; } get length() { - return this._data.length; + return this._data.length; } + async setData(value) { + // this to avoid interruption by an event + if (this._busy) { + console.log("Busy", this); + return false; + } - async setData(value) - { - - - // this to avoid interruption by an event - if (this._busy) - { - console.log("Busy", this); - return false; - } + this._busy = true; - this._busy = true; + // clear + this.clear(); - - // clear - this.clear(); + if (value?.toArray instanceof Function) value = value.toArray(); + else if ( + value == null || + !(value instanceof Array || value instanceof Int32Array) + ) + value = []; - if (value?.toArray instanceof Function) - value = value.toArray(); - else if (value == null || !(value instanceof Array || value instanceof Int32Array)) - value = []; + //debugger; + await super.setData(value); + for (let i = 0; i < value.length; i++) { + let e = this._repeatNode.cloneNode(true); - //debugger; - await super.setData(value); + this.list.push(e); - - for (let i = 0; i < value.length; i++) { + await IUI.create(e); - let e = this._repeatNode.cloneNode(true); + IUI.bind( + e, + false, + "repeat", + IUI.extend(this.__i_bindings?.scope, { index: i, repeat: this }, true) + ); - this.list.push(e); + this._container.insertBefore(e, this._beforeNode); - await IUI.create(e); + // update referencing + this.__i_bindings?.scope?.refs?._build(); - IUI.bind(e, false, "repeat", - IUI.extend(this.__i_bindings?.scope, - {index: i, repeat: this}, true)); - - this._container.insertBefore(e, this._beforeNode); - - // update referencing - this.__i_bindings?.scope?.refs?._build(); + await IUI.created(e); - await IUI.created(e); - - await IUI.render(e, value[i], false); - - } + await IUI.render(e, value[i], false); + } + // @TODO: check if this works for event names starting with ":" + this._emit(":data", { data: value }); + // this._emit("modified", { data: value, property: "data" }); - - // @TODO: check if this works for event names starting with ":" - this._emit(":data", { data: value }); - // this._emit("modified", { data: value, property: "data" }); - - - this._busy = false; + this._busy = false; } - -}); \ No newline at end of file + } +); diff --git a/src/Data/TableRow.js b/src/Data/TableRow.js index 10748ea..b1ecc5f 100644 --- a/src/Data/TableRow.js +++ b/src/Data/TableRow.js @@ -1,15 +1,16 @@ import IUIElement from "../Core/IUIElement.js"; import { IUI } from "../Core/IUI.js"; - -export default IUI.module(class TableRow extends IUIElement { +export default IUI.module( + class TableRow extends IUIElement { constructor() { - super(); + super(); } create() { - //this.style.display = "none"; - this.style.display = "table-row"; - console.log("TR"); + //this.style.display = "none"; + this.style.display = "table-row"; + console.log("TR"); } -}); \ No newline at end of file + } +); diff --git a/src/Router/Link.js b/src/Router/Link.js index c6a7d5a..fc036fd 100644 --- a/src/Router/Link.js +++ b/src/Router/Link.js @@ -1,70 +1,65 @@ import IUIElement from "../Core/IUIElement.js"; import { IUI } from "../Core/IUI.js"; -export default IUI.module(class Link extends IUIElement -{ - constructor() - { - //debugger; - super({ cssClass: 'link' }); +export default IUI.module( + class Link extends IUIElement { + constructor() { + //debugger; + super({ cssClass: "link" }); - // super({ cssClass: 'link' }); - this._register("route"); - this.addEventListener("click", - (e) => { + // super({ cssClass: 'link' }); + this._register("route"); + this.addEventListener("click", e => { + var r = this.getBoundingClientRect(); + this.style.setProperty("--x", e.x - r.x + "px"); + this.style.setProperty("--y", e.y - r.y + "px"); - var r = this.getBoundingClientRect(); - this.style.setProperty("--x", (e.x - r.x) + "px"); - this.style.setProperty("--y", (e.y - r.y) + "px"); - - this.style.setProperty("--w", r.width + "px"); - this.style.setProperty("--h", r.height + "px"); - - this.classList.remove(this.cssClass + "-clicked"); - void this.offsetWidth; - this.classList.add(this.cssClass + "-clicked"); + this.style.setProperty("--w", r.width + "px"); + this.style.setProperty("--h", r.height + "px"); - let url = this.getAttribute("href"); + this.classList.remove(this.cssClass + "-clicked"); + void this.offsetWidth; + this.classList.add(this.cssClass + "-clicked"); - let ok = this._emit("route", { url, cancelable: true, query: this.query}); - if (!ok) - return; + let url = this.getAttribute("href"); + let ok = this._emit("route", { + url, + cancelable: true, + query: this.query, + }); + if (!ok) return; - //if (url == "#") - // url = router.current.link; - // return; + //if (url == "#") + // url = router.current.link; + // return; - let target = this.hasAttribute("target") ? document.getElementById(this.getAttribute("target")) : null; + let target = this.hasAttribute("target") + ? document.getElementById(this.getAttribute("target")) + : null; - - if (url == ":back") { - window.router.back(); - return; - } + if (url == ":back") { + window.router.back(); + return; + } + if (this.query) + // || this.hasAttribute(":data")) + window.router.navigate(url || router.current.url, this.query, target); + else if (url != null) window.router.navigate(url, undefined, target); + }); - - if (this.query)// || this.hasAttribute(":data")) - window.router.navigate(url || router.current.url, this.query, target); - else if (url != null) - window.router.navigate(url, undefined, target); - } - ); - - //this._register("click"); + //this._register("click"); } get link() { - return this.getAttribute("href"); + return this.getAttribute("href"); } set link(value) { - this.setAttribute("href", value); + this.setAttribute("href", value); } - create() - { - - } -}); \ No newline at end of file + create() {} + } +); diff --git a/src/Router/Route.js b/src/Router/Route.js index cf9a76b..5b617dc 100644 --- a/src/Router/Route.js +++ b/src/Router/Route.js @@ -2,183 +2,136 @@ import IUIElement from "../Core/IUIElement.js"; import { IUI } from "../Core/IUI.js"; import Router from "./Router.js"; import RefsCollection from "../Core/RefsCollection.js"; +import Path from "../Core/Path.js"; -export default IUI.module(class Route extends IUIElement { - +export default IUI.module( + class Route extends IUIElement { constructor() { - super(); + super(); - this.routes = []; - this.refs = new RefsCollection(this); + this.routes = []; + this.refs = new RefsCollection(this); - this._register("show"); - this._register("hide"); + this._register("show"); + this._register("hide"); } async setData(value) { - if (this.hasAttribute("debug")) - debugger; + if (this.hasAttribute("debug")) debugger; - return await super.setData(value); + return await super.setData(value); } - get scope(){ - return {route: this, view: this}; + get scope() { + return { route: this, view: this }; } _updateLinks() { - for (var i = 0; i < this.children.length; i++) { - if (this.children[i] instanceof Route) { - this.routes.push(this.children[i]); - window.router.add(this.children[i], this); - i--; - } + for (var i = 0; i < this.children.length; i++) { + if (this.children[i] instanceof Route) { + this.routes.push(this.children[i]); + window.router.add(this.children[i], this); + i--; } + } } - get link() { - var link = this.name; - var parent = this.parent; - while (parent != null) { - link = parent.name + "/" + link; - parent = parent.parent; - } + base = ""; - return link; + get link() { + var link = this.name; + var parent = this.parent; + while (parent != null) { + link = parent.name + "/" + link; + parent = parent.parent; + } + + return this.base + "/" + link; } get name() { - return this.getAttribute("name"); + return this.getAttribute("name"); } get src() { - return this.getAttribute("src"); + return this.getAttribute("src"); } get dst() { - return this._dst || this.getAttribute("dst"); + return this._dst || this.getAttribute("dst"); } - set dst(value){ - this._dst = value; + set dst(value) { + this._dst = value; } - + get caption() { - return this.getAttribute("caption"); + return this.getAttribute("caption"); } get private() { - return this.hasAttribute("private"); + return this.hasAttribute("private"); } get icon() { - return this.getAttribute("icon"); + return this.getAttribute("icon"); } _getParent() { - let e = null;//this.parentElement; - while (e = this.parentElement) { - if (e instanceof Route || e instanceof Router) - return e; - } + let e = null; //this.parentElement; + while ((e = this.parentElement)) { + if (e instanceof Route || e instanceof Router) return e; + } - return null; + return null; } - // get route() { - // return this; - // } - - // get view() { - // return this; - // } - async create() { + //window.router.add(this); + this._updateLinks(); - //window.router.add(this); - this._updateLinks(); + if (this.hasAttribute("src")) { + let src = this.getAttribute("src").replace(/^\/+|\/+$/g, ""); + let x = await fetch(src); + if (x.status != 200) return; - if (this.hasAttribute("src")) { + let t = await x.text(); - let src = this.getAttribute("src").replace(/^\/+|\/+$/g, ''); - let x = await fetch(src); - if (x.status != 200) - return; - - let t = await x.text(); + this.innerHTML = t; + } - this.innerHTML = t; - - //let xeval = (code) => eval(code); - } - - - if (window?.app?.loaded) - { - await IUI.create(this); - IUI.bind(this, true, "route:" + src, this.scope); - this.refs._build(); - await IUI.created(this); - await IUI.render(this, this._data, true); - } - - // // call create for the new elements - // var newElements = this.querySelectorAll("*"); - // for (var i = 0; i < newElements.length; i++) { - // // set route for all elements - // var el = newElements[i]; - // // newElements[i].route = this; - // el.view = this; - // el.route = this; - - // if (el.hasAttribute("ref")) { - // this.refs[el.getAttribute("ref")] = el; - // } - - // if (el instanceof HTMLScriptElement) { - // // this because HTML parsers don't evaluate script tag - // // xeval.call(el.parentElement, "//# sourceURL=iui://" + src + "\r\n" + el.text); - - // //let func = new Function("//# sourceURL=iui://" + - // // src + "-" + Math.round(Math.random() * 10000) + "\r\n return " + el.text.trim()); - - // let func = new Function("//# sourceURL=iui://" + this.link - // + "\r\n return " + el.text.trim()); - - // let rt = func.call(el.parentElement); - - // if (typeof (rt) === "object") { - // for (var k in rt) - // el.parentElement[k] = rt[k]; - // } - // } - // } - } - - created() - { + if (window?.app?.loaded) { + await IUI.create(this); + IUI.bind(this, true, "route:" + src, this.scope); this.refs._build(); + await IUI.created(this); + await IUI.render(this, this._data, true); + } } - + + created() { + this.refs._build(); + } + set(value) { - if (value == this.visible) - return; + if (value == this.visible) { + return; + } - if (value) { - - this.setAttribute("selected", ""); - this._emit("show"); - - - } - else - { - this.removeAttribute("selected"); - this._emit("hide"); - } + if (value) { + this.setAttribute("selected", ""); + this._emit("show"); + } else { + this.removeAttribute("selected"); + this._emit("hide"); + } } - get visible() { return this.hasAttribute("selected"); } - set visible(value) { this.set(value); } - -}); + get visible() { + return this.hasAttribute("selected"); + } + set visible(value) { + this.set(value); + } + } +); diff --git a/src/Router/Router.js b/src/Router/Router.js index 42920f2..e1c4a07 100644 --- a/src/Router/Router.js +++ b/src/Router/Router.js @@ -1,338 +1,273 @@ -import IUIElement from "../Core/IUIElement.js"; -import Route from "./Route.js" +import Route from "./Route.js"; import Target from "./Target.js"; import { IUI } from "../Core/IUI.js"; +import path from "../Core/Path.js"; +export default IUI.module( + class Router extends Target { + constructor() { + super({ + routes: [], + _states: new Map(), + active: null, + cssClass: "router", + }); -export default IUI.module(class Router extends Target -{ - - constructor() - { - super({routes: [], _states: new Map(), active: null, cssClass: "router"}); - - this._history = []; - - - //IUI._router = this; - - //Object.defineProperty(window, "router", { - // get() { - // if (!IUI._router.isConnected) - // IUI._router = document.getElementsByTagName("i-router")[0]; - // return IUI._router; - // } - //}); - + this._history = []; } _getRouteParent(route) { - let e = null; + let e = null; - while (e = route.parentElement) { - if (e instanceof Route || e instanceof Router) - return e; - } + while ((e = route.parentElement)) { + if (e instanceof Route || e instanceof Router) return e; + } - return null; + return null; } add(route, parent = null) { - if (parent == null) { - this.routes.push(route); - } - else { - route.parent = parent; - this.appendChild(route); - //parent.routes.push(route); - } + route.base = this._base; + + if (!parent) { + this.routes.push(route); + return; + } + + route.parent = parent; + this.appendChild(route); } - _routeInPath(name, routes) - { - for (var i = 0; i < routes.length; i++) - if (routes[i].name == name) - return routes[i]; - return null; + _routeInPath(name, routes) { + for (let i = 0; i < routes.length; i++) + if (routes[i].name == name) return routes[i]; + return null; } getRoute(url, data) { - let p = url.split("/"); + /** + * @type {String[]} + */ + const p = url.split("/"); + if (p[0] == this._base) p.shift(); + let searchRoutes = this.routes; + for (let i = 0; i < p.length; i++) { + const route = this._routeInPath(p[i], searchRoutes); - let searchRoutes = this.routes; + if (route == null) return [null, null]; - for (var i = 0; i < p.length; i++) { - var route = this._routeInPath(p[i], searchRoutes); + if (i == p.length - 1) { + // return [destination state route (link, icon,..etc) , actual route to view] + if (route.dst == null) return [route, route]; - if (route == null) - return [null, null]; - - if (i == p.length - 1) { - // return [destination state route (link, icon,..etc) , actual route to view] - if (route.dst == null) - return [route, route]; - else { - - let dst = route.dst instanceof Function ? route.dst(data) : route.dst; - let url = dst.replace(/^[/]*(.*?)[/]*$/g, '$1').trim(); - return [route, this.getRoute(url)[1]]; - } - } - - searchRoutes = route.routes; + const dst = + route.dst instanceof Function ? route.dst(data) : route.dst; + const url = dst.replace(/^[/]*(.*?)[/]*$/g, "$1").trim(); + return [route, this.getRoute(url)[1]]; } - + searchRoutes = route.routes; + } } back() { - //if (this._history.length > 1) { - // let last = this._history[this._history.length - 2]; - // this.navigate(last.url, last.data, last.target); - //} - - window.history.back(); - } + window.history.back(); + } _toQuery(o) { - let rt = []; - for (let i in o) - if (o[i] == undefined) - rt.push(i); - else - rt.push(i + "=" + encodeURI(o[i].toString().replace("&", "&&")));///encodeURIComponent(o[i])); - return rt.join("&"); + return Object.keys(o) + .map(i => + !i ? i : `${i}=${encodeURI(o[i].toString().replace("&", "&&"))}` + ) + .join("&"); } _fromQuery(q) { - let kv = q.replace("&&", "\0").split('&'); - let rt = {}; - for (let i = 0; i < kv.length; i++) { - let d = kv[i].replace("\0", "&").split('=', 2); - let v = decodeURI(d[1] || ''); //decodeURIComponent(d[1] || ''); - if (v != null && v.trim() != '' && !isNaN(v)) - v = new Number(v); - rt[d[0]] = v; - } - return JSON.parse(JSON.stringify(rt)); + const kv = q.replace("&&", "\0").split("&"); + const rt = {}; + for (let i = 0; i < kv.length; i++) { + const d = kv[i].replace("\0", "&").split("=", 2); + const v = decodeURI(d[1] || ""); + if (v != null && v.trim() != "" && !isNaN(v)) v = new Number(v); + rt[d[0]] = v; + } + return JSON.parse(JSON.stringify(rt)); } - async navigate(url, data, target, state, dataToQuery = true) - { - let q = url.match(/^\/*(.*?)\?(.*)$|^\/*(.*)$/); + async navigate(url, data, target, state, dataToQuery = true) { + let q = url.match(/^\/*(.*?)\?(.*)$|^\/*(.*)$/); - //debugger; + let path; - var path; + // Do we have a query string ? + if (q[2] !== undefined) { + path = q[1]; + data = this._fromQuery(q[2]); + url = path + "?" + q[2]; + } + // Do we have data? + else if (data !== undefined) { + path = q[3]; + url = dataToQuery ? path + "?" + this._toQuery(data) : path; + } else { + path = q[3]; + url = path; + } - // do we have a query string ? - if (q[2] !== undefined) { - path = q[1]; - data = this._fromQuery(q[2]); - url = path + "?" + q[2]; - } - // do we have data ? - else if (data !== undefined) { - path = q[3]; - url = dataToQuery ? path + "?" + this._toQuery(data) : path; - } - else { - path = q[3]; - url = path; - } - + const [stateRoute, viewRoute] = this.getRoute(path, data); - let [stateRoute, viewRoute] = this.getRoute(path, data); + if (stateRoute == null) { + console.warn("State not found ", path); + return; + } - if (stateRoute == null) - { - console.warn("State not found ", path); - return; - } + let ok = this._emit("navigate", { + url, + stateRoute, + viewRoute, + base: path, + data, + cancelable: true, + }); - let ok = this._emit("navigate", { url, stateRoute, viewRoute, base: path, data, cancelable: true }); + if (!ok) { + console.warn("Route not allowed", path); + return; + } - if (!ok) - { - console.warn("Route not allowed", path); - return; - } + // destination view not found + if (viewRoute == null) { + console.log(`Destination route not found ${stateRoute.dst}`); + viewRoute = stateRoute; + } - // destination view not found - if (viewRoute == null) { - console.log(`Destination route not found ${stateRoute.dst}`); - viewRoute = stateRoute; - } - + if (!(target instanceof Target)) target = this; - //let state = null; + if (state == null) { + const id = Math.random().toString(36).substring(2, 12); + state = { id, url, data, target, stateRoute, viewRoute }; + this._states.set(id, state); + history.pushState( + id, + stateRoute.caption, + this._hash ? "#" + url : "/" + url + ); + } - //if (data !== undefined) { - // for (let [k, v] of this._states) - // if (v == data) { - // state = k; - // break; - // } + this._history.push(state.id); // { url, data, target, stateRoute, viewRoute }); - // if (state == null) { - // state = Math.random().toString(36).substr(2, 10); - // this._states.set(state, data); - // } - //} + target.show(viewRoute, this.active); + viewRoute.set(true); - if (!(target instanceof Target)) - target = this; + this.active = viewRoute; - if (state == null) { - let id = Math.random().toString(36).substr(2, 10); - state = { id, url, data, target, stateRoute, viewRoute }; - this._states.set(id, state); - history.pushState(id, stateRoute.caption, this._hash ? "#" + url : "/" + url); - } + this._emit("route", { route: stateRoute }); - this._history.push(state.id);// { url, data, target, stateRoute, viewRoute }); + viewRoute.query = data || {}; + stateRoute.query = viewRoute.query; - target.show(viewRoute, this.active); - viewRoute.set(true); + target.setLoading(true); + if (stateRoute.dataMap != null) { + // if map function failed to call setData, we will render without it + if (!(await stateRoute.dataMap.render(data || {}))) + await stateRoute.render(); - this.active = viewRoute; + if (viewRoute != stateRoute) await viewRoute.setData(stateRoute.data); + } //if (data !== undefined) + else await viewRoute.setData(data); - - //{ url: "/", data: null, target: null }; - this._emit("route", { route: stateRoute }); - - viewRoute.query = data || {}; - stateRoute.query = viewRoute.query; - - - target.setLoading(true); - - if (stateRoute.dataMap != null) { - // if map function failed to call setData, we will render without it - if (!(await stateRoute.dataMap.render(data || {}))) - await stateRoute.render(); - - if (viewRoute != stateRoute) - await viewRoute.setData(stateRoute.data); - } - else //if (data !== undefined) - await viewRoute.setData(data); - - target.setLoading(false); - + target.setLoading(false); } hide() { - // do nothing, we're not here to hide. + // do nothing, we're not here to hide. } refresh() { - - let state = this.current; - this.navigate(state.url, state.data, state.target, state); - - //this.current.render(); - //this.current.data = this.current.data; - //if (updateAttributes) - // this.current.updateAttributes(true); + const state = this.current; + this.navigate(state.url, state.data, state.target, state); } show(route, active) { - super.show(route, active); - - + super.show(route, active); } get current() { - return this._states.get(history.state);//.viewRoute; - //return this._history[this._history.length - 1].viewRoute; + return this._states.get(history.state); //.viewRoute; } get previous() { - - if (this._history.length > 2) - return this._states.get(this._history[this._history.length - 2]);//.viewRoute; - else - return null; + if (this._history.length > 2) + return this._states.get(this._history[this._history.length - 2]); + //.viewRoute; + else return null; } create() { - - // save origin - this.origin = window.location.pathname + window.location.search; + // save origin + this.origin = window.location.pathname + window.location.search; + this._base = this.hasAttribute("base") ? this.getAttribute("base") : "/"; } destroy() { - console.log("Destroyed", this); + console.log("Destroyed", this); } - created() - { + created() { + if ( + this.hasAttribute("type") && + this.getAttribute("type").toLowerCase() == "hash" + ) { + this._hash = true; + } - if (this.hasAttribute("type") && this.getAttribute("type").toLowerCase() == "hash") - this._hash = true; - - - /// find all children - for (var i = 0; i < this.children.length; i++) { - let e = this.children[i]; - if (e instanceof Route) { - this.add(e); - if (e.visible) - this.navigate(e.name); - } + /// find all children + for (let i = 0; i < this.children.length; i++) { + const e = this.children[i]; + if (e instanceof Route) { + this.add(e); + if (e.visible) this.navigate(e.name); } + } - this._emit("created"); - - //console.log("Router created", this); + this._emit("created"); } connectedCallback() { - //console.log("New router", this); + window.router = this; - window.router = this; + const self = this; + window.addEventListener("popstate", function (event) { + const stateId = event.state; + let path; - let self = this; + if (self._hash) { + path = window.location.hash; - window.addEventListener("popstate", function (event) { + if (path.length > 0) path = path.substring(1); + } else { + path = window.location.pathname; + } - //console.log(event); - let stateId = event.state; - let path; + if (stateId != null) { + if (stateId != self._history[self._history.length - 1]) { + //this._lastStateId = stateId; + const state = self._states.get(stateId); + self.navigate(path, state.data, state.target, state); + } else { + console.log("SAME"); + } + } else { + this._lastState = null; + self.navigate(path, undefined, undefined, {}); + } + //alert("location: " + document.location + ", state: " + JSON.stringify(event.state)); + console.log(document.location.hash, event.state); + }); - if (self._hash) { - path = window.location.hash; - - if (path.length > 0) - path = path.substr(1); - } - else { - path = window.location.pathname; - } - - if (stateId != null) { - - if (stateId != self._history[self._history.length -1]) { - //this._lastStateId = stateId; - let state = self._states.get(stateId); - self.navigate(path, state.data, state.target, state); - } - else { - console.log("SAME"); - } - } - else { - this._lastState = null; - self.navigate(path, undefined, undefined, {}); - } - //alert("location: " + document.location + ", state: " + JSON.stringify(event.state)); - console.log(document.location.hash, event.state); - }); - - this._register("navigate"); - this._register("route"); - this._register("created"); + this._register("navigate"); + this._register("route"); + this._register("created"); } - -}); \ No newline at end of file + } +); diff --git a/src/Router/Target.js b/src/Router/Target.js index b4c84a5..59133ad 100644 --- a/src/Router/Target.js +++ b/src/Router/Target.js @@ -2,59 +2,52 @@ import { IUI } from "../Core/IUI.js"; import Route from "./Route.js"; -export default IUI.module(class Target extends IUIElement { +export default IUI.module( + class Target extends IUIElement { constructor(properties) { - super(IUI.extend(properties, { cssClass: 'target' })); - - this._register("show"); - this._register("hide"); + super(IUI.extend(properties, { cssClass: "target" })); + this._register("show"); + this._register("hide"); } - setLoading(value) - { - if (value) - this.classList.add(this.cssClass + "-loading"); - else - this.classList.remove(this.cssClass + "-loading"); + setLoading(value) { + if (value) this.classList.add(this.cssClass + "-loading"); + else this.classList.remove(this.cssClass + "-loading"); } - create() { - - } + create() {} show(route, previous) { + let previousTarget = previous?.target; - let previousTarget = previous?.target; + route.target = this; - route.target = this; - - for (var i = 0; i < this.children.length; i++) - if (this.children[i] instanceof Route && this.children[i] != route) { - this.children[i].set(false); - } - - //if (previous != null && previous != route && previous.target == this) { - // previous.set(false); - //} - //else - if (previousTarget != null && previousTarget != this) { - previousTarget.hide(this.active); + for (var i = 0; i < this.children.length; i++) + if (this.children[i] instanceof Route && this.children[i] != route) { + this.children[i].set(false); } + //if (previous != null && previous != route && previous.target == this) { + // previous.set(false); + //} + //else + if (previousTarget != null && previousTarget != this) { + previousTarget.hide(this.active); + } - if (route.parentElement != this) - this.appendChild(route); + if (route.parentElement != this) this.appendChild(route); - this._emit("show", { route, previous}); + this._emit("show", { route, previous }); } hide(route) { - for (var i = 0; i < this.children.length; i++) - if (this.children[i] instanceof Route) { - this.children[i].set(false); - } + for (var i = 0; i < this.children.length; i++) + if (this.children[i] instanceof Route) { + this.children[i].set(false); + } - this._emit("hide", { route }); + this._emit("hide", { route }); } -}); \ No newline at end of file + } +); diff --git a/src/UI/Background.js b/src/UI/Background.js index 48630d1..4d7538a 100644 --- a/src/UI/Background.js +++ b/src/UI/Background.js @@ -1,40 +1,36 @@ import IUIElement from "../Core/IUIElement.js"; import { IUI } from "../Core/IUI.js"; -export default IUI.module(class Background extends IUIElement { +export default IUI.module( + class Background extends IUIElement { constructor() { - super({ cssClass: 'background' }); - - - this.classList.add(this.cssClass); - this._register("visible"); + super({ cssClass: "background" }); + this.classList.add(this.cssClass); + this._register("visible"); } - - create() { - - } + create() {} hide() { - return this.setVisible(false); + return this.setVisible(false); } show() { - return this.setVisible(true); + return this.setVisible(true); } setVisible(value) { - this.visible = value; - if (value) { - this.classList.add(this.cssClass + "-visible"); - } - else { - this.classList.remove(this.cssClass + "-visible"); - } + this.visible = value; + if (value) { + this.classList.add(this.cssClass + "-visible"); + } else { + this.classList.remove(this.cssClass + "-visible"); + } - this._emit("visible", value); + this._emit("visible", value); - return this; + return this; } -}); \ No newline at end of file + } +); diff --git a/src/UI/Button.js b/src/UI/Button.js index 1fef3fb..dba24c6 100644 --- a/src/UI/Button.js +++ b/src/UI/Button.js @@ -1,70 +1,66 @@ import IUIElement from "../Core/IUIElement.js"; import { IUI } from "../Core/IUI.js"; -export default IUI.module(class Button extends IUIElement { +export default IUI.module( + class Button extends IUIElement { constructor() { - super({ cssClass: 'button' }); + super({ cssClass: "button" }); - this.addEventListener("mousedown", (e)=>{ + this.addEventListener( + "mousedown", + e => { + var r = this.getBoundingClientRect(); + this.style.setProperty("--x", e.x - r.x + "px"); + this.style.setProperty("--y", e.y - r.y + "px"); - var r = this.getBoundingClientRect(); - this.style.setProperty("--x", (e.x - r.x) + "px"); - this.style.setProperty("--y", (e.y - r.y) + "px"); + this.style.setProperty("--w", r.width + "px"); + this.style.setProperty("--h", r.height + "px"); - this.style.setProperty("--w", r.width + "px"); - this.style.setProperty("--h", r.height + "px"); + this.classList.remove(this.cssClass + "-clicked"); + void this.offsetWidth; + this.classList.add(this.cssClass + "-clicked"); + }, + true + ); - this.classList.remove(this.cssClass + "-clicked"); - void this.offsetWidth; - this.classList.add(this.cssClass + "-clicked"); - - }, true); - - this._register("check"); + this._register("check"); } get type() { - return this.getAttribute("type"); + return this.getAttribute("type"); } - set type(value) - { - this.setAttribute("type", value); + set type(value) { + this.setAttribute("type", value); } get checked() { - return this.hasAttribute("checked"); + return this.hasAttribute("checked"); } - set checked(value) - { - if (value) - this.setAttribute("checked", ""); - else - this.removeAttribute("checked"); + set checked(value) { + if (value) this.setAttribute("checked", ""); + else this.removeAttribute("checked"); } - get disabled() { - return this.getAttribute("disabled"); + return this.getAttribute("disabled"); } set disabled(value) { - this.setAttribute("disabled", value); + this.setAttribute("disabled", value); } - create() { + if (this.type == "check") { + this.addEventListener("click", () => { + let checked = !this.checked; + this.checked = checked; + this._emit("check", { checked }); + }); + } - if (this.type == "check") - { - this.addEventListener("click", ()=>{ - let checked = !this.checked; - this.checked = checked; - this._emit("check", {checked}); - }); - } - - //this.classList.add(this.cssClass); + //this.classList.add(this.cssClass); } -}); \ No newline at end of file + } +); diff --git a/src/UI/Check.js b/src/UI/Check.js index bccec3b..3149b04 100644 --- a/src/UI/Check.js +++ b/src/UI/Check.js @@ -1,58 +1,54 @@ import IUIElement from "../Core/IUIElement.js"; import { IUI } from "../Core/IUI.js"; -export default IUI.module(class Check extends IUIElement { +export default IUI.module( + class Check extends IUIElement { constructor(properties) { - super(IUI.extend(properties, { cssClass: 'check' })); + super(IUI.extend(properties, { cssClass: "check" })); - this._register("check"); + this._register("check"); - this.on("click", () => { - this.checked = !this.checked; - }); + this.on("click", () => { + this.checked = !this.checked; + }); } get checked() { - return this.hasAttribute("checked"); + return this.hasAttribute("checked"); } set checked(value) { - this.check(value); - this._emit("check", { checked: value }); + this.check(value); + this._emit("check", { checked: value }); } check(value) { - if (value) - this.setAttribute("checked", "checked"); - else - this.removeAttribute("checked"); + if (value) this.setAttribute("checked", "checked"); + else this.removeAttribute("checked"); } create() { - this.field = this.getAttribute("field"); + this.field = this.getAttribute("field"); } async setData(value) { - await super.setData(value); - if (value != null && this.field != null) - this.value = value[this.field]; - else if (this.field != null) - this.value = null; + await super.setData(value); + if (value != null && this.field != null) this.value = value[this.field]; + else if (this.field != null) this.value = null; } - modified(name, value) { - if (name == this.field) { - this.value = value; - } + if (name == this.field) { + this.value = value; + } } get value() { - return this.checked; + return this.checked; } set value(value) { - this.checked = value; + this.checked = value; } - -}); \ No newline at end of file + } +); diff --git a/src/UI/CodePreview.js b/src/UI/CodePreview.js index dea36ac..b3dfb16 100644 --- a/src/UI/CodePreview.js +++ b/src/UI/CodePreview.js @@ -2,88 +2,87 @@ import IUIElement from "../Core/IUIElement.js"; import { IUI } from "../Core/IUI.js"; import RefsCollection from "../Core/RefsCollection.js"; -export default IUI.module(class CodePreview extends IUIElement { +export default IUI.module( + class CodePreview extends IUIElement { constructor() { - super(); - this.refs = new RefsCollection(this); - this._code = this.innerHTML.trim(); - this.textContent = ''; - + super(); + this.refs = new RefsCollection(this); + this._code = this.innerHTML.trim(); + this.textContent = ""; } async create() { + if (this.hasAttribute("debug")) debugger; - if (this.hasAttribute("debug")) - debugger; + //this._code = this.innerHTML.trim(); + //this.textContent = ''; - //this._code = this.innerHTML.trim(); - //this.textContent = ''; - - // create elements - this.bar = document.createElement("div"); - this.bar.className = this.cssClass + "-bar"; - this.content = document.createElement("div"); - this.content.className = this.cssClass + "-content"; - this.editor = document.createElement("code"); - this.editor.className = this.cssClass + "-editor"; + // create elements + this.bar = document.createElement("div"); + this.bar.className = this.cssClass + "-bar"; + this.content = document.createElement("div"); + this.content.className = this.cssClass + "-content"; + this.editor = document.createElement("code"); + this.editor.className = this.cssClass + "-editor"; - this.editor.innerText = this._code; - this.editor.contentEditable = true; + this.editor.innerText = this._code; + this.editor.contentEditable = true; - this.editor.setAttribute("skip", true); + this.editor.setAttribute("skip", true); - let self = this; - this.editor.addEventListener("input", function() { - self._code = self.editor.textContent.trim(); - self.updatePreview(); - }, false); - - this.preview = document.createElement("div"); - this.preview.className = this.cssClass + "-preview"; - //this.preview.setAttribute(":content", ""); + let self = this; + this.editor.addEventListener( + "input", + function () { + self._code = self.editor.textContent.trim(); + self.updatePreview(); + }, + false + ); - this.content.append(this.editor); - this.content.append(this.preview); - - this.append(this.bar); - this.append(this.content); - this.field = this.getAttribute("field"); + this.preview = document.createElement("div"); + this.preview.className = this.cssClass + "-preview"; + //this.preview.setAttribute(":content", ""); - //await this.updatePreview(); - } - - async created(){ - await this.updatePreview(); + this.content.append(this.editor); + this.content.append(this.preview); + + this.append(this.bar); + this.append(this.content); + this.field = this.getAttribute("field"); + + //await this.updatePreview(); } - get scope(){ - return {view: this, refs: this.refs}; + async created() { + await this.updatePreview(); } - + + get scope() { + return { view: this, refs: this.refs }; + } + async updatePreview() { - + if (this._updating) return; - if (this._updating) - return; + this._updating = true; - this._updating = true; + this.preview.innerHTML = this._code; + //this.editor.innerHTML = hljs.highlightAuto(this._code).value; - this.preview.innerHTML = this._code; - //this.editor.innerHTML = hljs.highlightAuto(this._code).value; + // this.editor.innerHTML = hljs.highlight(this._code, {language: 'html'}).value -// this.editor.innerHTML = hljs.highlight(this._code, {language: 'html'}).value + // this.editor.innerHTML = hljs.highlightElement(this.editor, {language: 'html'}).value; - // this.editor.innerHTML = hljs.highlightElement(this.editor, {language: 'html'}).value; + if (window.app?.loaded) { + await IUI.create(this.preview); + await IUI.created(this.preview); + IUI.bind(this.preview, true, "preview", this.scope); + this.refs._build(); + await IUI.render(this.preview, this._data, true); + } - if (window.app?.loaded) - { - await IUI.create(this.preview); - await IUI.created(this.preview); - IUI.bind(this.preview, true, "preview", this.scope); - this.refs._build(); - await IUI.render(this.preview, this._data, true); - } - - this._updating = false; + this._updating = false; } -}); \ No newline at end of file + } +); diff --git a/src/UI/DateTimePicker.js b/src/UI/DateTimePicker.js index 8221ed1..24eea68 100644 --- a/src/UI/DateTimePicker.js +++ b/src/UI/DateTimePicker.js @@ -1,129 +1,124 @@ import IUIElement from "../Core/IUIElement.js"; import { IUI } from "../Core/IUI.js"; -export default IUI.module(class DateTimePicker extends IUIElement { - - +export default IUI.module( + class DateTimePicker extends IUIElement { constructor() { - super(); + super(); } - - get layout() { - return this._layout; + return this._layout; } set layout(value) { + if (value == this._layout) return; - if (value == this._layout) - return; + this.innerHTML = ""; - this.innerHTML = ""; + this._layout = value; - this._layout = value; + this.calendar = document.createElement("div"); + this.calendar.className = this.cssClass + "-calendar"; - this.calendar = document.createElement("div"); - this.calendar.className = this.cssClass + "-calendar"; + this.calendarContent = document.createElement("div"); + this.calendarContent.className = this.cssClass + "-calendar-content"; + this.table = document.createElement("table"); + this.header = this.table.createTHead(); + this.body = this.table.createTBody(); - this.calendarContent = document.createElement("div"); - this.calendarContent.className = this.cssClass + "-calendar-content"; + this.calendarContent.appendChild(this.table); - this.table = document.createElement("table"); - this.header = this.table.createTHead(); - this.body = this.table.createTBody(); + var tr = this.header.insertRow(); - this.calendarContent.appendChild(this.table); + for (var i = 0; i < 7; i++) { + var td = tr.insertCell(); + td.innerHTML = this.layout.day.formatter( + (i + this.layout.weekStart) % 7 + ); + td.className = this.cssClass + "-day"; + } - var tr = this.header.insertRow(); + this.tools = document.createElement("div"); + this.tools.className = this.cssClass + "-tools"; - for (var i = 0; i < 7; i++) { - var td = tr.insertCell(); - td.innerHTML = this.layout.day.formatter((i + this.layout.weekStart) % 7); - td.className = this.cssClass + "-day"; + this.month = document.createElement("div"); + this.month.className = this.cssClass + "-month"; + this.monthName = document.createElement("div"); + this.monthName.className = this.cssClass + "-name"; + this.nextMonth = document.createElement("div"); + this.nextMonth.className = this.cssClass + "-next"; + this.previousMonth = document.createElement("div"); + this.previousMonth.className = this.cssClass + "-previous"; + + this.month.appendChild(this.previousMonth); + this.month.appendChild(this.monthName); + this.month.appendChild(this.nextMonth); + + this.year = document.createElement("div"); + this.year.className = this.cssClass + "-year"; + this.yearName = document.createElement("div"); + this.yearName.className = this.cssClass + "-name"; + this.nextYear = document.createElement("div"); + this.nextYear.className = this.cssClass + "-next"; + this.previousYear = document.createElement("div"); + this.previousYear.className = this.cssClass + "-previous"; + + this.year.appendChild(this.previousYear); + this.year.appendChild(this.yearName); + this.year.appendChild(this.nextYear); + + this.tools.appendChild(this.month); + this.tools.appendChild(this.year); + + let self = this; + + this.nextMonth.addEventListener("click", function () { + self._month = (self._month + 1) % 12; + self.render(); + }); + + this.previousMonth.addEventListener("click", function () { + self._month = (self._month + 11) % 12; + self.render(); + }); + + this.nextYear.addEventListener("click", function () { + self._year++; + self.render(); + }); + + this.previousYear.addEventListener("click", function () { + self._year--; + self.render(); + }); + + for (let i = 0; i < 6; i++) { + tr = this.body.insertRow(); + + for (var j = 0; j < 7; j++) { + let td = tr.insertCell(tr); + td.className = this.cssClass + "-day"; + td.innerHTML = i + "x" + j; + td.addEventListener("click", function () { + self._day = parseInt(this.getAttribute("data-day")); + self._month = parseInt(this.getAttribute("data-month")); + self._year = parseInt(this.getAttribute("data-year")); + self._value.setDate(self._day); + self._value.setFullYear(self._year); + self._value.setMonth(self._month); + self.render(); + self._emit("select", { value: self._value }); + self._emit(":value", { value }); + }); } + } - this.tools = document.createElement("div"); - this.tools.className = this.cssClass + "-tools"; + this.calendar.appendChild(this.tools); + this.calendar.appendChild(this.calendarContent); - this.month = document.createElement("div"); - this.month.className = this.cssClass + "-month"; - this.monthName = document.createElement("div"); - this.monthName.className = this.cssClass + "-name"; - this.nextMonth = document.createElement("div"); - this.nextMonth.className = this.cssClass + "-next"; - this.previousMonth = document.createElement("div");; - this.previousMonth.className = this.cssClass + "-previous"; - - this.month.appendChild(this.previousMonth); - this.month.appendChild(this.monthName); - this.month.appendChild(this.nextMonth); - - this.year = document.createElement("div"); - this.year.className = this.cssClass + "-year"; - this.yearName = document.createElement("div"); - this.yearName.className = this.cssClass + "-name"; - this.nextYear = document.createElement("div"); - this.nextYear.className = this.cssClass + "-next"; - this.previousYear = document.createElement("div"); - this.previousYear.className = this.cssClass + "-previous"; - - this.year.appendChild(this.previousYear); - this.year.appendChild(this.yearName); - this.year.appendChild(this.nextYear); - - this.tools.appendChild(this.month); - this.tools.appendChild(this.year); - - let self = this; - - this.nextMonth.addEventListener("click", function () { - self._month = (self._month + 1) % 12; - self.render(); - }); - - this.previousMonth.addEventListener("click", function () { - self._month = (self._month + 11) % 12; - self.render(); - }); - - this.nextYear.addEventListener("click", function () { - self._year++; - self.render(); - }); - - this.previousYear.addEventListener("click", function () { - self._year--; - self.render(); - }); - - - for (let i = 0; i < 6; i++) { - tr = this.body.insertRow(); - - for (var j = 0; j < 7; j++) { - let td = tr.insertCell(tr); - td.className = this.cssClass + "-day"; - td.innerHTML = i + "x" + j; - td.addEventListener("click", function () { - self._day = parseInt(this.getAttribute("data-day")); - self._month = parseInt(this.getAttribute("data-month")); - self._year = parseInt(this.getAttribute("data-year")); - self._value.setDate(self._day); - self._value.setFullYear(self._year); - self._value.setMonth(self._month); - self.render(); - self._emit("select", { value: self._value }); - self._emit(":value", { value }); - }); - } - } - - this.calendar.appendChild(this.tools); - this.calendar.appendChild(this.calendarContent); - - /* + /* this.minutes = document.createElement("div"); this.minutes.className = this.cssClass + "-clock"; @@ -149,166 +144,180 @@ export default IUI.module(class DateTimePicker extends IUIElement { } */ - this.clock = document.createElement("div"); - this.clock.className = this.cssClass + "-clock"; + this.clock = document.createElement("div"); + this.clock.className = this.cssClass + "-clock"; - for (let i = 0; i < 1440; i += this.layout.time.range) { - var range = document.createElement("div"); - range.className = this.cssClass + "-time"; - range.innerHTML = this.layout.time.formatter(i); - range.setAttribute("data-time", i); - this.clock.appendChild(range); + for (let i = 0; i < 1440; i += this.layout.time.range) { + var range = document.createElement("div"); + range.className = this.cssClass + "-time"; + range.innerHTML = this.layout.time.formatter(i); + range.setAttribute("data-time", i); + this.clock.appendChild(range); - range.addEventListener("click", function () { - var t = parseInt(this.getAttribute("data-time")); - var h = Math.floor(t / 60); - var m = Math.floor(t % 60); - self._value.setHours(h); - self._value.setMinutes(m); - self._emit("select", self._value); - self.render(); - }); - } + range.addEventListener("click", function () { + var t = parseInt(this.getAttribute("data-time")); + var h = Math.floor(t / 60); + var m = Math.floor(t % 60); + self._value.setHours(h); + self._value.setMinutes(m); + self._emit("select", self._value); + self.render(); + }); + } - //this.timeList = document.createElement("div"); - //this.timeList = - this.appendChild(this.calendar); - this.appendChild(this.clock); - // this.appendChild(this.minutes); -// this.appendChild(this.hours); + //this.timeList = document.createElement("div"); + //this.timeList = + this.appendChild(this.calendar); + this.appendChild(this.clock); + // this.appendChild(this.minutes); + // this.appendChild(this.hours); - this.value = new Date(); + this.value = new Date(); } create() { + var self = this; - var self = this; + this._register("select"); + this.classList.add(this.cssClass); - this._register("select"); + this.layout = { + day: { + formatter: function (index) { + return ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"][index]; + //return ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'][index]; + }, + }, + month: { + formatter: function (index) { + return [ + "January", + "February", + "March", + "April", + "May", + "June", + "July", + "August", + "September", + "October", + "November", + "December", + ][index]; + }, + }, + year: { + formatter: function (value) { + return value; + }, + }, + time: { + formatter: function (value) { + var formatDigit = function (d) { + return d < 10 ? "0" + d : d; + }; + var h = Math.floor(value / 60); + var m = Math.floor(value % 60); + return formatDigit(h) + ":" + formatDigit(m); + }, + range: 15, + }, - this.classList.add(this.cssClass); - - this.layout = { - day: { - formatter: function (index) { - return ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'][index]; - //return ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'][index]; - } - }, - month: { - formatter: function (index) { - return ["January", "February", "March", "April", "May", "June", - "July", "August", "September", "October", "November", "December"][index]; - } - }, - year: { - formatter: function (value) { - return value; - } - }, - time: { - formatter: function (value) { - var formatDigit = function (d) { return (d < 10) ? "0" + d : d; }; - var h = Math.floor(value / 60); - var m = Math.floor(value % 60); - return formatDigit(h) + ":" + formatDigit(m); - }, - range: 15 - }, - - weekStart: 5 - }; + weekStart: 5, + }; } render() { + var start = new Date(this._year, this._month, 1); + var offset = 1 - start.getDay() - ((7 - this.layout.weekStart) % 7); //(this.weekStart > 3 ? (this.weekStart - 7) : this.weekStart); - var start = new Date(this._year, this._month, 1); - var offset = 1 - start.getDay() - (7 - this.layout.weekStart) % 7;//(this.weekStart > 3 ? (this.weekStart - 7) : this.weekStart); + this.yearName.innerHTML = this.layout.year.formatter(this._year); + this.monthName.innerHTML = this.layout.month.formatter(this._month); - this.yearName.innerHTML = this.layout.year.formatter(this._year); - this.monthName.innerHTML = this.layout.month.formatter(this._month); + var today = new Date(); - var today = new Date(); + for (var i = 0; i < 42; i++) { + var rowIndex = Math.floor(i / 7); + var cellIndex = i % 7; - for (var i = 0; i < 42; i++) { - var rowIndex = Math.floor(i / 7); - var cellIndex = i % 7; + var td = this.body.rows[rowIndex].cells[cellIndex]; - var td = this.body.rows[rowIndex].cells[cellIndex]; + var d = new Date(this._year, this._month, offset + i); - var d = new Date(this._year, this._month, offset + i); + td.classList.remove(this.cssClass + "-different-month"); - td.classList.remove(this.cssClass + "-different-month"); + // gray it + if (d.getMonth() != this._month) + td.classList.add(this.cssClass + "-different-month"); - // gray it - if (d.getMonth() != this._month) - td.classList.add(this.cssClass + "-different-month"); + if ( + d.getDate() == today.getDate() && + d.getMonth() == today.getMonth() && + d.getFullYear() == today.getFullYear() + ) + td.classList.add(this.cssClass + "-day-today"); + else td.classList.remove(this.cssClass + "-day-today"); - if (d.getDate() == today.getDate() && d.getMonth() == today.getMonth() && d.getFullYear() == today.getFullYear()) - td.classList.add(this.cssClass + "-day-today"); - else - td.classList.remove(this.cssClass + "-day-today"); + if ( + d.getDate() == this._value.getDate() && + d.getFullYear() == this._value.getFullYear() && + d.getMonth() == this._value.getMonth() + ) + td.classList.add(this.cssClass + "-day-selected"); + else td.classList.remove(this.cssClass + "-day-selected"); - if (d.getDate() == this._value.getDate() - && d.getFullYear() == this._value.getFullYear() - && d.getMonth() == this._value.getMonth()) - td.classList.add(this.cssClass + "-day-selected"); - else - td.classList.remove(this.cssClass + "-day-selected"); + td.setAttribute("data-day", d.getDate()); + td.setAttribute("data-month", d.getMonth()); + td.setAttribute("data-year", d.getFullYear()); + td.innerHTML = d.getDate(); + } - td.setAttribute("data-day", d.getDate()); - td.setAttribute("data-month", d.getMonth()); - td.setAttribute("data-year", d.getFullYear()); + for (var i = 0; i < this.clock.children.length; i++) + this.clock.children[i].classList.remove( + this.cssClass + "-time-selected" + ); - td.innerHTML = d.getDate(); - } + var time = this._value.getHours() * 60 + this._value.getMinutes(); - - for (var i = 0; i < this.clock.children.length; i++) - this.clock.children[i].classList.remove(this.cssClass + "-time-selected"); - - var time = (this._value.getHours() * 60) + this._value.getMinutes(); - - if (time % this.layout.time.range == 0) - this.clock.children[time / this.layout.time.range].classList.add(this.cssClass + "-time-selected"); + if (time % this.layout.time.range == 0) + this.clock.children[time / this.layout.time.range].classList.add( + this.cssClass + "-time-selected" + ); } async setData(value) { + await super.setData(value); - await super.setData(value); - - - if (value != null && this.field != null) - this.value = this.data[this.field]; - + if (value != null && this.field != null) + this.value = this.data[this.field]; } get data() { - return super.data; + return super.data; } modified(name, value) { - if (name == this.field) - this.value = value; + if (name == this.field) this.value = value; } set value(value) { - if (value && !isNaN(value.getTime())) { - this._value = value; - this._month = value.getMonth(); - this._year = value.getFullYear(); - this._day = value.getDate(); - this.render(); - this._emit("select", { value }); - this._emit("modified", { value, property: "value" }); - //this.modified("value", ); - //this.modified("modified", { value }); - } + if (value && !isNaN(value.getTime())) { + this._value = value; + this._month = value.getMonth(); + this._year = value.getFullYear(); + this._day = value.getDate(); + this.render(); + this._emit("select", { value }); + this._emit("modified", { value, property: "value" }); + //this.modified("value", ); + //this.modified("modified", { value }); + } } get value() { - return this._value; + return this._value; } -}); \ No newline at end of file + } +); diff --git a/src/UI/Dialog.js b/src/UI/Dialog.js index 4c1ea99..b124204 100644 --- a/src/UI/Dialog.js +++ b/src/UI/Dialog.js @@ -2,271 +2,265 @@ import IUIElement from "../Core/IUIElement.js"; import { IUI } from "../Core/IUI.js"; import IUIWindow from "./Window.js"; -export default IUI.module(class IUIDialog extends IUIWindow -{ - static moduleName = "dialog"; +export default IUI.module( + class IUIDialog extends IUIWindow { + static moduleName = "dialog"; - constructor() - { - super({ - closeable: true, - resizeable: true, - draggable: false, - _dragging: false, - _expanding: false, - x: 0, - y: 0, - visible: false, - modal: false - } - ); + constructor() { + super({ + closeable: true, + resizeable: true, + draggable: false, + _dragging: false, + _expanding: false, + x: 0, + y: 0, + visible: false, + modal: false, + }); - var self = this; + var self = this; - this._register("visible"); - this._register("resize"); + this._register("visible"); + this._register("resize"); - this.on("close", function(){ - self.hide(); - }); - } + this.on("close", function () { + self.hide(); + }); + } - create() - { - - super.create(); - var self = this; + create() { + super.create(); + var self = this; - if (this.modal) - { - this.background = iui("iui_app_background"); - if (!this.background) - { - var bg = document.createElement("div"); - bg.id="iui_app_background"; - document.body.insertAdjacentElement("afterBegin", bg); - this.background = iui(bg).background(); - } - + if (this.modal) { + this.background = iui("iui_app_background"); + if (!this.background) { + var bg = document.createElement("div"); + bg.id = "iui_app_background"; + document.body.insertAdjacentElement("afterBegin", bg); + this.background = iui(bg).background(); + } - // this.modal.className = this.customClass + "-modal-background"; + // this.modal.className = this.customClass + "-modal-background"; - this.classList.add(this.customClass + "-modal"); + this.classList.add(this.customClass + "-modal"); + } - } - + this.loading = document.createElement("div"); + this.loading.className = this.customClass + "-loading"; - this.loading = document.createElement("div"); - this.loading.className = this.customClass + "-loading"; + if (this.loadingText) this.loading.innerHTML = this.loadingText; + else { + var lc = document.createElement("div"); + lc.className = this.customClass + "-loading-content"; + this.loading.appendChild(lc); + } - if (this.loadingText) - this.loading.innerHTML = this.loadingText; - else - { - var lc = document.createElement("div"); - lc.className = this.customClass + "-loading-content"; - this.loading.appendChild(lc); - } + this.body.appendChild(this.loading); - this.body.appendChild(this.loading); + if (this.draggable) { + this.addEventListener("mousedown", function (e) { + self._startDragging(e); + }); + } else { + this.header.addEventListener("mousedown", function (e) { + self._startDragging(e); + }); + } + document.addEventListener("mouseup", function () { + self._stopDragging(); + self._stopExpanding(); + }); - if (this.draggable) - { - this.addEventListener("mousedown", function(e){ - self._startDragging(e); - }); - } - else - { - this.header.addEventListener('mousedown', function (e) { - self._startDragging(e); - }); - } + document.addEventListener("mousemove", function (e) { + if (self._dragging) self._drag(e); + else if (self._expanding) self._expand(e); + }); - document.addEventListener('mouseup', function () { - self._stopDragging(); - self._stopExpanding(); - }); - - document.addEventListener('mousemove', function (e) { - if (self._dragging) - self._drag(e); - else if (self._expanding) - self._expand(e); - }); + this.addEventListener("mousedown", function (e) { + if (self.style.cursor == "nwse-resize") self._startExpanding(e); + }); - this.addEventListener("mousedown", function(e){ - if (self.style.cursor == "nwse-resize") - self._startExpanding(e); - }); + this.addEventListener("mousemove", function (e) { + if (self._dragging) return; - this.addEventListener("mousemove", function(e) - { - if (self._dragging) - return; + if (!self._expanding) { + var x = + (e.pageX || + e.clientX + + (document.documentElement.scrollLeft + ? document.documentElement.scrollLeft + : document.body.scrollLeft)) - self.offsetLeft; + var y = + (e.pageY || + e.clientY + + (document.documentElement.scrollTop + ? document.documentElement.scrollTop + : document.body.scrollTop)) - self.offsetTop; - if (!self._expanding) - { - var x = (e.pageX || e.clientX + (document.documentElement.scrollLeft ? - document.documentElement.scrollLeft : - document.body.scrollLeft)) - self.offsetLeft; - var y = (e.pageY || e.clientY + (document.documentElement.scrollTop ? - document.documentElement.scrollTop : - document.body.scrollTop) ) - self.offsetTop; + if (self.clientWidth - x < 5 && self.clientHeight - y < 5) { + self.style.cursor = "nwse-resize"; + } else { + self.style.cursor = ""; + } + } + }); + } - if (self.clientWidth - x < 5 && self.clientHeight - y < 5) - { - self.style.cursor = "nwse-resize"; - } - else - { - self.style.cursor = ""; - } - } - }); + _startDragging(e) { + this._dragging = true; - } + this._dragX = + (e.pageX || + e.clientX + + (document.documentElement.scrollLeft + ? document.documentElement.scrollLeft + : document.body.scrollLeft)) - this.offsetLeft; + this._dragY = + (e.pageY || + e.clientY + + (document.documentElement.scrollTop + ? document.documentElement.scrollTop + : document.body.scrollTop)) - this.offsetTop; - _startDragging(e) - { - this._dragging = true; + //corssbrowser mouse pointer values + document.onselectstart = function () { + return false; + }; + } - this._dragX = (e.pageX || e.clientX + (document.documentElement.scrollLeft ? - document.documentElement.scrollLeft : - document.body.scrollLeft)) - this.offsetLeft; - this._dragY = (e.pageY || e.clientY + (document.documentElement.scrollTop ? - document.documentElement.scrollTop : - document.body.scrollTop) ) - this.offsetTop; + _drag(e) { + var x = + e.pageX || + e.clientX + + (document.documentElement.scrollLeft + ? document.documentElement.scrollLeft + : document.body.scrollLeft); + var y = + e.pageY || + e.clientY + + (document.documentElement.scrollTop + ? document.documentElement.scrollTop + : document.body.scrollTop); + this.style.top = y - this._dragY + "px"; // (y - self.y) + "px"; + this.style.left = x - this._dragX + "px"; //(x - self.x) + "px"; + this._emit("move", { left: this.offsetLeft, top: this.offsetTop }); + } - //corssbrowser mouse pointer values - document.onselectstart = function() {return false}; - } - - _drag(e) - { - var x = e.pageX || e.clientX + (document.documentElement.scrollLeft ? - document.documentElement.scrollLeft : - document.body.scrollLeft); - var y = e.pageY || e.clientY + (document.documentElement.scrollTop ? - document.documentElement.scrollTop : - document.body.scrollTop); - this.style.top = (y - this._dragY ) + "px";// (y - self.y) + "px"; - this.style.left = (x -this._dragX ) + "px";//(x - self.x) + "px"; - this._emit("move", {left: this.offsetLeft, top: this.offsetTop}); - } + _stopDragging() { + this._dragging = false; + } - _stopDragging() - { - this._dragging = false; - } + _startExpanding(e) { + document.onselectstart = function () { + return false; + }; + this._expanding = true; + this._dragX = + (e.pageX || + e.clientX + + (document.documentElement.scrollLeft + ? document.documentElement.scrollLeft + : document.body.scrollLeft)) - this.offsetLeft; + this._dragY = + (e.pageY || + e.clientY + + (document.documentElement.scrollTop + ? document.documentElement.scrollTop + : document.body.scrollTop)) - this.offsetTop; + this._width = this.clientWidth; + this._height = this.clientHeight; + } - _startExpanding(e) - { - document.onselectstart = function() {return false}; - this._expanding = true; - this._dragX = (e.pageX || e.clientX + (document.documentElement.scrollLeft ? - document.documentElement.scrollLeft : - document.body.scrollLeft)) - this.offsetLeft; - this._dragY = (e.pageY || e.clientY + (document.documentElement.scrollTop ? - document.documentElement.scrollTop : - document.body.scrollTop) ) - this.offsetTop; - this._width = this.clientWidth; - this._height = this.clientHeight; - } + _expand(e) { + var x = + (e.pageX || + e.clientX + + (document.documentElement.scrollLeft + ? document.documentElement.scrollLeft + : document.body.scrollLeft)) - this.offsetLeft; + var y = + (e.pageY || + e.clientY + + (document.documentElement.scrollTop + ? document.documentElement.scrollTop + : document.body.scrollTop)) - this.offsetTop; - _expand(e) - { - var x = (e.pageX || e.clientX + (document.documentElement.scrollLeft ? - document.documentElement.scrollLeft : - document.body.scrollLeft)) - this.offsetLeft; - var y = (e.pageY || e.clientY + (document.documentElement.scrollTop ? - document.documentElement.scrollTop : - document.body.scrollTop)) - this.offsetTop; + this.resize( + this._width + x - this._dragX, + this._height + y - this._dragY + ); + } - - this.resize(this._width + x -this._dragX, this._height + y - this._dragY); - } + _stopExpanding() { + this._expanding = false; + this.style.cursor = ""; + this._width = this.clientWidth; + this._height = this.clientHeight; + document.onselectstart = function () { + return true; + }; + } - _stopExpanding() - { - this._expanding = false; - this.style.cursor = ""; - this._width = this.clientWidth; - this._height = this.clientHeight; - document.onselectstart = function() {return true}; - } + setLoading(visible) { + if (this.footer) + for (var i = 0; i < this.footer.children.length; i++) + if (this.footer.children[i].nodeName == "BUTTON") + this.footer.children[i].disabled = visible; - setLoading(visible) - { - if (this.footer) - for(var i = 0; i < this.footer.children.length; i++) - if (this.footer.children[i].nodeName == "BUTTON") - this.footer.children[i].disabled = visible; + if (visible) + this.loading.classList.add(this.customClass + "-loading-visible"); + else this.loading.classList.remove(this.customClass + "-loading-visible"); - if (visible) - this.loading.classList.add(this.customClass + "-loading-visible"); - else - this.loading.classList.remove(this.customClass + "-loading-visible"); + return this; + } - return this; - } + center() { + this._updateSize(); + return this.move( + window.pageXOffset + window.innerWidth / 2 - this.offsetWidth / 2, + window.pageYOffset + window.innerHeight / 2 - this.offsetHeight / 2 + ); + } - center() - { - this._updateSize(); - return this.move(window.pageXOffset + (window.innerWidth / 2) - (this.offsetWidth / 2), - window.pageYOffset + (window.innerHeight / 2) - (this.offsetHeight / 2)); - } + setVisible(visible) { + if (visible == this.visible) return; - setVisible(visible) - { + this.visible = visible; - if (visible == this.visible) - return; + if (visible) { + this.classList.add(this.customClass + "-visible"); - this.visible = visible; - - if (visible) - { - this.classList.add(this.customClass + "-visible"); - - if (this.background) - { - this.background.setVisible(true); + if (this.background) { + this.background.setVisible(true); + } + //else + if (!this._shown) { + this._updateSize(); + this._shown = true; + } - } - //else - if (!this._shown) - { - this._updateSize(); - this._shown = true; - } + this.setFocus(true); - this.setFocus(true); + this._updateSize(); + } else { + this._updateSize(); - this._updateSize(); + this.classList.remove(this.customClass + "-visible"); + this.classList.remove(this.customClass + "-active"); - } - else - { - this._updateSize(); + if (this.background) this.background.setVisible(false); - this.classList.remove(this.customClass + "-visible"); - this.classList.remove(this.customClass + "-active"); + //this.modal.classList.remove(this.customClass + "-modal-background-visible"); - if (this.background) - this.background.setVisible(false); + this.setFocus(false); - //this.modal.classList.remove(this.customClass + "-modal-background-visible"); + var i = IUI._nav_list.indexOf(this); + if (i > -1) IUI._nav_list.splice(i, 1); - this.setFocus(false); - - var i = IUI._nav_list.indexOf(this); - if (i > -1) - IUI._nav_list.splice(i, 1); - - /* + /* IUI._nav_list.pop if (IUI._previousWindow) if (IUI._previousWindow.visible) @@ -276,33 +270,37 @@ export default IUI.module(class IUIDialog extends IUIWindow else window.location.hash = ""; */ - } + } - this._emit("visible", {visible}); + this._emit("visible", { visible }); - return this; - } - - hide() - { - this.setVisible(false); - return this; - } - - show() - { - this.setVisible(true); - return this; - } -}); + return this; + } + + hide() { + this.setVisible(false); + return this; + } + + show() { + this.setVisible(true); + return this; + } + } +); document.addEventListener("keydown", function (e) { - if ( e.keyCode === 27 ) { // ESC - var dialogs = IUI.registry.filter(function(o){ return ( o instanceof IUIDialog); }).filter(function(x){return x.focus;}); - for(var i = 0; i < dialogs.length; i++) - dialogs[i].hide(); - } -}) + if (e.keyCode === 27) { + // ESC + var dialogs = IUI.registry + .filter(function (o) { + return o instanceof IUIDialog; + }) + .filter(function (x) { + return x.focus; + }); + for (var i = 0; i < dialogs.length; i++) dialogs[i].hide(); + } +}); - -//IUI.module("dialog", IUIDialog, function(el, modal, properties){ return new IUIDialog(el, modal, properties);}); \ No newline at end of file +//IUI.module("dialog", IUIDialog, function(el, modal, properties){ return new IUIDialog(el, modal, properties);}); diff --git a/src/UI/DropDown.js b/src/UI/DropDown.js index 4c0e67e..6993920 100644 --- a/src/UI/DropDown.js +++ b/src/UI/DropDown.js @@ -1,48 +1,45 @@ import IUIElement from "../Core/IUIElement.js"; import { IUI } from "../Core/IUI.js"; -export default IUI.module(class DropDown extends IUIElement { +export default IUI.module( + class DropDown extends IUIElement { constructor() { - super({"direction": "down" }); + super({ direction: "down" }); - var self = this; + var self = this; - this._register("visible"); + this._register("visible"); - this.visible = false; + this.visible = false; - // this.classList.add(this.cssClass + "-" + this.direction); + // this.classList.add(this.cssClass + "-" + this.direction); - this.menu = this.getElementsByClassName(this.cssClass + "-menu")[0]; + this.menu = this.getElementsByClassName(this.cssClass + "-menu")[0]; + //this.arrow = document.createElement("div"); + //this.arrow.className = this.customClass + "-arrow"; - //this.arrow = document.createElement("div"); - //this.arrow.className = this.customClass + "-arrow"; + //this.el.appendChild(this.arrow); + if (this.getAttribute("fixed")) { + this._fixed = true; + document.body.appendChild(this.menu); + } - //this.el.appendChild(this.arrow); + //this.el.appendChild(this.menu); - if (this.getAttribute("fixed")) - { - this._fixed = true; - document.body.appendChild(this.menu); - } + this.addEventListener("click", function (e) { + var t = e.target; + do { + if (t == self.menu) return; + } while ((t = t.parentElement)); - //this.el.appendChild(this.menu); + self.setVisible(!self.visible); + }); - this.addEventListener("click", function (e) { - var t = e.target - do { - if (t == self.menu) - return; - } while (t = t.parentElement) + IUI._menus.push(this); - self.setVisible(!self.visible); - }); - - IUI._menus.push(this); - - /* + /* document.body.addEventListener("click", function(e) { if (!self.visible) @@ -62,135 +59,128 @@ export default IUI.module(class DropDown extends IUIElement { } set fixed(value) { - if (value) - document.body.appendChild(this.menu); - this._fixed = value; + if (value) document.body.appendChild(this.menu); + this._fixed = value; } get fixed() { - return this._fixed; + return this._fixed; } hide() { - return this.setVisible(false); + return this.setVisible(false); } show() { - return this.setVisible(true); + return this.setVisible(true); } getOffset() { - var el = this; - var _x = 0; - var _y = 0; - while (!isNaN(el.offsetLeft) && !isNaN(el.offsetTop)) { - _x += el.offsetLeft - el.scrollLeft; - _y += el.offsetTop - el.scrollTop; - el = el.offsetParent; - } - _x += window.pageXOffset; - _y += window.pageYOffset; + var el = this; + var _x = 0; + var _y = 0; + while (!isNaN(el.offsetLeft) && !isNaN(el.offsetTop)) { + _x += el.offsetLeft - el.scrollLeft; + _y += el.offsetTop - el.scrollTop; + el = el.offsetParent; + } + _x += window.pageXOffset; + _y += window.pageYOffset; - return { top: _y, left: _x, width: this.clientWidth, height: this.clientHeight }; + return { + top: _y, + left: _x, + width: this.clientWidth, + height: this.clientHeight, + }; } set data(value) { - // console.log("DD", value); - super.data = value; -// console.log("VV", this._uiBindings, this._dataBindings); + // console.log("DD", value); + super.data = value; + // console.log("VV", this._uiBindings, this._dataBindings); } setVisible(visible) { - this.visible = visible; + this.visible = visible; - if (!this.fixed) { - if (visible) { - this.menu.classList.add(this.cssClass + "-menu-visible"); - this.classList.add(this.cssClass + "-visible"); - } - else { - this.menu.classList.remove(this.cssClass + "-menu-visible"); - this.classList.remove(this.cssClass + "-visible"); - } + if (!this.fixed) { + if (visible) { + this.menu.classList.add(this.cssClass + "-menu-visible"); + this.classList.add(this.cssClass + "-visible"); + } else { + this.menu.classList.remove(this.cssClass + "-menu-visible"); + this.classList.remove(this.cssClass + "-visible"); } - else { - if (visible) { - var rect = this.getBoundingClientRect(); + } else { + if (visible) { + var rect = this.getBoundingClientRect(); - var menuWidth = this.menu.clientWidth; - var menuHeight = this.menu.clientHeight; + var menuWidth = this.menu.clientWidth; + var menuHeight = this.menu.clientHeight; - if (menuWidth > document.body.clientWidth) { - menuWidth = (document.body.clientWidth - 10); - this.menu.style.width = menuWidth + "px"; - } + if (menuWidth > document.body.clientWidth) { + menuWidth = document.body.clientWidth - 10; + this.menu.style.width = menuWidth + "px"; + } + var startX = rect.left + (rect.width / 2 - menuWidth / 2); - var startX = rect.left + (rect.width / 2 - menuWidth / 2); + if (this.direction == "up") { + // var menuTop = rect.top - this.arrow.clientHeight - this.menu.clientHeight; + var menuTop = rect.top - this.menu.clientHeight; + if (menuTop < 0) { + menuTop = 5; + // this.menu.style.height = (rect.top - this.arrow.clientHeight ) + "px"; + this.menu.style.height = rect.top + "px"; - if (this.direction == "up") { - // var menuTop = rect.top - this.arrow.clientHeight - this.menu.clientHeight; - var menuTop = rect.top - this.menu.clientHeight; + this.menu.classList.add(this.cssClass + "-menu-oversized"); + } else + this.menu.classList.remove(this.cssClass + "-menu-oversized"); - if (menuTop < 0) { - menuTop = 5; - // this.menu.style.height = (rect.top - this.arrow.clientHeight ) + "px"; - this.menu.style.height = (rect.top) + "px"; + //this.arrow.classList.remove(this.customClass + "-arrow-down"); + //this.arrow.classList.add(this.customClass + "-arrow-up"); + //this.arrow.style.top = ( rect.top - this.arrow.clientHeight ) + "px"; + this.menu.style.top = menuTop + "px"; + } else { + //var menuTop = rect.top + rect.height + this.arrow.clientHeight; + var menuTop = rect.top + rect.height; - this.menu.classList.add(this.cssClass + "-menu-oversized"); - } - else - this.menu.classList.remove(this.cssClass + "-menu-oversized"); + //this.arrow.classList.remove(this.customClass + "-arrow-up"); + //this.arrow.classList.add(this.customClass + "-arrow-down"); + //this.arrow.style.top = ( rect.top + rect.height ) + "px"; + this.menu.style.top = menuTop + "px"; - //this.arrow.classList.remove(this.customClass + "-arrow-down"); - //this.arrow.classList.add(this.customClass + "-arrow-up"); - //this.arrow.style.top = ( rect.top - this.arrow.clientHeight ) + "px"; - this.menu.style.top = (menuTop) + "px"; - } - else { - //var menuTop = rect.top + rect.height + this.arrow.clientHeight; - var menuTop = rect.top + rect.height; - - //this.arrow.classList.remove(this.customClass + "-arrow-up"); - //this.arrow.classList.add(this.customClass + "-arrow-down"); - //this.arrow.style.top = ( rect.top + rect.height ) + "px"; - - this.menu.style.top = menuTop + "px"; - - if (menuTop + menuHeight > document.body.clientHeight) { - this.menu.style.height = (document.body.clientHeight - menuTop) + "px"; - this.menu.classList.add(this.cssClass + "-menu-oversized"); - } - else { - this.menu.classList.remove(this.cssClass + "-menu-oversized"); - } - } - - if (startX < 0) - startX = 5; - else if (startX + menuWidth > document.body.clientWidth) - startX = document.body.clientWidth - menuWidth - 5; - - - //this.arrow.style.left = (rect.left + (rect.width/2 - this.arrow.clientWidth/2)) + "px"; - this.menu.style.left = startX + "px"; - - //this.arrow.classList.add(this.customClass + "-arrow-visible"); - this.menu.classList.add(this.cssClass + "-menu-visible"); - this.classList.add(this.cssClass + "-visible"); - - } - else { - //this.arrow.classList.remove(this.customClass + "-arrow-visible"); - this.menu.classList.remove(this.cssClass + "-menu-visible"); - this.classList.remove(this.cssClass + "-visible"); + if (menuTop + menuHeight > document.body.clientHeight) { + this.menu.style.height = + document.body.clientHeight - menuTop + "px"; + this.menu.classList.add(this.cssClass + "-menu-oversized"); + } else { + this.menu.classList.remove(this.cssClass + "-menu-oversized"); } + } + + if (startX < 0) startX = 5; + else if (startX + menuWidth > document.body.clientWidth) + startX = document.body.clientWidth - menuWidth - 5; + + //this.arrow.style.left = (rect.left + (rect.width/2 - this.arrow.clientWidth/2)) + "px"; + this.menu.style.left = startX + "px"; + + //this.arrow.classList.add(this.customClass + "-arrow-visible"); + this.menu.classList.add(this.cssClass + "-menu-visible"); + this.classList.add(this.cssClass + "-visible"); + } else { + //this.arrow.classList.remove(this.customClass + "-arrow-visible"); + this.menu.classList.remove(this.cssClass + "-menu-visible"); + this.classList.remove(this.cssClass + "-visible"); } + } - this._emit("visible", { visible}); - - return this; + this._emit("visible", { visible }); + return this; } -}); \ No newline at end of file + } +); diff --git a/src/UI/Form.js b/src/UI/Form.js index af49cd1..0e5f6ea 100644 --- a/src/UI/Form.js +++ b/src/UI/Form.js @@ -3,46 +3,45 @@ import { IUI } from "../Core/IUI.js"; import Tabs from "./Tabs.js"; import Tab from "./Tab.js"; -export default IUI.module(class Form extends IUIElement { +export default IUI.module( + class Form extends IUIElement { constructor() { - super(); + super(); } create() { + this._container = document.createElement("div"); + this._container.className = "container"; - this._container = document.createElement("div"); - this._container.className = "container"; + this._actions = document.createElement("div"); + this._actions.className = "actions"; - this._actions = document.createElement("div"); - this._actions.className = "actions"; + this._save = document.createElement("button"); + this._save.className = "button"; + this._save.innerHTML = this.hasAttribute("save") + ? this.getAttribute("save") + : "Save"; + this._cancel = document.createElement("button"); + this._cancel.className = "button"; + this._cancel = this.hasAttribute("cancel") + ? this.getAttribute("cancel") + : "Cancel"; - - this._save = document.createElement("button"); - this._save.className = "button"; - this._save.innerHTML = this.hasAttribute("save") ? this.getAttribute("save") : "Save"; - this._cancel = document.createElement("button"); - this._cancel.className = "button"; - this._cancel = this.hasAttribute("cancel") ? this.getAttribute("cancel") : "Cancel"; + this._save.addEventListener("click", x => {}); - this._save.addEventListener("click", (x) => { + this._cancel.addEventListener("click", x => { + window.router.back(); + }); - }); + this._actions.appendChild(this._save); + this._actions.appendChild(this._cancel); - this._cancel.addEventListener("click", (x) => { - window.router.back(); - }); - - - this._actions.appendChild(this._save); - this._actions.appendChild(this._cancel); - - this.appendChild(this._container); - this.appendChild(this._actions); - + this.appendChild(this._container); + this.appendChild(this._actions); } set layout(value) { - /* + /* mode:tabs, tabs: [ @@ -52,50 +51,48 @@ export default IUI.module(class Form extends IUIElement { ]} ] */ - // render layout - if (value.mode == "tabs") { - for (var i = 0; i < this.layout.tabs.length; i++) { - // render tab - this.mode = "tabs"; - this._tabs = new Tabs(); - var tab = new Tab(); - this._tabs.add(tab); - for (var j = 0; j < this._tabs.length; j++) { - - } - this.layout.tasbs[i].content - } + // render layout + if (value.mode == "tabs") { + for (var i = 0; i < this.layout.tabs.length; i++) { + // render tab + this.mode = "tabs"; + this._tabs = new Tabs(); + var tab = new Tab(); + this._tabs.add(tab); + for (var j = 0; j < this._tabs.length; j++) {} + this.layout.tasbs[i].content; } + } } set data(value) { - var self = this; + var self = this; - if (value == null) - this._input.value = ""; - else { - this._input.value = value[this._field]; + if (value == null) this._input.value = ""; + else { + this._input.value = value[this._field]; - if (value.on) - value.on("modified", (propertyName, value) => { - if (propertyName == self._field) - self._input.value = value[self._field]; - }); - } - //super.data = data; + if (value.on) + value.on("modified", (propertyName, value) => { + if (propertyName == self._field) + self._input.value = value[self._field]; + }); + } + //super.data = data; } get layout() { - return this._input.value; + return this._input.value; } set layout(value) { - // load layout + // load layout - for (var i = 0; i < value.length; i++) { - // [{tab: },{}] - } + for (var i = 0; i < value.length; i++) { + // [{tab: },{}] + } - this._input.value = value; + this._input.value = value; } -}); \ No newline at end of file + } +); diff --git a/src/UI/Grid.js b/src/UI/Grid.js index dd5f2e6..7f63ef0 100644 --- a/src/UI/Grid.js +++ b/src/UI/Grid.js @@ -1,204 +1,205 @@ import IUIElement from "../Core/IUIElement.js"; import { IUI } from "../Core/IUI.js"; -export default IUI.module(class Grid extends IUIElement { - constructor() - { - super({index: "iid", - layout: {content: {field: "name", formatter: null}, - title: {field: "content", formatter: null}, - footer: {field: "footer", formatter: null}}}); +export default IUI.module( + class Grid extends IUIElement { + constructor() { + super({ + index: "iid", + layout: { + content: { field: "name", formatter: null }, + title: { field: "content", formatter: null }, + footer: { field: "footer", formatter: null }, + }, + }); - this._register("add"); - this._register("layout"); - this._register("contextmenu"); + this._register("add"); + this._register("layout"); + this._register("contextmenu"); - this.windows = []; - } + this.windows = []; + } create() { - for (var i = 0; i < this.children.length; i++) - this.add(this.children[i]); + for (var i = 0; i < this.children.length; i++) this.add(this.children[i]); } - setGridLayout(style) - { - this.style.grid = style; - this._emit("layout", style, this); - return this; - } + setGridLayout(style) { + this.style.grid = style; + this._emit("layout", style, this); + return this; + } add(win) { - let self = this; + let self = this; - win.setAttribute("draggable", true); - win.addEventListener("dragstart", function (e) { - e.dataTransfer.effectAllowed = 'move'; - self._dragItem = this; + win.setAttribute("draggable", true); + win.addEventListener("dragstart", function (e) { + e.dataTransfer.effectAllowed = "move"; + self._dragItem = this; - this.classList.add(self.cssClass + '-window-drag'); + this.classList.add(self.cssClass + "-window-drag"); + }); - }); + win.addEventListener("dragover", function (e) { + if (self._dragItem) { + e.preventDefault(); + this.classList.add(self.cssClass + "-window-over"); + e.dataTransfer.dropEffect = "move"; // See the section on the DataTransfer object. + } + }); - win.addEventListener("dragover", function (e) { - if (self._dragItem) { - e.preventDefault(); - this.classList.add(self.cssClass + '-window-over'); - e.dataTransfer.dropEffect = 'move'; // See the section on the DataTransfer object. - } - }); + win.addEventListener("dragleave", function (e) { + if (e.preventDefault) e.preventDefault(); - win.addEventListener("dragleave", function (e) { + this.classList.remove(self.cssClass + "-window-over"); + }); - if (e.preventDefault) - e.preventDefault(); + win.addEventListener("dragend", function (e) { + this.classList.remove(self.cssClass + "-window-drag"); + self._dragItem = null; + }); - this.classList.remove(self.cssClass + "-window-over"); - }); + win.addEventListener("drop", function (e) { + self._dragItem.classList.remove(self.cssClass + "-window-drag"); + e.currentTarget.classList.remove(self.cssClass + "-window-over"); - win.addEventListener("dragend", function (e) { - this.classList.remove(self.cssClass + '-window-drag'); - self._dragItem = null; - }); + for (var i = 0; i < self.children.length; i++) + if (self.children[i] == self._dragItem) { + self.insertBefore(self._dragItem, e.currentTarget.nextSibling); + break; + } else if (self.children[i] == e.currentTarget) { + self.insertBefore(self._dragItem, e.currentTarget); + break; + } - win.addEventListener("drop", function (e) { - self._dragItem.classList.remove(self.cssClass + "-window-drag"); - e.currentTarget.classList.remove(self.cssClass + "-window-over"); + self._dragItem = null; + }); - for (var i = 0; i < self.children.length; i++) - if (self.children[i] == self._dragItem) { - self.insertBefore(self._dragItem, e.currentTarget.nextSibling); - break; - } - else if (self.children[i] == e.currentTarget) { - self.insertBefore(self._dragItem, e.currentTarget); - break; - } + win.addEventListener("contextmenu", function (e) { + self.selected = win; + self._emit("contextmenu", { win }); + }); - self._dragItem = null; - }); - - win.addEventListener("contextmenu", function (e) { - self.selected = win; - self._emit("contextmenu", { win }); - }); - - win.on("close", function () { - self.remove(win); - }); + win.on("close", function () { + self.remove(win); + }); } - addOld(item) - { + addOld(item) { + var self = this; - var self = this; + var li = item; //document.createElement("li"); + //li.setAttribute("data-id", item[this.index]); - var li = item;//document.createElement("li"); - //li.setAttribute("data-id", item[this.index]); + li.setAttribute("draggable", true); - li.setAttribute("draggable", true); + li.addEventListener("dragstart", function (e) { + e.dataTransfer.effectAllowed = "move"; + self._dragItem = this; - li.addEventListener("dragstart", function(e){ - e.dataTransfer.effectAllowed = 'move'; - self._dragItem = this; + this.classList.add(self.cssClass + "-window-drag"); + }); - this.classList.add(self.cssClass + '-window-drag'); + li.addEventListener("dragover", function (e) { + if (self._dragItem) { + e.preventDefault(); + this.classList.add(self.cssClass + "-window-over"); + e.dataTransfer.dropEffect = "move"; // See the section on the DataTransfer object. + } + }); - }); + li.addEventListener("dragleave", function (e) { + if (e.preventDefault) e.preventDefault(); - li.addEventListener("dragover", function(e){ - if (self._dragItem) - { - e.preventDefault(); - this.classList.add(self.cssClass + '-window-over'); - e.dataTransfer.dropEffect = 'move'; // See the section on the DataTransfer object. - } - }); + this.classList.remove(self.cssClass + "-window-over"); + }); - li.addEventListener("dragleave", function(e){ + li.addEventListener("dragend", function (e) { + this.classList.remove(self.cssClass + "-window-drag"); + self._dragItem = null; + }); - if (e.preventDefault) - e.preventDefault(); + li.addEventListener("drop", function (e) { + self._dragItem.classList.remove(self.cssClass + "-window-drag"); + e.currentTarget.classList.remove(self.cssClass + "-window-over"); - this.classList.remove(self.cssClass + "-window-over"); - }); + for (var i = 0; i < self.children.length; i++) + if (self.children[i] == self._dragItem) { + self.insertBefore(self._dragItem, e.currentTarget.nextSibling); + break; + } else if (self.children[i] == e.currentTarget) { + self.insertBefore(self._dragItem, e.currentTarget); + break; + } - li.addEventListener("dragend", function(e){ - this.classList.remove(self.cssClass + '-window-drag'); - self._dragItem = null; - }); + self._dragItem = null; + }); - li.addEventListener("drop", function(e){ - self._dragItem.classList.remove(self.cssClass + "-window-drag"); - e.currentTarget.classList.remove(self.cssClass + "-window-over"); + li.addEventListener("contextmenu", function (e) { + self.selected = win; + self._emit("contextmenu", item, win, this, e); + }); - for(var i = 0; i < self.children.length; i++) - if (self.children[i] == self._dragItem) - { - self.insertBefore(self._dragItem, e.currentTarget.nextSibling); - break; - } - else if (self.children[i] == e.currentTarget) - { - self.insertBefore(self._dragItem, e.currentTarget); - break; - } - - self._dragItem = null; - }); + var win = iui(li).window({ + draggable: false, + title: this.layout.title.formatter + ? this.layout.title.formatter(item[this.layout.title.field], item) + : item[this.layout.title.field], + }); - li.addEventListener("contextmenu", function(e){ - self.selected = win; - self._emit("contextmenu", item, win, this, e); - }); + var body = this.layout.content.formatter + ? this.layout.content.formatter( + item[this.layout.content.field], + item, + win, + this + ) + : item[this.layout.content.field]; + if (body instanceof HTMLElement) win.body.appendChild(body); + else win.body.innerHTML = body; - var win = iui(li).window({draggable: false, title: this.layout.title.formatter ? this.layout.title.formatter(item[this.layout.title.field], item) : item[this.layout.title.field]}); + var footer = this.layout.footer.formatter + ? this.layout.footer.formatter( + item[this.layout.footer.field], + item, + win, + this + ) + : item[this.layout.footer.field]; + if (footer != null) { + var fe = document.createElement("div"); + fe.className = "window-footer"; - var body = this.layout.content.formatter ? this.layout.content.formatter(item[this.layout.content.field], item, win, this) : item[this.layout.content.field]; - if (body instanceof HTMLElement) - win.body.appendChild(body); - else - win.body.innerHTML = body; + if (footer instanceof HTMLElement) fe.appendChild(footer); + else fe.innerHTML = footer; - var footer = this.layout.footer.formatter ? this.layout.footer.formatter(item[this.layout.footer.field], item, win, this) : item[this.layout.footer.field]; - if (footer != null) - { - var fe = document.createElement("div"); - fe.className = "window-footer"; + win.appendChild(fe); + } - if (footer instanceof HTMLElement) - fe.appendChild(footer); - else - fe.innerHTML = footer; + win.on("close", function () { + self.remove(win); + }); - win.appendChild(fe); - } + this.appendChild(li); - win.on("close", function(){ - self.remove(win); - }); + win.control = item; - this.appendChild(li); + this.windows.push(win); - win.control = item; + this._emit("add", item, win, this); - this.windows.push(win); + return this; + //win._updateSize(); + } - this._emit("add", item, win, this); + remove(win) { + win.destroy(); + this.removeChild(win); + } - return this; - //win._updateSize(); - } - - remove(win) - { - win.destroy(); - this.removeChild(win); - } - - clear() - { - while (this.children.length > 0) - this.removeChild(this.children[0]); - } -}); \ No newline at end of file + clear() { + while (this.children.length > 0) this.removeChild(this.children[0]); + } + } +); diff --git a/src/UI/Input.js b/src/UI/Input.js index aa69b14..692f65e 100644 --- a/src/UI/Input.js +++ b/src/UI/Input.js @@ -1,163 +1,159 @@ import IUIElement from "../Core/IUIElement.js"; import { IUI } from "../Core/IUI.js"; -export default IUI.module(class Input extends IUIElement { +export default IUI.module( + class Input extends IUIElement { constructor() { - super({ formatter: (x) => x }); - this._register("input"); - this._register("change"); + super({ formatter: x => x }); + this._register("input"); + this._register("change"); } _checkValidity() { - if (this.validate != null) { - try { - let valid = this.validate.apply(this); - if (!valid) { - this.setAttribute("invalid", ""); - this.classList.add(this.cssClass + "-invalid"); - return false; - } - else { - this.removeAttribute("invalid"); - this.classList.remove(this.cssClass + "-invalid"); - return true; - } - } - catch (e) { - console.log("Validation Error", e); - return false; - } + if (this.validate != null) { + try { + let valid = this.validate.apply(this); + if (!valid) { + this.setAttribute("invalid", ""); + this.classList.add(this.cssClass + "-invalid"); + return false; + } else { + this.removeAttribute("invalid"); + this.classList.remove(this.cssClass + "-invalid"); + return true; + } + } catch (e) { + console.log("Validation Error", e); + return false; } + } - return true; + return true; } - get caption(){ - return this.getAttribute("caption");// this._span.innerHTML; + get caption() { + return this.getAttribute("caption"); // this._span.innerHTML; } - set caption(value){ - this.setAttribute("caption", value); - this._span.innerHTML = value; + set caption(value) { + this.setAttribute("caption", value); + this._span.innerHTML = value; } create() { + this.isAuto = this.hasAttribute("auto"); + this.field = this.getAttribute("field"); - this.isAuto = this.hasAttribute("auto"); - this.field = this.getAttribute("field"); - - - if (this.field != null) - { - this.setAttribute(":data", `d['${this.field}']`) - this.setAttribute("async:revert", `d['${this.field}'] = await this.getData()`); - } + if (this.field != null) { + this.setAttribute(":data", `d['${this.field}']`); + this.setAttribute( + "async:revert", + `d['${this.field}'] = await this.getData()` + ); + } - this._span = document.createElement("span"); - this._span.innerHTML = this.getAttribute("caption"); + this._span = document.createElement("span"); + this._span.innerHTML = this.getAttribute("caption"); - this._input = document.createElement("input"); - this._input.placeholder = " "; + this._input = document.createElement("input"); + this._input.placeholder = " "; - let self = this; + let self = this; - this._input.addEventListener("input", () => { - if (self._checkValidity() && self.isAuto) - this.revert(); - //self.data[self.field] = self.value; + this._input.addEventListener("input", () => { + if (self._checkValidity() && self.isAuto) this.revert(); + //self.data[self.field] = self.value; + }); + + this._input.addEventListener("change", () => { + self._emit("change", { value: self.value }); + }); + + this.type = this.hasAttribute("type") + ? this.getAttribute("type").toLowerCase() + : "text"; + + this.accept = this.getAttribute("accept"); + + this.appendChild(this._input); + this.appendChild(this._span); + + if (this.type == "password") { + this._eye = document.createElement("div"); + this._eye.className = this.cssClass + "-eye"; + this._eye.addEventListener("mousedown", () => { + self._input.type = "text"; + self._eye.classList.add(self.cssClass + "-eye-active"); + }); + this._eye.addEventListener("mouseup", () => { + self._input.type = "password"; + self._eye.classList.remove(self.cssClass + "-eye-active"); }); - this._input.addEventListener("change", () => { - self._emit("change", { value: self.value }); - }); - - this.type = this.hasAttribute("type") ? this.getAttribute("type").toLowerCase() : "text"; - - this.accept = this.getAttribute("accept"); - - this.appendChild(this._input); - this.appendChild(this._span); - - if (this.type == "password") - { - this._eye = document.createElement("div"); - this._eye.className = this.cssClass + "-eye"; - this._eye.addEventListener("mousedown", ()=>{ - self._input.type = "text"; - self._eye.classList.add(self.cssClass + "-eye-active"); - }); - this._eye.addEventListener("mouseup", ()=>{ - self._input.type = "password"; - self._eye.classList.remove(self.cssClass + "-eye-active"); - }); - - this.appendChild(this._eye); - - } - + this.appendChild(this._eye); + } } async updateAttributes(deep, parentData) { - await super.updateAttributes(deep, parentData); - //this._input.type = this.type; - //this._input.value = this.value; + await super.updateAttributes(deep, parentData); + //this._input.type = this.type; + //this._input.value = this.value; } set type(value) { - this._input.type = value; + this._input.type = value; } get type() { - return this._input.type; + return this._input.type; } - set accept(value){ - this._input.accept = value; + set accept(value) { + this._input.accept = value; } get accept() { - return this._input.accept; + return this._input.accept; } set disabled(value) { - if (value) - this.setAttribute("disabled", "disabled"); - else - this.removeAttribute("disabled"); + if (value) this.setAttribute("disabled", "disabled"); + else this.removeAttribute("disabled"); - this._input.disabled = value; + this._input.disabled = value; } get disabled() { - return this._input.disabled; + return this._input.disabled; } set enabled(value) { - this.disabled = !value; + this.disabled = !value; } get enabled() { - return !this._input.disabled; + return !this._input.disabled; } async setData(value) { + await super.setData(value); - await super.setData(value); + if (this.type == "checkbox") this._input.checked = value; + else if (this.type == "date") + this._input.value = + value != null ? value.toISOString().slice(0, 10) : value; + else if ( + this.type == null || + this.type == "text" || + this.type == "search" || + this.type == "password" + ) + this._input.value = value == null ? "" : value; + else this._input.value = value; - if (this.type == "checkbox") - this._input.checked = value; - else if (this.type == "date") - this._input.value = value != null ? value.toISOString().slice(0, 10) : value; - else if (this.type == null || this.type == "text" || this.type == "search" || this.type == "password") - this._input.value = value == null ? '' : value; - else - this._input.value = value; + if (this._checkValidity() && this.isAuto) this.revert(); - if (this._checkValidity() && this.isAuto) - this.revert(); - - - /* + /* await super.setData(value); if (value != null && this.field != null) this.value = value[this.field]; @@ -166,40 +162,30 @@ export default IUI.module(class Input extends IUIElement { */ } - // modified(name, value) { // if (name == this.field) { // this.value = value; // } // } - async getData(){ - if (this.type == "checkbox") - return this._input.checked; - else if (this.type == "date") - return new Date(this._input.value); - else if (this.type == "file") - return new Uint8Array(await this._input.files[0].arrayBuffer()); - else - return this._input.value; + async getData() { + if (this.type == "checkbox") return this._input.checked; + else if (this.type == "date") return new Date(this._input.value); + else if (this.type == "file") + return new Uint8Array(await this._input.files[0].arrayBuffer()); + else return this._input.value; } - get data() - { - if (this.type == "checkbox") - return this._input.checked; - else if (this.type == "date") - return new Date(this._input.value); - else if (this.type == "file") - { - return new Promise((resolve)=>{ - this._input.files[0].arrayBuffer().then((x)=>{ - resolve(new Uint8Array(x)); - }); - }); - } - else - return this._input.value; + get data() { + if (this.type == "checkbox") return this._input.checked; + else if (this.type == "date") return new Date(this._input.value); + else if (this.type == "file") { + return new Promise(resolve => { + this._input.files[0].arrayBuffer().then(x => { + resolve(new Uint8Array(x)); + }); + }); + } else return this._input.value; } /* @@ -221,7 +207,7 @@ export default IUI.module(class Input extends IUIElement { // if (this.type == "checkbox") // this._input.checked = value; - // else if (this.type == "date") + // else if (this.type == "date") // this._input.value = value != null ? value.toISOString().slice(0, 10) : value; // else if (this.type == null || this.type == "text") // this._input.value = value == null ? '' : value; @@ -230,4 +216,5 @@ export default IUI.module(class Input extends IUIElement { // this._checkValidity(); // } -}); \ No newline at end of file + } +); diff --git a/src/UI/Location.js b/src/UI/Location.js index 5e79073..77a6cb3 100644 --- a/src/UI/Location.js +++ b/src/UI/Location.js @@ -1,39 +1,37 @@ - import IUIElement from "../Core/IUIElement.js"; import { IUI } from "../Core/IUI.js"; -import Link from '../Router/Link.js'; +import Link from "../Router/Link.js"; -export default IUI.module(class Location extends IUIElement { +export default IUI.module( + class Location extends IUIElement { constructor() { - super(); + super(); } create() { - let self = this; - window.router.on("route", (e) => { + let self = this; + window.router.on("route", e => { + self.textContent = ""; // clear everything - self.textContent = ''; // clear everything + let html = ""; + let route = e.route; - - let html = ""; - let route = e.route; - - var current = document.createElement("div"); - current.innerHTML = route.caption; + var current = document.createElement("div"); + current.innerHTML = route.caption; - self.append(current); + self.append(current); - while (route = route.parent) { + while ((route = route.parent)) { + var sep = document.createElement("span"); + self.prepend(sep); - var sep = document.createElement("span"); - self.prepend(sep); - - let link = new Link(); - link.link = route.link; - link.innerHTML = route.caption; + let link = new Link(); + link.link = route.link; + link.innerHTML = route.caption; - self.prepend(link); - } - }); + self.prepend(link); + } + }); } -}); \ No newline at end of file + } +); diff --git a/src/UI/Login.js b/src/UI/Login.js index 01e066d..a00fec7 100644 --- a/src/UI/Login.js +++ b/src/UI/Login.js @@ -1,14 +1,12 @@ import IUIElement from "../Core/IUIElement.js"; import { IUI } from "../Core/IUI.js"; -export default IUI.module(class Login extends IUIElement -{ - constructor() - { - super(); +export default IUI.module( + class Login extends IUIElement { + constructor() { + super(); - - var template = `
Login
`; - - this.innerHTML = template; + this.innerHTML = template; + this._message = this.querySelector("div[name='message']"); - this._message = this.querySelector("div[name='message']"); + this._usernameText = this.querySelector("span[name='spnUsername']"); + this._passwordText = this.querySelector("span[name='spnPassword']"); + this._rememberText = this.querySelector("label[name='labelRemember']"); + this._username = this.querySelector("input[name='txtUsername']"); + this._password = this.querySelector("input[name='txtPassword']"); + this._remember = this.querySelector("input[name='remember']"); + this._login = this.querySelector("button[name='login']"); - this._usernameText = this.querySelector("span[name='spnUsername']"); - this._passwordText = this.querySelector("span[name='spnPassword']"); - this._rememberText = this.querySelector("label[name='labelRemember']"); - this._username = this.querySelector("input[name='txtUsername']"); - this._password = this.querySelector("input[name='txtPassword']"); - this._remember = this.querySelector("input[name='remember']"); - this._login = this.querySelector("button[name='login']"); + var self = this; - var self = this; + this._password.addEventListener("keydown", e => { + if (e.keyCode == 13) self.login(); + }); - this._password.addEventListener("keydown", (e) => { if (e.keyCode == 13) self.login(); }); + if (this.hasAttribute("message")) { + this._message.innerHTML = this.getAttribute("message"); + } - if (this.hasAttribute("message")) { - this._message.innerHTML = this.getAttribute("message"); - } + if (this.hasAttribute("username")) { + this._usernameText.innerHTML = this.getAttribute("username"); + } - if (this.hasAttribute("username")) { - this._usernameText.innerHTML = this.getAttribute("username"); - } + if (this.hasAttribute("password")) { + this._passwordText.innerHTML = this.getAttribute("password"); + } - if (this.hasAttribute("password")) { - this._passwordText.innerHTML = this.getAttribute("password"); - } + if (this.hasAttribute("remember")) { + this._rememberText.innerHTML = this.getAttribute("remember"); + } - if (this.hasAttribute("remember")) { - this._rememberText.innerHTML = this.getAttribute("remember"); - } + if (this.hasAttribute("login")) { + this._login.innerHTML = this.getAttribute("login"); + } - if (this.hasAttribute("login")) { - this._login.innerHTML = this.getAttribute("login"); - } + let username = this.username; // window.localStorage.getItem("iui.login.username"); + let password = this.password; // window.localStorage.getItem("iui.login.password"); + if (username != "") { + this._username.value = username; + this._password.value = password; + this._remember.checked = true; + } + this._login.addEventListener("click", () => this.login()); - let username = this.username;// window.localStorage.getItem("iui.login.username"); - let password = this.password;// window.localStorage.getItem("iui.login.password"); - if (username != "") { - this._username.value = username; - this._password.value = password; - this._remember.checked = true; - - } - - this._login.addEventListener("click", ()=>this.login()); - - - this._register("login"); - this._register("logout"); - + this._register("login"); + this._register("logout"); } login() { - let username = this._username.value; - let password = this._password.value; + let username = this._username.value; + let password = this._password.value; - if (username == "" || password == "") - return; + if (username == "" || password == "") return; - if (this._remember.checked) { - this.username = username; - this.password = password; - //window.localStorage.setItem("iui.login.username", username); - //window.localStorage.setItem("iui.login.password", password); - } - else { - window.localStorage.removeItem("iui.login.username"); - window.localStorage.removeItem("iui.login.password"); - } + if (this._remember.checked) { + this.username = username; + this.password = password; + //window.localStorage.setItem("iui.login.username", username); + //window.localStorage.setItem("iui.login.password", password); + } else { + window.localStorage.removeItem("iui.login.username"); + window.localStorage.removeItem("iui.login.password"); + } - this._emit("login", { username, password }); + this._emit("login", { username, password }); } get username() { - return window.localStorage.getItem("iui.login.username"); + return window.localStorage.getItem("iui.login.username"); } set username(value) { - return window.localStorage.setItem("iui.login.username", value); + return window.localStorage.setItem("iui.login.username", value); } get password() { - return window.localStorage.getItem("iui.login.password"); + return window.localStorage.getItem("iui.login.password"); } set password(value) { - return window.localStorage.setItem("iui.login.password", value); + return window.localStorage.setItem("iui.login.password", value); } get token() { - return window.localStorage.getItem("iui.login.token"); + return window.localStorage.getItem("iui.login.token"); } set token(value) { - return window.localStorage.setItem("iui.login.token", value); + return window.localStorage.setItem("iui.login.token", value); } - get message() { - return this._message.innerHTML; + return this._message.innerHTML; } set message(value) { - this._message.innerHTML = value; + this._message.innerHTML = value; } logout() { - window.localStorage.removeItem("iui.login.username"); - window.localStorage.removeItem("iui.login.password"); - window.localStorage.removeItem("iui.login.token"); - this._username.value = ""; - this._password.value = ""; - this._remember.checked = false; + window.localStorage.removeItem("iui.login.username"); + window.localStorage.removeItem("iui.login.password"); + window.localStorage.removeItem("iui.login.token"); + this._username.value = ""; + this._password.value = ""; + this._remember.checked = false; - this._emit("logout"); + this._emit("logout"); } - created() - { - - //if (this.hasAttribute("auto")) { - - // let username = this.username;// window.localStorage.getItem("iui.login.username"); - // let password = this.password;// window.localStorage.getItem("iui.login.password"); - // if (this.username != "") { - // this._emit("login", { username, password }); - // } - //} - + created() { + //if (this.hasAttribute("auto")) { + // let username = this.username;// window.localStorage.getItem("iui.login.username"); + // let password = this.password;// window.localStorage.getItem("iui.login.password"); + // if (this.username != "") { + // this._emit("login", { username, password }); + // } + //} } -}); \ No newline at end of file + } +); diff --git a/src/UI/Menu.js b/src/UI/Menu.js index 3480536..0e6a66c 100644 --- a/src/UI/Menu.js +++ b/src/UI/Menu.js @@ -1,196 +1,176 @@ -import { IUI } from '../Core/IUI.js'; -import IUIElement from '../Core/IUIElement.js'; -import Background from './Background.js'; -import DropDown from './DropDown.js'; +import { IUI } from "../Core/IUI.js"; +import IUIElement from "../Core/IUIElement.js"; +import Background from "./Background.js"; +import DropDown from "./DropDown.js"; export default class Menu extends IUIElement { - constructor(props) { - super(IUI.extend(props, { - index: "iid", - layout: { field: "name", formatter: null }, - visible: false, - static: false, - "target-class": "selected" - })); + constructor(props) { + super( + IUI.extend(props, { + index: "iid", + layout: { field: "name", formatter: null }, + visible: false, + static: false, + "target-class": "selected", + }) + ); - this._register("visible"); - this._register("select"); + this._register("visible"); + this._register("select"); - IUI._menus.push(this); + IUI._menus.push(this); + } + + // clear() { + // this.innerHTML = ""; + // this._uiBindings = null; + // } + + hide() { + return this.setVisible(false); + } + + //show(x, y, element) { + // return this.setVisible(true, x, y, element); + //} + + show(event) { + event.preventDefault(); + + let el = event.currentTarget; + let x = event.pageX; + let y = event.pageY; + + this.setVisible(true, x, y, el); + } + + async showModal(element) { + //super.data = this._getElementData(element); + + await super.setData(element.data); + + if (!this.background) { + this.background = document.getElementById("iui_app_background"); + + if (!this.background) { + this.background = new Background(); // document.createElement("div"); + this.background.id = "iui_app_background"; + document.body.insertAdjacentElement("afterBegin", this.background); + } } + this.background.show(); + this.classList.add(this.cssClass + "-modal"); + this.classList.add(this.cssClass + "-visible"); + var width = window.innerWidth * 0.8; + this.style.width = width + "px"; - // clear() { - // this.innerHTML = ""; - // this._uiBindings = null; - // } + this.style.top = + window.pageYOffset + + window.innerHeight / 2 - + this.offsetHeight / 2 + + "px"; // (document.body.clientHeight / 2 - this.clientHeight / 2) + "px"; + this.style.left = + window.pageXOffset + window.innerWidth / 2 - this.offsetWidth / 2 + "px"; //(document.body.clientWidth / 2 - width / 2) + "px"; - hide() { - return this.setVisible(false); + this.visible = true; + this._emit("visible", { visible: true }); + + return this; + } + + async setVisible(visible, x, y, element) { + this.visible = visible; + + if (this.target) { + if (this["target-class"] != null && this["target-class"] != "") + this.target.classList.remove(this["target-class"]); + this.target = null; } - //show(x, y, element) { - // return this.setVisible(true, x, y, element); - //} + if (visible) { + //if (element) + //let dt = super._getElementData(element); + if (element) { + //[super.data, this.target] = dt; - show(event) { - event.preventDefault(); + await this.setData(element.data); + this.target = element; - let el = event.currentTarget; - let x = event.pageX; - let y = event.pageY; + if (this["target-class"] != null && this["target-class"] != "") + this.target.classList.add(this["target-class"]); + } - this.setVisible(true, x, y, el); + this._pass = true; + + if (IUI.responsive && !this.static) return this.showModal(); + + this.classList.remove(this.cssClass + "-modal"); + + var rect = this.getBoundingClientRect(); + + if (y != null) { + if (y + rect.height > document.documentElement.clientHeight) + this.style.top = + document.documentElement.clientHeight - rect.height + "px"; + else this.style.top = y + "px"; + } + + this.classList.add(this.cssClass + "-visible"); + + if (x != null) { + if (x + rect.width > document.body.scrollWidth) + this.style.left = document.body.scrollWidth - rect.width + "px"; + //else if (x < 0) + // this.style.left = "0px"; + else this.style.left = x + "px"; + } + } else { + this.classList.remove(this.cssClass + "-visible"); + + if (this.background) this.background.hide(); + + //await super.setData({});// = {}; } + this._emit("visible", { visible }); - async showModal(element) { - - - //super.data = this._getElementData(element); - - await super.setData(element.data); - - if (!this.background) { - this.background = document.getElementById("iui_app_background"); - - if (!this.background) { - this.background = new Background();// document.createElement("div"); - this.background.id = "iui_app_background"; - document.body.insertAdjacentElement("afterBegin", this.background); - } - } - - this.background.show(); - this.classList.add(this.cssClass + "-modal"); - this.classList.add(this.cssClass + "-visible"); - - var width = (window.innerWidth * 0.8); - this.style.width = width + "px"; - - this.style.top = (window.pageYOffset + window.innerHeight / 2 - this.offsetHeight / 2) + "px"; // (document.body.clientHeight / 2 - this.clientHeight / 2) + "px"; - this.style.left = (window.pageXOffset + window.innerWidth / 2 - this.offsetWidth / 2) + "px"; //(document.body.clientWidth / 2 - width / 2) + "px"; - - - this.visible = true; - this._emit("visible", { visible: true }); - - return this; - } - - async setVisible(visible, x, y, element) { - this.visible = visible; - - if (this.target) { - if (this["target-class"] != null && this["target-class"] != "") - this.target.classList.remove(this["target-class"]); - this.target = null; - } - - if (visible) { - - //if (element) - //let dt = super._getElementData(element); - if (element) { - //[super.data, this.target] = dt; - - await this.setData(element.data); - this.target = element; - - if (this["target-class"] != null && this["target-class"] != "") - this.target.classList.add(this["target-class"]); - - } - - this._pass = true; - - if (IUI.responsive && !this.static) - return this.showModal(); - - this.classList.remove(this.cssClass + "-modal"); - - var rect = this.getBoundingClientRect(); - - if (y != null) { - if (y + rect.height > document.documentElement.clientHeight) - this.style.top = (document.documentElement.clientHeight - rect.height) + "px"; - else - this.style.top = y + "px"; - } - - this.classList.add(this.cssClass + "-visible"); - - - if (x != null) { - - if (x + rect.width > document.body.scrollWidth) - this.style.left = (document.body.scrollWidth - rect.width) + "px"; - //else if (x < 0) - // this.style.left = "0px"; - else - this.style.left = x + "px"; - - } - - - } - else { - - this.classList.remove(this.cssClass + "-visible"); - - if (this.background) - this.background.hide(); - - //await super.setData({});// = {}; - - } - - this._emit("visible", { visible }); - - return this; - } -}; + return this; + } +} IUI.module(Menu); IUI.responsive = false; window.addEventListener("load", function () { + var handler = function (e) { + if (e.target.id == "iui_app_background" && IUI.responsive) { + for (var i = 0; i < IUI._menus.length; i++) + if (IUI._menus[i] instanceof Menu) IUI._menus[i].setVisible(false); - var handler = function (e) { - if (e.target.id == "iui_app_background" && IUI.responsive) { - for (var i = 0; i < IUI._menus.length; i++) - if (IUI._menus[i] instanceof Menu) - IUI._menus[i].setVisible(false); + e.preventDefault(); + return; + } - e.preventDefault(); - return; + for (var i = 0; i < IUI._menus.length; i++) { + if (IUI._menus[i].visible) { + var x = e.target; + var m = IUI._menus[i]; + if (m instanceof Menu) { + if (m._pass) { + m._pass = false; + continue; + } else if (m.visible) if (!m.contains(e.target)) m.setVisible(false); + } else if (m instanceof DropDown) { + if (!(m.contains(e.target) || m.menu.contains(e.target))) + m.setVisible(false); } + } + } + }; - for (var i = 0; i < IUI._menus.length; i++) { - if (IUI._menus[i].visible) { - var x = e.target; - var m = IUI._menus[i]; - if (m instanceof Menu) { - if (m._pass) { - m._pass = false; - continue; - } - else - if (m.visible) - if (!m.contains(e.target)) - m.setVisible(false); - } - else if (m instanceof DropDown) { - if (!(m.contains(e.target) || m.menu.contains(e.target))) - m.setVisible(false); - } - } - } - - }; - - document.body.addEventListener("click", handler); - document.body.addEventListener("touchstart", handler); + document.body.addEventListener("click", handler); + document.body.addEventListener("touchstart", handler); }); diff --git a/src/UI/Navbar.js b/src/UI/Navbar.js index cfb3d3e..efbbc4a 100644 --- a/src/UI/Navbar.js +++ b/src/UI/Navbar.js @@ -3,253 +3,226 @@ import { IUI } from "../Core/IUI.js"; import Link from "../Router/Link.js"; import Check from "./Check.js"; -export default IUI.module(class Navbar extends IUIElement -{ - constructor() - { - super(); +export default IUI.module( + class Navbar extends IUIElement { + constructor() { + super(); - this._list = []; + this._list = []; } - search_old(text) { - for(var i = 0; i < this._container.children.length; i++) - { - let el = this._container.children[i]; - if (el.title.toLowerCase().includes(text)) - { - el.text.innerHTML = el.title.replace(new RegExp(text, 'gi'), (str) => `${str}`); - el.style.display = ""; - el.removeAttribute("hidden"); - - // make parents visible - let level = parseInt(el.getAttribute("data-level")); + search_old(text) { + for (var i = 0; i < this._container.children.length; i++) { + let el = this._container.children[i]; + if (el.title.toLowerCase().includes(text)) { + el.text.innerHTML = el.title.replace( + new RegExp(text, "gi"), + str => `${str}` + ); + el.style.display = ""; + el.removeAttribute("hidden"); - for(var j = i - 1; j >= 0; j--) - { - let previous = this._container.children[j]; - let pLevel = parseInt(previous.getAttribute("data-level")); + // make parents visible + let level = parseInt(el.getAttribute("data-level")); - if (pLevel < level) - { - previous.removeAttribute("hidden"); - previous.style.display = ""; - if (previous.expand) - previous.expand.checked = true; - level = pLevel; - } - } - } - else - { - el.style.display = "none"; + for (var j = i - 1; j >= 0; j--) { + let previous = this._container.children[j]; + let pLevel = parseInt(previous.getAttribute("data-level")); + + if (pLevel < level) { + previous.removeAttribute("hidden"); + previous.style.display = ""; + if (previous.expand) previous.expand.checked = true; + level = pLevel; } + } + } else { + el.style.display = "none"; } + } } search(text, within) { + let menu = within == null ? this._container : within.menu; - let menu = within == null ? this._container : within.menu; - - for(var i = 0; i < menu.children.length; i++) - { - let item = menu.children[i]; - let link = item.link; - if (link.title.toLowerCase().includes(text)) - { - link.text.innerHTML = link.title.replace(new RegExp(text, 'gi'), (str) => `${str}`); - item.style.display = ""; + for (var i = 0; i < menu.children.length; i++) { + let item = menu.children[i]; + let link = item.link; + if (link.title.toLowerCase().includes(text)) { + link.text.innerHTML = link.title.replace( + new RegExp(text, "gi"), + str => `${str}` + ); + item.style.display = ""; - //if (within != null) - // within.removeAttribute("collapsed"); - - // make parents visible - let parent = within; + //if (within != null) + // within.removeAttribute("collapsed"); - while (parent != null && parent != this) - { - parent.expand.checked = true; - parent.removeAttribute("collapsed"); - parent.style.display = ""; - parent = parent.parentElement.parentElement; - } + // make parents visible + let parent = within; - } - else - { - item.style.display = "none"; - } - - if (item.menu != null) - this.search(text, item); + while (parent != null && parent != this) { + parent.expand.checked = true; + parent.removeAttribute("collapsed"); + parent.style.display = ""; + parent = parent.parentElement.parentElement; + } + } else { + item.style.display = "none"; } + + if (item.menu != null) this.search(text, item); + } } - + expand_old(link, value) { - let next = link;// = link.nextElementSibling; - let level = parseInt(link.getAttribute("data-level")); + let next = link; // = link.nextElementSibling; + let level = parseInt(link.getAttribute("data-level")); + // save + //window.localStorage.setItem("iui.navbar/" + link.link, value); - // save - //window.localStorage.setItem("iui.navbar/" + link.link, value); + if (link.expand && link.expand.checked != value) + link.expand.checked = value; - if (link.expand && link.expand.checked != value) - link.expand.checked = value; - - while (next = next.nextElementSibling) { - if (parseInt(next.getAttribute("data-level")) > level){ - if (value) - next.removeAttribute("hidden"); - else - next.setAttribute("hidden", ""); - if (next.expand) - next.expand.checked = value; - } - else - break; - } + while ((next = next.nextElementSibling)) { + if (parseInt(next.getAttribute("data-level")) > level) { + if (value) next.removeAttribute("hidden"); + else next.setAttribute("hidden", ""); + if (next.expand) next.expand.checked = value; + } else break; + } } expand(item, value) { - if (value) - item.removeAttribute("collapsed"); - else - item.setAttribute("collapsed", ""); + if (value) item.removeAttribute("collapsed"); + else item.setAttribute("collapsed", ""); - item.expand.checked = value; + item.expand.checked = value; } - get collapsed(){ - return this.hasAttribute("collapsed"); + get collapsed() { + return this.hasAttribute("collapsed"); } - get auto(){ - return this.hasAttribute("auto"); + get auto() { + return this.hasAttribute("auto"); } - build(){ + build() { + this.innerHTML = ""; + let roots = router.routes.filter(x => x.parent == null); + let self = this; + this._search = document.createElement("input"); + this._search.type = "search"; + this._search.className = this.cssClass + "-search textbox"; + this._search.addEventListener("input", x => { + self.search(this._search.value); + }); - this.innerHTML = ""; - let roots = router.routes.filter(x => x.parent == null); - let self = this; - this._search = document.createElement("input"); - this._search.type = "search"; - this._search.className = this.cssClass + "-search textbox"; - this._search.addEventListener("input", (x) => { - self.search(this._search.value); + this.appendChild(this._search); + + this._container = document.createElement("div"); + this._container.className = this.cssClass + "-container"; + + this.appendChild(this._container); + + let collapsed = this.collapsed; + let auto = this.auto; + + const filterRoutes = routes => + routes.filter(r => { + if (r.hasAttribute("private")) return false; + + if (this.private instanceof Function) { + try { + if (this.private(r)) { + return false; + } + } catch (ex) { + console.log(ex); + debugger; + } + + return true; + } + + return true; }); - this.appendChild(this._search); + const appendRoutes = (routes, level, container) => { + for (var i = 0; i < routes.length; i++) { + let item = document.createElement("div"); + item.className = this.cssClass + "-item"; - this._container = document.createElement("div"); - this._container.className = this.cssClass + "-container"; - - this.appendChild(this._container); + let link = new Link(); // document.createElement("i-link"); + item.setAttribute("level", level); + link.link = routes[i].link; + link.title = routes[i].caption; + if (routes[i].icon != null) + link.innerHTML = ""; - let collapsed = this.collapsed; - let auto = this.auto; + link.text = document.createElement("span"); + link.text.innerHTML = link.title; + link.appendChild(link.text); - const filterRoutes = (routes) => - routes.filter(r => { - if (r.hasAttribute("private")) - return false; - - if (this.private instanceof Function) - { - try{ - if (this.private(r)) - { - return false; - } - } catch(ex){ - console.log(ex); - debugger; - } + item.link = link; - return true; - } + item.appendChild(link); + container.appendChild(item); - return true; + self._list.push(item); + + let subRoutes = filterRoutes(routes[i].routes); + + if (subRoutes.length > 0) { + // append plus + item.expand = new Check({ cssClass: this.cssClass + "-check" }); // document.createElement("i-check"); + item.expand.checked = this.collapsed ? false : true; + + item.expand.checked = !collapsed; + + if (collapsed) item.setAttribute("collapsed", ""); + + link.appendChild(item.expand); + + item.menu = document.createElement("div"); + item.menu.className = this.cssClass + "-menu"; + item.appendChild(item.menu); + + item.expand.on("click", e => { + self.expand(item, item.expand.checked); + e.stopPropagation(); }); - const appendRoutes = (routes, level, container) => { - for (var i = 0; i < routes.length; i++) { - - - let item = document.createElement("div"); - item.className = this.cssClass + "-item"; - - let link = new Link();// document.createElement("i-link"); - item.setAttribute("level", level); - link.link = routes[i].link; - link.title = routes[i].caption; - if (routes[i].icon != null) - link.innerHTML = ""; - - link.text = document.createElement("span"); - link.text.innerHTML = link.title; - link.appendChild(link.text); - - item.link = link; - - item.appendChild(link); - container.appendChild(item); - - self._list.push(item); - - let subRoutes = filterRoutes(routes[i].routes); - - if (subRoutes.length > 0) { - // append plus - item.expand = new Check({cssClass: this.cssClass + "-check"});// document.createElement("i-check"); - item.expand.checked = this.collapsed ? false : true; - - item.expand.checked = !collapsed; - - if (collapsed) - item.setAttribute("collapsed", ""); - - link.appendChild(item.expand); - - item.menu = document.createElement("div"); - item.menu.className = this.cssClass + "-menu"; - item.appendChild(item.menu); - - item.expand.on("click", (e) => { - self.expand(item, item.expand.checked); - e.stopPropagation(); - }); - - - if (auto) - { - item.addEventListener("mouseenter", ()=> self.expand(item, true)); - item.addEventListener("mouseleave", ()=> self.expand(item, false)); - } - - appendRoutes(subRoutes, level + 1, item.menu); - } - + if (auto) { + item.addEventListener("mouseenter", () => + self.expand(item, true) + ); + item.addEventListener("mouseleave", () => + self.expand(item, false) + ); } - }; - appendRoutes(filterRoutes(roots), 0, this._container); + appendRoutes(subRoutes, level + 1, item.menu); + } + } + }; + + appendRoutes(filterRoutes(roots), 0, this._container); } created() { - if (!this.hasAttribute("manual")) - window.router.on("created", ()=>this.build()); + if (!this.hasAttribute("manual")) + window.router.on("created", () => this.build()); - window.router.on("navigate", (e) => { - - for(var i = 0; i < this._list.length; i++) - { - var el = this._list[i]; - if (el.link.link == e.base) - el.setAttribute("selected", ""); - else - el.removeAttribute("selected"); - } - }); + window.router.on("navigate", e => { + for (var i = 0; i < this._list.length; i++) { + var el = this._list[i]; + if (el.link.link == e.base) el.setAttribute("selected", ""); + else el.removeAttribute("selected"); + } + }); } -}); \ No newline at end of file + } +); diff --git a/src/UI/Range.js b/src/UI/Range.js index f0b886f..1a6b7db 100644 --- a/src/UI/Range.js +++ b/src/UI/Range.js @@ -1,188 +1,206 @@ import IUIElement from "../Core/IUIElement.js"; import { IUI } from "../Core/IUI.js"; -export default IUI.module(class Range extends IUIElement { +export default IUI.module( + class Range extends IUIElement { constructor() { - super({ - getItem: function (index, data) { - var item = data[index]; - return item == null ? index : item; - }, - getIndex: function (x, width, data) { - if (x < 0) x = 0; - var p = x / width; - var index = Math.floor(p * data.length); - return index; - }, - getPreview: function (index, data, x, width, el) { - return null; - }, - getPosition: function (index, data, width) { - var itemSize = width / data.length; - return (index * itemSize) + (itemSize / 2); - }, - layout: { - render: function () { - return true; - }, - initialize: function () { - return true; - } - }, - data: [] - }); + super({ + getItem: function (index, data) { + var item = data[index]; + return item == null ? index : item; + }, + getIndex: function (x, width, data) { + if (x < 0) x = 0; + var p = x / width; + var index = Math.floor(p * data.length); + return index; + }, + getPreview: function (index, data, x, width, el) { + return null; + }, + getPosition: function (index, data, width) { + var itemSize = width / data.length; + return index * itemSize + itemSize / 2; + }, + layout: { + render: function () { + return true; + }, + initialize: function () { + return true; + }, + }, + data: [], + }); - var self = this; + var self = this; + this._register("select"); + this._register("userSelect"); - this._register("select"); - this._register("userSelect"); + this.preview = document.createElement("div"); + this.preview.className = this.customClass + "-preview"; - this.preview = document.createElement("div"); - this.preview.className = this.customClass + "-preview"; + if (this.layout) this.layout.initialize.apply(this); + this.thumb = document.createElement("div"); + this.thumb.classList.add(this.customClass + "-thumb"); - if (this.layout) - this.layout.initialize.apply(this); + this.classList.add(this.customClass); + this.appendChild(this.preview); + this.appendChild(this.thumb); + this.addEventListener("mousedown", function (e) { + self._startDragging(e.clientX, e.clientY); + }); - this.thumb = document.createElement("div"); - this.thumb.classList.add(this.customClass + "-thumb"); + this.addEventListener("mouseleave", function (e) { + self.preview.classList.remove(self.customClass + "-preview-visible"); + }); - this.classList.add(this.customClass); - this.appendChild(this.preview); - this.appendChild(this.thumb); + this.addEventListener("mouseenter", function (e) { + var rect = self.getBoundingClientRect(); + self._offset = { + top: rect.top + document.body.scrollTop, + left: rect.left + document.body.scrollLeft, + }; + }); - this.addEventListener("mousedown", function (e) { - self._startDragging(e.clientX, e.clientY); - }); + this.addEventListener("mousemove", function (e) { + self._drag(e.clientX, e.clientY); - this.addEventListener("mouseleave", function (e) { - self.preview.classList.remove(self.customClass + "-preview-visible"); - }); + var x = e.clientX - self._offset.left; + var index = self.getIndex(x, self.offsetWidth, self.data); + var preview = self.getPreview.call( + self, + index, + self.data, + x, + self.offsetWidth, + self.preview + ); - this.addEventListener("mouseenter", function (e) { - var rect = self.getBoundingClientRect(); - self._offset = { - top: rect.top + document.body.scrollTop, - left: rect.left + document.body.scrollLeft - }; - }); + if (preview == null || preview == false) { + self.preview.classList.remove(self.customClass + "-preview-visible"); + return; + } else if (preview instanceof HTMLElement) { + while (self.preview.children.length > 0) + self.preview.removeChild(self.preview.children[0]); + self.preview.appendChild(preview); + } else if (preview != true) { + self.preview.innerHTML = preview; + } - this.addEventListener("mousemove", function (e) { + var index = self.getIndex( + e.clientX - self._offset.left, + self.offsetWidth, + self.data + ); + var dx = self.getPosition(index, self.data, self.offsetWidth); + self.preview.style.setProperty("--x", dx + "px"); + self.preview.classList.add(self.customClass + "-preview-visible"); + }); - self._drag(e.clientX, e.clientY); + document.addEventListener("mouseup", function (e) { + if (self._dragging) self._endDragging(e.clientX, e.clientY); + }); - var x = e.clientX - self._offset.left; - var index = self.getIndex(x, self.offsetWidth, self.data); - var preview = self.getPreview.call(self, index, self.data, x, self.offsetWidth, self.preview); + this.addEventListener("touchstart", function (e) { + self._startDragging( + e.targetTouches[0].clientX, + e.targetTouches[0].clientY + ); + }); - if (preview == null || preview == false) { - self.preview.classList.remove(self.customClass + "-preview-visible"); - return; - } - else if (preview instanceof HTMLElement) { - while (self.preview.children.length > 0) - self.preview.removeChild(self.preview.children[0]); - self.preview.appendChild(preview); - } - else if (preview != true) { - self.preview.innerHTML = preview; - } + this.addEventListener("touchmove", function (e) { + self._drag(e.targetTouches[0].clientX, e.targetTouches[0].clientY); + }); - var index = self.getIndex((e.clientX - self._offset.left), self.offsetWidth, self.data); - var dx = self.getPosition(index, self.data, self.offsetWidth); + this.addEventListener("touchend", function (e) { + self._endDragging( + e.changedTouches[0].clientX, + e.changedTouches[0].clientY + ); + }); - self.preview.style.setProperty("--x", dx + "px"); - self.preview.classList.add(self.customClass + "-preview-visible"); - - }); - - document.addEventListener("mouseup", function (e) { - if (self._dragging) - self._endDragging(e.clientX, e.clientY); - }); - - this.addEventListener("touchstart", function (e) { - self._startDragging(e.targetTouches[0].clientX, e.targetTouches[0].clientY); - }); - - this.addEventListener("touchmove", function (e) { - self._drag(e.targetTouches[0].clientX, e.targetTouches[0].clientY); - }); - - this.addEventListener("touchend", function (e) { - self._endDragging(e.changedTouches[0].clientX, e.changedTouches[0].clientY); - }); - - this.setData(this.data); + this.setData(this.data); } _startDragging(x, y) { - this._dragging = true; + this._dragging = true; - document.onselectstart = function () { return false }; + document.onselectstart = function () { + return false; + }; - var rect = this.getBoundingClientRect(); - var body = document.body.getBoundingClientRect(); + var rect = this.getBoundingClientRect(); + var body = document.body.getBoundingClientRect(); - this._offset = { - top: rect.top + body.top,// document.body.scrollTop, - left: rect.left + body.left, - }; + this._offset = { + top: rect.top + body.top, // document.body.scrollTop, + left: rect.left + body.left, + }; - var index = this.getIndex((x - this._offset.left), this.offsetWidth, this.data); - this.set(index, true, true); + var index = this.getIndex( + x - this._offset.left, + this.offsetWidth, + this.data + ); + this.set(index, true, true); } set(index, moveThumb = true, byUser = false) { + var item = this.getItem(index, this.data); - var item = this.getItem(index, this.data); - - if (item != null) { - if (moveThumb) { - var dx = this.getPosition(index, this.data, this.offsetWidth); - this.thumb.style.setProperty("--x", dx + "px"); - } - - this._emit("select", { item, index }); - - if (byUser) - this._emit("userSelect", { item, index }); - - this.selected = item; - this.selectedIndex = index; + if (item != null) { + if (moveThumb) { + var dx = this.getPosition(index, this.data, this.offsetWidth); + this.thumb.style.setProperty("--x", dx + "px"); } - return this; + this._emit("select", { item, index }); + + if (byUser) this._emit("userSelect", { item, index }); + + this.selected = item; + this.selectedIndex = index; + } + + return this; } _drag(x, y) { - if (this._dragging) { - this.thumb.classList.add(this.customClass + "-thumb-dragging"); - var dx = (x - this._offset.left); - var index = this.getIndex(dx, this.offsetWidth, this.data); - this.thumb.style.setProperty("--x", dx + "px"); - this.set(index, false, true); - } + if (this._dragging) { + this.thumb.classList.add(this.customClass + "-thumb-dragging"); + var dx = x - this._offset.left; + var index = this.getIndex(dx, this.offsetWidth, this.data); + this.thumb.style.setProperty("--x", dx + "px"); + this.set(index, false, true); + } } _endDragging(x, y) { - document.onselectstart = function () { return true }; - this.thumb.classList.remove(this.customClass + "-thumb-dragging"); - var index = this.getIndex((x - this._offset.left), this.offsetWidth, this.data); - this.set(index, true, true); - this._dragging = false; + document.onselectstart = function () { + return true; + }; + this.thumb.classList.remove(this.customClass + "-thumb-dragging"); + var index = this.getIndex( + x - this._offset.left, + this.offsetWidth, + this.data + ); + this.set(index, true, true); + this._dragging = false; } clear() { - return this.setData([]); + return this.setData([]); } - + render() { - if (this.layout && this.layout.render) - this.layout.render.apply(this); - return this; + if (this.layout && this.layout.render) this.layout.render.apply(this); + return this; } -}); \ No newline at end of file + } +); diff --git a/src/UI/RoutesList.js b/src/UI/RoutesList.js index 6e0dc80..d4795ee 100644 --- a/src/UI/RoutesList.js +++ b/src/UI/RoutesList.js @@ -1,23 +1,23 @@ import IUIElement from "../Core/IUIElement.js"; import { IUI } from "../Core/IUI.js"; -export default IUI.module(class RoutesList extends IUIElement { - +export default IUI.module( + class RoutesList extends IUIElement { constructor(properties) { - super(properties, { class: 'routes-list' }); + super(properties, { class: "routes-list" }); } create() { - if (!window.router) - return; + if (!window.router) return; - var table = document.createElement("i-table"); + var table = document.createElement("i-table"); - this.appendChild(table); + this.appendChild(table); - for (var i = 0; i < window.router.routes.length; i++) { - // hell - table.add - } + for (var i = 0; i < window.router.routes.length; i++) { + // hell + table.add; + } } -}); \ No newline at end of file + } +); diff --git a/src/UI/Select.js b/src/UI/Select.js index 71c39fe..ca5c0a3 100644 --- a/src/UI/Select.js +++ b/src/UI/Select.js @@ -1,42 +1,40 @@ -import { IUI, iui } from '../Core/IUI.js'; -import IUIElement from '../Core/IUIElement.js'; -import Menu from '../UI/Menu.js'; -import Layout from '../Data/Layout.js'; -import Repeat from '../Data/Repeat.js'; +import { IUI, iui } from "../Core/IUI.js"; +import IUIElement from "../Core/IUIElement.js"; +import Menu from "../UI/Menu.js"; +import Layout from "../Data/Layout.js"; +import Repeat from "../Data/Repeat.js"; -export default IUI.module(class Select extends IUIElement { +export default IUI.module( + class Select extends IUIElement { constructor() { - super({ - visible: false, - searchlist: false, - hasArrow: true, - //hasAdd: false, - updateTextBox: true, - query: (x) => null, - //_formatter: (x) => x, - _autocomplete: false, - cssClass: 'select' - }); + super({ + visible: false, + searchlist: false, + hasArrow: true, + //hasAdd: false, + updateTextBox: true, + query: x => null, + //_formatter: (x) => x, + _autocomplete: false, + cssClass: "select", + }); - this._register("select"); - this._register("input"); - this._register("add"); + this._register("select"); + this._register("input"); + this._register("add"); } disconnectedCallback() { - //console.log("Select removed", this); - if (!this.searchlist && this.menu) - app.removeChild(this.menu); - + //console.log("Select removed", this); + if (!this.searchlist && this.menu) app.removeChild(this.menu); } - connectedCallback(){ - super.connectedCallback(); - if (!this.searchlist && this.menu) - app.appendChild(this.menu); + connectedCallback() { + super.connectedCallback(); + if (!this.searchlist && this.menu) app.appendChild(this.menu); } get autocomplete() { - return this._autocomplete; + return this._autocomplete; } // get formatter() { @@ -48,211 +46,192 @@ export default IUI.module(class Select extends IUIElement { // } _checkValidity() { - - if (this.validate != null) { - try { - let valid = this.validate.apply(this); - if (!valid) { - this.setAttribute("invalid", ""); - this.classList.add(this.cssClass + "-invalid"); - return false; - } - else { - this.removeAttribute("invalid"); - this.classList.remove(this.cssClass + "-invalid"); - return true; - } - } - catch (ex) { - console.log("Validation Error", ex); - return false; - } + if (this.validate != null) { + try { + let valid = this.validate.apply(this); + if (!valid) { + this.setAttribute("invalid", ""); + this.classList.add(this.cssClass + "-invalid"); + return false; + } else { + this.removeAttribute("invalid"); + this.classList.remove(this.cssClass + "-invalid"); + return true; + } + } catch (ex) { + console.log("Validation Error", ex); + return false; } + } - return true; + return true; } set hasAdd(value) { - if (value) - this.setAttribute("add", "add"); - else - this.removeAttribute("add"); + if (value) this.setAttribute("add", "add"); + else this.removeAttribute("add"); } get hasAdd() { - return this.hasAttribute("add"); + return this.hasAttribute("add"); } async create() { + this.isAuto = this.hasAttribute("auto"); + this.field = this.getAttribute("field"); - this.isAuto = this.hasAttribute("auto"); - this.field = this.getAttribute("field"); + if (this.field != null) { + this.setAttribute(":data", `d['${this.field}']`); + this.setAttribute(":revert", `d['${this.field}'] = this.data`); + } + this._autocomplete = this.hasAttribute("autocomplete"); + //this.hasAdd = this.hasAttribute("add") || this.hasAdd; - if (this.field != null) - { - this.setAttribute(":data", `d['${this.field}']`) - this.setAttribute(":revert", `d['${this.field}'] = this.data`); - } + let self = this; - this._autocomplete = this.hasAttribute("autocomplete"); - //this.hasAdd = this.hasAttribute("add") || this.hasAdd; + //if (this._autocomplete) + // this.cssClass += "-autocomplete"; - let self = this; + this.repeat = new Repeat(); + this.repeat.cssClass = "select-menu-repeat"; + //this.repeat.innerHTML = this.innerHTML; + this.repeat.setAttribute(":data", "d[1]"); - //if (this._autocomplete) - // this.cssClass += "-autocomplete"; + this.counter = document.createElement("div"); + this.counter.className = this.cssClass + "-counter"; + this.counter.innerHTML = "${d[0]}"; + this.menu = new Menu({ + cssClass: this.cssClass + "-menu", + "target-class": "", + }); + this.menu + .on("click", async e => { + if ( + e.target != self.textbox && + e.target != self.counter && + e.target !== self.menu + ) { + await self.setData(e.target.data); - - this.repeat = new Repeat(); - this.repeat.cssClass = "select-menu-repeat"; - //this.repeat.innerHTML = this.innerHTML; - this.repeat.setAttribute(":data", "d[1]"); + self._emit("input", { value: e.target.data }); - this.counter = document.createElement("div"); - this.counter.className = this.cssClass + "-counter"; - this.counter.innerHTML = "${d[0]}"; - - - this.menu = new Menu({ cssClass: this.cssClass + "-menu", "target-class": "" }); - - this.menu.on("click", async (e) => { - - if (e.target != self.textbox && e.target != self.counter && e.target !== self.menu) { - await self.setData(e.target.data); - - self._emit("input", { value: e.target.data }); - - self.hide(); - } - }).on("visible", x=> { if (!x.visible) self.hide()}); - - - if (this._autocomplete) { - this.textbox = document.createElement("input"); - this.textbox.type = "search"; - this.textbox.className = this.cssClass + "-textbox"; - - if (this.placeholder) - this.textbox.placeholder = this.placeholder; - - this.textbox.addEventListener("keyup", function (e) { - if (e.keyCode != 13) { - self._query(0, self.textbox.value); - } - }); - - this.textbox.addEventListener("search", function (e) { - // console.log(e); - }); - - this.menu.appendChild(this.textbox); - - } - - // get collection - let layout = Layout.get(this, "div", true, true); - - //debugger; - - - if (layout != null && layout.label != undefined && layout.menu != undefined) { - this.label = layout.label.node; - this.repeat.appendChild(layout.menu.node); - } - else if (layout != null && layout.null != null) - { - this.label = layout.null.node; - this.repeat.appendChild(layout.null.node.cloneNode(true)); - } - else - { - this.label = document.createElement("div"); - this.repeat.innerHTML = this.innerHTML; - } - - // clear everything else - //this.innerHTML = ""; - - this.label.className = this.cssClass + "-label"; - - this.appendChild(this.label); - - this.label.addEventListener("click", function (e) { - self.show(); + self.hide(); + } + }) + .on("visible", x => { + if (!x.visible) self.hide(); }); - this.menu.appendChild(this.repeat); - this.menu.appendChild(this.counter); + if (this._autocomplete) { + this.textbox = document.createElement("input"); + this.textbox.type = "search"; + this.textbox.className = this.cssClass + "-textbox"; - - if (this.hasArrow) { - this.arrow = document.createElement("div"); - this.arrow.className = this.cssClass + "-arrow"; - this.appendChild(this.arrow); + if (this.placeholder) this.textbox.placeholder = this.placeholder; - - this.arrow.addEventListener("click", function (e) { - if (self.visible) - self.hide(); - else - self.show(); - }); - } - - if (this.hasAdd) { - this._add_button = document.createElement("div"); - this._add_button.className = this.cssClass + "-add"; - this.appendChild(this._add_button); - - this._add_button.addEventListener("click", function (e) { - self._emit("add", { value: self.data }) - }); - } - - - if (this.searchlist) - this.appendChild(this.menu); - else - { - app.appendChild(this.menu); - if (app.loaded) - { - - ///console.log("Append", this.menu); - await this.menu.create(); - IUI.bind(this.menu, false, "menu"); - await IUI.create(this.menu); - - //this._make_bindings(this.menu); - } - } - - this.addEventListener("click", function (e) { - if (e.target == self.textbox) - self.show(); + this.textbox.addEventListener("keyup", function (e) { + if (e.keyCode != 13) { + self._query(0, self.textbox.value); + } }); + + this.textbox.addEventListener("search", function (e) { + // console.log(e); + }); + + this.menu.appendChild(this.textbox); + } + + // get collection + let layout = Layout.get(this, "div", true, true); + + //debugger; + + if ( + layout != null && + layout.label != undefined && + layout.menu != undefined + ) { + this.label = layout.label.node; + this.repeat.appendChild(layout.menu.node); + } else if (layout != null && layout.null != null) { + this.label = layout.null.node; + this.repeat.appendChild(layout.null.node.cloneNode(true)); + } else { + this.label = document.createElement("div"); + this.repeat.innerHTML = this.innerHTML; + } + + // clear everything else + //this.innerHTML = ""; + + this.label.className = this.cssClass + "-label"; + + this.appendChild(this.label); + + this.label.addEventListener("click", function (e) { + self.show(); + }); + + this.menu.appendChild(this.repeat); + this.menu.appendChild(this.counter); + + if (this.hasArrow) { + this.arrow = document.createElement("div"); + this.arrow.className = this.cssClass + "-arrow"; + this.appendChild(this.arrow); + + this.arrow.addEventListener("click", function (e) { + if (self.visible) self.hide(); + else self.show(); + }); + } + + if (this.hasAdd) { + this._add_button = document.createElement("div"); + this._add_button.className = this.cssClass + "-add"; + this.appendChild(this._add_button); + + this._add_button.addEventListener("click", function (e) { + self._emit("add", { value: self.data }); + }); + } + + if (this.searchlist) this.appendChild(this.menu); + else { + app.appendChild(this.menu); + if (app.loaded) { + ///console.log("Append", this.menu); + await this.menu.create(); + IUI.bind(this.menu, false, "menu"); + await IUI.create(this.menu); + + //this._make_bindings(this.menu); + } + } + + this.addEventListener("click", function (e) { + if (e.target == self.textbox) self.show(); + }); } get disabled() { - return this.hasAttribute("disabled"); + return this.hasAttribute("disabled"); } set disabled(value) { - if (this._autocomplete) { - this.textbox.disabled = value; - } - - if (value) { - this.setAttribute("disabled", value); - } - else { - this.removeAttribute("disabled"); - } - + if (this._autocomplete) { + this.textbox.disabled = value; + } + if (value) { + this.setAttribute("disabled", value); + } else { + this.removeAttribute("disabled"); + } } /* set(item) { @@ -275,117 +254,95 @@ export default IUI.module(class Select extends IUIElement { */ show() { - this.setVisible(true); - //this.textbox.focus(); + this.setVisible(true); + //this.textbox.focus(); } hide() { - this.setVisible(false); - //this.textbox.focus(); + this.setVisible(false); + //this.textbox.focus(); } clear() { - if (this.autocomplete !== undefined) - this.textbox.value = ""; - //else - // this.label.innerHTML = ""; + if (this.autocomplete !== undefined) this.textbox.value = ""; + //else + // this.label.innerHTML = ""; - //this.menu.clear(); - this.response.start = 0; - this.selected = null; + //this.menu.clear(); + this.response.start = 0; + this.selected = null; } async _query() { + if (this._autocomplete) if (this.disabled) return; - - if (this._autocomplete) - if (this.disabled) - return; + let self = this; + let text = this._autocomplete ? this.textbox.value : null; - let self = this; - let text = this._autocomplete ? this.textbox.value : null; + var res = this.query(0, text); + if (res instanceof Promise) res = await res; - var res = this.query(0, text) - if (res instanceof Promise) - res = await res; + //.then(async (res) => { + if (res[1].length == 0) await self.setData(null); - //.then(async (res) => { - if (res[1].length == 0) - await self.setData(null); - - await this.menu.setData(res); - - - + await this.menu.setData(res); } - async setData(value) { + // this.label.innerHTML = ""; - // this.label.innerHTML = ""; - - await super.setData(value); + await super.setData(value); - try { - //let text = this.formatter(value); - // this.label.innerHTML = text == null ? "" : text; + try { + //let text = this.formatter(value); + // this.label.innerHTML = text == null ? "" : text; - this._emit("select", { value }); - } - catch (ex) { - //console.log(ex); - this._emit("select", { value }); - } + this._emit("select", { value }); + } catch (ex) { + //console.log(ex); + this._emit("select", { value }); + } - //this._checkValidity(); - - - if (this._checkValidity() && this.isAuto) - this.revert(); + //this._checkValidity(); + if (this._checkValidity() && this.isAuto) this.revert(); } - setVisible(visible) { + if (visible == this.visible) return; - if (visible == this.visible) - return; + //console.log("SLCT: SetVisible", visible); - //console.log("SLCT: SetVisible", visible); + if (visible) { + this._query(0); - if (visible) { - this._query(0); + // show menu + var rect = this.getBoundingClientRect(); + this.menu.style.width = + this.clientWidth - this._computeMenuOuterWidth() + "px"; + this.menu.style.paddingTop = rect.height + "px"; + this.menu.setVisible(true, rect.left, rect.top); //, this.menu); + this.visible = true; - // show menu - var rect = this.getBoundingClientRect(); - this.menu.style.width = (this.clientWidth - this._computeMenuOuterWidth()) + "px"; - this.menu.style.paddingTop = rect.height + "px"; - this.menu.setVisible(true, rect.left, rect.top);//, this.menu); - this.visible = true; + this.classList.add(this.cssClass + "-visible"); - this.classList.add(this.cssClass + "-visible"); + if (this._autocomplete) + setTimeout(() => { + this.textbox.focus(); + }, 100); + } else { + this.visible = false; + this.classList.remove(this.cssClass + "-visible"); - if (this._autocomplete) - setTimeout(() => { - this.textbox.focus(); - }, 100); - - } - else { - this.visible = false; - this.classList.remove(this.cssClass + "-visible"); - - this.menu.hide(); - } - - //this.textbox.focus(); + this.menu.hide(); + } + //this.textbox.focus(); } _computeMenuOuterWidth() { - - return this.menu.offsetWidth - this.menu.clientWidth; - /* + return this.menu.offsetWidth - this.menu.clientWidth; + /* var style = window.getComputedStyle(this.menu.el, null); var paddingLeft = style.getPropertyValue('padding-left'); var paddingRight = style.getPropertyValue('padding-right'); @@ -400,5 +357,5 @@ export default IUI.module(class Select extends IUIElement { return paddingLeft + paddingRight + borderLeft + borderRight; */ } - -}); \ No newline at end of file + } +); diff --git a/src/UI/SelectList.js b/src/UI/SelectList.js index afe863b..986c138 100644 --- a/src/UI/SelectList.js +++ b/src/UI/SelectList.js @@ -1,119 +1,121 @@ import IUIElement from "../Core/IUIElement.js"; import { IUI } from "../Core/IUI.js"; -export default IUI.module(class SelectList extends IUIElement { +export default IUI.module( + class SelectList extends IUIElement { constructor() { - super({ - selected: null, - list: [], - query: (x) => null, - formatter: (x) => x["name"] - }); + super({ + selected: null, + list: [], + query: x => null, + formatter: x => x["name"], + }); - var self = this; + var self = this; - this._register("select"); - this.classList.add(this.cssClass); + this._register("select"); + this.classList.add(this.cssClass); -// this.menu = iui(menu[0]).menu({ customClass: this.customClass + "-menu", layout: this.layout.menu }); - this.menu = new Menu({ cssClass: this.cssClass + "-menu", "target-class": "" }); + // this.menu = iui(menu[0]).menu({ customClass: this.customClass + "-menu", layout: this.layout.menu }); + this.menu = new Menu({ + cssClass: this.cssClass + "-menu", + "target-class": "", + }); - this.menu.on("visible", function (v) { - if (v) - self.classList.add(self.cssClass + "-active"); - else - self.classList.remove(self.cssClass + "-active"); - }); + this.menu.on("visible", function (v) { + if (v) self.classList.add(self.cssClass + "-active"); + else self.classList.remove(self.cssClass + "-active"); + }); - this.menu.on("click", (e) => { - let [data, element] = self.menu._getElementData(e.target); - if (data != undefined) - self.data = data; - }); + this.menu.on("click", e => { + let [data, element] = self.menu._getElementData(e.target); + if (data != undefined) self.data = data; + }); + document.body.appendChild(this.menu); - document.body.appendChild(this.menu); + this.label = document.createElement("div"); + this.label.className = this.cssClass + "-label"; - this.label = document.createElement("div"); - this.label.className = this.cssClass + "-label"; + this.appendChild(this.label); + this.label.addEventListener("click", function (e) { + self.show(); + }); - this.appendChild(this.label); + this.arrow = document.createElement("div"); + this.arrow.className = this.customClass + "-arrow"; - this.label.addEventListener("click", function (e) { - self.show(); - }); + this.header = document.createElement("div"); + this.header.className = this.customClass + "-header"; - this.arrow = document.createElement("div"); - this.arrow.className = this.customClass + "-arrow"; + this.header.appendChild(this.label); + this.header.appendChild(this.arrow); - this.header = document.createElement("div"); - this.header.className = this.customClass + "-header"; + this.appendChild(this.header); - this.header.appendChild(this.label); - this.header.appendChild(this.arrow); - - this.appendChild(this.header); - - this.arrow.addEventListener("click", function (e) { - self.show(); - }); + this.arrow.addEventListener("click", function (e) { + self.show(); + }); } clear() { - this.menu.clear(); - return this; + this.menu.clear(); + return this; } add(item) { - this.menu.add(item); - return this; + this.menu.add(item); + return this; } set(item) { - if (typeof item == "string" || typeof item == "number") { - for (var i = 0; i < this.menu.list.length; i++) { - if (this.menu.list[i][this.menu.index] == item) { - item = this.menu.list[i]; - break; - } - } + if (typeof item == "string" || typeof item == "number") { + for (var i = 0; i < this.menu.list.length; i++) { + if (this.menu.list[i][this.menu.index] == item) { + item = this.menu.list[i]; + break; + } } + } - // item is action - this.label.innerHTML = this.layout.text.formatter ? this.layout.text.formatter(item[this.layout.text.field], item) : item[this.layout.text.field]; - this.selected = item; + // item is action + this.label.innerHTML = this.layout.text.formatter + ? this.layout.text.formatter(item[this.layout.text.field], item) + : item[this.layout.text.field]; + this.selected = item; - this._emit("select", item); - return this; + this._emit("select", item); + return this; } show() { - return this.setVisible(true); + return this.setVisible(true); } hide() { - return this.setVisible(false); + return this.setVisible(false); } _computeMenuOuterWidth() { - return this.menu.offsetWidth - this.menu.clientWidth; + return this.menu.offsetWidth - this.menu.clientWidth; } setVisible(visible) { - if (visible) { - this.response.start = 0; - this._emit("query", null, this.response); + if (visible) { + this.response.start = 0; + this._emit("query", null, this.response); - // show menu - var rect = this.el.getBoundingClientRect(); - this.menu.el.style.width = (rect.width - this._computeMenuOuterWidth()) + "px"; - this.menu.setVisible(true, rect.left, rect.top + rect.height); - } - else { - this.menu.hide(); - } + // show menu + var rect = this.el.getBoundingClientRect(); + this.menu.el.style.width = + rect.width - this._computeMenuOuterWidth() + "px"; + this.menu.setVisible(true, rect.left, rect.top + rect.height); + } else { + this.menu.hide(); + } - return this; + return this; } -}); \ No newline at end of file + } +); diff --git a/src/UI/Tab.js b/src/UI/Tab.js index bef41b1..7931eef 100644 --- a/src/UI/Tab.js +++ b/src/UI/Tab.js @@ -1,20 +1,20 @@ import { IUI } from "../Core/IUI.js"; import IUIElement from "../Core/IUIElement.js"; -export default IUI.module(class Tab extends IUIElement { +export default IUI.module( + class Tab extends IUIElement { constructor(properties) { - super(properties); + super(properties); } - create() { - - } + create() {} get caption() { - return this.getAttribute("caption"); + return this.getAttribute("caption"); } get selected() { - return this.hasAttribute("selected");// == "1" || selected == "yes" || selected == "true"); + return this.hasAttribute("selected"); // == "1" || selected == "yes" || selected == "true"); } -}); \ No newline at end of file + } +); diff --git a/src/UI/TabbedTarget.js b/src/UI/TabbedTarget.js index b357ed1..9719981 100644 --- a/src/UI/TabbedTarget.js +++ b/src/UI/TabbedTarget.js @@ -1,150 +1,149 @@ - -import IUIElement from "../Core/IUIElement.js"; +import IUIElement from "../Core/IUIElement.js"; import Tab from "./Tab.js"; import { IUI } from "../Core/IUI.js"; import Target from "../Router/Target.js"; -export default IUI.module(class TabbedTarget extends Target { - +export default IUI.module( + class TabbedTarget extends Target { constructor() { - super({ - selected: null, - list: [], - _y: 0, - _x: 0, - auto: true, - }); + super({ + selected: null, + list: [], + _y: 0, + _x: 0, + auto: true, + }); } - create() { - var self = this; + var self = this; - this._register("select"); + this._register("select"); + this._bar = document.createElement("div"); + this._bar.classList.add(this.cssClass + "-bar"); - this._bar = document.createElement("div"); - this._bar.classList.add(this.cssClass + "-bar"); + this._ext = document.createElement("span"); + this._ext.className = this.cssClass + "-bar-ext"; + this._bar.appendChild(this._ext); - this._ext = document.createElement("span"); - this._ext.className = this.cssClass + "-bar-ext"; - this._bar.appendChild(this._ext); + //this.insertAdjacentElement("afterBegin", this._bar); + this._body = document.createElement("div"); + this._body.className = this.cssClass + "-body"; + this.appendChild(this._bar); + this.appendChild(this._body); - //this.insertAdjacentElement("afterBegin", this._bar); + var items = []; // this.getElementsByClassName("tab"); - this._body = document.createElement("div"); - this._body.className = this.cssClass + "-body"; + for (var i = 0; i < this.children.length; i++) + if (this.children[i] instanceof Tab) items.push(this.children[i]); - this.appendChild(this._bar); - this.appendChild(this._body); + this._observer = new ResizeObserver(x => { + self._body.style.height = x[0].target.offsetHeight + "px"; // x[0].contentRect.height + "px"; + }); + items.map(x => self.add(x)); + this.addEventListener( + "touchstart", + function (e) { + var x = e.target; + do { + if (x == self) break; + var sy = window.getComputedStyle(x)["overflow-x"]; + if ( + x.scrollWidth > x.clientWidth && + (sy == "scroll" || sy == "auto") + ) + return; + } while ((x = x.parentElement)); - var items = [];// this.getElementsByClassName("tab"); + self._x = e.originalEvent + ? e.originalEvent.touches[0].clientX + : e.touches[0].clientX; + self._y = e.originalEvent + ? e.originalEvent.touches[0].clientY + : e.touches[0].clientY; + }, + { passive: true } + ); - for (var i = 0; i < this.children.length; i++) - if (this.children[i] instanceof Tab) - items.push(this.children[i]); + this.addEventListener( + "touchmove", + function (e) { + if (!self._x || !self._y) { + return; + } - this._observer = new ResizeObserver(x => { - self._body.style.height = x[0].target.offsetHeight + "px";// x[0].contentRect.height + "px"; - }); + var xUp = e.originalEvent + ? e.originalEvent.touches[0].clientX + : e.touches[0].clientX; + var yUp = e.originalEvent + ? e.originalEvent.touches[0].clientY + : e.touches[0].clientY; + var xDiff = document.dir == "rtl" ? xUp - self._x : self._x - xUp; + var yDiff = self._y - yUp; - items.map(x => self.add(x)); + var index = self.list.indexOf(self.selected); - - this.addEventListener("touchstart", function (e) { - - var x = e.target; - do { - if (x == self) - break; - var sy = window.getComputedStyle(x)["overflow-x"]; - if (x.scrollWidth > x.clientWidth && (sy == "scroll" || sy == "auto")) - return; - } while (x = x.parentElement) - - self._x = e.originalEvent ? e.originalEvent.touches[0].clientX : e.touches[0].clientX; - self._y = e.originalEvent ? e.originalEvent.touches[0].clientY : e.touches[0].clientY; - }, { passive: true }); - - this.addEventListener("touchmove", function (e) { - if (!self._x || !self._y) { - return; - } - - var xUp = e.originalEvent ? e.originalEvent.touches[0].clientX : e.touches[0].clientX; - var yUp = e.originalEvent ? e.originalEvent.touches[0].clientY : e.touches[0].clientY; - var xDiff = document.dir == "rtl" ? xUp - self._x : self._x - xUp; - var yDiff = self._y - yUp; - - - var index = self.list.indexOf(self.selected); - - if (Math.abs(xDiff) > Math.abs(yDiff)) {/*most significant*/ - if (xDiff > 0) { - if (index < self.list.length - 1) { - self.select(self.list[index + 1]); - //self.selected.scrollIntoView(); - } - /* left swipe */ - } else { - - if (index > 0) - self.select(self.list[index - 1]); - - /* right swipe */ - } + if (Math.abs(xDiff) > Math.abs(yDiff)) { + /*most significant*/ + if (xDiff > 0) { + if (index < self.list.length - 1) { + self.select(self.list[index + 1]); + //self.selected.scrollIntoView(); + } + /* left swipe */ } else { - if (yDiff > 0) { - /* up swipe */ - } else { - /* down swipe */ - } - } - /* reset values */ - self._x = null; - self._y = null; + if (index > 0) self.select(self.list[index - 1]); - }, { passive: true }); + /* right swipe */ + } + } else { + if (yDiff > 0) { + /* up swipe */ + } else { + /* down swipe */ + } + } + /* reset values */ + self._x = null; + self._y = null; + }, + { passive: true } + ); } created() { - //this._updateSize(); + //this._updateSize(); } add(item) { + var label = document.createElement("i-check"); + label.innerHTML = item.title; - var label = document.createElement("i-check"); - label.innerHTML = item.title; + this._ext.insertAdjacentElement("beforebegin", label); - this._ext.insertAdjacentElement("beforebegin", label); + label.className = this.cssClass + "-button"; - label.className = this.cssClass + "-button"; + item.classList.add(this.cssClass + "-content"); + label.content = item; + item.label = label; - item.classList.add(this.cssClass + "-content"); - label.content = item; - item.label = label; + this._body.append(item); - this._body.append(item); + this.list.push(item); + var self = this; + label.on("check", function (v) { + //if (v && !self._neglect) + self.select(item); + }); + if (item.selected) this.select(item); - - this.list.push(item); - var self = this; - label.on("check", function (v) { - //if (v && !self._neglect) - self.select(item); - }); - - - if (item.selected) - this.select(item); - - - return this; + return this; } //_updateSize() { @@ -156,48 +155,41 @@ export default IUI.module(class TabbedTarget extends Target { //} select(item) { - var tab; - if (item instanceof Tab) + var tab; + if (item instanceof Tab) tab = item; + else if (typeof o === "string" || o instanceof String) + for (var i = 0; i < this.list.length; i++) + if (this.list[i].id == item) { tab = item; - else if (typeof o === 'string' || o instanceof String) - for (var i = 0; i < this.list.length; i++) - if (this.list[i].id == item) { - tab = item; - break; - } - else if (!isNaN(item)) - tab = this.list[i]; + break; + } else if (!isNaN(item)) tab = this.list[i]; - //this._neglect = true; + //this._neglect = true; - var self = this; + var self = this; - this.list.forEach(function (i) { - if (i == tab) - tab.label.check(true);// set(true, false); - else { - i.classList.remove(self.cssClass + "-content-active"); - i.label.check(false);// set(false, false); - } - }); + this.list.forEach(function (i) { + if (i == tab) tab.label.check(true); + // set(true, false); + else { + i.classList.remove(self.cssClass + "-content-active"); + i.label.check(false); // set(false, false); + } + }); + //this._neglect = false; + tab.classList.add(this.cssClass + "-content-active"); - //this._neglect = false; - tab.classList.add(this.cssClass + "-content-active"); + if (this.selected != null) this._observer.unobserve(this.selected); + this.selected = tab; + this._observer.observe(this.selected); - if (this.selected != null) - this._observer.unobserve(this.selected); - this.selected = tab; - this._observer.observe(this.selected); + if (document.dir == "rtl") + this._bar.scrollLeft = tab.label.offsetLeft + tab.label.clientWidth; + else this._bar.scrollLeft = tab.label.offsetLeft - tab.label.clientWidth; - if (document.dir == "rtl") - this._bar.scrollLeft = tab.label.offsetLeft + tab.label.clientWidth; - else - this._bar.scrollLeft = tab.label.offsetLeft - tab.label.clientWidth; - - - this._emit("select", tab); - return this; + this._emit("select", tab); + return this; } - -}); \ No newline at end of file + } +); diff --git a/src/UI/Table.js b/src/UI/Table.js index 40dc7ab..e482ae0 100644 --- a/src/UI/Table.js +++ b/src/UI/Table.js @@ -2,378 +2,345 @@ import { IUI } from "../Core/IUI.js"; import Layout from "../Data/Layout.js"; -export default IUI.module(class Table extends IUIElement { - constructor() - { - super({ - indexer: (x) => x.instance?.id ?? x.id, - parents_getter: (x) => x.instance?.attributes.item("parents"), - children_getter: (x) => x.instance?.attributes.item("children"), - parents_changed: (x, p) => false, - _long_press_x: 0, - _long_press_y: 0, - updateOnModification: true, - last_query: () => true - }); +export default IUI.module( + class Table extends IUIElement { + constructor() { + super({ + indexer: x => x.instance?.id ?? x.id, + parents_getter: x => x.instance?.attributes.item("parents"), + children_getter: x => x.instance?.attributes.item("children"), + parents_changed: (x, p) => false, + _long_press_x: 0, + _long_press_y: 0, + updateOnModification: true, + last_query: () => true, + }); - var self = this; + var self = this; - this.list = []; + this.list = []; - this._register("click"); - this._register("rowdblclick"); - this._register("contextmenu"); - this._register("expand"); - this._register("enter"); - this._register("leave"); - this._register("touch"); + this._register("click"); + this._register("rowdblclick"); + this._register("contextmenu"); + this._register("expand"); + this._register("enter"); + this._register("leave"); + this._register("touch"); + //window.addEventListener("resize", function(e){ + // self.updateSize(); + //}); - //window.addEventListener("resize", function(e){ - // self.updateSize(); - //}); - - this._resizing = false; - this._resizeX = 0; - } + this._resizing = false; + this._resizeX = 0; + } - get layout() - { - return this._layout; - } + get layout() { + return this._layout; + } - set layout(value) - { - this._layout = value; + set layout(value) { + this._layout = value; - if (!this._created) - return; + if (!this._created) return; - var self = this; + var self = this; - this.header.innerHTML = ""; + this.header.innerHTML = ""; - let row = this.header.insertRow(); + let row = this.header.insertRow(); - for (var i = 0; i < value.length; i++) { - let column = value[i]; - let cell = row.insertCell(); + for (var i = 0; i < value.length; i++) { + let column = value[i]; + let cell = row.insertCell(); - - var width; - if (column.width && column.width.substring(column.width.length-1) == "%") - width = ((parseInt(column.width.substring(0, column.width.length - 1)) / 100) * this.clientWidth) + "px"; - else - width = column.width; - - cell.style.width = width; - //cell.setAttribute("data-width", column.width); - - let hWrap = document.createElement("div"); - hWrap.className = this.cssClass + "-header-wrap"; - - let resizer = document.createElement("div"); - resizer.className = this.cssClass + "-resizer"; - - resizer.addEventListener("mousedown", function(e) - { - self.updateSize(); - //corssbrowser mouse pointer values - self._resizeX = e.pageX || e.clientX + (document.documentElement.scrollLeft ? - document.documentElement.scrollLeft : - document.body.scrollLeft); - - self._resizingColumnWidth = cell.clientWidth; - self._resizingTableWidth = self.table.clientWidth; - self._resizing = true; - self._resizingColumn = cell;// self.headers.indexOf(cell); - document.onselectstart = function() {return false}; - }); - - - if (column.type && column.type == "search") - { - let input = document.createElement("input"); - input.type = "search"; - input.className = this.cssClass + "-header-input"; - input.placeholder = column.name; - input.id = self.id + "_" + column.field; - - input.addEventListener("keyup", function() { - self.search(column, input.value); - }); - - hWrap.appendChild(input); - - } - else if (column.type && column.type == "select") - { - // filter out list - column.filter = []; - - let select = document.createElement("div"); - select.id = self.id + "_" + column.field; - select.className = self.cssClass + "-header-select"; - select.innerHTML = column.name; - select.setAttribute("data-dir", "normal"); - - var menu = document.createElement("div"); - menu.className = self.cssClass + "-header-menu"; - - select.addEventListener("click", function(e) - { - if (select.getAttribute("data-dir") == "down") - self.sort(column, true); - else - self.sort(column, false); - }); - - var tip = document.createElement("div"); - tip.className = self.cssClass + "-filter-menu"; - menu.appendChild(tip); - - menu.addEventListener("click", function(evt){ - if (evt.target != menu) - return; - - if (tip.style.display == "none") - { - var items = self.list.distinct(column.field); - tip.innerHTML = ""; - - var filters = []; - - for(var i = 0; i < items.length; i++) - { - var item = items[i]; - var fc = document.createElement("input"); - fc.type = "checkbox"; - fc.checked = column.filter.indexOf(item) > -1 ? false : true; - // add to filters list - filters.push({el: fc, text: item}); - // add to field.filter to be rendered by the grid - fc.addEventListener("click", function(){ - column.filter = []; - filters.forEach(function(filter) - { - if (!filter.checked) - column.filter.push(filter.text); - }); - - self._applyFilter(); - }); - - var fi = document.createElement("label"); - fi.className = self.cssClass + "-filter-menu-item"; - fi.innerHTML = column.formatter ? column.formatter(item, fi) : item; - tip.appendChild(fc); - tip.appendChild(fi); - tip.appendChild(document.createElement("br")); - } - - tip.style.display = "block"; - } - else - { - tip.style.display = "none"; - } - }); - - - hWrap.appendChild(select); - hWrap.appendChild(menu); - - } - else - { - let text = document.createElement("div"); - text.className = self.cssClass + "-header-text"; - text.innerHTML = column.name; - text.setAttribute("data-dir", "normal"); - - //var sort = ne("div"); - //sort.className = "grid-header-sort"; - - hWrap.appendChild(text); - //hWrap.appendChild(resizer); - //hWrap.appendChild(sort); - - text.addEventListener("click", function(e) - { - if (text.getAttribute("data-dir") == "down") - self.sort(column, true); - else - self.sort(column, false); - }); - } - - hWrap.appendChild(resizer); - cell.appendChild(hWrap); - } - } + var width; + if ( + column.width && + column.width.substring(column.width.length - 1) == "%" + ) + width = + (parseInt(column.width.substring(0, column.width.length - 1)) / + 100) * + this.clientWidth + + "px"; + else width = column.width; + cell.style.width = width; + //cell.setAttribute("data-width", column.width); - create() { - let self = this; + let hWrap = document.createElement("div"); + hWrap.className = this.cssClass + "-header-wrap"; - // get layout - this._layout = Layout.get(this, "td", true); + let resizer = document.createElement("div"); + resizer.className = this.cssClass + "-resizer"; - this.table = document.createElement("table"); - this.table.className = this.cssClass + "-body"; - this.appendChild(this.table); - - this.body = this.table.createTBody(); - this.header = this.table.createTHead(); - this.header.className = this.cssClass + "-header"; + resizer.addEventListener("mousedown", function (e) { + self.updateSize(); + //corssbrowser mouse pointer values + self._resizeX = + e.pageX || + e.clientX + + (document.documentElement.scrollLeft + ? document.documentElement.scrollLeft + : document.body.scrollLeft); - this.body.addEventListener("mousedown", function(e){ - if (self.multiselect) - { - self._boxStartX = e.pageX; - self._boxStartY = e.pageY; - self._multiselecting = true; - self.selectBox.classList.add(self.cssClass + "-select-box-visible"); - } - }); + self._resizingColumnWidth = cell.clientWidth; + self._resizingTableWidth = self.table.clientWidth; + self._resizing = true; + self._resizingColumn = cell; // self.headers.indexOf(cell); + document.onselectstart = function () { + return false; + }; + }); - this.selectBox = document.createElement("div"); - this.selectBox.className = this.cssClass + "-select-box"; - this.appendChild(this.selectBox); + if (column.type && column.type == "search") { + let input = document.createElement("input"); + input.type = "search"; + input.className = this.cssClass + "-header-input"; + input.placeholder = column.name; + input.id = self.id + "_" + column.field; - this.body.addEventListener("mousemove", function(e){ + input.addEventListener("keyup", function () { + self.search(column, input.value); + }); - if (self._multiselecting || self._multideselecting) - { - self._boxEndX = e.pageX; - self._boxEndY = e.pageY; + hWrap.appendChild(input); + } else if (column.type && column.type == "select") { + // filter out list + column.filter = []; - if (e.movementY > 0) - { - self._multiselecting = true; - self._multideselecting = false; - } - else if (e.movementY < 0) - { - self._multiselecting = false; - self._multideselecting = true; - } + let select = document.createElement("div"); + select.id = self.id + "_" + column.field; + select.className = self.cssClass + "-header-select"; + select.innerHTML = column.name; + select.setAttribute("data-dir", "normal"); - - if (self._boxEndX > self._boxStartX) - { - self.selectBox.style.left = self._boxStartX + "px"; - self.selectBox.style.width = (self._boxEndX - self._boxStartX) + "px"; - } - else - { - self.selectBox.style.left = self._boxEndX + "px"; - self.selectBox.style.width = (self._boxStartX - self._boxEndX) + "px"; - } + var menu = document.createElement("div"); + menu.className = self.cssClass + "-header-menu"; - if (self._boxEndY > self._boxStartY) - { - self.selectBox.style.top = self._boxStartY + "px"; - self.selectBox.style.height = (self._boxEndY - self._boxStartY) + "px"; - } - else - { - self.selectBox.style.top = self._boxEndY + "px"; - self.selectBox.style.height = (self._boxStartY - self._boxEndY) + "px"; - } + select.addEventListener("click", function (e) { + if (select.getAttribute("data-dir") == "down") + self.sort(column, true); + else self.sort(column, false); + }); - // now lets look for all rows within this range - var rect = self.body.getBoundingClientRect(); - var offset = { - top: rect.top + document.body.scrollTop, - left: rect.left + document.body.scrollLeft - }; - - var by, sy; + var tip = document.createElement("div"); + tip.className = self.cssClass + "-filter-menu"; + menu.appendChild(tip); - if (self._boxStartY > self._boxEndY) - { - by = self._boxStartY - offset.top; - sy = self._boxEndY - offset.top; - } - else - { - by = self._boxEndY - offset.top; - sy = self._boxStartY - offset.top; - } + menu.addEventListener("click", function (evt) { + if (evt.target != menu) return; + if (tip.style.display == "none") { + var items = self.list.distinct(column.field); + tip.innerHTML = ""; - var selected = []; + var filters = []; - for(var i = 0; i < self.body.rows.length; i++) - { - var top = self.body.rows[i].offsetTop; - var bottom = top + self.body.rows[i].offsetHeight; + for (var i = 0; i < items.length; i++) { + var item = items[i]; + var fc = document.createElement("input"); + fc.type = "checkbox"; + fc.checked = column.filter.indexOf(item) > -1 ? false : true; + // add to filters list + filters.push({ el: fc, text: item }); + // add to field.filter to be rendered by the grid + fc.addEventListener("click", function () { + column.filter = []; + filters.forEach(function (filter) { + if (!filter.checked) column.filter.push(filter.text); + }); - if ((top > sy || bottom > sy) && (top < by || bottom < by)) - { - selected.push(self.body.rows[i]); - self.body.rows[i].classList.add(self.cssClass + "-row-selected"); - } - else - { - self.body.rows[i].classList.remove(self.cssClass + "-row-selected"); - } - } + self._applyFilter(); + }); - for(var i = 0; i < selected.length; i++) - self._selectChildren(selected[i], true); - } - }); + var fi = document.createElement("label"); + fi.className = self.cssClass + "-filter-menu-item"; + fi.innerHTML = column.formatter + ? column.formatter(item, fi) + : item; + tip.appendChild(fc); + tip.appendChild(fi); + tip.appendChild(document.createElement("br")); + } - document.body.addEventListener("mouseup", function(e){ + tip.style.display = "block"; + } else { + tip.style.display = "none"; + } + }); - if (self._multiselecting || self._multideselecting) - { - self._multiselecting = false; - self._multideselecting = false; - self.selectBox.classList.remove(self.cssClass + "-select-box-visible"); - self.selectBox.style.width = "0px"; - self.selectBox.style.height = "0px"; - } - }); - - - document.addEventListener('mouseup', function () { - self._resizing = false; - document.onselectstart = function() {return true}; + hWrap.appendChild(select); + hWrap.appendChild(menu); + } else { + let text = document.createElement("div"); + text.className = self.cssClass + "-header-text"; + text.innerHTML = column.name; + text.setAttribute("data-dir", "normal"); - }); - - document.addEventListener('mousemove', function (e) { - if (self._resizing) { - var x = e.pageX || e.clientX + (document.documentElement.scrollLeft ? - document.documentElement.scrollLeft : - document.body.scrollLeft); - //var y = e.pageY || e.clientY + (document.documentElement.scrollTop ? - // document.documentElement.scrollTop : - // document.body.scrollTop); - - var col = self._resizingColumn; + //var sort = ne("div"); + //sort.className = "grid-header-sort"; - var tw,cw; + hWrap.appendChild(text); + //hWrap.appendChild(resizer); + //hWrap.appendChild(sort); - if (document.dir == "rtl") - { - tw = (self._resizingTableWidth - (x - self._resizeX)); - cw = (self._resizingColumnWidth - (x - self._resizeX)); - } - else - { - tw = (self._resizingTableWidth + (x - self._resizeX)); - cw = (self._resizingColumnWidth + (x - self._resizeX)); - } + text.addEventListener("click", function (e) { + if (text.getAttribute("data-dir") == "down") + self.sort(column, true); + else self.sort(column, false); + }); + } - - // must have limits - if (cw > 20) - { - /* + hWrap.appendChild(resizer); + cell.appendChild(hWrap); + } + } + + create() { + let self = this; + + // get layout + this._layout = Layout.get(this, "td", true); + + this.table = document.createElement("table"); + this.table.className = this.cssClass + "-body"; + this.appendChild(this.table); + + this.body = this.table.createTBody(); + this.header = this.table.createTHead(); + this.header.className = this.cssClass + "-header"; + + this.body.addEventListener("mousedown", function (e) { + if (self.multiselect) { + self._boxStartX = e.pageX; + self._boxStartY = e.pageY; + self._multiselecting = true; + self.selectBox.classList.add(self.cssClass + "-select-box-visible"); + } + }); + + this.selectBox = document.createElement("div"); + this.selectBox.className = this.cssClass + "-select-box"; + this.appendChild(this.selectBox); + + this.body.addEventListener("mousemove", function (e) { + if (self._multiselecting || self._multideselecting) { + self._boxEndX = e.pageX; + self._boxEndY = e.pageY; + + if (e.movementY > 0) { + self._multiselecting = true; + self._multideselecting = false; + } else if (e.movementY < 0) { + self._multiselecting = false; + self._multideselecting = true; + } + + if (self._boxEndX > self._boxStartX) { + self.selectBox.style.left = self._boxStartX + "px"; + self.selectBox.style.width = self._boxEndX - self._boxStartX + "px"; + } else { + self.selectBox.style.left = self._boxEndX + "px"; + self.selectBox.style.width = self._boxStartX - self._boxEndX + "px"; + } + + if (self._boxEndY > self._boxStartY) { + self.selectBox.style.top = self._boxStartY + "px"; + self.selectBox.style.height = + self._boxEndY - self._boxStartY + "px"; + } else { + self.selectBox.style.top = self._boxEndY + "px"; + self.selectBox.style.height = + self._boxStartY - self._boxEndY + "px"; + } + + // now lets look for all rows within this range + var rect = self.body.getBoundingClientRect(); + var offset = { + top: rect.top + document.body.scrollTop, + left: rect.left + document.body.scrollLeft, + }; + + var by, sy; + + if (self._boxStartY > self._boxEndY) { + by = self._boxStartY - offset.top; + sy = self._boxEndY - offset.top; + } else { + by = self._boxEndY - offset.top; + sy = self._boxStartY - offset.top; + } + + var selected = []; + + for (var i = 0; i < self.body.rows.length; i++) { + var top = self.body.rows[i].offsetTop; + var bottom = top + self.body.rows[i].offsetHeight; + + if ((top > sy || bottom > sy) && (top < by || bottom < by)) { + selected.push(self.body.rows[i]); + self.body.rows[i].classList.add(self.cssClass + "-row-selected"); + } else { + self.body.rows[i].classList.remove( + self.cssClass + "-row-selected" + ); + } + } + + for (var i = 0; i < selected.length; i++) + self._selectChildren(selected[i], true); + } + }); + + document.body.addEventListener("mouseup", function (e) { + if (self._multiselecting || self._multideselecting) { + self._multiselecting = false; + self._multideselecting = false; + self.selectBox.classList.remove( + self.cssClass + "-select-box-visible" + ); + self.selectBox.style.width = "0px"; + self.selectBox.style.height = "0px"; + } + }); + + document.addEventListener("mouseup", function () { + self._resizing = false; + document.onselectstart = function () { + return true; + }; + }); + + document.addEventListener("mousemove", function (e) { + if (self._resizing) { + var x = + e.pageX || + e.clientX + + (document.documentElement.scrollLeft + ? document.documentElement.scrollLeft + : document.body.scrollLeft); + //var y = e.pageY || e.clientY + (document.documentElement.scrollTop ? + // document.documentElement.scrollTop : + // document.body.scrollTop); + + var col = self._resizingColumn; + + var tw, cw; + + if (document.dir == "rtl") { + tw = self._resizingTableWidth - (x - self._resizeX); + cw = self._resizingColumnWidth - (x - self._resizeX); + } else { + tw = self._resizingTableWidth + (x - self._resizeX); + cw = self._resizingColumnWidth + (x - self._resizeX); + } + + // must have limits + if (cw > 20) { + /* tw = 0; for(var i = 0; i < self.headers.length; i++) { @@ -382,1046 +349,938 @@ export default IUI.module(class Table extends IUIElement { //self.headers[self.resizingColumn]; } */ - //tw += cw; - self.header.style.width = tw + "px"; - self.table.style.width = tw + "px"; - - col.style.width = cw + "px"; - //dummy.style.width = cw + "px";// col.style.width; - - - } - } - }); - - // load data - //if (this.data) - // this.load(this.data); - - //this.updateSize(); - - this._created = true; - - if (this._layout) - this.layout = this._layout; - } - - - updateSize() - { - let totalWidth = 0; - - for (var i = 0; i < this.table.tHead.rows[0].cells.length; i++) - { - var header = this.table.tHead.rows[0].cells[i]; - var width = header.clientWidth + "px"; - - if (width == "0px") - { - width = this.headers[i].getAttribute("data-width"); - if (width.substring(width.length-1) == "%") - width = ((parseInt(width.substring(0, width.length - 1)) / 100) * this.clientWidth) + "px"; - } - - if (header.style.display != "none") - totalWidth+=parseInt(width.substr(0, width.length-2)); - - header.style.width = width; - } - - if (this.clientWidth > 0) - { - this.body.style.width = this.table.tHead.clientWidth + "px"; - this.table.tHead.style.width = this.table.tHead.clientWidth + "px"; - } - else - { - this.table.style.width = totalWidth + "px"; - } - } - - sort(column, desc) - { - - - if (this.tree) - return; - - //let column = this.layout[columnIndex]; - - if (column.sorter) - { - this.list.sort(column.sorter); - } - else - { - this.list.sort(function(a, b){ - if (typeof a[column.field] == "number" || a[column.field] instanceof Date) - return a[column.field] - b[column.field]; - else - return a[column.field].toString().localeCompare(b[column.field]); - - }); - } - - if (desc) - this.list.reverse(); - - for(var i = 0; i < this.list.length; i++) - { - var tr = this.getRows(this.indexer(this.list[i]))[0]; - this.body.insertAdjacentElement("beforeEnd", tr); - } - - for(var i = 0; i < this.layout.length; i++) - { - let th = this.table.tHead.rows[0].cells[i]; - let txt = th.getElementsByClassName(this.cssClass + "-header-text")[0]; - - if (column !== this.layout[i]) - txt.setAttribute("data-dir", "normal"); - else if (desc) - txt.setAttribute("data-dir", "up"); - else - txt.setAttribute("data-dir", "down"); - } - } - - - setRowVisible(row, visible) - { - var level = parseInt(row.getAttribute("data-level")); - - if (visible) - { - row.classList.remove(this.cssClass + "-row-hidden"); - row.classList.remove(this.cssClass + "-row-selected"); - - // make sure parent is visible - for(var i = row.rowIndex - 2; i >= 0; i--) - { - var lev = parseInt(this.body.rows[i].getAttribute("data-level")); - if (lev > level) - break; - else if (lev < level) - { - this.setRowVisible(this.body.rows[i], true); - break; - } - } - } - else - { - row.classList.add(this.cssClass + "-row-hidden"); - // make sure children are visible - for(var i = row.rowIndex; i < this.body.rows.length; i++) - { - var lev = parseInt(this.body.rows[i].getAttribute("data-level")); - if (lev <= level) - break; - this.body.rows[i].classList.add(this.cssClass + "-row-hidden"); - } - } - } - - expand(row, visible) - { - var button = row.getElementsByClassName(this.cssClass + "-tree")[0]; - button.setAttribute("data-expand", visible ? 1 : 0); - var level = parseInt(row.getAttribute("data-level")); - - for(var i = row.rowIndex; i < this.body.rows.length; i++) - { - var lev = parseInt(this.body.rows[i].getAttribute("data-level")); - if (lev <= level) - break; - - if (!visible) - { - button = this.body.rows[i].getElementsByClassName(this.cssClass + "-tree"); - if (button.length > 0) - button[0].setAttribute("data-expand", 0); - this.body.rows[i].classList.add(this.cssClass + "-row-hidden"); - } - else if (lev == level + 1) - this.body.rows[i].classList.remove(this.cssClass + "-row-hidden"); - } - - //this.updateSize(); - }; - - - filter(queryFunction) - { - if (queryFunction) - { - this.last_query = queryFunction; - - for(var i = 0; i < this.body.rows.length; i++) - { - var item = this.get(parseInt(this.body.rows[i].getAttribute("data-id"))); - var visible = queryFunction(item); - this.setRowVisible(this.body.rows[i], visible); - } - } - // restore default view - else - { - this.last_query = function(){return true}; - - // view all - for(var i = 0; i < this.body.rows.length; i++) - this.body.rows[i].classList.remove(this.cssClass + "-row-hidden"); - - // hide non-expanded - for(var i = 0; i < this.body.rows.length; i++) - { - var row = this.body.rows[i]; - var level = parseInt(row.getAttribute("data-level")); - var button = row.getElementsByClassName(this.cssClass + "-tree"); - if (button.length > 0) - { - // hide ? - if (button[0].getAttribute("data-expand") == '0') - { - for(i = i + 1; i < this.body.rows.length; i++) - { - var subRow = this.body.rows[i]; - var l = parseInt(subRow.getAttribute("data-level")); - if (l > level) - subRow.classList.add(this.cssClass + "-row-hidden"); - else - { - i--; - break; - } - } - } - } - } - } - } - - _selectChildren(row, value) - { - var level = parseInt(row.getAttribute("data-level")); - - for(var i = row.rowIndex; i < this.body.rows.length; i++) - { - var subRow = this.body.rows[i]; - var l = parseInt(subRow.getAttribute("data-level")); - if (l > level) - { - if (value) - subRow.classList.add(this.cssClass + "-row-selected"); - else - subRow.classList.remove(this.cssClass + "-row-selected"); - } - else - { - break; - } - } - } - - _select(row, item, multiple = false, context = false) - { - if (this.multiselect) - { - - var checked = row.classList.contains(this.cssClass + "-row-selected"); - - // implement Microsoft Windows Explorer behaivor - if (context) - { - multiple = checked || multiple; - checked = !checked; - } - - if (multiple) - { - var rows = this.getRows(this.indexer(item)); - - if (checked) - for(var i = 0; i < rows.length; i++) - { - rows[i].classList.remove(this.cssClass + "-row-selected"); - this._selectChildren(rows[i], false); - } - else - for(var i = 0; i < rows.length; i++) - { - rows[i].classList.add(this.cssClass + "-row-selected"); - this._selectChildren(rows[i], true); - } - } - else - { - for(var i = 0; i < this.body.rows.length; i++) - this.body.rows[i].classList.remove(this.cssClass + "-row-selected"); - - row.classList.add(this.cssClass + "-row-selected"); - this._selectChildren(row, true); - } - } - else - { - for(var i = 0; i < this.body.rows.length; i++) - if (this.body.rows[i] == row) - row.classList.add(this.cssClass + "-row-selected"); - else - this.body.rows[i].classList.remove(this.cssClass + "-row-selected"); - this._selected = item; - } - } - - get selected() - { - if (this.multiselect) - { - var rt = []; - for(var i = 0; i < this.body.rows.length; i++) - { - if (this.body.rows[i].classList.contains(this.cssClass + "-row-selected")) - { - var item = this.get(this.body.rows[i].getAttribute("data-id")); - if (rt.indexOf(item) < 0) - rt.push(item); - } - } - - return rt; - } - else - return this._selected; - } - - _applyFilter() - { - for(var i = 0; i < this.list.length; i++) - { - var item = this.list[i]; - el = document.getElementById(this.id + "_" + this.indexer(item), this.body); - - // visible by default - el.style.display = ""; - - for(var j = 0; j < this.layout.length; j++) - { - var column = this.layout[j]; - if (column.filter) - column.filter.forEach(function(filter) - { - if (item[column.field] == filter) - { - // hide this one - el.style.display = "none"; - } - }); - } - } - }; - - get(id) - { - for(var i = 0; i < this.list.length; i++) - if (this.indexer(this.list[i]) == id) - return this.list[i]; - } - - - setColumnVisible(index, visible) - { - var display = visible ? "table-cell" : "none"; - var columnWidth = this.headers[index].clientWidth; - - for(var i = 0; i < this.table.rows.length; i++) - this.table.rows[i].cells[index].style.display = display; - - this.headers[index].style.display = display; - - // shrink the table - if (display == "none") - { - //this.header.width = (this.header.clientWidth - columnWidth) + "px"; - } - - //this.updateSize(); - } - - containsAny(items) - { - if (items == null) - return false; - - for(var i = 0; i < items.length; i++) - { - if (this.list.indexOf(items[i]) > -1) - return true; - } - - return false; - } - - - _createTreeButton(row, dynamicLoading, item) - { - var self = this; - var button = document.createElement("div"); - button.className = this.cssClass + "-tree"; - - button.setAttribute("data-expand", dynamicLoading ? 2 : 0); - button.addEventListener("click", function(){ - - var eState = this.getAttribute("data-expand"); - - if (eState == '2') - { - var ev = { - button: button, - item: item, - row: row, - table: self, - success: function() - { - self.expand(this.button.parentNode.parentNode, 1); - }, - failure: function(errorMsg) - { - this.setAttribute("data-expand", 2); - } - }; - - this.setAttribute("data-expand", 3); - - // raise event - self._emit("expand", ev); - } - else if (eState == "0") - { - self.expand(this.parentNode.parentNode, true); - } - else if (eState == "1") - { - self.expand(this.parentNode.parentNode, false); - } - }); - - row.cells[0].insertAdjacentElement("afterbegin", button); - } - - add(item, dynamicLoading)//fast) - { - - this.list.push(item); - - var self = this; - var parents = this.parents_getter(item); - var newRow; - - if (this.containsAny(parents)) - { - for(var i = 0; i < parents.length; i++) - { - var parent = parents[i]; - var inListParents = this.getRows(this.indexer(parent)); - - for(var j = 0; j < inListParents.length; j++) - { - var parentRow = inListParents[j]; - // add expand button to parent - var treeButton = parentRow.getElementsByClassName(this.cssClass + "-tree", parentRow); - - if (treeButton.length == 0) - { - this._createTreeButton(parentRow); - newRow = this._addRow(item, parseInt(parentRow.getAttribute("data-level")) + 1, false, parentRow.rowIndex); - } - else - { - newRow = this._addRow(item, parseInt(parentRow.getAttribute("data-level")) + 1, treeButton[0].getAttribute("data-expand") == '1', parentRow.rowIndex); - } - } - - // perhaps parent row depends on children - this.update(parent); - } - } - else - { - newRow = this._addRow(item, 0, true); - } - - if (dynamicLoading) - this._createTreeButton(newRow, true, item); - - // @TODO: fix this since modified event is removed - if (item.on) - if (this.updateOnModification) - item.on("modified", function(propertyName){ - //console.log("render", propertyName, item); - self.update(item, propertyName); - }); - - - //if (!fast) - - // self.layout.forEach(function(field){ - // if (field.type && field.type == "select") - //{ - // calculate distinct - //} - //}); - //this.updateSize(); - - return self; - } - - _findIndexes(propertyIndex) - { - var rt = []; - for(var i = 0; i < this.layout.length; i++) - { - if (this.layout[i].field == propertyIndex || this.layout[i].field == "_any") - rt.push(i); - } - return rt; - }; - - _addRow(item, level, visible, index) - { - var self = this; - // add item - var tr = self.body.insertRow(index); - tr.setAttribute("data-id", this.indexer(item)); - tr.setAttribute("data-level", level); - if (visible) - tr.className = this.cssClass + "-row"; - else - tr.className = this.cssClass + "-row " + this.cssClass + "-row-hidden"; - - - for(var i = 0; i < this.layout.length; i++) - { - let column = this.layout[i]; - - let cl = column.node.cloneNode(true);// tr.insertCell(); - - //this._make_bindings(cl) - - IUI.bind(cl, false, "table", - IUI.extend(this.__i_bindings, {index: i}, true)); - - tr.appendChild(cl); - - if (cl.dataMap != null) - cl.dataMap.render(item).then(() => self._renderElement(cl, cl.data)); - else { - cl.data = item; - this._renderElement(cl, cl.data); - } - //if (column.formatter) - //{ - // var rt = column.formatter(item[column.field], item, cl); - // if (rt instanceof Element) - // { - // cl.appendChild(rt); - // } - // else - // cl.innerHTML=rt; - //} - //else - // cl.innerHTML=item[column.field]; - - cl.style.display = this.table.tHead.rows[0].cells[i].style.display; - - } - - tr.addEventListener("click", function(e) - { - self._select(tr, item, e.ctrlKey); - self._emit("click", { data: item, row: tr, event: e }); - }); - - tr.addEventListener("dblclick", function(e) - { - self._select(tr, item, e.ctrlKey); - self._emit("rowdblclick", { data: item, row: tr, event: e }); - }); - - tr.addEventListener("contextmenu", function(e) - { - self._select(tr, item, e.ctrlKey, true); - self._emit("contextmenu", { data: item, row: tr, event: e }); - }); - - tr.addEventListener("mouseleave", function(e){ - //if (self._multideselecting) - // tr.classList.remove(self.cssClass + "-row-selected"); - - self._emit("leave", { data: item, row: tr, event: e }); - }); - - tr.addEventListener("mouseenter", function(e){ - //if (self._multiselecting) - // tr.classList.add(self.cssClass + "-row-selected"); - //self._select(tr, item, true); - - self._emit("enter", { data: item, row: tr, event: e }); - }); - - tr.addEventListener("touchstart", function(e){ - - self._tx = e.touches[0].clientX; - self._ty = e.touches[0].clientY; - - self._long_press_item = item; - self._long_press_x = e.touches[0].clientX; - self._long_press_y = e.touches[0].clientY; - if (self._long_press_timeout) - clearTimeout(self._long_press_timeout); - self._long_press_timeout = setTimeout(function(){ - if (self._long_press_item) - { - self._select(tr, self._long_press_item); - self._emit("contextmenu", { data: self._long_press_item, event: e, row: tr }); - self._long_press_timeout = null; - self._long_press_item = null; - } - }, 600); - }); - - this.addEventListener("touchmove", function(e){ - - if (Math.abs(e.touches[0].clientX - self._long_press_x) > 10 || Math.abs(e.touches[0].clientY - self._long_press_y) > 10) - { - self._long_press_item = null; - } - }); - - tr.addEventListener("touchend", function(e){ - - var tx = e.changedTouches[0].clientX; - var ty = e.changedTouches[0].clientY; - - if (Math.abs(tx - self._tx) < 10 && Math.abs(ty - self._ty) < 10 ) - { - self._select(tr, item); - self._emit("touch", { data: item, event: e , row: tr}); - } - - if (self._long_press_timeout) - clearTimeout(self._long_press_timeout); - else - e.preventDefault(); - - self._long_press_item = null; - self._long_press_timeout = null; - }); - - return tr; - }; - - get(id) - { - for(var i = 0; i < this.list.length; i++) - if (this.indexer(this.list[i]) == id) - return this.list[i]; - return null; - } - - getRows(id) - { - var rt = []; - for(var i = 0; i < this.body.rows.length; i++) - if (this.body.rows[i].getAttribute("data-id") == id) - rt.push(this.body.rows[i]); - return rt; - } - - toJSON(level) - { - //if (!level) - // level = 3; - - var headers = ["#"]; - var list = []; - - // make header - for(var i = 0; i < this.layout.length; i++) - if (!( this.layout[i].noPrint || this.layout[i].noExport) && this.headers[i].style.display !="none") - { - headers.push( this.layout[i].name); - } - - var index = 1; - - // build table - for(var i = 0; i < this.body.rows.length; i++) - { - var row = this.body.rows[i]; - var rowLevel = parseInt(row.getAttribute("data-level")); - - if (level) - { - if (rowLevel > level) - continue; - } - else if (row.classList.contains(this.cssClass + "-row-hidden")) - { - continue; - } - - var item = [rowLevel, index++]; - for(var j = 0; j < this.layout.length; j++) - if (!( this.layout[j].noPrint || this.layout[j].noExport) && this.headers[j].style.display !="none") - { - var text = ""; - for(var k = 0; k < row.cells[j].childNodes.length; k++) - if (row.cells[j].childNodes[k].nodeType == 3) - { - text = row.cells[j].childNodes[k].data; - break; - } - - item.push(text);//row.cells[j].innerHTML); - } - list.push(item); - } - - return {headers: headers, data: list}; - } - - toTable(level){ - // create table - var tbl = document.createElement("table"); - var header = tbl.createTHead(); - var body = tbl.createTBody(); - - var tr = header.insertRow(); - - // make header - for(var i = 0; i < this.layout.length; i++) - if (!this.layout[i].noPrint && this.headers[i].style.display !="none") - { - var th = tr.insertCell(); - th.innerHTML = this.layout[i].name; - } - - // build table - for(var i = 0; i < this.body.rows.length; i++) - { - var row = this.body.rows[i]; - if (level) - { - if (parseInt(row.getAttribute("data-level")) > level) - continue; - } - else if (row.classList.contains(this.cssClass + "-row-hidden")) - { - continue; - } - - tr = body.insertRow(); - tr.classList.add("level-" + (parseInt(row.getAttribute("data-level"))+1)); - - for(var j = 0; j < this.layout.length; j++) - if (!this.layout[j].noPrint && this.headers[j].style.display !="none") - { - var td = tr.insertCell(); - td.innerHTML = row.cells[j].innerHTML; - } - } - - return tbl; - }; - - _removeRow(row) - { - var level = parseInt(row.getAttribute("data-level")); - var nextIndex = row.rowIndex; // zero-indexed (dummy header included, so it's 1-indexed') - // remove all children - while(nextIndex < this.body.rows.length){ - var r = this.body.rows[nextIndex]; - var l = parseInt(r.getAttribute("data-level")); - if (l <= level) - break; - this.body.rows.deleteRow(nextIndex++); - } - - // get parent row - var parentRow = this._getParentRow(row); - // remove row itself - this.body.deleteRow(row.rowIndex-1); - // remove expand button from parent if it has no more children - if (parentRow) - { - // last item ? means has no children - if (parentRow.rowIndex == this.body.rows.length - || parseInt(this.body.rows[parentRow.rowIndex].getAttribute("data-level")) <= parseInt(parentRow.getAttribute("data-level"))) - { - // remove expand button - var button = parentRow.getElementsByClassName(this.cssClass + "-tree"); - if (button.length > 0) - button[0].parentNode.removeChild(button[0]); - } - - // render parent (in case formatter depends on children) - //var parent = this.get(parseInt(parentRow.getAttribute("data-id"))); - //this._renderRow(parentRow, parent); - } - } - - _getById(id) - { - for(var i = 0; i < this.list.length; i++) - if (this.indexer(this.list[i]) == id) - return this.list[i]; - - return null;// this; - } - - remove(item) - { - if (typeof item == "string" || typeof item == "number") - item = this._getById(item); - - if (item == null) - return; - - var rows = this.getRows(this.indexer(item)); - // remove all occurrences - for(var i = 0; i < rows.length; i++) - this._removeRow(rows[i]); - - var i = this.list.indexOf(item); - this.list.splice(i, 1); - - return this; - } - - clear() - { - while(this.body.rows.length > 0) - this.body.deleteRow(0); - - this.list = []; - - return this; - } - - - //_renderRow(row, item, propertyName) - //{ - // if (propertyName) - // { - // var indexes = this._findIndexes(propertyName); - - // for(var i = 0; i < indexes.length; i++) - // { - // var expand = null; - // if (indexes[i] == 0) - // { - // expand = row.cells[0].getElementsByClassName(this.cssClass + "-tree"); - // expand = expand.length > 0 ? expand[0] : null; - // } - - // if (this.layout[indexes[i]].formatter) - // { - // var rt = this.layout[indexes[i]].formatter(item[propertyName], item, row.cells[indexes[i]]); - - // if (rt == null) - // { - // // do nothing - // expand = false; - // } - // else if (rt instanceof Element) - // { - // row.cells[indexes[i]].innerHTML = ""; - // row.cells[indexes[i]].appendChild(rt); - // } - // else - // row.cells[indexes[i]].innerHTML=rt; - // } - // else - // row.cells[indexes[i]].innerHTML=item[propertyName]; - - // if (expand) - // row.cells[0].insertAdjacentElement("afterbegin", expand); - // } - // } - // else - // { - // var expand = row.cells[0].getElementsByClassName(this.cssClass + "-tree"); - // expand = expand.length > 0 ? expand[0] : null; - - // for(var i = 0; i < this.layout.length; i++) - // { - // var column = this.layout[i]; - // if (column.formatter) - // { - // var rt = column.formatter(item[column.field], item, row.cells[i]); - // if (rt instanceof Element) - // { - // row.cells[i].innerHTML = ""; - // row.cells[i].appendChild(rt); - // } - // else - // row.cells[i].innerHTML=rt; - // } - // else - // row.cells[i].innerHTML=item[column.field]; - // } - - // if (expand) - // row.cells[0].insertAdjacentElement("afterbegin", expand); - // } - //} - - _getParentRow(row) - { - var level = parseInt(row.getAttribute("data-level")); - for(var i = row.rowIndex - 2; i >= 0; i--) - { - if (parseInt(this.body.rows[i].getAttribute("data-level")) < level) - return this.body.rows[i]; - } - } - - _renderItem(item, propertyName = null) - { - var rows = this.getRows(this.indexer(item)); - var removedRows = []; - - var self = this; - - var parentsChanged = this.parents_changed(item, propertyName); - - if (propertyName == null || parentsChanged) - { - var notModifiedParents = []; - - // remove from parents - var parents = this.parents_getter(item); - - for(var i = 0; i < rows.length; i++) - { - var row = rows[i]; - var level = parseInt(row.getAttribute("data-level")); - // get parent row - var parentRow = this._getParentRow(row); - if (parentRow) - { - // parent found - var parent = this.get(parseInt(parentRow.getAttribute("data-id"))); - if (parents == null || parents.indexOf(parent) == -1) - { - // remove this node - this._removeRow(row); - removedRows.push(row); - } - else - notModifiedParents.push(parent); - } - } - - // add to new parents - if (parents != null) - { - for(var i = 0; i < parents.length; i++) - { - var parent = parents[i]; - if (notModifiedParents.indexOf(parent) == -1 && this.list.indexOf(parent) > -1) - { - // add new row - var inListParents = this.getRows(this.indexer(parent)); - - for(var j = 0; j < inListParents.length; j++) - { - var parentRow = inListParents[j]; - var treeButton = parentRow.getElementsByClassName(this.cssClass + "-tree", parentRow); - if (treeButton.length == 0) - { - this._createTreeButton(parentRow); - this._addRow(item, parseInt(parentRow.getAttribute("data-level")) + 1, false, parentRow.rowIndex); - } - else - { - this._addRow(item, parseInt(parentRow.getAttribute("data-level")) + 1, treeButton[0].getAttribute("data-expand") == '1', parentRow.rowIndex); - } - } - } - } - } - } - else - { - // render parent (in case formatter depends on children) - //for(var i = 0; i < rows.length; i++) - //{ - // var parentRow = this._getParentRow(rows[i]); - // if (parentRow) - // { - // var parent = this.get(parseInt(parentRow.getAttribute("data-id"))); - // this._renderRow(parentRow, parent, propertyName); - // } - //} - } - - // render the non-removed rows. - //for(var i = 0; i < rows.length; i++) - // if (removedRows.indexOf(rows[i]) == -1) - // this._renderRow(rows[i], item, propertyName); - } - - update(item, propertyName) - { - if (item) - this._renderItem(item, propertyName); - else - { - for(var i = 0; i < this.list.length; i++) - this._renderItem(this.list[i]); - } - - return this; - } - - - - async setData(value) - { - await super.setData(value); - - this.clear(); - - if (this.tree) - { - var self = this; - var loadFunction = function(items, level) - { - for(var i = 0; i < items.length; i++) - { - var item = items[i]; - self.list.push(item); - - var row = self._addRow(item, level, level==0); - if (item.children && item.children.length > 0) - { - self._createTreeButton(row); - // load children - loadFunction(item.children, level+1); - } - } - } - - // recursively load items - loadFunction(value, 0); - } - else - { - for (var i = 0; i < value.length; i++) - this.add(value[i]); - } - } -}); \ No newline at end of file + //tw += cw; + self.header.style.width = tw + "px"; + self.table.style.width = tw + "px"; + + col.style.width = cw + "px"; + //dummy.style.width = cw + "px";// col.style.width; + } + } + }); + + // load data + //if (this.data) + // this.load(this.data); + + //this.updateSize(); + + this._created = true; + + if (this._layout) this.layout = this._layout; + } + + updateSize() { + let totalWidth = 0; + + for (var i = 0; i < this.table.tHead.rows[0].cells.length; i++) { + var header = this.table.tHead.rows[0].cells[i]; + var width = header.clientWidth + "px"; + + if (width == "0px") { + width = this.headers[i].getAttribute("data-width"); + if (width.substring(width.length - 1) == "%") + width = + (parseInt(width.substring(0, width.length - 1)) / 100) * + this.clientWidth + + "px"; + } + + if (header.style.display != "none") + totalWidth += parseInt(width.substr(0, width.length - 2)); + + header.style.width = width; + } + + if (this.clientWidth > 0) { + this.body.style.width = this.table.tHead.clientWidth + "px"; + this.table.tHead.style.width = this.table.tHead.clientWidth + "px"; + } else { + this.table.style.width = totalWidth + "px"; + } + } + + sort(column, desc) { + if (this.tree) return; + + //let column = this.layout[columnIndex]; + + if (column.sorter) { + this.list.sort(column.sorter); + } else { + this.list.sort(function (a, b) { + if ( + typeof a[column.field] == "number" || + a[column.field] instanceof Date + ) + return a[column.field] - b[column.field]; + else return a[column.field].toString().localeCompare(b[column.field]); + }); + } + + if (desc) this.list.reverse(); + + for (var i = 0; i < this.list.length; i++) { + var tr = this.getRows(this.indexer(this.list[i]))[0]; + this.body.insertAdjacentElement("beforeEnd", tr); + } + + for (var i = 0; i < this.layout.length; i++) { + let th = this.table.tHead.rows[0].cells[i]; + let txt = th.getElementsByClassName(this.cssClass + "-header-text")[0]; + + if (column !== this.layout[i]) txt.setAttribute("data-dir", "normal"); + else if (desc) txt.setAttribute("data-dir", "up"); + else txt.setAttribute("data-dir", "down"); + } + } + + setRowVisible(row, visible) { + var level = parseInt(row.getAttribute("data-level")); + + if (visible) { + row.classList.remove(this.cssClass + "-row-hidden"); + row.classList.remove(this.cssClass + "-row-selected"); + + // make sure parent is visible + for (var i = row.rowIndex - 2; i >= 0; i--) { + var lev = parseInt(this.body.rows[i].getAttribute("data-level")); + if (lev > level) break; + else if (lev < level) { + this.setRowVisible(this.body.rows[i], true); + break; + } + } + } else { + row.classList.add(this.cssClass + "-row-hidden"); + // make sure children are visible + for (var i = row.rowIndex; i < this.body.rows.length; i++) { + var lev = parseInt(this.body.rows[i].getAttribute("data-level")); + if (lev <= level) break; + this.body.rows[i].classList.add(this.cssClass + "-row-hidden"); + } + } + } + + expand(row, visible) { + var button = row.getElementsByClassName(this.cssClass + "-tree")[0]; + button.setAttribute("data-expand", visible ? 1 : 0); + var level = parseInt(row.getAttribute("data-level")); + + for (var i = row.rowIndex; i < this.body.rows.length; i++) { + var lev = parseInt(this.body.rows[i].getAttribute("data-level")); + if (lev <= level) break; + + if (!visible) { + button = this.body.rows[i].getElementsByClassName( + this.cssClass + "-tree" + ); + if (button.length > 0) button[0].setAttribute("data-expand", 0); + this.body.rows[i].classList.add(this.cssClass + "-row-hidden"); + } else if (lev == level + 1) + this.body.rows[i].classList.remove(this.cssClass + "-row-hidden"); + } + + //this.updateSize(); + } + + filter(queryFunction) { + if (queryFunction) { + this.last_query = queryFunction; + + for (var i = 0; i < this.body.rows.length; i++) { + var item = this.get( + parseInt(this.body.rows[i].getAttribute("data-id")) + ); + var visible = queryFunction(item); + this.setRowVisible(this.body.rows[i], visible); + } + } + // restore default view + else { + this.last_query = function () { + return true; + }; + + // view all + for (var i = 0; i < this.body.rows.length; i++) + this.body.rows[i].classList.remove(this.cssClass + "-row-hidden"); + + // hide non-expanded + for (var i = 0; i < this.body.rows.length; i++) { + var row = this.body.rows[i]; + var level = parseInt(row.getAttribute("data-level")); + var button = row.getElementsByClassName(this.cssClass + "-tree"); + if (button.length > 0) { + // hide ? + if (button[0].getAttribute("data-expand") == "0") { + for (i = i + 1; i < this.body.rows.length; i++) { + var subRow = this.body.rows[i]; + var l = parseInt(subRow.getAttribute("data-level")); + if (l > level) + subRow.classList.add(this.cssClass + "-row-hidden"); + else { + i--; + break; + } + } + } + } + } + } + } + + _selectChildren(row, value) { + var level = parseInt(row.getAttribute("data-level")); + + for (var i = row.rowIndex; i < this.body.rows.length; i++) { + var subRow = this.body.rows[i]; + var l = parseInt(subRow.getAttribute("data-level")); + if (l > level) { + if (value) subRow.classList.add(this.cssClass + "-row-selected"); + else subRow.classList.remove(this.cssClass + "-row-selected"); + } else { + break; + } + } + } + + _select(row, item, multiple = false, context = false) { + if (this.multiselect) { + var checked = row.classList.contains(this.cssClass + "-row-selected"); + + // implement Microsoft Windows Explorer behaivor + if (context) { + multiple = checked || multiple; + checked = !checked; + } + + if (multiple) { + var rows = this.getRows(this.indexer(item)); + + if (checked) + for (var i = 0; i < rows.length; i++) { + rows[i].classList.remove(this.cssClass + "-row-selected"); + this._selectChildren(rows[i], false); + } + else + for (var i = 0; i < rows.length; i++) { + rows[i].classList.add(this.cssClass + "-row-selected"); + this._selectChildren(rows[i], true); + } + } else { + for (var i = 0; i < this.body.rows.length; i++) + this.body.rows[i].classList.remove(this.cssClass + "-row-selected"); + + row.classList.add(this.cssClass + "-row-selected"); + this._selectChildren(row, true); + } + } else { + for (var i = 0; i < this.body.rows.length; i++) + if (this.body.rows[i] == row) + row.classList.add(this.cssClass + "-row-selected"); + else + this.body.rows[i].classList.remove(this.cssClass + "-row-selected"); + this._selected = item; + } + } + + get selected() { + if (this.multiselect) { + var rt = []; + for (var i = 0; i < this.body.rows.length; i++) { + if ( + this.body.rows[i].classList.contains( + this.cssClass + "-row-selected" + ) + ) { + var item = this.get(this.body.rows[i].getAttribute("data-id")); + if (rt.indexOf(item) < 0) rt.push(item); + } + } + + return rt; + } else return this._selected; + } + + _applyFilter() { + for (var i = 0; i < this.list.length; i++) { + var item = this.list[i]; + el = document.getElementById( + this.id + "_" + this.indexer(item), + this.body + ); + + // visible by default + el.style.display = ""; + + for (var j = 0; j < this.layout.length; j++) { + var column = this.layout[j]; + if (column.filter) + column.filter.forEach(function (filter) { + if (item[column.field] == filter) { + // hide this one + el.style.display = "none"; + } + }); + } + } + } + + get(id) { + for (var i = 0; i < this.list.length; i++) + if (this.indexer(this.list[i]) == id) return this.list[i]; + } + + setColumnVisible(index, visible) { + var display = visible ? "table-cell" : "none"; + var columnWidth = this.headers[index].clientWidth; + + for (var i = 0; i < this.table.rows.length; i++) + this.table.rows[i].cells[index].style.display = display; + + this.headers[index].style.display = display; + + // shrink the table + if (display == "none") { + //this.header.width = (this.header.clientWidth - columnWidth) + "px"; + } + + //this.updateSize(); + } + + containsAny(items) { + if (items == null) return false; + + for (var i = 0; i < items.length; i++) { + if (this.list.indexOf(items[i]) > -1) return true; + } + + return false; + } + + _createTreeButton(row, dynamicLoading, item) { + var self = this; + var button = document.createElement("div"); + button.className = this.cssClass + "-tree"; + + button.setAttribute("data-expand", dynamicLoading ? 2 : 0); + button.addEventListener("click", function () { + var eState = this.getAttribute("data-expand"); + + if (eState == "2") { + var ev = { + button: button, + item: item, + row: row, + table: self, + success: function () { + self.expand(this.button.parentNode.parentNode, 1); + }, + failure: function (errorMsg) { + this.setAttribute("data-expand", 2); + }, + }; + + this.setAttribute("data-expand", 3); + + // raise event + self._emit("expand", ev); + } else if (eState == "0") { + self.expand(this.parentNode.parentNode, true); + } else if (eState == "1") { + self.expand(this.parentNode.parentNode, false); + } + }); + + row.cells[0].insertAdjacentElement("afterbegin", button); + } + + add( + item, + dynamicLoading //fast) + ) { + this.list.push(item); + + var self = this; + var parents = this.parents_getter(item); + var newRow; + + if (this.containsAny(parents)) { + for (var i = 0; i < parents.length; i++) { + var parent = parents[i]; + var inListParents = this.getRows(this.indexer(parent)); + + for (var j = 0; j < inListParents.length; j++) { + var parentRow = inListParents[j]; + // add expand button to parent + var treeButton = parentRow.getElementsByClassName( + this.cssClass + "-tree", + parentRow + ); + + if (treeButton.length == 0) { + this._createTreeButton(parentRow); + newRow = this._addRow( + item, + parseInt(parentRow.getAttribute("data-level")) + 1, + false, + parentRow.rowIndex + ); + } else { + newRow = this._addRow( + item, + parseInt(parentRow.getAttribute("data-level")) + 1, + treeButton[0].getAttribute("data-expand") == "1", + parentRow.rowIndex + ); + } + } + + // perhaps parent row depends on children + this.update(parent); + } + } else { + newRow = this._addRow(item, 0, true); + } + + if (dynamicLoading) this._createTreeButton(newRow, true, item); + + // @TODO: fix this since modified event is removed + if (item.on) + if (this.updateOnModification) + item.on("modified", function (propertyName) { + //console.log("render", propertyName, item); + self.update(item, propertyName); + }); + + //if (!fast) + + // self.layout.forEach(function(field){ + // if (field.type && field.type == "select") + //{ + // calculate distinct + //} + //}); + //this.updateSize(); + + return self; + } + + _findIndexes(propertyIndex) { + var rt = []; + for (var i = 0; i < this.layout.length; i++) { + if ( + this.layout[i].field == propertyIndex || + this.layout[i].field == "_any" + ) + rt.push(i); + } + return rt; + } + + _addRow(item, level, visible, index) { + var self = this; + // add item + var tr = self.body.insertRow(index); + tr.setAttribute("data-id", this.indexer(item)); + tr.setAttribute("data-level", level); + if (visible) tr.className = this.cssClass + "-row"; + else + tr.className = this.cssClass + "-row " + this.cssClass + "-row-hidden"; + + for (var i = 0; i < this.layout.length; i++) { + let column = this.layout[i]; + + let cl = column.node.cloneNode(true); // tr.insertCell(); + + //this._make_bindings(cl) + + IUI.bind( + cl, + false, + "table", + IUI.extend(this.__i_bindings, { index: i }, true) + ); + + tr.appendChild(cl); + + if (cl.dataMap != null) + cl.dataMap.render(item).then(() => self._renderElement(cl, cl.data)); + else { + cl.data = item; + this._renderElement(cl, cl.data); + } + //if (column.formatter) + //{ + // var rt = column.formatter(item[column.field], item, cl); + // if (rt instanceof Element) + // { + // cl.appendChild(rt); + // } + // else + // cl.innerHTML=rt; + //} + //else + // cl.innerHTML=item[column.field]; + + cl.style.display = this.table.tHead.rows[0].cells[i].style.display; + } + + tr.addEventListener("click", function (e) { + self._select(tr, item, e.ctrlKey); + self._emit("click", { data: item, row: tr, event: e }); + }); + + tr.addEventListener("dblclick", function (e) { + self._select(tr, item, e.ctrlKey); + self._emit("rowdblclick", { data: item, row: tr, event: e }); + }); + + tr.addEventListener("contextmenu", function (e) { + self._select(tr, item, e.ctrlKey, true); + self._emit("contextmenu", { data: item, row: tr, event: e }); + }); + + tr.addEventListener("mouseleave", function (e) { + //if (self._multideselecting) + // tr.classList.remove(self.cssClass + "-row-selected"); + + self._emit("leave", { data: item, row: tr, event: e }); + }); + + tr.addEventListener("mouseenter", function (e) { + //if (self._multiselecting) + // tr.classList.add(self.cssClass + "-row-selected"); + //self._select(tr, item, true); + + self._emit("enter", { data: item, row: tr, event: e }); + }); + + tr.addEventListener("touchstart", function (e) { + self._tx = e.touches[0].clientX; + self._ty = e.touches[0].clientY; + + self._long_press_item = item; + self._long_press_x = e.touches[0].clientX; + self._long_press_y = e.touches[0].clientY; + if (self._long_press_timeout) clearTimeout(self._long_press_timeout); + self._long_press_timeout = setTimeout(function () { + if (self._long_press_item) { + self._select(tr, self._long_press_item); + self._emit("contextmenu", { + data: self._long_press_item, + event: e, + row: tr, + }); + self._long_press_timeout = null; + self._long_press_item = null; + } + }, 600); + }); + + this.addEventListener("touchmove", function (e) { + if ( + Math.abs(e.touches[0].clientX - self._long_press_x) > 10 || + Math.abs(e.touches[0].clientY - self._long_press_y) > 10 + ) { + self._long_press_item = null; + } + }); + + tr.addEventListener("touchend", function (e) { + var tx = e.changedTouches[0].clientX; + var ty = e.changedTouches[0].clientY; + + if (Math.abs(tx - self._tx) < 10 && Math.abs(ty - self._ty) < 10) { + self._select(tr, item); + self._emit("touch", { data: item, event: e, row: tr }); + } + + if (self._long_press_timeout) clearTimeout(self._long_press_timeout); + else e.preventDefault(); + + self._long_press_item = null; + self._long_press_timeout = null; + }); + + return tr; + } + + get(id) { + for (var i = 0; i < this.list.length; i++) + if (this.indexer(this.list[i]) == id) return this.list[i]; + return null; + } + + getRows(id) { + var rt = []; + for (var i = 0; i < this.body.rows.length; i++) + if (this.body.rows[i].getAttribute("data-id") == id) + rt.push(this.body.rows[i]); + return rt; + } + + toJSON(level) { + //if (!level) + // level = 3; + + var headers = ["#"]; + var list = []; + + // make header + for (var i = 0; i < this.layout.length; i++) + if ( + !(this.layout[i].noPrint || this.layout[i].noExport) && + this.headers[i].style.display != "none" + ) { + headers.push(this.layout[i].name); + } + + var index = 1; + + // build table + for (var i = 0; i < this.body.rows.length; i++) { + var row = this.body.rows[i]; + var rowLevel = parseInt(row.getAttribute("data-level")); + + if (level) { + if (rowLevel > level) continue; + } else if (row.classList.contains(this.cssClass + "-row-hidden")) { + continue; + } + + var item = [rowLevel, index++]; + for (var j = 0; j < this.layout.length; j++) + if ( + !(this.layout[j].noPrint || this.layout[j].noExport) && + this.headers[j].style.display != "none" + ) { + var text = ""; + for (var k = 0; k < row.cells[j].childNodes.length; k++) + if (row.cells[j].childNodes[k].nodeType == 3) { + text = row.cells[j].childNodes[k].data; + break; + } + + item.push(text); //row.cells[j].innerHTML); + } + list.push(item); + } + + return { headers: headers, data: list }; + } + + toTable(level) { + // create table + var tbl = document.createElement("table"); + var header = tbl.createTHead(); + var body = tbl.createTBody(); + + var tr = header.insertRow(); + + // make header + for (var i = 0; i < this.layout.length; i++) + if ( + !this.layout[i].noPrint && + this.headers[i].style.display != "none" + ) { + var th = tr.insertCell(); + th.innerHTML = this.layout[i].name; + } + + // build table + for (var i = 0; i < this.body.rows.length; i++) { + var row = this.body.rows[i]; + if (level) { + if (parseInt(row.getAttribute("data-level")) > level) continue; + } else if (row.classList.contains(this.cssClass + "-row-hidden")) { + continue; + } + + tr = body.insertRow(); + tr.classList.add( + "level-" + (parseInt(row.getAttribute("data-level")) + 1) + ); + + for (var j = 0; j < this.layout.length; j++) + if ( + !this.layout[j].noPrint && + this.headers[j].style.display != "none" + ) { + var td = tr.insertCell(); + td.innerHTML = row.cells[j].innerHTML; + } + } + + return tbl; + } + + _removeRow(row) { + var level = parseInt(row.getAttribute("data-level")); + var nextIndex = row.rowIndex; // zero-indexed (dummy header included, so it's 1-indexed') + // remove all children + while (nextIndex < this.body.rows.length) { + var r = this.body.rows[nextIndex]; + var l = parseInt(r.getAttribute("data-level")); + if (l <= level) break; + this.body.rows.deleteRow(nextIndex++); + } + + // get parent row + var parentRow = this._getParentRow(row); + // remove row itself + this.body.deleteRow(row.rowIndex - 1); + // remove expand button from parent if it has no more children + if (parentRow) { + // last item ? means has no children + if ( + parentRow.rowIndex == this.body.rows.length || + parseInt( + this.body.rows[parentRow.rowIndex].getAttribute("data-level") + ) <= parseInt(parentRow.getAttribute("data-level")) + ) { + // remove expand button + var button = parentRow.getElementsByClassName( + this.cssClass + "-tree" + ); + if (button.length > 0) button[0].parentNode.removeChild(button[0]); + } + + // render parent (in case formatter depends on children) + //var parent = this.get(parseInt(parentRow.getAttribute("data-id"))); + //this._renderRow(parentRow, parent); + } + } + + _getById(id) { + for (var i = 0; i < this.list.length; i++) + if (this.indexer(this.list[i]) == id) return this.list[i]; + + return null; // this; + } + + remove(item) { + if (typeof item == "string" || typeof item == "number") + item = this._getById(item); + + if (item == null) return; + + var rows = this.getRows(this.indexer(item)); + // remove all occurrences + for (var i = 0; i < rows.length; i++) this._removeRow(rows[i]); + + var i = this.list.indexOf(item); + this.list.splice(i, 1); + + return this; + } + + clear() { + while (this.body.rows.length > 0) this.body.deleteRow(0); + + this.list = []; + + return this; + } + + //_renderRow(row, item, propertyName) + //{ + // if (propertyName) + // { + // var indexes = this._findIndexes(propertyName); + + // for(var i = 0; i < indexes.length; i++) + // { + // var expand = null; + // if (indexes[i] == 0) + // { + // expand = row.cells[0].getElementsByClassName(this.cssClass + "-tree"); + // expand = expand.length > 0 ? expand[0] : null; + // } + + // if (this.layout[indexes[i]].formatter) + // { + // var rt = this.layout[indexes[i]].formatter(item[propertyName], item, row.cells[indexes[i]]); + + // if (rt == null) + // { + // // do nothing + // expand = false; + // } + // else if (rt instanceof Element) + // { + // row.cells[indexes[i]].innerHTML = ""; + // row.cells[indexes[i]].appendChild(rt); + // } + // else + // row.cells[indexes[i]].innerHTML=rt; + // } + // else + // row.cells[indexes[i]].innerHTML=item[propertyName]; + + // if (expand) + // row.cells[0].insertAdjacentElement("afterbegin", expand); + // } + // } + // else + // { + // var expand = row.cells[0].getElementsByClassName(this.cssClass + "-tree"); + // expand = expand.length > 0 ? expand[0] : null; + + // for(var i = 0; i < this.layout.length; i++) + // { + // var column = this.layout[i]; + // if (column.formatter) + // { + // var rt = column.formatter(item[column.field], item, row.cells[i]); + // if (rt instanceof Element) + // { + // row.cells[i].innerHTML = ""; + // row.cells[i].appendChild(rt); + // } + // else + // row.cells[i].innerHTML=rt; + // } + // else + // row.cells[i].innerHTML=item[column.field]; + // } + + // if (expand) + // row.cells[0].insertAdjacentElement("afterbegin", expand); + // } + //} + + _getParentRow(row) { + var level = parseInt(row.getAttribute("data-level")); + for (var i = row.rowIndex - 2; i >= 0; i--) { + if (parseInt(this.body.rows[i].getAttribute("data-level")) < level) + return this.body.rows[i]; + } + } + + _renderItem(item, propertyName = null) { + var rows = this.getRows(this.indexer(item)); + var removedRows = []; + + var self = this; + + var parentsChanged = this.parents_changed(item, propertyName); + + if (propertyName == null || parentsChanged) { + var notModifiedParents = []; + + // remove from parents + var parents = this.parents_getter(item); + + for (var i = 0; i < rows.length; i++) { + var row = rows[i]; + var level = parseInt(row.getAttribute("data-level")); + // get parent row + var parentRow = this._getParentRow(row); + if (parentRow) { + // parent found + var parent = this.get(parseInt(parentRow.getAttribute("data-id"))); + if (parents == null || parents.indexOf(parent) == -1) { + // remove this node + this._removeRow(row); + removedRows.push(row); + } else notModifiedParents.push(parent); + } + } + + // add to new parents + if (parents != null) { + for (var i = 0; i < parents.length; i++) { + var parent = parents[i]; + if ( + notModifiedParents.indexOf(parent) == -1 && + this.list.indexOf(parent) > -1 + ) { + // add new row + var inListParents = this.getRows(this.indexer(parent)); + + for (var j = 0; j < inListParents.length; j++) { + var parentRow = inListParents[j]; + var treeButton = parentRow.getElementsByClassName( + this.cssClass + "-tree", + parentRow + ); + if (treeButton.length == 0) { + this._createTreeButton(parentRow); + this._addRow( + item, + parseInt(parentRow.getAttribute("data-level")) + 1, + false, + parentRow.rowIndex + ); + } else { + this._addRow( + item, + parseInt(parentRow.getAttribute("data-level")) + 1, + treeButton[0].getAttribute("data-expand") == "1", + parentRow.rowIndex + ); + } + } + } + } + } + } else { + // render parent (in case formatter depends on children) + //for(var i = 0; i < rows.length; i++) + //{ + // var parentRow = this._getParentRow(rows[i]); + // if (parentRow) + // { + // var parent = this.get(parseInt(parentRow.getAttribute("data-id"))); + // this._renderRow(parentRow, parent, propertyName); + // } + //} + } + + // render the non-removed rows. + //for(var i = 0; i < rows.length; i++) + // if (removedRows.indexOf(rows[i]) == -1) + // this._renderRow(rows[i], item, propertyName); + } + + update(item, propertyName) { + if (item) this._renderItem(item, propertyName); + else { + for (var i = 0; i < this.list.length; i++) + this._renderItem(this.list[i]); + } + + return this; + } + + async setData(value) { + await super.setData(value); + + this.clear(); + + if (this.tree) { + var self = this; + var loadFunction = function (items, level) { + for (var i = 0; i < items.length; i++) { + var item = items[i]; + self.list.push(item); + + var row = self._addRow(item, level, level == 0); + if (item.children && item.children.length > 0) { + self._createTreeButton(row); + // load children + loadFunction(item.children, level + 1); + } + } + }; + + // recursively load items + loadFunction(value, 0); + } else { + for (var i = 0; i < value.length; i++) this.add(value[i]); + } + } + } +); diff --git a/src/UI/Tabs.js b/src/UI/Tabs.js index 9fe089a..c30487c 100644 --- a/src/UI/Tabs.js +++ b/src/UI/Tabs.js @@ -1,151 +1,149 @@ - -import IUIElement from "../Core/IUIElement.js"; +import IUIElement from "../Core/IUIElement.js"; import Tab from "./Tab.js"; import { IUI } from "../Core/IUI.js"; import Check from "./Check.js"; -export default IUI.module(class Tabs extends IUIElement { - +export default IUI.module( + class Tabs extends IUIElement { constructor() { - super({ - selected: null, - list: [], - _y: 0, - _x: 0, - auto: true, - }); + super({ + selected: null, + list: [], + _y: 0, + _x: 0, + auto: true, + }); } + create() { + var self = this; - create() - { - var self = this; + this._register("select"); - this._register("select"); + this._bar = document.createElement("div"); + this._bar.classList.add(this.cssClass + "-bar"); + this._ext = document.createElement("span"); + this._ext.className = this.cssClass + "-bar-ext"; + this._bar.appendChild(this._ext); - this._bar = document.createElement("div"); - this._bar.classList.add(this.cssClass + "-bar"); + //this.insertAdjacentElement("afterBegin", this._bar); - this._ext = document.createElement("span"); - this._ext.className = this.cssClass + "-bar-ext"; - this._bar.appendChild(this._ext); + this._body = document.createElement("div"); + this._body.className = this.cssClass + "-body"; + this.appendChild(this._bar); + this.appendChild(this._body); - - //this.insertAdjacentElement("afterBegin", this._bar); + var items = []; // this.getElementsByClassName("tab"); - this._body = document.createElement("div"); - this._body.className = this.cssClass + "-body"; + for (var i = 0; i < this.children.length; i++) + if (this.children[i] instanceof Tab) items.push(this.children[i]); - this.appendChild(this._bar); - this.appendChild(this._body); + this._observer = new ResizeObserver(x => { + self._body.style.height = x[0].target.offsetHeight + "px"; // x[0].contentRect.height + "px"; + }); + items.map(x => self.add(x)); + this.addEventListener( + "touchstart", + function (e) { + var x = e.target; + do { + if (x == self) break; + var sy = window.getComputedStyle(x)["overflow-x"]; + if ( + x.scrollWidth > x.clientWidth && + (sy == "scroll" || sy == "auto") + ) + return; + } while ((x = x.parentElement)); - var items = [];// this.getElementsByClassName("tab"); + self._x = e.originalEvent + ? e.originalEvent.touches[0].clientX + : e.touches[0].clientX; + self._y = e.originalEvent + ? e.originalEvent.touches[0].clientY + : e.touches[0].clientY; + }, + { passive: true } + ); - for (var i = 0; i < this.children.length; i++) - if (this.children[i] instanceof Tab) - items.push(this.children[i]); + this.addEventListener( + "touchmove", + function (e) { + if (!self._x || !self._y) { + return; + } - this._observer = new ResizeObserver(x => { - self._body.style.height = x[0].target.offsetHeight + "px";// x[0].contentRect.height + "px"; - }); + var xUp = e.originalEvent + ? e.originalEvent.touches[0].clientX + : e.touches[0].clientX; + var yUp = e.originalEvent + ? e.originalEvent.touches[0].clientY + : e.touches[0].clientY; + var xDiff = document.dir == "rtl" ? xUp - self._x : self._x - xUp; + var yDiff = self._y - yUp; - items.map(x => self.add(x)); + var index = self.list.indexOf(self.selected); - - this.addEventListener("touchstart", function (e) { - - var x = e.target; - do { - if (x == self) - break; - var sy = window.getComputedStyle(x)["overflow-x"]; - if (x.scrollWidth > x.clientWidth && (sy == "scroll" || sy == "auto")) - return; - } while (x = x.parentElement) - - self._x = e.originalEvent ? e.originalEvent.touches[0].clientX : e.touches[0].clientX; - self._y = e.originalEvent ? e.originalEvent.touches[0].clientY : e.touches[0].clientY; - }, { passive: true }); - - this.addEventListener("touchmove", function (e) { - if (!self._x || !self._y) { - return; - } - - var xUp = e.originalEvent ? e.originalEvent.touches[0].clientX : e.touches[0].clientX; - var yUp = e.originalEvent ? e.originalEvent.touches[0].clientY : e.touches[0].clientY; - var xDiff = document.dir == "rtl" ? xUp - self._x : self._x - xUp; - var yDiff = self._y - yUp; - - - var index = self.list.indexOf(self.selected); - - if (Math.abs(xDiff) > Math.abs(yDiff)) {/*most significant*/ - if (xDiff > 0) { - if (index < self.list.length - 1) { - self.select(self.list[index + 1]); - //self.selected.scrollIntoView(); - } - /* left swipe */ - } else { - - if (index > 0) - self.select(self.list[index - 1]); - - /* right swipe */ - } + if (Math.abs(xDiff) > Math.abs(yDiff)) { + /*most significant*/ + if (xDiff > 0) { + if (index < self.list.length - 1) { + self.select(self.list[index + 1]); + //self.selected.scrollIntoView(); + } + /* left swipe */ } else { - if (yDiff > 0) { - /* up swipe */ - } else { - /* down swipe */ - } - } - /* reset values */ - self._x = null; - self._y = null; + if (index > 0) self.select(self.list[index - 1]); - }, { passive: true }); + /* right swipe */ + } + } else { + if (yDiff > 0) { + /* up swipe */ + } else { + /* down swipe */ + } + } + /* reset values */ + self._x = null; + self._y = null; + }, + { passive: true } + ); } created() { - //this._updateSize(); + //this._updateSize(); } add(item) { + var label = new Check(); // document.createElement("i-check"); + label.innerHTML = item.caption; - var label = new Check();// document.createElement("i-check"); - label.innerHTML = item.caption; + this._ext.insertAdjacentElement("beforebegin", label); - this._ext.insertAdjacentElement("beforebegin", label); + label.className = this.cssClass + "-button"; - label.className = this.cssClass + "-button"; + item.classList.add(this.cssClass + "-content"); + label.content = item; + item.label = label; - item.classList.add(this.cssClass + "-content"); - label.content = item; - item.label = label; + this._body.append(item); - this._body.append(item); + this.list.push(item); + var self = this; + label.on("check", function (v) { + //if (v && !self._neglect) + self.select(item); + }); + if (item.selected) this.select(item); - - this.list.push(item); - var self = this; - label.on("check", function (v) { - //if (v && !self._neglect) - self.select(item); - }); - - - if (item.selected) - this.select(item); - - - return this; + return this; } //_updateSize() { @@ -157,48 +155,41 @@ export default IUI.module(class Tabs extends IUIElement { //} select(item) { - var tab; - if (item instanceof Tab) + var tab; + if (item instanceof Tab) tab = item; + else if (typeof o === "string" || o instanceof String) + for (var i = 0; i < this.list.length; i++) + if (this.list[i].id == item) { tab = item; - else if (typeof o === 'string' || o instanceof String) - for (var i = 0; i < this.list.length; i++) - if (this.list[i].id == item) { - tab = item; - break; - } - else if (!isNaN(item)) - tab = this.list[i]; + break; + } else if (!isNaN(item)) tab = this.list[i]; - //this._neglect = true; + //this._neglect = true; - var self = this; + var self = this; - this.list.forEach(function (i) { - if (i == tab) - tab.label.check(true);// set(true, false); - else { - i.classList.remove(self.cssClass + "-content-active"); - i.label.check(false);// set(false, false); - } - }); + this.list.forEach(function (i) { + if (i == tab) tab.label.check(true); + // set(true, false); + else { + i.classList.remove(self.cssClass + "-content-active"); + i.label.check(false); // set(false, false); + } + }); + //this._neglect = false; + tab.classList.add(this.cssClass + "-content-active"); - //this._neglect = false; - tab.classList.add(this.cssClass + "-content-active"); + if (this.selected != null) this._observer.unobserve(this.selected); + this.selected = tab; + this._observer.observe(this.selected); - if (this.selected != null) - this._observer.unobserve(this.selected); - this.selected = tab; - this._observer.observe(this.selected); + if (document.dir == "rtl") + this._bar.scrollLeft = tab.label.offsetLeft + tab.label.clientWidth; + else this._bar.scrollLeft = tab.label.offsetLeft - tab.label.clientWidth; - if (document.dir == "rtl") - this._bar.scrollLeft = tab.label.offsetLeft + tab.label.clientWidth; - else - this._bar.scrollLeft = tab.label.offsetLeft - tab.label.clientWidth; - - - this._emit("select", tab); - return this; + this._emit("select", tab); + return this; } - -}); \ No newline at end of file + } +); diff --git a/src/UI/Window.js b/src/UI/Window.js index d8aeefb..c50436c 100644 --- a/src/UI/Window.js +++ b/src/UI/Window.js @@ -1,104 +1,97 @@ import IUIElement from "../Core/IUIElement.js"; import { IUI } from "../Core/IUI.js"; -export default IUI.module(class IUIWindow extends IUIElement { +export default IUI.module( + class IUIWindow extends IUIElement { constructor() { - super({ closeable: true, draggable: false, focus: false }); + super({ closeable: true, draggable: false, focus: false }); - this._register("resize"); - this._register("move"); - this._register("close"); - - this._uid = "d:" + Math.random().toString(36).substring(2); + this._register("resize"); + this._register("move"); + this._register("close"); + this._uid = "d:" + Math.random().toString(36).substring(2); } static moduleName = "window"; create() { - var self = this; + var self = this; - this.tabIndex = 0; + this.tabIndex = 0; - // create header - this._header = document.createElement("div"); - this._header.className = this.cssClass + "-header"; + // create header + this._header = document.createElement("div"); + this._header.className = this.cssClass + "-header"; - if (this.draggable) - this._header.setAttribute("draggable", true); + if (this.draggable) this._header.setAttribute("draggable", true); - var f = this.getElementsByClassName(this.cssClass + "-footer"); - this._footer = f.length > 0 ? f[0] : null; + var f = this.getElementsByClassName(this.cssClass + "-footer"); + this._footer = f.length > 0 ? f[0] : null; - var b = this.getElementsByClassName(this.cssClass + "-body"); - //this.body = b.length > 0 ? b[0]: null; + var b = this.getElementsByClassName(this.cssClass + "-body"); + //this.body = b.length > 0 ? b[0]: null; - if (b.length == 0) { - this._body = document.createElement("div"); - this._body.className = this.cssClass + "-body"; + if (b.length == 0) { + this._body = document.createElement("div"); + this._body.className = this.cssClass + "-body"; - while (this.children.length > (this._footer == null ? 0 : 1)) - this._body.appendChild(this.children[0]); + while (this.children.length > (this._footer == null ? 0 : 1)) + this._body.appendChild(this.children[0]); - this.insertAdjacentElement("afterBegin", this._body); + this.insertAdjacentElement("afterBegin", this._body); + } else this._body = b[0]; - } - else - this._body = b[0]; + if (this.icon) { + this._icon = document.createElement("div"); + this._icon.className = this.cssClass + "-icon"; + //this._icon.src = this.icon; - if (this.icon) { - this._icon = document.createElement("div"); - this._icon.className = this.cssClass + "-icon"; - //this._icon.src = this.icon; + this._icon.style.setProperty("--icon", `url('${this.icon}')`); + this._header.appendChild(this._icon); + } + this._caption = document.createElement("div"); + this._caption.className = this.cssClass + "-caption"; + this._caption.innerHTML = this.caption; - - this._icon.style.setProperty("--icon", `url('${this.icon}')`); - this._header.appendChild(this._icon); - } + this._subtitle = document.createElement("div"); + this._subtitle.className = this.cssClass + "-subtitle"; + this._subtitle.innerHTML = this.subtitle; - this._caption = document.createElement("div"); - this._caption.className = this.cssClass + "-caption"; - this._caption.innerHTML = this.caption; + this._tools = document.createElement("div"); + this._tools.className = this.cssClass + "-tools"; - this._subtitle = document.createElement("div"); - this._subtitle.className = this.cssClass + "-subtitle"; - this._subtitle.innerHTML = this.subtitle; + this._header.appendChild(this._caption); + this._header.appendChild(this._subtitle); + this._header.appendChild(this._tools); - this._tools = document.createElement("div"); - this._tools.className = this.cssClass + "-tools"; + if (this.closeable) { + this._close = document.createElement("div"); + this._close.className = this.cssClass + "-tools-close button"; + this._close.addEventListener("click", function () { + self._emit("close"); + }); + } - this._header.appendChild(this._caption); - this._header.appendChild(this._subtitle); - this._header.appendChild(this._tools); + //this.addEventListener("mousedown", function (e) { + // self.setFocus(true); + //}); - if (this.closeable) { - this._close = document.createElement("div"); - this._close.className = this.cssClass + "-tools-close button"; - this._close.addEventListener("click", function () { - self._emit("close"); - }); - } - - //this.addEventListener("mousedown", function (e) { - // self.setFocus(true); - //}); - - this.insertAdjacentElement("afterBegin", this._header); + this.insertAdjacentElement("afterBegin", this._header); } setHeaderVisible(value) { - this._header.style.display = value ? "" : "none"; - //this._updateSize(); + this._header.style.display = value ? "" : "none"; + //this._updateSize(); } setCloseVisible(value) { - if (this.closeable) - this._close.style.display = value ? "" : "none"; + if (this.closeable) this._close.style.display = value ? "" : "none"; } get icon() { - return this.getAttribute("icon"); + return this.getAttribute("icon"); } /* setFocus(v) { @@ -174,91 +167,98 @@ export default IUI.module(class IUIWindow extends IUIElement { } */ - show() { - //this.setFocus(true); - return this; + //this.setFocus(true); + return this; } move(x, y) { - this.style.left = x + "px"; - this.style.top = y + "px"; - this._emit("move", x, y); - return this; + this.style.left = x + "px"; + this.style.top = y + "px"; + this._emit("move", x, y); + return this; } resize(width, height) { - this.style.width = width + "px"; - this.style.height = height + "px"; + this.style.width = width + "px"; + this.style.height = height + "px"; - this._updateSize(); + this._updateSize(); - this._emit("resize", this.clientWidth, this.clientHeight); + this._emit("resize", this.clientWidth, this.clientHeight); - return this; + return this; } _updateSize() { - if (IUI.responsive) - return; + if (IUI.responsive) return; - if (this._body) { - if (this.clientWidth < this._body.scrollWidth) - this.style.width = this._body.scrollWidth + 1 + "px"; + if (this._body) { + if (this.clientWidth < this._body.scrollWidth) + this.style.width = this._body.scrollWidth + 1 + "px"; - if (this._footer) { + if (this._footer) { + if (this.clientWidth < this._footer.offsetWidth) + this.style.width = this._footer.offsetWidth + "px"; - if (this.clientWidth < this._footer.offsetWidth) - this.style.width = this._footer.offsetWidth + "px"; - - if (this.clientHeight < this._header.offsetHeight + this._body.scrollHeight + this._footer.offsetHeight) - this.style.height = (this._header.offsetHeight + this._body.scrollHeight + this._footer.offsetHeight) + "px"; - - } - else { - if (this.clientHeight < this._header.offsetHeight + this._body.scrollHeight) - this.style.height = (this._header.offsetHeight + this._body.scrollHeight + 1) + "px"; - - } + if ( + this.clientHeight < + this._header.offsetHeight + + this._body.scrollHeight + + this._footer.offsetHeight + ) + this.style.height = + this._header.offsetHeight + + this._body.scrollHeight + + this._footer.offsetHeight + + "px"; + } else { + if ( + this.clientHeight < + this._header.offsetHeight + this._body.scrollHeight + ) + this.style.height = + this._header.offsetHeight + this._body.scrollHeight + 1 + "px"; } + } - // handle windows exceeding document size - if (this.clientHeight > document.body.clientHeight) { - this.style.height = document.body.clientHeight + "px"; - if (this._footer) - this._body.style.height = (this.clientHeight - this._footer.clientHeight - this._header.clientHeight) + "px"; - else - this._body.style.height = (this.clientHeight - this._header.clientHeight) + "px"; - } - - - if (this.clientWidth > document.body.clientWidth) - this.style.width = document.body.clientWidth + 1 + "px"; + // handle windows exceeding document size + if (this.clientHeight > document.body.clientHeight) { + this.style.height = document.body.clientHeight + "px"; + if (this._footer) + this._body.style.height = + this.clientHeight - + this._footer.clientHeight - + this._header.clientHeight + + "px"; + else + this._body.style.height = + this.clientHeight - this._header.clientHeight + "px"; + } + if (this.clientWidth > document.body.clientWidth) + this.style.width = document.body.clientWidth + 1 + "px"; } - get caption() { - return this.getAttribute("caption"); + return this.getAttribute("caption"); } set caption(value) { - this._caption.innerHTML = value; - this.setAttribute("caption", value); + this._caption.innerHTML = value; + this.setAttribute("caption", value); } - get subtitle() { - return this.getAttribute("subtitle"); + return this.getAttribute("subtitle"); } set subtitle(value) { - this._subtitle.innerHTML = value; - this.setAttribute("subtitle", value); + this._subtitle.innerHTML = value; + this.setAttribute("subtitle", value); } - - -}); + } +); /* IUI._nav_list = []; diff --git a/src/iui.js b/src/iui.js index a38f323..ad64a20 100644 --- a/src/iui.js +++ b/src/iui.js @@ -1,64 +1,61 @@ -import {IUI, iui} from "./Core/IUI.js"; +import { IUI, iui } from "./Core/IUI.js"; import "./Core/IUIElement.js"; -import './Core/App.js'; +import "./Core/App.js"; -import './Router/Router.js'; -import './Router/Route.js'; -import './Router/Link.js'; -import './Router/Target.js'; +import "./Router/Router.js"; +import "./Router/Route.js"; +import "./Router/Link.js"; +import "./Router/Target.js"; -import './Data/Repeat.js'; -import './Data/Include.js'; -import './Data/Form.js'; -import './UI/Login.js'; -import './UI/Window.js'; -import './UI/Dialog.js'; -import './UI/Input.js'; -import './UI/Tab.js'; -import './UI/Tabs.js'; +import "./Data/Repeat.js"; +import "./Data/Include.js"; +import "./Data/Form.js"; +import "./UI/Login.js"; +import "./UI/Window.js"; +import "./UI/Dialog.js"; +import "./UI/Input.js"; +import "./UI/Tab.js"; +import "./UI/Tabs.js"; -import './UI/Table.js'; +import "./UI/Table.js"; -import './UI/Check.js'; -import './UI/Button.js'; -import './UI/Navbar.js'; +import "./UI/Check.js"; +import "./UI/Button.js"; +import "./UI/Navbar.js"; -import './UI/DateTimePicker.js'; +import "./UI/DateTimePicker.js"; -import './Data/Layout.js'; -import './Data/Field.js'; +import "./Data/Layout.js"; +import "./Data/Field.js"; -import './UI/Background.js'; -import './UI/Menu.js'; -import './Data/TableRow.js'; +import "./UI/Background.js"; +import "./UI/Menu.js"; +import "./Data/TableRow.js"; -import './UI/Select.js'; +import "./UI/Select.js"; -import './UI/DropDown.js'; -import './UI/Grid.js'; +import "./UI/DropDown.js"; +import "./UI/Grid.js"; -import './UI/Location.js'; -import './UI/CodePreview.js'; +import "./UI/Location.js"; +import "./UI/CodePreview.js"; -window.addEventListener("beforeprint", (e)=>{ - let viewRoute = router.current.viewRoute; - viewRoute.style.height = "auto"; - router.style.height = viewRoute.clientHeight + "px"; +window.addEventListener("beforeprint", e => { + let viewRoute = router.current.viewRoute; + viewRoute.style.height = "auto"; + router.style.height = viewRoute.clientHeight + "px"; }); -window.addEventListener("afterprint", (e)=>{ - let viewRoute = router.current.viewRoute; - viewRoute.style.height = ""; - router.style.height = ""; +window.addEventListener("afterprint", e => { + let viewRoute = router.current.viewRoute; + viewRoute.style.height = ""; + router.style.height = ""; }); window.addEventListener("load", async function () { - await IUI.create(document.body); - await IUI.created(document.body); - //if (window.app != null) { - // window.app._emit("load", { app: window.app }); - // } + await IUI.create(document.body); + await IUI.created(document.body); }); -window.iui = iui; \ No newline at end of file +window.iui = iui;