@jinntec/fore 1.0.0-4 → 1.1.0

package/src/fore.js

@@ -127,7 +127,12 @@ export class Fore {
       const { children } = startElement;
       if (children) {
         Array.from(children).forEach(element => {
+          if (element.nodeName.toUpperCase() === 'FX-FORE') {
+            resolve('done');
+          }
           if (Fore.isUiElement(element.nodeName) && typeof element.refresh === 'function') {
+            // console.log('refreshing', element, element?.ref);
+            // console.log('refreshing ',element);
             element.refresh();
           } else if (element.nodeName.toUpperCase() !== 'FX-MODEL') {
             Fore.refreshChildren(element, force);
@@ -140,14 +145,21 @@ export class Fore {
     return refreshed;
   }
 
-  static isRepeated(element) {
-    return element.closest('fx-repeatitem') !== null;
-  }
-
-  static getRepeatTarget(element, id) {
-    const repeatContextItem = element.closest('fx-repeatitem');
-    const target = repeatContextItem.querySelector(`#${id}`);
-    return target;
+  /**
+   * Alternative to `closest` that respects subcontrol boundaries
+   */
+  static getClosest(querySelector, start) {
+    while (!start.matches(querySelector)) {
+      if (start.matches('fx-fore')) {
+        // Subform reached. Bail out
+        return null;
+      }
+      start = start.parentNode;
+      if (!start) {
+        return null;
+      }
+    }
+    return start;
   }
 
   /**
@@ -190,8 +202,8 @@ export class Fore {
     return fadeIn();
   }
 
-  static fadeOutElement(element) {
-    const duration = 2600;
+  static fadeOutElement(element, duration) {
+    // const duration = duration;
     let fadeOut = () => {
       // Stop all current animations
       if (element.getAnimations) {
@@ -212,14 +224,148 @@ export class Fore {
 
   static dispatch(target, eventName, detail) {
     const event = new CustomEvent(eventName, {
-      composed: true,
+      composed: false,
       bubbles: true,
       detail,
     });
-    console.log('firing', event);
+    console.log('dispatching', event);
     target.dispatchEvent(event);
   }
 
+  static prettifyXml(source) {
+    const xmlDoc = new DOMParser().parseFromString(source, 'application/xml');
+    const xsltDoc = new DOMParser().parseFromString(
+      [
+        // describes how we want to modify the XML - indent everything
+        '<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">',
+        '  <xsl:output method="xml" indent="yes" omit-xml-declaration="yes"/>',
+        '  <xsl:strip-space elements="*"/>',
+        '  <xsl:template match="text()">', // change to just text() to strip space in text nodes
+        '    <xsl:value-of select="normalize-space(.)"/>',
+        '  </xsl:template>',
+        '  <xsl:template match="node()|@*">',
+        '    <xsl:copy>',
+        '        <xsl:apply-templates select="node()|@*"/>',
+        '    </xsl:copy>',
+        '  </xsl:template>',
+        '</xsl:stylesheet>',
+      ].join('\n'),
+      'application/xml',
+    );
+
+
+    const xsltProcessor = new XSLTProcessor();
+    xsltProcessor.importStylesheet(xsltDoc);
+    const resultDoc = xsltProcessor.transformToDocument(xmlDoc);
+    const resultXml = new XMLSerializer().serializeToString(resultDoc);
+    return resultXml;
+  }
+
+  static formatXml (xml) {
+    var reg = /(>)(<)(\/*)/g;
+    var wsexp = / *(.*) +\n/g;
+    var contexp = /(<.+>)(.+\n)/g;
+    xml = xml.replace(reg, '$1\n$2$3').replace(wsexp, '$1\n').replace(contexp, '$1\n$2');
+    var pad = 0;
+    var formatted = '';
+    var lines = xml.split('\n');
+    var indent = 0;
+    var lastType = 'other';
+    // 4 types of tags - single, closing, opening, other (text, doctype, comment) - 4*4 = 16 transitions
+    var transitions = {
+      'single->single': 0,
+      'single->closing': -1,
+      'single->opening': 0,
+      'single->other': 0,
+      'closing->single': 0,
+      'closing->closing': -1,
+      'closing->opening': 0,
+      'closing->other': 0,
+      'opening->single': 1,
+      'opening->closing': 0,
+      'opening->opening': 1,
+      'opening->other': 1,
+      'other->single': 0,
+      'other->closing': -1,
+      'other->opening': 0,
+      'other->other': 0
+    };
+
+    for (var i = 0; i < lines.length; i++) {
+      var ln = lines[i];
+      var single = Boolean(ln.match(/<.+\/>/)); // is this line a single tag? ex. <br />
+      var closing = Boolean(ln.match(/<\/.+>/)); // is this a closing tag? ex. </a>
+      var opening = Boolean(ln.match(/<[^!].*>/)); // is this even a tag (that's not <!something>)
+      var type = single ? 'single' : closing ? 'closing' : opening ? 'opening' : 'other';
+      var fromTo = lastType + '->' + type;
+      lastType = type;
+      var padding = '';
+
+      indent += transitions[fromTo];
+      for (var j = 0; j < indent; j++) {
+        padding += '    ';
+      }
+
+      formatted += padding + ln + '\n';
+    }
+  }
+
+  static async loadForeFromUrl(hostElement, url) {
+    console.log('########## loading Fore from ', this.src, '##########');
+    await fetch(url, {
+      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')) {
+          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) {
+          hostElement.dispatchEvent(
+            new CustomEvent('error', {
+              composed: false,
+              bubbles: true,
+              detail: {
+                message: 'cyclic graph',
+              },
+            }),
+          );
+        }
+        hostElement.appendChild(theFore);
+        theFore.classList.add('widget');
+        // return theFore;
+        // theFore.setAttribute('from-src', this.src);
+        // this.replaceWith(theFore);
+      })
+      .catch(error => {
+        hostElement.dispatchEvent(
+          new CustomEvent('error', {
+            composed: false,
+            bubbles: true,
+            detail: {
+              error: error,
+              message: `'${url}' not found or does not contain Fore element.`,
+            },
+          }),
+        );
+      });
+  }
+
   /**
    * clear all text nodes and attribute values to get a 'clean' template.
    * @param n

package/src/functions/fx-function.js

@@ -1,6 +1,6 @@
 import { registerCustomXPathFunction } from 'fontoxpath';
 import { foreElementMixin } from '../ForeElementMixin.js';
-import { evaluateXPath } from '../xpath-evaluation.js';
+import { evaluateXPath, globallyDeclaredFunctionLocalNames } from '../xpath-evaluation.js';
 
 /**
  * Allows to extend a form with local custom functions.
@@ -41,10 +41,16 @@ export class FxFunction extends foreElementMixin(HTMLElement) {
 
     // TODO: lookup prefix
     const functionIdentifier =
-      prefix === 'local'
+      prefix === 'local' || !prefix
         ? { namespaceURI: 'http://www.w3.org/2005/xquery-local-functions', localName }
         : `${prefix}:${localName}`;
 
+    // Make the function available globally w/o a prefix. See the functionNameResolver for for how
+    // this is picked up
+    if (!prefix) {
+      globallyDeclaredFunctionLocalNames.push(localName);
+    }
+
     const paramParts = params
       ? params.split(',').map(param => {
           const match = param.match(/(?<variableName>\$[^\s]+)(?:\sas\s(?<varType>.+))/);
@@ -77,7 +83,12 @@ export class FxFunction extends foreElementMixin(HTMLElement) {
         break;
       }
 
+      case 'text/xquf':
+      case 'text/xquery':
       case 'text/xpath': {
+        const language = type === 'text/xpath' ?
+            'XPath3.1' : type === 'text/xquery' ?
+            'XQuery3.1' : 'XQueryUpdate3.1';
         const fun = (domFacade, ...args) =>
           evaluateXPath(
             this.functionBody,
@@ -87,6 +98,7 @@ export class FxFunction extends foreElementMixin(HTMLElement) {
               variablesByName[paramPart.variableName.replace('$', '')] = args[i];
               return variablesByName;
             }, {}),
+			  {language}
           );
         registerCustomXPathFunction(
           functionIdentifier,
@@ -102,4 +114,6 @@ export class FxFunction extends foreElementMixin(HTMLElement) {
     }
   }
 }
-customElements.define('fx-function', FxFunction);
+if (!customElements.get('fx-function')) {
+  customElements.define('fx-function', FxFunction);
+}

package/src/fx-bind.js

@@ -1,5 +1,6 @@
 import { DependencyNotifyingDomFacade } from './DependencyNotifyingDomFacade.js';
 import { foreElementMixin } from './ForeElementMixin.js';
+import { Fore } from './fore.js';
 import { ModelItem } from './modelitem.js';
 import {
   evaluateXPathToBoolean,
@@ -32,98 +33,8 @@ export class FxBind extends foreElementMixin(HTMLElement) {
 
   static TYPE_DEFAULT = 'xs:string';
 
-  /*
-    static get styles() {
-        return css`
-            :host {
-                display: none;
-            }
-        `;
-    }
-*/
-
-  /*
-    static get properties() {
-        return {
-            ...super.properties,
-
-            /!**
-             * allows to calculate a value. This value will become readonly.
-             *!/
-            calculate: {
-                type: String
-            },
-            contextNode:{
-                type:Object
-            },
-            /!**
-             * arbitrary XPath resolving to xs:boolean - defaults to 'true()'
-             *!/
-            constraint: {
-                type: String
-            },
-            /!**
-             * id of this bind
-             *!/
-            id:{
-                type:String
-            },
-            /!**
-             * the nodeset the bind is referring to by it's binding expression (ref attribute)
-             *!/
-            nodeset: {
-                type: Array
-            },
-            /!**
-             * the owning model of this bind
-             *!/
-            model:{
-                type:Object
-            },
-            /!**
-             * XPath statement resolving to xs:boolean to switch between readonly and readwrite mode - defaults to 'false()'
-             *!/
-            readonly: {
-                type: String
-            },
-            /!**
-             * the XPath binding expression of this bind
-             *!/
-            ref: {
-                type: String
-            },
-            /!**
-             * XPath statement resolving to xs:boolean to switch between relevant and non-relevant mode - defaults to 'true()'
-             *!/
-            relevant: {
-                type: String
-            },
-            /!**
-             * XPath statement resolving to xs:boolean to switch between required and optional - defaults to 'false'.
-             *!/
-            required: {
-                type: String
-            },
-            /!**
-             * XPath statement
-             *!/
-            type: {
-                type: String
-            }
-        };
-    }
-*/
-
   constructor() {
     super();
-    // this.id='';
-    // this.ref = '';
-    // this.readonly = 'false()';
-    // this.required = 'false()';
-    // this.relevant = 'true()';
-    // this.constraint = 'true()';
-    // this.type = 'xs:string';
-    // this.calculate = '';
     this.nodeset = [];
     this.model = {};
     this.contextNode = {};
@@ -165,26 +76,23 @@ export class FxBind extends foreElementMixin(HTMLElement) {
     this._processChildren(model);
   }
 
-  /*
-    //todo: certainly not ideal to rely on duplicating instance id on instance document - better way later ;)
-    static getPath(node){
-        let path = fx.evaluateXPath('path()',node);
-        const instanceId = node.ownerDocument.firstElementChild.getAttribute('id');
-        if(instanceId !== 'default'){
-            return '#' + instanceId + FxBind.shortenPath(path);
-        }else {
-            return FxBind.shortenPath(path);
-        }
-
-    }
-*/
-
   _buildBindGraph() {
     if (this.bindType === 'xml') {
       this.nodeset.forEach(node => {
         const path = XPathUtil.getPath(node);
         this.model.mainGraph.addNode(path, node);
 
+        /* ### catching references in the 'ref' itself...
+        todo: investigate cases where 'ref' attributes use predicates pointing to other nodes. These would not be handled
+        in current implementation.
+
+        General question: are there valid use-cases for using a 'filter' expression to narrow the nodeset
+          where to apply constraints? Guess yes and if it's 'just' for reducing the amount of necessary modelItem objects.
+
+
+        */
+        // const foreignRefs = this.getReferences(this.ref);
+
         if (this.calculate) {
           this.model.mainGraph.addNode(`${path}:calculate`, node);
           // Calculated values are a dependency of the model item.
@@ -251,7 +159,7 @@ export class FxBind extends foreElementMixin(HTMLElement) {
         // console.log('otherPath', otherPath)
 
         // 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 (!otherPath.endsWith('text()[1]')) {
           if (!this.model.mainGraph.hasNode(otherPath)) {
             this.model.mainGraph.addNode(otherPath, ref);
           }
@@ -271,14 +179,6 @@ export class FxBind extends foreElementMixin(HTMLElement) {
     });
   }
 
-  /*
-    render() {
-        return html`
-             <slot></slot>
-        `;
-    }
-*/
-
   getAlert() {
     if (this.hasAttribute('alert')) {
       return this.getAttribute('alert');
@@ -290,33 +190,6 @@ export class FxBind extends foreElementMixin(HTMLElement) {
     return null;
   }
 
-  /*
-        firstUpdated(_changedProperties) {
-            super.firstUpdated(_changedProperties);
-        }
-    */
-
-  /*
-  namespaceResolver(prefix) {
-    // TODO: Do proper namespace resolving. Look at the ancestry / namespacesInScope of the declaration
-
-    /!**
-     * for (let ancestor = this; ancestor; ancestor = ancestor.parentNode) {
-     * 	if (ancestor.getAttribute(`xmlns:${prefix}`)) {
-     *   // Return value
-     *  }
-     * }
-     *!/
-
-    // console.log('namespaceResolver  prefix', prefix);
-    const ns = {
-      xhtml: 'http://www.w3.org/1999/xhtml',
-      // ''    : Fore.XFORMS_NAMESPACE_URI
-    };
-    return ns[prefix] || null;
-  }
-*/
-
   /**
    * overwrites
    */
@@ -335,7 +208,7 @@ export class FxBind extends foreElementMixin(HTMLElement) {
         } else {
           // eslint-disable-next-line no-lonely-if
           if (this.ref) {
-            const localResult = evaluateXPathToNodes(this.ref, n, this.getOwnerForm());
+            const localResult = evaluateXPathToNodes(this.ref, n, this);
             localResult.forEach(item => {
               this.nodeset.push(item);
             });
@@ -351,7 +224,7 @@ export class FxBind extends foreElementMixin(HTMLElement) {
     } else {
       const inst = this.getModel().getInstance(this.instanceId);
       if (inst.type === 'xml') {
-        this.nodeset = evaluateXPathToNodes(this.ref, inscopeContext, this.getOwnerForm());
+        this.nodeset = evaluateXPathToNodes(this.ref, inscopeContext, this);
       } else {
         this.nodeset = this.ref;
       }
@@ -361,11 +234,6 @@ export class FxBind extends foreElementMixin(HTMLElement) {
   _createModelItems() {
     // console.log('#### ', thi+s.nodeset);
 
-    /*
-                if(XPathUtil.isSelfReference(this.ref)){
-                    return;
-                }
-        */
     if (Array.isArray(this.nodeset)) {
       // todo - iterate and create
       // console.log('################################################ ', this.nodeset);
@@ -380,54 +248,6 @@ export class FxBind extends foreElementMixin(HTMLElement) {
     }
   }
 
-  static lazyCreateModelitems(model, ref, nodeset) {
-    if (Array.isArray(nodeset)) {
-      Array.from(nodeset).forEach(n => {
-        FxBind.lazyCreateModelItem(model, ref, n);
-      });
-    } else {
-      FxBind.lazyCreateModelItem(model, ref, nodeset);
-    }
-  }
-
-  /*
-    static lazyCreateModelItem(model,ref,node){
-        console.log('lazyCreateModelItem ', node);
-
-        let mItem = {};
-        let targetNode = {};
-        if(node === null) return null;
-        if(node.nodeType === node.TEXT_NODE){
-            // const parent = node.parentNode;
-            // console.log('PARENT ', parent);
-            targetNode = node.parentNode;
-        }else {
-            targetNode = node;
-        }
-
-        // const path = fx.evaluateXPath('path()',node);
-        const path = FxBind.getPath(node);
-
-        // const path = Fore.evaluateXPath ('path()', node, this, Fore.namespaceResolver) ;
-
-        // ### intializing ModelItem with default values (as there is no <fx-bind> matching for given ref)
-        const mi = new ModelItem(path,
-            ref,
-            FxBind.READONLY_DEFAULT,
-            FxBind.RELEVANT_DEFAULT,
-            FxBind.REQUIRED_DEFAULT,
-            FxBind.CONSTRAINT_DEFAULT,
-            FxBind.TYPE_DEFAULT,
-            targetNode,
-            this);
-
-
-        // console.log('new ModelItem is instanceof ModelItem ', mi instanceof ModelItem);
-        model.registerModelItem(mi);
-        return mi;
-    }
-*/
-
   /**
    * creates a ModelItem for given instance node.
    *
@@ -452,7 +272,7 @@ export class FxBind extends foreElementMixin(HTMLElement) {
         if bind is the dot expression we use the modelitem of the parent
          */
     if (XPathUtil.isSelfReference(this.ref)) {
-      const parentBoundElement = this.parentElement.closest('fx-bind[ref]');
+      const parentBoundElement = Fore.getClosest('fx-bind[ref]', this.parentElement);
       console.log('parent bound element ', parentBoundElement);
 
       if (parentBoundElement) {
@@ -514,16 +334,34 @@ export class FxBind extends foreElementMixin(HTMLElement) {
    */
   _getReferencesForProperty(propertyExpr) {
     if (propertyExpr) {
-      const touchedNodes = new Set();
-      const domFacade = new DependencyNotifyingDomFacade(otherNode => touchedNodes.add(otherNode));
-      this.nodeset.forEach(node => {
-        evaluateXPathToString(propertyExpr, node, this.getOwnerForm(), domFacade);
-      });
+      return this.getReferences(propertyExpr);
+    }
+    return [];
+  }
+
+  getReferences(propertyExpr) {
+    const touchedNodes = new Set();
+    const domFacade = new DependencyNotifyingDomFacade(otherNode => touchedNodes.add(otherNode));
+    this.nodeset.forEach(node => {
+      evaluateXPathToString(propertyExpr, node, this, domFacade);
+    });
+    return Array.from(touchedNodes.values());
+  }
+
+  /*
+    static getReferencesForRef(ref,nodeset){
+      if (ref && nodeset) {
+        const touchedNodes = new Set();
+        const domFacade = new DependencyNotifyingDomFacade(otherNode => touchedNodes.add(otherNode));
+        nodeset.forEach(node => {
+          evaluateXPathToString(ref, node, this, domFacade);
+        });
 
       return Array.from(touchedNodes.values());
     }
     return [];
   }
+  */
 
   _initBooleanModelItemProperty(property, node) {
     // evaluate expression to boolean
@@ -562,4 +400,6 @@ export class FxBind extends foreElementMixin(HTMLElement) {
     return 'default';
   }
 }
-customElements.define('fx-bind', FxBind);
+if (!customElements.get('fx-bind')) {
+  customElements.define('fx-bind', FxBind);
+}