@jinntec/fore 1.0.0-1 → 1.0.0-4

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 {
@@ -62,10 +62,8 @@ export default class FxSetvalue extends AbstractAction {
 
     if (item.value !== newVal) {
       item.value = newVal;
-      item.changed = true;
-
+      this.getModel().changed.push(modelItem);
       this.needsUpdate = true;
-
       console.log('setvalue[2] ', item, newVal);
     }
   }

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/dep_graph.js

@@ -320,6 +320,15 @@ DepGraph.prototype = {
     }
     throw new Error(`Node does not exist: ${node}`);
   },
+
+  /**
+   * Get an array of nodes that have no dependants (i.e. nothing depends on them).
+   */
+  entryNodes() {
+    const self = this;
+    return Object.keys(this.nodes).filter(node => self.incomingEdges[node].length === 0);
+  },
+
   /**
    * Construct the overall processing order for the dependency graph.
    *

package/src/drawdown.js

@@ -0,0 +1,172 @@
+/**
+ * drawdown.js
+ * (c) Adam Leggett
+ */
+
+function markdown(src) {
+  var rx_lt = /</g;
+  var rx_gt = />/g;
+  var rx_space = /\t|\r|\uf8ff/g;
+  var rx_escape = /\\([\\\|`*_{}\[\]()#+\-~])/g;
+  var rx_hr = /^([*\-=_] *){3,}$/gm;
+  var rx_blockquote = /\n *&gt; *([^]*?)(?=(\n|$){2})/g;
+  var rx_list = /\n( *)(?:[*\-+]|((\d+)|([a-z])|[A-Z])[.)]) +([^]*?)(?=(\n|$){2})/g;
+  var rx_listjoin = /<\/(ol|ul)>\n\n<\1>/g;
+  var rx_highlight = /(^|[^A-Za-z\d\\])(([*_])|(~)|(\^)|(--)|(\+\+)|`)(\2?)([^<]*?)\2\8(?!\2)(?=\W|_|$)/g;
+  var rx_code = /\n((```|~~~).*\n?([^]*?)\n?\2|((    .*?\n)+))/g;
+  var rx_link = /((!?)\[(.*?)\]\((.*?)( ".*")?\)|\\([\\`*_{}\[\]()#+\-.!~]))/g;
+  var rx_table = /\n(( *\|.*?\| *\n)+)/g;
+  var rx_thead = /^.*\n( *\|( *\:?-+\:?-+\:? *\|)* *\n|)/;
+  var rx_row = /.*\n/g;
+  var rx_cell = /\||(.*?[^\\])\|/g;
+  var rx_heading = /(?=^|>|\n)([>\s]*?)(#{1,6}) (.*?)( #*)? *(?=\n|$)/g;
+  var rx_para = /(?=^|>|\n)\s*\n+([^<]+?)\n+\s*(?=\n|<|$)/g;
+  var rx_stash = /-\d+\uf8ff/g;
+
+  function replace(rex, fn) {
+    src = src.replace(rex, fn);
+  }
+
+  function element(tag, content) {
+    return '<' + tag + '>' + content + '</' + tag + '>';
+  }
+
+  function blockquote(src) {
+    return src.replace(rx_blockquote, function(all, content) {
+      return element('blockquote', blockquote(highlight(content.replace(/^ *&gt; */gm, ''))));
+    });
+  }
+
+  function list(src) {
+    return src.replace(rx_list, function(all, ind, ol, num, low, content) {
+      var entry = element(
+        'li',
+        highlight(
+          content
+            .split(RegExp('\n ?' + ind + '(?:(?:\\d+|[a-zA-Z])[.)]|[*\\-+]) +', 'g'))
+            .map(list)
+            .join('</li><li>'),
+        ),
+      );
+
+      return (
+        '\n' +
+        (ol
+          ? '<ol start="' +
+            (num
+              ? ol + '">'
+              : parseInt(ol, 36) -
+                9 +
+                '" style="list-style-type:' +
+                (low ? 'low' : 'upp') +
+                'er-alpha">') +
+            entry +
+            '</ol>'
+          : element('ul', entry))
+      );
+    });
+  }
+
+  function highlight(src) {
+    return src.replace(rx_highlight, function(all, _, p1, emp, sub, sup, small, big, p2, content) {
+      return (
+        _ +
+        element(
+          emp
+            ? p2
+              ? 'strong'
+              : 'em'
+            : sub
+            ? p2
+              ? 's'
+              : 'sub'
+            : sup
+            ? 'sup'
+            : small
+            ? 'small'
+            : big
+            ? 'big'
+            : 'code',
+          highlight(content),
+        )
+      );
+    });
+  }
+
+  function unesc(str) {
+    return str.replace(rx_escape, '$1');
+  }
+
+  var stash = [];
+  var si = 0;
+
+  src = '\n' + src + '\n';
+
+  replace(rx_lt, '&lt;');
+  replace(rx_gt, '&gt;');
+  replace(rx_space, '  ');
+
+  // blockquote
+  src = blockquote(src);
+
+  // horizontal rule
+  replace(rx_hr, '<hr/>');
+
+  // list
+  src = list(src);
+  replace(rx_listjoin, '');
+
+  // code
+  replace(rx_code, function(all, p1, p2, p3, p4) {
+    stash[--si] = element('pre', element('code', p3 || p4.replace(/^    /gm, '')));
+    return si + '\uf8ff';
+  });
+
+  // link or image
+  replace(rx_link, function(all, p1, p2, p3, p4, p5, p6) {
+    stash[--si] = p4
+      ? p2
+        ? '<img src="' + p4 + '" alt="' + p3 + '"/>'
+        : '<a href="' + p4 + '">' + unesc(highlight(p3)) + '</a>'
+      : p6;
+    return si + '\uf8ff';
+  });
+
+  // table
+  replace(rx_table, function(all, table) {
+    var sep = table.match(rx_thead)[1];
+    return (
+      '\n' +
+      element(
+        'table',
+        table.replace(rx_row, function(row, ri) {
+          return row == sep
+            ? ''
+            : element(
+                'tr',
+                row.replace(rx_cell, function(all, cell, ci) {
+                  return ci ? element(sep && !ri ? 'th' : 'td', unesc(highlight(cell || ''))) : '';
+                }),
+              );
+        }),
+      )
+    );
+  });
+
+  // heading
+  replace(rx_heading, function(all, _, p1, p2) {
+    return _ + element('h' + p1.length, unesc(highlight(p2)));
+  });
+
+  // paragraph
+  replace(rx_para, function(all, content) {
+    return element('p', unesc(highlight(content)));
+  });
+
+  // stash
+  replace(rx_stash, function(all) {
+    return stash[parseInt(all)];
+  });
+
+  return src.trim();
+}

package/src/fore.js

@@ -13,6 +13,7 @@ export class Fore {
     return [
       'FX-DELETE',
       'FX-DISPATCH',
+      'FX-HIDE',
       'FX-INSERT',
       'FX-LOAD',
       'FX-MESSAGE',
@@ -29,11 +30,27 @@ export class Fore {
       'FX-SETFOCUS',
       'FX-SETINDEX',
       'FX-SETVALUE',
+      'FX-SHOW',
       'FX-TOGGLE',
       'FX-UPDATE',
     ];
   }
 
+  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 +72,7 @@ export class Fore {
       'FX-GROUP',
       'FX-HINT',
       'FX-INPUT',
-      'FX-ITEMSET',
+      'FX-ITEMS',
       'FX-LABEL',
       'FX-OUTPUT',
       'FX-RANGE',
@@ -68,6 +85,7 @@ export class Fore {
       'FX-TEXTAREA',
       'FX-TRIGGER',
       'FX-UPLOAD',
+      'FX-VAR',
     ];
   }
 
@@ -79,15 +97,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);
           }
         });
       }
@@ -167,6 +210,16 @@ export class Fore {
     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/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) {