@jinntec/fore 1.0.0-3 → 1.0.0

package/src/actions/fx-insert.js

@@ -1,7 +1,6 @@
 import { AbstractAction } from './abstract-action.js';
 import getInScopeContext from '../getInScopeContext.js';
 import {
-  evaluateXPath,
   evaluateXPathToNodes,
   evaluateXPathToFirstNode,
   evaluateXPathToNumber,
@@ -47,6 +46,12 @@ export class FxInsert extends AbstractAction {
       // ### if there's an origin attribute use it
       let originTarget;
       try {
+        /*
+        todo: discuss where to pass vars from event.detail into function context
+         */
+        // this.setInScopeVariables(this.detail);
+
+        // originTarget = evaluateXPathToFirstNode(this.origin, inscope, this);
         originTarget = evaluateXPathToFirstNode(this.origin, inscope, this.getOwnerForm());
         if (Array.isArray(originTarget) && originTarget.length === 0) {
           console.warn('invalid origin for this insert action - ignoring...', this);
@@ -85,32 +90,26 @@ export class FxInsert extends AbstractAction {
         console.log('this.nodeset', this.nodeset);
         */
 
-    // ### obtaining targetSequence
-    const inscope = getInScopeContext(this.getAttributeNode('ref'), 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 +126,9 @@ 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];
 
@@ -150,7 +145,11 @@ export class FxInsert extends AbstractAction {
         index = 1;
 
         insertLocationNode = targetSequence;
-        const context = evaluateXPath('count(preceding::*)', targetSequence, this.getOwnerForm());
+        const context = evaluateXPathToNumber(
+          'count(preceding::*)',
+          targetSequence,
+          this.getOwnerForm(),
+        );
         // console.log('context', context);
         index = context + 1;
         // index = targetSequence.findIndex(insertLocationNode);
@@ -165,7 +164,15 @@ 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')) {
+          index = 1;
+          insertLocationNode.prepend(originSequenceClone);
+        } else {
+          insertLocationNode.insertAdjacentElement('afterend', originSequenceClone);
+        }
       }
     }
 
@@ -173,16 +180,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,
         },
       }),
     );
@@ -235,4 +243,6 @@ export class FxInsert extends AbstractAction {
   }
 }
 
-window.customElements.define('fx-insert', FxInsert);
+if (!customElements.get('fx-insert')) {
+  window.customElements.define('fx-insert', FxInsert);
+}

package/src/actions/fx-message.js

@@ -61,4 +61,6 @@ class FxMessage extends AbstractAction {
   }
 }
 
-window.customElements.define('fx-message', FxMessage);
+if (!customElements.get('fx-message')) {
+  window.customElements.define('fx-message', FxMessage);
+}

package/src/actions/fx-refresh.js

@@ -1,4 +1,5 @@
 import { AbstractAction } from './abstract-action.js';
+import { Fore } from '../fore.js';
 
 /**
  * `fx-refresh`
@@ -8,8 +9,17 @@ import { AbstractAction } from './abstract-action.js';
  */
 class FxRefresh extends AbstractAction {
   perform() {
+    if (this.hasAttribute('self')) {
+      const control = Fore.getClosest('fx-control', this);
+      if (control) {
+        control.refresh();
+        return;
+      }
+    }
     this.getOwnerForm().refresh();
   }
 }
 
-window.customElements.define('fx-refresh', FxRefresh);
+if (!customElements.get('fx-refresh')) {
+  window.customElements.define('fx-refresh', FxRefresh);
+}

package/src/actions/fx-replace.js

@@ -0,0 +1,68 @@
+// import { FxAction } from './fx-action.js';
+import '../fx-model.js';
+import { AbstractAction } from './abstract-action.js';
+import { evaluateXPathToFirstNode } from '../xpath-evaluation.js';
+
+/**
+ * `fx-replace` - replaces the node referred to with 'ref' with node referred to with 'with' attribute.
+ *
+ * @customElement
+ */
+export default class FxReplace extends AbstractAction {
+  static get properties() {
+    return {
+      ...super.properties,
+      with: {
+        type: String,
+      },
+      replaceNode: Object,
+    };
+  }
+
+  constructor() {
+    super();
+    this.with = '';
+  }
+
+  connectedCallback() {
+    if (super.connectedCallback) {
+      super.connectedCallback();
+    }
+    this.with = this.getAttribute('with');
+  }
+
+  perform() {
+    super.perform();
+    console.log('replace action');
+    if (!this.nodeset) {
+      return;
+    }
+    const target = evaluateXPathToFirstNode(this.with, this.nodeset, this);
+    if (!target) return;
+
+    this.replace(this.nodeset, target);
+  }
+
+  replace(toReplace, replaceWith) {
+    if (!toReplace || !replaceWith) return; // bail out silently
+    if (!toReplace.nodeName || !replaceWith.nodeName) {
+      console.warn('fx-replace: one argument is not a node');
+      return;
+    }
+
+    if (toReplace.nodeType === Node.ATTRIBUTE_NODE) {
+      const { ownerElement } = toReplace;
+      ownerElement.setAttribute(replaceWith.nodeName, replaceWith.textContent);
+      ownerElement.removeAttribute(toReplace.nodeName);
+      console.log('owner', ownerElement);
+    } else if (toReplace.nodeType === Node.ELEMENT_NODE) {
+      const cloned = replaceWith.cloneNode(true);
+      toReplace.replaceWith(cloned);
+    }
+    this.needsUpdate = true;
+  }
+}
+
+if (!customElements.get('fx-replace')) {
+  window.customElements.define('fx-replace', FxReplace);
+}

