@jinntec/fore 1.3.0 → 1.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jinntec/fore",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "description": "Fore - declarative user interfaces in plain HTML",
   "module": "./index.js",
   "publishConfig": {

package/resources/fore.css

@@ -130,7 +130,12 @@ fx-hint{
     display: none;
 }
 
-fx-model, fx-model *, fx-model ::slotted(fx-instance), fx-instance{
+fx-model,
+fx-model *,
+fx-model ::slotted(fx-instance),
+fx-instance,
+fx-action,
+fx-setvalue{
     display:none;
 }
 

package/src/ForeElementMixin.js

@@ -100,6 +100,10 @@ export const foreElementMixin = superclass =>
      */
     evalInContext() {
       // const inscopeContext = this.getInScopeContext();
+      const model = this.getModel();
+      if(!model){
+        return;
+      }
       let inscopeContext;
       if (this.hasAttribute('context')) {
         inscopeContext = getInScopeContext(this.getAttributeNode('context') || this, this.context);

package/src/actions/abstract-action.js

@@ -117,55 +117,65 @@ export class AbstractAction extends foreElementMixin(HTMLElement) {
    * @param e
    */
   async execute(e) {
+    let resolveThisEvent = () => {};
+    if (e && e.listenerPromises) {
+      e.listenerPromises.push(
+        new Promise(resolve => {
+          resolveThisEvent = resolve;
+        }),
+      );
+    }
+
     // console.log('executing', this);
 
     // console.log('executing e', e);
     // console.log('executing e phase', e.eventPhase);
-    if(AbstractAction.outermostHandler === null){
+    if (AbstractAction.outermostHandler === null) {
+      console.time('outermostHandler');
       console.info(
-          `%coutermost Action `,
-          "background:#e65100; color:white; padding:0.3rem; display:inline-block; white-space: nowrap; border-radius:0.3rem;",
-          this
+        `%coutermost Action `,
+        'background:#e65100; color:white; padding:0.3rem; display:inline-block; white-space: nowrap; border-radius:0.3rem;',
+        this,
       );
       // console.log('starting outermost handler',this);
       AbstractAction.outermostHandler = this;
     }
 
-    if(AbstractAction.outermostHandler !== this){
+    if (AbstractAction.outermostHandler !== this) {
       console.info(
-          `%cAction `,
-          "background:orange; color:white; padding:0.3rem; display:inline-block; white-space: nowrap; border-radius:0.3rem;",
-          this
+        `%cAction `,
+        'background:orange; color:white; padding:0.3rem; display:inline-block; white-space: nowrap; border-radius:0.3rem;',
+        this,
       );
     }
     // console.log('>>> outermostHandler', AbstractAction.outermostHandler);
 
-    if(e && e.code){
+    if (e && e.code) {
       const vars = new Map();
       vars.set('code', e.code);
       // this.setInScopeVariables(vars);
-      this.setInScopeVariables(new Map([ ...this.inScopeVariables, ...vars]));
+      this.setInScopeVariables(new Map([...this.inScopeVariables, ...vars]));
     }
 
     if (e && e.detail) {
       this.detail = e.detail;
       const vars = new Map();
-      Object.keys(e.detail).forEach(function(key,index) {
+      Object.keys(e.detail).forEach(function(key, index) {
         // key: the name of the object key
         // index: the ordinal position of the key within the object
-        vars.set(key,e.detail[key]);
+        vars.set(key, e.detail[key]);
       });
-      if(vars.size !== 0){
-        console.log("event detail vars", vars);
+      if (vars.size !== 0) {
+        console.log('event detail vars', vars);
       }
-		this.setInScopeVariables(new Map([ ...this.inScopeVariables, ...vars]));
+      this.setInScopeVariables(new Map([...this.inScopeVariables, ...vars]));
     }
     this.needsUpdate = false;
 
-    try{
+    try {
       this.evalInContext();
-    }catch (error){
-      console.warn('evaluation faild',error);
+    } catch (error) {
+      console.warn('evaluation faild', error);
     }
     if (this.targetElement && this.targetElement.nodeset) {
       this.nodeset = this.targetElement.nodeset;
@@ -173,6 +183,7 @@ export class AbstractAction extends foreElementMixin(HTMLElement) {
 
     // First check if 'if' condition is true - otherwise exist right away
     if (this.ifExpr && !evaluateXPathToBoolean(this.ifExpr, getInScopeContext(this), this)) {
+      this._finalizePerform(resolveThisEvent);
       return;
     }
 
@@ -196,13 +207,20 @@ export class AbstractAction extends foreElementMixin(HTMLElement) {
         this.perform();
 
         // Go for one more iteration
+        if (this.delay) {
+          // If we have a delay, fire and forget this.
+          // Otherwise, if we have no delay, keep waiting for all iterations to be done.
+          // The while is then uninteruptable and immediate
+          loop();
+          return;
+        }
         await loop();
       };
 
       // After loop is done call actionPerformed to update the model and UI
       await loop();
-      this.actionPerformed();
-      Fore.dispatch(this, 'while-performed', {});
+
+      this._finalizePerform(resolveThisEvent);
       return;
     }
 
@@ -212,21 +230,29 @@ export class AbstractAction extends foreElementMixin(HTMLElement) {
       if (!this.ownerDocument.contains(this)) {
         // We are no longer in the document. Stop working
         this.actionPerformed();
+        resolveThisEvent();
         return;
       }
     }
 
-    this.perform();
+    await this.perform();
+    this._finalizePerform(resolveThisEvent);
+
+  }
+
+  _finalizePerform(resolveThisEvent) {
     this.actionPerformed();
-    if(AbstractAction.outermostHandler === this){
+    if (AbstractAction.outermostHandler === this) {
       AbstractAction.outermostHandler = null;
       console.info(
-          `%coutermost Action done`,
-          "background:#e65100; color:white; padding:0.3rem; display:inline-block; white-space: nowrap; border-radius:0.3rem;",
-          this
+        `%coutermost Action done`,
+        'background:#e65100; color:white; padding:0.3rem; display:inline-block; white-space: nowrap; border-radius:0.3rem;',
+        this,
       );
+      console.timeEnd('outermostHandler');
 
     }
+    resolveThisEvent();
   }
 
   /**
@@ -235,13 +261,7 @@ export class AbstractAction extends foreElementMixin(HTMLElement) {
    *
    * This function should not called on any action directly - call execute() instead to ensure proper execution of 'if' and 'while'
    */
-  perform() {
-    console.info(
-        `%cperform `,
-        "background:orange; color:white; padding:0.3rem; display:inline-block; white-space: nowrap; border-radius:0.3rem;",
-        this
-    );
-
+  async perform() {
     //todo: review - this evaluation seems redundant as we already evaluated in execute
     if (this.isBound() || this.nodeName === 'FX-ACTION') {
       this.evalInContext();
@@ -252,14 +272,36 @@ export class AbstractAction extends foreElementMixin(HTMLElement) {
    * calls the update cycle if action signalled that update is needed.
    */
   actionPerformed() {
+    const model = this.getModel();
+    if(!model){
+      return;
+    }
+    if (!model.inited) {
+      return;
+    }
+    if (
+      AbstractAction.outermostHandler &&
+      !AbstractAction.outermostHandler.ownerDocument.contains(AbstractAction.outermostHandler)
+    ) {
+      // The old outermosthandler fell out of the document. An error has happened.
+      // Just remove the old one and act like we are starting anew.
+      console.warn('Unsetting outermost handler');
+      AbstractAction.outermostHandler = null;
+    }
     // console.log('actionPerformed action parentNode ', this.parentNode);
-    // if (this.needsUpdate && AbstractAction.outermostHandler !== this) {
-    if (this.needsUpdate) {
-      const model = this.getModel();
+    if (
+      this.needsUpdate &&
+      (AbstractAction.outermostHandler === this || !AbstractAction.outermostHandler)
+    ) {
+      console.log('Running actionperformed');
       model.recalculate();
       model.revalidate();
       model.parentNode.refresh(true);
       this.dispatchActionPerformed();
+    } else if (this.needsUpdate) {
+      // We need an update, but the outermost action handler may not. Make this clear!
+      AbstractAction.outermostHandler.needsUpdate = true;
+      console.log('Update surpressed!');
     }
   }
 

package/src/actions/fx-action.js

@@ -31,7 +31,7 @@ export class FxAction extends AbstractAction {
     `;
   }
 
-  perform() {
+  async perform() {
     super.perform();
     const { children } = this;
 
@@ -42,14 +42,14 @@ export class FxAction extends AbstractAction {
       script.src = this.src;
       this.appendChild(script);
     } else {
-      Array.from(children).forEach(actionOrVar => {
-        if (actionOrVar.localName === 'fx-var') {
-          return;
-        }
-        const action = actionOrVar;
-        action.detail = this.detail;
-        action.execute();
-      });
+		for (const actionOrVar of children) {
+			if (actionOrVar.localName === 'fx-var') {
+				continue;
+			}
+			const action = actionOrVar;
+			action.detail = this.detail;
+        await action.execute();
+      }
       this.dispatchActionPerformed();
       this.needsUpdate = true;
     }

package/src/actions/fx-append.js

@@ -58,7 +58,7 @@ class FxAppend extends AbstractAction {
    * behavior should be needed for some reason later on, it can be added easier by a providing an 'duplicate' action.
    *
    */
-  perform() {
+  async perform() {
     super.perform();
 
     this._dataFromTemplate();

package/src/actions/fx-confirm.js

@@ -12,7 +12,7 @@ export class FxConfirm extends FxAction {
     this.message = this.hasAttribute('message') ? this.getAttribute('message') : null;
   }
 
-  perform() {
+  async perform() {
     if (window.confirm(this.message)) {
       super.perform();
     }

package/src/actions/fx-copy.js

@@ -0,0 +1,68 @@
+import '../fx-model.js';
+import {AbstractAction} from './abstract-action.js';
+
+/**
+ * `fx-copy`
+ * todo: demo + tests
+ * @customElement
+ */
+export default class FxCopy extends AbstractAction {
+    static get properties() {
+        return {
+            ...super.properties,
+            ref: {
+                type: String,
+            },
+            to: {
+                type: String,
+            },
+        };
+    }
+
+    constructor() {
+        super();
+        this.ref = '';
+        this.to = '';
+    }
+
+    connectedCallback() {
+        if (super.connectedCallback) {
+            super.connectedCallback();
+        }
+
+        if (this.hasAttribute('ref')) {
+            this.ref = this.getAttribute('ref');
+        } else {
+            throw new Error('fx-copy must specify a "ref" attribute');
+        }
+        this.to = this.getAttribute('to');
+    }
+
+    perform() {
+        console.log('copying to clipboard')
+        super.perform();
+
+        if(this.nodeset.nodeType === Node.ATTRIBUTE_NODE){
+            navigator.clipboard.writeText(this.nodeset.nodeValue);
+        }else{
+            navigator.clipboard.writeText(this.nodeset);
+        }
+    }
+
+/*
+    setValue(modelItem, newVal) {
+        const item = modelItem;
+        if (!item) return;
+
+        if (item.value !== newVal) {
+            item.value = newVal;
+            this.getModel().changed.push(modelItem);
+            this.needsUpdate = true;
+        }
+    }
+*/
+}
+
+if (!customElements.get('fx-copy')) {
+    window.customElements.define('fx-copy', FxCopy);
+}

package/src/actions/fx-delete.js

@@ -22,7 +22,7 @@ class FxDelete extends AbstractAction {
      *
      * Will NOT perform delete if nodeset is pointing to document node, document fragment, root node or being readonly.
      */
-    perform() {
+    async perform() {
         console.log('##### fx-delete executing...');
         const inscopeContext = getInScopeContext(this.getAttributeNode('ref') || this, this.ref);
         this.nodeset = evaluateXPathToNodes(this.ref, inscopeContext, this);

package/src/actions/fx-dispatch.js

@@ -52,7 +52,7 @@ export class FxDispatch extends AbstractAction {
 
 */
 
-  perform() {
+  async perform() {
     console.log('### fx-dispatch.perform ', this);
 
     const properties = this.querySelectorAll('fx-property');

package/src/actions/fx-hide.js

@@ -17,7 +17,7 @@ export class FxHide extends AbstractAction {
     }
   }
 
-  perform() {
+  async perform() {
     const dialog = resolveId(this.dialog, this);
     dialog.hide();
     Fore.dispatch(dialog,'dialog-hidden',{})

package/src/actions/fx-insert.js

@@ -81,7 +81,7 @@ export class FxInsert extends AbstractAction {
     return targetSequence.length;
   }
 
-  perform() {
+  async perform() {
     // super.perform();
 
     /*

package/src/actions/fx-message.js

@@ -47,7 +47,7 @@ class FxMessage extends AbstractAction {
     `;
   }
 
-  perform() {
+  async perform() {
     super.perform();
     let message;
     if (this.hasAttribute('value')) {

package/src/actions/fx-refresh.js

@@ -9,7 +9,7 @@ import {resolveId} from "../xpath-evaluation.js";
  *
  */
 class FxRefresh extends AbstractAction {
-  perform() {
+  async perform() {
     if (this.hasAttribute('self')) {
       const control = Fore.getClosest('fx-control', this);
       if (control) {
@@ -24,7 +24,7 @@ class FxRefresh extends AbstractAction {
     if(this.hasAttribute('control')){
       const targetId = this.getAttribute('control');
       const ctrl = resolveId(targetId, this);
-      if (Fore.isUiElement(ctrl.nodeName) && typeof ctrl.refresh === 'function') {
+      if (ctrl && Fore.isUiElement(ctrl.nodeName) && typeof ctrl.refresh === 'function') {
         ctrl.refresh();
       }
       return;

package/src/actions/fx-reload.js

@@ -19,7 +19,7 @@ export class FxReload extends AbstractAction {
     },{once:true});
   }
 
-  perform() {
+  async perform() {
     Fore.dispatch(this, 'reload', {});
   }
 }

package/src/actions/fx-replace.js

@@ -32,7 +32,7 @@ export default class FxReplace extends AbstractAction {
     this.with = this.getAttribute('with');
   }
 
-  perform() {
+  async perform() {
     super.perform();
     console.log('replace action');
     // console.log('replace action variables', this.inScopeVariables);

package/src/actions/fx-return.js

@@ -20,7 +20,7 @@ export class FxReturn extends AbstractAction {
     // const nonrelevant = this.hasAttribute('nonrelevant') ? this.getAttribute('nonrelevant') : null;
   }
 
-  perform() {
+  async perform() {
     super.perform();
     console.log('performing return with nodes', this.nodeset);
 

package/src/actions/fx-send.js

@@ -22,7 +22,7 @@ class FxSend extends AbstractAction {
     this.submission = this.getAttribute('submission');
   }
 
-  perform() {
+  async perform() {
     super.perform();
 
     console.log('submitting ', this.submission);
@@ -44,7 +44,7 @@ class FxSend extends AbstractAction {
       throw new Error(`submission with id: ${this.submission} not found`);
     }
     console.log('submission', submission);
-    submission.submit();
+      await submission.submit();
 /*
     if(submission.replace === 'instance'){
       this.getModel().updateModel();

package/src/actions/fx-setfocus.js

@@ -13,7 +13,7 @@ export class FxSetfocus extends AbstractAction {
       this.control = this.hasAttribute('control') ? this.getAttribute('control') : null;
   }
 
-  perform() {
+  async perform() {
       console.log('setting focus', this.control);
       // super.perform();
       const selector = '#'+this.control;

package/src/actions/fx-setvalue.js

@@ -40,7 +40,7 @@ export default class FxSetvalue extends AbstractAction {
         this.valueAttr = this.getAttribute('value');
     }
 
-    perform() {
+    async perform() {
         super.perform();
         let {value} = this;
         if (this.valueAttr !== null) {

package/src/actions/fx-show.js

@@ -17,7 +17,7 @@ export class FxShow extends FxAction {
     }
   }
 
-  perform() {
+  async perform() {
     const targetDlg = resolveId(this.dialog,this);
     if(!targetDlg){
       console.error('target dialog with given id does not exist',this.dialog);

package/src/actions/fx-toggle.js

@@ -19,7 +19,7 @@ class FxToggle extends AbstractAction {
     }
   }
 
-  perform() {
+  async perform() {
     super.perform();
     console.log('### fx-toggle.execute ');
     if (this.case) {

package/src/actions/fx-update.js

@@ -7,7 +7,7 @@ import { AbstractAction } from './abstract-action.js';
  *
  */
 class FxUpdate extends AbstractAction {
-  perform() {
+  async perform() {
     this.getModel().updateModel();
   }
 }

package/src/fore.js

@@ -9,6 +9,16 @@ export class Fore {
 
   static TYPE_DEFAULT = 'xs:string';
 
+  /**
+   * returns the next `fx-fore` element upwards in tree
+   *
+   * @param start
+   * @returns {*}
+   */
+  static getFore(start) {
+    return start.nodeType === Node.TEXT_NODE ? start.parentNode.closest('fx-fore'):start.closest('fx-fore');
+  }
+
   static get ACTION_ELEMENTS() {
     return [
       'FX-ACTION',
@@ -285,14 +295,23 @@ export class Fore {
     return fadeOut();
   }
 
-  static dispatch(target, eventName, detail) {
+  static async dispatch(target, eventName, detail) {
     const event = new CustomEvent(eventName, {
       composed: false,
       bubbles: true,
       detail,
     });
-    console.info('dispatching', event.type, target);
-    target.dispatchEvent(event);
+	  event.listenerPromises = [];
+      // console.info('dispatching', event.type, target);
+	  // console.log('!!! DISPATCH_START', eventName);
+
+      target.dispatchEvent(event);
+
+	  // By now, all listeners for the event should have registered their completion promises to us.
+	  if (event.listenerPromises.length) {
+		  await Promise.all(event.listenerPromises);
+	  }
+	  // console.log('!!! DISPATCH_DONE', eventName);
   }
 
   static prettifyXml(source) {
@@ -409,13 +428,42 @@ export class Fore {
             }),
           );
         }
-        hostElement.appendChild(theFore);
-        theFore.classList.add('widget');
-        // return theFore;
-        // theFore.setAttribute('from-src', this.src);
-        // this.replaceWith(theFore);
+        const imported = document.importNode(theFore,true);
+        console.log(`########## loaded fore as component ##### ${hostElement.url}`);
+        imported.addEventListener(
+            'model-construct-done',
+            e => {
+              console.log('subcomponent ready', e.target);
+              const defaultInst = imported.querySelector('fx-instance');
+              // console.log('defaultInst', defaultInst);
+              if(hostElement.initialNode){
+                const doc = new DOMParser().parseFromString('<data></data>', 'application/xml');
+                // Note: Clone the input to prevent the inner fore from editing the outer node
+                doc.firstElementChild.appendChild(hostElement.initialNode.cloneNode(true));
+                // defaultinst.setInstanceData(this.initialNode);
+                defaultInst.setInstanceData(doc);
+              }
+              // console.log('new data', defaultInst.getInstanceData());
+              // theFore.getModel().modelConstruct();
+              imported.getModel().updateModel();
+              imported.refresh();
+              return 'done';
+
+            },
+            { once: true },
+        );
+
+        const dummy = hostElement.querySelector('input');
+        if (hostElement.hasAttribute('shadow')) {
+          dummy.parentNode.removeChild(dummy);
+          hostElement.shadowRoot.appendChild(imported);
+        } else {
+          console.log(this, 'replacing widget with',theFore);
+          dummy.replaceWith(imported);
+          // this.appendChild(imported);
+        }
       })
-      .catch(error => {
+      /*.catch(error => {
         hostElement.dispatchEvent(
           new CustomEvent('error', {
             composed: false,
@@ -426,7 +474,7 @@ export class Fore {
             },
           }),
         );
-      });
+      });*/
   }
 
   /**

package/src/fx-bind.js

@@ -320,6 +320,11 @@ export class FxBind extends foreElementMixin(HTMLElement) {
       this,
     );
 
+    const alert = this.getAlert();
+    if (alert) {
+      newItem.addAlert(alert);
+    }
+
     this.getModel().registerModelItem(newItem);
   }