@jinntec/fore 1.0.0-5 → 1.0.0

package/src/ui/abstract-control.js

@@ -1,6 +1,7 @@
 import '../fx-model.js';
 import { foreElementMixin } from '../ForeElementMixin.js';
 import { ModelItem } from '../modelitem.js';
+import { Fore } from '../fore.js';
 
 /**
  * `AbstractControl` -
@@ -26,7 +27,7 @@ export default class AbstractControl extends foreElementMixin(HTMLElement) {
   /**
    * (re)apply all modelItem state properties to this control. model -> UI
    */
-  async refresh(force) {
+  async refresh() {
     // console.log('### AbstractControl.refresh on : ', this);
 
     const currentVal = this.value;
@@ -36,6 +37,7 @@ export default class AbstractControl extends foreElementMixin(HTMLElement) {
 
     // await this.updateComplete;
     // await this.getWidget();
+    this.oldVal = this.nodeset ? this.nodeset : null;
     this.evalInContext();
 
     if (this.isBound()) {
@@ -51,12 +53,36 @@ export default class AbstractControl extends foreElementMixin(HTMLElement) {
       if (this.modelItem instanceof ModelItem) {
         // console.log('### XfAbstractControl.refresh modelItem : ', this.modelItem);
 
-        this.value = this.modelItem.value;
+        if (this.hasAttribute('as') && this.getAttribute('as') === 'node') {
+          console.log('as', this.nodeset);
+          this.modelItem.value = this.nodeset;
+          this.value = this.modelItem.value;
+        } else {
+          this.value = this.modelItem.value;
+        }
+
+        // console.log('value of widget',this.value);
+
+        /*
+         * todo: find out on which foreign modelitems we might be dependant on when no binds are used.
+         *
+         * e.g. filter expr on 'ref' 'instance('countries')//country[@continent = instance('default')/continent]'
+         *
+         * the country node is dependant on instance('default')/continent here (foreign node).
+         *
+         * possible approach:
+         * - pipe ref expression through DependencyNotifyingDomFacade to get referred nodes.
+         * - lookup modelItems of referred nodes
+         * - add ourselves to boundControls of foreign modelItem -> this control will then get refreshed when the foreign modelItem is changed.
+         */
+
+        // const touched = FxBind.getReferencesForRef(this.ref,Array.from(this.nodeset));
+        // console.log('touched',touched);
 
         /*
         this is another case that highlights the fact that an init() function might make sense in general.
          */
-        if(!this.modelItem.boundControls.includes(this)){
+        if (!this.modelItem.boundControls.includes(this)) {
           this.modelItem.boundControls.push(this);
         }
 
@@ -68,15 +94,10 @@ export default class AbstractControl extends foreElementMixin(HTMLElement) {
         // if(!this.closest('fx-fore').ready) return; // state change event do not fire during init phase (initial refresh)
         if (!this.getOwnerForm().ready) return; // state change event do not fire during init phase (initial refresh)
         if (currentVal !== this.value) {
-          // console.log('dispatching value-changed for ', this);
-          // console.log('value-changed path ', this.modelItem.path);
-          this.dispatch('value-changed', { path: this.modelItem.path });
+          Fore.dispatch(this, 'value-changed', { path: this.modelItem.path });
         }
-        // this.requestUpdate();
       }
     }
-    // Fore.refreshChildren(this,force);
-    // await this.updateComplete;
   }
 
   /**
@@ -89,13 +110,14 @@ export default class AbstractControl extends foreElementMixin(HTMLElement) {
   }
 
   handleModelItemProperties() {
-    // console.log('form ready', this.getOwnerForm().ready);
+    // console.log('handleModelItemProperties',this.modelItem);
     this.handleRequired();
     this.handleReadonly();
     if (this.getOwnerForm().ready) {
       this.handleValid();
     }
     this.handleRelevant();
+    // todo: handleType()
   }
 
   _getForm() {
@@ -104,25 +126,23 @@ export default class AbstractControl extends foreElementMixin(HTMLElement) {
 
   _dispatchEvent(event) {
     if (this.getOwnerForm().ready) {
-      this.dispatch(event, {});
+      Fore.dispatch(this, event, {});
     }
   }
 
   // eslint-disable-next-line class-methods-use-this
   handleRequired() {
     // console.log('mip required', this.modelItem.required);
-    // const control = this.querySelector('#control');
     this.widget = this.getWidget();
+    // if (this.required !== this.modelItem.required) {
     if (this.isRequired() !== this.modelItem.required) {
       if (this.modelItem.required) {
-        this.widget.setAttribute('required', 'required');
-        this.classList.add('required');
+        this.widget.setAttribute('required', '');
+        this.setAttribute('required', '');
         this._dispatchEvent('required');
       } else {
         this.widget.removeAttribute('required');
-        this.required = false;
-        // this.removeAttribute('required');
-        this.classList.toggle('required');
+        this.removeAttribute('required');
         this._dispatchEvent('optional');
       }
     }
@@ -132,15 +152,13 @@ export default class AbstractControl extends foreElementMixin(HTMLElement) {
     // console.log('mip readonly', this.modelItem.isReadonly);
     if (this.isReadonly() !== this.modelItem.readonly) {
       if (this.modelItem.readonly) {
-        this.widget.setAttribute('readonly', 'readonly');
-        // this.setAttribute('readonly','readonly');
-        this.classList.toggle('readonly');
+        this.widget.setAttribute('readonly', '');
+        this.setAttribute('readonly', '');
         this._dispatchEvent('readonly');
       }
       if (!this.modelItem.readonly) {
         this.widget.removeAttribute('readonly');
-        // this.removeAttribute('readonly');
-        this.classList.toggle('readonly');
+        this.removeAttribute('readonly');
         this._dispatchEvent('readwrite');
       }
     }
@@ -153,12 +171,12 @@ export default class AbstractControl extends foreElementMixin(HTMLElement) {
 
     if (this.isValid() !== this.modelItem.constraint) {
       if (this.modelItem.constraint) {
-        this.classList.remove('invalid');
         if (alert) alert.style.display = 'none';
         this._dispatchEvent('valid');
+        this.removeAttribute('invalid');
       } else {
+        this.setAttribute('invalid', '');
         // ### constraint is invalid - handle alerts
-        this.classList.add('invalid');
         if (alert) {
           alert.style.display = 'block';
         }
@@ -185,6 +203,12 @@ export default class AbstractControl extends foreElementMixin(HTMLElement) {
 
   handleRelevant() {
     // console.log('mip valid', this.modelItem.enabled);
+    const item = this.modelItem.node;
+    if (Array.isArray(item) && item.length === 0) {
+      this._dispatchEvent('nonrelevant');
+      this.style.display = 'none';
+      return;
+    }
     if (this.isEnabled() !== this.modelItem.relevant) {
       if (this.modelItem.relevant) {
         this._dispatchEvent('relevant');
@@ -199,14 +223,12 @@ export default class AbstractControl extends foreElementMixin(HTMLElement) {
   }
 
   isRequired() {
-    if (this.widget.hasAttribute('required')) {
-      return true;
-    }
-    return false;
+    return this.hasAttribute('required');
   }
 
   isValid() {
-    if (this.classList.contains('invalid')) {
+    // return this.valid;
+    if (this.hasAttribute('invalid')) {
       return false;
     }
     return true;
@@ -214,10 +236,7 @@ export default class AbstractControl extends foreElementMixin(HTMLElement) {
 
   isReadonly() {
     // const widget = this.querySelector('#widget');
-    if (this.widget.hasAttribute('readonly')) {
-      return true;
-    }
-    return false;
+    return this.hasAttribute('readonly');
   }
 
   isEnabled() {
@@ -257,5 +276,6 @@ export default class AbstractControl extends foreElementMixin(HTMLElement) {
     })();
   }
 }
-
-window.customElements.define('fx-abstract-control', AbstractControl);
+if (!customElements.get('fx-abstract-control')) {
+  window.customElements.define('fx-abstract-control', AbstractControl);
+}

package/src/ui/fx-alert.js

@@ -29,9 +29,15 @@ export class FxAlert extends AbstractControl {
     `;
   }
 
+  getWidget() {
+    return this;
+  }
+
   async updateWidgetValue() {
     console.log('alert update', this);
     this.innerHTML = this.value;
   }
 }
-customElements.define('fx-alert', FxAlert);
+if (!customElements.get('fx-alert')) {
+  customElements.define('fx-alert', FxAlert);
+}

package/src/ui/fx-case.js

@@ -44,4 +44,6 @@ class FxCase extends HTMLElement {
   }
 }
 
-window.customElements.define('fx-case', FxCase);
+if (!customElements.get('fx-case')) {
+  window.customElements.define('fx-case', FxCase);
+}

package/src/ui/fx-container.js

@@ -44,7 +44,7 @@ export class FxContainer extends foreElementMixin(HTMLElement) {
     if (this.isBound()) {
       this.evalInContext();
       this.modelItem = this.getModelItem();
-      if(!this.modelItem.boundControls.includes(this)){
+      if (!this.modelItem.boundControls.includes(this)) {
         this.modelItem.boundControls.push(this);
       }
 
@@ -111,4 +111,6 @@ export class FxContainer extends foreElementMixin(HTMLElement) {
   }
 }
 
-window.customElements.define('fx-container', FxContainer);
+if (!customElements.get('fx-container')) {
+  window.customElements.define('fx-container', FxContainer);
+}

package/src/ui/fx-control.js

@@ -1,5 +1,9 @@
 import XfAbstractControl from './abstract-control.js';
-import { evaluateXPath, evaluateXPathToString, evaluateXPathToNodes } from '../xpath-evaluation.js';
+import {
+  evaluateXPath,
+  evaluateXPathToString,
+  evaluateXPathToFirstNode,
+} from '../xpath-evaluation.js';
 import getInScopeContext from '../getInScopeContext.js';
 import { Fore } from '../fore.js';
 
@@ -14,6 +18,16 @@ const WIDGETCLASS = 'widget';
  * @customElement
  * @demo demo/index.html
  */
+
+function debounce(func, timeout = 300) {
+  let timer;
+  return (...args) => {
+    clearTimeout(timer);
+    timer = setTimeout(() => {
+      func.apply(this, args);
+    }, timeout);
+  };
+}
 export default class FxControl extends XfAbstractControl {
   constructor() {
     super();
@@ -22,6 +36,12 @@ export default class FxControl extends XfAbstractControl {
   }
 
   connectedCallback() {
+    this.initial = this.hasAttribute('initial') ? this.getAttribute('initial') : null;
+    this.url = this.hasAttribute('url') ? this.getAttribute('url') : null;
+    this.loaded = false;
+    this.initialNode = null;
+    this.debounceDelay = this.hasAttribute('debounce') ? this.getAttribute('debounce') : null;
+
     this.updateEvent = this.hasAttribute('update-event')
       ? this.getAttribute('update-event')
       : 'blur';
@@ -33,21 +53,6 @@ export default class FxControl extends XfAbstractControl {
             }
         `;
 
-    /*
-        const controlHtml = `
-            <slot></slot>
-            <fx-setvalue id="setvalue" ref="${this.ref}"></fx-setvalue>
-        `;
-*/
-
-    /*
-        this.shadowRoot.innerHTML = `
-            <style>
-                ${style}
-            </style>
-            ${controlHtml}
-        `
-*/
     this.shadowRoot.innerHTML = `
             <style>
                 ${style}
@@ -69,32 +74,116 @@ export default class FxControl extends XfAbstractControl {
       });
       this.updateEvent = 'blur'; // needs to be registered too
     }
-    this.widget.addEventListener(this.updateEvent, () => {
-      // console.log('eventlistener ', this.updateEvent);
-      this.setValue(this.widget[this.valueProp]);
+    if (this.debounceDelay) {
+      this.widget.addEventListener(
+        this.updateEvent,
+        debounce(() => {
+          console.log('eventlistener ', this.updateEvent);
+          this.setValue(this.widget[this.valueProp]);
+        }, this.debounceDelay),
+      );
+    } else {
+      this.widget.addEventListener(this.updateEvent, () => {
+        console.log('eventlistener ', this.updateEvent);
+        this.setValue(this.widget[this.valueProp]);
+      });
+    }
+
+    this.addEventListener('return', e => {
+      console.log('catched return action on ', this);
+      console.log('return detail', e.detail);
+
+      console.log('return triggered on ', this);
+      console.log('this.ref', this.ref);
+      console.log('current outer instance', this.getInstance());
+
+      console.log(
+        '???? why ???? current nodeset should point to the node of the outer control',
+        e.currentTarget.nodeset,
+      );
+      console.log(
+        '???? why ???? current nodeset should point to the node of the outer control',
+        this.nodeset,
+      );
+      const newNodes = e.detail.nodeset;
+      console.log('new nodeset', newNodes);
+      console.log('currentTarget', e.currentTarget);
+      console.log('target', e.target);
+
+      e.stopPropagation();
+
+      this._replaceNode(newNodes);
     });
 
-    const slot = this.shadowRoot.querySelector('slot');
     this.template = this.querySelector('template');
     // console.log('template',this.template);
   }
 
+  _debounce(func, timeout = 300) {
+    let timer;
+    return (...args) => {
+      const context = this;
+      clearTimeout(timer);
+      timer = setTimeout(() => {
+        func.apply(context, args);
+      }, timeout);
+    };
+  }
+
+  /**
+   * updates the model with a new value by executing it's `<fx-setvalue>` action.
+   *
+   * In case the `as='node'` is given the bound node is replaced with the widgets' value with is
+   * expected to be a node again.
+   *
+   * @param val the new value to be set
+   */
   setValue(val) {
     const modelitem = this.getModelItem();
+
+    if (modelitem?.readonly) return; // do nothing when modelItem is readonly
+
+    if (this.getAttribute('as') === 'node') {
+      const widgetValue = this.getWidget().value;
+      const replace = this.shadowRoot.getElementById('replace');
+      replace.replace(this.nodeset, this.getWidget().value);
+      if (widgetValue && widgetValue !== modelitem.value) {
+        modelitem.value = widgetValue;
+        replace.actionPerformed();
+      }
+      return;
+    }
     const setval = this.shadowRoot.getElementById('setvalue');
     setval.setValue(modelitem, val);
     setval.actionPerformed();
   }
 
+  _replaceNode(node) {
+    // Note: clone the node while replacing to prevent the instances to leak through
+    this.modelItem.node.replaceWith(node.cloneNode(true));
+    this.getOwnerForm().refresh();
+  }
+
   renderHTML(ref) {
     return `
             ${this.label ? `${this.label}` : ''}
             <slot></slot>
-            <fx-setvalue id="setvalue" ref="${ref}"></fx-setvalue>
+            ${
+              this.hasAttribute('as') && this.getAttribute('as') === 'node'
+                ? `<fx-replace id="replace" ref=".">`
+                : `<fx-setvalue id="setvalue" ref="${ref}"></fx-setvalue>`
+            }
+
         `;
   }
 
   /**
+   * The widget is the actual control being used in the UI e.g. a native input control or any
+   * other component that presents a control that can be interacted with.
+   *
+   * This function returns the widget by querying the children of this control for an element
+   * with `class="widget"`. If that cannot be found it searches for an native `input` of any type.
+   * If either cannot be found a `<input type="text">` is created.
    *
    * @returns {HTMLElement|*}
    */
@@ -114,24 +203,169 @@ export default class FxControl extends XfAbstractControl {
     return widget;
   }
 
-  // todo: check again
+  /**
+   * updates the widget from the modelItem value. During refresh the a control
+   * evaluates it's binding expression to determine the bound node. The bound node corresponds
+   * to a modelItem which acts a the state object of a node. The modelItem determines the value
+   * and the state of the node and set the `value` property of this class.
+   *
+   * @returns {Promise<void>}
+   */
   async updateWidgetValue() {
     // this.widget[this.valueProp] = this.value;
+
+    let { widget } = this;
+    if (!widget) {
+      widget = this;
+    }
+    // ### value is bound to checkbox
     if (this.valueProp === 'checked') {
       if (this.value === 'true') {
-        this.widget.checked = true;
+        widget.checked = true;
       } else {
-        this.widget.checked = false;
+        widget.checked = false;
       }
-    } else {
-      let { widget } = this;
-      if (!widget) {
-        widget = this;
+      return;
+    }
+
+    if (this.hasAttribute('as')) {
+      const as = this.getAttribute('as');
+
+      // ### when there's an `as=text` attribute serialize nodeset to prettified string
+      if (as === 'text') {
+        const serializer = new XMLSerializer();
+        const pretty = Fore.prettifyXml(serializer.serializeToString(this.nodeset));
+        widget.value = pretty;
+      }
+      if (as === 'node' && this.nodeset !== widget.value) {
+        const oldVal = this.nodeset.innerHTML;
+        if (widget.value) {
+          if (oldVal !== this.widget.value) {
+            console.log('changed');
+            return;
+          }
+        }
+
+        widget.value = this.nodeset.cloneNode(true);
+        console.log('passed value to widget', widget.value);
       }
+
+      return;
+    }
+
+    // ### 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);
+      }
+
+      // ### load the markup from Url
+      await this._loadForeFromUrl();
+      this.loaded = true;
+
+      // ### replace default instance of embedded Fore with initial nodes
+      // const innerInstance = this.querySelector('fx-instance');
+      // console.log('innerInstance',innerInstance);
+      return;
+    }
+
+    /*
+    if(this.url && !this.loaded){
+      this._loadForeFromUrl();
+      this.loaded=true;
+      return;
+    }
+*/
+    if (widget.value !== this.value) {
       widget.value = this.value;
     }
   }
 
+  /**
+   * loads an external Fore from an HTML file given by `url` attribute.
+   *
+   * Will look for the `<fx-fore>` element within the returned HTML file and return that element.
+   *
+   * If that cannot be found an error is dispatched.
+   *
+   * todo: dispatch link error
+   * @private
+   */
+  async _loadForeFromUrl() {
+    console.log('########## loading Fore from ', this.src, '##########');
+    try {
+      const response = await fetch(this.url, {
+        method: 'GET',
+        mode: 'cors',
+        credentials: 'include',
+        headers: {
+          'Content-Type': 'text/html',
+        },
+      });
+      const responseContentType = response.headers.get('content-type').toLowerCase();
+      console.log('********** responseContentType *********', responseContentType);
+      let data;
+      if (responseContentType.startsWith('text/html')) {
+        data = await response.text().then(result =>
+          // console.log('xml ********', result);
+          new DOMParser().parseFromString(result, 'text/html'),
+        );
+      } else {
+        data = 'done';
+      }
+      // const theFore = fxEvaluateXPathToFirstNode('//fx-fore', data.firstElementChild);
+      const theFore = data.querySelector('fx-fore');
+      // console.log('thefore', theFore)
+      theFore.classList.add('widget'); // is the new widget
+      const dummy = this.querySelector('input');
+      if (this.hasAttribute('shadow')) {
+        dummy.parentNode.removeChild(dummy);
+        this.shadowRoot.appendChild(theFore);
+      } else {
+        dummy.replaceWith(theFore);
+      }
+
+      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);
+          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(
+          new CustomEvent('error', {
+            detail: {
+              message: `Fore element not found in '${this.src}'. Maybe wrapped within 'template' element?`,
+            },
+          }),
+        );
+      }
+      console.log('loaded');
+      this.dispatchEvent(new CustomEvent('loaded', { detail: { fore: theFore } }));
+    } catch (error) {
+      console.log('error', error);
+      this.getOwnerForm().dispatchEvent(
+        new CustomEvent('error', { detail: { message: `${this.url} not found` } }),
+      );
+    }
+  }
+
   getTemplate() {
     return this.querySelector('template');
   }
@@ -144,7 +378,20 @@ export default class FxControl extends XfAbstractControl {
 
     // ### if we find a ref on control we have a 'select' control of some kind
     const widget = this.getWidget();
-    if (widget.hasAttribute('ref')) {
+    this._handleBoundWidget(widget);
+    Fore.refreshChildren(this, force);
+  }
+
+  /**
+   * If the widget itself has a `ref` it binds to another nodeset to provide some
+   * dynamic items to be created from a template usually. Examples are dynamic select option lists
+   * or a set of checkboxes.
+   *
+   * @param widget the widget to handle
+   * @private
+   */
+  _handleBoundWidget(widget) {
+    if (widget && widget.hasAttribute('ref')) {
       // ### eval nodeset for list control
       const ref = widget.getAttribute('ref');
       /*
@@ -158,6 +405,9 @@ export default class FxControl extends XfAbstractControl {
       // const nodeset = evaluateXPathToNodes(ref, inscope, this);
       const nodeset = evaluateXPath(ref, inscope, this);
 
+      // ### bail out when nodeset is array and empty
+      if (Array.isArray(nodeset) && nodeset.length === 0) return;
+
       // ### clear items
       const { children } = widget;
       Array.from(children).forEach(child => {
@@ -184,7 +434,6 @@ export default class FxControl extends XfAbstractControl {
         }
       }
     }
-    Fore.refreshChildren(this, force);
   }
 
   updateEntry(newEntry, node) {
@@ -194,7 +443,7 @@ export default class FxControl extends XfAbstractControl {
     const valueAttribute = this._getValueAttribute(newEntry);
     const valueExpr = valueAttribute.value;
     const cutted = valueExpr.substring(1, valueExpr.length - 1);
-    const evaluated = evaluateXPath(cutted, node, newEntry);
+    const evaluated = evaluateXPathToString(cutted, node, newEntry);
     valueAttribute.value = evaluated;
 
     if (this.value === evaluated) {
@@ -230,5 +479,6 @@ export default class FxControl extends XfAbstractControl {
     return result;
   }
 }
-
-window.customElements.define('fx-control', FxControl);
+if (!customElements.get('fx-control')) {
+  window.customElements.define('fx-control', FxControl);
+}