package/src/actions/fx-return.js

@@ -0,0 +1,42 @@
+import { AbstractAction } from './abstract-action.js';
+
+/**
+ * `fx-return`
+ * returns data from a nested Fore to it's host Fore.
+ *
+ * behaves like a `<fx-submission @replace='instance' with `targetref` and respects relevance processing.
+ *
+ * `targetref` will be the `ref` of the host control.
+ *
+ * todo: deos not relevant selection yet
+ *
+ * @customElement
+ */
+export class FxReturn extends AbstractAction {
+  connectedCallback() {
+    if (super.connectedCallback) {
+      super.connectedCallback();
+    }
+    // const nonrelevant = this.hasAttribute('nonrelevant') ? this.getAttribute('nonrelevant') : null;
+  }
+
+  perform() {
+    super.perform();
+    console.log('performing return with nodes', this.nodeset);
+
+    /*
+    ### note that this event does not use Fore.dispatch as the event uses 'composed:true' to let the event travel
+    up through the shadowRoot and being catched in outer form.
+    */
+    const event = new CustomEvent('return', {
+      composed: true,
+      bubbles: true,
+      detail: { nodeset: this.nodeset },
+    });
+    this.getOwnerForm().dispatchEvent(event);
+  }
+}
+
+if (!customElements.get('fx-return')) {
+  window.customElements.define('fx-return', FxReturn);
+}

package/src/actions/fx-send.js

@@ -45,4 +45,6 @@ class FxSend extends AbstractAction {
   }
 }
 
-window.customElements.define('fx-send', FxSend);
+if (!customElements.get('fx-send')) {
+  window.customElements.define('fx-send', FxSend);
+}

package/src/actions/fx-setvalue.js

@@ -1,7 +1,7 @@
 // import { FxAction } from './fx-action.js';
 import '../fx-model.js';
