esiur/iui
2
0
Fork 0
mirror of https://github.com/esiur/iui.git synced 2026-04-04 06:58:22 +00:00
Code Issues Projects Releases Wiki Activity

Add the ability to specify the router base

Browse Source
This commit is contained in:
Mohammed Salman
2022-02-13 19:34:09 +03:00
parent e52b89fb4d
commit 40ef645954
45 changed files with 5255 additions and 5829 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
build/iui.js
View File

@@ -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);

2
package.json
View File

@@ -1,6 +1,6 @@
{
"name": "@esiur/iui",
"version": "1.1.2",
"version": "1.1.3",
"description": "Interactive User Interface",
"main": "iui.js",
"type": "module",

11
src/Core/App.js
View File

@@ -2,7 +2,8 @@
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);
@@ -13,10 +14,8 @@ export default IUI.module(class App extends IUIElement {
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();
@@ -26,5 +25,5 @@ export default IUI.module(class App extends IUIElement {
this._emit("load", { app: this });
this.loaded = true;
}
});
}
);

215
src/Core/Binding.js
View File

@@ -9,15 +9,15 @@ export const BindingType = {
HTMLElementDataAttribute: 4,
IUIElementDataAttribute: 5,
IfAttribute: 6,
RevertAttribute: 7
RevertAttribute: 7,
};
export const AttributeBindingDestination = {
Field: 0,
Attribute: 1
Attribute: 1,
};
const AsyncFunction = Object.getPrototypeOf(async function () { }).constructor;
const AsyncFunction = Object.getPrototypeOf(async function () {}).constructor;
export class Binding {
static create(nodeOrAttributeOrIUIElement, scope) {
@@ -29,33 +29,29 @@ export class Binding {
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;
} 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; }`
code = `try {\r\n context.value = \`${script}\`\r\n}\r\n catch(ex) { context.error = ex; }`;
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("::")) {
} else if (nodeOrAttributeOrIUIElement.name.startsWith("::")) {
isAsync = false;
attrType = AttributeBindingDestination.Attribute;
attrKey = nodeOrAttributeOrIUIElement.name.substr(2);
}
else if (nodeOrAttributeOrIUIElement.name.startsWith("async:")) {
} else if (nodeOrAttributeOrIUIElement.name.startsWith("async:")) {
isAsync = true;
attrType = AttributeBindingDestination.Field;
attrKey = nodeOrAttributeOrIUIElement.name.substr(6);
@@ -63,8 +59,7 @@ export class Binding {
// skip scope
// if (attrKey == "scope")
// return null;
}
else if (nodeOrAttributeOrIUIElement.name.startsWith(":")) {
} else if (nodeOrAttributeOrIUIElement.name.startsWith(":")) {
isAsync = false;
attrType = AttributeBindingDestination.Field;
attrKey = nodeOrAttributeOrIUIElement.name.substr(1);
@@ -72,62 +67,62 @@ export class Binding {
// skip scope
// if (attrKey == "scope")
// return null;
}
else {
} else {
return null;
}
// 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);
sentence[i] =
sentence[i].charAt(0).toUpperCase() + sentence[i].slice(1);
attrKey = sentence.join("");
if (attrKey == "content")
type = BindingType.ContentAttribute;
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 (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;
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]
let args = ["data", "d", "context", "_test", ...scopeKeys];
if (isAsync)
func = new AsyncFunction(...args, code);
else
func = new Function(...args, code);
}
catch (ex) {
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 });
Object.assign(rt, {
isAsync,
type,
attrType,
attrKey,
func,
target: nodeOrAttributeOrIUIElement,
checked: false,
script,
scopeKeys,
scopeValues,
});
return rt;
}
@@ -140,7 +135,6 @@ export class Binding {
}
_findMap(thisArg) {
// @TODO: Map thisArg too
let map = {};
@@ -150,7 +144,7 @@ export class Binding {
obj[prop] = {};
return new Proxy(obj[prop], detector);
}
}
},
};
this.checked = true;
@@ -158,50 +152,59 @@ export class Binding {
let proxy = new Proxy(map, detector);
try {
let d = this.func.apply(thisArg, [proxy, proxy, {}, true
, ...this.scopeValues]);
let d = this.func.apply(thisArg, [
proxy,
proxy,
{},
true,
...this.scopeValues,
]);
this.map = map;
return d;
}
catch (ex) {
} catch (ex) {
//console.log("Proxy failed", ex);
this.map = map;
}
}
async _execute(thisArg, data) {
if (!this.checked)
this._findMap(thisArg);
if (!this.checked) this._findMap(thisArg);
let context = {};
var rt = this.func.apply(thisArg, [data, data, context, false,
...this.scopeValues]);
var rt = this.func.apply(thisArg, [
data,
data,
context,
false,
...this.scopeValues,
]);
//console.log(rt);
if (rt instanceof Promise)
await 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);
if (context.error != undefined) {
console.log(
"Execution failed",
context.error.name + ": " + context.error.message,
this.script,
this.target
);
return;
}
else if (context.value == undefined)
{
} else if (context.value == undefined) {
return;
}
else if (context.value instanceof Promise)
{
try
{
} 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);
} catch (ex) {
console.log(
"Execution failed",
ex.name + ": " + ex.message,
this.script,
this.target
);
}
}
else
{
} else {
return context.value;
}
}
@@ -214,36 +217,29 @@ export class Binding {
}
bind(data, map) {
if (data == null)
return;
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.watchList.push({ data, event });
this.bind(data[p], map[p]);
}
//if (this.watchList.includes(data))
// this.watchList.push({ data, event : });
}
else {
} 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();
if (data != this.data) this.unbind();
try {
if (this.type === BindingType.IUIElement) {
@@ -254,93 +250,79 @@ export class Binding {
let d = await this._execute(this.target, data);
await this.target.setData(d);
}
else if (this.type === BindingType.TextNode) {
} else if (this.type === BindingType.TextNode) {
try {
let d = await this._execute(this.target.parentElement, data);
if (d === undefined)
return false;
if (d === undefined) return false;
//if (d instanceof Promise)
// d = await d;
this.target.data = d;// (d === undefined) ? "" : d;
this.target.data = d; // (d === undefined) ? "" : d;
if (data != this.data) {
this.data = data;
this.bind(data, this.map);
}
}
catch (ex) {
} 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 === undefined) return false;
//if (d instanceof Promise)
// d = await d;
targetElement.innerHTML = d;
if (window?.app?.loaded)
{
if (window?.app?.loaded) {
await IUI.create(targetElement);
IUI.bind(targetElement, true, "content", targetElement.__i_bindings?.scope);
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)
{
} 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)
{
} else if (this.type == BindingType.RevertAttribute) {
let d = await this._execute(this.target.ownerElement, data);
if (d === undefined)
return false;
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 === 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);
else this.target.ownerElement.setAttribute(this.attrKey, d);
if (data != this.data) {
this.data = data;
@@ -350,9 +332,6 @@ export class Binding {
// 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;
@@ -363,21 +342,17 @@ export class Binding {
}
// 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 === undefined) return false;
//if (d instanceof Promise)
// d = await d;
this.target.ownerElement.data = d;
}
return true;
}
catch (ex) {
} catch (ex) {
// console.log(ex);
return false;
}
}
}

29
src/Core/BindingList.js
View File

