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

Select

Browse Source
This commit is contained in:
Esiur Project
2022-08-02 10:32:50 +03:00
parent 1db18defea
commit 72f5d8fe6d
4 changed files with 93 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
src/Core/Binding.js
View File

@ -29,12 +29,11 @@ export class Binding {
if (nodeOrAttributeOrIUIElement instanceof IUIElement) { if (nodeOrAttributeOrIUIElement instanceof IUIElement) {
isAsync = nodeOrAttributeOrIUIElement.hasAttribute("async"); isAsync = nodeOrAttributeOrIUIElement.hasAttribute("async");
type = BindingType.IUIElement; type = BindingType.IUIElement;
} else if (nodeOrAttributeOrIUIElement instanceof Text) {// nodeOrAttribute.nodeType == 3) { } else if (nodeOrAttributeOrIUIElement instanceof Text) {
if (!nodeOrAttributeOrIUIElement.wholeText.match(/\${.*}/)) if (!nodeOrAttributeOrIUIElement.wholeText.match(/\${.*}/))
return null; return null;
type = BindingType.TextNode; type = BindingType.TextNode;
isAsync = nodeOrAttributeOrIUIElement.parentElement.hasAttribute("async"); isAsync = nodeOrAttributeOrIUIElement.parentElement.hasAttribute("async");
//code = "return `" + nodeOrAttributeOrIUIElement.wholeText + "`;";
script = nodeOrAttributeOrIUIElement.wholeText; script = nodeOrAttributeOrIUIElement.wholeText;
@ -77,10 +76,6 @@ export class Binding {
return null; return null;
} }
// isAsync = nodeOrAttributeOrIUIElement.value.search("await");
// code = "return " + nodeOrAttributeOrIUIElement.value + ";";
script = nodeOrAttributeOrIUIElement.value script = nodeOrAttributeOrIUIElement.value
code = `try {\r\n context.value = ${script}; \r\n}\r\n catch(ex) { context.error = ex; }` code = `try {\r\n context.value = ${script}; \r\n}\r\n catch(ex) { context.error = ex; }`
@ -178,7 +173,7 @@ export class Binding {
var rt = this.func.apply(thisArg, [data, data, context, false, var rt = this.func.apply(thisArg, [data, data, context, false,
...this.scopeValues]); ...this.scopeValues]);
//console.log(rt);
if (rt instanceof Promise) if (rt instanceof Promise)
await rt; await rt;
@ -247,9 +242,6 @@ export class Binding {
try { try {
if (this.type === BindingType.IUIElement) { if (this.type === BindingType.IUIElement) {
//let d = this.func.apply(this.target, [data, data]);
//if (d instanceof Promise)
// d = await d;
let d = await this._execute(this.target, data); let d = await this._execute(this.target, data);
@ -263,10 +255,8 @@ export class Binding {
if (d === undefined) if (d === undefined)
return false; return false;
//if (d instanceof Promise)
// d = await d;
this.target.data = d;// (d === undefined) ? "" : d; this.target.data = d;
if (data != this.data) { if (data != this.data) {
this.data = data; this.data = data;
@ -288,9 +278,6 @@ export class Binding {
if (d === undefined) if (d === undefined)
return false; return false;
//if (d instanceof Promise)
// d = await d;
targetElement.innerHTML = d; targetElement.innerHTML = d;
if (window?.app?.loaded) if (window?.app?.loaded)
@ -302,16 +289,13 @@ export class Binding {
await IUI.created(targetElement); await IUI.created(targetElement);
await IUI.render(targetElement, targetElement._data, true); await IUI.render(targetElement, targetElement._data, true);
} }
//await IUI.updateTree(targetElement);
} }
else if (this.type == BindingType.IfAttribute) else if (this.type == BindingType.IfAttribute)
{ {
let d = await this._execute(this.target.ownerElement, data); let d = await this._execute(this.target.ownerElement, data);
//if (d === undefined)
// return false;
this.target.ownerElement.style.display = d ? "" : "none"; this.target.ownerElement.style.display = d ? "" : "none";
} }
else if (this.type == BindingType.RevertAttribute) else if (this.type == BindingType.RevertAttribute)
@ -319,24 +303,16 @@ export class Binding {
let d = await this._execute(this.target.ownerElement, data); let d = await this._execute(this.target.ownerElement, data);
if (d === undefined) if (d === undefined)
return false; return false;
//if (d instanceof Promise)
// d = await d;
} }
// Attribute // Attribute
else if (this.type === BindingType.Attribute) { else if (this.type === BindingType.Attribute) {
//if (this.target.ownerElement.hasAttribute("debug"))
// debugger;
let d = await this._execute(this.target.ownerElement, data); let d = await this._execute(this.target.ownerElement, data);
if (d === undefined) if (d === undefined)
return false; return false;
//if (d instanceof Promise)
// d = await d;
if (this.attrType == AttributeBindingDestination.Field) if (this.attrType == AttributeBindingDestination.Field)
this.target.ownerElement[this.attrKey] = d; this.target.ownerElement[this.attrKey] = d;
else else
@ -351,14 +327,8 @@ export class Binding {
// Data Attribute of IUI Element // Data Attribute of IUI Element
else if (this.type === BindingType.IUIElementDataAttribute) { else if (this.type === BindingType.IUIElementDataAttribute) {
let d = await this._execute(this.target.ownerElement, data); 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); await this.target.ownerElement.setData(d);
} }
// Data Attribute of HTML Element // Data Attribute of HTML Element
@ -367,15 +337,13 @@ export class Binding {
let d = await this._execute(this.target.ownerElement, data); let d = await this._execute(this.target.ownerElement, data);
if (d === undefined) if (d === undefined)
return false; return false;
//if (d instanceof Promise)
// d = await d;
this.target.ownerElement.data = d; this.target.ownerElement.data = d;
} }
return true; return true;
} }
catch (ex) { catch (ex) {
// console.log(ex);
return false; return false;
} }
} }

7
src/Core/IUI.js
View File

@ -328,22 +328,23 @@ export class IUI {
// render children // render children
for (var i = 0; i < element.children.length; i++) { for (var i = 0; i < element.children.length; i++) {
let el = element.children[i]; let el = element.children[i];
if (el instanceof IUIElement) if (el instanceof IUIElement) {
// @TODO should check if the element depends on parent or not // @TODO should check if the element depends on parent or not
if (el.dataMap != null) { if (el.dataMap != null) {
// if map function failed to call setData, we will render without it // if map function failed to call setData, we will render without it
if (!(await el.dataMap.render(data))) if (!(await el.dataMap.render(data)))
await el.render(); await el.render();
} }
else else {
await el.setData(data); await el.setData(data);
}
}
else { else {
if (el.dataMap != null) if (el.dataMap != null)
await el.dataMap.render(data); await el.dataMap.render(data);
else else
el.data = data; el.data = data;
//let data = e.mapData(data);
await IUI.render(el, el.data); await IUI.render(el, el.data);
} }
} }

41
src/Data/Repeat.js
View File

@ -23,6 +23,8 @@ export default IUI.module(class Repeat extends IUIElement
/// Create /// /// Create ///
////////////// //////////////
console.log(this, this.innerHTML);
if (this._created) if (this._created)
debugger; debugger;
@ -45,9 +47,13 @@ export default IUI.module(class Repeat extends IUIElement
{ {
if (this.children.length > 0) if (this.children.length > 0)
this._repeatNode = this.children[0].cloneNode(true); this._repeatNode = this.children[0].cloneNode(true);
else else {
this._repeatNode = document.createElement("div"); this._repeatNode = document.createElement("div");
if (this.childNodes.length > 0 && this.childNodes[0].data.trim() != "")
this._repeatNode.innerHTML = this.childNodes[0].data.trim();
}
this.innerHTML = ""; this.innerHTML = "";
this._container = this; this._container = this;
} }
@ -134,24 +140,43 @@ export default IUI.module(class Repeat extends IUIElement
for (let i = 0; i < value.length; i++) { for (let i = 0; i < value.length; i++) {
let e = this._repeatNode.cloneNode(true); let el = this._repeatNode.cloneNode(true);
this.list.push(e); this.list.push(el);
await IUI.create(e); await IUI.create(el);
IUI.bind(e, false, "repeat", IUI.bind(el, false, "repeat",
IUI.extend(this.__i_bindings?.scope, IUI.extend(this.__i_bindings?.scope,
{index: i, repeat: this}, true)); {index: i, repeat: this}, true));
this._container.insertBefore(e, this._beforeNode); this._container.insertBefore(el, this._beforeNode);
// update referencing // update referencing
this.__i_bindings?.scope?.refs?._build(); this.__i_bindings?.scope?.refs?._build();
await IUI.created(e); await IUI.created(el);
await IUI.render(e, value[i], false); 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(value[i])))
await el.render();
}
else {
await el.setData(value[i]);
}
}
else
{
if (el.dataMap != null)
await el.dataMap.render(value[i]);
else
el.data = value[i];
await IUI.render(el, el.data, false);
}
} }

65
src/UI/Select.js
View File

@ -15,7 +15,7 @@ export default IUI.module(class Select extends IUIElement {
query: (x) => null, query: (x) => null,
//_formatter: (x) => x, //_formatter: (x) => x,
_autocomplete: false, _autocomplete: false,
cssClass: 'select' //cssClass: 'select'
}); });
this._register("select"); this._register("select");
@ -109,18 +109,24 @@ export default IUI.module(class Select extends IUIElement {
this.repeat = new Repeat(); this.repeat = new Repeat();
this.repeat.cssClass = "select-menu-repeat"; this.repeat.cssClass = "select-menu-repeat";
//this.repeat.innerHTML = this.innerHTML; //this.repeat.innerHTML = this.innerHTML;
this.repeat.setAttribute(":data", "d[1]");
this.counter = document.createElement("div"); if (this.hasAttribute("menu")) {
this.counter.className = this.cssClass + "-counter"; let menuData = this.getAttribute("menu");
this.counter.innerHTML = "${d[0]}"; this.repeat.setAttribute(":data", menuData);// "d[1]");
}
if (this.hasAttribute("footer")) {
let footer = this.getAttribute("footer");
this.footer = document.createElement("div");
this.footer.className = this.cssClass + "-footer";
this.footer.innerHTML = footer;// "${d[0]}";
}
this.menu = new Menu({ cssClass: this.cssClass + "-menu", "target-class": "" }); this.menu = new Menu({ cssClass: this.cssClass + "-menu", "target-class": "" });
this.menu.on("click", async (e) => { this.menu.on("click", async (e) => {
if (e.target != self.textbox && e.target != self.counter && e.target !== self.menu) { if (e.target != self.textbox && e.target != self.footer && e.target !== self.menu) {
await self.setData(e.target.data); await self.setData(e.target.data);
self._emit("input", { value: e.target.data }); self._emit("input", { value: e.target.data });
@ -155,8 +161,6 @@ export default IUI.module(class Select extends IUIElement {
// get collection // get collection
let layout = Layout.get(this, "div", true, true); let layout = Layout.get(this, "div", true, true);
//debugger;
if (layout != null && layout.label != undefined && layout.menu != undefined) { if (layout != null && layout.label != undefined && layout.menu != undefined) {
this.label = layout.label.node; this.label = layout.label.node;
@ -185,7 +189,8 @@ export default IUI.module(class Select extends IUIElement {
}); });
this.menu.appendChild(this.repeat); this.menu.appendChild(this.repeat);
this.menu.appendChild(this.counter); if (this.footer != null)
this.menu.appendChild(this.footer);
if (this.hasArrow) { if (this.hasArrow) {
@ -221,12 +226,23 @@ export default IUI.module(class Select extends IUIElement {
if (app.loaded) if (app.loaded)
{ {
///console.log("Append", this.menu);
await this.menu.create();
IUI.bind(this.menu, false, "menu");
await IUI.create(this.menu); await IUI.create(this.menu);
//this._make_bindings(this.menu); IUI.bind(this.menu, false, "menu", this.__i_bindings?.scope, false);
// update referencing
this.__i_bindings?.scope?.refs?._build();
await IUI.created(this.menu);
/////console.log("Append", this.menu);
//await this.menu.create();
//IUI.bind(this.menu, false, "menu");
//await IUI.create(this.menu);
//await await IUI.create(e);
} }
} }
@ -304,19 +320,26 @@ export default IUI.module(class Select extends IUIElement {
let self = this; let self = this;
let text = this._autocomplete ? this.textbox.value : null; let text = this._autocomplete ? this.textbox.value : null;
let res;
var res = this.query(0, text) if (this.query instanceof Array) {
if (res instanceof Promise) res = this.query;
res = await res; }
else if (this.query instanceof Function) {
res = this.query(0, text)
if (res instanceof Promise)
res = await res;
}
//.then(async (res) => {
if (res[1].length == 0)
await self.setData(null); //if (res[1].length == 0)
// await self.setData(null);
await this.menu.setData(res); await this.menu.setData(res);
if (this.repeat.data.length == 0)
await self.setData(null);
} }