@jinntec/fore 1.1.0 → 1.3.0

package/src/ui/fx-container.js

@@ -37,31 +37,30 @@ export class FxContainer extends foreElementMixin(HTMLElement) {
   /**
    * (re)apply all state properties to this control.
    */
-  refresh(force) {
+  async refresh(force) {
     if (!force && this.hasAttribute('refresh-on-view')) return;
     // console.log('### FxContainer.refresh on : ', this);
 
     if (this.isBound()) {
       this.evalInContext();
       this.modelItem = this.getModelItem();
-      if (!this.modelItem.boundControls.includes(this)) {
+      if (this.modelItem && !this.modelItem.boundControls.includes(this)) {
         this.modelItem.boundControls.push(this);
       }
-
-      // this.value = this.modelItem.value;
+      this.handleModelItemProperties();
     }
 
-    // await this.updateComplete;
-
     // state change event do not fire during init phase (initial refresh)
-    if (this._getForm().ready) {
-      this.handleModelItemProperties();
-    }
-    Fore.refreshChildren(this, force);
+    // if (this._getForm().ready) {
+    //   this.handleModelItemProperties();
+    // }
+    // Fore.refreshChildren(this, force);
   }
 
+  /**
+   * anly relevance is processed for container controls
+   */
   handleModelItemProperties() {
-    this.handleReadonly();
     this.handleRelevant();
   }
 
@@ -69,28 +68,25 @@ export class FxContainer extends foreElementMixin(HTMLElement) {
     return this.getModel().parentNode;
   }
 
-  handleReadonly() {
-    // console.log('mip readonly', this.modelItem.isReadonly);
-    if (this.isReadonly() !== this.modelItem.readonly) {
-      if (this.modelItem.readonly) {
-        this.setAttribute('readonly', 'readonly');
-        this.dispatchEvent(new CustomEvent('readonly', {}));
-      }
-      if (!this.modelItem.readonly) {
-        this.removeAttribute('readonly');
-        this.dispatchEvent(new CustomEvent('readwrite', {}));
-      }
-    }
-  }
-
   handleRelevant() {
     // console.log('mip valid', this.modelItem.enabled);
-    if (!this.modelItem) return;
+    if (!this.modelItem) {
+      console.log('container is not relevant');
+      this.removeAttribute('relevant','');
+      this.setAttribute('nonrelevant','');
+      this.dispatchEvent(new CustomEvent('disabled', {}));
+      return;
+    }
 
     if (this.isEnabled() !== this.modelItem.enabled) {
-      if (this.modelItem.enabled) {
+      if (this.modelItem.relevant) {
+        // this.style.display = 'block';
+        this.removeAttribute('nonrelevant','');
+        this.setAttribute('relevant','');
         this.dispatchEvent(new CustomEvent('enabled', {}));
       } else {
+        this.removeAttribute('relevant','');
+        this.setAttribute('nonrelevant','');
         this.dispatchEvent(new CustomEvent('disabled', {}));
       }
     }

package/src/ui/fx-control.js

@@ -6,6 +6,9 @@ import {
 } from '../xpath-evaluation.js';
 import getInScopeContext from '../getInScopeContext.js';
 import { Fore } from '../fore.js';
+import {ModelItem} from "../modelitem.js";
+import {debounce} from "../events.js";
+import {FxModel} from "../fx-model";
 
 const WIDGETCLASS = 'widget';
 
@@ -19,7 +22,8 @@ const WIDGETCLASS = 'widget';
  * @demo demo/index.html
  */
 
-function debounce(func, timeout = 300) {
+/*
+function debounce( func, timeout = 300) {
   let timer;
   return (...args) => {
     clearTimeout(timer);
@@ -28,6 +32,7 @@ function debounce(func, timeout = 300) {
     }, timeout);
   };
 }
+*/
 export default class FxControl extends XfAbstractControl {
   constructor() {
     super();
@@ -71,10 +76,16 @@ export default class FxControl extends XfAbstractControl {
         listenOn = target;
       }
     }
+
+
+    this.addEventListener('keyup', event => {
+      FxModel.dataChanged = true;
+    });
     // ### convenience marker event
     if (this.updateEvent === 'enter') {
       this.widget.addEventListener('keyup', event => {
         if (event.keyCode === 13) {
+          // console.info('handling Event:', event.type, listenOn);
           // Cancel the default action, if needed
           event.preventDefault();
           this.setValue(this.widget[this.valueProp]);
@@ -85,14 +96,15 @@ export default class FxControl extends XfAbstractControl {
     if (this.debounceDelay) {
       listenOn.addEventListener(
         this.updateEvent,
-        debounce(() => {
-          console.log('eventlistener ', this.updateEvent);
+        debounce(this,() => {
+          // console.log('eventlistener ', this.updateEvent);
+          // console.info('handling Event:', event.type, listenOn);
           this.setValue(this.widget[this.valueProp]);
         }, this.debounceDelay),
       );
     } else {
       listenOn.addEventListener(this.updateEvent, () => {
-        console.log('eventlistener ', this.updateEvent);
+        // console.info('handling Event:', event.type, listenOn);
         this.setValue(this.widget[this.valueProp]);
       });
     }
@@ -124,6 +136,8 @@ export default class FxControl extends XfAbstractControl {
     });
 
     this.template = this.querySelector('template');
+    this.boundInitialized = false;
+    this.static = this.widget.hasAttribute('static')? true:false;
     // console.log('template',this.template);
   }
 
@@ -149,6 +163,8 @@ export default class FxControl extends XfAbstractControl {
   setValue(val) {
     const modelitem = this.getModelItem();
 
+    this.classList.add('visited');
+
     if (modelitem?.readonly){
       console.warn('attempt to change readonly node', modelitem);
       return; // do nothing when modelItem is readonly
@@ -160,13 +176,20 @@ export default class FxControl extends XfAbstractControl {
       replace.replace(this.nodeset, this.getWidget().value);
       if (modelitem && widgetValue && widgetValue !== modelitem.value) {
         modelitem.value = widgetValue;
+        FxModel.dataChanged = true;
         replace.actionPerformed();
       }
       return;
     }
     const setval = this.shadowRoot.getElementById('setvalue');
     setval.setValue(modelitem, val);
+
+    if (this.modelItem instanceof ModelItem && !this.modelItem?.boundControls.includes(this)) {
+      this.modelItem.boundControls.push(this);
+    }
+
     setval.actionPerformed();
+    this.visited = true;
   }
 
   _replaceNode(node) {
@@ -262,7 +285,7 @@ export default class FxControl extends XfAbstractControl {
         widget.value = this.nodeset.cloneNode(true);
         // todo: should be more like below but that can cause infinite loop when controll trigger update event due to calling a setter for property
         // widget[this.valueProp] = this.nodeset.cloneNode(true);
-        console.log('passed value to widget', widget.value);
+        // console.log('passed value to widget', widget.value);
       }
 
       return;
@@ -271,6 +294,7 @@ export default class FxControl extends XfAbstractControl {
     // ### when there's a url Fore is used as widget and will be loaded from external file
     if (this.url && !this.loaded) {
       // ### evaluate initial data if necessary
+
       if (this.initial) {
         this.initialNode = evaluateXPathToFirstNode(this.initial, this.nodeset, this);
         console.log('initialNodes', this.initialNode);
@@ -309,7 +333,11 @@ export default class FxControl extends XfAbstractControl {
    * @private
    */
   async _loadForeFromUrl() {
-    console.log('########## loading Fore from ', this.src, '##########');
+    console.log('########## loading Fore from ', this.url, '##########');
+    console.info(
+        `%cFore is processing URL ${this.url}`,
+        "background:#64b5f6; color:white; padding:1rem; display:inline-block; white-space: nowrap; border-radius:0.3rem;width:100%;",
+    );
     try {
       const response = await fetch(this.url, {
         method: 'GET',
@@ -319,6 +347,7 @@ export default class FxControl extends XfAbstractControl {
           'Content-Type': 'text/html',
         },
       });
+
       const responseContentType = response.headers.get('content-type').toLowerCase();
       console.log('********** responseContentType *********', responseContentType);
       let data;
@@ -332,37 +361,42 @@ export default class FxControl extends XfAbstractControl {
       }
       // const theFore = fxEvaluateXPathToFirstNode('//fx-fore', data.firstElementChild);
       const theFore = data.querySelector('fx-fore');
+      const imported = document.importNode(theFore,true);
+
       // console.log('thefore', theFore)
-      theFore.classList.add('widget'); // is the new widget
+      imported.classList.add('widget'); // is the new widget
+      console.log(`########## loaded fore as component ##### ${this.url}`);
+      imported.addEventListener(
+          'model-construct-done',
+          e => {
+            console.log('subcomponent ready', e.target);
+            const defaultInst = imported.querySelector('fx-instance');
+            // console.log('defaultInst', defaultInst);
+            if(this.initialNode){
+              const doc = new DOMParser().parseFromString('<data></data>', 'application/xml');
+              // Note: Clone the input to prevent the inner fore from editing the outer node
+              doc.firstElementChild.appendChild(this.initialNode.cloneNode(true));
+              // defaultinst.setInstanceData(this.initialNode);
+              defaultInst.setInstanceData(doc);
+            }
+            // console.log('new data', defaultInst.getInstanceData());
+            // theFore.getModel().modelConstruct();
+            imported.getModel().updateModel();
+            imported.refresh();
+          },
+          { once: true },
+      );
+
       const dummy = this.querySelector('input');
       if (this.hasAttribute('shadow')) {
         dummy.parentNode.removeChild(dummy);
-        this.shadowRoot.appendChild(theFore);
+        this.shadowRoot.appendChild(imported);
       } else {
-        dummy.replaceWith(theFore);
+        console.log(this, 'replacing widget with',theFore);
+        dummy.replaceWith(imported);
+        // this.appendChild(imported);
       }
 
-      console.log(`########## loaded fore as component ##### ${this.url}`);
-      theFore.addEventListener(
-        'model-construct-done',
-        e => {
-          console.log('subcomponent ready', e.target);
-          const defaultInst = theFore.querySelector('fx-instance');
-          console.log('defaultInst', defaultInst);
-          if(this.initialNode){
-            const doc = new DOMParser().parseFromString('<data></data>', 'application/xml');
-            // Note: Clone the input to prevent the inner fore from editing the outer node
-            doc.firstElementChild.appendChild(this.initialNode.cloneNode(true));
-            // defaultinst.setInstanceData(this.initialNode);
-            defaultInst.setInstanceData(doc);
-          }
-          console.log('new data', defaultInst.getInstanceData());
-          // theFore.getModel().modelConstruct();
-          theFore.getModel().updateModel();
-          theFore.refresh();
-        },
-        { once: true },
-      );
 
       if (!theFore) {
         this.dispatchEvent(
@@ -408,6 +442,8 @@ export default class FxControl extends XfAbstractControl {
    * @private
    */
   _handleBoundWidget(widget) {
+    if(this.boundInitialized && this.static) return;
+
     if (widget && widget.hasAttribute('ref')) {
       // ### eval nodeset for list control
       const ref = widget.getAttribute('ref');
@@ -445,18 +481,36 @@ export default class FxControl extends XfAbstractControl {
 
         if (nodeset.length) {
           // console.log('nodeset', nodeset);
+          const fragment = document.createDocumentFragment();
+          console.time('offscreen');
+/*
+          Array.from(nodeset).forEach(node => {
+            // console.log('#### node', node);
+            const newEntry = this.createEntry();
+            this.template.parentNode.appendChild(newEntry);
+            // ### initialize new entry
+            // ### set value
+            this.updateEntry(newEntry, node);
+          });
+*/
+          // this should actually perform better than the above but does not seem to make a measurable difference.
           Array.from(nodeset).forEach(node => {
             // console.log('#### node', node);
             const newEntry = this.createEntry();
+            fragment.appendChild(newEntry);
 
             // ### initialize new entry
             // ### set value
             this.updateEntry(newEntry, node);
           });
+          this.template.parentNode.appendChild(fragment);
+          console.timeEnd('offscreen');
         } else {
           const newEntry = this.createEntry();
+          this.template.parentNode.appendChild(newEntry);
           this.updateEntry(newEntry, nodeset);
         }
+        this.boundInitialized = true;
       }
     }
   }
@@ -485,10 +539,12 @@ export default class FxControl extends XfAbstractControl {
   }
 
   createEntry() {
-    const content = this.template.content.firstElementChild.cloneNode(true);
-    const newEntry = document.importNode(content, true);
-    this.template.parentNode.appendChild(newEntry);
-    return newEntry;
+    return this.template.content.firstElementChild.cloneNode(true);
+    // const content = this.template.content.firstElementChild.cloneNode(true);
+    // return content;
+    // const newEntry = document.importNode(content, true);
+    // this.template.parentNode.appendChild(newEntry);
+    // return newEntry;
   }
 
   // eslint-disable-next-line class-methods-use-this

package/src/ui/fx-group.js

@@ -84,6 +84,11 @@ class FxGroup extends FxContainer {
 
     console.groupEnd();
   }
+
+  async refresh(force) {
+    super.refresh(force);
+    Fore.refreshChildren(this,force);
+  }
 }
 
 if (!customElements.get('fx-group')) {

package/src/ui/fx-inspector.js

@@ -25,6 +25,7 @@ export class FxInspector extends HTMLElement {
             /*max-height: 33%;*/
             overflow: scroll;
             transition:width 0.3s ease;
+            z-index:100;
           }
           :host([open]){
             width: 30%;
@@ -121,7 +122,6 @@ export class FxInspector extends HTMLElement {
             </div>
         `;
 
-/*
     const handle = this.shadowRoot.querySelector('.handle');
     handle.addEventListener('click', e => {
       // console.log('toggling');
@@ -132,10 +132,13 @@ export class FxInspector extends HTMLElement {
         this.setAttribute('open', 'open');
       }
     });
-*/
   }
 
   serializeDOM(data) {
+    if(!data){
+      console.warn('no data to serialize');
+      return ;
+    }
     // console.log('serializeDOM', data);
     const ser = new XMLSerializer().serializeToString(data);
     return Fore.prettifyXml(ser);

package/src/ui/fx-output.js

@@ -51,8 +51,9 @@ export class FxOutput extends XfAbstractControl {
 
     const outputHtml = `
             <slot name="label"></slot>
+            
             <span id="value">
-                <slot id="main"></slot>
+                <slot></slot>
             </span>
         `;
 
@@ -67,9 +68,11 @@ export class FxOutput extends XfAbstractControl {
     // console.log('widget ', this.widget);
     this.mediatype = this.hasAttribute('mediatype') ? this.getAttribute('mediatype') : null;
 
+/*
     this.addEventListener('slotchange', e => {
       console.log('slotchange ', e);
     });
+*/
   }
 
   async refresh() {
@@ -112,13 +115,14 @@ export class FxOutput extends XfAbstractControl {
   }
 
   async updateWidgetValue() {
-    console.log('updateWidgetValue');
+    // console.log('updateWidgetValue');
     const valueWrapper = this.shadowRoot.getElementById('value');
 
-    if (this.mediatype === 'markdown') {
-      const md = markdown(this.nodeset);
-      this.innerHtml = md;
-    }
+
+    // if (this.mediatype === 'markdown') {
+    //   const md = markdown(this.nodeset);
+    //   this.innerHtml = md;
+    // }
 
     if (this.mediatype === 'html') {
       if (this.modelItem.node) {
@@ -130,16 +134,7 @@ export class FxOutput extends XfAbstractControl {
         const { node } = this.modelItem;
 
         if (node.nodeType) {
-          // const mainSlot = this.shadowRoot.querySelector('#main');
-          // valueWrapper.appendChild(node);
-
-          // todo: checking if ownerDocument of node and ownerDocument of this are the same - otherwise import first
-          // const imported = this.ownerDocument.importNode(node,true);
-          // const clone = node.cloneNode(true);
-
           this.appendChild(node);
-          // this.innerHtml = node;
-          // this.innerHTML = node;
           return;
         }
         Object.entries(node).map(obj => {
@@ -156,6 +151,13 @@ export class FxOutput extends XfAbstractControl {
       return;
     }
 
+    if(this.mediatype === 'image'){
+      const img = document.createElement('img');
+      img.setAttribute('src',this.value);
+      this.appendChild(img);
+      return;
+    }
+
     valueWrapper.innerHTML = this.value;
   }
 

package/src/ui/fx-repeat.js

@@ -212,7 +212,7 @@ export class FxRepeat extends foreElementMixin(HTMLElement) {
     // console.group('fx-repeat.refresh on', this.id);
 
     if (!this.inited) this.init();
-    console.time('repeat-refresh', this);
+    // console.time('repeat-refresh', this);
     this._evalNodeset();
     // console.log('repeat refresh nodeset ', this.nodeset);
     // console.log('repeatCount', this.repeatCount);
@@ -275,7 +275,7 @@ export class FxRepeat extends foreElementMixin(HTMLElement) {
     // this.style.display = 'block';
     // this.style.display = this.display;
     this.setIndex(this.index);
-    console.timeEnd('repeat-refresh');
+    // console.timeEnd('repeat-refresh');
 
     // this.replaceWith(clone);
 

package/src/ui/fx-repeatitem.js

@@ -43,7 +43,7 @@ export class FxRepeatitem extends foreElementMixin(HTMLElement) {
     // console.log('_dispatchIndexChange on index ', this.index);
     if (this.parentNode) {
       this.parentNode.dispatchEvent(
-        new CustomEvent('item-changed', { composed: true, bubbles: true, detail: { item: this } }),
+        new CustomEvent('item-changed', { composed: false, bubbles: true, detail: { item: this , index:this.index } }),
       );
     }
   }
@@ -90,12 +90,14 @@ export class FxRepeatitem extends foreElementMixin(HTMLElement) {
 
     if (this.modelItem && !this.modelItem.relevant) {
       // await Fore.fadeOutElement(this)
-      this.style.display = 'none';
+      // this.style.display = 'none';
+      this.classList.add('nonrelevant');
     } else {
       // if(this.hasAttribute('repeat-index')){
       //   Fore.fadeInElement(this);
       // }
-      this.style.display = this.display;
+      // this.style.display = this.display;
+      this.classList.remove('nonrelevant');
     }
 
     /*

package/src/ui/fx-switch.js

@@ -36,28 +36,31 @@ class FxSwitch extends FxContainer {
     `;
   }
 
-  refresh() {
+  async refresh(force) {
     super.refresh();
-    console.log('refresh on switch ');
+    // console.log('refresh on switch ');
     const cases = this.querySelectorAll(':scope > fx-case');
+    let selectedCase;
     if (this.isBound()) {
       Array.from(cases).forEach(caseElem => {
         const name = caseElem.getAttribute('name');
         if (name === this.modelItem.value) {
           caseElem.classList.add('selected-case');
+          selectedCase = caseElem;
         } else {
           caseElem.classList.remove('selected-case');
         }
       });
     } else {
-      const selected = this.querySelector(':scope > .selected-case');
-      if (!selected) {
-        cases[0].classList.add('selected-case');
+      selectedCase = this.querySelector(':scope > .selected-case');
+      // if none is selected select the first as default
+      if (!selectedCase) {
+        selectedCase = cases[0];
+        selectedCase.classList.add('selected-case');
       }
     }
 
-    Fore.refreshChildren(this);
-    // console.log('value ', this.value);
+    Fore.refreshChildren(selectedCase,force);
   }
 
   toggle(caseElement) {
@@ -66,6 +69,7 @@ class FxSwitch extends FxContainer {
       if (caseElement === c) {
         // eslint-disable-next-line no-param-reassign
         c.classList.add('selected-case');
+        this.refresh();
       } else {
         // eslint-disable-next-line no-param-reassign
         c.classList.remove('selected-case');

package/src/ui/fx-trigger.js

@@ -1,9 +1,12 @@
 import XfAbstractControl from './abstract-control.js';
+import {leadingDebounce} from "../events.js";
 
 export class FxTrigger extends XfAbstractControl {
   connectedCallback() {
     this.attachShadow({ mode: 'open' });
     this.ref = this.hasAttribute('ref') ? this.getAttribute('ref') : null;
+    this.debounceDelay = this.hasAttribute('debounce') ? this.getAttribute('debounce') : null;
+
     const style = `
           :host {
             cursor:pointer;
@@ -24,7 +27,17 @@ export class FxTrigger extends XfAbstractControl {
       elements[0].setAttribute('role', 'button');
 
       const element = elements[0];
-      element.addEventListener('click', e => this.performActions(e));
+
+      if(this.debounceDelay){
+        this.addEventListener(
+            'click',
+            leadingDebounce(this,(e) => {
+              this.performActions(e)
+            }, this.debounceDelay),
+        );
+      }else{
+        element.addEventListener('click', e => this.performActions(e));
+      }
       this.widget = element;
       // # terrible hack but browser behaves strange - seems to fire a 'click' for a button when it receives a
       // # 'Space' or 'Enter' key
@@ -36,14 +49,6 @@ export class FxTrigger extends XfAbstractControl {
         });
       }
     });
-    /*
-            this.addEventListener('click', e => this.performActions(e));
-            this.addEventListener('keypress', (e) => {
-                if(e.code === 'Space' || e.code === 'Enter'){
-                    this.performActions(e);
-                }
-            });
-    */
   }
 
   // eslint-disable-next-line class-methods-use-this
@@ -89,6 +94,7 @@ export class FxTrigger extends XfAbstractControl {
         if (typeof child.execute === 'function') {
           // eslint-disable-next-line no-await-in-loop
           await child.execute(e);
+          // child.execute(e);
         }
       }
     };

package/src/xpath-evaluation.js

@@ -146,6 +146,30 @@ export function resolveId(id, sourceObject, nodeName = null) {
 // Make namespace resolving use the `instance` element that is related to here
 const xmlDocument = new DOMParser().parseFromString('<xml />', 'text/xml');
 
+function findInstanceReferences(xpathQuery) {
+	if (!xpathQuery.includes('instance')) {
+		// No call to the instance function anyway: short-circuit and prevent AST processing
+		return [];
+	}
+    const xpathAST = parseScript(xpathQuery, {}, xmlDocument);
+    const instanceReferences = fxEvaluateXPathToStrings(
+        `descendant::xqx:functionCallExpr
+				[xqx:functionName = "instance"]
+				/xqx:arguments
+				/xqx:stringConstantExpr
+				/xqx:value`,
+        xpathAST,
+        null,
+        {},
+        {
+            namespaceResolver: prefix =>
+                prefix === 'xqx' ? 'http://www.w3.org/2005/XQueryX' : undefined,
+        },
+    );
+
+	return instanceReferences;
+}
+
 /**
  * Resolve a namespace. Needs a namespace prefix and the element that is most closely related to the
  * XPath in which the namespace is being resolved. The prefix will be resolved by using the
@@ -165,25 +189,12 @@ function createNamespaceResolver(xpathQuery, formElement) {
     if (cachedResolver) {
         return cachedResolver;
     }
-
-    const xpathAST = parseScript(xpathQuery, {}, xmlDocument);
-    let instanceReferences = fxEvaluateXPathToStrings(
-        `descendant::xqx:functionCallExpr
-				[xqx:functionName = "instance"]
-				/xqx:arguments
-				/xqx:stringConstantExpr
-				/xqx:value`,
-        xpathAST,
-        null,
-        {},
-        {
-            namespaceResolver: prefix =>
-                prefix === 'xqx' ? 'http://www.w3.org/2005/XQueryX' : undefined,
-        },
-    );
+	let instanceReferences = findInstanceReferences(xpathQuery);
     if (instanceReferences.length === 0) {
         // No instance functions. Look up further in the hierarchy to see if we can deduce the intended context from there
-        const ancestorComponent = fxEvaluateXPathToFirstNode('ancestor::*[@ref][1]', formElement);
+        const ancestorComponent = formElement.parentNode &&
+			  formElement.parentNode.nodeType === formElement.ELEMENT &&
+			  formElement.parentNode.closest('[ref]');
         if (ancestorComponent) {
             const resolver = createNamespaceResolver(
                 ancestorComponent.getAttribute('ref'),
@@ -327,7 +338,9 @@ function getVariablesInScope(formElement) {
     if (closestActualFormElement.inScopeVariables) {
         for (const key of closestActualFormElement.inScopeVariables.keys()) {
             const varElement = closestActualFormElement.inScopeVariables.get(key);
-            variables[key] = varElement.value;
+            if(varElement){
+                variables[key] = varElement.value;
+            }
         }
     }
     return variables;