mirror of
https://github.com/esiur/iui.git
synced 2026-04-04 06:58:22 +00:00
Add the ability to specify the router base
This commit is contained in:
Mohammed Salman
@@ -1,14 +1,13 @@
|
||||
import IUIElement from "../Core/IUIElement.js";
|
||||
|
||||
export default IUI.module(class DataList extends IUIElement
|
||||
{
|
||||
constructor(properties)
|
||||
{
|
||||
super(properties);
|
||||
}
|
||||
|
||||
create()
|
||||
{
|
||||
this.style.display = "none";
|
||||
}
|
||||
});
|
||||
export default IUI.module(
|
||||
class DataList extends IUIElement {
|
||||
constructor(properties) {
|
||||
super(properties);
|
||||
}
|
||||
|
||||
create() {
|
||||
this.style.display = "none";
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
@@ -1,62 +1,56 @@
|
||||
import IUIElement from "../Core/IUIElement.js";
|
||||
import { IUI } from "../Core/IUI.js";
|
||||
|
||||
|
||||
export default IUI.module(class Field extends HTMLElement
|
||||
{
|
||||
constructor()
|
||||
{
|
||||
super();
|
||||
}
|
||||
|
||||
static get moduleName(){
|
||||
return this.name.toLowerCase();
|
||||
export default IUI.module(
|
||||
class Field extends HTMLElement {
|
||||
constructor() {
|
||||
super();
|
||||
}
|
||||
|
||||
create()
|
||||
{
|
||||
// if (this.formatter === undefined) {
|
||||
// // load script
|
||||
// for (var i = 0; i < this.children.length; i++)
|
||||
// if (this.children[i] instanceof HTMLScriptElement) {
|
||||
// //this.formatter = new Function this.children[i].
|
||||
// }
|
||||
// }
|
||||
static get moduleName() {
|
||||
return this.name.toLowerCase();
|
||||
}
|
||||
|
||||
//this.style.display = "none";
|
||||
create() {
|
||||
// if (this.formatter === undefined) {
|
||||
// // load script
|
||||
// for (var i = 0; i < this.children.length; i++)
|
||||
// if (this.children[i] instanceof HTMLScriptElement) {
|
||||
// //this.formatter = new Function this.children[i].
|
||||
// }
|
||||
// }
|
||||
//this.style.display = "none";
|
||||
}
|
||||
|
||||
get name() {
|
||||
return this.getAttribute("name");
|
||||
return this.getAttribute("name");
|
||||
}
|
||||
|
||||
set name(value) {
|
||||
this.setAttribute("name", value);
|
||||
this.setAttribute("name", value);
|
||||
}
|
||||
|
||||
serialize(tag) {
|
||||
let template = document.createElement("template");
|
||||
let node = document.createElement(tag ?? "div");
|
||||
let width = null,
|
||||
name = null,
|
||||
type = null;
|
||||
|
||||
let template = document.createElement("template");
|
||||
let node = document.createElement(tag ?? "div");
|
||||
let width = null, name = null, type = null;
|
||||
// copy attributes
|
||||
for (var i = 0; i < this.attributes.length; i++) {
|
||||
let attr = this.attributes[i];
|
||||
if (attr.name == "width") width = attr.value;
|
||||
else if (attr.name == "name") name = attr.value;
|
||||
else if (attr.name == "type") type = attr.value;
|
||||
else node.setAttribute(attr.name, attr.value);
|
||||
}
|
||||
|
||||
// copy attributes
|
||||
for (var i = 0; i < this.attributes.length; i++) {
|
||||
let attr = this.attributes[i];
|
||||
if (attr.name == "width")
|
||||
width = attr.value;
|
||||
else if (attr.name == "name")
|
||||
name = attr.value;
|
||||
else if (attr.name == "type")
|
||||
type = attr.value;
|
||||
else
|
||||
node.setAttribute(attr.name, attr.value);
|
||||
}
|
||||
// copy html
|
||||
|
||||
// copy html
|
||||
node.innerHTML = this.innerHTML;
|
||||
|
||||
node.innerHTML = this.innerHTML;
|
||||
|
||||
return { node, width, name, type };
|
||||
return { node, width, name, type };
|
||||
}
|
||||
});
|
||||
}
|
||||
);
|
||||
|
||||
@@ -2,70 +2,62 @@
|
||||
import { IUI } from "../Core/IUI.js";
|
||||
import Modifiable from "./Modifiable.js";
|
||||
|
||||
export default IUI.module(class Form extends IUIElement {
|
||||
export default IUI.module(
|
||||
class Form extends IUIElement {
|
||||
constructor() {
|
||||
super();
|
||||
super();
|
||||
}
|
||||
|
||||
static _copy(val){
|
||||
if (typeof val === 'object' && val !== null)
|
||||
{
|
||||
let rt = {};
|
||||
for(var i in val)
|
||||
if (val[i] instanceof Array)
|
||||
// copy array
|
||||
rt[i] = [...val[i]];
|
||||
else
|
||||
rt[i] = val[i];
|
||||
static _copy(val) {
|
||||
if (typeof val === "object" && val !== null) {
|
||||
let rt = {};
|
||||
for (var i in val)
|
||||
if (val[i] instanceof Array)
|
||||
// copy array
|
||||
rt[i] = [...val[i]];
|
||||
else rt[i] = val[i];
|
||||
|
||||
return rt;
|
||||
}
|
||||
else
|
||||
return val;
|
||||
return rt;
|
||||
} else return val;
|
||||
}
|
||||
|
||||
async create() {
|
||||
//var elements = this.querySelectorAll("*[field]");
|
||||
//for (var i = 0; i < elements.length; i++)
|
||||
// this.form[elements[i].getAttribute("field")] = elements[i];
|
||||
//var elements = this.querySelectorAll("*[field]");
|
||||
//for (var i = 0; i < elements.length; i++)
|
||||
// this.form[elements[i].getAttribute("field")] = elements[i];
|
||||
}
|
||||
|
||||
async setData(value) {
|
||||
this.original = value;
|
||||
//var copy = {};
|
||||
//Object.assign(copy, value);
|
||||
super.setData(new Modifiable(this.original));// Form._copy(this.original));
|
||||
//super.setData({ ...this.original });
|
||||
this.original = value;
|
||||
//var copy = {};
|
||||
//Object.assign(copy, value);
|
||||
super.setData(new Modifiable(this.original)); // Form._copy(this.original));
|
||||
//super.setData({ ...this.original });
|
||||
}
|
||||
|
||||
|
||||
async reset() {
|
||||
//super.setData({ ...this.original });
|
||||
super.setData(new Modifiable(this.original));//Form._copy(this.original));
|
||||
return this;
|
||||
//super.setData({ ...this.original });
|
||||
super.setData(new Modifiable(this.original)); //Form._copy(this.original));
|
||||
return this;
|
||||
}
|
||||
|
||||
|
||||
|
||||
get diff() {
|
||||
return this._data._diff;
|
||||
|
||||
return this._data._diff;
|
||||
if (this.original == null) return this._data;
|
||||
|
||||
if (this.original == null)
|
||||
return this._data;
|
||||
var rt = {};
|
||||
for (var i in this._data)
|
||||
if (this._data[i] != this.original[i]) {
|
||||
if (
|
||||
this._data[i] instanceof Array &&
|
||||
Form._areEqual(this._data[i], this.original[i])
|
||||
)
|
||||
continue;
|
||||
else rt[i] = this._data[i];
|
||||
}
|
||||
|
||||
|
||||
var rt = {};
|
||||
for (var i in this._data)
|
||||
if (this._data[i] != this.original[i])
|
||||
{
|
||||
if (this._data[i] instanceof Array && Form._areEqual(this._data[i], this.original[i]))
|
||||
continue;
|
||||
else
|
||||
rt[i] = this._data[i];
|
||||
}
|
||||
|
||||
return rt;
|
||||
return rt;
|
||||
}
|
||||
|
||||
});
|
||||
}
|
||||
);
|
||||
|
||||
@@ -2,114 +2,110 @@ import IUIElement from "../Core/IUIElement.js";
|
||||
import { IUI } from "../Core/IUI.js";
|
||||
import RefsCollection from "../Core/RefsCollection.js";
|
||||
|
||||
export default IUI.module(class Include extends IUIElement
|
||||
{
|
||||
constructor()
|
||||
{
|
||||
super();
|
||||
this.refs = new RefsCollection();
|
||||
export default IUI.module(
|
||||
class Include extends IUIElement {
|
||||
constructor() {
|
||||
super();
|
||||
this.refs = new RefsCollection();
|
||||
}
|
||||
|
||||
get src(){
|
||||
return this.getAttribute("src");
|
||||
get src() {
|
||||
return this.getAttribute("src");
|
||||
}
|
||||
|
||||
set src(value){
|
||||
this.setAttribute("src", value);
|
||||
this._load(value);
|
||||
set src(value) {
|
||||
this.setAttribute("src", value);
|
||||
this._load(value);
|
||||
}
|
||||
|
||||
|
||||
get scope() {
|
||||
return {view: this, refs: this.refs};
|
||||
return { view: this, refs: this.refs };
|
||||
}
|
||||
|
||||
async _load(url)
|
||||
{
|
||||
if (this._loading)
|
||||
return;
|
||||
async _load(url) {
|
||||
if (this._loading) return;
|
||||
|
||||
this._loading = true;
|
||||
this._loading = true;
|
||||
|
||||
let src = url.replace(/^\/+|\/+$/g, '');
|
||||
let src = url.replace(/^\/+|\/+$/g, "");
|
||||
|
||||
this.classList.add(this.cssClass + "-loading");
|
||||
this.classList.add(this.cssClass + "-loading");
|
||||
|
||||
let x = await fetch(src);
|
||||
let x = await fetch(src);
|
||||
|
||||
if (x.status == 200)
|
||||
{
|
||||
let t = await x.text();
|
||||
if (x.status == 200) {
|
||||
let t = await x.text();
|
||||
|
||||
this.innerHTML = t;
|
||||
this.innerHTML = t;
|
||||
|
||||
//let xeval = (code) => eval(code);
|
||||
//let xeval = (code) => eval(code);
|
||||
|
||||
if (window?.app?.loaded)
|
||||
{
|
||||
await IUI.create(this);
|
||||
IUI.bind(this, true, "include:" + src,
|
||||
IUI.extend(this._i__bindings.scope, this.scope, true));
|
||||
|
||||
this.refs._build();
|
||||
await IUI.created(this);
|
||||
await IUI.render(this, this._data, true);
|
||||
}
|
||||
if (window?.app?.loaded) {
|
||||
await IUI.create(this);
|
||||
IUI.bind(
|
||||
this,
|
||||
true,
|
||||
"include:" + src,
|
||||
IUI.extend(this._i__bindings.scope, this.scope, true)
|
||||
);
|
||||
|
||||
// // call create for the new elements
|
||||
// var newElements = this.querySelectorAll("*");
|
||||
// for (var i = 0; i < newElements.length; i++) {
|
||||
// var el = newElements[i];
|
||||
|
||||
// // set route for all elements
|
||||
// //newElements[i].route = this.route;
|
||||
// el.route = this.route;
|
||||
// el.view = this;
|
||||
// if (el.hasAttribute("ref")) {
|
||||
// this.refs[el.getAttribute("ref")] = el;
|
||||
// }
|
||||
|
||||
// if (el instanceof HTMLScriptElement) {
|
||||
// // this because HTML parser don't evaluate script tag
|
||||
// let func = new Function("//# sourceURL=iui://" + src + "-" + Math.round(Math.random() * 10000) + "\r\n return " + el.text.trim());// "return " + el.text + ";");
|
||||
|
||||
// let rt = func.call(el.parentElement);
|
||||
|
||||
// //let rt = xeval.call(el.parentElement, "//# sourceURL=iui://" + src + Math.round(Math.random() * 10000) + "\r\n (" + el.text + ")");
|
||||
// if (typeof (rt) === "object") {
|
||||
// for (var k in rt)
|
||||
// el.parentElement[k] = rt[k];
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
this.refs._build();
|
||||
await IUI.created(this);
|
||||
await IUI.render(this, this._data, true);
|
||||
}
|
||||
|
||||
this.classList.remove(this.cssClass + "-loading");
|
||||
// // call create for the new elements
|
||||
// var newElements = this.querySelectorAll("*");
|
||||
// for (var i = 0; i < newElements.length; i++) {
|
||||
// var el = newElements[i];
|
||||
|
||||
// if (window?.app?.loaded)
|
||||
// {
|
||||
// await IUI.create(this);
|
||||
// await IUI.created(this);
|
||||
// // set route for all elements
|
||||
// //newElements[i].route = this.route;
|
||||
// el.route = this.route;
|
||||
// el.view = this;
|
||||
// if (el.hasAttribute("ref")) {
|
||||
// this.refs[el.getAttribute("ref")] = el;
|
||||
// }
|
||||
|
||||
// for(let i = 0; i < this.children.length; i++)
|
||||
// {
|
||||
// let el = this.children[i];
|
||||
// IUIElement._make_bindings(el);
|
||||
// await IUIElement._renderElement(el, el._data);
|
||||
// if (el instanceof HTMLScriptElement) {
|
||||
// // this because HTML parser don't evaluate script tag
|
||||
// let func = new Function("//# sourceURL=iui://" + src + "-" + Math.round(Math.random() * 10000) + "\r\n return " + el.text.trim());// "return " + el.text + ";");
|
||||
|
||||
// let rt = func.call(el.parentElement);
|
||||
|
||||
// //let rt = xeval.call(el.parentElement, "//# sourceURL=iui://" + src + Math.round(Math.random() * 10000) + "\r\n (" + el.text + ")");
|
||||
// if (typeof (rt) === "object") {
|
||||
// for (var k in rt)
|
||||
// el.parentElement[k] = rt[k];
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
}
|
||||
|
||||
this._loading = false;
|
||||
this.classList.remove(this.cssClass + "-loading");
|
||||
|
||||
// if (window?.app?.loaded)
|
||||
// {
|
||||
// await IUI.create(this);
|
||||
// await IUI.created(this);
|
||||
|
||||
// for(let i = 0; i < this.children.length; i++)
|
||||
// {
|
||||
// let el = this.children[i];
|
||||
// IUIElement._make_bindings(el);
|
||||
// await IUIElement._renderElement(el, el._data);
|
||||
// }
|
||||
// }
|
||||
|
||||
this._loading = false;
|
||||
}
|
||||
|
||||
async create()
|
||||
{
|
||||
if (this.hasAttribute("src"))
|
||||
await this._load(this.getAttribute("src"));
|
||||
async create() {
|
||||
if (this.hasAttribute("src")) await this._load(this.getAttribute("src"));
|
||||
}
|
||||
|
||||
async created() {
|
||||
this.refs._build();
|
||||
this.refs._build();
|
||||
}
|
||||
|
||||
});
|
||||
}
|
||||
);
|
||||
|
||||
@@ -1,64 +1,60 @@
|
||||
import IUIElement from "../Core/IUIElement.js";
|
||||
import Field from './Field.js';
|
||||
import Field from "./Field.js";
|
||||
import { IUI } from "../Core/IUI.js";
|
||||
|
||||
export default IUI.module(class Layout extends HTMLElement// IUIElement
|
||||
{
|
||||
constructor()
|
||||
{
|
||||
super();
|
||||
}
|
||||
|
||||
static get moduleName(){
|
||||
return this.name.toLowerCase();
|
||||
export default IUI.module(
|
||||
class Layout extends HTMLElement {
|
||||
// IUIElement
|
||||
constructor() {
|
||||
super();
|
||||
}
|
||||
|
||||
//create()
|
||||
//{
|
||||
// for (var i = 0; i < this.children.length; i++)
|
||||
// if (this.children[i] instanceof Field) {
|
||||
// this[this.children[i].name] = this.children[i];
|
||||
// this.fields.push(this.children[i]);
|
||||
// }
|
||||
|
||||
// this.style.display = "none";
|
||||
//}
|
||||
|
||||
static getHTML(el, removeSelf = false) {
|
||||
for (var i = 0; i < el.children.length; i++)
|
||||
if (el.children[i] instanceof Layout) {
|
||||
let layout = el.children[i];
|
||||
let rt = layout.innerHTML;
|
||||
|
||||
if (removeSelf)
|
||||
el.removeChild(layout);
|
||||
return rt;
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
static get(el, tag, removeSelf = false, collection = false) {
|
||||
|
||||
for (var i = 0; i < el.children.length; i++)
|
||||
if (el.children[i] instanceof Layout) {
|
||||
let layout = el.children[i];
|
||||
let rt = collection ? {} : [];
|
||||
for (var j = 0; j < layout.children.length; j++) {
|
||||
if (layout.children[j] instanceof Field) {
|
||||
let fd = layout.children[j].serialize(tag);
|
||||
if (collection)
|
||||
rt[fd.name] = fd;
|
||||
else
|
||||
rt.push(fd);
|
||||
}
|
||||
}
|
||||
|
||||
if (removeSelf)
|
||||
layout.parentElement.removeChild(layout);
|
||||
return rt;
|
||||
}
|
||||
|
||||
return null;
|
||||
static get moduleName() {
|
||||
return this.name.toLowerCase();
|
||||
}
|
||||
});
|
||||
|
||||
//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;
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
@@ -1,139 +1,111 @@
|
||||
export default class Modifiable
|
||||
{
|
||||
static _copy(val){
|
||||
if (typeof val === 'object' && val !== null)
|
||||
{
|
||||
let rt = {};
|
||||
for(var i in val)
|
||||
if (val[i] instanceof Array)
|
||||
// copy array
|
||||
rt[i] = [...val[i]];
|
||||
else
|
||||
rt[i] = val[i];
|
||||
export default class Modifiable {
|
||||
static _copy(val) {
|
||||
if (typeof val === "object" && val !== null) {
|
||||
let rt = {};
|
||||
for (var i in val)
|
||||
if (val[i] instanceof Array)
|
||||
// copy array
|
||||
rt[i] = [...val[i]];
|
||||
else rt[i] = val[i];
|
||||
|
||||
return rt;
|
||||
}
|
||||
else
|
||||
return val;
|
||||
return rt;
|
||||
} else return val;
|
||||
}
|
||||
|
||||
// @TODO: Remove this when esiur adds suport to partially modified arrays with modified flag
|
||||
static _areEqual(ar1, ar2) {
|
||||
if (!(ar1 instanceof Array) || !(ar2 instanceof Array)) return false;
|
||||
|
||||
if (ar1.length != ar2.length) return false;
|
||||
|
||||
for (var i = 0; i < ar1.length; i++) if (ar1[i] != ar2[i]) return false;
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
constructor(original) {
|
||||
this._events = {};
|
||||
this._data = Modifiable._copy(original);
|
||||
this._original = original;
|
||||
|
||||
for (let p in this._data) {
|
||||
if (p.startsWith("_")) continue;
|
||||
|
||||
this._register(":" + p);
|
||||
|
||||
Object.defineProperty(this, p, {
|
||||
get() {
|
||||
return this._data[p];
|
||||
},
|
||||
set(value) {
|
||||
this._data[p] = value;
|
||||
this._emit(":" + p, value);
|
||||
},
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// @TODO: Remove this when esiur adds suport to partially modified arrays with modified flag
|
||||
static _areEqual(ar1, ar2)
|
||||
{
|
||||
if (!(ar1 instanceof Array) || !( ar2 instanceof Array))
|
||||
return false;
|
||||
get _diff() {
|
||||
if (this._original == null) return this._data;
|
||||
|
||||
if (ar1.length != ar2.length)
|
||||
return false;
|
||||
var rt = {};
|
||||
for (var i in this._data)
|
||||
if (this._data[i] != this._original[i]) {
|
||||
if (
|
||||
this._data[i] instanceof Array &&
|
||||
Modifiable._areEqual(this._data[i], this._original[i])
|
||||
)
|
||||
continue;
|
||||
else rt[i] = this._data[i];
|
||||
}
|
||||
|
||||
for(var i = 0; i < ar1.length; i++)
|
||||
if (ar1[i] != ar2[i])
|
||||
return false;
|
||||
|
||||
return true;
|
||||
}
|
||||
return rt;
|
||||
}
|
||||
|
||||
constructor(original){
|
||||
_register(event) {
|
||||
this._events[event] = [];
|
||||
}
|
||||
|
||||
this._events = {};
|
||||
this._data = Modifiable._copy(original);
|
||||
this._original = original;
|
||||
_emit(event) {
|
||||
event = event.toLowerCase();
|
||||
var args = Array.prototype.slice.call(arguments, 1);
|
||||
if (this._events[event])
|
||||
for (var i = 0; i < this._events[event].length; i++)
|
||||
if (this._events[event][i].f.apply(this._events[event][i].i, args))
|
||||
return true;
|
||||
|
||||
for(let p in this._data)
|
||||
{
|
||||
if (p.startsWith("_"))
|
||||
continue;
|
||||
return false;
|
||||
}
|
||||
|
||||
this._register(":" + p);
|
||||
_emitArgs(event, args) {
|
||||
event = event.toLowerCase();
|
||||
if (this._events[event])
|
||||
for (var i = 0; i < this._events[event].length; i++)
|
||||
if (this._events[event][i].f.apply(this._events[event][i].i, args))
|
||||
return true;
|
||||
return this;
|
||||
}
|
||||
|
||||
Object.defineProperty(this, p, {
|
||||
get() {
|
||||
return this._data[p];
|
||||
},
|
||||
set(value) {
|
||||
this._data[p] = value;
|
||||
this._emit(":" + p, value);
|
||||
}
|
||||
});
|
||||
}
|
||||
on(event, fn, issuer) {
|
||||
if (!(fn instanceof Function)) return this;
|
||||
|
||||
}
|
||||
event = event.toLowerCase();
|
||||
// add
|
||||
if (!this._events[event]) this._events[event] = [];
|
||||
this._events[event].push({ f: fn, i: issuer == null ? this : issuer });
|
||||
return this;
|
||||
}
|
||||
|
||||
|
||||
get _diff() {
|
||||
if (this._original == null)
|
||||
return this._data;
|
||||
|
||||
var rt = {};
|
||||
for (var i in this._data)
|
||||
if (this._data[i] != this._original[i])
|
||||
{
|
||||
if (this._data[i] instanceof Array && Modifiable._areEqual(this._data[i], this._original[i]))
|
||||
continue;
|
||||
else
|
||||
rt[i] = this._data[i];
|
||||
}
|
||||
|
||||
return rt;
|
||||
}
|
||||
|
||||
_register(event)
|
||||
{
|
||||
off(event, fn) {
|
||||
event = event.toLowerCase();
|
||||
if (this._events[event]) {
|
||||
if (fn) {
|
||||
for (var i = 0; i < this._events[event].length; i++)
|
||||
if (this._events[event][i].f == fn)
|
||||
this._events[event].splice(i--, 1);
|
||||
} else {
|
||||
this._events[event] = [];
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
_emit(event)
|
||||
{
|
||||
event = event.toLowerCase();
|
||||
var args = Array.prototype.slice.call(arguments, 1);
|
||||
if (this._events[event])
|
||||
for(var i = 0; i < this._events[event].length; i++)
|
||||
if (this._events[event][i].f.apply(this._events[event][i].i, args))
|
||||
return true;
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
_emitArgs(event, args)
|
||||
{
|
||||
event = event.toLowerCase();
|
||||
if (this._events[event])
|
||||
for(var i = 0; i < this._events[event].length; i++)
|
||||
if (this._events[event][i].f.apply(this._events[event][i].i, args))
|
||||
return true;
|
||||
return this;
|
||||
}
|
||||
|
||||
on(event, fn, issuer)
|
||||
{
|
||||
if (!(fn instanceof Function))
|
||||
return this;
|
||||
|
||||
event = event.toLowerCase();
|
||||
// add
|
||||
if (!this._events[event])
|
||||
this._events[event] = [];
|
||||
this._events[event].push({f: fn, i: issuer == null ? this: issuer});
|
||||
return this;
|
||||
}
|
||||
|
||||
|
||||
off(event, fn)
|
||||
{
|
||||
event = event.toLowerCase();
|
||||
if (this._events[event])
|
||||
{
|
||||
if (fn)
|
||||
{
|
||||
for(var i = 0; i < this._events[event].length; i++)
|
||||
if (this._events[event][i].f == fn)
|
||||
this._events[event].splice(i--, 1);
|
||||
}
|
||||
else
|
||||
{
|
||||
this._events[event] = [];
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,65 +1,56 @@
|
||||
import IUIElement from "../Core/IUIElement.js";
|
||||
import { IUI } from "../Core/IUI.js";
|
||||
|
||||
export default IUI.module(class Repeat extends IUIElement
|
||||
{
|
||||
constructor()
|
||||
{
|
||||
super({ _data: [] });
|
||||
this.list = [];
|
||||
export default IUI.module(
|
||||
class Repeat extends IUIElement {
|
||||
constructor() {
|
||||
super({ _data: [] });
|
||||
this.list = [];
|
||||
}
|
||||
|
||||
_isDirectDecedent(x){
|
||||
while(x = x.parentElement)
|
||||
if (x == this)
|
||||
return true;
|
||||
else if (x instanceof Repeat && x != this)
|
||||
return false;
|
||||
_isDirectDecedent(x) {
|
||||
while ((x = x.parentElement))
|
||||
if (x == this) return true;
|
||||
else if (x instanceof Repeat && x != this) return false;
|
||||
}
|
||||
|
||||
create()
|
||||
{
|
||||
//////////////
|
||||
/// Create ///
|
||||
//////////////
|
||||
|
||||
if (this._created)
|
||||
debugger;
|
||||
create() {
|
||||
//////////////
|
||||
/// Create ///
|
||||
//////////////
|
||||
|
||||
this._created = true;
|
||||
|
||||
// create template to speed avoid HTML parsing each time.
|
||||
let repeatables = this.querySelectorAll("*[repeat]");
|
||||
|
||||
repeatables = Array.from(repeatables).filter(x=>this._isDirectDecedent(x));
|
||||
if (this._created) debugger;
|
||||
|
||||
if (repeatables.length > 0)
|
||||
{
|
||||
this._created = true;
|
||||
|
||||
this._repeatNode = repeatables[0].cloneNode(true);
|
||||
this._container = repeatables[0].parentElement;
|
||||
this._beforeNode = repeatables[0].nextSibling;
|
||||
repeatables[0].parentElement.removeChild(repeatables[0]);
|
||||
}
|
||||
else
|
||||
{
|
||||
if (this.children.length > 0)
|
||||
this._repeatNode = this.children[0].cloneNode(true);
|
||||
else
|
||||
this._repeatNode = document.createElement("div");
|
||||
// create template to speed avoid HTML parsing each time.
|
||||
let repeatables = this.querySelectorAll("*[repeat]");
|
||||
|
||||
this.innerHTML = "";
|
||||
this._container = this;
|
||||
}
|
||||
repeatables = Array.from(repeatables).filter(x =>
|
||||
this._isDirectDecedent(x)
|
||||
);
|
||||
|
||||
if (repeatables.length > 0) {
|
||||
this._repeatNode = repeatables[0].cloneNode(true);
|
||||
this._container = repeatables[0].parentElement;
|
||||
this._beforeNode = repeatables[0].nextSibling;
|
||||
repeatables[0].parentElement.removeChild(repeatables[0]);
|
||||
} else {
|
||||
if (this.children.length > 0)
|
||||
this._repeatNode = this.children[0].cloneNode(true);
|
||||
else this._repeatNode = document.createElement("div");
|
||||
|
||||
// var newElements = this.querySelectorAll("*");
|
||||
// for (var i = 0; i < newElements.length; i++)
|
||||
// newElements[i].repeat = this;
|
||||
this.innerHTML = "";
|
||||
this._container = this;
|
||||
}
|
||||
|
||||
// var self = this;
|
||||
// var newElements = this.querySelectorAll("*");
|
||||
// for (var i = 0; i < newElements.length; i++)
|
||||
// newElements[i].repeat = this;
|
||||
|
||||
/*
|
||||
// var self = this;
|
||||
|
||||
/*
|
||||
this._repeatModified = function(propertyName, value)
|
||||
{
|
||||
|
||||
@@ -86,83 +77,72 @@ export default IUI.module(class Repeat extends IUIElement
|
||||
*/
|
||||
}
|
||||
|
||||
|
||||
clear()
|
||||
{
|
||||
for (var i = 0; i < this.list.length; i++)
|
||||
this._container.removeChild(this.list[i]);
|
||||
this.list = [];
|
||||
this._data = [];
|
||||
clear() {
|
||||
for (var i = 0; i < this.list.length; i++)
|
||||
this._container.removeChild(this.list[i]);
|
||||
this.list = [];
|
||||
this._data = [];
|
||||
}
|
||||
|
||||
|
||||
get data() {
|
||||
return super.data;
|
||||
return super.data;
|
||||
}
|
||||
|
||||
get length() {
|
||||
return this._data.length;
|
||||
return this._data.length;
|
||||
}
|
||||
|
||||
async setData(value) {
|
||||
// this to avoid interruption by an event
|
||||
if (this._busy) {
|
||||
console.log("Busy", this);
|
||||
return false;
|
||||
}
|
||||
|
||||
async setData(value)
|
||||
{
|
||||
|
||||
|
||||
// this to avoid interruption by an event
|
||||
if (this._busy)
|
||||
{
|
||||
console.log("Busy", this);
|
||||
return false;
|
||||
}
|
||||
this._busy = true;
|
||||
|
||||
this._busy = true;
|
||||
// clear
|
||||
this.clear();
|
||||
|
||||
|
||||
// clear
|
||||
this.clear();
|
||||
if (value?.toArray instanceof Function) value = value.toArray();
|
||||
else if (
|
||||
value == null ||
|
||||
!(value instanceof Array || value instanceof Int32Array)
|
||||
)
|
||||
value = [];
|
||||
|
||||
if (value?.toArray instanceof Function)
|
||||
value = value.toArray();
|
||||
else if (value == null || !(value instanceof Array || value instanceof Int32Array))
|
||||
value = [];
|
||||
//debugger;
|
||||
await super.setData(value);
|
||||
|
||||
for (let i = 0; i < value.length; i++) {
|
||||
let e = this._repeatNode.cloneNode(true);
|
||||
|
||||
//debugger;
|
||||
await super.setData(value);
|
||||
this.list.push(e);
|
||||
|
||||
|
||||
for (let i = 0; i < value.length; i++) {
|
||||
await IUI.create(e);
|
||||
|
||||
let e = this._repeatNode.cloneNode(true);
|
||||
IUI.bind(
|
||||
e,
|
||||
false,
|
||||
"repeat",
|
||||
IUI.extend(this.__i_bindings?.scope, { index: i, repeat: this }, true)
|
||||
);
|
||||
|
||||
this.list.push(e);
|
||||
this._container.insertBefore(e, this._beforeNode);
|
||||
|
||||
await IUI.create(e);
|
||||
// update referencing
|
||||
this.__i_bindings?.scope?.refs?._build();
|
||||
|
||||
IUI.bind(e, false, "repeat",
|
||||
IUI.extend(this.__i_bindings?.scope,
|
||||
{index: i, repeat: this}, true));
|
||||
|
||||
this._container.insertBefore(e, this._beforeNode);
|
||||
|
||||
// update referencing
|
||||
this.__i_bindings?.scope?.refs?._build();
|
||||
await IUI.created(e);
|
||||
|
||||
await IUI.created(e);
|
||||
|
||||
await IUI.render(e, value[i], false);
|
||||
|
||||
}
|
||||
await IUI.render(e, value[i], false);
|
||||
}
|
||||
|
||||
// @TODO: check if this works for event names starting with ":"
|
||||
this._emit(":data", { data: value });
|
||||
// this._emit("modified", { data: value, property: "data" });
|
||||
|
||||
|
||||
// @TODO: check if this works for event names starting with ":"
|
||||
this._emit(":data", { data: value });
|
||||
// this._emit("modified", { data: value, property: "data" });
|
||||
|
||||
|
||||
this._busy = false;
|
||||
this._busy = false;
|
||||
}
|
||||
|
||||
});
|
||||
}
|
||||
);
|
||||
|
||||
@@ -1,15 +1,16 @@
|
||||
import IUIElement from "../Core/IUIElement.js";
|
||||
import { IUI } from "../Core/IUI.js";
|
||||
|
||||
|
||||
export default IUI.module(class TableRow extends IUIElement {
|
||||
export default IUI.module(
|
||||
class TableRow extends IUIElement {
|
||||
constructor() {
|
||||
super();
|
||||
super();
|
||||
}
|
||||
|
||||
create() {
|
||||
//this.style.display = "none";
|
||||
this.style.display = "table-row";
|
||||
console.log("TR");
|
||||
//this.style.display = "none";
|
||||
this.style.display = "table-row";
|
||||
console.log("TR");
|
||||
}
|
||||
});
|
||||
}
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user