@jinntec/fore 1.0.0-2 → 1.0.0-5

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;
             }
@@ -152,6 +152,7 @@ export class FxFore extends HTMLElement {
 
     const html = `
            <jinn-toast id="message" gravity="bottom" position="left"></jinn-toast>
+           <jinn-toast id="sticky" gravity="bottom" position="left" duration="-1" close="true" data-class="sticky-message"></jinn-toast>
            <jinn-toast id="error" text="error" duration="-1" data-class="error" close="true" position="left" gravity="bottom"></jinn-toast>
            <slot></slot>
            <div id="modalMessage" class="overlay">
@@ -170,6 +171,10 @@ export class FxFore extends HTMLElement {
             </style>
             ${html}
         `;
+
+    this.toRefresh = [];
+    this.initialRun = true;
+    this.someInstanceDataStructureChanged = false;
   }
 
   connectedCallback() {
@@ -183,6 +188,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 +209,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 +338,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 +415,8 @@ export class FxFore extends HTMLElement {
       this.storedTemplateExpressions = [];
     }
 
+    console.log('######### storedTemplateExpressions', this.storedTemplateExpressions.length);
+
     /*
         storing expressions and their nodes for re-evaluation
          */
@@ -329,21 +427,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 +656,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',
@@ -562,8 +677,10 @@ export class FxFore extends HTMLElement {
     await this.refresh();
     // this.style.display='block'
     this.classList.add('fx-ready');
+    document.body.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... ##########');
@@ -613,9 +730,9 @@ export class FxFore extends HTMLElement {
       this.shadowRoot.getElementById('messageContent').innerText = msg;
       // this.shadowRoot.getElementById('modalMessage').open();
       this.shadowRoot.getElementById('modalMessage').classList.add('show');
-    } else if (level === 'modeless') {
+    } else if (level === 'sticky') {
       // const notification = this.$.modeless;
-      this.shadowRoot.querySelector('#message').showToast(msg);
+      this.shadowRoot.querySelector('#sticky').showToast(msg);
     } else {
       const toast = this.shadowRoot.querySelector('#message');
       toast.showToast(msg);

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,20 @@ import { evaluateXPathToFirstNode } from './xpath-evaluation.js';
 
 import { XPathUtil } from './xpath-util.js';
 
-function _getParentElement(node) {
-  if (node.nodeType === Node.ATTRIBUTE_NODE) {
+
+function _getElement(node) {
+  if (node && node.nodeType && 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;
 }
 
@@ -29,7 +39,10 @@ function _getInitialContext(node, ref) {
   const model = _getModelInContext(node);
   if (XPathUtil.isAbsolutePath(ref)) {
     const instanceId = XPathUtil.getInstanceId(ref);
-    return model.getInstance(instanceId).getDefaultContext();
+    if(instanceId){
+      return model.getInstance(instanceId).getDefaultContext();
+    }
+    return model.getDefaultInstance().getDefaultContext();
   }
   if (model.getDefaultInstance() !== null && model.inited) {
     return model.getDefaultInstance().getDefaultContext();
@@ -38,7 +51,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;
@@ -47,13 +60,40 @@ export default function getInScopeContext(node, ref) {
 
   const repeatItem = parentElement.closest('fx-repeatitem');
   if (repeatItem) {
+    if(node.nodeName === 'context'){
+      return evaluateXPathToFirstNode(node.nodeValue, repeatItem.nodeset, _getForeContext(parentElement));
+    }
     return repeatItem.nodeset;
   }
 
-  if (node.nodeType === Node.ELEMENT_NODE && node.hasAttribute('context')) {
-    const initialContext = _getInitialContext(node.parentNode, ref);
-    const contextAttr = node.getAttribute('context');
+  if (parentElement.hasAttribute('context')) {
+    const initialContext = _getInitialContext(node.ownerElement.parentNode, ref);
+    const contextAttr = node.ownerElement.getAttribute('context');
     return evaluateXPathToFirstNode(contextAttr, initialContext, _getForeContext(parentElement));
   }
+
+  if (node.nodeType === Node.ATTRIBUTE_NODE && node.nodeName === 'context') {
+    const initialContext = _getInitialContext(node.ownerElement.parentNode, ref);
+    const contextAttr = node.ownerElement.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-container.js

@@ -44,6 +44,10 @@ export class FxContainer extends foreElementMixin(HTMLElement) {
     if (this.isBound()) {
       this.evalInContext();
       this.modelItem = this.getModelItem();
+      if(!this.modelItem.boundControls.includes(this)){
+        this.modelItem.boundControls.push(this);
+      }
+
       // this.value = this.modelItem.value;
     }
 

package/src/ui/fx-dialog.js

@@ -0,0 +1,77 @@
+import {Fore} from '../fore.js';
+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;
+            transition:opacity 0.4s linear;
+          }
+
+        `;
+
+        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.addEventListener('transitionend',()=>{
+            console.log('transitionend');
+            // this.style.display = 'none';
+        });
+
+        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');
+    }
+
+    async hide(){
+        await Fore.fadeOutElement(this,400);
+        this.classList.remove('show');
+    }
+
+}
+
+customElements.define('fx-dialog', FxDialog);

package/src/ui/fx-items.js

@@ -1,6 +1,4 @@
-import XfAbstractControl from './abstract-control.js';
 import { evaluateXPath, evaluateXPathToString, evaluateXPathToNodes } from '../xpath-evaluation.js';
-import getInScopeContext from '../getInScopeContext.js';
 import FxControl from './fx-control.js';
 import { Fore } from '../fore.js';
 
@@ -103,12 +101,15 @@ export class FxItems extends FxControl {
     // getting expr
     const expr = input.value;
     const cutted = expr.substring(1, expr.length - 1);
-    const evaluated = evaluateXPath(cutted, node, newEntry);
+    const evaluated = evaluateXPathToString(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;
     }
   }

package/src/ui/fx-output.js

@@ -1,5 +1,5 @@
 import XfAbstractControl from './abstract-control.js';
-import { evaluateXPath, evaluateXPathToString } from '../xpath-evaluation.js';
+import { evaluateXPath, evaluateXPathToStrings } from '../xpath-evaluation.js';
 import getInScopeContext from '../getInScopeContext.js';
 // import {markdown} from '../drawdown.js';
 
@@ -68,19 +68,16 @@ export class FxOutput extends XfAbstractControl {
   }
 
   async refresh() {
-    // ### 1. eval 'value' attr
-    // await super.refresh();
+    // Resolve the ref first. The ref will set the `nodeset` which is important for the 'context'
+    if (this.ref) {
+      await super.refresh();
+    }
 
+    // ### 2. Eval the value
     if (this.valueAttr) {
       this.value = this.getValue();
       await this.updateWidgetValue();
-      return;
     }
-    // ### 2. eval 'ref' attr
-    if (this.ref) {
-      super.refresh();
-    }
-    // ### 3. use inline content which is there anyway
   }
 
   getValue() {
@@ -90,7 +87,8 @@ export class FxOutput extends XfAbstractControl {
       if (this.hasAttribute('html')) {
         return evaluateXPath(this.valueAttr, inscopeContext, this);
       }
-      return evaluateXPathToString(this.valueAttr, inscopeContext, this);
+
+      return evaluateXPathToStrings(this.valueAttr, inscopeContext, this)[0];
     } catch (error) {
       console.error(error);
       this.dispatch('error', { message: error });
@@ -119,7 +117,7 @@ export class FxOutput extends XfAbstractControl {
         return;
 */
 
-        const node = this.modelItem.node;
+        const { node } = this.modelItem;
 
         if (node.nodeType) {
           // const mainSlot = this.shadowRoot.querySelector('#main');