@jinntec/fore 2.5.0 → 2.6.0

package/src/fx-fore.js

@@ -247,6 +247,8 @@ export class FxFore extends HTMLElement {
     // this.mergePartial = this.hasAttribute('merge-partial')? true:false;
     this.mergePartial = false;
     this.createNodes = this.hasAttribute('create-nodes') ? true : false;
+    this._localNamesWithChanges = new Set();
+    this.setAttribute('role', 'form'); // set aria role
   }
 
   connectedCallback() {
@@ -388,6 +390,16 @@ export class FxFore extends HTMLElement {
     }
   }
 
+  /**
+   * Signal something happened with an element with the given local name. This will be used in the
+   * next (non-forceful) refresh to detect whether a component (usually a repeat) should update
+   *
+   * @param {string} localNameOfElement
+   */
+  signalChangeToElement(localNameOfElement) {
+    this._localNamesWithChanges.add(localNameOfElement);
+  }
+
   /**
    * Raise a flag that there might be new template expressions under some node. This happens with
    * repeats updating (new repeat items can have new template expressions) or switches changing their case (new case = new raw HTML)
@@ -502,89 +514,26 @@ export class FxFore extends HTMLElement {
    * @param {(boolean|{reason:'index-function'})} [force]fx-fore
    */
   async refresh(force) {
-    /*
-
-                    if (!changedPaths) {
-                        changedPaths = this.toRefresh.map(item => item.path);
-                    } else {
-                        this.toRefresh.push(
-                            ...changedPaths
-                                .map(
-                                    path =>
-                                    this.getModel()
-                                        .modelItems
-                                        .find(item => item.path === path)
-                                )
-                                .filter(Boolean)
-                        );
-
-                        for(const changedPath of changedPaths) {
-                            for (const repeat of this.querySelectorAll('fx-repeat')) {
-                                if (repeat.closest('fx-fore') !== this) {
-                                    continue;
-                                }
-
-                                if (repeat.touchedPaths && repeat.touchedPaths.has(changedPath)) {
-                                    // Make a temporary model-item-like structure for this
-                                    this.toRefresh.push({
-                                        path: changedPath,
-                                        boundControls: [repeat]
-                                    });
-
-                                    console.log('Found a repeat to update!!!', repeat)
-                                }
-                            }
-                        }
-            }
-            */
     if (this.isRefreshing) {
       return;
     }
+
+    if (force !== true && this._localNamesWithChanges.size > 0) {
+      force = {
+        ...(force || { reason: undefined }),
+        elementLocalnamesWithChanges: Array.from(this._localNamesWithChanges),
+      };
+      this._localNamesWithChanges.clear();
+    }
+
     this.isRefreshing = true;
-    // console.log(`### <<<<< refresh() on '${this.id}' >>>>>`);
 
     // refresh () {
     // ### refresh Fore UI elements
     // if (!this.initialRun && this.toRefresh.length !== 0) {
+    // if (!this.initialRun && this.toRefresh.length !== 0) {
     if (!force && !this.initialRun && this.toRefresh.length !== 0) {
-      // console.log('toRefresh', this.toRefresh);
-      let needsRefresh = false;
-
-      // ### after recalculation the changed modelItems are copied to 'toRefresh' array for processing
-      this.toRefresh.forEach(modelItem => {
-        // check if modelItem has boundControls - if so, call refresh() for each of them
-        const controlsToRefresh = modelItem.boundControls;
-        if (controlsToRefresh) {
-          controlsToRefresh.forEach(ctrl => {
-            ctrl.refresh(force);
-          });
-        }
-
-        // ### check if other controls depend on current modelItem
-        const { mainGraph } = this.getModel();
-        if (mainGraph && mainGraph.hasNode(modelItem.path)) {
-          const deps = this.getModel().mainGraph.dependentsOf(modelItem.path, false);
-          // ### iterate dependant modelItems and refresh all their boundControls
-          if (deps.length !== 0) {
-            deps.forEach(dep => {
-              // ### if changed modelItem has a 'facet' path we use the basePath that is the locationPath without facet name
-              const basePath = XPathUtil.getBasePath(dep);
-              const modelItemOfDep = this.getModel().modelItems.find(mip => mip.path === basePath);
-              // ### refresh all boundControls
-              modelItemOfDep.boundControls.forEach(control => {
-                control.refresh(force);
-              });
-            });
-            needsRefresh = true;
-          }
-        }
-      });
-      this.toRefresh = [];
-      /*
-                  if (!needsRefresh) {
-                      console.log('no dependants to refresh');
-                  }
-      */
+      this.refreshChanged(force);
     } else {
       // ### resetting visited state for controls to refresh
       /*
@@ -595,13 +544,15 @@ export class FxFore extends HTMLElement {
       */
 
       if (this.inited) {
+        console.log(`### <<<<< refresh() on '${this.id}' >>>>>`);
+
         Fore.refreshChildren(this, force);
       }
       // console.timeEnd('refreshChildren');
     }
 
     // ### refresh template expressions
-    if (this.initialRun || this._scanForNewTemplateExpressionsNextRefresh) {
+    if (force || this.initialRun || this._scanForNewTemplateExpressionsNextRefresh) {
       this._updateTemplateExpressions();
       this._scanForNewTemplateExpressionsNextRefresh = false; // reset
     }
@@ -641,12 +592,49 @@ export class FxFore extends HTMLElement {
     for (const subFore of subFores) {
       // subFore.refresh(false, changedPaths);
       if (subFore.ready) {
-        await subFore.refresh(force);
+        // Do an unconditional hard refresh: there might be changes that are relevant
+        await subFore.refresh(true);
       }
     }
     this.isRefreshing = false;
   }
 
+  refreshChanged(force) {
+    console.log('toRefresh', this.toRefresh);
+    let needsRefresh = false;
+
+    // ### after recalculation the changed modelItems are copied to 'toRefresh' array for processing
+    this.toRefresh.forEach(modelItem => {
+      // check if modelItem has boundControls - if so, call refresh() for each of them
+      const controlsToRefresh = modelItem.boundControls;
+      if (controlsToRefresh) {
+        controlsToRefresh.forEach(ctrl => {
+          ctrl.refresh(force);
+        });
+      }
+
+      // ### check if other controls depend on current modelItem
+      const { mainGraph } = this.getModel();
+      if (mainGraph && mainGraph.hasNode(modelItem.path)) {
+        const deps = this.getModel().mainGraph.dependentsOf(modelItem.path, false);
+        // ### iterate dependant modelItems and refresh all their boundControls
+        if (deps.length !== 0) {
+          deps.forEach(dep => {
+            // ### if changed modelItem has a 'facet' path we use the basePath that is the locationPath without facet name
+            const basePath = XPathUtil.getBasePath(dep);
+            const modelItemOfDep = this.getModel().modelItems.find(mip => mip.path === basePath);
+            // ### refresh all boundControls
+            modelItemOfDep.boundControls.forEach(control => {
+              control.refresh(force);
+            });
+          });
+          needsRefresh = true;
+        }
+      }
+    });
+    this.toRefresh = [];
+  }
+
   /**
    * entry point for processing of template expression enclosed in '{}' brackets.
    *
@@ -1018,20 +1006,30 @@ export class FxFore extends HTMLElement {
    */
   initData(root = this) {
     // const created = new Promise(resolve => {
-    console.log('INIT');
-    const boundControls = Array.from(root.querySelectorAll('[ref]:not(fx-model *),fx-repeatitem'));
+    // console.log('INIT');
+    // const boundControls = Array.from(root.querySelectorAll('[ref]:not(fx-model *),fx-repeatitem'));
+
+    const boundControls = Array.from(
+      root.querySelectorAll(
+        'fx-control[ref],fx-upload[ref],fx-group[ref],fx-repeat[ref], fx-switch[ref]',
+      ),
+    );
     if (root.matches('fx-repeatitem')) {
       boundControls.unshift(root);
     }
     // console.log('_initD', boundControls);
     for (let i = 0; i < boundControls.length; i++) {
-      const control = boundControls[i];
-      if (!control.matches('fx-repeatitem')) {
+      const bound = boundControls[i];
+
+      /*
+      ignore bound elements that are enclosed with a control like <select> or <fx-items> and repeated items
+       */
+      if (!bound.matches('fx-repeatitem') && !bound.parentNode.closest('fx-control')) {
         // Repeat items are dumb. They do not respond to evalInContext
-        control.evalInContext();
+        bound.evalInContext();
       }
       let ownerDoc;
-      if (control.nodeset !== null) {
+      if (bound.nodeset !== null) {
         // console.log('Node exists', control.nodeset);
         continue;
       }
@@ -1042,7 +1040,7 @@ export class FxFore extends HTMLElement {
 
       // Previous control can either be an ancestor of us, or a previous node, which can be a sibling, or a child of a sibling.
       // First: parent
-      if (previousControl.contains(control)) {
+      if (previousControl.contains(bound)) {
         // Parent is here.
         // console.log('insert into', control,previousControl);
         // console.log('insert into nodeset', control.nodeset);
@@ -1050,7 +1048,7 @@ export class FxFore extends HTMLElement {
         // console.log('parentNodeset', parentNodeset);
 
         // const parentModelItemNode = parentModelItem.node;
-        const ref = control.ref;
+        const ref = bound.ref;
         // const newElement = parentModelItemNode.ownerDocument.createElement(ref);
         if (parentNodeset.querySelector(`[ref="${ref}"]`)) {
           console.log(`Node with ref "${ref}" already exists.`);
@@ -1061,8 +1059,8 @@ export class FxFore extends HTMLElement {
 
         // Plonk it in at the start!
         parentNodeset.insertBefore(newElement, parentNodeset.firstChild);
-        control.evalInContext();
-        console.log('CREATED child', newElement);
+        bound.evalInContext();
+        // console.log('CREATED child', newElement);
         // console.log('new control evaluated to ', control.nodeset);
         // Done!
         continue;
@@ -1070,7 +1068,7 @@ export class FxFore extends HTMLElement {
       // console.log('previousControl', previousControl);
       // console.log('control', control);
       // Is previousControl a sibling or a descendant of a logical sibling? Keep looking backwards until we share parents!
-      const ourParent = XPathUtil.getParentBindingElement(control);
+      const ourParent = XPathUtil.getParentBindingElement(bound);
       // console.log('ourParent', ourParent);
       let siblingControl = null;
       /*
@@ -1093,8 +1091,9 @@ export class FxFore extends HTMLElement {
         throw new Error('Unexpected! there must be a sibling right?');
       }
       // console.log('sibling', siblingControl);
+      // todo: review: should this not just be inscopeContext?
       const parentNodeset = ourParent.nodeset;
-      const ref = control.ref;
+      const ref = bound.ref;
       let referenceNodeset = siblingControl.nodeset;
       const newElement = this._createNodes(ref, parentNodeset);
 
@@ -1110,9 +1109,9 @@ export class FxFore extends HTMLElement {
             console.log('control ref', control.ref);
             console.log('control new element parent', newElement.parentNode.nodeName);
 */
-      control.evalInContext();
+      bound.evalInContext();
       // console.log('new control evaluated to ', control.nodeset);
-      console.log('CREATED sibling', newElement);
+      // console.log('CREATED sibling', newElement);
     }
     // console.log('DATA', this.getModel().getDefaultContext());
   }
@@ -1126,16 +1125,16 @@ export class FxFore extends HTMLElement {
             console.log(`Node already exists for ref: ${ref}`);
             return existingNode;
         }
-*/
     console.log(`creating new node for ref: ${ref}`);
+*/
     let newElement;
     if (ref.includes('/')) {
       // multi-step ref expressions
-      newElement = XPathUtil.createElementFromXPath(ref, referenceNode.ownerDocument, this);
+      newElement = XPathUtil.createNodesFromXPath(ref, referenceNode.ownerDocument, this);
       // console.log('new subtree', newElement);
       return newElement;
     } else {
-      return XPathUtil.createElementFromXPath(ref, referenceNode.ownerDocument, this);
+      return XPathUtil.createNodesFromXPath(ref, referenceNode.ownerDocument, this);
     }
   }
 

package/src/fx-submission.js

@@ -84,8 +84,8 @@ export class FxSubmission extends ForeElementMixin {
 
   async _submit() {
     console.info(
-        `%csubmitting #${this.id}`,
-        'background:yellow; color:black; padding:.5rem; display:inline-block; white-space: nowrap; border-radius:0.3rem;width:100%;',
+      `%csubmitting #${this.id}`,
+      'background:yellow; color:black; padding:.5rem; display:inline-block; white-space: nowrap; border-radius:0.3rem;width:100%;',
     );
 
     this.evalInContext();
@@ -100,7 +100,7 @@ export class FxSubmission extends ForeElementMixin {
         this.getOwnerForm().classList.add('submit-validation-failed');
         // ### allow alerts to pop up
         // this.dispatch('submit-error', {});
-        Fore.dispatch(this, 'submit-error', {});
+        Fore.dispatch(this, 'submit-error', { status: 0, message: 'validation failed' });
         this.getModel().parentNode.refresh(true);
         return;
       }
@@ -183,6 +183,7 @@ export class FxSubmission extends ForeElementMixin {
         const serialized = localStorage.getItem(key);
         if (!serialized) {
           Fore.dispatch(this, 'submit-error', {
+            status: 400,
             message: `Error reading key ${key} from localstorage`,
           });
           this.parameters.clear();
@@ -237,11 +238,14 @@ export class FxSubmission extends ForeElementMixin {
       if (!response.ok || response.status > 400) {
         // this.dispatch('submit-error', { message: `Error while submitting ${this.id}` });
         console.info(
-            `%csubmit-error #${this.id}`,
-            'background:red; color:black; padding:.5rem; display:inline-block; white-space: nowrap; border-radius:0.3rem;width:100%;',
+          `%csubmit-error #${this.id}`,
+          'background:red; color:black; padding:.5rem; display:inline-block; white-space: nowrap; border-radius:0.3rem;width:100%;',
         );
 
-        Fore.dispatch(this, 'submit-error', { message: `Error while submitting ${this.id}` });
+        Fore.dispatch(this, 'submit-error', {
+          status: response.status,
+          message: `Error during submit ${this.id}`,
+        });
         return;
       }
 
@@ -264,15 +268,14 @@ export class FxSubmission extends ForeElementMixin {
       // this.dispatch('submit-done', {});
       // console.log(`### <<<<< ${this.id} submit-done >>>>>`);
       Fore.dispatch(this, 'submit-done', {});
-/*
+      /*
       console.info(
           `%csubmit-done #${this.id}`,
           'background:green; color:white; padding:.5rem; display:inline-block; white-space: nowrap; border-radius:0.3rem;width:100%;',
       );
 */
-
     } catch (error) {
-      Fore.dispatch(this, 'submit-error', { error: error.message });
+      Fore.dispatch(this, 'submit-error', { status: 500, error: error.message });
     } finally {
       this.parameters.clear();
       const download = document.querySelector('[download]');
@@ -395,26 +398,27 @@ export class FxSubmission extends ForeElementMixin {
     if (this.replace === 'instance') {
       if (targetInstance) {
         if (this.targetref) {
-
           const [theTarget] = evaluateXPath(
-              this.targetref,
-              targetInstance.instanceData.firstElementChild,
-              this,
+            this.targetref,
+            targetInstance.instanceData.firstElementChild,
+            this,
           );
           console.log('theTarget', theTarget);
-          if(this.responseMediatype === 'application/xml' || this.responseMediatype === 'text/html'){
+          if (
+            this.responseMediatype === 'application/xml' ||
+            this.responseMediatype === 'text/html'
+          ) {
             const clone = data.firstElementChild;
             const parent = theTarget.parentNode;
             parent.replaceChild(clone, theTarget);
             console.log('finally ', parent);
           }
-          if(this.responseMediatype.startsWith('text/')){
+          if (this.responseMediatype.startsWith('text/')) {
             theTarget.textContent = data;
           }
-          if(this.responseMediatype === 'application/json'){
-            console.warn('targetref is not supported for application/json responses')
+          if (this.responseMediatype === 'application/json') {
+            console.warn('targetref is not supported for application/json responses');
           }
-
         } else if (this.into) {
           const [theTarget] = evaluateXPath(
             this.into,
@@ -471,11 +475,10 @@ export class FxSubmission extends ForeElementMixin {
       const target = this._getProperty('target');
       const targetNode = document.querySelector(target);
       if (targetNode) {
-
-        if(contentType.startsWith('text/html')){
+        if (contentType.startsWith('text/html')) {
           targetNode.innerHTML = data;
         }
-        if(this.responseMediatype.startsWith('image/svg')){
+        if (this.responseMediatype.startsWith('image/svg')) {
           const parser = new DOMParser();
           const svgDoc = parser.parseFromString(data, 'image/svg+xml');
 
@@ -493,10 +496,11 @@ export class FxSubmission extends ForeElementMixin {
     }
   }
 
+  /*
   _handleError() {
     // this.dispatch('submit-error', {});
     Fore.dispatch(this, 'submit-error', {});
-    /*
+    /!*
                     console.log('ERRRORRRRR');
                     this.dispatchEvent(
                         new CustomEvent('submit-error', {
@@ -505,8 +509,9 @@ export class FxSubmission extends ForeElementMixin {
                             detail: {},
                         }),
                     );
-            */
+            *!/
   }
+*/
 
   /*
     mergeNodes(node1, node2) {

package/src/getInScopeContext.js

@@ -69,6 +69,7 @@ function _getInitialContext(node, ref) {
 export default function getInScopeContext(node, ref) {
   // console.log('getInScopeContext', ref, node);
 
+  //todo: check for multi-step pathes
   const parentElement = _getElement(node);
   // console.log('getInScopeContext parent', parentElement);
 

package/src/modelitem.js

@@ -6,116 +6,127 @@
  * Each bound node in an instance has exactly one ModelItem associated with it.
  */
 export class ModelItem {
-  /**
-   *
-   * @param {string} path calculated normalized path expression linking to data
-   * @param {string} ref relative binding expression
-   * @param {boolean} readonly - boolean to signal readonly/readwrite state
-   * @param {boolean} relevant - boolean to signal relevant/non-relevant state
-   * @param {boolean} required - boolean to signal required/optional state
-   * @param {boolean} constraint - boolean boolean to signal valid/invalid state
-   * @param {string} type - string expression to set a datatype
-   * @param {Node} node - the node the 'ref' expression is referring to
-   * @param {import('./fx-bind').FxBind} bind - the fx-bind element having created this modelItem
-   * @param {string} instance - the fx-instance id having created this modelItem
-   */
-  constructor(path, ref, readonly, relevant, required, constraint, type, node, bind,instance) {
     /**
-     * @type {string}
+     *
+     * @param {string} path calculated normalized path expression linking to data
+     * @param {string} ref relative binding expression
+     * @param {boolean} readonly - boolean to signal readonly/readwrite state
+     * @param {boolean} relevant - boolean to signal relevant/non-relevant state
+     * @param {boolean} required - boolean to signal required/optional state
+     * @param {boolean} constraint - boolean boolean to signal valid/invalid state
+     * @param {string} type - string expression to set a datatype
+     * @param {Node} node - the node the 'ref' expression is referring to
+     * @param {import('./fx-bind').FxBind} bind - the fx-bind element having created this modelItem
+     * @param {string} instance - the fx-instance id having created this modelItem
      */
-    this.path = path;
-    /**
-     * @type {string}
-     */
-    this.ref = ref;
-    /**
-     * @type {boolean}
-     */
-    this.constraint = constraint;
-    /**
-     * @type {boolean}
-     */
-    this.readonly = readonly;
-    /**
-     * @type {boolean}
-     */
-    this.relevant = relevant;
-    /**
-     * @type {boolean}
-     */
-    this.required = required;
-    /**
-     * @type {string}
-     */
-    this.type = type;
-    /**
-     * @type {Node}
-     */
-    this.node = node;
-    /**
-     * @type {import('./fx-bind').FxBind}
-     */
-    this.bind = bind;
-    this.changed = false;
-    /**
-     * @type {import('./ui/fx-alert').FxAlert[]}
-     */
-    this.alerts = [];
-    /**
-     * @type {import('./ui/abstract-control').default[]}
-     */
-    this.boundControls = [];
-    // this.value = this._getValue();
-    this.instanceId = instance;
-  }
+    constructor(
+        path,
+        ref,
+        readonly,
+        relevant,
+        required,
+        constraint,
+        type,
+        node,
+        bind,
+        instance,
+    ) {
+        /**
+         * @type {string}
+         */
+        this.path = path;
+        /**
+         * @type {string}
+         */
+        this.ref = ref;
+        /**
+         * @type {boolean}
+         */
+        this.constraint = constraint;
+        /**
+         * @type {boolean}
+         */
+        this.readonly = readonly;
+        /**
+         * @type {boolean}
+         */
+        this.relevant = relevant;
+        /**
+         * @type {boolean}
+         */
+        this.required = required;
+        /**
+         * @type {string}
+         */
+        this.type = type;
+        /**
+         * @type {Node}
+         */
+        this.node = node;
+        /**
+         * @type {import('./fx-bind').FxBind}
+         */
+        this.bind = bind;
+        this.changed = false;
+        /**
+         * @type {import('./ui/fx-alert').FxAlert[]}
+         */
+        this.alerts = [];
+        /**
+         * @type {import('./ui/abstract-control').default[]}
+         */
+        this.boundControls = [];
+        // this.value = this._getValue();
+        this.instanceId = instance;
+    }
 
-  /*
+    /*
     get ref(){
         return this.bind.ref;
     }
 */
 
-  get value() {
-    if (!this.node) {
-      return null;
-    }
-    if (!this.node.nodeType) return this.node;
+    get value() {
+        if (!this.node) {
+            return null;
+        }
+        if (!this.node.nodeType) return this.node;
 
-    if (this.node.nodeType === Node.ATTRIBUTE_NODE) {
-      return this.node.nodeValue;
+        if (this.node.nodeType === Node.ATTRIBUTE_NODE) {
+            return this.node.nodeValue;
+        }
+        return this.node.textContent;
     }
-    return this.node.textContent;
-  }
 
-  /**
-   * @param  {Node} newVal
-   */
-  set value(newVal) {
-    // console.log('modelitem.setvalue oldVal', this.value);
-    // console.log('modelitem.setvalue newVal', newVal);
+    /**
+     * @param  {Node} newVal
+     */
+    set value(newVal) {
+        // console.log('modelitem.setvalue oldVal', this.value);
+        // console.log('modelitem.setvalue newVal', newVal);
 
-    if (newVal.nodeType === Node.DOCUMENT_NODE) {
-      this.node.replaceWith(newVal.firstElementChild);
-      this.node = newVal.firstElementChild;
-      // this.node.appendChild(newVal.firstElementChild);
-    } else if (newVal.nodeType === Node.ELEMENT_NODE) {
-      this.node.replaceWith(newVal);
-      this.node = newVal;
-      // this.node.appendChild(newVal);
-    } else if (this.node.nodeType === Node.ATTRIBUTE_NODE) {
-      this.node.nodeValue = newVal;
-    } else {
-      this.node.textContent = newVal;
+        if (newVal.nodeType === Node.DOCUMENT_NODE) {
+            this.node.replaceWith(newVal.firstElementChild);
+            this.node = newVal.firstElementChild;
+            // this.node.appendChild(newVal.firstElementChild);
+        } else if (newVal.nodeType === Node.ELEMENT_NODE) {
+            this.node.replaceWith(newVal);
+            this.node = newVal;
+            // this.node.appendChild(newVal);
+        } else if (this.node.nodeType === Node.ATTRIBUTE_NODE) {
+            this.node.nodeValue = newVal;
+        } else {
+            this.node.textContent = newVal;
+        }
     }
-  }
 
-  addAlert(alert) {
-    if (!this.alerts.includes(alert)) {
-      this.alerts.push(alert);
+    addAlert(alert) {
+        if (!this.alerts.includes(alert)) {
+            this.alerts.push(alert);
+        }
     }
-  }
 
-  cleanAlerts() {
-    this.alerts = [];
-  }
+    cleanAlerts() {
+        this.alerts = [];
+    }
 }