@jinntec/fore 1.3.0 → 1.5.0

package/index.js

@@ -15,6 +15,7 @@ import './src/ui/fx-group.js';
 import './src/ui/fx-hint.js';
 import './src/ui/fx-output.js';
 import './src/ui/fx-repeat.js';
+import './src/ui/fx-repeat-attributes.js';
 import './src/ui/fx-switch.js';
 import './src/ui/fx-trigger.js';
 import './src/ui/fx-case.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jinntec/fore",
-  "version": "1.3.0",
+  "version": "1.5.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

@@ -22,12 +22,39 @@ export class AbstractAction extends foreElementMixin(HTMLElement) {
   static get properties() {
     return {
       ...super.properties,
+      /**
+       * can be either 'cancel' or 'perform' (default)
+       */
+      defaultAction:{
+        type: String
+      },
+      /**
+       * delay before executing action in milliseconds
+       */
+      delay: {
+        type: Number,
+      },
       /**
        * detail - event detail object
        */
       detail: {
         type: Object,
       },
+      /**
+       * event to listen for
+       */
+      event: {
+        type: Object,
+      },
+      handler:{
+        type:Object,
+      },
+      /**
+       * boolean XPath expression. If true the action will be executed.
+       */
+      ifExpr: {
+        type: String,
+      },
       /**
        * wether nor not an action needs to run the update cycle
        */
@@ -35,21 +62,22 @@ export class AbstractAction extends foreElementMixin(HTMLElement) {
         type: Boolean,
       },
       /**
-       * event to listen for
+       * The observer if given is the element on which an event is triggered. It must be an ancestor of the target
+       * element of an event.
        */
-      event: {
-        type: Object,
+      observer:{
+        type:Object,
       },
       /**
-       * id of target element to attach listener to
+       * can be either 'stop' or 'continue' (default)
        */
-      target: {
+      propagate:{
         type: String,
       },
       /**
-       * boolean XPath expression. If true the action will be executed.
+       * id of target element to attach listener to
        */
-      ifExpr: {
+      target: {
         type: String,
       },
       /**
@@ -59,12 +87,6 @@ export class AbstractAction extends foreElementMixin(HTMLElement) {
       whileExpr: {
         type: String,
       },
-      /**
-       * delay before executing action in milliseconds
-       */
-      delay: {
-        type: Number,
-      },
     };
   }
 
@@ -76,6 +98,7 @@ export class AbstractAction extends foreElementMixin(HTMLElement) {
 
   connectedCallback() {
     this.style.display = 'none';
+    this.propagate = this.hasAttribute('propagate')? this.getAttribute('propagate'):'continue';
     this.repeatContext = undefined;
 
     if (this.hasAttribute('event')) {
@@ -117,55 +140,70 @@ export class AbstractAction extends foreElementMixin(HTMLElement) {
    * @param e
    */
   async execute(e) {
+    if(this.propagate === 'stop'){
+      console.log('event propagation stopped', e)
+      e.stopPropagation();
+    }
+
+    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 +211,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 +235,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 +258,28 @@ 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 +288,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 +299,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();
   }
 }