-import { AbstractAction } from './abstract-action.js';
-import { evaluateXPath } from '../xpath-evaluation.js';
+import {AbstractAction} from './abstract-action.js';
+import {evaluateXPath} from '../xpath-evaluation.js';
 
 /**
  * `fx-setvalue`
@@ -9,64 +9,71 @@ import { evaluateXPath } from '../xpath-evaluation.js';
  * @customElement
  */
 export default class FxSetvalue extends AbstractAction {
-  static get properties() {
-    return {
-      ...super.properties,
-      ref: {
-        type: String,
-      },
-      valueAttr: {
-        type: String,
-      },
-    };
-  }
-
-  constructor() {
-    super();
-    this.ref = '';
-    this.valueAttr = '';
-  }
+    static get properties() {
+        return {
+            ...super.properties,
+            ref: {
+                type: String,
+            },
+            valueAttr: {
+                type: String,
+            },
+        };
+    }
 
-  connectedCallback() {
-    if (super.connectedCallback) {
-      super.connectedCallback();
+    constructor() {
+        super();
+        this.ref = '';
+        this.valueAttr = '';
     }
 
-    if (this.hasAttribute('ref')) {
-      this.ref = this.getAttribute('ref');
-    } else {
-      throw new Error('fx-setvalue must specify a "ref" attribute');
+    connectedCallback() {
+        if (super.connectedCallback) {
+            super.connectedCallback();
+        }
+
+        if (this.hasAttribute('ref')) {
+            this.ref = this.getAttribute('ref');
+        } else {
+            throw new Error('fx-setvalue must specify a "ref" attribute');
+        }
+        this.valueAttr = this.getAttribute('value');
     }
-    this.valueAttr = this.getAttribute('value');
-  }
 
-  perform() {
-    super.perform();
-    let { value } = this;
-    if (this.valueAttr !== null) {
-      value = evaluateXPath(this.valueAttr, this.nodeset, this, this.detail);
-    } else if (this.textContent !== '') {
-      value = this.textContent;
-    } else {
-      value = '';
+    perform() {
+        super.perform();
+        let {value} = this;
+        if (this.valueAttr !== null) {
+            [value] = evaluateXPath(this.valueAttr, this.nodeset, this, this.detail);
+        } else if (this.textContent !== '') {
+            value = this.textContent;
+        } else {
+            value = '';
+        }
+        console.log('value', value);
+        if (value.nodeType === Node.ATTRIBUTE_NODE) {
+            console.log('value', value.nodeValue);
+            value = value.nodeValue;
+        }
+        const mi = this.getModelItem();
+        this.setValue(mi, value);
     }
-    const mi = this.getModelItem();
-    this.setValue(mi, value);
-  }
 
-  setValue(modelItem, newVal) {
-    console.log('setvalue[1]  ', modelItem, newVal);
+    setValue(modelItem, newVal) {
+        console.log('setvalue[1]  ', modelItem, newVal);
 
-    const item = modelItem;
-    if (!item) return;
+        const item = modelItem;
+        if (!item) return;
 
-    if (item.value !== newVal) {
-      item.value = newVal;
-      this.getModel().changed.push(modelItem);
-      this.needsUpdate = true;
-      console.log('setvalue[2] ', item, newVal);
+        if (item.value !== newVal) {
+            item.value = newVal;
+            this.getModel().changed.push(modelItem);
+            this.needsUpdate = true;
+            console.log('setvalue[2] ', item, newVal);
+        }
     }
-  }
 }
 
-window.customElements.define('fx-setvalue', FxSetvalue);
+if (!customElements.get('fx-setvalue')) {
+    window.customElements.define('fx-setvalue', FxSetvalue);
+}

package/src/actions/fx-show.js

@@ -1,4 +1,6 @@
+import { Fore } from '../fore.js';
 import { FxAction } from './fx-action.js';
+import { resolveId } from '../xpath-evaluation.js';
 
 /**
  * `fx-confirm`
@@ -10,14 +12,16 @@ import { FxAction } from './fx-action.js';
 export class FxShow extends FxAction {
   connectedCallback() {
     this.dialog = this.getAttribute('dialog');
-    if(!this.dialog){
-      this.dispatch('error',{message:'dialog does not exist'})
+    if (!this.dialog) {
+      Fore.dispatch(this, 'error', { message: 'dialog does not exist' });
     }
   }
 
   perform() {
-    document.getElementById(this.dialog).open();
+    resolveId(this.dialog, this).open();
   }
 }
 
-window.customElements.define('fx-show', FxShow);
+if (!customElements.get('fx-show')) {
+  window.customElements.define('fx-show', FxShow);
+}

package/src/actions/fx-toggle.js

@@ -1,23 +1,25 @@
-import { FxAction } from './fx-action.js';
+import { AbstractAction } from './abstract-action.js';
 
 /**
  * `fx-toggle`
  *
  */
-class FxToggle extends FxAction {
+class FxToggle extends AbstractAction {
+  /*
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+  }
+*/
   connectedCallback() {
+    super.connectedCallback();
     if (this.hasAttribute('case')) {
       this.case = this.getAttribute('case');
     }
   }
 
-  /*
-    disconnectedCallback() {
-        super.disconnectedCallback();
-    }
-
-*/
-  execute() {
+  perform() {
+    super.perform();
     console.log('### fx-toggle.execute ');
     if (this.case) {
       const ownerForm = this.getOwnerForm();
@@ -25,7 +27,10 @@ class FxToggle extends FxAction {
       const fxSwitch = caseElement.parentNode;
       fxSwitch.toggle(caseElement);
     }
+    // this.needsUpdate = true;
   }
 }
 
-window.customElements.define('fx-toggle', FxToggle);
+if (!customElements.get('fx-toggle')) {
+  window.customElements.define('fx-toggle', FxToggle);
+}

package/src/actions/fx-update.js

@@ -12,4 +12,6 @@ class FxUpdate extends AbstractAction {
   }
 }
 
-window.customElements.define('fx-update', FxUpdate);
+if (!customElements.get('fx-update')) {
+  window.customElements.define('fx-update', FxUpdate);
+}

package/src/dep_graph.js

@@ -80,7 +80,7 @@ function createDFS(edges, leavesOnly, result, circular) {
           currentPath.push(node);
           window.dispatchEvent(
             new CustomEvent('compute-exception', {
-              composed: true,
+              composed: false,
               bubbles: true,
               detail: {
                 path: currentPath,
@@ -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;