mirror of
https://github.com/esiur/iui.git
synced 2025-06-27 09:23:12 +00:00
initial commit
This commit is contained in:
24
src/Core/App.js
Normal file
24
src/Core/App.js
Normal file
@ -0,0 +1,24 @@
|
||||
import IUIElement from "../Core/IUIElement.js";
|
||||
import { IUI } from "../Core/IUI.js";
|
||||
|
||||
export default IUI.module(class App extends IUIElement {
|
||||
constructor() {
|
||||
super();
|
||||
}
|
||||
|
||||
create() {
|
||||
this._register("load");
|
||||
window.app = this;
|
||||
}
|
||||
|
||||
created() {
|
||||
this.updateBindings();
|
||||
this.render();
|
||||
this._emit("load", { app: this });
|
||||
|
||||
this.loaded = true;
|
||||
}
|
||||
|
||||
|
||||
|
||||
});
|
||||
351
src/Core/Binding.js
Normal file
351
src/Core/Binding.js
Normal file
@ -0,0 +1,351 @@
|
||||
import IUIElement from "./IUIElement.js";
|
||||
|
||||
export const BindingType = {
|
||||
IUIElement: 0, // this will never happen !
|
||||
TextNode: 1,
|
||||
ContentAttribute: 2,
|
||||
Attribute: 3,
|
||||
HTMLElementDataAttribute: 4,
|
||||
IUIElementDataAttribute: 5,
|
||||
IfAttribute: 6,
|
||||
RevertAttribute: 7
|
||||
};
|
||||
|
||||
export const AttributeBindingDestination = {
|
||||
Field: 0,
|
||||
Attribute: 1
|
||||
};
|
||||
|
||||
const AsyncFunction = Object.getPrototypeOf(async function () { }).constructor;
|
||||
|
||||
export class Binding {
|
||||
static create(nodeOrAttributeOrIUIElement) {
|
||||
var code, isAsync, type, attrType, attrKey, func, script;
|
||||
|
||||
//if (nodeOrAttributeOrIUIElement.created)
|
||||
// debugger;
|
||||
|
||||
if (nodeOrAttributeOrIUIElement instanceof IUIElement) {
|
||||
isAsync = nodeOrAttributeOrIUIElement.hasAttribute("async");
|
||||
type = BindingType.IUIElement;
|
||||
} else if (nodeOrAttributeOrIUIElement instanceof Text) {// nodeOrAttribute.nodeType == 3) {
|
||||
if (!nodeOrAttributeOrIUIElement.wholeText.match(/\${.*}/))
|
||||
return null;
|
||||
type = BindingType.TextNode;
|
||||
isAsync = nodeOrAttributeOrIUIElement.parentElement.hasAttribute("async");
|
||||
//code = "return `" + nodeOrAttributeOrIUIElement.wholeText + "`;";
|
||||
|
||||
script = nodeOrAttributeOrIUIElement.wholeText;
|
||||
|
||||
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("::")) {
|
||||
isAsync = false;
|
||||
attrType = AttributeBindingDestination.Attribute;
|
||||
attrKey = nodeOrAttributeOrIUIElement.name.substr(2);
|
||||
}
|
||||
else if (nodeOrAttributeOrIUIElement.name.startsWith("async:")) {
|
||||
isAsync = true;
|
||||
attrType = AttributeBindingDestination.Field;
|
||||
attrKey = nodeOrAttributeOrIUIElement.name.substr(6);
|
||||
}
|
||||
else if (nodeOrAttributeOrIUIElement.name.startsWith(":")) {
|
||||
isAsync = false;
|
||||
attrType = AttributeBindingDestination.Field;
|
||||
attrKey = nodeOrAttributeOrIUIElement.name.substr(1);
|
||||
}
|
||||
else {
|
||||
return null;
|
||||
}
|
||||
|
||||
// isAsync = nodeOrAttributeOrIUIElement.value.search("await");
|
||||
|
||||
// code = "return " + nodeOrAttributeOrIUIElement.value + ";";
|
||||
|
||||
script = nodeOrAttributeOrIUIElement.value
|
||||
code = `try {\r\n context.value = ${script}; \r\n}\r\n catch(ex) { context.error = ex; }`
|
||||
|
||||
let sentence = attrKey.split("-");
|
||||
for (var i = 1; i < sentence.length; i++)
|
||||
sentence[i] = sentence[i].charAt(0).toUpperCase() + sentence[i].slice(1);
|
||||
attrKey = sentence.join("");
|
||||
|
||||
if (attrKey == "content")
|
||||
type = BindingType.ContentAttribute;
|
||||
else if (attrKey == "if") {
|
||||
type = BindingType.IfAttribute;
|
||||
//displayMode =
|
||||
}
|
||||
else if (attrKey == "revert")
|
||||
type = BindingType.RevertAttribute;
|
||||
else if (attrKey != "data")
|
||||
type = BindingType.Attribute;
|
||||
else if (nodeOrAttributeOrIUIElement.ownerElement instanceof IUIElement)
|
||||
type = BindingType.IUIElementDataAttribute;
|
||||
else
|
||||
type = BindingType.HTMLElementDataAttribute;
|
||||
}
|
||||
|
||||
|
||||
// test the function
|
||||
|
||||
try {
|
||||
if (isAsync)
|
||||
func = new AsyncFunction("data", "d", "context", "_test", code);
|
||||
else
|
||||
func = new Function("data", "d", "context", "_test", 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 });
|
||||
return rt;
|
||||
}
|
||||
|
||||
constructor() {
|
||||
this.watchList = [];
|
||||
let self = this;
|
||||
this.listener = function (name, value) {
|
||||
self.render(self.data);
|
||||
};
|
||||
}
|
||||
|
||||
_findMap(thisArg) {
|
||||
|
||||
// @TODO: Map thisArg too
|
||||
let map = {};
|
||||
|
||||
let detector = {
|
||||
get: function (obj, prop) {
|
||||
if (typeof prop == "string") {
|
||||
obj[prop] = {};
|
||||
return new Proxy(obj[prop], detector);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
this.checked = true;
|
||||
|
||||
let proxy = new Proxy(map, detector);
|
||||
|
||||
try {
|
||||
let d = this.func.apply(thisArg, [proxy, proxy, {}, true]);
|
||||
this.map = map;
|
||||
return d;
|
||||
}
|
||||
catch (ex) {
|
||||
//console.log("Proxy failed", ex);
|
||||
this.map = map;
|
||||
}
|
||||
}
|
||||
|
||||
async _execute(thisArg, data) {
|
||||
if (!this.checked)
|
||||
this._findMap(thisArg);
|
||||
|
||||
|
||||
let context = {};
|
||||
var rt = this.func.apply(thisArg, [data, data, context, false]);
|
||||
|
||||
//console.log(rt);
|
||||
if (rt instanceof Promise)
|
||||
await rt;
|
||||
|
||||
if (context.error != undefined)
|
||||
{
|
||||
console.log("Execution failed", context.error.name + ": " + context.error.message, this.script, this.target);
|
||||
return;
|
||||
}
|
||||
else if (context.value == undefined)
|
||||
{
|
||||
return;
|
||||
}
|
||||
else if (context.value instanceof Promise)
|
||||
{
|
||||
try
|
||||
{
|
||||
return await context.value;
|
||||
} catch(ex) {
|
||||
console.log("Execution failed", ex.name + ": " + ex.message, this.script, this.target);
|
||||
}
|
||||
}
|
||||
else
|
||||
{
|
||||
return context.value;
|
||||
}
|
||||
}
|
||||
|
||||
unbind() {
|
||||
this.data = null;
|
||||
for (var i = 0; i < this.watchList.length; i++)
|
||||
this.watchList[i].data.off(this.watchList[i].event, this.listener);
|
||||
this.watchList = [];
|
||||
}
|
||||
|
||||
bind(data, map) {
|
||||
if (data == null)
|
||||
return;
|
||||
|
||||
if (data?.on) {
|
||||
|
||||
for (var p in map) {
|
||||
let event = ":" + p;
|
||||
data.on(":" + p, this.listener);
|
||||
this.watchList.push({ data, event});
|
||||
|
||||
this.bind(data[p], map[p]);
|
||||
}
|
||||
|
||||
//if (this.watchList.includes(data))
|
||||
// this.watchList.push({ data, event : });
|
||||
}
|
||||
else {
|
||||
for (var p in map) {
|
||||
this.bind(data[p], map[p]);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
async render(data) {
|
||||
|
||||
// @TODO: Checking properties bindings moved here
|
||||
if (data != this.data)
|
||||
this.unbind();
|
||||
|
||||
try {
|
||||
if (this.type === BindingType.IUIElement) {
|
||||
let d = this.func.apply(this.target, [data, data]);
|
||||
if (d instanceof Promise)
|
||||
d = await d;
|
||||
await this.target.setData(d);
|
||||
}
|
||||
else if (this.type === BindingType.TextNode) {
|
||||
|
||||
try {
|
||||
|
||||
let d = await this._execute(this.target.parentElement, data);
|
||||
|
||||
if (d === undefined)
|
||||
return false;
|
||||
//if (d instanceof Promise)
|
||||
// d = await d;
|
||||
|
||||
this.target.data = d;// (d === undefined) ? "" : d;
|
||||
|
||||
if (data != this.data) {
|
||||
this.data = data;
|
||||
this.bind(data, this.map);
|
||||
}
|
||||
|
||||
}
|
||||
catch (ex) {
|
||||
this.target.data = "";
|
||||
}
|
||||
}
|
||||
// Content Attribute
|
||||
else if (this.type == BindingType.ContentAttribute) {
|
||||
let d = await this._execute(this.target.ownerElement, data);
|
||||
|
||||
if (d === undefined)
|
||||
return false;
|
||||
|
||||
//if (d instanceof Promise)
|
||||
// d = await d;
|
||||
|
||||
this.target.ownerElement.innerHTML = d;
|
||||
}
|
||||
else if (this.type == BindingType.IfAttribute)
|
||||
{
|
||||
let d = await this._execute(this.target.ownerElement, data);
|
||||
|
||||
if (d === undefined)
|
||||
return false;
|
||||
|
||||
//if (d instanceof Promise)
|
||||
// d = await d;
|
||||
|
||||
this.target.ownerElement.style.display = d ? "" : "none";
|
||||
}
|
||||
else if (this.type == BindingType.RevertAttribute)
|
||||
{
|
||||
let d = await this._execute(this.target.ownerElement, data);
|
||||
if (d === undefined)
|
||||
return false;
|
||||
//if (d instanceof Promise)
|
||||
// d = await d;
|
||||
|
||||
}
|
||||
// Attribute
|
||||
else if (this.type === BindingType.Attribute) {
|
||||
|
||||
//if (this.target.ownerElement.hasAttribute("debug"))
|
||||
// debugger;
|
||||
|
||||
let d = await this._execute(this.target.ownerElement, data);
|
||||
|
||||
if (d === undefined)
|
||||
return false;
|
||||
|
||||
//if (d instanceof Promise)
|
||||
// d = await d;
|
||||
|
||||
if (this.attrType == AttributeBindingDestination.Field)
|
||||
this.target.ownerElement[this.attrKey] = d;
|
||||
else
|
||||
this.target.ownerElement.setAttribute(this.attrKey, d);
|
||||
|
||||
if (data != this.data) {
|
||||
this.data = data;
|
||||
this.bind(data, this.map);
|
||||
}
|
||||
}
|
||||
|
||||
// Data Attribute of IUI Element
|
||||
else if (this.type === BindingType.IUIElementDataAttribute) {
|
||||
|
||||
|
||||
|
||||
let d = await this._execute(this.target.ownerElement, data);
|
||||
//if (d === undefined)
|
||||
// return false;
|
||||
|
||||
//if (d instanceof Promise)
|
||||
// d = await d;
|
||||
await this.target.ownerElement.setData(d);
|
||||
}
|
||||
// Data Attribute of HTML Element
|
||||
else if (this.type == BindingType.HTMLElementDataAttribute) {
|
||||
|
||||
let d = await this._execute(this.target.ownerElement, data);
|
||||
if (d === undefined)
|
||||
return false;
|
||||
//if (d instanceof Promise)
|
||||
// d = await d;
|
||||
this.target.ownerElement.data = d;
|
||||
}
|
||||
|
||||
return true;
|
||||
}
|
||||
catch (ex) {
|
||||
// console.log(ex);
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
310
src/Core/IUI.js
Normal file
310
src/Core/IUI.js
Normal file
@ -0,0 +1,310 @@
|
||||
import IUIElement from "./IUIElement.js";
|
||||
|
||||
export const IUI = {
|
||||
format: function (input) {
|
||||
if (typeof input == "string" || input instanceof String) {
|
||||
let template = document.createElement("template");
|
||||
template.innerHTML = input;
|
||||
let nodes = template.content.cloneNode(true).childNodes;
|
||||
return nodes;
|
||||
}
|
||||
else if (input instanceof HTMLCollection)
|
||||
return input;
|
||||
else if (input instanceof HTMLElement)
|
||||
return [input];
|
||||
else
|
||||
return [];
|
||||
},
|
||||
_menus: [],
|
||||
views: [],
|
||||
modules: {},
|
||||
registry : [],
|
||||
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();
|
||||
}
|
||||
}
|
||||
|
||||
}, { threshold: [0] }),
|
||||
created: async function (element) {
|
||||
|
||||
for (var i = 0; i < element.children.length; i++) {
|
||||
let e = element.children[i];
|
||||
if (e instanceof IUIElement)
|
||||
await e.created();
|
||||
await IUI.created(e);
|
||||
}
|
||||
},
|
||||
create: async function(element)
|
||||
{
|
||||
|
||||
for (let i = 0; i < element.children.length; i++) {
|
||||
let e = element.children[i];
|
||||
if (e instanceof IUIElement) {
|
||||
await e.create();
|
||||
// e.updateBindings();
|
||||
}
|
||||
|
||||
await IUI.create(e);
|
||||
}
|
||||
/*
|
||||
let router = document.getElementsByTagName("i-router")[0];
|
||||
|
||||
await router.create();
|
||||
|
||||
let elements = document.querySelectorAll("*");
|
||||
for (var i = 0; i < elements.length; i++)
|
||||
if (elements[i] instanceof IUIElement && elements[i].tagName != "I-ROUTER") {
|
||||
console.log(elements[i]);
|
||||
await elements[i].create();
|
||||
}
|
||||
*/
|
||||
|
||||
//for(var i = 0; i < IUI.registry.length; i++)
|
||||
//{
|
||||
// IUI.extend(IUI.registry[i], IUI.registry[i].properties);
|
||||
// await IUI.registry[i].create();
|
||||
// //await IUI.registry[i].updateAttributes();
|
||||
//}
|
||||
//return;
|
||||
},
|
||||
get : function(o)
|
||||
{
|
||||
return document.getElementById(o);
|
||||
|
||||
//for(var i = 0; i < IUI.registry.length; i++)
|
||||
// if (IUI.registry[i].id == o)
|
||||
// return IUI.registry[i];
|
||||
//return null;
|
||||
},
|
||||
put: function(o)
|
||||
{
|
||||
IUI.registry.push(o);
|
||||
},
|
||||
remove: function(id)
|
||||
{
|
||||
for(var i = 0; i < IUI.registry.length; i++)
|
||||
if (IUI.registry[i].el.id == id)
|
||||
{
|
||||
IUI.registry.splice(i, 1);
|
||||
break;
|
||||
}
|
||||
},
|
||||
module: function(objectClass)
|
||||
{
|
||||
let moduleName = objectClass.moduleName;
|
||||
|
||||
if (IUI.modules[moduleName] === undefined) {
|
||||
customElements.define("i-" + moduleName, objectClass);
|
||||
IUI.modules[moduleName] = {
|
||||
cls: objectClass, init: function (properties) {
|
||||
return new objectClass(properties);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
return objectClass;
|
||||
},
|
||||
extend: function(properties, defaults, force)
|
||||
{
|
||||
if (properties == null)
|
||||
properties = defaults;
|
||||
else
|
||||
for(var i in defaults)
|
||||
if (force)
|
||||
properties[i] = defaults[i];
|
||||
else if (properties[i] === undefined)
|
||||
properties[i] = defaults[i];
|
||||
return properties;
|
||||
}
|
||||
};
|
||||
|
||||
export function iui(selector)
|
||||
{
|
||||
return IUI.get(selector);
|
||||
|
||||
/*
|
||||
if ((typeof selector === 'string' || selector instanceof String) && selector.length > 0)
|
||||
{
|
||||
var els = document.querySelectorAll(selector);
|
||||
}
|
||||
else
|
||||
{
|
||||
var els = IUI.get(selector);
|
||||
if (els != null)
|
||||
|
||||
}
|
||||
*/
|
||||
|
||||
if (typeof(this) == "undefined" || this == window)
|
||||
{
|
||||
var o = IUI.get(selector);
|
||||
if (o)
|
||||
return o;
|
||||
else
|
||||
{
|
||||
var el;
|
||||
|
||||
if (typeof Node === "object" ? o instanceof Node : (
|
||||
selector && typeof selector === "object" && typeof selector.nodeType === "number" && typeof selector.nodeName==="string") || selector === window)
|
||||
{
|
||||
el = selector;
|
||||
}
|
||||
else if (typeof selector === 'string' || selector instanceof String)
|
||||
{
|
||||
if (selector[0] == ".")
|
||||
el = document.getElementsByClassName(selector.substr(1));
|
||||
else
|
||||
el = document.getElementById(selector);
|
||||
}
|
||||
|
||||
if (el)
|
||||
{
|
||||
var rt = {};
|
||||
var makeFunc = function(module){
|
||||
return function(){
|
||||
if (el instanceof HTMLCollection)
|
||||
{
|
||||
let rt = [];
|
||||
for(var i = 0; i < el.length; i++)
|
||||
{
|
||||
var args = [el[i]];
|
||||
for(var j = 0; j < arguments.length; j++)
|
||||
args.push(arguments[j]);
|
||||
rt.push(IUI.modules[module].init.apply(this, args));
|
||||
}
|
||||
return rt;
|
||||
}
|
||||
else
|
||||
{
|
||||
var args = [el];
|
||||
for(var i = 0; i < arguments.length; i++)
|
||||
args.push(arguments[i]);
|
||||
return IUI.modules[module].init.apply(this, args);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
for(var m in IUI.modules)
|
||||
rt[m] = makeFunc(m);
|
||||
|
||||
return rt;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
IUI.registry.push(this);
|
||||
|
||||
|
||||
if (selector)
|
||||
{
|
||||
if( Object.prototype.toString.call( selector ) === '[object Array]' )
|
||||
{
|
||||
this.el = [];
|
||||
selector.forEach(function(i){
|
||||
this.el.push(query(i));
|
||||
});
|
||||
}
|
||||
else
|
||||
this.el = query(selector);
|
||||
|
||||
this.events = {};
|
||||
this.id = this.el.id;
|
||||
}
|
||||
*/
|
||||
}
|
||||
/*
|
||||
Array.prototype.each = function(func)
|
||||
{
|
||||
if (this instanceof Array)
|
||||
{
|
||||
for(var i = 0; i < this.length; i++)
|
||||
if (func(this[i], i))
|
||||
break;
|
||||
}
|
||||
else
|
||||
for(var i in this)
|
||||
if(func(this[i], i))
|
||||
break;
|
||||
}
|
||||
|
||||
|
||||
Array.prototype.distinct = function(field)
|
||||
{
|
||||
var rt = [];
|
||||
|
||||
this.forEach(function(item)
|
||||
{
|
||||
if (rt.indexOf(item[field]) == -1)
|
||||
rt.push(item[field]);
|
||||
});
|
||||
|
||||
return rt;
|
||||
}
|
||||
/*
|
||||
iui.prototype.ec = function(className, parent)
|
||||
{
|
||||
if (parent)
|
||||
return parent.getElementsByClassName(className);
|
||||
else
|
||||
return document.getElementsByClassName(className);
|
||||
}
|
||||
|
||||
iui.prototype.ne = function(tag)
|
||||
{
|
||||
return document.createElement(tag);
|
||||
}
|
||||
*/
|
||||
|
||||
|
||||
/*
|
||||
iui.prototype.destroy = function()
|
||||
{
|
||||
IUI.registry.splice(IUI.registry.indexOf(this.el), 1);
|
||||
};
|
||||
|
||||
iui.prototype.register = function(event)
|
||||
{
|
||||
this.events[event] = [];
|
||||
return this;
|
||||
};
|
||||
|
||||
iui.prototype.emit = function(event)
|
||||
{
|
||||
var args = Array.prototype.slice.call(arguments, 1);
|
||||
if (this.events && this.events[event])
|
||||
for(var i = 0; i < this.events[event].length; i++)
|
||||
this.events[event][i].apply(this, args);
|
||||
|
||||
return this;
|
||||
};
|
||||
|
||||
iui.prototype.on = function(event, fn)
|
||||
{
|
||||
if (this.events && this.events[event])
|
||||
this.events[event].push(fn);
|
||||
else if (document.attachEvent)
|
||||
this.el.attachEvent('on' + event, fn)
|
||||
else // if (document.addEventListener)
|
||||
this.el.addEventListener(event, fn, !0);
|
||||
|
||||
return this;
|
||||
};
|
||||
*/
|
||||
|
||||
/*
|
||||
window.addEventListener("load", function(){
|
||||
for(var m in IUI.modules)
|
||||
{
|
||||
var elements = document.getElementsByTagName(m);
|
||||
|
||||
}
|
||||
});
|
||||
*/
|
||||
313
src/Core/IUIElement.js
Normal file
313
src/Core/IUIElement.js
Normal file
@ -0,0 +1,313 @@
|
||||
import { IUI } from "./IUI.js";
|
||||
import { Binding, BindingType, AttributeBindingDestination } from "./Binding.js";
|
||||
|
||||
export default class IUIElement extends HTMLElement {
|
||||
constructor(defaults) {
|
||||
super();
|
||||
|
||||
this._events = [];
|
||||
this._data = null;
|
||||
|
||||
for (var i in defaults)
|
||||
if (this[i] == undefined)
|
||||
this[i] = defaults[i];
|
||||
|
||||
this._register("data");
|
||||
}
|
||||
|
||||
static get moduleName(){
|
||||
return this.name.toLowerCase();
|
||||
}
|
||||
|
||||
|
||||
get cssClass(){
|
||||
if (this.hasAttribute("css-class"))
|
||||
return this.getAttribute("css-class");
|
||||
//else
|
||||
// return this.constructor.moduleName;
|
||||
}
|
||||
|
||||
set cssClass(value)
|
||||
{
|
||||
this.classList.remove(this.cssClass);
|
||||
this.setAttribute("css-class", value);
|
||||
this.classList.add(value);
|
||||
}
|
||||
|
||||
async render() {
|
||||
await this._renderElement(this, this._data);
|
||||
}
|
||||
|
||||
_getParentData() {
|
||||
var p = this.parentElement;
|
||||
do {
|
||||
if (p.data !== undefined)
|
||||
return p.data;
|
||||
} while (p = p.parentElement);
|
||||
|
||||
return undefined;
|
||||
}
|
||||
|
||||
async setData(value) {
|
||||
//if (this.bindings === undefined)
|
||||
// this.updateBindings();
|
||||
|
||||
|
||||
this._data = value;
|
||||
this._emit("data", {data: value});
|
||||
await this._renderElement(this, value);
|
||||
|
||||
//console.log("IUI: SetData", value, this.tagName);
|
||||
}
|
||||
|
||||
get data() {
|
||||
return this._data;
|
||||
}
|
||||
|
||||
async revert(){
|
||||
//if (this.revertMap != null)
|
||||
//{
|
||||
//if (data == undefined)
|
||||
// await this.revertMap.render(this._getParentData());
|
||||
//else
|
||||
// await this.revertMap.render(data);
|
||||
// revert parents
|
||||
|
||||
let e = this;
|
||||
|
||||
do {
|
||||
var p = e.parentElement;
|
||||
|
||||
if (e.revertMap != null)
|
||||
await e.revertMap.render(p?.data);
|
||||
} while (e = p);
|
||||
//}
|
||||
}
|
||||
|
||||
async update(data) {
|
||||
if (data == undefined) {
|
||||
// get parent data
|
||||
if (this.dataMap != null) {
|
||||
await this.dataMap.render(this._getParentData());
|
||||
} else
|
||||
await this.setData(this.data);
|
||||
}
|
||||
else {
|
||||
// apply specified data
|
||||
if (this.dataMap != null) {
|
||||
await this.dataMap.render(data);
|
||||
} else
|
||||
await this.setData(data);
|
||||
}
|
||||
}
|
||||
|
||||
async _renderElement(element, data) {
|
||||
if (!element.bindings) {
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
//console.log("_renderElement " + element.getAttribute("ref"), element);
|
||||
|
||||
//if (element.hasAttribute("debug"))
|
||||
// debugger;
|
||||
|
||||
// render attributes & text nodes
|
||||
for (var i = 0; i < element.bindings.length; i++)
|
||||
await element.bindings[i].render(data);
|
||||
|
||||
// render children
|
||||
for (var i = 0; i < element.children.length; i++) {
|
||||
let e = element.children[i];
|
||||
if (e instanceof IUIElement)
|
||||
// @TODO should check if the element depends on parent or not
|
||||
if (e.dataMap != null) {
|
||||
// if map function failed to call setData, we will render without it
|
||||
if (!(await e.dataMap.render(data)))
|
||||
await e.render();
|
||||
}
|
||||
else
|
||||
await e.setData(data);
|
||||
else {
|
||||
if (e.dataMap != null)
|
||||
await e.dataMap.render(data);
|
||||
else
|
||||
e.data = data;
|
||||
|
||||
//let data = e.mapData(data);
|
||||
await this._renderElement(e, e.data);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// this meant to be inherited
|
||||
modified() {
|
||||
|
||||
}
|
||||
|
||||
get data() {
|
||||
return this._data;
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
|
||||
if (this.hasAttribute("css-class"))
|
||||
this.classList.add(this.getAttribute("css-class"));
|
||||
else
|
||||
{
|
||||
let className = this.constructor.moduleName;
|
||||
|
||||
this.setAttribute("css-class", className);
|
||||
this.classList.add(className);
|
||||
}
|
||||
}
|
||||
|
||||
disconnectedCallback() {
|
||||
// console.log("removed", this);
|
||||
}
|
||||
|
||||
adoptedCallback() {
|
||||
|
||||
//console.log("adopted", this);
|
||||
|
||||
}
|
||||
|
||||
//appendChild(node) {
|
||||
// // do some bindings
|
||||
// super.appendChild(node);
|
||||
//}
|
||||
|
||||
created() {
|
||||
|
||||
}
|
||||
|
||||
create() {
|
||||
//this.updateBindings();
|
||||
}
|
||||
|
||||
destroy() {
|
||||
|
||||
console.log("Destroy", this);
|
||||
IUI.registry.splice(IUI.registry.indexOf(this), 1);
|
||||
if (this.parentNode)
|
||||
this.parentNode.removeChild(this);
|
||||
}
|
||||
|
||||
|
||||
|
||||
_make_bindings(element) {
|
||||
|
||||
// ::Attribute
|
||||
// : Field
|
||||
// async:: Async Attribute
|
||||
// async: Async Field
|
||||
// @ Event
|
||||
|
||||
let bindings = [];
|
||||
|
||||
|
||||
//if (element.hasAttribute("debug"))
|
||||
// debugger;
|
||||
|
||||
// compile attributes
|
||||
for (var i = 0; i < element.attributes.length; i++) {
|
||||
|
||||
let b = Binding.create(element.attributes[i]);
|
||||
|
||||
if (b != null) {
|
||||
if (b.type == BindingType.HTMLElementDataAttribute || b.type == BindingType.IUIElementDataAttribute)
|
||||
element.dataMap = b;
|
||||
else if (b.type == BindingType.RevertAttribute)
|
||||
element.revertMap = b;
|
||||
else
|
||||
bindings.push(b);
|
||||
}
|
||||
}
|
||||
|
||||
// compile nodes
|
||||
for (var i = 0; i < element.childNodes.length; i++) {
|
||||
let e = element.childNodes[i];
|
||||
if (e instanceof IUIElement) {
|
||||
// @TODO: check if the IUI element handles the binding
|
||||
this._make_bindings(e);
|
||||
}
|
||||
else if (e instanceof HTMLElement) {
|
||||
this._make_bindings(e);
|
||||
}
|
||||
else if (e instanceof Text) {
|
||||
let b = Binding.create(e);
|
||||
if (b != null)
|
||||
bindings.push(b);
|
||||
}
|
||||
}
|
||||
|
||||
element.bindings = bindings;
|
||||
}
|
||||
|
||||
|
||||
_emit(event, values) {
|
||||
//var args = Array.prototype.slice.call(arguments, 1);
|
||||
var e = new CustomEvent(event, values);
|
||||
for (var i in values) {
|
||||
if (e[i] === undefined)
|
||||
e[i] = values[i];
|
||||
}
|
||||
|
||||
try
|
||||
{
|
||||
return this.dispatchEvent(e);
|
||||
}
|
||||
catch(ex)
|
||||
{
|
||||
console.log(ex);
|
||||
}
|
||||
}
|
||||
|
||||
updateBindings() {
|
||||
this._make_bindings(this);
|
||||
}
|
||||
|
||||
_encapsulateEvent(code){
|
||||
return `try {\r\n ${code} \r\n}\r\n catch(ex) { console.log(ex.name + ":" + ex.message, this); }`;
|
||||
}
|
||||
|
||||
_register(event) {
|
||||
this._events.push(event);
|
||||
|
||||
if (this.hasAttribute("@" + event)) {
|
||||
let handler = this.getAttribute("@" + event);
|
||||
if (handler.match(/^[A-Za-z\$_]+(?:[\$_][A-Za-z0-9]+)*$/g) === null) {
|
||||
try
|
||||
{
|
||||
let func = new Function("event", this._encapsulateEvent(this.getAttribute("@" + event)));
|
||||
this.addEventListener(event, func);
|
||||
} catch (ex)
|
||||
{
|
||||
console.log(ex);
|
||||
}
|
||||
}
|
||||
else {
|
||||
let func = this[handler];
|
||||
if (func instanceof Function) {
|
||||
this.addEventListener(event, func, false);
|
||||
}
|
||||
else {
|
||||
// might be added in the future
|
||||
let func = new Function("event", `this["${handler}"](event)`);
|
||||
this.addEventListener(event, func, false);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
off(event, fn) {
|
||||
this.removeEventListener(event, fn);
|
||||
return this;
|
||||
}
|
||||
|
||||
on(event, fn) {
|
||||
this.addEventListener(event, fn, false);
|
||||
return this;
|
||||
}
|
||||
}
|
||||
14
src/Data/DataList.js
Normal file
14
src/Data/DataList.js
Normal file
@ -0,0 +1,14 @@
|
||||
import IUIElement from "../Core/IUIElement.js";
|
||||
|
||||
export default IUI.module(class DataList extends IUIElement
|
||||
{
|
||||
constructor(properties)
|
||||
{
|
||||
super(properties);
|
||||
}
|
||||
|
||||
create()
|
||||
{
|
||||
this.style.display = "none";
|
||||
}
|
||||
});
|
||||
62
src/Data/Field.js
Normal file
62
src/Data/Field.js
Normal file
@ -0,0 +1,62 @@
|
||||
import IUIElement from "../Core/IUIElement.js";
|
||||
import { IUI } from "../Core/IUI.js";
|
||||
|
||||
|
||||
export default IUI.module(class Field extends HTMLElement
|
||||
{
|
||||
constructor()
|
||||
{
|
||||
super();
|
||||
}
|
||||
|
||||
static get moduleName(){
|
||||
return this.name.toLowerCase();
|
||||
}
|
||||
|
||||
create()
|
||||
{
|
||||
// if (this.formatter === undefined) {
|
||||
// // load script
|
||||
// for (var i = 0; i < this.children.length; i++)
|
||||
// if (this.children[i] instanceof HTMLScriptElement) {
|
||||
// //this.formatter = new Function this.children[i].
|
||||
// }
|
||||
// }
|
||||
|
||||
//this.style.display = "none";
|
||||
}
|
||||
|
||||
get name() {
|
||||
return this.getAttribute("name");
|
||||
}
|
||||
|
||||
set name(value) {
|
||||
this.setAttribute("name", value);
|
||||
}
|
||||
|
||||
serialize(tag) {
|
||||
|
||||
let template = document.createElement("template");
|
||||
let node = document.createElement(tag ?? "div");
|
||||
let width = null, name = null, type = null;
|
||||
|
||||
// copy attributes
|
||||
for (var i = 0; i < this.attributes.length; i++) {
|
||||
let attr = this.attributes[i];
|
||||
if (attr.name == "width")
|
||||
width = attr.value;
|
||||
else if (attr.name == "name")
|
||||
name = attr.value;
|
||||
else if (attr.name == "type")
|
||||
type = attr.value;
|
||||
else
|
||||
node.setAttribute(attr.name, attr.value);
|
||||
}
|
||||
|
||||
// copy html
|
||||
|
||||
node.innerHTML = this.innerHTML;
|
||||
|
||||
return { node, width, name, type };
|
||||
}
|
||||
});
|
||||
82
src/Data/Form.js
Normal file
82
src/Data/Form.js
Normal file
@ -0,0 +1,82 @@
|
||||
import IUIElement from "../Core/IUIElement.js";
|
||||
import { IUI } from "../Core/IUI.js";
|
||||
|
||||
export default IUI.module(class Form extends IUIElement {
|
||||
constructor() {
|
||||
super();
|
||||
//this.form = {};
|
||||
}
|
||||
|
||||
static _copy(val){
|
||||
if (typeof val === 'object' && val !== null)
|
||||
{
|
||||
let rt = {};
|
||||
for(var i in val)
|
||||
if (val[i] instanceof Array)
|
||||
// copy array
|
||||
rt[i] = [...val[i]];
|
||||
else
|
||||
rt[i] = val[i];
|
||||
|
||||
return rt;
|
||||
}
|
||||
else
|
||||
return val;
|
||||
}
|
||||
|
||||
async create() {
|
||||
//var elements = this.querySelectorAll("*[field]");
|
||||
//for (var i = 0; i < elements.length; i++)
|
||||
// this.form[elements[i].getAttribute("field")] = elements[i];
|
||||
}
|
||||
|
||||
async setData(value) {
|
||||
this.original = value;
|
||||
//var copy = {};
|
||||
//Object.assign(copy, value);
|
||||
super.setData(Form._copy(this.original));
|
||||
//super.setData({ ...this.original });
|
||||
}
|
||||
|
||||
|
||||
async reset() {
|
||||
//super.setData({ ...this.original });
|
||||
super.setData(Form._copy(this.original));
|
||||
return this;
|
||||
}
|
||||
|
||||
// @TODO: Remove this when esiur adds suport to partially modified arrays with modified flag
|
||||
static _areEqual(ar1, ar2)
|
||||
{
|
||||
if (!(ar1 instanceof Array) || !( ar2 instanceof Array))
|
||||
return false;
|
||||
|
||||
if (ar1.length != ar2.length)
|
||||
return false;
|
||||
|
||||
for(var i = 0; i < ar1.length; i++)
|
||||
if (ar1[i] != ar2[i])
|
||||
return false;
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
get diff() {
|
||||
if (this.original == null)
|
||||
return this._data;
|
||||
|
||||
|
||||
var rt = {};
|
||||
for (var i in this._data)
|
||||
if (this._data[i] != this.original[i])
|
||||
{
|
||||
if (this._data[i] instanceof Array && Form._areEqual(this._data[i], this.original[i]))
|
||||
continue;
|
||||
else
|
||||
rt[i] = this._data[i];
|
||||
}
|
||||
|
||||
return rt;
|
||||
}
|
||||
|
||||
});
|
||||
68
src/Data/Include.js
Normal file
68
src/Data/Include.js
Normal file
@ -0,0 +1,68 @@
|
||||
import IUIElement from "../Core/IUIElement.js";
|
||||
import { IUI } from "../Core/IUI.js";
|
||||
|
||||
export default IUI.module(class Include extends IUIElement
|
||||
{
|
||||
constructor()
|
||||
{
|
||||
super();
|
||||
this.refs = {};
|
||||
}
|
||||
|
||||
async create()
|
||||
{
|
||||
//console.log("Create ...", this.getAttribute("src"));
|
||||
|
||||
if (this.getAttribute("src") == "views/studio/realestate.html")
|
||||
console.log("Create include");
|
||||
|
||||
if (this.hasAttribute("src")) {
|
||||
|
||||
let src = this.getAttribute("src").replace(/^\/+|\/+$/g, '');
|
||||
let x = await fetch(src);
|
||||
|
||||
if (x.status !== 200)
|
||||
return;
|
||||
|
||||
let t = await x.text();
|
||||
|
||||
this.innerHTML = t;
|
||||
|
||||
let xeval = (code) => eval(code);
|
||||
|
||||
// call create for the new elements
|
||||
var newElements = this.querySelectorAll("*");
|
||||
for (var i = 0; i < newElements.length; i++) {
|
||||
var el = newElements[i];
|
||||
|
||||
// set route for all elements
|
||||
//newElements[i].route = this.route;
|
||||
el.route = this.route;
|
||||
el.view = this;
|
||||
if (el.hasAttribute("ref")) {
|
||||
this.refs[el.getAttribute("ref")] = el;
|
||||
}
|
||||
|
||||
if (el instanceof HTMLScriptElement) {
|
||||
// this because HTML parser don't evaluate script tag
|
||||
let func = new Function("//# sourceURL=iui://" + src + "-" + Math.round(Math.random() * 10000) + "\r\n return " + el.text.trim());// "return " + el.text + ";");
|
||||
|
||||
let rt = func.call(el.parentElement);
|
||||
|
||||
//let rt = xeval.call(el.parentElement, "//# sourceURL=iui://" + src + Math.round(Math.random() * 10000) + "\r\n (" + el.text + ")");
|
||||
if (typeof (rt) === "object") {
|
||||
for (var k in rt)
|
||||
el.parentElement[k] = rt[k];
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//this.updateBindings();
|
||||
}
|
||||
|
||||
get src()
|
||||
{
|
||||
return this._src;
|
||||
}
|
||||
});
|
||||
64
src/Data/Layout.js
Normal file
64
src/Data/Layout.js
Normal file
@ -0,0 +1,64 @@
|
||||
import IUIElement from "../Core/IUIElement.js";
|
||||
import Field from './Field.js';
|
||||
import { IUI } from "../Core/IUI.js";
|
||||
|
||||
export default IUI.module(class Layout extends HTMLElement// IUIElement
|
||||
{
|
||||
constructor()
|
||||
{
|
||||
super();
|
||||
}
|
||||
|
||||
static get moduleName(){
|
||||
return this.name.toLowerCase();
|
||||
}
|
||||
|
||||
//create()
|
||||
//{
|
||||
// for (var i = 0; i < this.children.length; i++)
|
||||
// if (this.children[i] instanceof Field) {
|
||||
// this[this.children[i].name] = this.children[i];
|
||||
// this.fields.push(this.children[i]);
|
||||
// }
|
||||
|
||||
// this.style.display = "none";
|
||||
//}
|
||||
|
||||
static getHTML(el, removeSelf = false) {
|
||||
for (var i = 0; i < el.children.length; i++)
|
||||
if (el.children[i] instanceof Layout) {
|
||||
let layout = el.children[i];
|
||||
let rt = layout.innerHTML;
|
||||
|
||||
if (removeSelf)
|
||||
el.removeChild(layout);
|
||||
return rt;
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
static get(el, tag, removeSelf = false, collection = false) {
|
||||
|
||||
for (var i = 0; i < el.children.length; i++)
|
||||
if (el.children[i] instanceof Layout) {
|
||||
let layout = el.children[i];
|
||||
let rt = collection ? {} : [];
|
||||
for (var j = 0; j < layout.children.length; j++) {
|
||||
if (layout.children[j] instanceof Field) {
|
||||
let fd = layout.children[j].serialize(tag);
|
||||
if (collection)
|
||||
rt[fd.name] = fd;
|
||||
else
|
||||
rt.push(fd);
|
||||
}
|
||||
}
|
||||
|
||||
if (removeSelf)
|
||||
layout.parentElement.removeChild(layout);
|
||||
return rt;
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
});
|
||||
273
src/Data/Repeat.js
Normal file
273
src/Data/Repeat.js
Normal file
@ -0,0 +1,273 @@
|
||||
import IUIElement from "../Core/IUIElement.js";
|
||||
import { IUI } from "../Core/IUI.js";
|
||||
|
||||
export default IUI.module(class Repeat extends IUIElement
|
||||
{
|
||||
constructor()
|
||||
{
|
||||
super({ _data: [] });
|
||||
this.list = [];
|
||||
}
|
||||
|
||||
_isDirectDecedent(x){
|
||||
while(x = x.parentElement)
|
||||
if (x == this)
|
||||
return true;
|
||||
else if (x instanceof Repeat && x != this)
|
||||
return false;
|
||||
}
|
||||
|
||||
create()
|
||||
{
|
||||
//////////////
|
||||
/// Create ///
|
||||
//////////////
|
||||
|
||||
if (this._created)
|
||||
debugger;
|
||||
|
||||
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)
|
||||
{
|
||||
|
||||
this._repeatNode = repeatables[0].cloneNode(true);
|
||||
this._container = repeatables[0].parentElement;
|
||||
this._beforeNode = repeatables[0].nextSibling;
|
||||
repeatables[0].parentElement.removeChild(repeatables[0]);
|
||||
}
|
||||
else
|
||||
{
|
||||
if (this.children.length > 0)
|
||||
this._repeatNode = this.children[0].cloneNode(true);
|
||||
else
|
||||
this._repeatNode = document.createElement("div");
|
||||
|
||||
this.innerHTML = "";
|
||||
this._container = this;
|
||||
}
|
||||
|
||||
|
||||
var newElements = this.querySelectorAll("*");
|
||||
for (var i = 0; i < newElements.length; i++)
|
||||
newElements[i].repeat = this;
|
||||
|
||||
var self = this;
|
||||
|
||||
/*
|
||||
this._repeatModified = function(propertyName, value)
|
||||
{
|
||||
|
||||
var bindings = self._repeatBindings.get(this);
|
||||
|
||||
// update view
|
||||
for(var i = 0; i < bindings.length; i++)
|
||||
{
|
||||
if (bindings[i].props)
|
||||
{
|
||||
for(var j = 0; j < bindings[i].props.length; j++)
|
||||
{
|
||||
if (bindings[i].props[j] == propertyName)
|
||||
{
|
||||
bindings[i].node.data = bindings[i].func.apply(self,
|
||||
[this, this, this, this, 0, 0]);
|
||||
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
*/
|
||||
}
|
||||
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
get length() {
|
||||
return this._data.length;
|
||||
}
|
||||
|
||||
_assign(node, index) {
|
||||
|
||||
// update fields
|
||||
|
||||
// this so we won't mess with i-include view
|
||||
if (node.view == undefined)
|
||||
node.view = this.view;
|
||||
|
||||
node.rotue = this.route;
|
||||
node.index = index;
|
||||
|
||||
// update references
|
||||
if (node.hasAttribute("ref"))
|
||||
{
|
||||
let ref = node.getAttribute("ref");
|
||||
// create new array
|
||||
if (!(this.view.refs[ref] instanceof Array))
|
||||
this.view.refs[ref] = [];
|
||||
this.view.refs[ref][index] = node;
|
||||
}
|
||||
|
||||
//Object.assign(node, customFields);
|
||||
for (var i = 0; i < node.children.length; i++)
|
||||
this._assign(node.children[i], index);
|
||||
}
|
||||
|
||||
async setData(value)
|
||||
{
|
||||
|
||||
|
||||
// this to avoid interruption by an event
|
||||
if (this._busy)
|
||||
{
|
||||
console.log("Busy", this);
|
||||
return false;
|
||||
}
|
||||
|
||||
//console.log("RPT: SetData", value);
|
||||
this._busy = true;
|
||||
|
||||
// var id = Math.random();
|
||||
|
||||
//console.log("SetData " + this.getAttribute("ref") + " " + id, value);
|
||||
//console.trace();
|
||||
// clear
|
||||
this.clear();
|
||||
|
||||
if (value instanceof Structure)
|
||||
value = value.toPairs();
|
||||
else if (value == null || !(value instanceof Array || value instanceof Int32Array))
|
||||
value = [];
|
||||
|
||||
|
||||
//debugger;
|
||||
await super.setData(value);
|
||||
|
||||
|
||||
for (let i = 0; i < value.length; i++) {
|
||||
|
||||
///console.log("ST1");
|
||||
//let content = this.template.content.cloneNode(true);
|
||||
//let nodes = content.childNodes;
|
||||
|
||||
let e = this._repeatNode.cloneNode(true);
|
||||
|
||||
this.list.push(e);
|
||||
|
||||
|
||||
//console.log("ST2");
|
||||
|
||||
|
||||
// Create node
|
||||
if (e instanceof IUIElement)
|
||||
await e.create();
|
||||
|
||||
// console.log("ST3");
|
||||
// Create children
|
||||
//console.log("Create repeat " + i, this, e);
|
||||
|
||||
await IUI.create(e);
|
||||
|
||||
//console.log("Created repeat " + i, this, e);
|
||||
|
||||
|
||||
//console.log("ST4");
|
||||
|
||||
this._make_bindings(e)
|
||||
this._container.insertBefore(e, this._beforeNode);
|
||||
|
||||
this._assign(e, i);// { view: this.view, route: this.route, index: i });
|
||||
|
||||
|
||||
//console.log("ST5");
|
||||
|
||||
if (e instanceof IUIElement) {
|
||||
// @TODO should check if the element depends on parent or not
|
||||
if (e.dataMap != null) {
|
||||
// if map function failed to call setData, we will render without it
|
||||
if (!(await e.dataMap.render(value[i])))
|
||||
await e.render();
|
||||
}
|
||||
else{
|
||||
await e.setData(value[i]);
|
||||
// console.log("ST6.1");
|
||||
}
|
||||
}
|
||||
else {
|
||||
if (e.dataMap != null)
|
||||
await e.dataMap.render(value[i]);
|
||||
else
|
||||
e.data = value[i];
|
||||
|
||||
// console.log("ST6.2", e);
|
||||
await this._renderElement(e, e.data);
|
||||
// console.log("ST6.3");
|
||||
}
|
||||
|
||||
// if (node.dataMap != null) {
|
||||
// await node.dataMap.render(value[i]);
|
||||
// this._renderElement(node, node.data);
|
||||
// }
|
||||
// else {
|
||||
|
||||
// node.data = value[i];
|
||||
// this._renderElement(node, node.data);
|
||||
// }
|
||||
|
||||
/*
|
||||
|
||||
var newElements = content.querySelectorAll("*");
|
||||
|
||||
while (nodes.length > 0) {
|
||||
let n = nodes[0];
|
||||
//n.index = i;
|
||||
if (n instanceof HTMLElement)
|
||||
n.setAttribute(":data", `d[${i}]`);
|
||||
this._container.appendChild(n);
|
||||
}
|
||||
|
||||
// this has to be called after appending the child otherwise node will be HTMLElement and not IUIElement , bug maybe in webkit ?
|
||||
for (var j = 0; j < newElements.length; j++) {
|
||||
let el = newElements[j];
|
||||
|
||||
// set route for all elements
|
||||
el.index = i;
|
||||
el.view = this;
|
||||
el.route = this.route;
|
||||
//newElements[j].route = this.route;
|
||||
if (el instanceof IUIElement)
|
||||
el.create();
|
||||
}
|
||||
*/
|
||||
|
||||
}
|
||||
|
||||
|
||||
//super._uiBindings = null;
|
||||
//super.updateBindings();
|
||||
|
||||
this._emit("modified", { data: value, property: "data" });
|
||||
|
||||
// console.log("SetDataEnd " + this.getAttribute("ref") + " " + id);
|
||||
|
||||
this._busy = false;
|
||||
}
|
||||
|
||||
});
|
||||
15
src/Data/TableRow.js
Normal file
15
src/Data/TableRow.js
Normal file
@ -0,0 +1,15 @@
|
||||
import IUIElement from "../Core/IUIElement.js";
|
||||
import { IUI } from "../Core/IUI.js";
|
||||
|
||||
|
||||
export default IUI.module(class TableRow extends IUIElement {
|
||||
constructor() {
|
||||
super();
|
||||
}
|
||||
|
||||
create() {
|
||||
//this.style.display = "none";
|
||||
this.style.display = "table-row";
|
||||
console.log("TR");
|
||||
}
|
||||
});
|
||||
70
src/Router/Link.js
Normal file
70
src/Router/Link.js
Normal file
@ -0,0 +1,70 @@
|
||||
import IUIElement from "../Core/IUIElement.js";
|
||||
import { IUI } from "../Core/IUI.js";
|
||||
|
||||
export default IUI.module(class Link extends IUIElement
|
||||
{
|
||||
constructor()
|
||||
{
|
||||
//debugger;
|
||||
super({ cssClass: 'link' });
|
||||
|
||||
// super({ cssClass: 'link' });
|
||||
this._register("route");
|
||||
this.addEventListener("click",
|
||||
(e) => {
|
||||
|
||||
var r = this.getBoundingClientRect();
|
||||
this.style.setProperty("--x", (e.x - r.x) + "px");
|
||||
this.style.setProperty("--y", (e.y - r.y) + "px");
|
||||
|
||||
this.style.setProperty("--w", r.width + "px");
|
||||
this.style.setProperty("--h", r.height + "px");
|
||||
|
||||
this.classList.remove(this.cssClass + "-clicked");
|
||||
void this.offsetWidth;
|
||||
this.classList.add(this.cssClass + "-clicked");
|
||||
|
||||
let url = this.getAttribute("href");
|
||||
|
||||
let ok = this._emit("route", { url, cancelable: true, query: this.query});
|
||||
if (!ok)
|
||||
return;
|
||||
|
||||
|
||||
//if (url == "#")
|
||||
// url = router.current.link;
|
||||
// return;
|
||||
|
||||
let target = this.hasAttribute("target") ? document.getElementById(this.getAttribute("target")) : null;
|
||||
|
||||
|
||||
if (url == ":back") {
|
||||
window.router.back();
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
|
||||
if (this.query)// || this.hasAttribute(":data"))
|
||||
window.router.navigate(url || router.current.url, this.query, target);
|
||||
else if (url != null)
|
||||
window.router.navigate(url, undefined, target);
|
||||
}
|
||||
);
|
||||
|
||||
//this._register("click");
|
||||
}
|
||||
|
||||
get link() {
|
||||
return this.getAttribute("href");
|
||||
}
|
||||
|
||||
set link(value) {
|
||||
this.setAttribute("href", value);
|
||||
}
|
||||
|
||||
create()
|
||||
{
|
||||
|
||||
}
|
||||
});
|
||||
159
src/Router/Route.js
Normal file
159
src/Router/Route.js
Normal file
@ -0,0 +1,159 @@
|
||||
import IUIElement from "../Core/IUIElement.js";
|
||||
import { IUI } from "../Core/IUI.js";
|
||||
import Router from "./Router.js";
|
||||
|
||||
export default IUI.module(class Route extends IUIElement {
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
|
||||
this.routes = [];
|
||||
this.refs = {};
|
||||
|
||||
this._register("show");
|
||||
this._register("hide");
|
||||
}
|
||||
|
||||
async setData(value) {
|
||||
if (this.hasAttribute("debug"))
|
||||
debugger;
|
||||
|
||||
return await super.setData(value);
|
||||
}
|
||||
|
||||
_updateLinks() {
|
||||
for (var i = 0; i < this.children.length; i++) {
|
||||
if (this.children[i] instanceof Route) {
|
||||
this.routes.push(this.children[i]);
|
||||
window.router.add(this.children[i], this);
|
||||
i--;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
get link() {
|
||||
var link = this.name;
|
||||
var parent = this.parent;
|
||||
while (parent != null) {
|
||||
link = parent.name + "/" + link;
|
||||
parent = parent.parent;
|
||||
}
|
||||
|
||||
return link;
|
||||
}
|
||||
|
||||
get name() {
|
||||
return this.getAttribute("name");
|
||||
}
|
||||
|
||||
get src() {
|
||||
return this.getAttribute("src");
|
||||
}
|
||||
|
||||
get dst() {
|
||||
return this._dst || this.getAttribute("dst");
|
||||
}
|
||||
|
||||
set dst(value){
|
||||
this._dst = value;
|
||||
}
|
||||
|
||||
get caption() {
|
||||
return this.getAttribute("caption");
|
||||
}
|
||||
|
||||
get private() {
|
||||
return this.hasAttribute("private");
|
||||
}
|
||||
|
||||
get icon() {
|
||||
return this.getAttribute("icon");
|
||||
}
|
||||
|
||||
_getParent() {
|
||||
let e = null;//this.parentElement;
|
||||
while (e = this.parentElement) {
|
||||
if (e instanceof Route || e instanceof Router)
|
||||
return e;
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
|
||||
async create() {
|
||||
|
||||
//window.router.add(this);
|
||||
this._updateLinks();
|
||||
|
||||
if (this.hasAttribute("src")) {
|
||||
|
||||
let src = this.getAttribute("src").replace(/^\/+|\/+$/g, '');
|
||||
let x = await fetch(src);
|
||||
if (x.status != 200)
|
||||
return;
|
||||
|
||||
let t = await x.text();
|
||||
|
||||
this.innerHTML = t;
|
||||
|
||||
//let xeval = (code) => eval(code);
|
||||
}
|
||||
|
||||
// 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() {
|
||||
//this.updateBindings();
|
||||
}
|
||||
|
||||
set(value) {
|
||||
if (value == this.visible)
|
||||
return;
|
||||
|
||||
if (value) {
|
||||
|
||||
this.setAttribute("selected", "");
|
||||
this._emit("show");
|
||||
}
|
||||
else
|
||||
{
|
||||
this.removeAttribute("selected");
|
||||
this._emit("hide");
|
||||
}
|
||||
}
|
||||
|
||||
get visible() { return this.hasAttribute("selected"); }
|
||||
set visible(value) { this.set(value); }
|
||||
|
||||
});
|
||||
334
src/Router/Router.js
Normal file
334
src/Router/Router.js
Normal file
@ -0,0 +1,334 @@
|
||||
import IUIElement from "../Core/IUIElement.js";
|
||||
import Route from "./Route.js"
|
||||
import Target from "./Target.js";
|
||||
import { IUI } from "../Core/IUI.js";
|
||||
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
add(route, parent = null) {
|
||||
if (parent == null) {
|
||||
this.routes.push(route);
|
||||
}
|
||||
else {
|
||||
route.parent = parent;
|
||||
this.appendChild(route);
|
||||
//parent.routes.push(route);
|
||||
}
|
||||
}
|
||||
|
||||
_routeInPath(name, routes)
|
||||
{
|
||||
for (var i = 0; i < routes.length; i++)
|
||||
if (routes[i].name == name)
|
||||
return routes[i];
|
||||
return null;
|
||||
}
|
||||
|
||||
getRoute(url, data) {
|
||||
let p = url.split("/");
|
||||
|
||||
let searchRoutes = this.routes;
|
||||
|
||||
for (var i = 0; i < p.length; i++) {
|
||||
var route = this._routeInPath(p[i], searchRoutes);
|
||||
|
||||
if (route == null)
|
||||
return [null, null];
|
||||
|
||||
if (i == p.length - 1) {
|
||||
// return [destination state route (link, icon,..etc) , actual route to view]
|
||||
if (route.dst == null)
|
||||
return [route, route];
|
||||
else {
|
||||
|
||||
let dst = route.dst instanceof Function ? route.dst(data) : route.dst;
|
||||
let url = dst.replace(/^[/]*(.*?)[/]*$/g, '$1').trim();
|
||||
return [route, this.getRoute(url)[1]];
|
||||
}
|
||||
}
|
||||
|
||||
searchRoutes = route.routes;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
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("&");
|
||||
}
|
||||
|
||||
_fromQuery(q) {
|
||||
let kv = q.replace("&&", "\0").split('&');
|
||||
let rt = {};
|
||||
for (let i = 0; i < kv.length; i++) {
|
||||
let d = kv[i].replace("\0", "&").split('=', 2);
|
||||
let v = decodeURI(d[1] || ''); //decodeURIComponent(d[1] || '');
|
||||
if (v != null && v.trim() != '' && !isNaN(v))
|
||||
v = new Number(v);
|
||||
rt[d[0]] = v;
|
||||
}
|
||||
return JSON.parse(JSON.stringify(rt));
|
||||
}
|
||||
|
||||
async navigate(url, data, target, state)
|
||||
{
|
||||
let q = url.match(/^\/*(.*?)\?(.*)$|^\/*(.*)$/);
|
||||
|
||||
//debugger;
|
||||
|
||||
var path;
|
||||
|
||||
// do we have a query string ?
|
||||
if (q[2] !== undefined) {
|
||||
path = q[1];
|
||||
data = this._fromQuery(q[2]);
|
||||
url = path + "?" + q[2];
|
||||
}
|
||||
// do we have data ?
|
||||
else if (data !== undefined) {
|
||||
path = q[3];
|
||||
url = path + "?" + this._toQuery(data);
|
||||
}
|
||||
else {
|
||||
path = q[3];
|
||||
url = path;
|
||||
}
|
||||
|
||||
|
||||
let [stateRoute, viewRoute] = this.getRoute(path, data);
|
||||
|
||||
if (stateRoute == null)
|
||||
return;
|
||||
|
||||
let ok = this._emit("navigate", { url, stateRoute, viewRoute, base: path, data, cancelable: true });
|
||||
|
||||
if (!ok)
|
||||
return;
|
||||
|
||||
// destination view not found
|
||||
if (viewRoute == null) {
|
||||
console.log(`Destination route not found ${stateRoute.dst}`);
|
||||
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 (state == null) {
|
||||
let id = Math.random().toString(36).substr(2, 10);
|
||||
state = { id, url, data, target, stateRoute, viewRoute };
|
||||
this._states.set(id, state);
|
||||
history.pushState(id, stateRoute.caption, this._hash ? "#" + url : "/" + url);
|
||||
}
|
||||
|
||||
this._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) {
|
||||
// if map function failed to call setData, we will render without it
|
||||
if (!(await stateRoute.dataMap.render(data || {})))
|
||||
await stateRoute.render();
|
||||
|
||||
if (viewRoute != stateRoute)
|
||||
await viewRoute.setData(stateRoute.data);
|
||||
}
|
||||
else //if (data !== undefined)
|
||||
await viewRoute.setData(data);
|
||||
|
||||
target.setLoading(false);
|
||||
|
||||
}
|
||||
|
||||
hide() {
|
||||
// do nothing, we're not here to hide.
|
||||
}
|
||||
|
||||
refresh() {
|
||||
|
||||
let state = this.current;
|
||||
this.navigate(state.url, state.data, state.target, state);
|
||||
|
||||
//this.current.render();
|
||||
//this.current.data = this.current.data;
|
||||
//if (updateAttributes)
|
||||
// this.current.updateAttributes(true);
|
||||
}
|
||||
|
||||
show(route, active) {
|
||||
super.show(route, active);
|
||||
|
||||
|
||||
}
|
||||
|
||||
get current() {
|
||||
return this._states.get(history.state);//.viewRoute;
|
||||
//return this._history[this._history.length - 1].viewRoute;
|
||||
}
|
||||
|
||||
get previous() {
|
||||
|
||||
if (this._history.length > 2)
|
||||
return this._states.get(this._history[this._history.length - 2]);//.viewRoute;
|
||||
else
|
||||
return null;
|
||||
}
|
||||
|
||||
create() {
|
||||
|
||||
// save origin
|
||||
this.origin = window.location.pathname + window.location.search;
|
||||
}
|
||||
|
||||
destroy() {
|
||||
console.log("Destroyed", this);
|
||||
}
|
||||
|
||||
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];
|
||||
if (e instanceof Route) {
|
||||
this.add(e);
|
||||
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;
|
||||
|
||||
window.addEventListener("popstate", function (event) {
|
||||
|
||||
//console.log(event);
|
||||
let stateId = event.state;
|
||||
let path;
|
||||
|
||||
if (self._hash) {
|
||||
path = window.location.hash;
|
||||
|
||||
if (path.length > 0)
|
||||
path = path.substr(1);
|
||||
}
|
||||
else {
|
||||
path = window.location.pathname;
|
||||
}
|
||||
|
||||
if (stateId != null) {
|
||||
|
||||
if (stateId != self._history[self._history.length -1]) {
|
||||
//this._lastStateId = stateId;
|
||||
let state = self._states.get(stateId);
|
||||
self.navigate(path, state.data, state.target, state);
|
||||
}
|
||||
else {
|
||||
console.log("SAME");
|
||||
}
|
||||
}
|
||||
else {
|
||||
this._lastState = null;
|
||||
self.navigate(path, undefined, undefined, {});
|
||||
}
|
||||
//alert("location: " + document.location + ", state: " + JSON.stringify(event.state));
|
||||
console.log(document.location.hash, event.state);
|
||||
});
|
||||
|
||||
this._register("navigate");
|
||||
this._register("route");
|
||||
this._register("created");
|
||||
}
|
||||
|
||||
});
|
||||
60
src/Router/Target.js
Normal file
60
src/Router/Target.js
Normal file
@ -0,0 +1,60 @@
|
||||
import IUIElement from "../Core/IUIElement.js";
|
||||
import { IUI } from "../Core/IUI.js";
|
||||
import Route from "./Route.js";
|
||||
|
||||
export default IUI.module(class Target extends IUIElement {
|
||||
constructor(properties) {
|
||||
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");
|
||||
}
|
||||
|
||||
create() {
|
||||
|
||||
}
|
||||
|
||||
show(route, previous) {
|
||||
|
||||
let previousTarget = previous?.target;
|
||||
|
||||
route.target = this;
|
||||
|
||||
for (var i = 0; i < this.children.length; i++)
|
||||
if (this.children[i] instanceof Route && this.children[i] != route) {
|
||||
this.children[i].set(false);
|
||||
}
|
||||
|
||||
//if (previous != null && previous != route && previous.target == this) {
|
||||
// previous.set(false);
|
||||
//}
|
||||
//else
|
||||
if (previousTarget != null && previousTarget != this) {
|
||||
previousTarget.hide(this.active);
|
||||
}
|
||||
|
||||
|
||||
if (route.parentElement != this)
|
||||
this.appendChild(route);
|
||||
|
||||
this._emit("show", { route, previous});
|
||||
}
|
||||
|
||||
hide(route) {
|
||||
for (var i = 0; i < this.children.length; i++)
|
||||
if (this.children[i] instanceof Route) {
|
||||
this.children[i].set(false);
|
||||
}
|
||||
|
||||
this._emit("hide", { route });
|
||||
}
|
||||
});
|
||||
40
src/UI/Background.js
Normal file
40
src/UI/Background.js
Normal file
@ -0,0 +1,40 @@
|
||||
import IUIElement from "../Core/IUIElement.js";
|
||||
import { IUI } from "../Core/IUI.js";
|
||||
|
||||
export default IUI.module(class Background extends IUIElement {
|
||||
constructor() {
|
||||
super({ cssClass: 'background' });
|
||||
|
||||
|
||||
this.classList.add(this.cssClass);
|
||||
this._register("visible");
|
||||
|
||||
}
|
||||
|
||||
|
||||
create() {
|
||||
|
||||
}
|
||||
|
||||
hide() {
|
||||
return this.setVisible(false);
|
||||
}
|
||||
|
||||
show() {
|
||||
return this.setVisible(true);
|
||||
}
|
||||
|
||||
setVisible(value) {
|
||||
this.visible = value;
|
||||
if (value) {
|
||||
this.classList.add(this.cssClass + "-visible");
|
||||
}
|
||||
else {
|
||||
this.classList.remove(this.cssClass + "-visible");
|
||||
}
|
||||
|
||||
this._emit("visible", value);
|
||||
|
||||
return this;
|
||||
}
|
||||
});
|
||||
70
src/UI/Button.js
Normal file
70
src/UI/Button.js
Normal file
@ -0,0 +1,70 @@
|
||||
import IUIElement from "../Core/IUIElement.js";
|
||||
import { IUI } from "../Core/IUI.js";
|
||||
|
||||
export default IUI.module(class Button extends IUIElement {
|
||||
constructor() {
|
||||
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("--w", r.width + "px");
|
||||
this.style.setProperty("--h", r.height + "px");
|
||||
|
||||
this.classList.remove(this.cssClass + "-clicked");
|
||||
void this.offsetWidth;
|
||||
this.classList.add(this.cssClass + "-clicked");
|
||||
|
||||
}, true);
|
||||
|
||||
this._register("check");
|
||||
}
|
||||
|
||||
get type() {
|
||||
return this.getAttribute("type");
|
||||
}
|
||||
|
||||
set type(value)
|
||||
{
|
||||
this.setAttribute("type", value);
|
||||
}
|
||||
|
||||
get checked() {
|
||||
return this.hasAttribute("checked");
|
||||
}
|
||||
|
||||
set checked(value)
|
||||
{
|
||||
if (value)
|
||||
this.setAttribute("checked", "");
|
||||
else
|
||||
this.removeAttribute("checked");
|
||||
}
|
||||
|
||||
|
||||
get disabled() {
|
||||
return this.getAttribute("disabled");
|
||||
}
|
||||
|
||||
set disabled(value) {
|
||||
this.setAttribute("disabled", value);
|
||||
}
|
||||
|
||||
|
||||
create() {
|
||||
|
||||
if (this.type == "check")
|
||||
{
|
||||
this.addEventListener("click", ()=>{
|
||||
let checked = !this.checked;
|
||||
this.checked = checked;
|
||||
this._emit("check", {checked});
|
||||
});
|
||||
}
|
||||
|
||||
//this.classList.add(this.cssClass);
|
||||
}
|
||||
});
|
||||
58
src/UI/Check.js
Normal file
58
src/UI/Check.js
Normal file
@ -0,0 +1,58 @@
|
||||
import IUIElement from "../Core/IUIElement.js";
|
||||
import { IUI } from "../Core/IUI.js";
|
||||
|
||||
export default IUI.module(class Check extends IUIElement {
|
||||
constructor(properties) {
|
||||
super(IUI.extend(properties, { cssClass: 'check' }));
|
||||
|
||||
this._register("check");
|
||||
|
||||
this.on("click", () => {
|
||||
this.checked = !this.checked;
|
||||
});
|
||||
}
|
||||
|
||||
get checked() {
|
||||
return this.hasAttribute("checked");
|
||||
}
|
||||
|
||||
set checked(value) {
|
||||
this.check(value);
|
||||
this._emit("check", { checked: value });
|
||||
}
|
||||
|
||||
check(value) {
|
||||
if (value)
|
||||
this.setAttribute("checked", "checked");
|
||||
else
|
||||
this.removeAttribute("checked");
|
||||
}
|
||||
|
||||
create() {
|
||||
this.field = this.getAttribute("field");
|
||||
}
|
||||
|
||||
async setData(value) {
|
||||
await super.setData(value);
|
||||
if (value != null && this.field != null)
|
||||
this.value = value[this.field];
|
||||
else if (this.field != null)
|
||||
this.value = null;
|
||||
}
|
||||
|
||||
|
||||
modified(name, value) {
|
||||
if (name == this.field) {
|
||||
this.value = value;
|
||||
}
|
||||
}
|
||||
|
||||
get value() {
|
||||
return this.checked;
|
||||
}
|
||||
|
||||
set value(value) {
|
||||
this.checked = value;
|
||||
}
|
||||
|
||||
});
|
||||
314
src/UI/DateTimePicker.js
Normal file
314
src/UI/DateTimePicker.js
Normal file
@ -0,0 +1,314 @@
|
||||
import IUIElement from "../Core/IUIElement.js";
|
||||
import { IUI } from "../Core/IUI.js";
|
||||
|
||||
export default IUI.module(class DateTimePicker extends IUIElement {
|
||||
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
}
|
||||
|
||||
|
||||
|
||||
get layout() {
|
||||
return this._layout;
|
||||
}
|
||||
|
||||
set layout(value) {
|
||||
|
||||
if (value == this._layout)
|
||||
return;
|
||||
|
||||
this.innerHTML = "";
|
||||
|
||||
this._layout = value;
|
||||
|
||||
this.calendar = document.createElement("div");
|
||||
this.calendar.className = this.cssClass + "-calendar";
|
||||
|
||||
|
||||
this.calendarContent = document.createElement("div");
|
||||
this.calendarContent.className = this.cssClass + "-calendar-content";
|
||||
|
||||
this.table = document.createElement("table");
|
||||
this.header = this.table.createTHead();
|
||||
this.body = this.table.createTBody();
|
||||
|
||||
this.calendarContent.appendChild(this.table);
|
||||
|
||||
var tr = this.header.insertRow();
|
||||
|
||||
for (var i = 0; i < 7; i++) {
|
||||
var td = tr.insertCell();
|
||||
td.innerHTML = this.layout.day.formatter((i + this.layout.weekStart) % 7);
|
||||
td.className = this.cssClass + "-day";
|
||||
}
|
||||
|
||||
this.tools = document.createElement("div");
|
||||
this.tools.className = this.cssClass + "-tools";
|
||||
|
||||
this.month = document.createElement("div");
|
||||
this.month.className = this.cssClass + "-month";
|
||||
this.monthName = document.createElement("div");
|
||||
this.monthName.className = this.cssClass + "-name";
|
||||
this.nextMonth = document.createElement("div");
|
||||
this.nextMonth.className = this.cssClass + "-next";
|
||||
this.previousMonth = document.createElement("div");;
|
||||
this.previousMonth.className = this.cssClass + "-previous";
|
||||
|
||||
this.month.appendChild(this.previousMonth);
|
||||
this.month.appendChild(this.monthName);
|
||||
this.month.appendChild(this.nextMonth);
|
||||
|
||||
this.year = document.createElement("div");
|
||||
this.year.className = this.cssClass + "-year";
|
||||
this.yearName = document.createElement("div");
|
||||
this.yearName.className = this.cssClass + "-name";
|
||||
this.nextYear = document.createElement("div");
|
||||
this.nextYear.className = this.cssClass + "-next";
|
||||
this.previousYear = document.createElement("div");
|
||||
this.previousYear.className = this.cssClass + "-previous";
|
||||
|
||||
this.year.appendChild(this.previousYear);
|
||||
this.year.appendChild(this.yearName);
|
||||
this.year.appendChild(this.nextYear);
|
||||
|
||||
this.tools.appendChild(this.month);
|
||||
this.tools.appendChild(this.year);
|
||||
|
||||
let self = this;
|
||||
|
||||
this.nextMonth.addEventListener("click", function () {
|
||||
self._month = (self._month + 1) % 12;
|
||||
self.render();
|
||||
});
|
||||
|
||||
this.previousMonth.addEventListener("click", function () {
|
||||
self._month = (self._month + 11) % 12;
|
||||
self.render();
|
||||
});
|
||||
|
||||
this.nextYear.addEventListener("click", function () {
|
||||
self._year++;
|
||||
self.render();
|
||||
});
|
||||
|
||||
this.previousYear.addEventListener("click", function () {
|
||||
self._year--;
|
||||
self.render();
|
||||
});
|
||||
|
||||
|
||||
for (let i = 0; i < 6; i++) {
|
||||
tr = this.body.insertRow();
|
||||
|
||||
for (var j = 0; j < 7; j++) {
|
||||
let td = tr.insertCell(tr);
|
||||
td.className = this.cssClass + "-day";
|
||||
td.innerHTML = i + "x" + j;
|
||||
td.addEventListener("click", function () {
|
||||
self._day = parseInt(this.getAttribute("data-day"));
|
||||
self._month = parseInt(this.getAttribute("data-month"));
|
||||
self._year = parseInt(this.getAttribute("data-year"));
|
||||
self._value.setDate(self._day);
|
||||
self._value.setFullYear(self._year);
|
||||
self._value.setMonth(self._month);
|
||||
self.render();
|
||||
self._emit("select", { value: self._value });
|
||||
self._emit("modified", { value, property: "value" });
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
this.calendar.appendChild(this.tools);
|
||||
this.calendar.appendChild(this.calendarContent);
|
||||
|
||||
/*
|
||||
this.minutes = document.createElement("div");
|
||||
this.minutes.className = this.cssClass + "-clock";
|
||||
|
||||
for (var i = 1; i < 61; i++) {
|
||||
var range = document.createElement("div");
|
||||
|
||||
range.className = this.cssClass + "-time";
|
||||
range.innerHTML = i;
|
||||
this.minutes.appendChild(range);
|
||||
|
||||
}
|
||||
|
||||
this.hours = document.createElement("div");
|
||||
this.hours.className = this.cssClass + "-clock";
|
||||
|
||||
for (var i = 1; i < 25; i++) {
|
||||
var range = document.createElement("div");
|
||||
|
||||
range.className = this.cssClass + "-time";
|
||||
range.innerHTML = i;
|
||||
this.hours.appendChild(range);
|
||||
|
||||
|
||||
}
|
||||
*/
|
||||
this.clock = document.createElement("div");
|
||||
this.clock.className = this.cssClass + "-clock";
|
||||
|
||||
for (let i = 0; i < 1440; i += this.layout.time.range) {
|
||||
var range = document.createElement("div");
|
||||
range.className = this.cssClass + "-time";
|
||||
range.innerHTML = this.layout.time.formatter(i);
|
||||
range.setAttribute("data-time", i);
|
||||
this.clock.appendChild(range);
|
||||
|
||||
range.addEventListener("click", function () {
|
||||
var t = parseInt(this.getAttribute("data-time"));
|
||||
var h = Math.floor(t / 60);
|
||||
var m = Math.floor(t % 60);
|
||||
self._value.setHours(h);
|
||||
self._value.setMinutes(m);
|
||||
self._emit("select", self._value);
|
||||
self.render();
|
||||
});
|
||||
}
|
||||
|
||||
//this.timeList = document.createElement("div");
|
||||
//this.timeList =
|
||||
this.appendChild(this.calendar);
|
||||
this.appendChild(this.clock);
|
||||
// this.appendChild(this.minutes);
|
||||
// this.appendChild(this.hours);
|
||||
|
||||
this.value = new Date();
|
||||
}
|
||||
|
||||
create() {
|
||||
|
||||
var self = this;
|
||||
|
||||
|
||||
this._register("select");
|
||||
|
||||
this.classList.add(this.cssClass);
|
||||
|
||||
this.layout = {
|
||||
day: {
|
||||
formatter: function (index) {
|
||||
return ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'][index];
|
||||
//return ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'][index];
|
||||
}
|
||||
},
|
||||
month: {
|
||||
formatter: function (index) {
|
||||
return ["January", "February", "March", "April", "May", "June",
|
||||
"July", "August", "September", "October", "November", "December"][index];
|
||||
}
|
||||
},
|
||||
year: {
|
||||
formatter: function (value) {
|
||||
return value;
|
||||
}
|
||||
},
|
||||
time: {
|
||||
formatter: function (value) {
|
||||
var formatDigit = function (d) { return (d < 10) ? "0" + d : d; };
|
||||
var h = Math.floor(value / 60);
|
||||
var m = Math.floor(value % 60);
|
||||
return formatDigit(h) + ":" + formatDigit(m);
|
||||
},
|
||||
range: 15
|
||||
},
|
||||
|
||||
weekStart: 5
|
||||
};
|
||||
}
|
||||
|
||||
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);
|
||||
|
||||
this.yearName.innerHTML = this.layout.year.formatter(this._year);
|
||||
this.monthName.innerHTML = this.layout.month.formatter(this._month);
|
||||
|
||||
var today = new Date();
|
||||
|
||||
for (var i = 0; i < 42; i++) {
|
||||
var rowIndex = Math.floor(i / 7);
|
||||
var cellIndex = i % 7;
|
||||
|
||||
var td = this.body.rows[rowIndex].cells[cellIndex];
|
||||
|
||||
var d = new Date(this._year, this._month, offset + i);
|
||||
|
||||
td.classList.remove(this.cssClass + "-different-month");
|
||||
|
||||
// gray it
|
||||
if (d.getMonth() != this._month)
|
||||
td.classList.add(this.cssClass + "-different-month");
|
||||
|
||||
if (d.getDate() == today.getDate() && d.getMonth() == today.getMonth() && d.getFullYear() == today.getFullYear())
|
||||
td.classList.add(this.cssClass + "-day-today");
|
||||
else
|
||||
td.classList.remove(this.cssClass + "-day-today");
|
||||
|
||||
if (d.getDate() == this._value.getDate()
|
||||
&& d.getFullYear() == this._value.getFullYear()
|
||||
&& d.getMonth() == this._value.getMonth())
|
||||
td.classList.add(this.cssClass + "-day-selected");
|
||||
else
|
||||
td.classList.remove(this.cssClass + "-day-selected");
|
||||
|
||||
|
||||
td.setAttribute("data-day", d.getDate());
|
||||
td.setAttribute("data-month", d.getMonth());
|
||||
td.setAttribute("data-year", d.getFullYear());
|
||||
|
||||
td.innerHTML = d.getDate();
|
||||
}
|
||||
|
||||
|
||||
for (var i = 0; i < this.clock.children.length; i++)
|
||||
this.clock.children[i].classList.remove(this.cssClass + "-time-selected");
|
||||
|
||||
var time = (this._value.getHours() * 60) + this._value.getMinutes();
|
||||
|
||||
if (time % this.layout.time.range == 0)
|
||||
this.clock.children[time / this.layout.time.range].classList.add(this.cssClass + "-time-selected");
|
||||
}
|
||||
|
||||
async setData(value) {
|
||||
|
||||
await super.setData(value);
|
||||
|
||||
|
||||
if (value != null && this.field != null)
|
||||
this.value = this.data[this.field];
|
||||
|
||||
}
|
||||
|
||||
get data() {
|
||||
return super.data;
|
||||
}
|
||||
|
||||
modified(name, value) {
|
||||
if (name == this.field)
|
||||
this.value = value;
|
||||
}
|
||||
|
||||
set value(value) {
|
||||
if (value && !isNaN(value.getTime())) {
|
||||
this._value = value;
|
||||
this._month = value.getMonth();
|
||||
this._year = value.getFullYear();
|
||||
this._day = value.getDate();
|
||||
this.render();
|
||||
this._emit("select", { value });
|
||||
this._emit("modified", { value, property: "value" });
|
||||
//this.modified("value", );
|
||||
//this.modified("modified", { value });
|
||||
}
|
||||
}
|
||||
|
||||
get value() {
|
||||
return this._value;
|
||||
}
|
||||
});
|
||||
308
src/UI/Dialog.js
Normal file
308
src/UI/Dialog.js
Normal file
@ -0,0 +1,308 @@
|
||||
import IUIElement from "../Core/IUIElement.js";
|
||||
import { IUI } from "../Core/IUI.js";
|
||||
import IUIWindow from "./Window.js";
|
||||
|
||||
export default IUI.module(class IUIDialog extends IUIWindow
|
||||
{
|
||||
static moduleName = "dialog";
|
||||
|
||||
constructor()
|
||||
{
|
||||
super({
|
||||
closeable: true,
|
||||
resizeable: true,
|
||||
draggable: false,
|
||||
_dragging: false,
|
||||
_expanding: false,
|
||||
x: 0,
|
||||
y: 0,
|
||||
visible: false,
|
||||
modal: false
|
||||
}
|
||||
);
|
||||
|
||||
var self = this;
|
||||
|
||||
this._register("visible");
|
||||
this._register("resize");
|
||||
|
||||
this.on("close", function(){
|
||||
self.hide();
|
||||
});
|
||||
}
|
||||
|
||||
create()
|
||||
{
|
||||
|
||||
super.create();
|
||||
var self = this;
|
||||
|
||||
if (this.modal)
|
||||
{
|
||||
this.background = iui("iui_app_background");
|
||||
if (!this.background)
|
||||
{
|
||||
var bg = document.createElement("div");
|
||||
bg.id="iui_app_background";
|
||||
document.body.insertAdjacentElement("afterBegin", bg);
|
||||
this.background = iui(bg).background();
|
||||
}
|
||||
|
||||
|
||||
// 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
|
||||
{
|
||||
var lc = document.createElement("div");
|
||||
lc.className = this.customClass + "-loading-content";
|
||||
this.loading.appendChild(lc);
|
||||
}
|
||||
|
||||
this.body.appendChild(this.loading);
|
||||
|
||||
|
||||
if (this.draggable)
|
||||
{
|
||||
this.addEventListener("mousedown", function(e){
|
||||
self._startDragging(e);
|
||||
});
|
||||
}
|
||||
else
|
||||
{
|
||||
this.header.addEventListener('mousedown', function (e) {
|
||||
self._startDragging(e);
|
||||
});
|
||||
}
|
||||
|
||||
document.addEventListener('mouseup', function () {
|
||||
self._stopDragging();
|
||||
self._stopExpanding();
|
||||
});
|
||||
|
||||
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("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.clientWidth - x < 5 && self.clientHeight - y < 5)
|
||||
{
|
||||
self.style.cursor = "nwse-resize";
|
||||
}
|
||||
else
|
||||
{
|
||||
self.style.cursor = "";
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
_startDragging(e)
|
||||
{
|
||||
this._dragging = true;
|
||||
|
||||
this._dragX = (e.pageX || e.clientX + (document.documentElement.scrollLeft ?
|
||||
document.documentElement.scrollLeft :
|
||||
document.body.scrollLeft)) - this.offsetLeft;
|
||||
this._dragY = (e.pageY || e.clientY + (document.documentElement.scrollTop ?
|
||||
document.documentElement.scrollTop :
|
||||
document.body.scrollTop) ) - this.offsetTop;
|
||||
|
||||
//corssbrowser mouse pointer values
|
||||
document.onselectstart = function() {return false};
|
||||
}
|
||||
|
||||
_drag(e)
|
||||
{
|
||||
var x = e.pageX || e.clientX + (document.documentElement.scrollLeft ?
|
||||
document.documentElement.scrollLeft :
|
||||
document.body.scrollLeft);
|
||||
var y = e.pageY || e.clientY + (document.documentElement.scrollTop ?
|
||||
document.documentElement.scrollTop :
|
||||
document.body.scrollTop);
|
||||
this.style.top = (y - this._dragY ) + "px";// (y - self.y) + "px";
|
||||
this.style.left = (x -this._dragX ) + "px";//(x - self.x) + "px";
|
||||
this._emit("move", {left: this.offsetLeft, top: this.offsetTop});
|
||||
}
|
||||
|
||||
_stopDragging()
|
||||
{
|
||||
this._dragging = false;
|
||||
}
|
||||
|
||||
_startExpanding(e)
|
||||
{
|
||||
document.onselectstart = function() {return false};
|
||||
this._expanding = true;
|
||||
this._dragX = (e.pageX || e.clientX + (document.documentElement.scrollLeft ?
|
||||
document.documentElement.scrollLeft :
|
||||
document.body.scrollLeft)) - this.offsetLeft;
|
||||
this._dragY = (e.pageY || e.clientY + (document.documentElement.scrollTop ?
|
||||
document.documentElement.scrollTop :
|
||||
document.body.scrollTop) ) - this.offsetTop;
|
||||
this._width = this.clientWidth;
|
||||
this._height = this.clientHeight;
|
||||
}
|
||||
|
||||
_expand(e)
|
||||
{
|
||||
var x = (e.pageX || e.clientX + (document.documentElement.scrollLeft ?
|
||||
document.documentElement.scrollLeft :
|
||||
document.body.scrollLeft)) - this.offsetLeft;
|
||||
var y = (e.pageY || e.clientY + (document.documentElement.scrollTop ?
|
||||
document.documentElement.scrollTop :
|
||||
document.body.scrollTop)) - this.offsetTop;
|
||||
|
||||
|
||||
this.resize(this._width + x -this._dragX, this._height + y - this._dragY);
|
||||
}
|
||||
|
||||
_stopExpanding()
|
||||
{
|
||||
this._expanding = false;
|
||||
this.style.cursor = "";
|
||||
this._width = this.clientWidth;
|
||||
this._height = this.clientHeight;
|
||||
document.onselectstart = function() {return true};
|
||||
}
|
||||
|
||||
setLoading(visible)
|
||||
{
|
||||
if (this.footer)
|
||||
for(var i = 0; i < this.footer.children.length; i++)
|
||||
if (this.footer.children[i].nodeName == "BUTTON")
|
||||
this.footer.children[i].disabled = visible;
|
||||
|
||||
if (visible)
|
||||
this.loading.classList.add(this.customClass + "-loading-visible");
|
||||
else
|
||||
this.loading.classList.remove(this.customClass + "-loading-visible");
|
||||
|
||||
return this;
|
||||
}
|
||||
|
||||
center()
|
||||
{
|
||||
this._updateSize();
|
||||
return this.move(window.pageXOffset + (window.innerWidth / 2) - (this.offsetWidth / 2),
|
||||
window.pageYOffset + (window.innerHeight / 2) - (this.offsetHeight / 2));
|
||||
}
|
||||
|
||||
setVisible(visible)
|
||||
{
|
||||
|
||||
if (visible == this.visible)
|
||||
return;
|
||||
|
||||
this.visible = visible;
|
||||
|
||||
if (visible)
|
||||
{
|
||||
this.classList.add(this.customClass + "-visible");
|
||||
|
||||
if (this.background)
|
||||
{
|
||||
this.background.setVisible(true);
|
||||
|
||||
}
|
||||
//else
|
||||
if (!this._shown)
|
||||
{
|
||||
this._updateSize();
|
||||
this._shown = true;
|
||||
}
|
||||
|
||||
this.setFocus(true);
|
||||
|
||||
this._updateSize();
|
||||
|
||||
}
|
||||
else
|
||||
{
|
||||
this._updateSize();
|
||||
|
||||
this.classList.remove(this.customClass + "-visible");
|
||||
this.classList.remove(this.customClass + "-active");
|
||||
|
||||
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);
|
||||
|
||||
/*
|
||||
IUI._nav_list.pop
|
||||
if (IUI._previousWindow)
|
||||
if (IUI._previousWindow.visible)
|
||||
IUI._previousWindow.focus();
|
||||
else
|
||||
window.location.hash = "";
|
||||
else
|
||||
window.location.hash = "";
|
||||
*/
|
||||
}
|
||||
|
||||
this._emit("visible", {visible});
|
||||
|
||||
return this;
|
||||
}
|
||||
|
||||
hide()
|
||||
{
|
||||
this.setVisible(false);
|
||||
return this;
|
||||
}
|
||||
|
||||
show()
|
||||
{
|
||||
this.setVisible(true);
|
||||
return this;
|
||||
}
|
||||
});
|
||||
|
||||
document.addEventListener("keydown", function (e) {
|
||||
if ( e.keyCode === 27 ) { // ESC
|
||||
var dialogs = IUI.registry.filter(function(o){ return ( o instanceof IUIDialog); }).filter(function(x){return x.focus;});
|
||||
for(var i = 0; i < dialogs.length; i++)
|
||||
dialogs[i].hide();
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
//IUI.module("dialog", IUIDialog, function(el, modal, properties){ return new IUIDialog(el, modal, properties);});
|
||||
196
src/UI/DropDown.js
Normal file
196
src/UI/DropDown.js
Normal file
@ -0,0 +1,196 @@
|
||||
import IUIElement from "../Core/IUIElement.js";
|
||||
import { IUI } from "../Core/IUI.js";
|
||||
|
||||
export default IUI.module(class DropDown extends IUIElement {
|
||||
constructor() {
|
||||
super({"direction": "down" });
|
||||
|
||||
var self = this;
|
||||
|
||||
this._register("visible");
|
||||
|
||||
this.visible = false;
|
||||
|
||||
// this.classList.add(this.cssClass + "-" + this.direction);
|
||||
|
||||
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"))
|
||||
{
|
||||
this._fixed = true;
|
||||
document.body.appendChild(this.menu);
|
||||
}
|
||||
|
||||
//this.el.appendChild(this.menu);
|
||||
|
||||
this.addEventListener("click", function (e) {
|
||||
var t = e.target
|
||||
do {
|
||||
if (t == self.menu)
|
||||
return;
|
||||
} while (t = t.parentElement)
|
||||
|
||||
self.setVisible(!self.visible);
|
||||
});
|
||||
|
||||
IUI._menus.push(this);
|
||||
|
||||
/*
|
||||
document.body.addEventListener("click", function(e)
|
||||
{
|
||||
if (!self.visible)
|
||||
return;
|
||||
|
||||
var x = e.target;
|
||||
do {
|
||||
if (x == self.menu || x == self.el)
|
||||
return;
|
||||
} while (x = x.parentNode)
|
||||
|
||||
if (e.target.id == "iui_app_background")
|
||||
return;
|
||||
|
||||
self.setVisible(false);
|
||||
});*/
|
||||
}
|
||||
|
||||
set fixed(value) {
|
||||
if (value)
|
||||
document.body.appendChild(this.menu);
|
||||
this._fixed = value;
|
||||
}
|
||||
|
||||
get fixed() {
|
||||
return this._fixed;
|
||||
}
|
||||
|
||||
hide() {
|
||||
return this.setVisible(false);
|
||||
}
|
||||
|
||||
show() {
|
||||
return this.setVisible(true);
|
||||
}
|
||||
|
||||
getOffset() {
|
||||
var el = this;
|
||||
var _x = 0;
|
||||
var _y = 0;
|
||||
while (!isNaN(el.offsetLeft) && !isNaN(el.offsetTop)) {
|
||||
_x += el.offsetLeft - el.scrollLeft;
|
||||
_y += el.offsetTop - el.scrollTop;
|
||||
el = el.offsetParent;
|
||||
}
|
||||
_x += window.pageXOffset;
|
||||
_y += window.pageYOffset;
|
||||
|
||||
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);
|
||||
}
|
||||
setVisible(visible) {
|
||||
this.visible = visible;
|
||||
|
||||
if (!this.fixed) {
|
||||
if (visible) {
|
||||
this.menu.classList.add(this.cssClass + "-menu-visible");
|
||||
this.classList.add(this.cssClass + "-visible");
|
||||
}
|
||||
else {
|
||||
this.menu.classList.remove(this.cssClass + "-menu-visible");
|
||||
this.classList.remove(this.cssClass + "-visible");
|
||||
}
|
||||
}
|
||||
else {
|
||||
if (visible) {
|
||||
var rect = this.getBoundingClientRect();
|
||||
|
||||
var menuWidth = this.menu.clientWidth;
|
||||
var menuHeight = this.menu.clientHeight;
|
||||
|
||||
if (menuWidth > document.body.clientWidth) {
|
||||
menuWidth = (document.body.clientWidth - 10);
|
||||
this.menu.style.width = menuWidth + "px";
|
||||
}
|
||||
|
||||
|
||||
var startX = rect.left + (rect.width / 2 - menuWidth / 2);
|
||||
|
||||
|
||||
if (this.direction == "up") {
|
||||
// var menuTop = rect.top - this.arrow.clientHeight - this.menu.clientHeight;
|
||||
var menuTop = rect.top - this.menu.clientHeight;
|
||||
|
||||
if (menuTop < 0) {
|
||||
menuTop = 5;
|
||||
// this.menu.style.height = (rect.top - this.arrow.clientHeight ) + "px";
|
||||
this.menu.style.height = (rect.top) + "px";
|
||||
|
||||
this.menu.classList.add(this.cssClass + "-menu-oversized");
|
||||
}
|
||||
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 {
|
||||
//var menuTop = rect.top + rect.height + this.arrow.clientHeight;
|
||||
var menuTop = rect.top + rect.height;
|
||||
|
||||
//this.arrow.classList.remove(this.customClass + "-arrow-up");
|
||||
//this.arrow.classList.add(this.customClass + "-arrow-down");
|
||||
//this.arrow.style.top = ( rect.top + rect.height ) + "px";
|
||||
|
||||
this.menu.style.top = menuTop + "px";
|
||||
|
||||
if (menuTop + menuHeight > document.body.clientHeight) {
|
||||
this.menu.style.height = (document.body.clientHeight - menuTop) + "px";
|
||||
this.menu.classList.add(this.cssClass + "-menu-oversized");
|
||||
}
|
||||
else {
|
||||
this.menu.classList.remove(this.cssClass + "-menu-oversized");
|
||||
}
|
||||
}
|
||||
|
||||
if (startX < 0)
|
||||
startX = 5;
|
||||
else if (startX + menuWidth > document.body.clientWidth)
|
||||
startX = document.body.clientWidth - menuWidth - 5;
|
||||
|
||||
|
||||
//this.arrow.style.left = (rect.left + (rect.width/2 - this.arrow.clientWidth/2)) + "px";
|
||||
this.menu.style.left = startX + "px";
|
||||
|
||||
//this.arrow.classList.add(this.customClass + "-arrow-visible");
|
||||
this.menu.classList.add(this.cssClass + "-menu-visible");
|
||||
this.classList.add(this.cssClass + "-visible");
|
||||
|
||||
}
|
||||
else {
|
||||
//this.arrow.classList.remove(this.customClass + "-arrow-visible");
|
||||
this.menu.classList.remove(this.cssClass + "-menu-visible");
|
||||
this.classList.remove(this.cssClass + "-visible");
|
||||
}
|
||||
}
|
||||
|
||||
this._emit("visible", { visible});
|
||||
|
||||
return this;
|
||||
|
||||
}
|
||||
});
|
||||
101
src/UI/Form.js
Normal file
101
src/UI/Form.js
Normal file
@ -0,0 +1,101 @@
|
||||
import IUIElement from "../Core/IUIElement.js";
|
||||
import { IUI } from "../Core/IUI.js";
|
||||
import Tabs from "./Tabs.js";
|
||||
import Tab from "./Tab.js";
|
||||
|
||||
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._cancel = document.createElement("button");
|
||||
this._cancel.className = "button";
|
||||
this._cancel = this.hasAttribute("cancel") ? this.getAttribute("cancel") : "Cancel";
|
||||
|
||||
this._save.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) {
|
||||
/*
|
||||
|
||||
mode:tabs,
|
||||
tabs: [
|
||||
{name: 'Tab Name'},
|
||||
{content: [
|
||||
{field: 'item', type: 'text|selectlist|check|autocomplete|form', layout: {}}
|
||||
]}
|
||||
]
|
||||
*/
|
||||
// render layout
|
||||
if (value.mode == "tabs") {
|
||||
for (var i = 0; i < this.layout.tabs.length; i++) {
|
||||
// render tab
|
||||
this.mode = "tabs";
|
||||
this._tabs = new Tabs();
|
||||
var tab = new Tab();
|
||||
this._tabs.add(tab);
|
||||
for (var j = 0; j < this._tabs.length; j++) {
|
||||
|
||||
}
|
||||
this.layout.tasbs[i].content
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
set data(value) {
|
||||
var self = this;
|
||||
|
||||
if (value == null)
|
||||
this._input.value = "";
|
||||
else {
|
||||
this._input.value = value[this._field];
|
||||
|
||||
if (value.on)
|
||||
value.on("modified", (propertyName, value) => {
|
||||
if (propertyName == self._field)
|
||||
self._input.value = value[self._field];
|
||||
});
|
||||
}
|
||||
//super.data = data;
|
||||
}
|
||||
|
||||
get layout() {
|
||||
return this._input.value;
|
||||
}
|
||||
|
||||
set layout(value) {
|
||||
// load layout
|
||||
|
||||
for (var i = 0; i < value.length; i++) {
|
||||
// [{tab: },{}]
|
||||
}
|
||||
|
||||
this._input.value = value;
|
||||
}
|
||||
});
|
||||
204
src/UI/Grid.js
Normal file
204
src/UI/Grid.js
Normal file
@ -0,0 +1,204 @@
|
||||
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}}});
|
||||
|
||||
this._register("add");
|
||||
this._register("layout");
|
||||
this._register("contextmenu");
|
||||
|
||||
this.windows = [];
|
||||
}
|
||||
|
||||
create() {
|
||||
for (var i = 0; i < this.children.length; i++)
|
||||
this.add(this.children[i]);
|
||||
}
|
||||
|
||||
setGridLayout(style)
|
||||
{
|
||||
this.style.grid = style;
|
||||
this._emit("layout", style, this);
|
||||
return this;
|
||||
}
|
||||
|
||||
add(win) {
|
||||
let self = this;
|
||||
|
||||
win.setAttribute("draggable", true);
|
||||
win.addEventListener("dragstart", function (e) {
|
||||
e.dataTransfer.effectAllowed = 'move';
|
||||
self._dragItem = this;
|
||||
|
||||
this.classList.add(self.cssClass + '-window-drag');
|
||||
|
||||
});
|
||||
|
||||
win.addEventListener("dragover", function (e) {
|
||||
if (self._dragItem) {
|
||||
e.preventDefault();
|
||||
this.classList.add(self.cssClass + '-window-over');
|
||||
e.dataTransfer.dropEffect = 'move'; // See the section on the DataTransfer object.
|
||||
}
|
||||
});
|
||||
|
||||
win.addEventListener("dragleave", function (e) {
|
||||
|
||||
if (e.preventDefault)
|
||||
e.preventDefault();
|
||||
|
||||
this.classList.remove(self.cssClass + "-window-over");
|
||||
});
|
||||
|
||||
win.addEventListener("dragend", function (e) {
|
||||
this.classList.remove(self.cssClass + '-window-drag');
|
||||
self._dragItem = null;
|
||||
});
|
||||
|
||||
win.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) {
|
||||
self.insertBefore(self._dragItem, e.currentTarget.nextSibling);
|
||||
break;
|
||||
}
|
||||
else if (self.children[i] == e.currentTarget) {
|
||||
self.insertBefore(self._dragItem, e.currentTarget);
|
||||
break;
|
||||
}
|
||||
|
||||
self._dragItem = null;
|
||||
});
|
||||
|
||||
win.addEventListener("contextmenu", function (e) {
|
||||
self.selected = win;
|
||||
self._emit("contextmenu", { win });
|
||||
});
|
||||
|
||||
win.on("close", function () {
|
||||
self.remove(win);
|
||||
});
|
||||
}
|
||||
|
||||
addOld(item)
|
||||
{
|
||||
|
||||
var self = this;
|
||||
|
||||
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';
|
||||
self._dragItem = this;
|
||||
|
||||
this.classList.add(self.cssClass + '-window-drag');
|
||||
|
||||
});
|
||||
|
||||
li.addEventListener("dragover", function(e){
|
||||
if (self._dragItem)
|
||||
{
|
||||
e.preventDefault();
|
||||
this.classList.add(self.cssClass + '-window-over');
|
||||
e.dataTransfer.dropEffect = 'move'; // See the section on the DataTransfer object.
|
||||
}
|
||||
});
|
||||
|
||||
li.addEventListener("dragleave", function(e){
|
||||
|
||||
if (e.preventDefault)
|
||||
e.preventDefault();
|
||||
|
||||
this.classList.remove(self.cssClass + "-window-over");
|
||||
});
|
||||
|
||||
li.addEventListener("dragend", function(e){
|
||||
this.classList.remove(self.cssClass + '-window-drag');
|
||||
self._dragItem = null;
|
||||
});
|
||||
|
||||
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)
|
||||
{
|
||||
self.insertBefore(self._dragItem, e.currentTarget.nextSibling);
|
||||
break;
|
||||
}
|
||||
else if (self.children[i] == e.currentTarget)
|
||||
{
|
||||
self.insertBefore(self._dragItem, e.currentTarget);
|
||||
break;
|
||||
}
|
||||
|
||||
self._dragItem = null;
|
||||
});
|
||||
|
||||
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 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 fe = document.createElement("div");
|
||||
fe.className = "window-footer";
|
||||
|
||||
if (footer instanceof HTMLElement)
|
||||
fe.appendChild(footer);
|
||||
else
|
||||
fe.innerHTML = footer;
|
||||
|
||||
win.appendChild(fe);
|
||||
}
|
||||
|
||||
win.on("close", function(){
|
||||
self.remove(win);
|
||||
});
|
||||
|
||||
this.appendChild(li);
|
||||
|
||||
win.control = item;
|
||||
|
||||
this.windows.push(win);
|
||||
|
||||
this._emit("add", item, win, this);
|
||||
|
||||
return this;
|
||||
//win._updateSize();
|
||||
}
|
||||
|
||||
remove(win)
|
||||
{
|
||||
win.destroy();
|
||||
this.removeChild(win);
|
||||
}
|
||||
|
||||
clear()
|
||||
{
|
||||
while (this.children.length > 0)
|
||||
this.removeChild(this.children[0]);
|
||||
}
|
||||
});
|
||||
218
src/UI/Input.js
Normal file
218
src/UI/Input.js
Normal file
@ -0,0 +1,218 @@
|
||||
import IUIElement from "../Core/IUIElement.js";
|
||||
import { IUI } from "../Core/IUI.js";
|
||||
|
||||
export default IUI.module(class Input extends IUIElement {
|
||||
constructor() {
|
||||
super({ formatter: (x) => x });
|
||||
this._register("input");
|
||||
this._register("change");
|
||||
}
|
||||
|
||||
_checkValidity() {
|
||||
if (this.validate != null) {
|
||||
try {
|
||||
let valid = this.validate.apply(this);
|
||||
if (!valid) {
|
||||
this.setAttribute("invalid", "");
|
||||
this.classList.add(this.cssClass + "-invalid");
|
||||
return false;
|
||||
}
|
||||
else {
|
||||
this.removeAttribute("invalid");
|
||||
this.classList.remove(this.cssClass + "-invalid");
|
||||
return true;
|
||||
}
|
||||
}
|
||||
catch (e) {
|
||||
console.log("Validation Error", e);
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
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()`);
|
||||
}
|
||||
|
||||
this._input = document.createElement("input");
|
||||
let self = this;
|
||||
|
||||
this._input.addEventListener("input", () => {
|
||||
if (self._checkValidity() && self.isAuto)
|
||||
this.revert();
|
||||
//self.data[self.field] = self.value;
|
||||
});
|
||||
|
||||
this._input.addEventListener("change", () => {
|
||||
self._emit("change", { value: self.value });
|
||||
});
|
||||
|
||||
this.type = this.hasAttribute("type") ? this.getAttribute("type").toLowerCase() : "text";
|
||||
|
||||
this.accept = this.getAttribute("accept");
|
||||
|
||||
this.appendChild(this._input);
|
||||
|
||||
if (this.type == "password")
|
||||
{
|
||||
this._eye = document.createElement("div");
|
||||
this._eye.className = this.cssClass + "-eye";
|
||||
this._eye.addEventListener("mousedown", ()=>{
|
||||
self._input.type = "text";
|
||||
self._eye.classList.add(self.cssClass + "-eye-active");
|
||||
});
|
||||
this._eye.addEventListener("mouseup", ()=>{
|
||||
self._input.type = "password";
|
||||
self._eye.classList.remove(self.cssClass + "-eye-active");
|
||||
});
|
||||
|
||||
this.appendChild(this._eye);
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
async updateAttributes(deep, parentData) {
|
||||
await super.updateAttributes(deep, parentData);
|
||||
//this._input.type = this.type;
|
||||
//this._input.value = this.value;
|
||||
}
|
||||
|
||||
set type(value) {
|
||||
this._input.type = value;
|
||||
}
|
||||
|
||||
get type() {
|
||||
return this._input.type;
|
||||
}
|
||||
|
||||
set accept(value){
|
||||
this._input.accept = value;
|
||||
}
|
||||
|
||||
get accept() {
|
||||
return this._input.accept;
|
||||
}
|
||||
|
||||
set disabled(value) {
|
||||
if (value)
|
||||
this.setAttribute("disabled", "disabled");
|
||||
else
|
||||
this.removeAttribute("disabled");
|
||||
|
||||
this._input.disabled = value;
|
||||
}
|
||||
|
||||
get disabled() {
|
||||
return this._input.disabled;
|
||||
}
|
||||
|
||||
set enabled(value) {
|
||||
this.disabled = !value;
|
||||
}
|
||||
|
||||
get enabled() {
|
||||
return !this._input.disabled;
|
||||
}
|
||||
|
||||
async setData(value) {
|
||||
|
||||
await super.setData(value);
|
||||
|
||||
if (this.type == "checkbox")
|
||||
this._input.checked = value;
|
||||
else if (this.type == "date")
|
||||
this._input.value = value != null ? value.toISOString().slice(0, 10) : value;
|
||||
else if (this.type == null || this.type == "text" || this.type == "search" || this.type == "password")
|
||||
this._input.value = value == null ? '' : value;
|
||||
else
|
||||
this._input.value = value;
|
||||
|
||||
if (this._checkValidity() && this.isAuto)
|
||||
this.revert();
|
||||
|
||||
|
||||
/*
|
||||
await super.setData(value);
|
||||
if (value != null && this.field != null)
|
||||
this.value = value[this.field];
|
||||
else if (this.field != null)
|
||||
this.value = null;
|
||||
*/
|
||||
}
|
||||
|
||||
|
||||
// modified(name, value) {
|
||||
// if (name == this.field) {
|
||||
// this.value = value;
|
||||
// }
|
||||
// }
|
||||
|
||||
async getData(){
|
||||
if (this.type == "checkbox")
|
||||
return this._input.checked;
|
||||
else if (this.type == "date")
|
||||
return new Date(this._input.value);
|
||||
else if (this.type == "file")
|
||||
return new Uint8Array(await this._input.files[0].arrayBuffer());
|
||||
else
|
||||
return this._input.value;
|
||||
}
|
||||
|
||||
get data()
|
||||
{
|
||||
if (this.type == "checkbox")
|
||||
return this._input.checked;
|
||||
else if (this.type == "date")
|
||||
return new Date(this._input.value);
|
||||
else if (this.type == "file")
|
||||
{
|
||||
return new Promise((resolve)=>{
|
||||
this._input.files[0].arrayBuffer().then((x)=>{
|
||||
resolve(new Uint8Array(x));
|
||||
});
|
||||
});
|
||||
}
|
||||
else
|
||||
return this._input.value;
|
||||
}
|
||||
|
||||
/*
|
||||
get data() {
|
||||
if (this.type == "checkbox")
|
||||
return this._input.checked;
|
||||
else if (this.type == "date")
|
||||
return new Date(this._input.value);
|
||||
else if (this.type == "file")
|
||||
{
|
||||
|
||||
}
|
||||
else
|
||||
return this._input.value;
|
||||
}
|
||||
*/
|
||||
|
||||
// set value(value) {
|
||||
|
||||
// if (this.type == "checkbox")
|
||||
// this._input.checked = value;
|
||||
// else if (this.type == "date")
|
||||
// this._input.value = value != null ? value.toISOString().slice(0, 10) : value;
|
||||
// else if (this.type == null || this.type == "text")
|
||||
// this._input.value = value == null ? '' : value;
|
||||
// else
|
||||
// this._input.value = value;
|
||||
|
||||
// this._checkValidity();
|
||||
// }
|
||||
});
|
||||
179
src/UI/Login.js
Normal file
179
src/UI/Login.js
Normal file
@ -0,0 +1,179 @@
|
||||
import IUIElement from "../Core/IUIElement.js";
|
||||
import { IUI } from "../Core/IUI.js";
|
||||
|
||||
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;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
user-select: none;
|
||||
border: 1px solid #b4b4b4;'>
|
||||
|
||||
<div name="message"></div>
|
||||
<div style='display: flex; flex-direction: column;padding: 20px;'>
|
||||
|
||||
<label class="textbox-with-label">
|
||||
<input name="txtUsername" placeholder=" " autocomplete="no" style="width: calc(100% - 10px);">
|
||||
<span name="spnUsername">Username</span>
|
||||
</label>
|
||||
|
||||
|
||||
<label class="textbox-with-label" >
|
||||
<input name="txtPassword" style="width: calc(100% - 10px);" type="password" placeholder=" " ">
|
||||
<span name="spnPassword">Password</span>
|
||||
</label>
|
||||
|
||||
<div style="display: flex">
|
||||
|
||||
<input type="checkbox" name="remember" >
|
||||
<label for="remember" name="labelRemember">Remember</label>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class='actions'>
|
||||
<button class='button' name="login">Login</button>
|
||||
</div>
|
||||
</div>`;
|
||||
|
||||
this.innerHTML = template;
|
||||
|
||||
|
||||
|
||||
this._message = this.querySelector("div[name='message']");
|
||||
|
||||
this._usernameText = this.querySelector("span[name='spnUsername']");
|
||||
this._passwordText = this.querySelector("span[name='spnPassword']");
|
||||
this._rememberText = this.querySelector("label[name='labelRemember']");
|
||||
this._username = this.querySelector("input[name='txtUsername']");
|
||||
this._password = this.querySelector("input[name='txtPassword']");
|
||||
this._remember = this.querySelector("input[name='remember']");
|
||||
this._login = this.querySelector("button[name='login']");
|
||||
|
||||
var self = this;
|
||||
|
||||
this._password.addEventListener("keydown", (e) => { if (e.keyCode == 13) self.login(); });
|
||||
|
||||
if (this.hasAttribute("message")) {
|
||||
this._message.innerHTML = this.getAttribute("message");
|
||||
}
|
||||
|
||||
if (this.hasAttribute("username")) {
|
||||
this._usernameText.innerHTML = this.getAttribute("username");
|
||||
}
|
||||
|
||||
if (this.hasAttribute("password")) {
|
||||
this._passwordText.innerHTML = this.getAttribute("password");
|
||||
}
|
||||
|
||||
if (this.hasAttribute("remember")) {
|
||||
this._rememberText.innerHTML = this.getAttribute("remember");
|
||||
}
|
||||
|
||||
if (this.hasAttribute("login")) {
|
||||
this._login.innerHTML = this.getAttribute("login");
|
||||
}
|
||||
|
||||
|
||||
let username = this.username;// window.localStorage.getItem("iui.login.username");
|
||||
let password = this.password;// window.localStorage.getItem("iui.login.password");
|
||||
if (username != "") {
|
||||
this._username.value = username;
|
||||
this._password.value = password;
|
||||
this._remember.checked = true;
|
||||
|
||||
}
|
||||
|
||||
this._login.addEventListener("click", ()=>this.login());
|
||||
|
||||
|
||||
this._register("login");
|
||||
this._register("logout");
|
||||
|
||||
}
|
||||
|
||||
login() {
|
||||
let username = this._username.value;
|
||||
let password = this._password.value;
|
||||
|
||||
if (username == "" || password == "")
|
||||
return;
|
||||
|
||||
if (this._remember.checked) {
|
||||
this.username = username;
|
||||
this.password = password;
|
||||
//window.localStorage.setItem("iui.login.username", username);
|
||||
//window.localStorage.setItem("iui.login.password", password);
|
||||
}
|
||||
else {
|
||||
window.localStorage.removeItem("iui.login.username");
|
||||
window.localStorage.removeItem("iui.login.password");
|
||||
}
|
||||
|
||||
this._emit("login", { username, password });
|
||||
}
|
||||
|
||||
get username() {
|
||||
return window.localStorage.getItem("iui.login.username");
|
||||
}
|
||||
|
||||
set username(value) {
|
||||
return window.localStorage.setItem("iui.login.username", value);
|
||||
}
|
||||
|
||||
get password() {
|
||||
return window.localStorage.getItem("iui.login.password");
|
||||
}
|
||||
|
||||
set password(value) {
|
||||
return window.localStorage.setItem("iui.login.password", value);
|
||||
}
|
||||
|
||||
get token() {
|
||||
return window.localStorage.getItem("iui.login.token");
|
||||
}
|
||||
|
||||
set token(value) {
|
||||
return window.localStorage.setItem("iui.login.token", value);
|
||||
}
|
||||
|
||||
|
||||
get message() {
|
||||
return this._message.innerHTML;
|
||||
}
|
||||
|
||||
set message(value) {
|
||||
this._message.innerHTML = value;
|
||||
}
|
||||
|
||||
logout() {
|
||||
window.localStorage.removeItem("iui.login.username");
|
||||
window.localStorage.removeItem("iui.login.password");
|
||||
window.localStorage.removeItem("iui.login.token");
|
||||
this._username.value = "";
|
||||
this._password.value = "";
|
||||
this._remember.checked = false;
|
||||
|
||||
this._emit("logout");
|
||||
}
|
||||
|
||||
created()
|
||||
{
|
||||
|
||||
//if (this.hasAttribute("auto")) {
|
||||
|
||||
// let username = this.username;// window.localStorage.getItem("iui.login.username");
|
||||
// let password = this.password;// window.localStorage.getItem("iui.login.password");
|
||||
// if (this.username != "") {
|
||||
// this._emit("login", { username, password });
|
||||
// }
|
||||
//}
|
||||
|
||||
}
|
||||
});
|
||||
196
src/UI/Menu.js
Normal file
196
src/UI/Menu.js
Normal file
@ -0,0 +1,196 @@
|
||||
import { IUI } from '../Core/IUI.js';
|
||||
import IUIElement from '../Core/IUIElement.js';
|
||||
import Background from './Background.js';
|
||||
import DropDown from './DropDown.js';
|
||||
|
||||
export default class Menu extends IUIElement {
|
||||
constructor(props) {
|
||||
super(IUI.extend(props, {
|
||||
index: "iid",
|
||||
layout: { field: "name", formatter: null },
|
||||
visible: false,
|
||||
static: false,
|
||||
"target-class": "selected"
|
||||
}));
|
||||
|
||||
this._register("visible");
|
||||
this._register("select");
|
||||
|
||||
IUI._menus.push(this);
|
||||
}
|
||||
|
||||
|
||||
|
||||
// clear() {
|
||||
// this.innerHTML = "";
|
||||
// this._uiBindings = null;
|
||||
// }
|
||||
|
||||
hide() {
|
||||
return this.setVisible(false);
|
||||
}
|
||||
|
||||
//show(x, y, element) {
|
||||
// return this.setVisible(true, x, y, element);
|
||||
//}
|
||||
|
||||
show(event) {
|
||||
event.preventDefault();
|
||||
|
||||
let el = event.currentTarget;
|
||||
let x = event.pageX;
|
||||
let y = event.pageY;
|
||||
|
||||
this.setVisible(true, x, y, el);
|
||||
}
|
||||
|
||||
|
||||
async showModal(element) {
|
||||
|
||||
|
||||
//super.data = this._getElementData(element);
|
||||
|
||||
await super.setData(element.data);
|
||||
|
||||
if (!this.background) {
|
||||
this.background = document.getElementById("iui_app_background");
|
||||
|
||||
if (!this.background) {
|
||||
this.background = new Background();// document.createElement("div");
|
||||
this.background.id = "iui_app_background";
|
||||
document.body.insertAdjacentElement("afterBegin", this.background);
|
||||
}
|
||||
}
|
||||
|
||||
this.background.show();
|
||||
this.classList.add(this.cssClass + "-modal");
|
||||
this.classList.add(this.cssClass + "-visible");
|
||||
|
||||
var width = (window.innerWidth * 0.8);
|
||||
this.style.width = width + "px";
|
||||
|
||||
this.style.top = (window.pageYOffset + window.innerHeight / 2 - this.offsetHeight / 2) + "px"; // (document.body.clientHeight / 2 - this.clientHeight / 2) + "px";
|
||||
this.style.left = (window.pageXOffset + window.innerWidth / 2 - this.offsetWidth / 2) + "px"; //(document.body.clientWidth / 2 - width / 2) + "px";
|
||||
|
||||
|
||||
this.visible = true;
|
||||
this._emit("visible", { visible: true });
|
||||
|
||||
return this;
|
||||
}
|
||||
|
||||
async setVisible(visible, x, y, element) {
|
||||
this.visible = visible;
|
||||
|
||||
if (this.target) {
|
||||
if (this["target-class"] != null && this["target-class"] != "")
|
||||
this.target.classList.remove(this["target-class"]);
|
||||
this.target = null;
|
||||
}
|
||||
|
||||
if (visible) {
|
||||
|
||||
//if (element)
|
||||
//let dt = super._getElementData(element);
|
||||
if (element) {
|
||||
//[super.data, this.target] = dt;
|
||||
|
||||
await this.setData(element.data);
|
||||
this.target = element;
|
||||
|
||||
if (this["target-class"] != null && this["target-class"] != "")
|
||||
this.target.classList.add(this["target-class"]);
|
||||
|
||||
}
|
||||
|
||||
this._pass = true;
|
||||
|
||||
if (IUI.responsive && !this.static)
|
||||
return this.showModal();
|
||||
|
||||
this.classList.remove(this.cssClass + "-modal");
|
||||
|
||||
var rect = this.getBoundingClientRect();
|
||||
|
||||
if (y != null) {
|
||||
if (y + rect.height > document.documentElement.clientHeight)
|
||||
this.style.top = (document.documentElement.clientHeight - rect.height) + "px";
|
||||
else
|
||||
this.style.top = y + "px";
|
||||
}
|
||||
|
||||
this.classList.add(this.cssClass + "-visible");
|
||||
|
||||
|
||||
if (x != null) {
|
||||
|
||||
if (x + rect.width > document.body.scrollWidth)
|
||||
this.style.left = (document.body.scrollWidth - rect.width) + "px";
|
||||
//else if (x < 0)
|
||||
// this.style.left = "0px";
|
||||
else
|
||||
this.style.left = x + "px";
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
else {
|
||||
|
||||
this.classList.remove(this.cssClass + "-visible");
|
||||
|
||||
if (this.background)
|
||||
this.background.hide();
|
||||
|
||||
//await super.setData({});// = {};
|
||||
|
||||
}
|
||||
|
||||
this._emit("visible", { visible });
|
||||
|
||||
return this;
|
||||
}
|
||||
};
|
||||
|
||||
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);
|
||||
|
||||
e.preventDefault();
|
||||
return;
|
||||
}
|
||||
|
||||
for (var i = 0; i < IUI._menus.length; i++) {
|
||||
if (IUI._menus[i].visible) {
|
||||
var x = e.target;
|
||||
var m = IUI._menus[i];
|
||||
if (m instanceof Menu) {
|
||||
if (m._pass) {
|
||||
m._pass = false;
|
||||
continue;
|
||||
}
|
||||
else
|
||||
if (m.visible)
|
||||
if (!m.contains(e.target))
|
||||
m.setVisible(false);
|
||||
}
|
||||
else if (m instanceof DropDown) {
|
||||
if (!(m.contains(e.target) || m.menu.contains(e.target)))
|
||||
m.setVisible(false);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
document.body.addEventListener("click", handler);
|
||||
document.body.addEventListener("touchstart", handler);
|
||||
});
|
||||
164
src/UI/Navbar.js
Normal file
164
src/UI/Navbar.js
Normal file
@ -0,0 +1,164 @@
|
||||
import IUIElement from "../Core/IUIElement.js";
|
||||
import { IUI } from "../Core/IUI.js";
|
||||
import Link from "../Router/Link.js";
|
||||
import Check from "./Check.js";
|
||||
|
||||
export default IUI.module(class Navbar extends IUIElement
|
||||
{
|
||||
constructor()
|
||||
{
|
||||
super();
|
||||
}
|
||||
|
||||
search(text) {
|
||||
for(var i = 0; i < this._container.children.length; i++)
|
||||
{
|
||||
let el = this._container.children[i];
|
||||
if (el.title.toLowerCase().includes(text))
|
||||
{
|
||||
el.text.innerHTML = el.title.replace(new RegExp(text, 'gi'), (str) => `<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--)
|
||||
{
|
||||
let previous = this._container.children[j];
|
||||
let pLevel = parseInt(previous.getAttribute("data-level"));
|
||||
|
||||
if (pLevel < level)
|
||||
{
|
||||
previous.removeAttribute("hidden");
|
||||
previous.style.display = "";
|
||||
if (previous.expand)
|
||||
previous.expand.checked = true;
|
||||
level = pLevel;
|
||||
}
|
||||
}
|
||||
}
|
||||
else
|
||||
{
|
||||
el.style.display = "none";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
expand(link, value) {
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
build(){
|
||||
|
||||
this.innerHTML = "";
|
||||
let roots = router.routes.filter(x => x.parent == null);
|
||||
let self = this;
|
||||
this._search = document.createElement("input");
|
||||
this._search.type = "search";
|
||||
this._search.className = this.cssClass + "-search textbox";
|
||||
this._search.addEventListener("input", (x) => {
|
||||
self.search(this._search.value);
|
||||
});
|
||||
|
||||
this.appendChild(this._search);
|
||||
|
||||
this._container = document.createElement("div");
|
||||
this._container.className = this.cssClass + "-container";
|
||||
|
||||
this.appendChild(this._container);
|
||||
|
||||
var appendRoutes = (routes, level) => {
|
||||
for (var i = 0; i < routes.length; i++) {
|
||||
|
||||
if (routes[i].hasAttribute("private"))
|
||||
continue;
|
||||
|
||||
if (this.private instanceof Function)
|
||||
{
|
||||
try{
|
||||
// console.log("F");
|
||||
if (this.private(routes[i]))
|
||||
{
|
||||
// console.log("private", route[i]);
|
||||
continue;
|
||||
}
|
||||
} catch(ex){
|
||||
console.log(ex);
|
||||
debugger;
|
||||
}
|
||||
}
|
||||
|
||||
let el = new Link();// document.createElement("i-link");
|
||||
el.setAttribute("data-level", level);
|
||||
el.link = routes[i].link;
|
||||
el.title = routes[i].caption;
|
||||
if (routes[i].icon != null)
|
||||
el.innerHTML = "<img src='" + routes[i].icon + "'>";
|
||||
|
||||
el.text = document.createElement("span");
|
||||
el.text.innerHTML = el.title;
|
||||
el.appendChild(el.text);
|
||||
|
||||
this._container.appendChild(el);
|
||||
|
||||
if (routes[i].routes.length > 0) {
|
||||
// append plus
|
||||
el.expand = new Check({cssClass: this.cssClass + "-check"});// document.createElement("i-check");
|
||||
el.expand.checked = true;
|
||||
|
||||
|
||||
//plus.className = "expand";#f8f8f8
|
||||
el.expand.on("click", (e) => {
|
||||
self.expand(el, el.expand.checked);
|
||||
e.stopPropagation();
|
||||
});
|
||||
|
||||
el.appendChild(el.expand);
|
||||
appendRoutes(routes[i].routes, level + 1);
|
||||
}
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
appendRoutes(roots, 0);
|
||||
}
|
||||
|
||||
created() {
|
||||
if (!this.hasAttribute("manual"))
|
||||
window.router.on("created", this.build);
|
||||
|
||||
window.router.on("navigate", (e) => {
|
||||
for(var i = 0; i < this?._container?.children?.length; i++)
|
||||
{
|
||||
var el = this._container.children[i];
|
||||
if (el.link == e.base)
|
||||
el.setAttribute("selected", "");
|
||||
else
|
||||
el.removeAttribute("selected");
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
188
src/UI/Range.js
Normal file
188
src/UI/Range.js
Normal file
@ -0,0 +1,188 @@
|
||||
import IUIElement from "../Core/IUIElement.js";
|
||||
import { IUI } from "../Core/IUI.js";
|
||||
|
||||
export default IUI.module(class Range extends IUIElement {
|
||||
constructor() {
|
||||
super({
|
||||
getItem: function (index, data) {
|
||||
var item = data[index];
|
||||
return item == null ? index : item;
|
||||
},
|
||||
getIndex: function (x, width, data) {
|
||||
if (x < 0) x = 0;
|
||||
var p = x / width;
|
||||
var index = Math.floor(p * data.length);
|
||||
return index;
|
||||
},
|
||||
getPreview: function (index, data, x, width, el) {
|
||||
return null;
|
||||
},
|
||||
getPosition: function (index, data, width) {
|
||||
var itemSize = width / data.length;
|
||||
return (index * itemSize) + (itemSize / 2);
|
||||
},
|
||||
layout: {
|
||||
render: function () {
|
||||
return true;
|
||||
},
|
||||
initialize: function () {
|
||||
return true;
|
||||
}
|
||||
},
|
||||
data: []
|
||||
});
|
||||
|
||||
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);
|
||||
|
||||
|
||||
this.thumb = document.createElement("div");
|
||||
this.thumb.classList.add(this.customClass + "-thumb");
|
||||
|
||||
this.classList.add(this.customClass);
|
||||
this.appendChild(this.preview);
|
||||
this.appendChild(this.thumb);
|
||||
|
||||
this.addEventListener("mousedown", function (e) {
|
||||
self._startDragging(e.clientX, e.clientY);
|
||||
});
|
||||
|
||||
this.addEventListener("mouseleave", function (e) {
|
||||
self.preview.classList.remove(self.customClass + "-preview-visible");
|
||||
});
|
||||
|
||||
this.addEventListener("mouseenter", function (e) {
|
||||
var rect = self.getBoundingClientRect();
|
||||
self._offset = {
|
||||
top: rect.top + document.body.scrollTop,
|
||||
left: rect.left + document.body.scrollLeft
|
||||
};
|
||||
});
|
||||
|
||||
this.addEventListener("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);
|
||||
|
||||
if (preview == null || preview == false) {
|
||||
self.preview.classList.remove(self.customClass + "-preview-visible");
|
||||
return;
|
||||
}
|
||||
else if (preview instanceof HTMLElement) {
|
||||
while (self.preview.children.length > 0)
|
||||
self.preview.removeChild(self.preview.children[0]);
|
||||
self.preview.appendChild(preview);
|
||||
}
|
||||
else if (preview != true) {
|
||||
self.preview.innerHTML = preview;
|
||||
}
|
||||
|
||||
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);
|
||||
});
|
||||
|
||||
this.addEventListener("touchstart", function (e) {
|
||||
self._startDragging(e.targetTouches[0].clientX, e.targetTouches[0].clientY);
|
||||
});
|
||||
|
||||
this.addEventListener("touchmove", function (e) {
|
||||
self._drag(e.targetTouches[0].clientX, e.targetTouches[0].clientY);
|
||||
});
|
||||
|
||||
this.addEventListener("touchend", function (e) {
|
||||
self._endDragging(e.changedTouches[0].clientX, e.changedTouches[0].clientY);
|
||||
});
|
||||
|
||||
this.setData(this.data);
|
||||
}
|
||||
|
||||
_startDragging(x, y) {
|
||||
this._dragging = true;
|
||||
|
||||
document.onselectstart = function () { return false };
|
||||
|
||||
var rect = this.getBoundingClientRect();
|
||||
var body = document.body.getBoundingClientRect();
|
||||
|
||||
this._offset = {
|
||||
top: rect.top + body.top,// document.body.scrollTop,
|
||||
left: rect.left + body.left,
|
||||
};
|
||||
|
||||
var index = this.getIndex((x - this._offset.left), this.offsetWidth, this.data);
|
||||
this.set(index, true, true);
|
||||
}
|
||||
|
||||
set(index, moveThumb = true, byUser = false) {
|
||||
|
||||
var item = this.getItem(index, this.data);
|
||||
|
||||
if (item != null) {
|
||||
if (moveThumb) {
|
||||
var dx = this.getPosition(index, this.data, this.offsetWidth);
|
||||
this.thumb.style.setProperty("--x", dx + "px");
|
||||
}
|
||||
|
||||
this._emit("select", { item, index });
|
||||
|
||||
if (byUser)
|
||||
this._emit("userSelect", { item, index });
|
||||
|
||||
this.selected = item;
|
||||
this.selectedIndex = index;
|
||||
}
|
||||
|
||||
return this;
|
||||
}
|
||||
|
||||
_drag(x, y) {
|
||||
if (this._dragging) {
|
||||
this.thumb.classList.add(this.customClass + "-thumb-dragging");
|
||||
var dx = (x - this._offset.left);
|
||||
var index = this.getIndex(dx, this.offsetWidth, this.data);
|
||||
this.thumb.style.setProperty("--x", dx + "px");
|
||||
this.set(index, false, true);
|
||||
}
|
||||
}
|
||||
|
||||
_endDragging(x, y) {
|
||||
document.onselectstart = function () { return true };
|
||||
this.thumb.classList.remove(this.customClass + "-thumb-dragging");
|
||||
var index = this.getIndex((x - this._offset.left), this.offsetWidth, this.data);
|
||||
this.set(index, true, true);
|
||||
this._dragging = false;
|
||||
}
|
||||
|
||||
clear() {
|
||||
return this.setData([]);
|
||||
}
|
||||
|
||||
render() {
|
||||
if (this.layout && this.layout.render)
|
||||
this.layout.render.apply(this);
|
||||
return this;
|
||||
}
|
||||
});
|
||||
23
src/UI/RoutesList.js
Normal file
23
src/UI/RoutesList.js
Normal file
@ -0,0 +1,23 @@
|
||||
import IUIElement from "../Core/IUIElement.js";
|
||||
import { IUI } from "../Core/IUI.js";
|
||||
|
||||
export default IUI.module(class RoutesList extends IUIElement {
|
||||
|
||||
constructor(properties) {
|
||||
super(properties, { class: 'routes-list' });
|
||||
}
|
||||
|
||||
create() {
|
||||
if (!window.router)
|
||||
return;
|
||||
|
||||
var table = document.createElement("i-table");
|
||||
|
||||
this.appendChild(table);
|
||||
|
||||
for (var i = 0; i < window.router.routes.length; i++) {
|
||||
// hell
|
||||
table.add
|
||||
}
|
||||
}
|
||||
});
|
||||
424
src/UI/Select.js
Normal file
424
src/UI/Select.js
Normal file
@ -0,0 +1,424 @@
|
||||
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 {
|
||||
constructor() {
|
||||
super({
|
||||
visible: false,
|
||||
searchlist: false,
|
||||
hasArrow: true,
|
||||
//hasAdd: false,
|
||||
updateTextBox: true,
|
||||
query: (x) => null,
|
||||
//_formatter: (x) => x,
|
||||
_autocomplete: false,
|
||||
cssClass: 'select'
|
||||
});
|
||||
|
||||
this._register("select");
|
||||
this._register("input");
|
||||
this._register("add");
|
||||
}
|
||||
|
||||
disconnectedCallback() {
|
||||
//console.log("Select removed", this);
|
||||
if (!this.searchlist && this.menu)
|
||||
app.removeChild(this.menu);
|
||||
|
||||
}
|
||||
|
||||
connectedCallback(){
|
||||
super.connectedCallback();
|
||||
if (!this.searchlist && this.menu)
|
||||
app.appendChild(this.menu);
|
||||
}
|
||||
get autocomplete() {
|
||||
return this._autocomplete;
|
||||
}
|
||||
|
||||
// get formatter() {
|
||||
// return this._formatter;
|
||||
// }
|
||||
|
||||
// set formatter(value) {
|
||||
// this._formatter = value;
|
||||
// }
|
||||
|
||||
_checkValidity() {
|
||||
|
||||
if (this.validate != null) {
|
||||
try {
|
||||
let valid = this.validate.apply(this);
|
||||
if (!valid) {
|
||||
this.setAttribute("invalid", "");
|
||||
this.classList.add(this.cssClass + "-invalid");
|
||||
return false;
|
||||
}
|
||||
else {
|
||||
this.removeAttribute("invalid");
|
||||
this.classList.remove(this.cssClass + "-invalid");
|
||||
return true;
|
||||
}
|
||||
}
|
||||
catch (ex) {
|
||||
console.log("Validation Error", ex);
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
set hasAdd(value) {
|
||||
if (value)
|
||||
this.setAttribute("add", "add");
|
||||
else
|
||||
this.removeAttribute("add");
|
||||
}
|
||||
|
||||
get hasAdd() {
|
||||
return this.hasAttribute("add");
|
||||
}
|
||||
|
||||
async create() {
|
||||
|
||||
this.isAuto = this.hasAttribute("auto");
|
||||
this.field = this.getAttribute("field");
|
||||
|
||||
|
||||
if (this.field != null)
|
||||
{
|
||||
this.setAttribute(":data", `d['${this.field}']`)
|
||||
this.setAttribute(":revert", `d['${this.field}'] = this.data`);
|
||||
}
|
||||
|
||||
this._autocomplete = this.hasAttribute("autocomplete");
|
||||
//this.hasAdd = this.hasAttribute("add") || this.hasAdd;
|
||||
|
||||
let self = this;
|
||||
|
||||
//if (this._autocomplete)
|
||||
// this.cssClass += "-autocomplete";
|
||||
|
||||
|
||||
|
||||
|
||||
this.repeat = new Repeat();
|
||||
this.repeat.cssClass = "select-menu-repeat";
|
||||
//this.repeat.innerHTML = this.innerHTML;
|
||||
this.repeat.setAttribute(":data", "d[1]");
|
||||
|
||||
this.counter = document.createElement("div");
|
||||
this.counter.className = this.cssClass + "-counter";
|
||||
this.counter.innerHTML = "${d[0]}";
|
||||
|
||||
|
||||
this.menu = new Menu({ cssClass: this.cssClass + "-menu", "target-class": "" });
|
||||
|
||||
this.menu.on("click", async (e) => {
|
||||
|
||||
if (e.target != self.textbox && e.target != self.counter && e.target !== self.menu) {
|
||||
await self.setData(e.target.data);
|
||||
|
||||
self._emit("input", { value: e.target.data });
|
||||
|
||||
self.hide();
|
||||
}
|
||||
}).on("visible", x=> { if (!x.visible) self.hide()});
|
||||
|
||||
|
||||
if (this._autocomplete) {
|
||||
this.textbox = document.createElement("input");
|
||||
this.textbox.type = "search";
|
||||
this.textbox.className = this.cssClass + "-textbox";
|
||||
|
||||
if (this.placeholder)
|
||||
this.textbox.placeholder = this.placeholder;
|
||||
|
||||
this.textbox.addEventListener("keyup", function (e) {
|
||||
if (e.keyCode != 13) {
|
||||
self._query(0, self.textbox.value);
|
||||
}
|
||||
});
|
||||
|
||||
this.textbox.addEventListener("search", function (e) {
|
||||
// console.log(e);
|
||||
});
|
||||
|
||||
this.menu.appendChild(this.textbox);
|
||||
|
||||
}
|
||||
|
||||
// get collection
|
||||
let layout = Layout.get(this, "div", true, true);
|
||||
|
||||
//debugger;
|
||||
|
||||
|
||||
if (layout != null && layout.label != undefined && layout.menu != undefined) {
|
||||
this.label = layout.label.node;
|
||||
this.repeat.appendChild(layout.menu.node);
|
||||
}
|
||||
else if (layout != null && layout.null != null)
|
||||
{
|
||||
this.label = layout.null.node;
|
||||
this.repeat.appendChild(layout.null.node.cloneNode(true));
|
||||
}
|
||||
else
|
||||
{
|
||||
this.label = document.createElement("div");
|
||||
this.repeat.innerHTML = this.innerHTML;
|
||||
}
|
||||
|
||||
// clear everything else
|
||||
//this.innerHTML = "";
|
||||
|
||||
this.label.className = this.cssClass + "-label";
|
||||
|
||||
this.appendChild(this.label);
|
||||
|
||||
this.label.addEventListener("click", function (e) {
|
||||
self.show();
|
||||
});
|
||||
|
||||
this.menu.appendChild(this.repeat);
|
||||
this.menu.appendChild(this.counter);
|
||||
|
||||
|
||||
if (this.hasArrow) {
|
||||
this.arrow = document.createElement("div");
|
||||
this.arrow.className = this.cssClass + "-arrow";
|
||||
this.appendChild(this.arrow);
|
||||
|
||||
|
||||
this.arrow.addEventListener("click", function (e) {
|
||||
if (self.visible)
|
||||
self.hide();
|
||||
else
|
||||
self.show();
|
||||
});
|
||||
}
|
||||
|
||||
if (this.hasAdd) {
|
||||
this._add_button = document.createElement("div");
|
||||
this._add_button.className = this.cssClass + "-add";
|
||||
this.appendChild(this._add_button);
|
||||
|
||||
this._add_button.addEventListener("click", function (e) {
|
||||
self._emit("add", { value: self.data })
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
if (this.searchlist)
|
||||
this.appendChild(this.menu);
|
||||
else
|
||||
{
|
||||
app.appendChild(this.menu);
|
||||
if (app.loaded)
|
||||
{
|
||||
///console.log("Append", this.menu);
|
||||
await this.menu.create();
|
||||
await IUI.create(this.menu);
|
||||
this._make_bindings(this.menu);
|
||||
}
|
||||
}
|
||||
|
||||
this.addEventListener("click", function (e) {
|
||||
if (e.target == self.textbox)
|
||||
self.show();
|
||||
});
|
||||
}
|
||||
|
||||
get disabled() {
|
||||
return this.hasAttribute("disabled");
|
||||
}
|
||||
|
||||
set disabled(value) {
|
||||
if (this._autocomplete) {
|
||||
this.textbox.disabled = value;
|
||||
}
|
||||
|
||||
if (value) {
|
||||
this.setAttribute("disabled", value);
|
||||
}
|
||||
else {
|
||||
this.removeAttribute("disabled");
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
/*
|
||||
set(item) {
|
||||
|
||||
if (this.autocomplete != undefined) {
|
||||
if (item != null)
|
||||
this.textbox.value = this.layout.text.formatter ? this.layout.text.formatter(item[this.layout.text.field], item) : item[this.layout.text.field];
|
||||
else
|
||||
this.textbox.value = "";
|
||||
} else {
|
||||
if (item != null)
|
||||
this.label.innerHTML = this.layout.text.formatter ? this.layout.text.formatter(item[this.layout.text.field], item) : item[this.layout.text.field];
|
||||
else
|
||||
this.label.innerHTML = "";
|
||||
}
|
||||
|
||||
this.selected = item;
|
||||
this._emit("select", item);
|
||||
}
|
||||
*/
|
||||
|
||||
show() {
|
||||
this.setVisible(true);
|
||||
//this.textbox.focus();
|
||||
}
|
||||
|
||||
hide() {
|
||||
this.setVisible(false);
|
||||
//this.textbox.focus();
|
||||
}
|
||||
|
||||
clear() {
|
||||
if (this.autocomplete !== undefined)
|
||||
this.textbox.value = "";
|
||||
//else
|
||||
// this.label.innerHTML = "";
|
||||
|
||||
//this.menu.clear();
|
||||
this.response.start = 0;
|
||||
this.selected = null;
|
||||
}
|
||||
|
||||
async _query() {
|
||||
|
||||
|
||||
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;
|
||||
|
||||
//.then(async (res) => {
|
||||
if (res[1].length == 0)
|
||||
await self.setData(null);
|
||||
|
||||
await this.menu.setData(res);
|
||||
|
||||
|
||||
// show results
|
||||
//self.menu.clear();
|
||||
|
||||
|
||||
|
||||
// for (var i = 0; i < res.length; i++) {
|
||||
// let nodes = this.template.content.cloneNode(true).childNodes;
|
||||
|
||||
// while (nodes.length > 0) {
|
||||
// let n = nodes[0];
|
||||
// if (n instanceof HTMLElement)
|
||||
// n.setAttribute(":data", `d[${i}]`);
|
||||
// self.menu.appendChild(n);
|
||||
// }
|
||||
|
||||
// }
|
||||
|
||||
// self.menu.updateBindings();
|
||||
//self.menu.setData(res);
|
||||
|
||||
|
||||
//}).catch(x => {
|
||||
|
||||
//});
|
||||
}
|
||||
|
||||
|
||||
async setData(value) {
|
||||
|
||||
// this.label.innerHTML = "";
|
||||
|
||||
await super.setData(value);
|
||||
|
||||
try {
|
||||
//let text = this.formatter(value);
|
||||
// this.label.innerHTML = text == null ? "" : text;
|
||||
|
||||
this._emit("select", { value });
|
||||
}
|
||||
catch (ex) {
|
||||
//console.log(ex);
|
||||
this._emit("select", { value });
|
||||
}
|
||||
|
||||
//this._checkValidity();
|
||||
|
||||
|
||||
if (this._checkValidity() && this.isAuto)
|
||||
this.revert();
|
||||
|
||||
}
|
||||
|
||||
|
||||
setVisible(visible) {
|
||||
|
||||
if (visible == this.visible)
|
||||
return;
|
||||
|
||||
//console.log("SLCT: SetVisible", visible);
|
||||
|
||||
if (visible) {
|
||||
this._query(0);
|
||||
|
||||
// show menu
|
||||
var rect = this.getBoundingClientRect();
|
||||
this.menu.style.width = (this.clientWidth - this._computeMenuOuterWidth()) + "px";
|
||||
this.menu.style.paddingTop = rect.height + "px";
|
||||
this.menu.setVisible(true, rect.left, rect.top);//, this.menu);
|
||||
this.visible = true;
|
||||
|
||||
this.classList.add(this.cssClass + "-visible");
|
||||
|
||||
if (this._autocomplete)
|
||||
setTimeout(() => {
|
||||
this.textbox.focus();
|
||||
}, 100);
|
||||
|
||||
}
|
||||
else {
|
||||
this.visible = false;
|
||||
this.classList.remove(this.cssClass + "-visible");
|
||||
|
||||
this.menu.hide();
|
||||
}
|
||||
|
||||
//this.textbox.focus();
|
||||
|
||||
}
|
||||
|
||||
_computeMenuOuterWidth() {
|
||||
|
||||
return this.menu.offsetWidth - this.menu.clientWidth;
|
||||
/*
|
||||
var style = window.getComputedStyle(this.menu.el, null);
|
||||
var paddingLeft = style.getPropertyValue('padding-left');
|
||||
var paddingRight = style.getPropertyValue('padding-right');
|
||||
var borderLeft = style.getPropertyValue('border-left');
|
||||
var borderRight = style.getPropertyValue('border-right');
|
||||
|
||||
paddingLeft = parseInt(paddingLeft.substr(0, paddingLeft.length - 2));
|
||||
paddingRight = parseInt(paddingRight.substr(0, paddingRight.length - 2));
|
||||
borderLeft = parseInt(borderLeft.substr(0, borderLeft.length - 2));
|
||||
borderRight = parseInt(borderRight.substr(0, borderRight.length - 2));
|
||||
|
||||
return paddingLeft + paddingRight + borderLeft + borderRight;
|
||||
*/
|
||||
}
|
||||
|
||||
});
|
||||
119
src/UI/SelectList.js
Normal file
119
src/UI/SelectList.js
Normal file
@ -0,0 +1,119 @@
|
||||
import IUIElement from "../Core/IUIElement.js";
|
||||
import { IUI } from "../Core/IUI.js";
|
||||
|
||||
export default IUI.module(class SelectList extends IUIElement {
|
||||
constructor() {
|
||||
super({
|
||||
selected: null,
|
||||
list: [],
|
||||
query: (x) => null,
|
||||
formatter: (x) => x["name"]
|
||||
});
|
||||
|
||||
var self = this;
|
||||
|
||||
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.on("visible", function (v) {
|
||||
if (v)
|
||||
self.classList.add(self.cssClass + "-active");
|
||||
else
|
||||
self.classList.remove(self.cssClass + "-active");
|
||||
});
|
||||
|
||||
this.menu.on("click", (e) => {
|
||||
let [data, element] = self.menu._getElementData(e.target);
|
||||
if (data != undefined)
|
||||
self.data = data;
|
||||
});
|
||||
|
||||
|
||||
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) {
|
||||
self.show();
|
||||
});
|
||||
|
||||
this.arrow = document.createElement("div");
|
||||
this.arrow.className = this.customClass + "-arrow";
|
||||
|
||||
this.header = document.createElement("div");
|
||||
this.header.className = this.customClass + "-header";
|
||||
|
||||
this.header.appendChild(this.label);
|
||||
this.header.appendChild(this.arrow);
|
||||
|
||||
this.appendChild(this.header);
|
||||
|
||||
this.arrow.addEventListener("click", function (e) {
|
||||
self.show();
|
||||
});
|
||||
}
|
||||
|
||||
clear() {
|
||||
this.menu.clear();
|
||||
return this;
|
||||
}
|
||||
|
||||
add(item) {
|
||||
this.menu.add(item);
|
||||
return this;
|
||||
}
|
||||
|
||||
set(item) {
|
||||
if (typeof item == "string" || typeof item == "number") {
|
||||
for (var i = 0; i < this.menu.list.length; i++) {
|
||||
if (this.menu.list[i][this.menu.index] == item) {
|
||||
item = this.menu.list[i];
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// item is action
|
||||
this.label.innerHTML = this.layout.text.formatter ? this.layout.text.formatter(item[this.layout.text.field], item) : item[this.layout.text.field];
|
||||
this.selected = item;
|
||||
|
||||
this._emit("select", item);
|
||||
return this;
|
||||
}
|
||||
|
||||
show() {
|
||||
return this.setVisible(true);
|
||||
}
|
||||
|
||||
hide() {
|
||||
return this.setVisible(false);
|
||||
}
|
||||
|
||||
_computeMenuOuterWidth() {
|
||||
return this.menu.offsetWidth - this.menu.clientWidth;
|
||||
}
|
||||
|
||||
setVisible(visible) {
|
||||
if (visible) {
|
||||
this.response.start = 0;
|
||||
this._emit("query", null, this.response);
|
||||
|
||||
// show menu
|
||||
var rect = this.el.getBoundingClientRect();
|
||||
this.menu.el.style.width = (rect.width - this._computeMenuOuterWidth()) + "px";
|
||||
this.menu.setVisible(true, rect.left, rect.top + rect.height);
|
||||
}
|
||||
else {
|
||||
this.menu.hide();
|
||||
}
|
||||
|
||||
return this;
|
||||
}
|
||||
});
|
||||
20
src/UI/Tab.js
Normal file
20
src/UI/Tab.js
Normal file
@ -0,0 +1,20 @@
|
||||
import { IUI } from "../Core/IUI.js";
|
||||
import IUIElement from "../Core/IUIElement.js";
|
||||
|
||||
export default IUI.module(class Tab extends IUIElement {
|
||||
constructor(properties) {
|
||||
super(properties);
|
||||
}
|
||||
|
||||
create() {
|
||||
|
||||
}
|
||||
|
||||
get title() {
|
||||
return this.getAttribute("title");
|
||||
}
|
||||
|
||||
get selected() {
|
||||
return this.hasAttribute("selected");// == "1" || selected == "yes" || selected == "true");
|
||||
}
|
||||
});
|
||||
207
src/UI/TabbedTarget.js
Normal file
207
src/UI/TabbedTarget.js
Normal file
@ -0,0 +1,207 @@
|
||||
|
||||
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 {
|
||||
|
||||
constructor() {
|
||||
super({
|
||||
selected: null,
|
||||
list: [],
|
||||
_y: 0,
|
||||
_x: 0,
|
||||
auto: true,
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
create() {
|
||||
var self = this;
|
||||
|
||||
this._register("select");
|
||||
|
||||
|
||||
this._bar = document.createElement("div");
|
||||
this._bar.classList.add(this.cssClass + "-bar");
|
||||
|
||||
this._ext = document.createElement("span");
|
||||
this._ext.className = this.cssClass + "-bar-ext";
|
||||
this._bar.appendChild(this._ext);
|
||||
|
||||
|
||||
|
||||
//this.insertAdjacentElement("afterBegin", this._bar);
|
||||
|
||||
this._body = document.createElement("div");
|
||||
this._body.className = this.cssClass + "-body";
|
||||
|
||||
this.appendChild(this._bar);
|
||||
this.appendChild(this._body);
|
||||
|
||||
|
||||
|
||||
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]);
|
||||
|
||||
this._observer = new ResizeObserver(x => {
|
||||
self._body.style.height = x[0].target.offsetHeight + "px";// x[0].contentRect.height + "px";
|
||||
});
|
||||
|
||||
items.map(x => self.add(x));
|
||||
|
||||
|
||||
this.addEventListener("touchstart", function (e) {
|
||||
|
||||
var x = e.target;
|
||||
do {
|
||||
if (x == self)
|
||||
break;
|
||||
var sy = window.getComputedStyle(x)["overflow-x"];
|
||||
if (x.scrollWidth > x.clientWidth && (sy == "scroll" || sy == "auto"))
|
||||
return;
|
||||
} while (x = x.parentElement)
|
||||
|
||||
self._x = e.originalEvent ? e.originalEvent.touches[0].clientX : e.touches[0].clientX;
|
||||
self._y = e.originalEvent ? e.originalEvent.touches[0].clientY : e.touches[0].clientY;
|
||||
}, { passive: true });
|
||||
|
||||
this.addEventListener("touchmove", function (e) {
|
||||
if (!self._x || !self._y) {
|
||||
return;
|
||||
}
|
||||
|
||||
var xUp = e.originalEvent ? e.originalEvent.touches[0].clientX : e.touches[0].clientX;
|
||||
var yUp = e.originalEvent ? e.originalEvent.touches[0].clientY : e.touches[0].clientY;
|
||||
var xDiff = document.dir == "rtl" ? xUp - self._x : self._x - xUp;
|
||||
var yDiff = self._y - yUp;
|
||||
|
||||
|
||||
var index = self.list.indexOf(self.selected);
|
||||
|
||||
if (Math.abs(xDiff) > Math.abs(yDiff)) {/*most significant*/
|
||||
if (xDiff > 0) {
|
||||
if (index < self.list.length - 1) {
|
||||
self.select(self.list[index + 1]);
|
||||
//self.selected.scrollIntoView();
|
||||
}
|
||||
/* left swipe */
|
||||
} else {
|
||||
|
||||
if (index > 0)
|
||||
self.select(self.list[index - 1]);
|
||||
|
||||
/* right swipe */
|
||||
}
|
||||
} else {
|
||||
if (yDiff > 0) {
|
||||
/* up swipe */
|
||||
} else {
|
||||
/* down swipe */
|
||||
}
|
||||
}
|
||||
/* reset values */
|
||||
self._x = null;
|
||||
self._y = null;
|
||||
|
||||
}, { passive: true });
|
||||
}
|
||||
|
||||
created() {
|
||||
//this._updateSize();
|
||||
}
|
||||
|
||||
add(item) {
|
||||
|
||||
var label = document.createElement("i-check");
|
||||
label.innerHTML = item.title;
|
||||
|
||||
this._ext.insertAdjacentElement("beforebegin", label);
|
||||
|
||||
label.className = this.cssClass + "-button";
|
||||
|
||||
item.classList.add(this.cssClass + "-content");
|
||||
label.content = item;
|
||||
item.label = label;
|
||||
|
||||
this._body.append(item);
|
||||
|
||||
|
||||
//this._bar.appendChild(label);
|
||||
//this._bar.insertAdjacentElement("afterBegin", label);
|
||||
|
||||
this.list.push(item);
|
||||
var self = this;
|
||||
label.on("check", function (v) {
|
||||
//if (v && !self._neglect)
|
||||
self.select(item);
|
||||
});
|
||||
|
||||
//this._updateSize();
|
||||
//this.updateBindings();
|
||||
|
||||
if (item.selected)
|
||||
this.select(item);
|
||||
|
||||
|
||||
return this;
|
||||
}
|
||||
|
||||
//_updateSize() {
|
||||
// for (var i = 0; i < this._body.children.length; i++) {
|
||||
// if (this._body.clientHeight < this._body.children[i].offsetHeight) {
|
||||
// this._body.style.height = this._body.children[i].offsetHeight + "px";
|
||||
// }
|
||||
// }
|
||||
//}
|
||||
|
||||
select(item) {
|
||||
var tab;
|
||||
if (item instanceof Tab)
|
||||
tab = item;
|
||||
else if (typeof o === 'string' || o instanceof String)
|
||||
for (var i = 0; i < this.list.length; i++)
|
||||
if (this.list[i].id == item) {
|
||||
tab = item;
|
||||
break;
|
||||
}
|
||||
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);
|
||||
else {
|
||||
i.classList.remove(self.cssClass + "-content-active");
|
||||
i.label.check(false);// set(false, false);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
//this._neglect = false;
|
||||
tab.classList.add(this.cssClass + "-content-active");
|
||||
|
||||
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;
|
||||
|
||||
|
||||
this._emit("select", tab);
|
||||
return this;
|
||||
}
|
||||
|
||||
});
|
||||
1422
src/UI/Table.js
Normal file
1422
src/UI/Table.js
Normal file
File diff suppressed because it is too large
Load Diff
207
src/UI/Tabs.js
Normal file
207
src/UI/Tabs.js
Normal file
@ -0,0 +1,207 @@
|
||||
|
||||
import IUIElement from "../Core/IUIElement.js";
|
||||
import Tab from "./Tab.js";
|
||||
import { IUI } from "../Core/IUI.js";
|
||||
|
||||
export default IUI.module(class Tabs extends IUIElement {
|
||||
|
||||
constructor() {
|
||||
super({
|
||||
selected: null,
|
||||
list: [],
|
||||
_y: 0,
|
||||
_x: 0,
|
||||
auto: true,
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
create()
|
||||
{
|
||||
var self = this;
|
||||
|
||||
this._register("select");
|
||||
|
||||
|
||||
this._bar = document.createElement("div");
|
||||
this._bar.classList.add(this.cssClass + "-bar");
|
||||
|
||||
this._ext = document.createElement("span");
|
||||
this._ext.className = this.cssClass + "-bar-ext";
|
||||
this._bar.appendChild(this._ext);
|
||||
|
||||
|
||||
|
||||
//this.insertAdjacentElement("afterBegin", this._bar);
|
||||
|
||||
this._body = document.createElement("div");
|
||||
this._body.className = this.cssClass + "-body";
|
||||
|
||||
this.appendChild(this._bar);
|
||||
this.appendChild(this._body);
|
||||
|
||||
|
||||
|
||||
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]);
|
||||
|
||||
this._observer = new ResizeObserver(x => {
|
||||
self._body.style.height = x[0].target.offsetHeight + "px";// x[0].contentRect.height + "px";
|
||||
});
|
||||
|
||||
items.map(x => self.add(x));
|
||||
|
||||
|
||||
this.addEventListener("touchstart", function (e) {
|
||||
|
||||
var x = e.target;
|
||||
do {
|
||||
if (x == self)
|
||||
break;
|
||||
var sy = window.getComputedStyle(x)["overflow-x"];
|
||||
if (x.scrollWidth > x.clientWidth && (sy == "scroll" || sy == "auto"))
|
||||
return;
|
||||
} while (x = x.parentElement)
|
||||
|
||||
self._x = e.originalEvent ? e.originalEvent.touches[0].clientX : e.touches[0].clientX;
|
||||
self._y = e.originalEvent ? e.originalEvent.touches[0].clientY : e.touches[0].clientY;
|
||||
}, { passive: true });
|
||||
|
||||
this.addEventListener("touchmove", function (e) {
|
||||
if (!self._x || !self._y) {
|
||||
return;
|
||||
}
|
||||
|
||||
var xUp = e.originalEvent ? e.originalEvent.touches[0].clientX : e.touches[0].clientX;
|
||||
var yUp = e.originalEvent ? e.originalEvent.touches[0].clientY : e.touches[0].clientY;
|
||||
var xDiff = document.dir == "rtl" ? xUp - self._x : self._x - xUp;
|
||||
var yDiff = self._y - yUp;
|
||||
|
||||
|
||||
var index = self.list.indexOf(self.selected);
|
||||
|
||||
if (Math.abs(xDiff) > Math.abs(yDiff)) {/*most significant*/
|
||||
if (xDiff > 0) {
|
||||
if (index < self.list.length - 1) {
|
||||
self.select(self.list[index + 1]);
|
||||
//self.selected.scrollIntoView();
|
||||
}
|
||||
/* left swipe */
|
||||
} else {
|
||||
|
||||
if (index > 0)
|
||||
self.select(self.list[index - 1]);
|
||||
|
||||
/* right swipe */
|
||||
}
|
||||
} else {
|
||||
if (yDiff > 0) {
|
||||
/* up swipe */
|
||||
} else {
|
||||
/* down swipe */
|
||||
}
|
||||
}
|
||||
/* reset values */
|
||||
self._x = null;
|
||||
self._y = null;
|
||||
|
||||
}, { passive: true });
|
||||
}
|
||||
|
||||
created() {
|
||||
//this._updateSize();
|
||||
}
|
||||
|
||||
add(item) {
|
||||
|
||||
var label = document.createElement("i-check");
|
||||
label.innerHTML = item.title;
|
||||
|
||||
this._ext.insertAdjacentElement("beforebegin", label);
|
||||
|
||||
label.className = this.cssClass + "-button";
|
||||
|
||||
item.classList.add(this.cssClass + "-content");
|
||||
label.content = item;
|
||||
item.label = label;
|
||||
|
||||
this._body.append(item);
|
||||
|
||||
|
||||
//this._bar.appendChild(label);
|
||||
//this._bar.insertAdjacentElement("afterBegin", label);
|
||||
|
||||
this.list.push(item);
|
||||
var self = this;
|
||||
label.on("check", function (v) {
|
||||
//if (v && !self._neglect)
|
||||
self.select(item);
|
||||
});
|
||||
|
||||
//this._updateSize();
|
||||
//this.updateBindings();
|
||||
|
||||
if (item.selected)
|
||||
this.select(item);
|
||||
|
||||
|
||||
return this;
|
||||
}
|
||||
|
||||
//_updateSize() {
|
||||
// for (var i = 0; i < this._body.children.length; i++) {
|
||||
// if (this._body.clientHeight < this._body.children[i].offsetHeight) {
|
||||
// this._body.style.height = this._body.children[i].offsetHeight + "px";
|
||||
// }
|
||||
// }
|
||||
//}
|
||||
|
||||
select(item) {
|
||||
var tab;
|
||||
if (item instanceof Tab)
|
||||
tab = item;
|
||||
else if (typeof o === 'string' || o instanceof String)
|
||||
for (var i = 0; i < this.list.length; i++)
|
||||
if (this.list[i].id == item) {
|
||||
tab = item;
|
||||
break;
|
||||
}
|
||||
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);
|
||||
else {
|
||||
i.classList.remove(self.cssClass + "-content-active");
|
||||
i.label.check(false);// set(false, false);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
//this._neglect = false;
|
||||
tab.classList.add(this.cssClass + "-content-active");
|
||||
|
||||
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;
|
||||
|
||||
|
||||
this._emit("select", tab);
|
||||
return this;
|
||||
}
|
||||
|
||||
});
|
||||
314
src/UI/Window.js
Normal file
314
src/UI/Window.js
Normal file
@ -0,0 +1,314 @@
|
||||
import IUIElement from "../Core/IUIElement.js";
|
||||
import { IUI } from "../Core/IUI.js";
|
||||
|
||||
export default IUI.module(class IUIWindow extends IUIElement {
|
||||
constructor() {
|
||||
super({ closeable: true, draggable: false, focus: false });
|
||||
|
||||
this._register("resize");
|
||||
this._register("move");
|
||||
this._register("close");
|
||||
|
||||
this._uid = "d:" + Math.random().toString(36).substring(2);
|
||||
|
||||
}
|
||||
|
||||
static moduleName = "window";
|
||||
|
||||
create() {
|
||||
var self = this;
|
||||
|
||||
this.tabIndex = 0;
|
||||
|
||||
// create header
|
||||
this._header = document.createElement("div");
|
||||
this._header.className = this.cssClass + "-header";
|
||||
|
||||
if (this.draggable)
|
||||
this._header.setAttribute("draggable", true);
|
||||
|
||||
var f = this.getElementsByClassName(this.cssClass + "-footer");
|
||||
this._footer = f.length > 0 ? f[0] : null;
|
||||
|
||||
var b = this.getElementsByClassName(this.cssClass + "-body");
|
||||
//this.body = b.length > 0 ? b[0]: null;
|
||||
|
||||
if (b.length == 0) {
|
||||
this._body = document.createElement("div");
|
||||
this._body.className = this.cssClass + "-body";
|
||||
|
||||
while (this.children.length > (this._footer == null ? 0 : 1))
|
||||
this._body.appendChild(this.children[0]);
|
||||
|
||||
this.insertAdjacentElement("afterBegin", this._body);
|
||||
|
||||
//super.updateBindings();
|
||||
}
|
||||
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);
|
||||
}
|
||||
|
||||
this._caption = document.createElement("div");
|
||||
this._caption.className = this.cssClass + "-caption";
|
||||
this._caption.innerHTML = this.caption;
|
||||
|
||||
this._subtitle = document.createElement("div");
|
||||
this._subtitle.className = this.cssClass + "-subtitle";
|
||||
this._subtitle.innerHTML = this.subtitle;
|
||||
|
||||
this._tools = document.createElement("div");
|
||||
this._tools.className = this.cssClass + "-tools";
|
||||
|
||||
this._header.appendChild(this._caption);
|
||||
this._header.appendChild(this._subtitle);
|
||||
this._header.appendChild(this._tools);
|
||||
|
||||
if (this.closeable) {
|
||||
this._close = document.createElement("div");
|
||||
this._close.className = this.cssClass + "-tools-close button";
|
||||
this._close.addEventListener("click", function () {
|
||||
self._emit("close");
|
||||
});
|
||||
}
|
||||
|
||||
//this.addEventListener("mousedown", function (e) {
|
||||
// self.setFocus(true);
|
||||
//});
|
||||
|
||||
this.insertAdjacentElement("afterBegin", this._header);
|
||||
}
|
||||
|
||||
setHeaderVisible(value) {
|
||||
this._header.style.display = value ? "" : "none";
|
||||
//this._updateSize();
|
||||
}
|
||||
|
||||
setCloseVisible(value) {
|
||||
if (this.closeable)
|
||||
this._close.style.display = value ? "" : "none";
|
||||
}
|
||||
|
||||
get icon() {
|
||||
return this.getAttribute("icon");
|
||||
}
|
||||
/*
|
||||
setFocus(v) {
|
||||
this.focus = v;
|
||||
|
||||
var self = this;
|
||||
|
||||
if (v) {
|
||||
this.classList.add(this.cssClass + "-active");
|
||||
|
||||
return;
|
||||
var last = IUI._nav_list[IUI._nav_list.length - 1];
|
||||
|
||||
if (last && last != this) {
|
||||
last.classList.remove(this.cssClass + "-active");
|
||||
last.focus = false;
|
||||
}
|
||||
|
||||
if (last != this) {
|
||||
if (window.location.hash != "#" + this._uid) {
|
||||
IUI._nav_ignore = true;
|
||||
window.location.hash = this._uid;
|
||||
//window.location.replace("#" + this._uid);
|
||||
}
|
||||
}
|
||||
|
||||
var i = IUI._nav_list.indexOf(this);
|
||||
if (i > -1)
|
||||
IUI._nav_list.splice(i, 1);
|
||||
|
||||
IUI._nav_list.push(this);
|
||||
|
||||
}
|
||||
else {
|
||||
var last = IUI._nav_list[IUI._nav_list.length - 1];
|
||||
if (last == this) {
|
||||
IUI._nav_list.pop();
|
||||
last = IUI._nav_list.pop();
|
||||
|
||||
IUI._nav_list.push(this);
|
||||
|
||||
|
||||
if (last) {
|
||||
last.classList.add(this.cssClass + "-active");
|
||||
last.focus = true;
|
||||
IUI._nav_list.push(last);
|
||||
if (window.location.hash != "#" + last._uid) {
|
||||
IUI._nav_ignore = true;
|
||||
window.location.hash = last._uid;
|
||||
//window.location.replace("#" + last._uid);
|
||||
}
|
||||
}
|
||||
else {
|
||||
if (window.location.hash != "#") {
|
||||
IUI._nav_ignore = true;
|
||||
var x = window.scrollX;
|
||||
var y = window.scrollY;
|
||||
|
||||
window.location.hash = "#";
|
||||
|
||||
window.scrollTo(x, y);
|
||||
//window.location.replace("#");
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
this.classList.remove(this.cssClass + "-active");
|
||||
|
||||
}
|
||||
|
||||
return this;
|
||||
}
|
||||
*/
|
||||
|
||||
|
||||
show() {
|
||||
//this.setFocus(true);
|
||||
return this;
|
||||
}
|
||||
|
||||
move(x, y) {
|
||||
this.style.left = x + "px";
|
||||
this.style.top = y + "px";
|
||||
this._emit("move", x, y);
|
||||
return this;
|
||||
}
|
||||
|
||||
resize(width, height) {
|
||||
this.style.width = width + "px";
|
||||
this.style.height = height + "px";
|
||||
|
||||
this._updateSize();
|
||||
|
||||
this._emit("resize", this.clientWidth, this.clientHeight);
|
||||
|
||||
return this;
|
||||
}
|
||||
|
||||
_updateSize() {
|
||||
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";
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
// handle windows exceeding document size
|
||||
if (this.clientHeight > document.body.clientHeight) {
|
||||
this.style.height = document.body.clientHeight + "px";
|
||||
if (this._footer)
|
||||
this._body.style.height = (this.clientHeight - this._footer.clientHeight - this._header.clientHeight) + "px";
|
||||
else
|
||||
this._body.style.height = (this.clientHeight - this._header.clientHeight) + "px";
|
||||
}
|
||||
|
||||
|
||||
if (this.clientWidth > document.body.clientWidth)
|
||||
this.style.width = document.body.clientWidth + 1 + "px";
|
||||
|
||||
}
|
||||
|
||||
|
||||
get caption() {
|
||||
return this.getAttribute("caption");
|
||||
}
|
||||
|
||||
set caption(value) {
|
||||
this._caption.innerHTML = value;
|
||||
this.setAttribute("caption", value);
|
||||
}
|
||||
|
||||
|
||||
get subtitle() {
|
||||
return this.getAttribute("subtitle");
|
||||
}
|
||||
|
||||
set subtitle(value) {
|
||||
this._subtitle.innerHTML = value;
|
||||
this.setAttribute("subtitle", value);
|
||||
}
|
||||
|
||||
|
||||
});
|
||||
|
||||
/*
|
||||
IUI._nav_list = [];
|
||||
|
||||
window.addEventListener("hashchange", function(e){
|
||||
|
||||
if (IUI._nav_ignore)
|
||||
{
|
||||
IUI._nav_ignore = false;
|
||||
return;
|
||||
}
|
||||
|
||||
if (IUI.responsive)
|
||||
{
|
||||
var oldHash = e.oldURL.split("#");
|
||||
if (oldHash.length == 2)
|
||||
{
|
||||
var hash = oldHash[1];
|
||||
var dialogs = IUI.registry.filter(function(o){ return ( o instanceof IUIWindow); });
|
||||
dialogs.forEach(function(dlg){
|
||||
if (dlg._uid == hash)
|
||||
dlg.hide();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
var newHash = e.newURL.split("#");
|
||||
if (newHash.length == 2)
|
||||
{
|
||||
var hash = newHash[1];
|
||||
|
||||
if (hash == "")
|
||||
{
|
||||
var dialogs = IUI.registry.filter(function(o){ return ( o instanceof IUIDialog); });
|
||||
dialogs.forEach(function(d){
|
||||
d.hide();
|
||||
});
|
||||
|
||||
IUI._nav_list = [];
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
var dialogs = IUI.registry.filter(function(o){ return ( o instanceof IUIWindow); });
|
||||
|
||||
dialogs.forEach(function(dlg){
|
||||
if (dlg._uid == hash)
|
||||
dlg.setFocus(true);
|
||||
});
|
||||
}
|
||||
});
|
||||
*/
|
||||
62
src/iui.js
Normal file
62
src/iui.js
Normal file
@ -0,0 +1,62 @@
|
||||
import {IUI, iui} from "./Core/IUI.js";
|
||||
|
||||
import "./Core/IUIElement.js";
|
||||
import './Core/App.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 './UI/Table.js';
|
||||
|
||||
import './UI/Check.js';
|
||||
import './UI/Button.js';
|
||||
import './UI/Navbar.js';
|
||||
|
||||
import './UI/DateTimePicker.js';
|
||||
|
||||
import './Data/Layout.js';
|
||||
import './Data/Field.js';
|
||||
|
||||
import './UI/Background.js';
|
||||
import './UI/Menu.js';
|
||||
import './Data/TableRow.js';
|
||||
|
||||
import './UI/Select.js';
|
||||
|
||||
import './UI/DropDown.js';
|
||||
import './UI/Grid.js';
|
||||
|
||||
|
||||
window.addEventListener("beforeprint", (e)=>{
|
||||
let viewRoute = router.current.viewRoute;
|
||||
viewRoute.style.height = "auto";
|
||||
router.style.height = viewRoute.clientHeight + "px";
|
||||
});
|
||||
|
||||
window.addEventListener("afterprint", (e)=>{
|
||||
let viewRoute = router.current.viewRoute;
|
||||
viewRoute.style.height = "";
|
||||
router.style.height = "";
|
||||
});
|
||||
|
||||
window.addEventListener("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;
|
||||
Reference in New Issue
Block a user