@@ -1,6 +1,4 @@
export default class BindingList extends Array {
constructor(target, scope) {
super();
this.target = target;
@@ -8,30 +6,27 @@ export default class BindingList extends Array {
this.events = [];
}
destroy(){
for(var i = 0; i < this.length; i++)
this[i].unbind();
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);
for (var i = 0; i < this.events.length; i++)
this.target.removeEventListener(
this.events[i].name,
this.events[i].handle
);
}
addEvent(name, handle)
{
addEvent(name, handle) {
this.target.addEventListener(name, handle);
this.events.push({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);
for (var i in this.scope.length) rt.push(i);
return rt;
}
}

263
src/Core/IUI.js
View File

@@ -3,9 +3,7 @@ import { Binding, BindingType } from "./Binding.js";
//import Route from '../Router/Route.js';
import BindingList from "./BindingList.js";
export class IUI {
static _menus = [];
static views = [];
static modules = {};
@@ -17,43 +15,33 @@ export class IUI {
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 [];
} else if (input instanceof HTMLCollection) return input;
else if (input instanceof HTMLElement) return [input];
else return [];
}
static observer = new IntersectionObserver(function(entries) {
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();
for (var i = 0; i < entries.length; i++) {
if (entries[i].isIntersecting) {
if (entries[i]._require_update) entries[i].update();
}
}
},
{ threshold: [0] }
);
}, { threshold: [0] });
static async created (element) {
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();
if (e instanceof IUIElement) await e.created();
await IUI.created(e);
}
}
static async create(element)
{
static async create(element) {
for (let i = 0; i < element.children.length; i++) {
let e = element.children[i];
if (e instanceof IUIElement) {
@@ -84,8 +72,7 @@ export class IUI {
//return;
}
static get(o)
{
static get(o) {
return document.getElementById(o);
//for(var i = 0; i < IUI.registry.length; i++)
@@ -94,53 +81,44 @@ export class IUI {
//return null;
}
static put(o)
{
static put(o) {
IUI.registry.push(o);
}
static remove(id)
{
for(var i = 0; i < IUI.registry.length; i++)
if (IUI.registry[i].el.id == id)
{
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 module(objectClass)
{
static module(objectClass) {
let moduleName = objectClass.moduleName;
if (IUI.modules[moduleName] === undefined) {
customElements.define("i-" + moduleName, objectClass);
IUI.modules[moduleName] = {
cls: objectClass, init: function (properties) {
cls: objectClass,
init: function (properties) {
return new objectClass(properties);
}
},
};
}
return objectClass;
}
static extend(properties, defaults, overwrite)
{
if (properties == null)
properties = defaults;
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];
for (var i in defaults)
if (overwrite) properties[i] = defaults[i];
else if (properties[i] === undefined) properties[i] = defaults[i];
return properties;
}
static bind(element, skipAttributes, sourcePath, scope) {
// ::Attribute
// : Field
// async:: Async Attribute
@@ -148,9 +126,11 @@ export class IUI {
// @ Event
// skip element ?
if (element.hasAttribute("skip")
|| element.hasAttribute("i-skip")
|| element instanceof HTMLTemplateElement)
if (
element.hasAttribute("skip") ||
element.hasAttribute("i-skip") ||
element instanceof HTMLTemplateElement
)
return;
// tags to skip
@@ -159,87 +139,77 @@ export class IUI {
let bindings;
if (scope == null)
scope = {};
if (scope == null) scope = {};
// get refs before they get overwritten
//let refs = scope?.refs;
// some element extended or overwritten the binding arguments
if (element.scope != null)
IUI.extend(scope, element.scope, true);
else if (element.hasAttribute(":scope"))
{
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 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);
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)
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);
bindings = new BindingList(element, scope);
if (skipAttributes)
{
if (skipAttributes) {
// copy attributes bindings
if (element.__i_bindings != null)
for(var i = 0; i < element.__i_bindings.length; i++)
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
{
} else {
element.__i_bindings?.destroy();
// compile attributes
for (var i = 0; i < element.attributes.length; i++) {
// skip scope
if (element.attributes[i].name == ":scope")
continue;
if (element.attributes[i].name.startsWith("@")){
if (element.attributes[i].name == ":scope") continue;
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) => {
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);
} else {
let b = Binding.create(element.attributes[i], bindings.scope);
if (b != null) {
if (b.type == BindingType.HTMLElementDataAttribute
|| b.type == BindingType.IUIElementDataAttribute)
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);
else bindings.push(b);
}
}
}
// add reference
// if (element.hasAttribute("ref")) {
// let ref = element.getAttribute("ref");
@@ -266,39 +236,35 @@ export class IUI {
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
{
} 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 func = new Function(
...scopeArgs,
"//# sourceURL=iui://" +
sourcePath +
"-" +
Math.round(Math.random() * 10000) +
"\r\n" +
el.text.trim()
);
let rt = func.apply(el.parentElement, scopeValues);
console.log("rt", rt);
if (typeof (rt) === "object") {
for (var k in rt)
el.parentElement[k] = rt[k];
if (typeof rt === "object") {
for (var k in rt) el.parentElement[k] = rt[k];
}
}
catch (ex) {
} catch (ex) {
console.log(ex);
}
}
else if (el instanceof HTMLElement) {
} else if (el instanceof HTMLElement) {
IUI.bind(el, false, sourcePath, scope);
}
else if (el instanceof Text) {
} else if (el instanceof Text) {
let b = Binding.create(el, bindings.scope);
if (b != null)
bindings.push(b);
if (b != null) bindings.push(b);
}
}
@@ -306,7 +272,6 @@ export class IUI {
}
static async render(element, data, textNodesOnly = false) {
if (!element.__i_bindings) {
return;
}
@@ -319,37 +284,30 @@ export class IUI {
await bindings[i].render(data);
} else {
// render attributes & text nodes
for (var i = 0; i < bindings.length; i++)
await bindings[i].render(data);
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) {
// @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);
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;
if (el.dataMap != null) await el.dataMap.render(data);
else el.data = data;
//let data = e.mapData(data);
await IUI.render(el, el.data);
}
}
}
};
}
export function iui(selector)
{
export function iui(selector) {
return IUI.get(selector);
/*
@@ -365,57 +323,51 @@ export function iui(selector)
}
*/
if (typeof(this) == "undefined" || this == window)
{
if (typeof this == "undefined" || this == window) {
var o = IUI.get(selector);
if (o)
return o;
else
{
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)
{
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)
{
} else if (typeof selector === "string" || selector instanceof String) {
if (selector[0] == ".")
el = document.getElementsByClassName(selector.substr(1));
else
el = document.getElementById(selector);
else el = document.getElementById(selector);
}
if (el)
{
if (el) {
var rt = {};
var makeFunc = function(module){
return function(){
if (el instanceof HTMLCollection)
{
var makeFunc = function (module) {
return function () {
if (el instanceof HTMLCollection) {
let rt = [];
for(var i = 0; i < el.length; i++)
{
for (var i = 0; i < el.length; i++) {
var args = [el[i]];
for(var j = 0; j < arguments.length; j++)
for (var j = 0; j < arguments.length; j++)
args.push(arguments[j]);
rt.push(IUI.modules[module].init.apply(this, args));
}
return rt;
}
else
{
} else {
var args = [el];
for(var i = 0; i < arguments.length; i++)
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);
for (var m in IUI.modules) rt[m] = makeFunc(m);
return rt;
}
@@ -486,7 +438,6 @@ iui.prototype.ne = function(tag)
}
*/
/*
iui.prototype.destroy = function()
{

82
src/Core/IUIElement.js
View File

@@ -1,5 +1,9 @@
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) {
@@ -20,20 +24,17 @@ export default class IUIElement extends HTMLElement {
this._register("data");
}
static get moduleName(){
static get moduleName() {
return this.name.toLowerCase();
}
get cssClass(){
if (this.hasAttribute("css-class"))
return this.getAttribute("css-class");
get cssClass() {
if (this.hasAttribute("css-class")) return this.getAttribute("css-class");
//else
// return this.constructor.moduleName;
}
set cssClass(value)
{
set cssClass(value) {
this.classList.remove(this.cssClass);
this.setAttribute("css-class", value);
this.classList.add(value);
@@ -46,33 +47,30 @@ export default class IUIElement extends HTMLElement {
_getParentData() {
var p = this.parentElement;
do {
if (p.data !== undefined)
return p.data;
} while (p = p.parentElement);
if (p.data !== undefined) return p.data;
} while ((p = p.parentElement));
return undefined;
}
async setData(value) {
this._data = value;
this._emit("data", {data: value});
this._emit("data", { data: value });
await IUI.render(this, value);
}
get data() {
return this._data;
}
async revert(){
async revert() {
let e = this;
do {
var p = e.parentElement;
if (e.revertMap != null)
await e.revertMap.render(p?.data);
} while (e = p);
if (e.revertMap != null) await e.revertMap.render(p?.data);
} while ((e = p));
}
async update(data) {
@@ -80,35 +78,27 @@ export default class IUIElement extends HTMLElement {
// get parent data
if (this.dataMap != null) {
await this.dataMap.render(this._getParentData());
} else
await this.setData(this.data);
}
else {
} else await this.setData(this.data);
} else {
// apply specified data
if (this.dataMap != null) {
await this.dataMap.render(data);
} else
await this.setData(data);
} else await this.setData(data);
}
}
// bindings arguments
get scope(){
get scope() {
return null;
}
// this meant to be inherited
modified() {
}
modified() {}
connectedCallback() {
if (this.hasAttribute("css-class"))
{
if (this.hasAttribute("css-class")) {
this.classList.add(this.getAttribute("css-class"));
}
else
{
} else {
let className = this.constructor.moduleName;
this.setAttribute("css-class", className);
this.classList.add(className);
@@ -120,9 +110,7 @@ export default class IUIElement extends HTMLElement {
}
adoptedCallback() {
//console.log("adopted", this);
}
//appendChild(node) {
@@ -130,42 +118,30 @@ export default class IUIElement extends HTMLElement {
// super.appendChild(node);
//}
created() {
created() {}
}
create() {
}
create() {}
destroy() {
IUI.registry.splice(IUI.registry.indexOf(this), 1);
if (this.parentNode)
this.parentNode.removeChild(this);
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];
if (e[i] === undefined) e[i] = values[i];
}
try
{
try {
return this.dispatchEvent(e);
}
catch(ex)
{
} catch (ex) {
console.log(ex);
}
}
_encapsulateEvent(code){
_encapsulateEvent(code) {
return `try {\r\n ${code} \r\n}\r\n catch(ex) { console.log(ex.name + ":" + ex.message, this); }`;
}

12
src/Core/Path.js Normal file
View File

@@ -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, "/");
}
}

35
src/Core/RefsCollection.js
View File

@@ -1,46 +1,35 @@
export default class RefsCollection
{
constructor(rootElement){
export default class RefsCollection {
constructor(rootElement) {
this._rootElement = rootElement;
}
_build(element, append) {
if (element == undefined)
element = this._rootElement;
if (element == undefined) element = this._rootElement;
if (!append)
for(var i in this)
if (i != "_rootElement" && i != "_build")
delete this[i];
for (var i in this)
if (i != "_rootElement" && i != "_build") delete this[i];
for(var i = 0; i < element.children.length; i++)
{
for (var i = 0; i < element.children.length; i++) {
let child = element.children[i];
if (child.hasAttribute("ref"))
{
if (child.hasAttribute("ref")) {
let ref = child.getAttribute("ref");
if (this[ref] == null)
this[ref] = child;
else if (this[ref] == child){
if (this[ref] == null) this[ref] = child;
else if (this[ref] == child) {
// do nothing
}
else if (this[ref] instanceof Array){
} else if (this[ref] instanceof Array) {
this[ref].push(child);
} else {
var firstRef = this[ref];
this[ref] =[firstRef, child];
this[ref] = [firstRef, child];
}
}
if (child.refs != undefined)
// opt out if the element handles referencing
break;
else
this._build(child, true);
else this._build(child, true);
}
}
}

13
src/Data/DataList.js
View File

@@ -1,14 +1,13 @@
import IUIElement from "../Core/IUIElement.js";
export default IUI.module(class DataList extends IUIElement
{
constructor(properties)
{
export default IUI.module(
class DataList extends IUIElement {
constructor(properties) {
super(properties);
}
create()
{
create() {
this.style.display = "none";
}
});
}
);

34
src/Data/Field.js
View File

@@ -1,20 +1,17 @@
import IUIElement from "../Core/IUIElement.js";
import { IUI } from "../Core/IUI.js";
export default IUI.module(class Field extends HTMLElement
{
constructor()
{
export default IUI.module(
class Field extends HTMLElement {
constructor() {
super();
}
static get moduleName(){
static get moduleName() {
return this.name.toLowerCase();
}
create()
{
create() {
// if (this.formatter === undefined) {
// // load script
// for (var i = 0; i < this.children.length; i++)
@@ -22,7 +19,6 @@ export default IUI.module(class Field extends HTMLElement
// //this.formatter = new Function this.children[i].
// }
// }
//this.style.display = "none";
}
@@ -35,22 +31,19 @@ export default IUI.module(class Field extends HTMLElement
}
serialize(tag) {
let template = document.createElement("template");
let node = document.createElement(tag ?? "div");
let width = null, name = null, type = null;
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);
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
@@ -59,4 +52,5 @@ export default IUI.module(class Field extends HTMLElement
return { node, width, name, type };
}
});
}
);

44
src/Data/Form.js
View File

@@ -2,26 +2,23 @@
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();
}
static _copy(val){
if (typeof val === 'object' && val !== null)
{
static _copy(val) {
if (typeof val === "object" && val !== null) {
let rt = {};
for(var i in val)
for (var i in val)
if (val[i] instanceof Array)
// copy array
rt[i] = [...val[i]];
else
rt[i] = val[i];
else rt[i] = val[i];
return rt;
}
else
return val;
} else return val;
}
async create() {
@@ -34,38 +31,33 @@ export default IUI.module(class Form extends IUIElement {
this.original = value;
//var copy = {};
//Object.assign(copy, value);
super.setData(new Modifiable(this.original));// Form._copy(this.original));
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));
super.setData(new Modifiable(this.original)); //Form._copy(this.original));
return this;
}
get 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]))
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];
else rt[i] = this._data[i];
}
return rt;
}
});
}
);

46
src/Data/Include.js
View File

@@ -2,54 +2,52 @@ 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()
{
export default IUI.module(
class Include extends IUIElement {
constructor() {
super();
this.refs = new RefsCollection();
}
get src(){
get src() {
return this.getAttribute("src");
}
set src(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;
let src = url.replace(/^\/+|\/+$/g, '');
let src = url.replace(/^\/+|\/+$/g, "");
this.classList.add(this.cssClass + "-loading");
let x = await fetch(src);
if (x.status == 200)
{
if (x.status == 200) {
let t = await x.text();
this.innerHTML = t;
//let xeval = (code) => eval(code);
if (window?.app?.loaded)
{
if (window?.app?.loaded) {
await IUI.create(this);
IUI.bind(this, true, "include:" + src,
IUI.extend(this._i__bindings.scope, this.scope, true));
IUI.bind(
this,
true,
"include:" + src,
IUI.extend(this._i__bindings.scope, this.scope, true)
);
this.refs._build();
await IUI.created(this);
@@ -102,14 +100,12 @@ export default IUI.module(class Include extends IUIElement
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();
}
});
}
);

28
src/Data/Layout.js
View File

@@ -1,15 +1,15 @@
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()
{
export default IUI.module(
class Layout extends HTMLElement {
// IUIElement
constructor() {
super();
}
static get moduleName(){
static get moduleName() {
return this.name.toLowerCase();
}
@@ -30,8 +30,7 @@ export default IUI.module(class Layout extends HTMLElement// IUIElement
let layout = el.children[i];
let rt = layout.innerHTML;
if (removeSelf)
el.removeChild(layout);
if (removeSelf) el.removeChild(layout);
return rt;
}
@@ -39,7 +38,6 @@ export default IUI.module(class Layout extends HTMLElement// IUIElement
}
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];
@@ -47,18 +45,16 @@ export default IUI.module(class Layout extends HTMLElement// IUIElement
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 (collection) rt[fd.name] = fd;
else rt.push(fd);
}
}
if (removeSelf)
layout.parentElement.removeChild(layout);
if (removeSelf) layout.parentElement.removeChild(layout);
return rt;
}
return null;
}
});
}
);

98
src/Data/Modifiable.js
View File

@@ -1,48 +1,35 @@
export default class Modifiable
{
static _copy(val){
if (typeof val === 'object' && val !== null)
{
export default class Modifiable {
static _copy(val) {
if (typeof val === "object" && val !== null) {
let rt = {};
for(var i in val)
for (var i in val)
if (val[i] instanceof Array)
// copy array
rt[i] = [...val[i]];
else
rt[i] = val[i];
else rt[i] = val[i];
return rt;
}
else
return val;
} 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;
static _areEqual(ar1, ar2) {
if (!(ar1 instanceof Array) || !(ar2 instanceof Array)) return false;
if (ar1.length != ar2.length)
return false;
if (ar1.length != ar2.length) return false;
for(var i = 0; i < ar1.length; i++)
if (ar1[i] != ar2[i])
return false;
for (var i = 0; i < ar1.length; i++) if (ar1[i] != ar2[i]) return false;
return true;
}
constructor(original){
constructor(original) {
this._events = {};
this._data = Modifiable._copy(original);
this._original = original;
for(let p in this._data)
{
if (p.startsWith("_"))
continue;
for (let p in this._data) {
if (p.startsWith("_")) continue;
this._register(":" + p);
@@ -53,85 +40,70 @@ export default class Modifiable
set(value) {
this._data[p] = value;
this._emit(":" + p, value);
}
},
});
}
}
get _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 && Modifiable._areEqual(this._data[i], this._original[i]))
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];
else rt[i] = this._data[i];
}
return rt;
}
_register(event)
{
_register(event) {
this._events[event] = [];
}
_emit(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++)
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)
{
_emitArgs(event, args) {
event = event.toLowerCase();
if (this._events[event])
for(var i = 0; i < this._events[event].length; i++)
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;
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});
if (!this._events[event]) this._events[event] = [];
this._events[event].push({ f: fn, i: issuer == null ? this : issuer });
return this;
}
off(event, fn)
{
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]) {
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
{
} else {
this._events[event] = [];
}
}

82
src/Data/Repeat.js
View File

@@ -1,58 +1,49 @@
import IUIElement from "../Core/IUIElement.js";
import { IUI } from "../Core/IUI.js";
export default IUI.module(class Repeat extends IUIElement
{
constructor()
{
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() {
//////////////
/// Create ///
//////////////
if (this._created)
debugger;
if (this._created) debugger;
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 (repeatables.length > 0)
{
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
{
} else {
if (this.children.length > 0)
this._repeatNode = this.children[0].cloneNode(true);
else
this._repeatNode = document.createElement("div");
else this._repeatNode = document.createElement("div");
this.innerHTML = "";
this._container = this;
}
// var newElements = this.querySelectorAll("*");
// for (var i = 0; i < newElements.length; i++)
// newElements[i].repeat = this;
@@ -86,16 +77,13 @@ export default IUI.module(class Repeat extends IUIElement
*/
}
clear()
{
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;
}
@@ -104,45 +92,41 @@ export default IUI.module(class Repeat extends IUIElement
return this._data.length;
}
async setData(value)
{
async setData(value) {
// this to avoid interruption by an event
if (this._busy)
{
if (this._busy) {
console.log("Busy", this);
return false;
}
this._busy = true;
// clear
this.clear();
if (value?.toArray instanceof Function)
value = value.toArray();
else if (value == null || !(value instanceof Array || value instanceof Int32Array))
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);
this.list.push(e);
await IUI.create(e);
IUI.bind(e, false, "repeat",
IUI.extend(this.__i_bindings?.scope,
{index: i, repeat: this}, true));
IUI.bind(
e,
false,
"repeat",
IUI.extend(this.__i_bindings?.scope, { index: i, repeat: this }, true)
);
this._container.insertBefore(e, this._beforeNode);
@@ -152,17 +136,13 @@ export default IUI.module(class Repeat extends IUIElement
await IUI.created(e);
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" });
this._busy = false;
}
});
}
);

7
src/Data/TableRow.js
View File

@@ -1,8 +1,8 @@
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();
}
@@ -12,4 +12,5 @@ export default IUI.module(class TableRow extends IUIElement {
this.style.display = "table-row";
console.log("TR");
}
});
}
);

49
src/Router/Link.js
View File

@@ -1,21 +1,18 @@
import IUIElement from "../Core/IUIElement.js";
import { IUI } from "../Core/IUI.js";
export default IUI.module(class Link extends IUIElement
{
constructor()
{
export default IUI.module(
class Link extends IUIElement {
constructor() {
//debugger;
super({ cssClass: 'link' });
super({ cssClass: "link" });
// super({ cssClass: 'link' });
this._register("route");
this.addEventListener("click",
(e) => {
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");
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");
@@ -26,31 +23,31 @@ export default IUI.module(class Link extends IUIElement
let url = this.getAttribute("href");
let ok = this._emit("route", { url, cancelable: true, query: this.query});
if (!ok)
return;
let ok = this._emit("route", {
url,
cancelable: true,
query: this.query,
});
if (!ok) 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 (this.query)// || this.hasAttribute(":data"))
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);
}
);
else if (url != null) window.router.navigate(url, undefined, target);
});
//this._register("click");
}
@@ -63,8 +60,6 @@ export default IUI.module(class Link extends IUIElement
this.setAttribute("href", value);
}
create()
{
create() {}
}
});
);

103
src/Router/Route.js
View File

@@ -2,9 +2,10 @@ 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();
@@ -16,14 +17,13 @@ export default IUI.module(class Route extends IUIElement {
}
async setData(value) {
if (this.hasAttribute("debug"))
debugger;
if (this.hasAttribute("debug")) debugger;
return await super.setData(value);
}
get scope(){
return {route: this, view: this};
get scope() {
return { route: this, view: this };
}
_updateLinks() {
@@ -36,6 +36,8 @@ export default IUI.module(class Route extends IUIElement {
}
}
base = "";
get link() {
var link = this.name;
var parent = this.parent;
@@ -44,7 +46,7 @@ export default IUI.module(class Route extends IUIElement {
parent = parent.parent;
}
return link;
return this.base + "/" + link;
}
get name() {
@@ -59,7 +61,7 @@ export default IUI.module(class Route extends IUIElement {
return this._dst || this.getAttribute("dst");
}
set dst(value){
set dst(value) {
this._dst = value;
}
@@ -76,109 +78,60 @@ export default IUI.module(class Route extends IUIElement {
}
_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;
}
// get route() {
// return this;
// }
// get view() {
// return this;
// }
async create() {
//window.router.add(this);
this._updateLinks();
if (this.hasAttribute("src")) {
let src = this.getAttribute("src").replace(/^\/+|\/+$/g, '');
let src = this.getAttribute("src").replace(/^\/+|\/+$/g, "");
let x = await fetch(src);
if (x.status != 200)
return;
if (x.status != 200) return;
let t = await x.text();
this.innerHTML = t;
//let xeval = (code) => eval(code);
}
if (window?.app?.loaded)
{
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()
{
created() {
this.refs._build();
}
set(value) {
if (value == this.visible)
if (value == this.visible) {
return;
}
if (value) {
this.setAttribute("selected", "");
this._emit("show");
}
else
{
} 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);
}
}
);

261
src/Router/Router.js
View File

@@ -1,158 +1,135 @@
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;
// }
//});
}
_getRouteParent(route) {
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;
}
add(route, parent = null) {
if (parent == null) {
route.base = this._base;
if (!parent) {
this.routes.push(route);
}
else {
route.parent = parent;
this.appendChild(route);
//parent.routes.push(route);
}
return;
}
_routeInPath(name, routes)
{
for (var i = 0; i < routes.length; i++)
if (routes[i].name == name)
return routes[i];
route.parent = parent;
this.appendChild(route);
}
_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);
for (var i = 0; i < p.length; i++) {
var route = this._routeInPath(p[i], searchRoutes);
if (route == null)
return [null, null];
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 {
if (route.dst == null) return [route, route];
let dst = route.dst instanceof Function ? route.dst(data) : route.dst;
let url = dst.replace(/^[/]*(.*?)[/]*$/g, '$1').trim();
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();
}
_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 = {};
const kv = q.replace("&&", "\0").split("&");
const 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);
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)
{
async navigate(url, data, target, state, dataToQuery = true) {
let q = url.match(/^\/*(.*?)\?(.*)$|^\/*(.*)$/);
//debugger;
let path;
var path;
// do we have a query string ?
// 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 ?
// Do we have data?
else if (data !== undefined) {
path = q[3];
url = dataToQuery ? path + "?" + this._toQuery(data) : path;
}
else {
} else {
path = q[3];
url = path;
}
const [stateRoute, viewRoute] = this.getRoute(path, data);
let [stateRoute, viewRoute] = this.getRoute(path, data);
if (stateRoute == null)
{
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)
{
if (!ok) {
console.warn("Route not allowed", path);
return;
}
@@ -163,48 +140,31 @@ export default IUI.module(class Router extends Target
viewRoute = stateRoute;
}
//let state = null;
//if (data !== undefined) {
// for (let [k, v] of this._states)
// if (v == data) {
// state = k;
// break;
// }
// if (state == null) {
// state = Math.random().toString(36).substr(2, 10);
// this._states.set(state, data);
// }
//}
if (!(target instanceof Target))
target = this;
if (!(target instanceof Target)) target = this;
if (state == null) {
let id = Math.random().toString(36).substr(2, 10);
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);
history.pushState(
id,
stateRoute.caption,
this._hash ? "#" + url : "/" + url
);
}
this._history.push(state.id);// { url, data, target, stateRoute, viewRoute });
this._history.push(state.id); // { url, data, target, stateRoute, viewRoute });
target.show(viewRoute, this.active);
viewRoute.set(true);
this.active = viewRoute;
//{ url: "/", data: null, target: null };
this._emit("route", { route: stateRoute });
viewRoute.query = data || {};
stateRoute.query = viewRoute.query;
target.setLoading(true);
if (stateRoute.dataMap != null) {
@@ -212,14 +172,11 @@ export default IUI.module(class Router extends Target
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);
if (viewRoute != stateRoute) await viewRoute.setData(stateRoute.data);
} //if (data !== undefined)
else await viewRoute.setData(data);
target.setLoading(false);
}
hide() {
@@ -227,102 +184,80 @@ export default IUI.module(class Router extends Target
}
refresh() {
let state = this.current;
const 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);
}
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;
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;
this._base = this.hasAttribute("base") ? this.getAttribute("base") : "/";
}
destroy() {
console.log("Destroyed", this);
}
created()
{
if (this.hasAttribute("type") && this.getAttribute("type").toLowerCase() == "hash")
created() {
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];
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);
if (e.visible) this.navigate(e.name);
}
}
this._emit("created");
//console.log("Router created", this);
}
connectedCallback() {
//console.log("New router", this);
window.router = this;
let self = this;
const self = this;
window.addEventListener("popstate", function (event) {
//console.log(event);
let stateId = event.state;
const stateId = event.state;
let path;
if (self._hash) {
path = window.location.hash;
if (path.length > 0)
path = path.substr(1);
}
else {
if (path.length > 0) path = path.substring(1);
} else {
path = window.location.pathname;
}
if (stateId != null) {
if (stateId != self._history[self._history.length -1]) {
if (stateId != self._history[self._history.length - 1]) {
//this._lastStateId = stateId;
let state = self._states.get(stateId);
const state = self._states.get(stateId);
self.navigate(path, state.data, state.target, state);
}
else {
} else {
console.log("SAME");
}
}
else {
} else {
this._lastState = null;
self.navigate(path, undefined, undefined, {});
}
@@ -334,5 +269,5 @@ export default IUI.module(class Router extends Target
this._register("route");
this._register("created");
}
});
}
);

29
src/Router/Target.js
View File

@@ -2,29 +2,23 @@
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' }));
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;
route.target = this;
@@ -42,11 +36,9 @@ export default IUI.module(class Target extends IUIElement {
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) {
@@ -57,4 +49,5 @@ export default IUI.module(class Target extends IUIElement {
this._emit("hide", { route });
}
});
}
);

18
src/UI/Background.js
View File

@@ -1,20 +1,16 @@
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' });
super({ cssClass: "background" });
this.classList.add(this.cssClass);
this._register("visible");
}
create() {
}
create() {}
hide() {
return this.setVisible(false);
@@ -28,8 +24,7 @@ export default IUI.module(class Background extends IUIElement {
this.visible = value;
if (value) {
this.classList.add(this.cssClass + "-visible");
}
else {
} else {
this.classList.remove(this.cssClass + "-visible");
}
@@ -37,4 +32,5 @@ export default IUI.module(class Background extends IUIElement {
return this;
}
});
}
);

44
src/UI/Button.js
View File

@@ -1,15 +1,17 @@
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' });
this.addEventListener("mousedown", (e)=>{
super({ cssClass: "button" });
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");
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");
@@ -17,8 +19,9 @@ export default IUI.module(class Button extends IUIElement {
this.classList.remove(this.cssClass + "-clicked");
void this.offsetWidth;
this.classList.add(this.cssClass + "-clicked");
}, true);
},
true
);
this._register("check");
}
@@ -27,8 +30,7 @@ export default IUI.module(class Button extends IUIElement {
return this.getAttribute("type");
}
set type(value)
{
set type(value) {
this.setAttribute("type", value);
}
@@ -36,15 +38,11 @@ export default IUI.module(class Button extends IUIElement {
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");
}
@@ -53,18 +51,16 @@ export default IUI.module(class Button extends IUIElement {
this.setAttribute("disabled", value);
}
create() {
if (this.type == "check")
{
this.addEventListener("click", ()=>{
if (this.type == "check") {
this.addEventListener("click", () => {
let checked = !this.checked;
this.checked = checked;
this._emit("check", {checked});
this._emit("check", { checked });
});
}
//this.classList.add(this.cssClass);
}
});
}
);

22
src/UI/Check.js
View File

@@ -1,9 +1,10 @@
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");
@@ -22,10 +23,8 @@ export default IUI.module(class Check extends IUIElement {
}
check(value) {
if (value)
this.setAttribute("checked", "checked");
else
this.removeAttribute("checked");
if (value) this.setAttribute("checked", "checked");
else this.removeAttribute("checked");
}
create() {
@@ -34,13 +33,10 @@ export default IUI.module(class Check extends IUIElement {
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;
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;
@@ -54,5 +50,5 @@ export default IUI.module(class Check extends IUIElement {
set value(value) {
this.checked = value;
}
});
}
);

37
src/UI/CodePreview.js
View File

@@ -2,19 +2,17 @@ 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 = '';
this.textContent = "";
}
async create() {
if (this.hasAttribute("debug"))
debugger;
if (this.hasAttribute("debug")) debugger;
//this._code = this.innerHTML.trim();
//this.textContent = '';
@@ -33,10 +31,14 @@ export default IUI.module(class CodePreview extends IUIElement {
this.editor.setAttribute("skip", true);
let self = this;
this.editor.addEventListener("input", function() {
this.editor.addEventListener(
"input",
function () {
self._code = self.editor.textContent.trim();
self.updatePreview();
}, false);
},
false
);
this.preview = document.createElement("div");
this.preview.className = this.cssClass + "-preview";
@@ -52,31 +54,27 @@ export default IUI.module(class CodePreview extends IUIElement {
//await this.updatePreview();
}
async created(){
async created() {
await this.updatePreview();
}
get scope(){
return {view: this, refs: this.refs};
get scope() {
return { view: this, refs: this.refs };
}
async updatePreview() {
if (this._updating)
return;
if (this._updating) return;
this._updating = true;
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;
if (window.app?.loaded)
{
if (window.app?.loaded) {
await IUI.create(this.preview);
await IUI.created(this.preview);
IUI.bind(this.preview, true, "preview", this.scope);
@@ -86,4 +84,5 @@ export default IUI.module(class CodePreview extends IUIElement {
this._updating = false;
}
});
}
);

99
src/UI/DateTimePicker.js
View File

@@ -1,23 +1,18 @@
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();
}
get layout() {
return this._layout;
}
set layout(value) {
if (value == this._layout)
return;
if (value == this._layout) return;
this.innerHTML = "";
@@ -26,7 +21,6 @@ export default IUI.module(class DateTimePicker extends IUIElement {
this.calendar = document.createElement("div");
this.calendar.className = this.cssClass + "-calendar";
this.calendarContent = document.createElement("div");
this.calendarContent.className = this.cssClass + "-calendar-content";
@@ -40,7 +34,9 @@ export default IUI.module(class DateTimePicker extends IUIElement {
for (var i = 0; i < 7; i++) {
var td = tr.insertCell();
td.innerHTML = this.layout.day.formatter((i + this.layout.weekStart) % 7);
td.innerHTML = this.layout.day.formatter(
(i + this.layout.weekStart) % 7
);
td.className = this.cssClass + "-day";
}
@@ -53,7 +49,7 @@ export default IUI.module(class DateTimePicker extends IUIElement {
this.monthName.className = this.cssClass + "-name";
this.nextMonth = document.createElement("div");
this.nextMonth.className = this.cssClass + "-next";
this.previousMonth = document.createElement("div");;
this.previousMonth = document.createElement("div");
this.previousMonth.className = this.cssClass + "-previous";
this.month.appendChild(this.previousMonth);
@@ -98,7 +94,6 @@ export default IUI.module(class DateTimePicker extends IUIElement {
self.render();
});
for (let i = 0; i < 6; i++) {
tr = this.body.insertRow();
@@ -175,16 +170,14 @@ export default IUI.module(class DateTimePicker extends IUIElement {
this.appendChild(this.calendar);
this.appendChild(this.clock);
// this.appendChild(this.minutes);
// this.appendChild(this.hours);
// this.appendChild(this.hours);
this.value = new Date();
}
create() {
var self = this;
this._register("select");
this.classList.add(this.cssClass);
@@ -192,39 +185,52 @@ export default IUI.module(class DateTimePicker extends IUIElement {
this.layout = {
day: {
formatter: function (index) {
return ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'][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];
}
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 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
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 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);
@@ -245,18 +251,21 @@ export default IUI.module(class DateTimePicker extends IUIElement {
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())
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");
else td.classList.remove(this.cssClass + "-day-today");
if (d.getDate() == this._value.getDate()
&& d.getFullYear() == this._value.getFullYear()
&& d.getMonth() == this._value.getMonth())
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");
else td.classList.remove(this.cssClass + "-day-selected");
td.setAttribute("data-day", d.getDate());
td.setAttribute("data-month", d.getMonth());
@@ -265,24 +274,24 @@ export default IUI.module(class DateTimePicker extends IUIElement {
td.innerHTML = d.getDate();
}
for (var i = 0; i < this.clock.children.length; i++)
this.clock.children[i].classList.remove(this.cssClass + "-time-selected");
this.clock.children[i].classList.remove(
this.cssClass + "-time-selected"
);
var time = (this._value.getHours() * 60) + this._value.getMinutes();
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");
this.clock.children[time / this.layout.time.range].classList.add(
this.cssClass + "-time-selected"
);
}
async setData(value) {
await super.setData(value);
if (value != null && this.field != null)
this.value = this.data[this.field];
}
get data() {
@@ -290,8 +299,7 @@ export default IUI.module(class DateTimePicker extends IUIElement {
}
modified(name, value) {
if (name == this.field)
this.value = value;
if (name == this.field) this.value = value;
}
set value(value) {
@@ -311,4 +319,5 @@ export default IUI.module(class DateTimePicker extends IUIElement {
get value() {
return this._value;
}
});
}
);

284
src/UI/Dialog.js
View File

@@ -2,12 +2,11 @@ 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
{
export default IUI.module(
class IUIDialog extends IUIWindow {
static moduleName = "dialog";
constructor()
{
constructor() {
super({
closeable: true,
resizeable: true,
@@ -17,52 +16,42 @@ export default IUI.module(class IUIDialog extends IUIWindow
x: 0,
y: 0,
visible: false,
modal: false
}
);
modal: false,
});
var self = this;
this._register("visible");
this._register("resize");
this.on("close", function(){
this.on("close", function () {
self.hide();
});
}
create()
{
create() {
super.create();
var self = this;
if (this.modal)
{
if (this.modal) {
this.background = iui("iui_app_background");
if (!this.background)
{
if (!this.background) {
var bg = document.createElement("div");
bg.id="iui_app_background";
bg.id = "iui_app_background";
document.body.insertAdjacentElement("afterBegin", bg);
this.background = iui(bg).background();
}
// this.modal.className = this.customClass + "-modal-background";
this.classList.add(this.customClass + "-modal");
}
this.loading = document.createElement("div");
this.loading.className = this.customClass + "-loading";
if (this.loadingText)
this.loading.innerHTML = this.loadingText;
else
{
if (this.loadingText) this.loading.innerHTML = this.loadingText;
else {
var lc = document.createElement("div");
lc.className = this.customClass + "-loading-content";
this.loading.appendChild(lc);
@@ -70,175 +59,185 @@ export default IUI.module(class IUIDialog extends IUIWindow
this.body.appendChild(this.loading);
if (this.draggable)
{
this.addEventListener("mousedown", function(e){
if (this.draggable) {
this.addEventListener("mousedown", function (e) {
self._startDragging(e);
});
}
else
{
this.header.addEventListener('mousedown', function (e) {
} else {
this.header.addEventListener("mousedown", function (e) {
self._startDragging(e);
});
}
document.addEventListener('mouseup', function () {
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);
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)
{
if (self.clientWidth - x < 5 && self.clientHeight - y < 5) {
self.style.cursor = "nwse-resize";
}
else
{
} else {
self.style.cursor = "";
}
}
});
}
_startDragging(e)
{
_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;
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;
//corssbrowser mouse pointer values
document.onselectstart = function() {return false};
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});
_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()
{
_stopDragging() {
this._dragging = false;
}
_startExpanding(e)
{
document.onselectstart = function() {return 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._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()
{
_stopExpanding() {
this._expanding = false;
this.style.cursor = "";
this._width = this.clientWidth;
this._height = this.clientHeight;
document.onselectstart = function() {return true};
document.onselectstart = function () {
return true;
};
}
setLoading(visible)
{
setLoading(visible) {
if (this.footer)
for(var i = 0; i < this.footer.children.length; i++)
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");
else this.loading.classList.remove(this.customClass + "-loading-visible");
return this;
}
center()
{
center() {
this._updateSize();
return this.move(window.pageXOffset + (window.innerWidth / 2) - (this.offsetWidth / 2),
window.pageYOffset + (window.innerHeight / 2) - (this.offsetHeight / 2));
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) {
if (visible == this.visible) return;
this.visible = visible;
if (visible)
{
if (visible) {
this.classList.add(this.customClass + "-visible");
if (this.background)
{
if (this.background) {
this.background.setVisible(true);
}
//else
if (!this._shown)
{
if (!this._shown) {
this._updateSize();
this._shown = true;
}
@@ -246,25 +245,20 @@ export default IUI.module(class IUIDialog extends IUIWindow
this.setFocus(true);
this._updateSize();
}
else
{
} else {
this._updateSize();
this.classList.remove(this.customClass + "-visible");
this.classList.remove(this.customClass + "-active");
if (this.background)
this.background.setVisible(false);
if (this.background) this.background.setVisible(false);
//this.modal.classList.remove(this.customClass + "-modal-background-visible");
this.setFocus(false);
var i = IUI._nav_list.indexOf(this);
if (i > -1)
IUI._nav_list.splice(i, 1);
if (i > -1) IUI._nav_list.splice(i, 1);
/*
IUI._nav_list.pop
@@ -278,31 +272,35 @@ export default IUI.module(class IUIDialog extends IUIWindow
*/
}
this._emit("visible", {visible});
this._emit("visible", { visible });
return this;
}
hide()
{
hide() {
this.setVisible(false);
return this;
}
show()
{
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);});

70
src/UI/DropDown.js
View File

@@ -1,9 +1,10 @@
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;
@@ -15,15 +16,12 @@ export default IUI.module(class DropDown extends IUIElement {
this.menu = this.getElementsByClassName(this.cssClass + "-menu")[0];
//this.arrow = document.createElement("div");
//this.arrow.className = this.customClass + "-arrow";
//this.el.appendChild(this.arrow);
if (this.getAttribute("fixed"))
{
if (this.getAttribute("fixed")) {
this._fixed = true;
document.body.appendChild(this.menu);
}
@@ -31,11 +29,10 @@ export default IUI.module(class DropDown extends IUIElement {
//this.el.appendChild(this.menu);
this.addEventListener("click", function (e) {
var t = e.target
var t = e.target;
do {
if (t == self.menu)
return;
} while (t = t.parentElement)
if (t == self.menu) return;
} while ((t = t.parentElement));
self.setVisible(!self.visible);
});
@@ -62,8 +59,7 @@ export default IUI.module(class DropDown extends IUIElement {
}
set fixed(value) {
if (value)
document.body.appendChild(this.menu);
if (value) document.body.appendChild(this.menu);
this._fixed = value;
}
@@ -91,13 +87,18 @@ export default IUI.module(class DropDown extends IUIElement {
_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("VV", this._uiBindings, this._dataBindings);
}
setVisible(visible) {
this.visible = visible;
@@ -106,13 +107,11 @@ export default IUI.module(class DropDown extends IUIElement {
if (visible) {
this.menu.classList.add(this.cssClass + "-menu-visible");
this.classList.add(this.cssClass + "-visible");
}
else {
} else {
this.menu.classList.remove(this.cssClass + "-menu-visible");
this.classList.remove(this.cssClass + "-visible");
}
}
else {
} else {
if (visible) {
var rect = this.getBoundingClientRect();
@@ -120,14 +119,12 @@ export default IUI.module(class DropDown extends IUIElement {
var menuHeight = this.menu.clientHeight;
if (menuWidth > document.body.clientWidth) {
menuWidth = (document.body.clientWidth - 10);
menuWidth = document.body.clientWidth - 10;
this.menu.style.width = menuWidth + "px";
}
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;
@@ -135,20 +132,17 @@ export default IUI.module(class DropDown extends IUIElement {
if (menuTop < 0) {
menuTop = 5;
// this.menu.style.height = (rect.top - this.arrow.clientHeight ) + "px";
this.menu.style.height = (rect.top) + "px";
this.menu.style.height = rect.top + "px";
this.menu.classList.add(this.cssClass + "-menu-oversized");
}
else
} else
this.menu.classList.remove(this.cssClass + "-menu-oversized");
//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 {
this.menu.style.top = menuTop + "px";
} else {
//var menuTop = rect.top + rect.height + this.arrow.clientHeight;
var menuTop = rect.top + rect.height;
@@ -159,38 +153,34 @@ export default IUI.module(class DropDown extends IUIElement {
this.menu.style.top = menuTop + "px";
if (menuTop + menuHeight > document.body.clientHeight) {
this.menu.style.height = (document.body.clientHeight - menuTop) + "px";
this.menu.style.height =
document.body.clientHeight - menuTop + "px";
this.menu.classList.add(this.cssClass + "-menu-oversized");
}
else {
} else {
this.menu.classList.remove(this.cssClass + "-menu-oversized");
}
}
if (startX < 0)
startX = 5;
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 {
} 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});
this._emit("visible", { visible });
return this;
}
});
}
);

33
src/UI/Form.js
View File

@@ -3,42 +3,41 @@ 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();
}
create() {
this._container = document.createElement("div");
this._container.className = "container";
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._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._cancel = this.hasAttribute("cancel")
? this.getAttribute("cancel")
: "Cancel";
this._save.addEventListener("click", (x) => {
this._save.addEventListener("click", x => {});
});
this._cancel.addEventListener("click", (x) => {
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);
}
set layout(value) {
@@ -60,10 +59,8 @@ export default IUI.module(class Form extends IUIElement {
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
for (var j = 0; j < this._tabs.length; j++) {}
this.layout.tasbs[i].content;
}
}
}
@@ -71,8 +68,7 @@ export default IUI.module(class Form extends IUIElement {
set data(value) {
var self = this;
if (value == null)
this._input.value = "";
if (value == null) this._input.value = "";
else {
this._input.value = value[this._field];
@@ -98,4 +94,5 @@ export default IUI.module(class Form extends IUIElement {
this._input.value = value;
}
});
}
);

141
src/UI/Grid.js
View File

@@ -1,13 +1,17 @@
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");
@@ -17,12 +21,10 @@ export default IUI.module(class Grid extends IUIElement {
}
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)
{
setGridLayout(style) {
this.style.grid = style;
this._emit("layout", style, this);
return this;
@@ -33,31 +35,28 @@ export default IUI.module(class Grid extends IUIElement {
win.setAttribute("draggable", true);
win.addEventListener("dragstart", function (e) {
e.dataTransfer.effectAllowed = 'move';
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.
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();
if (e.preventDefault) e.preventDefault();
this.classList.remove(self.cssClass + "-window-over");
});
win.addEventListener("dragend", function (e) {
this.classList.remove(self.cssClass + '-window-drag');
this.classList.remove(self.cssClass + "-window-drag");
self._dragItem = null;
});
@@ -69,8 +68,7 @@ export default IUI.module(class Grid extends IUIElement {
if (self.children[i] == self._dragItem) {
self.insertBefore(self._dragItem, e.currentTarget.nextSibling);
break;
}
else if (self.children[i] == e.currentTarget) {
} else if (self.children[i] == e.currentTarget) {
self.insertBefore(self._dragItem, e.currentTarget);
break;
}
@@ -88,58 +86,49 @@ export default IUI.module(class Grid extends IUIElement {
});
}
addOld(item)
{
addOld(item) {
var self = this;
var li = item;//document.createElement("li");
var li = item; //document.createElement("li");
//li.setAttribute("data-id", item[this.index]);
li.setAttribute("draggable", true);
li.addEventListener("dragstart", function(e){
e.dataTransfer.effectAllowed = 'move';
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)
{
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.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("dragleave", function (e) {
if (e.preventDefault) e.preventDefault();
this.classList.remove(self.cssClass + "-window-over");
});
li.addEventListener("dragend", function(e){
this.classList.remove(self.cssClass + '-window-drag');
li.addEventListener("dragend", function (e) {
this.classList.remove(self.cssClass + "-window-drag");
self._dragItem = null;
});
li.addEventListener("drop", function(e){
li.addEventListener("drop", function (e) {
self._dragItem.classList.remove(self.cssClass + "-window-drag");
e.currentTarget.classList.remove(self.cssClass + "-window-over");
for(var i = 0; i < self.children.length; i++)
if (self.children[i] == self._dragItem)
{
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)
{
} else if (self.children[i] == e.currentTarget) {
self.insertBefore(self._dragItem, e.currentTarget);
break;
}
@@ -147,34 +136,48 @@ export default IUI.module(class Grid extends IUIElement {
self._dragItem = null;
});
li.addEventListener("contextmenu", function(e){
li.addEventListener("contextmenu", function (e) {
self.selected = win;
self._emit("contextmenu", item, win, this, e);
});
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 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 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 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 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 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";
if (footer instanceof HTMLElement)
fe.appendChild(footer);
else
fe.innerHTML = footer;
if (footer instanceof HTMLElement) fe.appendChild(footer);
else fe.innerHTML = footer;
win.appendChild(fe);
}
win.on("close", function(){
win.on("close", function () {
self.remove(win);
});
@@ -190,15 +193,13 @@ export default IUI.module(class Grid extends IUIElement {
//win._updateSize();
}
remove(win)
{
remove(win) {
win.destroy();
this.removeChild(win);
}
clear()
{
while (this.children.length > 0)
this.removeChild(this.children[0]);
clear() {
while (this.children.length > 0) this.removeChild(this.children[0]);
}
});
}
);

111
src/UI/Input.js
View File

@@ -1,9 +1,10 @@
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 });
super({ formatter: x => x });
this._register("input");
this._register("change");
}
@@ -16,14 +17,12 @@ export default IUI.module(class Input extends IUIElement {
this.setAttribute("invalid", "");
this.classList.add(this.cssClass + "-invalid");
return false;
}
else {
} else {
this.removeAttribute("invalid");
this.classList.remove(this.cssClass + "-invalid");
return true;
}
}
catch (e) {
} catch (e) {
console.log("Validation Error", e);
return false;
}
@@ -32,25 +31,25 @@ export default IUI.module(class Input extends IUIElement {
return true;
}
get caption(){
return this.getAttribute("caption");// this._span.innerHTML;
get caption() {
return this.getAttribute("caption"); // this._span.innerHTML;
}
set caption(value){
set caption(value) {
this.setAttribute("caption", value);
this._span.innerHTML = value;
}
create() {
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");
@@ -62,8 +61,7 @@ export default IUI.module(class Input extends IUIElement {
let self = this;
this._input.addEventListener("input", () => {
if (self._checkValidity() && self.isAuto)
this.revert();
if (self._checkValidity() && self.isAuto) this.revert();
//self.data[self.field] = self.value;
});
@@ -71,30 +69,29 @@ export default IUI.module(class Input extends IUIElement {
self._emit("change", { value: self.value });
});
this.type = this.hasAttribute("type") ? this.getAttribute("type").toLowerCase() : "text";
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")
{
if (this.type == "password") {
this._eye = document.createElement("div");
this._eye.className = this.cssClass + "-eye";
this._eye.addEventListener("mousedown", ()=>{
this._eye.addEventListener("mousedown", () => {
self._input.type = "text";
self._eye.classList.add(self.cssClass + "-eye-active");
});
this._eye.addEventListener("mouseup", ()=>{
this._eye.addEventListener("mouseup", () => {
self._input.type = "password";
self._eye.classList.remove(self.cssClass + "-eye-active");
});
this.appendChild(this._eye);
}
}
async updateAttributes(deep, parentData) {
@@ -111,7 +108,7 @@ export default IUI.module(class Input extends IUIElement {
return this._input.type;
}
set accept(value){
set accept(value) {
this._input.accept = value;
}
@@ -120,10 +117,8 @@ export default IUI.module(class Input extends IUIElement {
}
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;
}
@@ -141,21 +136,22 @@ export default IUI.module(class Input extends IUIElement {
}
async setData(value) {
await super.setData(value);
if (this.type == "checkbox")
this._input.checked = 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();
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();
/*
await super.setData(value);
@@ -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);
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;
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)=>{
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;
} else return this._input.value;
}
/*
@@ -230,4 +216,5 @@ export default IUI.module(class Input extends IUIElement {
// this._checkValidity();
// }
});
}
);

18
src/UI/Location.js
View File

@@ -1,19 +1,17 @@
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();
}
create() {
let self = this;
window.router.on("route", (e) => {
self.textContent = ''; // clear everything
window.router.on("route", e => {
self.textContent = ""; // clear everything
let html = "";
let route = e.route;
@@ -23,8 +21,7 @@ export default IUI.module(class Location extends IUIElement {
self.append(current);
while (route = route.parent) {
while ((route = route.parent)) {
var sep = document.createElement("span");
self.prepend(sep);
@@ -36,4 +33,5 @@ export default IUI.module(class Location extends IUIElement {
}
});
}
});
}
);

40
src/UI/Login.js
View File

@@ -1,13 +1,11 @@
import IUIElement from "../Core/IUIElement.js";
import { IUI } from "../Core/IUI.js";
export default IUI.module(class Login extends IUIElement
{
constructor()
{
export default IUI.module(
class Login extends IUIElement {
constructor() {
super();
var template = `<div class='body' style='box-shadow: 0 2px 2px rgba(0, 0, 0, .3);
background: white;
border-radius: 3px;
@@ -44,8 +42,6 @@ export default IUI.module(class Login extends IUIElement
this.innerHTML = template;
this._message = this.querySelector("div[name='message']");
this._usernameText = this.querySelector("span[name='spnUsername']");
@@ -58,7 +54,9 @@ export default IUI.module(class Login extends IUIElement
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");
@@ -80,38 +78,32 @@ export default IUI.module(class Login extends IUIElement
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");
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._login.addEventListener("click", () => this.login());
this._register("login");
this._register("logout");
}
login() {
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 {
} else {
window.localStorage.removeItem("iui.login.username");
window.localStorage.removeItem("iui.login.password");
}
@@ -143,7 +135,6 @@ export default IUI.module(class Login extends IUIElement
return window.localStorage.setItem("iui.login.token", value);
}
get message() {
return this._message.innerHTML;
}
@@ -163,17 +154,14 @@ export default IUI.module(class Login extends IUIElement
this._emit("logout");
}
created()
{
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 });
// }
//}
}
});
}
);

80
src/UI/Menu.js
View File

@@ -1,17 +1,19 @@
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, {
super(
IUI.extend(props, {
index: "iid",
layout: { field: "name", formatter: null },
visible: false,
static: false,
"target-class": "selected"
}));
"target-class": "selected",
})
);
this._register("visible");
this._register("select");
@@ -19,8 +21,6 @@ export default class Menu extends IUIElement {
IUI._menus.push(this);
}
// clear() {
// this.innerHTML = "";
// this._uiBindings = null;
@@ -44,10 +44,7 @@ export default class Menu extends IUIElement {
this.setVisible(true, x, y, el);
}
async showModal(element) {
//super.data = this._getElementData(element);
await super.setData(element.data);
@@ -56,7 +53,7 @@ export default class Menu extends IUIElement {
this.background = document.getElementById("iui_app_background");
if (!this.background) {
this.background = new Background();// document.createElement("div");
this.background = new Background(); // document.createElement("div");
this.background.id = "iui_app_background";
document.body.insertAdjacentElement("afterBegin", this.background);
}
@@ -66,12 +63,16 @@ export default class Menu extends IUIElement {
this.classList.add(this.cssClass + "-modal");
this.classList.add(this.cssClass + "-visible");
var width = (window.innerWidth * 0.8);
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.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 });
@@ -89,7 +90,6 @@ export default class Menu extends IUIElement {
}
if (visible) {
//if (element)
//let dt = super._getElementData(element);
if (element) {
@@ -100,13 +100,11 @@ export default class Menu extends IUIElement {
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();
if (IUI.responsive && !this.static) return this.showModal();
this.classList.remove(this.cssClass + "-modal");
@@ -114,55 +112,43 @@ export default class Menu extends IUIElement {
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.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";
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.style.left = x + "px";
}
}
else {
} else {
this.classList.remove(this.cssClass + "-visible");
if (this.background)
this.background.hide();
if (this.background) this.background.hide();
//await super.setData({});// = {};
}
this._emit("visible", { visible });
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);
if (IUI._menus[i] instanceof Menu) IUI._menus[i].setVisible(false);
e.preventDefault();
return;
@@ -176,19 +162,13 @@ window.addEventListener("load", function () {
if (m._pass) {
m._pass = false;
continue;
}
else
if (m.visible)
if (!m.contains(e.target))
m.setVisible(false);
}
else if (m instanceof DropDown) {
} 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);

145
src/UI/Navbar.js
View File

@@ -3,61 +3,56 @@ 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()
{
export default IUI.module(
class Navbar extends IUIElement {
constructor() {
super();
this._list = [];
}
search_old(text) {
for(var i = 0; i < this._container.children.length; i++)
{
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) => `<span>${str}</span>`);
if (el.title.toLowerCase().includes(text)) {
el.text.innerHTML = el.title.replace(
new RegExp(text, "gi"),
str => `<span>${str}</span>`
);
el.style.display = "";
el.removeAttribute("hidden");
// make parents visible
let level = parseInt(el.getAttribute("data-level"));
for(var j = i - 1; j >= 0; j--)
{
for (var j = i - 1; j >= 0; j--) {
let previous = this._container.children[j];
let pLevel = parseInt(previous.getAttribute("data-level"));
if (pLevel < level)
{
if (pLevel < level) {
previous.removeAttribute("hidden");
previous.style.display = "";
if (previous.expand)
previous.expand.checked = true;
if (previous.expand) previous.expand.checked = true;
level = pLevel;
}
}
}
else
{
} else {
el.style.display = "none";
}
}
}
search(text, within) {
let menu = within == null ? this._container : within.menu;
for(var i = 0; i < menu.children.length; i++)
{
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) => `<span>${str}</span>`);
if (link.title.toLowerCase().includes(text)) {
link.text.innerHTML = link.title.replace(
new RegExp(text, "gi"),
str => `<span>${str}</span>`
);
item.style.display = "";
//if (within != null)
@@ -66,76 +61,62 @@ export default IUI.module(class Navbar extends IUIElement
// make parents visible
let parent = within;
while (parent != null && parent != this)
{
while (parent != null && parent != this) {
parent.expand.checked = true;
parent.removeAttribute("collapsed");
parent.style.display = "";
parent = parent.parentElement.parentElement;
}
}
else
{
} else {
item.style.display = "none";
}
if (item.menu != null)
this.search(text, item);
if (item.menu != null) this.search(text, item);
}
}
expand_old(link, value) {
let next = link;// = link.nextElementSibling;
let next = link; // = link.nextElementSibling;
let level = parseInt(link.getAttribute("data-level"));
// save
//window.localStorage.setItem("iui.navbar/" + link.link, 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;
}
get collapsed(){
get collapsed() {
return this.hasAttribute("collapsed");
}
get 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) => {
this._search.addEventListener("input", x => {
self.search(this._search.value);
});
@@ -149,19 +130,16 @@ export default IUI.module(class Navbar extends IUIElement
let collapsed = this.collapsed;
let auto = this.auto;
const filterRoutes = (routes) =>
const filterRoutes = routes =>
routes.filter(r => {
if (r.hasAttribute("private"))
return false;
if (r.hasAttribute("private")) return false;
if (this.private instanceof Function)
{
try{
if (this.private(r))
{
if (this.private instanceof Function) {
try {
if (this.private(r)) {
return false;
}
} catch(ex){
} catch (ex) {
console.log(ex);
debugger;
}
@@ -174,12 +152,10 @@ export default IUI.module(class Navbar extends IUIElement
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");
let link = new Link(); // document.createElement("i-link");
item.setAttribute("level", level);
link.link = routes[i].link;
link.title = routes[i].caption;
@@ -201,13 +177,12 @@ export default IUI.module(class Navbar extends IUIElement
if (subRoutes.length > 0) {
// append plus
item.expand = new Check({cssClass: this.cssClass + "-check"});// document.createElement("i-check");
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", "");
if (collapsed) item.setAttribute("collapsed", "");
link.appendChild(item.expand);
@@ -215,21 +190,22 @@ export default IUI.module(class Navbar extends IUIElement
item.menu.className = this.cssClass + "-menu";
item.appendChild(item.menu);
item.expand.on("click", (e) => {
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));
if (auto) {
item.addEventListener("mouseenter", () =>
self.expand(item, true)
);
item.addEventListener("mouseleave", () =>
self.expand(item, false)
);
}
appendRoutes(subRoutes, level + 1, item.menu);
}
}
};
@@ -238,18 +214,15 @@ export default IUI.module(class Navbar extends IUIElement
created() {
if (!this.hasAttribute("manual"))
window.router.on("created", ()=>this.build());
window.router.on("created", () => this.build());
window.router.on("navigate", (e) => {
for(var i = 0; i < this._list.length; i++)
{
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");
if (el.link.link == e.base) el.setAttribute("selected", "");
else el.removeAttribute("selected");
}
});
}
});
}
);

88
src/UI/Range.js
View File

@@ -1,7 +1,8 @@
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) {
@@ -19,7 +20,7 @@ export default IUI.module(class Range extends IUIElement {
},
getPosition: function (index, data, width) {
var itemSize = width / data.length;
return (index * itemSize) + (itemSize / 2);
return index * itemSize + itemSize / 2;
},
layout: {
render: function () {
@@ -27,24 +28,20 @@ export default IUI.module(class Range extends IUIElement {
},
initialize: function () {
return true;
}
},
data: []
},
data: [],
});
var self = this;
this._register("select");
this._register("userSelect");
this.preview = document.createElement("div");
this.preview.className = this.customClass + "-preview";
if (this.layout)
this.layout.initialize.apply(this);
if (this.layout) this.layout.initialize.apply(this);
this.thumb = document.createElement("div");
this.thumb.classList.add(this.customClass + "-thumb");
@@ -65,47 +62,55 @@ export default IUI.module(class Range extends IUIElement {
var rect = self.getBoundingClientRect();
self._offset = {
top: rect.top + document.body.scrollTop,
left: rect.left + document.body.scrollLeft
left: rect.left + document.body.scrollLeft,
};
});
this.addEventListener("mousemove", function (e) {
self._drag(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);
var preview = self.getPreview.call(
self,
index,
self.data,
x,
self.offsetWidth,
self.preview
);
if (preview == null || preview == false) {
self.preview.classList.remove(self.customClass + "-preview-visible");
return;
}
else if (preview instanceof HTMLElement) {
} 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) {
} else if (preview != true) {
self.preview.innerHTML = preview;
}
var index = self.getIndex((e.clientX - self._offset.left), self.offsetWidth, self.data);
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");
});
document.addEventListener("mouseup", function (e) {
if (self._dragging)
self._endDragging(e.clientX, e.clientY);
if (self._dragging) self._endDragging(e.clientX, e.clientY);
});
this.addEventListener("touchstart", function (e) {
self._startDragging(e.targetTouches[0].clientX, e.targetTouches[0].clientY);
self._startDragging(
e.targetTouches[0].clientX,
e.targetTouches[0].clientY
);
});
this.addEventListener("touchmove", function (e) {
@@ -113,7 +118,10 @@ export default IUI.module(class Range extends IUIElement {
});
this.addEventListener("touchend", function (e) {
self._endDragging(e.changedTouches[0].clientX, e.changedTouches[0].clientY);
self._endDragging(
e.changedTouches[0].clientX,
e.changedTouches[0].clientY
);
});
this.setData(this.data);
@@ -122,22 +130,27 @@ export default IUI.module(class Range extends IUIElement {
_startDragging(x, y) {
this._dragging = true;
document.onselectstart = function () { return false };
document.onselectstart = function () {
return false;
};
var rect = this.getBoundingClientRect();
var body = document.body.getBoundingClientRect();
this._offset = {
top: rect.top + body.top,// document.body.scrollTop,
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);
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);
if (item != null) {
@@ -148,8 +161,7 @@ export default IUI.module(class Range extends IUIElement {
this._emit("select", { item, index });
if (byUser)
this._emit("userSelect", { item, index });
if (byUser) this._emit("userSelect", { item, index });
this.selected = item;
this.selectedIndex = index;
@@ -161,7 +173,7 @@ export default IUI.module(class Range extends IUIElement {
_drag(x, y) {
if (this._dragging) {
this.thumb.classList.add(this.customClass + "-thumb-dragging");
var dx = (x - this._offset.left);
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);
@@ -169,9 +181,15 @@ export default IUI.module(class Range extends IUIElement {
}
_endDragging(x, y) {
document.onselectstart = function () { return true };
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);
var index = this.getIndex(
x - this._offset.left,
this.offsetWidth,
this.data
);
this.set(index, true, true);
this._dragging = false;
}
@@ -181,8 +199,8 @@ export default IUI.module(class Range extends IUIElement {
}
render() {
if (this.layout && this.layout.render)
this.layout.render.apply(this);
if (this.layout && this.layout.render) this.layout.render.apply(this);
return this;
}
});
}
);

14
src/UI/RoutesList.js
View File

@@ -1,15 +1,14 @@
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");
@@ -17,7 +16,8 @@ export default IUI.module(class RoutesList extends IUIElement {
for (var i = 0; i < window.router.routes.length; i++) {
// hell
table.add
table.add;
}
}
});
}
);

169
src/UI/Select.js
View File

@@ -1,10 +1,11 @@
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,
@@ -12,10 +13,10 @@ export default IUI.module(class Select extends IUIElement {
hasArrow: true,
//hasAdd: false,
updateTextBox: true,
query: (x) => null,
query: x => null,
//_formatter: (x) => x,
_autocomplete: false,
cssClass: 'select'
cssClass: "select",
});
this._register("select");
@@ -25,15 +26,12 @@ export default IUI.module(class Select extends IUIElement {
disconnectedCallback() {
//console.log("Select removed", this);
if (!this.searchlist && this.menu)
app.removeChild(this.menu);
if (!this.searchlist && this.menu) app.removeChild(this.menu);
}
connectedCallback(){
connectedCallback() {
super.connectedCallback();
if (!this.searchlist && this.menu)
app.appendChild(this.menu);
if (!this.searchlist && this.menu) app.appendChild(this.menu);
}
get autocomplete() {
return this._autocomplete;
@@ -48,7 +46,6 @@ export default IUI.module(class Select extends IUIElement {
// }
_checkValidity() {
if (this.validate != null) {
try {
let valid = this.validate.apply(this);
@@ -56,14 +53,12 @@ export default IUI.module(class Select extends IUIElement {
this.setAttribute("invalid", "");
this.classList.add(this.cssClass + "-invalid");
return false;
}
else {
} else {
this.removeAttribute("invalid");
this.classList.remove(this.cssClass + "-invalid");
return true;
}
}
catch (ex) {
} catch (ex) {
console.log("Validation Error", ex);
return false;
}
@@ -73,10 +68,8 @@ export default IUI.module(class Select extends IUIElement {
}
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() {
@@ -84,14 +77,11 @@ export default IUI.module(class Select extends IUIElement {
}
async create() {
this.isAuto = this.hasAttribute("auto");
this.field = this.getAttribute("field");
if (this.field != null)
{
this.setAttribute(":data", `d['${this.field}']`)
if (this.field != null) {
this.setAttribute(":data", `d['${this.field}']`);
this.setAttribute(":revert", `d['${this.field}'] = this.data`);
}
@@ -103,9 +93,6 @@ export default IUI.module(class Select extends IUIElement {
//if (this._autocomplete)
// this.cssClass += "-autocomplete";
this.repeat = new Repeat();
this.repeat.cssClass = "select-menu-repeat";
//this.repeat.innerHTML = this.innerHTML;
@@ -115,28 +102,35 @@ export default IUI.module(class Select extends IUIElement {
this.counter.className = this.cssClass + "-counter";
this.counter.innerHTML = "${d[0]}";
this.menu = new Menu({
cssClass: this.cssClass + "-menu",
"target-class": "",
});
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) {
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()});
})
.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;
if (this.placeholder) this.textbox.placeholder = this.placeholder;
this.textbox.addEventListener("keyup", function (e) {
if (e.keyCode != 13) {
@@ -149,7 +143,6 @@ export default IUI.module(class Select extends IUIElement {
});
this.menu.appendChild(this.textbox);
}
// get collection
@@ -157,18 +150,17 @@ export default IUI.module(class Select extends IUIElement {
//debugger;
if (layout != null && layout.label != undefined && layout.menu != undefined) {
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)
{
} else if (layout != null && layout.null != null) {
this.label = layout.null.node;
this.repeat.appendChild(layout.null.node.cloneNode(true));
}
else
{
} else {
this.label = document.createElement("div");
this.repeat.innerHTML = this.innerHTML;
}
@@ -187,18 +179,14 @@ export default IUI.module(class Select extends IUIElement {
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 (self.visible) self.hide();
else self.show();
});
}
@@ -208,19 +196,14 @@ export default IUI.module(class Select extends IUIElement {
this.appendChild(this._add_button);
this._add_button.addEventListener("click", function (e) {
self._emit("add", { value: self.data })
self._emit("add", { value: self.data });
});
}
if (this.searchlist)
this.appendChild(this.menu);
else
{
if (this.searchlist) this.appendChild(this.menu);
else {
app.appendChild(this.menu);
if (app.loaded)
{
if (app.loaded) {
///console.log("Append", this.menu);
await this.menu.create();
IUI.bind(this.menu, false, "menu");
@@ -231,8 +214,7 @@ export default IUI.module(class Select extends IUIElement {
}
this.addEventListener("click", function (e) {
if (e.target == self.textbox)
self.show();
if (e.target == self.textbox) self.show();
});
}
@@ -247,12 +229,9 @@ export default IUI.module(class Select extends IUIElement {
if (value) {
this.setAttribute("disabled", value);
}
else {
} else {
this.removeAttribute("disabled");
}
}
/*
set(item) {
@@ -285,8 +264,7 @@ export default IUI.module(class Select extends IUIElement {
}
clear() {
if (this.autocomplete !== undefined)
this.textbox.value = "";
if (this.autocomplete !== undefined) this.textbox.value = "";
//else
// this.label.innerHTML = "";
@@ -296,32 +274,21 @@ export default IUI.module(class Select extends IUIElement {
}
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;
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);
if (res[1].length == 0) await self.setData(null);
await this.menu.setData(res);
}
async setData(value) {
// this.label.innerHTML = "";
await super.setData(value);
@@ -331,25 +298,18 @@ export default IUI.module(class Select extends IUIElement {
// this.label.innerHTML = text == null ? "" : text;
this._emit("select", { value });
}
catch (ex) {
} catch (ex) {
//console.log(ex);
this._emit("select", { value });
}
//this._checkValidity();
if (this._checkValidity() && this.isAuto)
this.revert();
if (this._checkValidity() && this.isAuto) this.revert();
}
setVisible(visible) {
if (visible == this.visible)
return;
if (visible == this.visible) return;
//console.log("SLCT: SetVisible", visible);
@@ -358,9 +318,10 @@ export default IUI.module(class Select extends IUIElement {
// show menu
var rect = this.getBoundingClientRect();
this.menu.style.width = (this.clientWidth - this._computeMenuOuterWidth()) + "px";
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.menu.setVisible(true, rect.left, rect.top); //, this.menu);
this.visible = true;
this.classList.add(this.cssClass + "-visible");
@@ -369,9 +330,7 @@ export default IUI.module(class Select extends IUIElement {
setTimeout(() => {
this.textbox.focus();
}, 100);
}
else {
} else {
this.visible = false;
this.classList.remove(this.cssClass + "-visible");
@@ -379,11 +338,9 @@ export default IUI.module(class Select extends IUIElement {
}
//this.textbox.focus();
}
_computeMenuOuterWidth() {
return this.menu.offsetWidth - this.menu.clientWidth;
/*
var style = window.getComputedStyle(this.menu.el, null);
@@ -400,5 +357,5 @@ export default IUI.module(class Select extends IUIElement {
return paddingLeft + paddingRight + borderLeft + borderRight;
*/
}
});
}
);

40
src/UI/SelectList.js
View File

@@ -1,13 +1,14 @@
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"]
query: x => null,
formatter: x => x["name"],
});
var self = this;
@@ -15,29 +16,27 @@ export default IUI.module(class SelectList extends IUIElement {
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");
if (v) self.classList.add(self.cssClass + "-active");
else self.classList.remove(self.cssClass + "-active");
});
this.menu.on("click", (e) => {
this.menu.on("click", e => {
let [data, element] = self.menu._getElementData(e.target);
if (data != undefined)
self.data = data;
if (data != undefined) self.data = data;
});
document.body.appendChild(this.menu);
this.label = document.createElement("div");
this.label.className = this.cssClass + "-label";
this.appendChild(this.label);
this.label.addEventListener("click", function (e) {
@@ -81,7 +80,9 @@ export default IUI.module(class SelectList extends IUIElement {
}
// 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.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);
@@ -107,13 +108,14 @@ export default IUI.module(class SelectList extends IUIElement {
// show menu
var rect = this.el.getBoundingClientRect();
this.menu.el.style.width = (rect.width - this._computeMenuOuterWidth()) + "px";
this.menu.el.style.width =
rect.width - this._computeMenuOuterWidth() + "px";
this.menu.setVisible(true, rect.left, rect.top + rect.height);
}
else {
} else {
this.menu.hide();
}
return this;
}
});
}
);

12
src/UI/Tab.js
View File

@@ -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);
}
create() {
}
create() {}
get 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");
}
});
}
);

108
src/UI/TabbedTarget.js
View File

@@ -1,11 +1,10 @@
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,
@@ -16,13 +15,11 @@ export default IUI.module(class TabbedTarget extends Target {
});
}
create() {
var self = this;
this._register("select");
this._bar = document.createElement("div");
this._bar.classList.add(this.cssClass + "-bar");
@@ -30,8 +27,6 @@ export default IUI.module(class TabbedTarget extends Target {
this._ext.className = this.cssClass + "-bar-ext";
this._bar.appendChild(this._ext);
//this.insertAdjacentElement("afterBegin", this._bar);
this._body = document.createElement("div");
@@ -40,50 +35,61 @@ export default IUI.module(class TabbedTarget extends Target {
this.appendChild(this._bar);
this.appendChild(this._body);
var items = [];// this.getElementsByClassName("tab");
var items = []; // this.getElementsByClassName("tab");
for (var i = 0; i < this.children.length; i++)
if (this.children[i] instanceof Tab)
items.push(this.children[i]);
if (this.children[i] instanceof Tab) items.push(this.children[i]);
this._observer = new ResizeObserver(x => {
self._body.style.height = x[0].target.offsetHeight + "px";// x[0].contentRect.height + "px";
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) {
this.addEventListener(
"touchstart",
function (e) {
var x = e.target;
do {
if (x == self)
break;
if (x == self) break;
var sy = window.getComputedStyle(x)["overflow-x"];
if (x.scrollWidth > x.clientWidth && (sy == "scroll" || sy == "auto"))
if (
x.scrollWidth > x.clientWidth &&
(sy == "scroll" || sy == "auto")
)
return;
} while (x = x.parentElement)
} 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 });
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) {
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 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 (Math.abs(xDiff) > Math.abs(yDiff)) {
/*most significant*/
if (xDiff > 0) {
if (index < self.list.length - 1) {
self.select(self.list[index + 1]);
@@ -91,9 +97,7 @@ export default IUI.module(class TabbedTarget extends Target {
}
/* left swipe */
} else {
if (index > 0)
self.select(self.list[index - 1]);
if (index > 0) self.select(self.list[index - 1]);
/* right swipe */
}
@@ -107,8 +111,9 @@ export default IUI.module(class TabbedTarget extends Target {
/* reset values */
self._x = null;
self._y = null;
}, { passive: true });
},
{ passive: true }
);
}
created() {
@@ -116,7 +121,6 @@ export default IUI.module(class TabbedTarget extends Target {
}
add(item) {
var label = document.createElement("i-check");
label.innerHTML = item.title;
@@ -130,8 +134,6 @@ export default IUI.module(class TabbedTarget extends Target {
this._body.append(item);
this.list.push(item);
var self = this;
label.on("check", function (v) {
@@ -139,10 +141,7 @@ export default IUI.module(class TabbedTarget extends Target {
self.select(item);
});
if (item.selected)
this.select(item);
if (item.selected) this.select(item);
return this;
}
@@ -157,47 +156,40 @@ export default IUI.module(class TabbedTarget extends Target {
select(item) {
var tab;
if (item instanceof Tab)
tab = item;
else if (typeof o === 'string' || o instanceof String)
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;
break;
}
else if (!isNaN(item))
tab = this.list[i];
} else if (!isNaN(item)) tab = this.list[i];
//this._neglect = true;
var self = this;
this.list.forEach(function (i) {
if (i == tab)
tab.label.check(true);// set(true, false);
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);
i.label.check(false); // set(false, false);
}
});
//this._neglect = false;
tab.classList.add(this.cssClass + "-content-active");
if (this.selected != null)
this._observer.unobserve(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;
else this._bar.scrollLeft = tab.label.offsetLeft - tab.label.clientWidth;
this._emit("select", tab);
return this;
}
});
}
);

951
src/UI/Table.js
View File

File diff suppressed because it is too large Load Diff

113
src/UI/Tabs.js
View File

@@ -1,11 +1,10 @@
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,
@@ -16,14 +15,11 @@ export default IUI.module(class Tabs extends IUIElement {
});
}
create()
{
create() {
var self = this;
this._register("select");
this._bar = document.createElement("div");
this._bar.classList.add(this.cssClass + "-bar");
@@ -31,8 +27,6 @@ export default IUI.module(class Tabs extends IUIElement {
this._ext.className = this.cssClass + "-bar-ext";
this._bar.appendChild(this._ext);
//this.insertAdjacentElement("afterBegin", this._bar);
this._body = document.createElement("div");
@@ -41,50 +35,61 @@ export default IUI.module(class Tabs extends IUIElement {
this.appendChild(this._bar);
this.appendChild(this._body);
var items = [];// this.getElementsByClassName("tab");
var items = []; // this.getElementsByClassName("tab");
for (var i = 0; i < this.children.length; i++)
if (this.children[i] instanceof Tab)
items.push(this.children[i]);
if (this.children[i] instanceof Tab) items.push(this.children[i]);
this._observer = new ResizeObserver(x => {
self._body.style.height = x[0].target.offsetHeight + "px";// x[0].contentRect.height + "px";
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) {
this.addEventListener(
"touchstart",
function (e) {
var x = e.target;
do {
if (x == self)
break;
if (x == self) break;
var sy = window.getComputedStyle(x)["overflow-x"];
if (x.scrollWidth > x.clientWidth && (sy == "scroll" || sy == "auto"))
if (
x.scrollWidth > x.clientWidth &&
(sy == "scroll" || sy == "auto")
)
return;
} while (x = x.parentElement)
} 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 });
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) {
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 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 (Math.abs(xDiff) > Math.abs(yDiff)) {
/*most significant*/
if (xDiff > 0) {
if (index < self.list.length - 1) {
self.select(self.list[index + 1]);
@@ -92,9 +97,7 @@ export default IUI.module(class Tabs extends IUIElement {
}
/* left swipe */
} else {
if (index > 0)
self.select(self.list[index - 1]);
if (index > 0) self.select(self.list[index - 1]);
/* right swipe */
}
@@ -108,8 +111,9 @@ export default IUI.module(class Tabs extends IUIElement {
/* reset values */
self._x = null;
self._y = null;
}, { passive: true });
},
{ passive: true }
);
}
created() {
@@ -117,8 +121,7 @@ export default IUI.module(class Tabs extends IUIElement {
}
add(item) {
var label = new Check();// document.createElement("i-check");
var label = new Check(); // document.createElement("i-check");
label.innerHTML = item.caption;
this._ext.insertAdjacentElement("beforebegin", label);
@@ -131,8 +134,6 @@ export default IUI.module(class Tabs extends IUIElement {
this._body.append(item);
this.list.push(item);
var self = this;
label.on("check", function (v) {
@@ -140,10 +141,7 @@ export default IUI.module(class Tabs extends IUIElement {
self.select(item);
});
if (item.selected)
this.select(item);
if (item.selected) this.select(item);
return this;
}
@@ -158,47 +156,40 @@ export default IUI.module(class Tabs extends IUIElement {
select(item) {
var tab;
if (item instanceof Tab)
tab = item;
else if (typeof o === 'string' || o instanceof String)
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;
break;
}
else if (!isNaN(item))
tab = this.list[i];
} else if (!isNaN(item)) tab = this.list[i];
//this._neglect = true;
var self = this;
this.list.forEach(function (i) {
if (i == tab)
tab.label.check(true);// set(true, false);
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);
i.label.check(false); // set(false, false);
}
});
//this._neglect = false;
tab.classList.add(this.cssClass + "-content-active");
if (this.selected != null)
this._observer.unobserve(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;
else this._bar.scrollLeft = tab.label.offsetLeft - tab.label.clientWidth;
this._emit("select", tab);
return this;
}
});
}
);

66
src/UI/Window.js
View File

@@ -1,7 +1,8 @@
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 });
@@ -10,7 +11,6 @@ export default IUI.module(class IUIWindow extends IUIElement {
this._register("close");
this._uid = "d:" + Math.random().toString(36).substring(2);
}
static moduleName = "window";
@@ -24,8 +24,7 @@ export default IUI.module(class IUIWindow extends IUIElement {
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;
@@ -41,18 +40,13 @@ export default IUI.module(class IUIWindow extends IUIElement {
this._body.appendChild(this.children[0]);
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;
this._icon.style.setProperty("--icon", `url('${this.icon}')`);
this._header.appendChild(this._icon);
}
@@ -93,8 +87,7 @@ export default IUI.module(class IUIWindow extends IUIElement {
}
setCloseVisible(value) {
if (this.closeable)
this._close.style.display = value ? "" : "none";
if (this.closeable) this._close.style.display = value ? "" : "none";
}
get icon() {
@@ -174,7 +167,6 @@ export default IUI.module(class IUIWindow extends IUIElement {
}
*/
show() {
//this.setFocus(true);
return this;
@@ -199,26 +191,34 @@ export default IUI.module(class IUIWindow extends IUIElement {
}
_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._footer) {
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";
}
}
@@ -226,18 +226,20 @@ export default IUI.module(class IUIWindow extends IUIElement {
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";
this._body.style.height =
this.clientHeight -
this._footer.clientHeight -
this._header.clientHeight +
"px";
else
this._body.style.height = (this.clientHeight - this._header.clientHeight) + "px";
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");
}
@@ -247,7 +249,6 @@ export default IUI.module(class IUIWindow extends IUIElement {
this.setAttribute("caption", value);
}
get subtitle() {
return this.getAttribute("subtitle");
}
@@ -256,9 +257,8 @@ export default IUI.module(class IUIWindow extends IUIElement {
this._subtitle.innerHTML = value;
this.setAttribute("subtitle", value);
}
});
}
);
/*
IUI._nav_list = [];

67
src/iui.js
View File

@@ -1,53 +1,53 @@
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)=>{
window.addEventListener("beforeprint", e => {
let viewRoute = router.current.viewRoute;
viewRoute.style.height = "auto";
router.style.height = viewRoute.clientHeight + "px";
});
window.addEventListener("afterprint", (e)=>{
window.addEventListener("afterprint", e => {
let viewRoute = router.current.viewRoute;
viewRoute.style.height = "";
router.style.height = "";
@@ -56,9 +56,6 @@ window.addEventListener("afterprint", (e)=>{
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 });
// }
});
window.iui = iui;