@jinntec/fore 1.0.0-3 → 1.0.0

package/src/drawdown.js

@@ -4,72 +4,67 @@
  */
 
 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;
+  const rx_lt = /</g;
+  const rx_gt = />/g;
+  const rx_space = /\t|\r|\uf8ff/g;
+  const rx_escape = /\\([\\\|`*_{}\[\]()#+\-~])/g;
+  const rx_hr = /^([*\-=_] *){3,}$/gm;
+  const rx_blockquote = /\n *&gt; *([^]*?)(?=(\n|$){2})/g;
+  const rx_list = /\n( *)(?:[*\-+]|((\d+)|([a-z])|[A-Z])[.)]) +([^]*?)(?=(\n|$){2})/g;
+  const rx_listjoin = /<\/(ol|ul)>\n\n<\1>/g;
+  const rx_highlight = /(^|[^A-Za-z\d\\])(([*_])|(~)|(\^)|(--)|(\+\+)|`)(\2?)([^<]*?)\2\8(?!\2)(?=\W|_|$)/g;
+  const rx_code = /\n((```|~~~).*\n?([^]*?)\n?\2|(( {4}.*?\n)+))/g;
+  const rx_link = /((!?)\[(.*?)\]\((.*?)( ".*")?\)|\\([\\`*_{}\[\]()#+\-.!~]))/g;
+  const rx_table = /\n(( *\|.*?\| *\n)+)/g;
+  const rx_thead = /^.*\n( *\|( *\:?-+\:?-+\:? *\|)* *\n|)/;
+  const rx_row = /.*\n/g;
+  const rx_cell = /\||(.*?[^\\])\|/g;
+  const rx_heading = /(?=^|>|\n)([>\s]*?)(#{1,6}) (.*?)( #*)? *(?=\n|$)/g;
+  const rx_para = /(?=^|>|\n)\s*\n+([^<]+?)\n+\s*(?=\n|<|$)/g;
+  const rx_stash = /-\d+\uf8ff/g;
 
   function replace(rex, fn) {
     src = src.replace(rex, fn);
   }
 
   function element(tag, content) {
-    return '<' + tag + '>' + content + '</' + tag + '>';
+    return `<${tag}>${content}</${tag}>`;
   }
 
   function blockquote(src) {
-    return src.replace(rx_blockquote, function(all, content) {
-      return element('blockquote', blockquote(highlight(content.replace(/^ *&gt; */gm, ''))));
-    });
+    return src.replace(rx_blockquote, (all, content) =>
+      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(
+    return src.replace(rx_list, (all, ind, ol, num, low, content) => {
+      const entry = element(
         'li',
         highlight(
           content
-            .split(RegExp('\n ?' + ind + '(?:(?:\\d+|[a-zA-Z])[.)]|[*\\-+]) +', 'g'))
+            .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))
-      );
+      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 (
+    return src.replace(
+      rx_highlight,
+      (all, _, p1, emp, sub, sup, small, big, p2, content) =>
         _ +
         element(
           emp
@@ -88,19 +83,18 @@ function markdown(src) {
             ? 'big'
             : 'code',
           highlight(content),
-        )
-      );
-    });
+        ),
+    );
   }
 
   function unesc(str) {
     return str.replace(rx_escape, '$1');
   }
 
-  var stash = [];
-  var si = 0;
+  const stash = [];
+  let si = 0;
 
-  src = '\n' + src + '\n';
+  src = `\n${src}\n`;
 
   replace(rx_lt, '&lt;');
   replace(rx_gt, '&gt;');
@@ -117,56 +111,47 @@ function markdown(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';
+  replace(rx_code, (all, p1, p2, p3, p4) => {
+    stash[--si] = element('pre', element('code', p3 || p4.replace(/^ {4}/gm, '')));
+    return `${si}\uf8ff`;
   });
 
   // link or image
-  replace(rx_link, function(all, p1, p2, p3, p4, p5, p6) {
+  replace(rx_link, (all, p1, p2, p3, p4, p5, p6) => {
     stash[--si] = p4
       ? p2
-        ? '<img src="' + p4 + '" alt="' + p3 + '"/>'
-        : '<a href="' + p4 + '">' + unesc(highlight(p3)) + '</a>'
+        ? `<img src="${p4}" alt="${p3}"/>`
+        : `<a href="${p4}">${unesc(highlight(p3))}</a>`
       : p6;
-    return si + '\uf8ff';
+    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 || ''))) : '';
-                }),
-              );
-        }),
-      )
-    );
+  replace(rx_table, (all, table) => {
+    const sep = table.match(rx_thead)[1];
+    return `\n${element(
+      'table',
+      table.replace(rx_row, (row, ri) =>
+        row == sep
+          ? ''
+          : element(
+              'tr',
+              row.replace(rx_cell, (all, cell, ci) =>
+                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)));
-  });
+  replace(rx_heading, (all, _, p1, p2) => _ + element(`h${p1.length}`, unesc(highlight(p2))));
 
   // paragraph
-  replace(rx_para, function(all, content) {
-    return element('p', unesc(highlight(content)));
-  });
+  replace(rx_para, (all, content) => element('p', unesc(highlight(content))));
 
   // stash
-  replace(rx_stash, function(all) {
-    return stash[parseInt(all)];
-  });
+  replace(rx_stash, all => 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,6 +30,7 @@ export class Fore {
       'FX-SETFOCUS',
       'FX-SETINDEX',
       'FX-SETVALUE',
+      'FX-SHOW',
       'FX-TOGGLE',
       'FX-UPDATE',
     ];
@@ -125,7 +127,11 @@ 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.refresh();
           } else if (element.nodeName.toUpperCase() !== 'FX-MODEL') {
             Fore.refreshChildren(element, force);
@@ -138,14 +144,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;
   }
 
   /**
@@ -188,8 +201,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) {
@@ -210,7 +223,7 @@ export class Fore {
 
   static dispatch(target, eventName, detail) {
     const event = new CustomEvent(eventName, {
-      composed: true,
+      composed: false,
       bubbles: true,
       detail,
     });
@@ -218,6 +231,140 @@ export class Fore {
     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>.+))/);
@@ -102,4 +108,6 @@ export class FxFunction extends foreElementMixin(HTMLElement) {
     }
   }
 }
-customElements.define('fx-function', FxFunction);
+if (!customElements.get('fx-function')) {
+  customElements.define('fx-function', FxFunction);
+}