esiur/iui
2
0
Fork 0
mirror of https://github.com/esiur/iui.git synced 2025-06-27 09:23:12 +00:00
Code Issues Projects Releases Wiki Activity

docs

Browse Source
This commit is contained in:
Ahmed Zamil
2021-10-29 17:09:15 +03:00
parent 1e8ae99d39
commit b3479dbdbd
35 changed files with 857 additions and 166 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/Core/App.js
View File

@ -12,13 +12,11 @@ export default IUI.module(class App extends IUIElement {
}
created() {
this.updateBindings();
IUI.bind(this, this, "/");
//IUIElement._make_bindings(this);
this.render();
this._emit("load", { app: this });
this.loaded = true;
}
});

18
src/Core/Binding.js
View File

@ -1,4 +1,5 @@
import IUIElement from "./IUIElement.js";
import { IUI } from "./IUI.js";
export const BindingType = {
IUIElement: 0, // this will never happen !
@ -260,7 +261,10 @@ export class Binding {
}
// Content Attribute
else if (this.type == BindingType.ContentAttribute) {
let d = await this._execute(this.target.ownerElement, data);
let targetElement = this.target.ownerElement;
let d = await this._execute(targetElement, data);
if (d === undefined)
return false;
@ -268,7 +272,17 @@ export class Binding {
//if (d instanceof Promise)
// d = await d;
this.target.ownerElement.innerHTML = d;
targetElement.innerHTML = d;
if (window?.app?.loaded)
{
await IUI.create(targetElement);
await IUI.created(targetElement);
IUI.bind(targetElement, targetElement, "content");
await IUI.render(targetElement, targetElement._data, true);
}
//await IUI.updateTree(targetElement);
}
else if (this.type == BindingType.IfAttribute)
{

188
src/Core/IUI.js
View File

@ -1,7 +1,16 @@
import IUIElement from "./IUIElement.js";
import { Binding, BindingType } from "./Binding.js";
//import Route from '../Router/Route.js';
export const IUI = {
format: function (input) {
export class IUI {
static _menus = [];
static views = [];
static modules = {};
static registry = [];
static format(input) {
if (typeof input == "string" || input instanceof String) {
let template = document.createElement("template");
template.innerHTML = input;
@ -14,12 +23,9 @@ export const IUI = {
return [input];
else
return [];
},
_menus: [],
views: [],
modules: {},
registry : [],
observer: new IntersectionObserver(function(entries) {
}
static observer = new IntersectionObserver(function(entries) {
// isIntersecting is true when element and viewport are overlapping
// isIntersecting is false when element and viewport don't overlap
for(var i = 0; i < entries.length; i++)
@ -31,8 +37,10 @@ export const IUI = {
}
}
}, { threshold: [0] }),
created: async function (element) {
}, { threshold: [0] });
static async created (element) {
for (var i = 0; i < element.children.length; i++) {
let e = element.children[i];
@ -40,15 +48,15 @@ export const IUI = {
await e.created();
await IUI.created(e);
}
},
create: async function(element)
}
static async create(element)
{
for (let i = 0; i < element.children.length; i++) {
let e = element.children[i];
if (e instanceof IUIElement) {
await e.create();
// e.updateBindings();
}
await IUI.create(e);
@ -73,8 +81,9 @@ export const IUI = {
// //await IUI.registry[i].updateAttributes();
//}
//return;
},
get : function(o)
}
static get(o)
{
return document.getElementById(o);
@ -82,12 +91,14 @@ export const IUI = {
// if (IUI.registry[i].id == o)
// return IUI.registry[i];
//return null;
},
put: function(o)
}
static put(o)
{
IUI.registry.push(o);
},
remove: function(id)
}
static remove(id)
{
for(var i = 0; i < IUI.registry.length; i++)
if (IUI.registry[i].el.id == id)
@ -95,8 +106,9 @@ export const IUI = {
IUI.registry.splice(i, 1);
break;
}
},
module: function(objectClass)
}
static module(objectClass)
{
let moduleName = objectClass.moduleName;
@ -110,8 +122,9 @@ export const IUI = {
}
return objectClass;
},
extend: function(properties, defaults, force)
}
static extend(properties, defaults, force)
{
if (properties == null)
properties = defaults;
@ -123,6 +136,135 @@ export const IUI = {
properties[i] = defaults[i];
return properties;
}
static bind(element, rootElement, sourcePath){
// ::Attribute
// : Field
// async:: Async Attribute
// async: Async Field
// @ Event
// skip element ?
if (element.hasAttribute("skip")
|| element instanceof HTMLTemplateElement)
return;
// tags to skip
//if (element instanceof HTMLScriptElement )
//return;
if (rootElement == null)
rootElement = element;
let bindings;
if (element != rootElement)
{
element.view = rootElement.view;
element.route = rootElement.route;
bindings = [];
// 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);
}
}
// add reference
if (element.hasAttribute("ref")) {
rootElement.refs[el.getAttribute("ref")] = element;
}
}
else
{
// remove previous text node bindings
bindings = element.bindings == null ? [] : element.bindings.filter(x=> x.type != BindingType.TextNode);
element.refs = {};
}
// compile nodes
for (var i = 0; i < element.childNodes.length; i++) {
let el = element.childNodes[i];
if (el instanceof IUIElement) {
// @TODO: check if the IUI element handles the binding
IUI.bind(el, rootElement, sourcePath);
}
else if (el instanceof HTMLElement) {
IUI.bind(el, rootElement, sourcePath);
}
else if (el instanceof Text) {
let b = Binding.create(el);
if (b != null)
bindings.push(b);
}
else if (el instanceof HTMLScriptElement)
{
// this because HTML parser don't evaluate script tag
let func = new Function("//# sourceURL=iui://" + sourcePath + "-" + Math.round(Math.random() * 10000) + "\r\n return " + el.text.trim());
let rt = func.call(el.parentElement);
if (typeof (rt) === "object") {
for (var k in rt)
el.parentElement[k] = rt[k];
}
}
}
element.bindings = bindings;
}
static async render(element, data, textNodesOnly = false) {
if (!element.bindings) {
return;
}
if (textNodesOnly) {
for (var i = 0; i < element.bindings.length; i++)
if (element.bindings[i].type == BindingType.TextNode)
await element.bindings[i].render(data);
} else {
// 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 el = element.children[i];
if (el instanceof IUIElement)
// @TODO should check if the element depends on parent or not
if (el.dataMap != null) {
// if map function failed to call setData, we will render without it
if (!(await el.dataMap.render(data)))
await el.render();
}
else
await el.setData(data);
else {
if (el.dataMap != null)
await el.dataMap.render(data);
else
el.data = data;
//let data = e.mapData(data);
await IUI.render(el, el.data);
}
}
}
};
export function iui(selector)

55
src/Core/IUIElement.js
View File

@ -40,7 +40,8 @@ export default class IUIElement extends HTMLElement {
}
async render() {
await this._renderElement(this, this._data);
await IUI.render(this, this._data);
//await IUIElement._renderElement(this, this._data);
}
_getParentData() {
@ -54,15 +55,9 @@ export default class IUIElement extends HTMLElement {
}
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);
await IUIElement._renderElement(this, value);
}
get data() {
@ -106,7 +101,7 @@ export default class IUIElement extends HTMLElement {
}
}
async _renderElement(element, data) {
static async _renderElement(element, data) {
if (!element.bindings) {
return;
}
@ -134,7 +129,7 @@ export default class IUIElement extends HTMLElement {
e.data = data;
//let data = e.mapData(data);
await this._renderElement(e, e.data);
await IUIElement._renderElement(e, e.data);
}
}
}
@ -183,7 +178,7 @@ export default class IUIElement extends HTMLElement {
}
create() {
//this.updateBindings();
}
destroy() {
@ -196,7 +191,7 @@ export default class IUIElement extends HTMLElement {
_make_bindings(element) {
static _make_bindings(element, isRoot = false) {
// ::Attribute
// : Field
@ -205,6 +200,10 @@ export default class IUIElement extends HTMLElement {
// @ Event
// skip element ?
if (element.hasAttribute("skip"))
return;
// tags to skip
if (element instanceof HTMLScriptElement
|| element instanceof HTMLTemplateElement)
@ -213,19 +212,22 @@ export default class IUIElement extends HTMLElement {
let bindings = [];
// compile attributes
for (var i = 0; i < element.attributes.length; i++) {
if (!isRoot)
{
// compile attributes
for (var i = 0; i < element.attributes.length; i++) {
let b = Binding.create(element.attributes[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);
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);
}
}
}
@ -234,10 +236,10 @@ export default class IUIElement extends HTMLElement {
let e = element.childNodes[i];
if (e instanceof IUIElement) {
// @TODO: check if the IUI element handles the binding
this._make_bindings(e);
IUIElement._make_bindings(e);
}
else if (e instanceof HTMLElement) {
this._make_bindings(e);
IUIElement._make_bindings(e);
}
else if (e instanceof Text) {
let b = Binding.create(e);
@ -268,9 +270,6 @@ export default class IUIElement extends HTMLElement {
}
}
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); }`;

77
src/Data/Include.js
View File

@ -39,43 +39,56 @@ export default IUI.module(class Include extends IUIElement
//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];
}
}
if (window?.app?.loaded)
{
await IUI.create(this);
await IUI.created(this);
IUI.bind(this, this, "include:" + src);
await IUI.render(this, this._data, true);
}
// // call create for the new elements
// var newElements = this.querySelectorAll("*");
// for (var i = 0; i < newElements.length; i++) {
// 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.classList.remove(this.cssClass + "-loading");
if (window?.app?.loaded)
{
await IUI.create(this);
await IUI.created(this);
this.updateBindings();
await this.render();
}
// 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;
}

7
src/Data/Repeat.js
View File

@ -190,7 +190,8 @@ export default IUI.module(class Repeat extends IUIElement
//console.log("ST4");
this._make_bindings(e)
//this._make_bindings(e)
IUI.bind(e, this, "repeat");
this._container.insertBefore(e, this._beforeNode);
this._assign(e, i);// { view: this.view, route: this.route, index: i });
@ -260,9 +261,7 @@ export default IUI.module(class Repeat extends IUIElement
}
//super._uiBindings = null;
//super.updateBindings();
// @TODO: check if this works for event names starting with ":"
this._emit(":data", { data: value });
// this._emit("modified", { data: value, property: "data" });

78
src/Router/Route.js
View File

@ -80,6 +80,13 @@ export default IUI.module(class Route extends IUIElement {
return null;
}
// get route() {
// return this;
// }
// get view() {
// return this;
// }
async create() {
@ -100,41 +107,52 @@ export default IUI.module(class Route extends IUIElement {
//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 (window?.app?.loaded)
{
await IUI.create(this);
await IUI.created(this);
IUI.bind(this, this, "route:" + src);
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];
}
}
await IUI.render(this, this._data, true);
}
// // call create for the new elements
// var newElements = this.querySelectorAll("*");
// for (var i = 0; i < newElements.length; i++) {
// // set route for all elements
// var el = newElements[i];
// // newElements[i].route = this;
// el.view = this;
// el.route = this;
// if (el.hasAttribute("ref")) {
// this.refs[el.getAttribute("ref")] = el;
// }
// if (el instanceof HTMLScriptElement) {
// // this because HTML parsers don't evaluate script tag
// // xeval.call(el.parentElement, "//# sourceURL=iui://" + src + "\r\n" + el.text);
// //let func = new Function("//# sourceURL=iui://" +
// // src + "-" + Math.round(Math.random() * 10000) + "\r\n return " + el.text.trim());
// let func = new Function("//# sourceURL=iui://" + this.link
// + "\r\n return " + el.text.trim());
// let rt = func.call(el.parentElement);
// if (typeof (rt) === "object") {
// for (var k in rt)
// el.parentElement[k] = rt[k];
// }
// }
// }
}
created() {
//this.updateBindings();
created()
{
}
set(value) {

68
src/UI/CodePreview.js Normal file
View File

@ -0,0 +1,68 @@
import IUIElement from "../Core/IUIElement.js";
import { IUI } from "../Core/IUI.js";
export default IUI.module(class CodePreview extends IUIElement {
constructor(properties) {
super();
}
async create() {
if (this.hasAttribute("debug"))
debugger;
this._code = this.innerHTML;
this.textContent = '';
// create elements
this.bar = document.createElement("div");
this.bar.className = this.cssClass + "-bar";
this.content = document.createElement("div");
this.content.className = this.cssClass + "-content";
this.editor = document.createElement("code");
this.editor.className = this.cssClass + "-editor";
this.editor.innerText = this._code;
this.editor.contentEditable = true;
this.editor.setAttribute("skip", true);
let self = this;
this.editor.addEventListener("input", function() {
self._code = self.editor.innerText;
self.update();
}, false);
this.preview = document.createElement("div");
this.preview.className = this.cssClass + "-preview";
//this.preview.setAttribute(":content", "");
this.content.append(this.editor);
this.content.append(this.preview);
this.append(this.bar);
this.append(this.content);
this.field = this.getAttribute("field");
await this.update();
}
async update() {
if (this._updating)
return;
this._updating = true;
this.preview.innerHTML = this._code;
await IUI.create(this.preview);
await IUI.created(this.preview);
IUI.bind(this.preview, this.preview, "preview");
await IUI.render(this.preview, this._data, true);
this._updating = false;
}
});

39
src/UI/Location.js Normal file
View File

@ -0,0 +1,39 @@
import IUIElement from "../Core/IUIElement.js";
import { IUI } from "../Core/IUI.js";
import Link from '../Router/Link.js';
export default IUI.module(class Location extends IUIElement {
constructor() {
super();
}
create() {
let self = this;
window.router.on("route", (e) => {
self.textContent = ''; // clear everything
let html = "";
let route = e.route;
var current = document.createElement("div");
current.innerHTML = route.caption;
self.append(current);
while (route = route.parent) {
var sep = document.createElement("span");
self.prepend(sep);
let link = new Link();
link.link = route.link;
link.innerHTML = route.caption;
self.prepend(link);
}
});
}
});

30
src/UI/Select.js
View File

@ -220,10 +220,13 @@ export default IUI.module(class Select extends IUIElement {
app.appendChild(this.menu);
if (app.loaded)
{
///console.log("Append", this.menu);
await this.menu.create();
IUI.bind(this.menu, this, "menu");
await IUI.create(this.menu);
this._make_bindings(this.menu);
//this._make_bindings(this.menu);
}
}
@ -313,30 +316,7 @@ export default IUI.module(class Select extends IUIElement {
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 => {
//});
}

8
src/UI/TabbedTarget.js
View File

@ -131,9 +131,7 @@ export default IUI.module(class TabbedTarget extends Target {
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) {
@ -141,9 +139,7 @@ export default IUI.module(class TabbedTarget extends Target {
self.select(item);
});
//this._updateSize();
//this.updateBindings();
if (item.selected)
this.select(item);

5
src/UI/Table.js
View File

@ -907,7 +907,10 @@ export default IUI.module(class Table extends IUIElement {
let cl = column.node.cloneNode(true);// tr.insertCell();
this._make_bindings(cl)
//this._make_bindings(cl)
IUI.bind(cl, this, "table");
tr.appendChild(cl);
if (cl.dataMap != null)

8
src/UI/Tabs.js
View File

@ -132,9 +132,7 @@ export default IUI.module(class Tabs extends IUIElement {
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) {
@ -142,9 +140,7 @@ export default IUI.module(class Tabs extends IUIElement {
self.select(item);
});
//this._updateSize();
//this.updateBindings();
if (item.selected)
this.select(item);

1
src/UI/Window.js
View File

@ -42,7 +42,6 @@ export default IUI.module(class IUIWindow extends IUIElement {
this.insertAdjacentElement("afterBegin", this._body);
//super.updateBindings();
}
else
this._body = b[0];

2
src/iui.js
View File

@ -38,6 +38,8 @@ import './UI/Select.js';
import './UI/DropDown.js';
import './UI/Grid.js';
import './UI/Location.js';
import './UI/CodePreview.js';
window.addEventListener("beforeprint", (e)=>{
let viewRoute = router.current.viewRoute;