@jinntec/fore 1.0.0-2 → 1.0.0-5

package/index.js

@@ -5,6 +5,7 @@ import './src/fx-instance.js';
 import './src/fx-model.js';
 import './src/fx-submission.js';
 import './src/fx-header.js';
+import './src/fx-var.js';
 
 // ui classes
 import './src/ui/fx-alert.js';
@@ -18,9 +19,11 @@ import './src/ui/fx-switch.js';
 import './src/ui/fx-trigger.js';
 import './src/ui/fx-case.js';
 import './src/ui/fx-inspector.js';
-// import './src/ui/fx-checkbox-group.js';
+import './src/ui/fx-dialog.js';
 import './src/ui/fx-items.js';
 
+// import './src/ui/fx-checkbox-group.js';
+
 // action classes
 import './src/actions/fx-append.js';
 import './src/actions/fx-delete.js';
@@ -33,5 +36,9 @@ import './src/actions/fx-dispatch.js';
 import './src/actions/fx-update.js';
 import './src/actions/fx-refresh.js';
 import './src/actions/fx-confirm.js';
+import './src/actions/fx-show.js';
+import './src/actions/fx-hide.js';
 
 import './src/functions/fx-function.js';
+
+// import '@teipublisher/pb-components/src/pb-components-bundle.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jinntec/fore",
-  "version": "1.0.0-2",
+  "version": "1.0.0-5",
   "description": "Fore - Forms for the Web",
   "module": "./index.js",
   "publishConfig": {
@@ -23,11 +23,11 @@
     "resources/vars.css",
     "resources/toastify.css",
     "src/**/*",
-    "dist/fore.js",
-    "dist/fore-all.js"
+    "dist/fore-all.js",
+    "dist/fore-debug.js"
   ],
   "dependencies": {
-    "@jinntec/jinn-toast": "^1.0.2",
+    "@jinntec/jinn-toast": "^1.0.3",
     "@polymer/iron-component-page": "^4.0.1",
     "@polymer/iron-demo-helpers": "^3.1.0",
     "@polymer/paper-button": "^3.0.1",

package/resources/fore.css

@@ -14,6 +14,15 @@ html{
     pointer-events: none;
     cursor: default;
 }
+fx-fore{
+    opacity: 0;
+}
+fx-fore.fx-ready{
+    opacity: 1;
+}
+fx-group, fx-switch, fx-repeat, fx-dialog{
+    display: block;
+}
 fx-trigger a[disabled] {
     color:lightgrey;
 }
@@ -99,6 +108,52 @@ fx-inspector summary{
     padding: 0;
 }
 
+/* ### FX-DIALOG STYLES ### */
+/* ### FX-DIALOG STYLES ### */
+/* ### FX-DIALOG STYLES ### */
+fx-dialog{
+    display: none;
+    opacity: 0;
+    transition: opacity 1s linear;
+}
+fx-dialog.show{
+    display: block;
+    min-height: 200px;
+    border-radius: 0.5rem;
+    opacity: 1;
+    background:rgba(0,0,0,0.5);
+    z-index: 10;
+    transition: opacity 2s linear;
+}
+
+fx-dialog.show .dialog-content{
+    padding: 1rem;
+    width:fit-content;
+    height:fit-content;
+    border:thin solid;
+    border-radius: 0.3rem;
+    position: absolute;
+    left:50%;
+    top:50%;
+    transform:translateX(-50%) translateY(-50%);
+    background: white;
+
+}
+fx-dialog a.close-dialog{
+    position: absolute;
+    right: 0.4rem;
+    top:0.2rem;
+    color:var(--paper-grey-900);
+    text-decoration: none;
+    font-size:1.2rem;
+}
+fx-dialog .action{
+    width: 100%;
+    text-align: center;
+    display: block;
+}
+
+
 
 /*
 .visible {

package/src/DependencyNotifyingDomFacade.js

@@ -45,7 +45,7 @@ export class DependencyNotifyingDomFacade {
    * @param  bucket - The bucket that matches the attribute that will be used.
    */
   // eslint-disable-next-line class-methods-use-this
-/*
+  /*
   getChildNodes(node, bucket) {
     const matchingNodes = Array.from(node.childNodes).filter(
       childNode => !bucket || getBucketsForNode(childNode).includes(bucket),
@@ -56,10 +56,12 @@ export class DependencyNotifyingDomFacade {
 
   getChildNodes(node, bucket) {
     const matchingNodes = Array.from(node.childNodes).filter(
-        childNode => !bucket || getBucketsForNode(childNode).includes(bucket));
+      childNode => !bucket || getBucketsForNode(childNode).includes(bucket),
+    );
     matchingNodes.forEach(matchingNode => this._onNodeTouched(matchingNode));
     return matchingNodes;
   }
+
   /**
    * Get the data of this node.
    *
@@ -83,11 +85,11 @@ export class DependencyNotifyingDomFacade {
    * @param  bucket - The bucket that matches the attribute that will be used.
    */
   getFirstChild(node, bucket) {
-    const matchingNode = Array.from(this.getChildNodes()).filter(
-      childNode => !bucket || getBucketsForNode(childNode).includes(bucket),
-    )[0];
-    if (matchingNode) {
-      return matchingNode;
+    for (const child of node.childNodes) {
+      if (!bucket || getBucketsForNode(child).includes(bucket)) {
+        this._onNodeTouched(node);
+        return child;
+      }
     }
     return null;
   }

package/src/ForeElementMixin.js

@@ -7,6 +7,11 @@ import {
 } from './xpath-evaluation.js';
 import getInScopeContext from './getInScopeContext.js';
 
+/**
+ * Mixin containing all general functions that are shared by all Fore element classes.
+ * @param superclass
+ * @returns {{readonly properties: {ref: {type: StringConstructor}, context: {type: ObjectConstructor}, nodeset: {type: ObjectConstructor}, model: {type: ObjectConstructor}, inScopeVariables: {type: MapConstructor}, modelItem: {type: ObjectConstructor}}, new(): ForeElementMixin, context: null, model: null, modelItem: {}, ref: *|string, inScopeVariables: null, nodeset: *, prototype: ForeElementMixin}}
+ */
 export const foreElementMixin = superclass =>
   class ForeElementMixin extends superclass {
     static get properties() {
@@ -41,6 +46,9 @@ export const foreElementMixin = superclass =>
         ref: {
           type: String,
         },
+        inScopeVariables: {
+          type: Map,
+        },
       };
     }
 
@@ -50,6 +58,7 @@ export const foreElementMixin = superclass =>
       this.model = null;
       this.modelItem = {};
       this.ref = this.hasAttribute('ref') ? this.getAttribute('ref') : '';
+      this.inScopeVariables = null;
     }
 
     getModel() {
@@ -90,10 +99,19 @@ export const foreElementMixin = superclass =>
      */
     evalInContext() {
       // const inscopeContext = this.getInScopeContext();
-      const inscopeContext = getInScopeContext(this, this.ref);
+      let inscopeContext;
+      if(this.hasAttribute('context')){
+        inscopeContext = getInScopeContext(this.getAttributeNode('context') || this, this.context);
+      }
+      if(this.hasAttribute('ref')){
+        inscopeContext = getInScopeContext(this.getAttributeNode('ref') || this, this.ref);
+      }
       if (!inscopeContext) {
+        // ### always fall back to default context with there's neither a 'context' or 'ref' present
+        inscopeContext = this.getModel().getDefaultInstance().getDefaultContext();
         console.warn('no in scopeContext for ', this);
-        return;
+        console.warn('using default context ', this);
+        // return;
       }
       if (this.ref === '') {
         this.nodeset = inscopeContext;
@@ -217,7 +235,11 @@ export const foreElementMixin = superclass =>
     }
 
     getInScopeContext() {
-      return getInScopeContext(this, this.ref);
+      return getInScopeContext(this.getAttributeNode('ref') || this, this.ref);
+    }
+
+    setInScopeVariables(inScopeVariables) {
+      this.inScopeVariables = inScopeVariables;
     }
 
     dispatch(eventName, detail) {

package/src/actions/abstract-action.js

@@ -124,7 +124,7 @@ export class AbstractAction extends foreElementMixin(HTMLElement) {
     }
 
     // First check if 'if' condition is true - otherwise exist right away
-    if (this.ifExpr && !evaluateXPathToBoolean(this.ifExpr, this.nodeset, this.getOwnerForm())) {
+    if (this.ifExpr && !evaluateXPathToBoolean(this.ifExpr, this.nodeset, this)) {
       return;
     }
 
@@ -139,7 +139,7 @@ export class AbstractAction extends foreElementMixin(HTMLElement) {
           return;
         }
 
-        if (!evaluateXPathToBoolean(this.whileExpr, this.nodeset, this.getOwnerForm())) {
+        if (!evaluateXPathToBoolean(this.whileExpr, this.nodeset, this)) {
           // Done with iterating
           return;
         }
@@ -198,6 +198,9 @@ export class AbstractAction extends foreElementMixin(HTMLElement) {
   }
 
   /**
+   * dispathes action-performed event
+   *
+   * @event action-performed - whenever an action has been run
    */
   dispatchActionPerformed() {
     console.log('action-performed ', this);

package/src/actions/fx-action.js

@@ -41,7 +41,11 @@ export class FxAction extends AbstractAction {
       script.src = this.src;
       this.appendChild(script);
     } else {
-      Array.from(children).forEach(action => {
+      Array.from(children).forEach(actionOrVar => {
+        if (actionOrVar.localName === 'fx-var') {
+          return;
+        }
+        const action = actionOrVar;
         action.detail = this.detail;
         // action.perform();
         action.execute();
@@ -50,6 +54,7 @@ export class FxAction extends AbstractAction {
       // this.needsUpdate = false;
     }
   }
+
 }
 
 window.customElements.define('fx-action', FxAction);

package/src/actions/fx-hide.js

@@ -0,0 +1,24 @@
+import { FxAction } from './fx-action.js';
+import {AbstractAction} from "./abstract-action";
+
+/**
+ * `fx-hide`
+ * hides a dialog
+ *
+ * @customElement
+ * @demo demo/project.html
+ */
+export class FxHide extends AbstractAction {
+  connectedCallback() {
+    this.dialog = this.getAttribute('dialog');
+    if(!this.dialog){
+      this.dispatch('error',{message:'dialog does not exist'})
+    }
+  }
+
+  perform() {
+    document.getElementById(this.dialog).hide();
+  }
+}
+
+window.customElements.define('fx-hide', FxHide);

package/src/actions/fx-insert.js

@@ -85,32 +85,22 @@ export class FxInsert extends AbstractAction {
         console.log('this.nodeset', this.nodeset);
         */
 
-    // ### obtaining targetSequence
-    const inscope = getInScopeContext(this, this.ref);
-
-    // @ts-ignore
-    const targetSequence = evaluateXPathToNodes(this.ref, inscope, this.getOwnerForm());
-    // console.log('insert nodeset ', targetSequence);
+    let inscope;
+    // ### 'context' attribute takes precedence over 'ref'
+    let targetSequence;
+    if(this.hasAttribute('context')){
+      inscope = getInScopeContext(this.getAttributeNode('context'), this.getAttribute('context'));
+      targetSequence = evaluateXPathToNodes(this.getAttribute('context'), inscope, this.getOwnerForm());
+    }
 
-    // ### obtaining originSequence
-    /*
-        let originSequence;
-        if (this.origin) {
-            // ### if there's an origin attribute use it
-            const originTarget = evaluateXPathToFirstNode(this.origin, inscope, this.getOwnerForm());
-            if(Array.isArray(originTarget) && originTarget.length === 0){
-                console.warn('invalid origin for this insert action - ignoring...', this);
-                return;
-            }
-            originSequence = originTarget.cloneNode(true);
-        } else if (targetSequence) {
-            // ### use last item of targetSequence
-            originSequence = this._cloneTargetSequence(targetSequence);
-            if(originSequence && !this.keepValues){
-                this._clear(originSequence);
-            }
-        }
-*/
+    if(this.hasAttribute('ref')){
+      if(inscope){
+        targetSequence = evaluateXPathToNodes(this.ref, inscope, this.getOwnerForm());
+      }else{
+        inscope = getInScopeContext(this.getAttributeNode('ref'), this.ref);
+        targetSequence = evaluateXPathToNodes(this.ref, inscope, this.getOwnerForm());
+      }
+    }
     const originSequenceClone = this._cloneOriginSequence(inscope, targetSequence);
     if (!originSequenceClone) return; // if no origin back out without effect
 
@@ -127,13 +117,10 @@ export class FxInsert extends AbstractAction {
       index = 1;
       console.log('appended', inscope);
     } else {
-      // todo: eval 'at'
 
-      /*
-            insert at position given by 'at' or use the last item in the targetSequence
-             */
-      // if (this.at) {
+      /* ### insert at position given by 'at' or use the last item in the targetSequence ### */
       if (this.hasAttribute('at')) {
+        // todo: eval 'at'
         // index = this.at;
         // insertLocationNode = targetSequence[this.at - 1];
 
@@ -165,7 +152,16 @@ export class FxInsert extends AbstractAction {
         // insertLocationNode.parentNode.append(originSequence);
         // const nextSibl = insertLocationNode.nextSibling;
         index += 1;
-        insertLocationNode.insertAdjacentElement('afterend', originSequenceClone);
+        if(this.hasAttribute('context') && this.hasAttribute('ref')){
+          // index=1;
+          inscope.append(originSequenceClone);
+        }else if(this.hasAttribute('context')){
+          const contextAttr = this.getAttribute('context');
+          index=1;
+          insertLocationNode.prepend(originSequenceClone);
+        }else{
+          insertLocationNode.insertAdjacentElement('afterend', originSequenceClone);
+        }
       }
     }
 
@@ -173,16 +169,17 @@ export class FxInsert extends AbstractAction {
     // console.log('parent ', insertLocationNode.parentNode);
     // console.log('instance ', this.getModel().getDefaultContext());
 
-    // console.log('<<<<<<< at', this.at);
-    // console.log('<<<<<<< index', index);
+    console.log('<<<<<<< at', this.at);
+    console.log('<<<<<<< index', index);
     // todo: this actually should dispatch to respective instance
     document.dispatchEvent(
-      new CustomEvent('insert', {
+      // new CustomEvent('insert', {
+      new CustomEvent('index-changed', {
         composed: true,
         bubbles: true,
         detail: {
           insertedNodes: originSequenceClone,
-          position: index,
+          index,
         },
       }),
     );

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 {

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/actions/fx-toggle.js

@@ -17,7 +17,8 @@ class FxToggle extends FxAction {
     }
 
 */
-  execute() {
+  perform() {
+    super.perform();
     console.log('### fx-toggle.execute ');
     if (this.case) {
       const ownerForm = this.getOwnerForm();

package/src/dep_graph.js

@@ -91,7 +91,9 @@ function createDFS(edges, leavesOnly, result, circular) {
           // return;
           // console.log('‘circular path: ' + currentPath);
           // throw new DepGraphCycleError(currentPath);
-          // throw new Error(currentPath);
+
+          // Stop all processing. This form is broken and we should not break the browser
+          throw new Error(`Cyclic at ${currentPath}`);
         }
 
         inCurrentPath[node] = true;

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',
     ];
@@ -83,6 +85,7 @@ export class Fore {
       'FX-TEXTAREA',
       'FX-TRIGGER',
       'FX-UPLOAD',
+      'FX-VAR',
     ];
   }
 
@@ -187,14 +190,16 @@ 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) {
         element.getAnimations().map(anim => anim.finish());
       }
 
+
       // Play the animation with the newly specified duration
       fadeOut = element.animate(
         {
@@ -217,6 +222,33 @@ 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 xmlns:xsl="http://www.w3.org/1999/XSL/Transform">',
+          '  <xsl:strip-space elements="*"/>',
+          '  <xsl:template match="para[content-style][not(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:output indent="yes"/>',
+          '</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;
+  }
+
+
   /**
    * 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).
@@ -229,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
    *
@@ -245,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)) {
@@ -252,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);
@@ -321,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 = [];
@@ -335,7 +335,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 +351,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;
       }
@@ -509,13 +509,15 @@ 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) {
       const touchedNodes = new Set();
       const domFacade = new DependencyNotifyingDomFacade(otherNode => touchedNodes.add(otherNode));
       this.nodeset.forEach(node => {
-        evaluateXPathToString(propertyExpr, node, this.getOwnerForm(), domFacade);
+        evaluateXPathToString(propertyExpr, node, this, domFacade);
       });
 
       return Array.from(touchedNodes.values());