@jinntec/fore 1.0.0-0 → 1.0.0-3

package/src/fore.js

@@ -34,6 +34,21 @@ export class Fore {
     ];
   }
 
+  static createUUID() {
+    // http://www.ietf.org/rfc/rfc4122.txt
+    const s = [];
+    const hexDigits = '0123456789abcdef';
+    for (let i = 0; i < 36; i += 1) {
+      s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
+    }
+    s[14] = '4'; // bits 12-15 of the time_hi_and_version field to 0010
+    s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1); // bits 6-7 of the clock_seq_hi_and_reserved to 01
+    s[8] = s[13] = s[18] = s[23] = '-';
+
+    const uuid = s.join('');
+    return uuid;
+  }
+
   static get XFORMS_NAMESPACE_URI() {
     // todo: should be centralized somewhere as constant. Exists in several? places
     return 'http://www.w3.org/2002/xforms';
@@ -55,7 +70,7 @@ export class Fore {
       'FX-GROUP',
       'FX-HINT',
       'FX-INPUT',
-      'FX-ITEMSET',
+      'FX-ITEMS',
       'FX-LABEL',
       'FX-OUTPUT',
       'FX-RANGE',
@@ -68,6 +83,7 @@ export class Fore {
       'FX-TEXTAREA',
       'FX-TRIGGER',
       'FX-UPLOAD',
+      'FX-VAR',
     ];
   }
 
@@ -79,15 +95,40 @@ export class Fore {
     return Fore.UI_ELEMENTS.includes(elementName);
   }
 
-  static async refreshChildren(startElement) {
+  /**
+   * recursively refreshes all UI Elements.
+   *
+   * todo: this could probably made more efficient with significant impact on rendering perf
+   *
+   * @param startElement
+   * @param force
+   * @returns {Promise<unknown>}
+   */
+  static async refreshChildren(startElement, force) {
     const refreshed = new Promise(resolve => {
+      /*
+      if there's an 'refresh-on-view' attribute the element wants to be handled by
+      handleIntersect function that calls the refresh of the respective element and
+      not the global one.
+       */
+      // if(!force && startElement.hasAttribute('refresh-on-view')) return;
+
+      /*  ### attempt with querySelectorAll is even slower than iterating recursively
+
+      const children = startElement.querySelectorAll('[ref]');
+      Array.from(children).forEach(uiElement => {
+        if (Fore.isUiElement(uiElement.nodeName) && typeof uiElement.refresh === 'function') {
+          uiElement.refresh();
+        }
+      });
+*/
       const { children } = startElement;
       if (children) {
         Array.from(children).forEach(element => {
           if (Fore.isUiElement(element.nodeName) && typeof element.refresh === 'function') {
             element.refresh();
           } else if (element.nodeName.toUpperCase() !== 'FX-MODEL') {
-            Fore.refreshChildren(element);
+            Fore.refreshChildren(element, force);
           }
         });
       }
@@ -127,6 +168,56 @@ export class Fore {
     return null;
   }
 
+  static fadeInElement(element) {
+    const duration = 600;
+    let fadeIn = () => {
+      // Stop all current animations
+      if (element.getAnimations) {
+        element.getAnimations().map(anim => anim.finish());
+      }
+
+      // Play the animation with the newly specified duration
+      fadeIn = element.animate(
+        {
+          opacity: [0, 1],
+        },
+        duration,
+      );
+      return fadeIn.finished;
+    };
+    return fadeIn();
+  }
+
+  static fadeOutElement(element) {
+    const duration = 2600;
+    let fadeOut = () => {
+      // Stop all current animations
+      if (element.getAnimations) {
+        element.getAnimations().map(anim => anim.finish());
+      }
+
+      // Play the animation with the newly specified duration
+      fadeOut = element.animate(
+        {
+          opacity: [1, 0],
+        },
+        duration,
+      );
+      return fadeOut.finished;
+    };
+    return fadeOut();
+  }
+
+  static dispatch(target, eventName, detail) {
+    const event = new CustomEvent(eventName, {
+      composed: true,
+      bubbles: true,
+      detail,
+    });
+    console.log('firing', event);
+    target.dispatchEvent(event);
+  }
+
   /**
    * clear all text nodes and attribute values to get a 'clean' template.
    * @param n

package/src/functions/fx-function.js

@@ -28,9 +28,9 @@ export class FxFunction extends foreElementMixin(HTMLElement) {
     const type = this.getAttribute('type') || 'text/xpath';
 
     // Parse the signature to something useful
-    // Signature is of the form `my:sumproduct($p as xs:decimal*, $q as xs:decimal*) as xs:decimal`
+    // Signature is of the form `my:sumproduct($p as xs:decimal*, $q as xs:decimal*) as xs:decimal` or local:something($a as item()*) as item()*
     const signatureParseResult = this.signature.match(
-      /(?:(?<prefix>[^:]*):)?(?<localName>[^(]+)\((?<params>[^)]*)\)(?: as (?<returnType>.*))?/,
+      /(?:(?<prefix>[^:]*):)?(?<localName>[^(]+)\((?<params>(?:\(\)|[^)])*)\)(?: as (?<returnType>.*))?/,
     );
 
     if (!signatureParseResult) {

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).
@@ -182,12 +183,11 @@ export class FxBind extends foreElementMixin(HTMLElement) {
     if (this.bindType === 'xml') {
       this.nodeset.forEach(node => {
         const path = XPathUtil.getPath(node);
+        this.model.mainGraph.addNode(path, node);
 
         if (this.calculate) {
           this.model.mainGraph.addNode(`${path}:calculate`, node);
           // Calculated values are a dependency of the model item.
-          // Make `model1` depend on `model1:calculate`
-          this.model.mainGraph.addNode(path, node);
           this.model.mainGraph.addDependency(path, `${path}:calculate`);
         }
 
@@ -196,11 +196,13 @@ export class FxBind extends foreElementMixin(HTMLElement) {
           this._addDependencies(calculateRefs, node, path, 'calculate');
         }
 
-        const readonlyRefs = this._getReferencesForProperty(this.readonly, node);
-        if (readonlyRefs.length !== 0) {
-          this._addDependencies(readonlyRefs, node, path, 'readonly');
-        } else if (this.readonly) {
-          this.model.mainGraph.addNode(`${path}:readonly`, node);
+        if (!this.calculate) {
+          const readonlyRefs = this._getReferencesForProperty(this.readonly, node);
+          if (readonlyRefs.length !== 0) {
+            this._addDependencies(readonlyRefs, node, path, 'readonly');
+          } else if (this.readonly) {
+            this.model.mainGraph.addNode(`${path}:readonly`, node);
+          }
         }
 
         // const requiredRefs = this.requiredReferences;
@@ -228,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
    *
@@ -244,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)) {
@@ -251,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);
@@ -320,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 = [];
@@ -508,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) {