diff --git a/src/Core/Binding.js b/src/Core/Binding.js index 64c4dc7..fa7fb21 100644 --- a/src/Core/Binding.js +++ b/src/Core/Binding.js @@ -29,12 +29,11 @@ export class Binding { if (nodeOrAttributeOrIUIElement instanceof IUIElement) { isAsync = nodeOrAttributeOrIUIElement.hasAttribute("async"); type = BindingType.IUIElement; - } else if (nodeOrAttributeOrIUIElement instanceof Text) {// nodeOrAttribute.nodeType == 3) { + } else if (nodeOrAttributeOrIUIElement instanceof Text) { if (!nodeOrAttributeOrIUIElement.wholeText.match(/\${.*}/)) return null; type = BindingType.TextNode; isAsync = nodeOrAttributeOrIUIElement.parentElement.hasAttribute("async"); - //code = "return `" + nodeOrAttributeOrIUIElement.wholeText + "`;"; script = nodeOrAttributeOrIUIElement.wholeText; @@ -77,10 +76,6 @@ export class Binding { 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; }` @@ -178,7 +173,7 @@ export class Binding { var rt = this.func.apply(thisArg, [data, data, context, false, ...this.scopeValues]); - //console.log(rt); + if (rt instanceof Promise) await rt; @@ -247,10 +242,7 @@ export class Binding { try { 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); await this.target.setData(d); @@ -263,10 +255,8 @@ export class Binding { if (d === undefined) return false; - //if (d instanceof Promise) - // d = await d; - this.target.data = d;// (d === undefined) ? "" : d; + this.target.data = d; if (data != this.data) { this.data = data; @@ -288,9 +278,6 @@ export class Binding { if (d === undefined) return false; - //if (d instanceof Promise) - // d = await d; - targetElement.innerHTML = d; if (window?.app?.loaded) @@ -302,16 +289,13 @@ export class Binding { await IUI.created(targetElement); await IUI.render(targetElement, targetElement._data, true); } - //await IUI.updateTree(targetElement); + } else if (this.type == BindingType.IfAttribute) { let d = await this._execute(this.target.ownerElement, data); - //if (d === undefined) - // return false; - this.target.ownerElement.style.display = d ? "" : "none"; } else if (this.type == BindingType.RevertAttribute) @@ -319,24 +303,16 @@ export class Binding { 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 @@ -351,14 +327,8 @@ export class Binding { // Data Attribute of IUI Element else if (this.type === BindingType.IUIElementDataAttribute) { - - let d = await this._execute(this.target.ownerElement, data); - //if (d === undefined) - // return false; - - //if (d instanceof Promise) - // d = await d; + await this.target.ownerElement.setData(d); } // Data Attribute of HTML Element @@ -367,15 +337,13 @@ export class Binding { 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; } } diff --git a/src/Core/IUI.js b/src/Core/IUI.js index 48d6b1a..4fa9571 100644 --- a/src/Core/IUI.js +++ b/src/Core/IUI.js @@ -328,22 +328,23 @@ export class IUI { // render children for (var i = 0; i < element.children.length; 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 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 + 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); } } diff --git a/src/Data/Repeat.js b/src/Data/Repeat.js index 9e32979..3054ec7 100644 --- a/src/Data/Repeat.js +++ b/src/Data/Repeat.js @@ -22,7 +22,9 @@ export default IUI.module(class Repeat extends IUIElement ////////////// /// Create /// ////////////// - + + console.log(this, this.innerHTML); + if (this._created) debugger; @@ -45,9 +47,13 @@ export default IUI.module(class Repeat extends IUIElement { if (this.children.length > 0) this._repeatNode = this.children[0].cloneNode(true); - else + else { 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._container = this; } @@ -134,25 +140,44 @@ export default IUI.module(class Repeat extends IUIElement 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, {index: i, repeat: this}, true)); - this._container.insertBefore(e, this._beforeNode); + this._container.insertBefore(el, this._beforeNode); // update referencing this.__i_bindings?.scope?.refs?._build(); - await IUI.created(e); + await IUI.created(el); + + 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); + } - await IUI.render(e, value[i], false); - } diff --git a/src/UI/Select.js b/src/UI/Select.js index 71c39fe..4c297a5 100644 --- a/src/UI/Select.js +++ b/src/UI/Select.js @@ -15,7 +15,7 @@ export default IUI.module(class Select extends IUIElement { query: (x) => null, //_formatter: (x) => x, _autocomplete: false, - cssClass: 'select' + //cssClass: 'select' }); this._register("select"); @@ -109,18 +109,24 @@ export default IUI.module(class Select extends IUIElement { 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]}"; - + if (this.hasAttribute("menu")) { + let menuData = this.getAttribute("menu"); + 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.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); self._emit("input", { value: e.target.data }); @@ -155,8 +161,6 @@ export default IUI.module(class Select extends IUIElement { // 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; @@ -185,7 +189,8 @@ export default IUI.module(class Select extends IUIElement { }); this.menu.appendChild(this.repeat); - this.menu.appendChild(this.counter); + if (this.footer != null) + this.menu.appendChild(this.footer); if (this.hasArrow) { @@ -221,12 +226,23 @@ export default IUI.module(class Select extends IUIElement { if (app.loaded) { - ///console.log("Append", this.menu); - await this.menu.create(); - IUI.bind(this.menu, false, "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 text = this._autocomplete ? this.textbox.value : null; + let res; - var res = this.query(0, text) - if (res instanceof Promise) - res = await res; - - //.then(async (res) => { - if (res[1].length == 0) - await self.setData(null); + if (this.query instanceof Array) { + res = this.query; + } + else if (this.query instanceof Function) { + res = this.query(0, text) + if (res instanceof Promise) + res = await res; + } + + + + //if (res[1].length == 0) + // await self.setData(null); await this.menu.setData(res); - - + if (this.repeat.data.length == 0) + await self.setData(null); }