@jinntec/fore 1.0.0-2 → 1.0.0-3

package/src/actions/fx-hide.js

@@ -0,0 +1,23 @@
+import { FxAction } from './fx-action.js';
+
+/**
+ * `fx-hide`
+ * hides a dialog
+ *
+ * @customElement
+ * @demo demo/project.html
+ */
+export class FxHide extends FxAction {
+  connectedCallback() {
+    this.dialog = this.getAttribute('dialog');
+    if(!this.dialog){
+      this.dispatch('error',{message:'dialog does not exist'})
+    }
+  }
+
+  perform() {
+    document.getElementById(this.dialog).hide();
+  }
+}
+
+window.customElements.define('fx-hide', FxHide);

package/src/actions/fx-insert.js

@@ -86,7 +86,7 @@ export class FxInsert extends AbstractAction {
         */
 
     // ### obtaining targetSequence
-    const inscope = getInScopeContext(this, this.ref);
+    const inscope = getInScopeContext(this.getAttributeNode('ref'), this.ref);
 
     // @ts-ignore
     const targetSequence = evaluateXPathToNodes(this.ref, inscope, this.getOwnerForm());

package/src/actions/fx-setvalue.js

@@ -44,7 +44,7 @@ export default class FxSetvalue extends AbstractAction {
     super.perform();
     let { value } = this;
     if (this.valueAttr !== null) {
-      value = evaluateXPath(this.valueAttr, this.nodeset, this.getOwnerForm(), this.detail);
+      value = evaluateXPath(this.valueAttr, this.nodeset, this, this.detail);
     } else if (this.textContent !== '') {
       value = this.textContent;
     } else {

package/src/actions/fx-show.js

@@ -0,0 +1,23 @@
+import { FxAction } from './fx-action.js';
+
+/**
+ * `fx-confirm`
+ * Displays a simple confirmation before actually executing the nested actions.
+ *
+ * @customElement
+ * @demo demo/project.html
+ */
+export class FxShow extends FxAction {
+  connectedCallback() {
+    this.dialog = this.getAttribute('dialog');
+    if(!this.dialog){
+      this.dispatch('error',{message:'dialog does not exist'})
+    }
+  }
+
+  perform() {
+    document.getElementById(this.dialog).open();
+  }
+}
+
+window.customElements.define('fx-show', FxShow);

package/src/fore.js

@@ -83,6 +83,7 @@ export class Fore {
       'FX-TEXTAREA',
       'FX-TRIGGER',
       'FX-UPLOAD',
+      'FX-VAR',
     ];
   }
 

package/src/fx-bind.js

@@ -7,6 +7,7 @@ import {
   evaluateXPathToString,
 } from './xpath-evaluation.js';
 import { XPathUtil } from './xpath-util.js';
+import getInScopeContext from './getInScopeContext.js';
 
 /**
  * FxBind declaratively attaches constraints to nodes in the data (instances).
@@ -229,12 +230,6 @@ export class FxBind extends foreElementMixin(HTMLElement) {
     }
   }
 
-  _addNode(path, node) {
-    if (!this.model.mainGraph.hasNode(path)) {
-      this.model.mainGraph.addNode(path, { node });
-    }
-  }
-
   /**
    * Add the dependencies of this bind
    *
@@ -245,6 +240,7 @@ export class FxBind extends foreElementMixin(HTMLElement) {
    * @param  {string}  property The property with this dependency
    */
   _addDependencies(refs, node, path, property) {
+    // console.log('_addDependencies',path);
     const nodeHash = `${path}:${property}`;
     if (refs.length !== 0) {
       if (!this.model.mainGraph.hasNode(nodeHash)) {
@@ -252,11 +248,15 @@ export class FxBind extends foreElementMixin(HTMLElement) {
       }
       refs.forEach(ref => {
         const otherPath = XPathUtil.getPath(ref);
+        // console.log('otherPath', otherPath)
 
-        if (!this.model.mainGraph.hasNode(otherPath)) {
-          this.model.mainGraph.addNode(otherPath, ref);
+        // todo: nasty hack to prevent duplicate pathes like 'a[1]' and 'a[1]/text()[1]' to end up as separate nodes in the graph
+        if(!otherPath.endsWith('text()[1]')){
+          if (!this.model.mainGraph.hasNode(otherPath)) {
+            this.model.mainGraph.addNode(otherPath, ref);
+          }
+          this.model.mainGraph.addDependency(nodeHash, otherPath);
         }
-        this.model.mainGraph.addDependency(nodeHash, otherPath);
       });
     } else {
       this.model.mainGraph.addNode(nodeHash, node);
@@ -321,7 +321,7 @@ export class FxBind extends foreElementMixin(HTMLElement) {
    * overwrites
    */
   _evalInContext() {
-    const inscopeContext = this.getInScopeContext();
+    const inscopeContext = getInScopeContext(this.getAttributeNode('ref') || this, this.ref);
 
     // reset nodeset
     this.nodeset = [];
@@ -509,6 +509,8 @@ export class FxBind extends foreElementMixin(HTMLElement) {
    * @param  {string}  propertyExpr  The XPath to get the referenced nodes from
    *
    * @return {Node[]}  The nodes that are referenced by the XPath
+   *
+   * todo: DependencyNotifyingDomFacade reports back too much in some cases like 'a[1]' and 'a[1]/text[1]'
    */
   _getReferencesForProperty(propertyExpr) {
     if (propertyExpr) {

package/src/fx-fore.js

@@ -64,7 +64,7 @@ export class FxFore extends HTMLElement {
 
     const style = `
             :host {
-                display: none;
+                // display: none;
                 height:auto;
                 padding:var(--model-element-padding);
                 font-family:Roboto, sans-serif;
@@ -97,7 +97,7 @@ export class FxFore extends HTMLElement {
               visibility: visible;
               opacity: 1;
             }
-            
+
             .popup {
               margin: 70px auto;
               background: #fff;
@@ -133,7 +133,7 @@ export class FxFore extends HTMLElement {
             .popup .close:focus{
                 outline:none;
             }
-            
+
             .popup .close:hover {
                 color: #06D85F;
             }
@@ -170,6 +170,10 @@ export class FxFore extends HTMLElement {
             </style>
             ${html}
         `;
+
+    this.toRefresh = [];
+    this.initialRun = true;
+    this.someInstanceDataStructureChanged = false;
   }
 
   connectedCallback() {
@@ -183,6 +187,12 @@ export class FxFore extends HTMLElement {
       this.intersectionObserver = new IntersectionObserver(this.handleIntersect, options);
     }
 
+    this.src = this.hasAttribute('src')? this.getAttribute('src'):null;
+    if(this.src){
+      this._loadFromSrc();
+      return ;
+    }
+
     const slot = this.shadowRoot.querySelector('slot');
     slot.addEventListener('slotchange', event => {
       const children = event.target.assignedElements();
@@ -198,10 +208,71 @@ export class FxFore extends HTMLElement {
         console.log(
           `########## FORE: kick off processing for ... ${window.location.href} ##########`,
         );
+        if(this.src){
+          console.log('########## FORE: loaded from ... ', this.src, '##########');
+        }
         modelElement.modelConstruct();
       }
       this.model = modelElement;
     });
+    this.addEventListener('path-mutated', (e) =>{
+      console.log('path-mutated event received', e.detail.path, e.detail.index);
+      this.someInstanceDataStructureChanged = true;
+    });
+  }
+
+
+  addToRefresh(modelItem){
+    const found = this.toRefresh.find(mi => mi.path === modelItem.path );
+    if(!found){
+      this.toRefresh.push(modelItem);
+    }
+  }
+
+  /**
+   * loads a Fore from an URL given by `src`.
+   *
+   * Will extract the `fx-fore` element from that target file and use and replace current `fx-fore` element with the loaded one.
+   * @private
+   */
+  _loadFromSrc() {
+    console.log('########## loading Fore from ',this.src ,'##########');
+    fetch(this.src, {
+      method: 'GET',
+      mode: 'cors',
+      credentials: 'include',
+      headers: {
+        'Content-Type': 'text/html',
+      },
+    })
+        .then(response => {
+          const responseContentType = response.headers.get('content-type').toLowerCase();
+          console.log('********** responseContentType *********', responseContentType);
+          if (responseContentType.startsWith('text/html')) {
+            // const htmlResponse = response.text();
+            // return new DOMParser().parseFromString(htmlResponse, 'text/html');
+            // return response.text();
+            return response.text().then(result =>
+                // console.log('xml ********', result);
+                new DOMParser().parseFromString(result, 'text/html'),
+            );
+          }
+          return 'done';
+        })
+        .then(data => {
+          // const theFore = fxEvaluateXPathToFirstNode('//fx-fore', data.firstElementChild);
+          const theFore = data.querySelector('fx-fore');
+
+          // console.log('thefore', theFore)
+          if(!theFore){
+            this.dispatchEvent(new CustomEvent('error',{detail:{message: `Fore element not found in '${this.src}'. Maybe wrapped within 'template' element?`}}));
+          }
+          theFore.setAttribute('from-src', this.src);
+          this.replaceWith(theFore);
+        })
+        .catch(error => {
+          this.dispatchEvent(new CustomEvent('error',{detail:{message: `'${this.src}' not found or does not contain Fore element.`}}));
+        });
   }
 
   /**
@@ -266,32 +337,56 @@ export class FxFore extends HTMLElement {
 
     console.time('refresh');
 
-    /*
-    const changedModelItems = this.getModel().changed;
-    const graph = this.getModel().mainGraph;
-    let doRefresh = true;
-    changedModelItems.forEach(item => {
-      if(graph.hasNode(item.path)) {
-        const deps = graph.dependentsOf(item.path, false);
-        if (deps.length === 0) {
-          doRefresh=false;
+    // ### refresh Fore UI elements
+    console.time('refreshChildren');
+    console.log('toRefresh',this.toRefresh);
+
+    if(!this.initialRun && this.toRefresh.length !== 0){
+      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();
+          });
         }
-      }
-    });
-    this.getModel().changed = [];
 
-    if (!doRefresh) {
-      this.dispatchEvent(new CustomEvent('refresh-done'));
-      return ;
+        // ### check if other controls depend on current modelItem
+        const mainGraph = this.getModel().mainGraph;
+        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()});
+            });
+            needsRefresh = true;
+          }
+        }
+      });
+      this.toRefresh = [];
+      if(!needsRefresh){
+        console.log('skipping refresh - no dependants');
+      }
+    }else{
+      Fore.refreshChildren(this, true);
+      console.timeEnd('refreshChildren');
     }
-*/
-    // ### refresh Fore UI elements
-    console.time('refreshChildren');
-    Fore.refreshChildren(this, true);
-    console.timeEnd('refreshChildren');
 
     // ### refresh template expressions
-    this._updateTemplateExpressions();
+    if(this.initialRun || this.someInstanceDataStructureChanged){
+      this._updateTemplateExpressions();
+      this.someInstanceDataStructureChanged = false; //reset
+    }
+    this._processTemplateExpressions();
+
     console.timeEnd('refresh');
 
     console.groupEnd();
@@ -319,6 +414,8 @@ export class FxFore extends HTMLElement {
       this.storedTemplateExpressions = [];
     }
 
+    console.log('######### storedTemplateExpressions', this.storedTemplateExpressions.length);
+
     /*
         storing expressions and their nodes for re-evaluation
          */
@@ -329,21 +426,26 @@ export class FxFore extends HTMLElement {
       }
       const expr = this._getTemplateExpression(node);
 
+      // console.log('storedTemplateExpressionByNode', this.storedTemplateExpressionByNode);
       this.storedTemplateExpressionByNode.set(node, expr);
     });
+    console.log('stored template expressions ', this.storedTemplateExpressionByNode);
 
     // TODO: Should we clean up nodes that existed but are now gone?
+    this._processTemplateExpressions();
+
+  }
+
+  _processTemplateExpressions() {
     for (const node of this.storedTemplateExpressionByNode.keys()) {
       this._processTemplateExpression({
         node,
         expr: this.storedTemplateExpressionByNode.get(node),
       });
     }
-
-    console.log('stored template expressions ', this.storedTemplateExpressionByNode);
   }
 
-  // eslint-disable-next-line class-methods-use-this
+// eslint-disable-next-line class-methods-use-this
   _processTemplateExpression(exprObj) {
     // console.log('processing template expression ', exprObj);
 
@@ -553,6 +655,18 @@ export class FxFore extends HTMLElement {
 
     await this._lazyCreateInstance();
 
+    console.log('registering variables!');
+    const variables = new Map();
+    (function registerVariables(node) {
+      for (const child of node.children) {
+        if ('setInScopeVariables' in child) {
+          child.setInScopeVariables(variables);
+        }
+        registerVariables(child);
+      }
+    })(this);
+    console.log('Found variables:', variables);
+
     const options = {
       root: null,
       rootMargin: '0px',
@@ -564,6 +678,7 @@ export class FxFore extends HTMLElement {
     this.classList.add('fx-ready');
 
     this.ready = true;
+    this.initialRun = false;
     console.log('### <<<<< dispatching ready >>>>>');
     console.log('########## modelItems: ', this.getModel().modelItems);
     console.log('########## FORE: form fully initialized... ##########');

package/src/fx-model.js

@@ -157,7 +157,7 @@ export class FxModel extends HTMLElement {
   rebuild() {
     console.group('### rebuild');
     console.time('rebuild');
-    this.mainGraph = new DepGraph(false);
+    this.mainGraph = new DepGraph(false); //do: should be moved down below binds.length check but causes errors in tests.
     this.modelItems = [];
 
     // trigger recursive initialization of the fx-bind elements
@@ -167,6 +167,7 @@ export class FxModel extends HTMLElement {
       this.skipUpdate = true;
       return ;
     }
+
     binds.forEach(bind => {
       bind.init(this);
     });
@@ -195,7 +196,7 @@ export class FxModel extends HTMLElement {
    */
   recalculate() {
     console.group('### recalculate');
-    console.log('recalculate instances ', this.instances);
+    console.log('changed nodes ', this.changed);
 
     console.time('recalculate');
     this.computes = 0;
@@ -242,6 +243,8 @@ export class FxModel extends HTMLElement {
           this.compute(node, path);
         }
       });
+      const toRefresh = [...this.changed];
+      this.formElement.toRefresh = toRefresh;
       this.changed = [];
       console.log('subgraph', this.subgraph);
       this.dispatchEvent(
@@ -380,6 +383,7 @@ export class FxModel extends HTMLElement {
             const compute = evaluateXPathToBoolean(constraint, modelItem.node, this);
             console.log('modelItem validity computed: ', compute);
             modelItem.constraint = compute;
+            this.formElement.addToRefresh(modelItem); // let fore know that modelItem needs refresh
             if (!compute) valid = false;
             // ### alerts are added only once during model-construct. Otherwise they would add up in each run of revalidate()
             if (!this.modelConstructed) {

package/src/fx-submission.js

@@ -81,6 +81,9 @@ export class FxSubmission extends foreElementMixin(HTMLElement) {
       const valid = model.revalidate();
       if (!valid) {
         console.log('validation failed. Bubmission stopped');
+        // ### allow alerts to pop up
+        this.dispatch('submit-error', {});
+        this.getModel().parentNode.refresh();
         return;
       }
     }

package/src/fx-var.js

@@ -0,0 +1,43 @@
+import './fx-instance.js';
+import { evaluateXPath } from './xpath-evaluation.js';
+import { foreElementMixin } from './ForeElementMixin.js';
+import getInScopeContext from './getInScopeContext.js';
+
+/**
+ * @ts-check
+ */
+export class FxVariable extends foreElementMixin(HTMLElement) {
+  constructor() {
+    super();
+
+    this.attachShadow({ mode: 'open' });
+    this.name = '';
+    this.valueQuery = '';
+    this.value = null;
+  }
+
+  connectedCallback() {
+    this.name = this.getAttribute('name');
+    this.valueQuery = this.getAttribute('value');
+  }
+
+  refresh() {
+    const inscope = getInScopeContext(this, this.valueQuery);
+
+    this.value = evaluateXPath(this.valueQuery, inscope, this, this.precedingVariables);
+  }
+
+  setInScopeVariables(inScopeVariables) {
+    if (inScopeVariables.has(this.name)) {
+      console.error(`The variable ${this.name} is declared more than once`);
+      this.dispatch('xforms-binding-error');
+      return;
+    }
+    inScopeVariables.set(this.name, this);
+    // Clone the preceding variables to make sure we are not going to get access to variables we
+    // should not get access to
+    this.inScopeVariables = new Map(inScopeVariables);
+  }
+}
+
+customElements.define('fx-var', FxVariable);

package/src/getInScopeContext.js

@@ -2,10 +2,18 @@ import { evaluateXPathToFirstNode } from './xpath-evaluation.js';
 
 import { XPathUtil } from './xpath-util.js';
 
-function _getParentElement(node) {
+function _getElement(node) {
   if (node.nodeType === Node.ATTRIBUTE_NODE) {
+    // The context of an attribute is the ref of the element it's defined on
     return node.ownerElement;
   }
+
+  if (node.nodeType === Node.ELEMENT_NODE) {
+    // The context of a query should be the element having a ref
+    return node;
+  }
+
+  // For text nodes, just start looking from the parent element
   return node.parentNode;
 }
 
@@ -38,7 +46,7 @@ function _getInitialContext(node, ref) {
 }
 
 export default function getInScopeContext(node, ref) {
-  const parentElement = _getParentElement(node);
+  const parentElement = _getElement(node);
   /*
   if(parentElement.nodeName.toUpperCase() === 'FX-REPEATITEM'){
     return parentElement.nodeset;
@@ -50,10 +58,23 @@ export default function getInScopeContext(node, ref) {
     return repeatItem.nodeset;
   }
 
-  if (node.nodeType === Node.ELEMENT_NODE && node.hasAttribute('context')) {
-    const initialContext = _getInitialContext(node.parentNode, ref);
-    const contextAttr = node.getAttribute('context');
-    return evaluateXPathToFirstNode(contextAttr, initialContext, _getForeContext(parentElement));
+  if (node.nodeType === Node.ATTRIBUTE_NODE && node.nodeName === 'ref') {
+    // Note: do not consider the ref of the owner element since it should not be used to define the
+    // context
+    if (node.ownerElement.hasAttribute('context')) {
+      const initialContext = _getInitialContext(node.ownerElement.parentNode, ref);
+      const contextAttr = node.ownerElement.getAttribute('context');
+      return evaluateXPathToFirstNode(contextAttr, initialContext, _getForeContext(parentElement));
+    }
+
+    // Never resolve the context from a ref itself!
+    return _getInitialContext(parentElement.parentNode, ref);
   }
+
+  // if (node.nodeType === Node.ELEMENT_NODE && node.hasAttribute('context')) {
+  //   const initialContext = _getInitialContext(node.parentNode, ref);
+  //   const contextAttr = node.getAttribute('context');
+  //   return evaluateXPathToFirstNode(contextAttr, initialContext, _getForeContext(parentElement));
+  // }
   return _getInitialContext(parentElement, ref);
 }

package/src/modelitem.js

@@ -30,6 +30,7 @@ export class ModelItem {
     this.bind = bind;
     this.changed = false;
     this.alerts = [];
+    this.boundControls = [];
     // this.value = this._getValue();
   }
 

package/src/ui/abstract-control.js

@@ -31,7 +31,7 @@ export default class AbstractControl extends foreElementMixin(HTMLElement) {
 
     const currentVal = this.value;
 
-    // if(this.repeated) return ;
+    // if(this.repeated) return
     if (this.isNotBound()) return;
 
     // await this.updateComplete;
@@ -52,6 +52,14 @@ export default class AbstractControl extends foreElementMixin(HTMLElement) {
         // console.log('### XfAbstractControl.refresh modelItem : ', this.modelItem);
 
         this.value = this.modelItem.value;
+
+        /*
+        this is another case that highlights the fact that an init() function might make sense in general.
+         */
+        if(!this.modelItem.boundControls.includes(this)){
+          this.modelItem.boundControls.push(this);
+        }
+
         // console.log('>>>>>>>> abstract refresh ', this.control);
         // this.control[this.valueProp] = this.value;
         await this.updateWidgetValue();

package/src/ui/fx-dialog.js

@@ -0,0 +1,68 @@
+export class FxDialog extends HTMLElement {
+
+    static get properties() {
+        return {
+            id: String
+        };
+    }
+
+    constructor() {
+        super();
+        this.attachShadow({mode: 'open'});
+    }
+
+    connectedCallback() {
+        const style = `
+          :host {
+            display: none;
+            height: 100vh;
+            width:100vw;
+            position:fixed;
+            left:0;
+            top:0;
+            right:0;
+            bottom:0;
+          }
+        `;
+
+        this.shadowRoot.innerHTML = this.render(style);
+        this.id = this.getAttribute('id');
+
+        // const dialog = document.getElementById(this.id);
+
+        const closeBtn = this.querySelector('.close-dialog');
+        if (closeBtn) {
+            closeBtn.addEventListener('click', (e) => {
+                document.getElementById(this.id).classList.remove('show');
+            });
+        }
+
+        this.focus();
+    }
+
+    render(styles) {
+        return `
+      <style>
+          ${styles}
+      </style>
+      <slot></slot>
+    `;
+    }
+
+    open(){
+        window.addEventListener('keyup', (e) => {
+            if (e.key === "Escape") {
+                this.hide();
+            }
+        },{once:true});
+
+        this.classList.add('show');
+    }
+
+    hide(){
+        this.classList.remove('show');
+    }
+
+}
+
+customElements.define('fx-dialog', FxDialog);

package/src/ui/fx-items.js

@@ -105,10 +105,13 @@ export class FxItems extends FxControl {
     const cutted = expr.substring(1, expr.length - 1);
     const evaluated = evaluateXPath(cutted, node, newEntry);
 
-    const valAttr = this.getAttribute('value');
+    // adding space around value to allow matching of 'words'
+    const spaced = ` ${evaluated} `;
+
+    const valAttr = ` ${this.getAttribute('value')} `;
     input.value = evaluated;
     input.setAttribute('id', id);
-    if (valAttr.indexOf(input.value) !== -1) {
+    if (valAttr.indexOf(spaced) !== -1) {
       input.checked = true;
     }
   }