@jinntec/fore 1.10.3 → 2.1.0

package/index.js

@@ -22,6 +22,7 @@ import './src/ui/fx-case.js';
 import './src/ui/fx-inspector.js';
 import './src/ui/fx-dialog.js';
 import './src/ui/fx-items.js';
+import './src/ui/fx-droptarget.js';
 
 import './src/tools/fx-action-log.js';
 import './src/tools/fx-log-settings.js';
@@ -57,6 +58,8 @@ import './src/actions/fx-reset.js';
 import './src/actions/fx-load.js';
 import './src/actions/fx-toggleboolean.js';
 import './src/actions/fx-call.js';
+import './src/actions/fx-setattribute.js';
+import './src/actions/fx-construct-done.js';
 
 import './src/functions/fx-function.js';
 

package/package.json

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

package/src/actions/abstract-action.js

@@ -1,5 +1,5 @@
 import {foreElementMixin} from '../ForeElementMixin.js';
-import {evaluateXPathToBoolean, resolveId} from '../xpath-evaluation.js';
+import {evaluateXPathToBoolean, resolveId, evaluateXPath} from '../xpath-evaluation.js';
 import getInScopeContext from '../getInScopeContext.js';
 import {Fore} from '../fore.js';
 import {FxFore} from '../fx-fore.js';
@@ -56,6 +56,18 @@ export class AbstractAction extends foreElementMixin(HTMLElement) {
             ifExpr: {
                 type: String,
             },
+            /**
+             * The iterate attribute can be added to any XForms action. It contains an expression
+             * that is evaluated once using the in-scope evaluation context before the action is
+             * executed, which will result in a sequence of items. The action will be executed with
+             * each item in the sequence as its context. This context replaces the default in scope
+             * evaluation context.
+             *
+             * The interaction with `@while` and `@if` is undefined.
+             */
+            iterateExpr: {
+                type: String
+            },
             /**
              * whether nor not an action needs to run the update cycle
              */
@@ -88,8 +100,8 @@ export class AbstractAction extends foreElementMixin(HTMLElement) {
                 type: String,
             },
             /**
-             * boolean XPath expression. If true loop will be executed. If an ifExpr is present this also needs to be true
-             * to actually run the action.
+             * boolean XPath expression. If true loop will be executed. If an ifExpr is present this
+             * also needs to be true to actually run the action.
              */
             whileExpr: {
                 type: String,
@@ -103,6 +115,9 @@ export class AbstractAction extends foreElementMixin(HTMLElement) {
         this.needsUpdate = false;
     }
 
+	disconnectedCallback() {
+	}
+
     connectedCallback() {
         this.style.display = 'none';
         this.propagate = this.hasAttribute('propagate') ? this.getAttribute('propagate') : 'continue';
@@ -132,6 +147,7 @@ export class AbstractAction extends foreElementMixin(HTMLElement) {
         this.ifExpr = this.hasAttribute('if') ? this.getAttribute('if') : null;
         this.whileExpr = this.hasAttribute('while') ? this.getAttribute('while') : null;
         this.delay = this.hasAttribute('delay') ? Number(this.getAttribute('delay')) : 0;
+		this.iterateExpr = this.hasAttribute('iterate') ? this.getAttribute('iterate') : null;
 
         this._addUpdateListener();
 
@@ -185,9 +201,7 @@ export class AbstractAction extends foreElementMixin(HTMLElement) {
      * @param e
      */
     async execute(e) {
-        console.log(this);
-        // console.log('execute', this.event);
-
+        console.log(this, this.event);
 
         if (e && e.target.nodeType !== Node.DOCUMENT_NODE && e.target !== window ){
             /*
@@ -219,19 +233,8 @@ export class AbstractAction extends foreElementMixin(HTMLElement) {
             );
         }
 
-        // console.log('executing', this);
-        // console.log('executing e', e);
-        // console.log('executing e phase', e.eventPhase);
+		// Outermost handling
         if (FxFore.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,
-                        );
-            */
-            // console.log('starting outermost handler',this);
             FxFore.outermostHandler = this;
             this.dispatchEvent(new CustomEvent('outermost-action-start', {
                 composed: true,
@@ -240,16 +243,6 @@ export class AbstractAction extends foreElementMixin(HTMLElement) {
             }));
         }
 
-        /*
-                if (FxFore.outermostHandler !== this) {
-                    console.info(
-                        `%cAction `,
-                        'background:orange; color:white; padding:0.3rem; display:inline-block; white-space: nowrap; border-radius:0.3rem;',
-                        this,
-                    );
-                }
-        */
-        // console.log('>>> outermostHandler', FxFore.outermostHandler);
 
         if (e) {
             this.currentEvent = e;
@@ -265,51 +258,26 @@ export class AbstractAction extends foreElementMixin(HTMLElement) {
             this.nodeset = this.targetElement.nodeset;
         }
 
-        // First check if 'if' condition is true - otherwise exist right away
+		// Order of application between if / while and iterate is undefined. See
+		// https://www.w3.org/MarkUp/Forms/wiki/@iterate
+		if (this.iterateExpr) {
+			// Same as whileExpr, let it go update UI afterwards
+			await this.handleIterateExpr();
+			this._finalizePerform(resolveThisEvent);
+			return;
+		}
+
+        // Check if 'if' condition is true - otherwise exist right away
         if (this.ifExpr && !evaluateXPathToBoolean(this.ifExpr, getInScopeContext(this), this)) {
             this._finalizePerform(resolveThisEvent);
             return;
         }
 
-        // console.log('performing action', this);
-
         if (this.whileExpr) {
-            // While: while the condition is true, delay a bit and execute the action
-            const loop = async () => {
-                // Start by waiting
-                await wait(this.delay || 0);
-
-                if (!XPathUtil.contains(this.getOwnerForm(), this)) {
-                    // We are no longer in the document. Stop working
-                    return;
-                }
-
-                if (!evaluateXPathToBoolean(this.whileExpr, getInScopeContext(this), this)) {
-                    // Done with iterating
-                    return;
-                }
-
-                // Perform the action once. But quit if it errored
-                if (!this.performSafe()) {
-                    return;
-                }
-
-                // 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 uninterruptable and immediate
-                    loop();
-                    return;
-                }
-                await loop();
-            };
-
-            // After loop is done call actionPerformed to update the model and UI
-            await loop();
-            this._finalizePerform(resolveThisEvent);
-
-            return;
+			// After loop is done call actionPerformed to update the model and UI
+            await this.handleWhileExpr();
+			this._finalizePerform(resolveThisEvent);
+			return;
         }
 
         if (this.delay) {
@@ -327,6 +295,72 @@ export class AbstractAction extends foreElementMixin(HTMLElement) {
         this._finalizePerform(resolveThisEvent);
     }
 
+	async handleWhileExpr () {
+        // While: while the condition is true, delay a bit and execute the action
+        // Start by waiting
+        await wait(this.delay || 0);
+
+        if (!XPathUtil.contains(this.getOwnerForm(), this)) {
+            // We are no longer in the document. Stop working
+            return;
+        }
+
+        if (!evaluateXPathToBoolean(this.whileExpr, getInScopeContext(this), this)) {
+            // Done with iterating
+            return;
+        }
+
+        // Perform the action once. But quit if it failed
+        if (!this.performSafe()) {
+            return;
+        }
+
+        // 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 uninterruptable and immediate
+
+			this.handleWhileExpr();
+            return;
+        }
+
+
+        await this.handleWhileExpr();
+	}
+
+	async handleIterateExpr () {
+		try {
+			// Iterate: get the context sequence and perform the action once per item.
+			const contextSequence = evaluateXPath(this.iterateExpr, getInScopeContext(this), this);
+
+			if (contextSequence.length === 0) {
+				return;
+			}
+
+			if (!XPathUtil.contains(this.getOwnerForm(), this)) {
+				// We are no longer in the document. Stop working
+				return;
+			}
+
+			for (const item of contextSequence) {
+				if (this.delay) {
+					await wait(this.delay || 0);
+				}
+
+				// This will be picked up in `getInscopeContext`
+				this.currentContext = item;
+
+				// Perform the action once. But quit if it failed
+				if (!await this.performSafe()) {
+					return;
+				}
+			}
+		} finally {
+			this.currentContext = null;
+		}
+	}
+
     _finalizePerform(resolveThisEvent) {
         this.currentEvent = null;
         this.actionPerformed();

package/src/actions/fx-confirm.js

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

package/src/actions/fx-construct-done.js

@@ -0,0 +1,28 @@
+import { AbstractAction } from './abstract-action.js';
+import {FxAction} from "./fx-action.js";
+import {Fore} from "../fore.js";
+
+/**
+ * `fx-action`
+ * an action to wrap other actions and defers the update cycle until the end of the block.
+ *
+ * @customElement
+ * @demo demo/index.html
+ */
+export class FxConstructDone extends FxAction {
+  connectedCallback() {
+    // eslint-disable-next-line wc/guard-super-call
+    super.connectedCallback();
+    console.log('parentNode', this.parentNode);
+    if(this.parentNode.nodeName !== 'FX-MODEL'){
+      Fore.dispatch(this, 'error', {message:'parent is not a model'})
+      return;
+    }
+    this.parentNode.addEventListener('model-construct-done', e => {
+      super.perform();
+    });
+  }
+}
+if (!customElements.get('fx-construct-done')) {
+  window.customElements.define('fx-construct-done', FxConstructDone);
+}

package/src/actions/fx-insert.js

@@ -15,23 +15,23 @@ import {Fore} from '../fore.js';
  * @customElement
  */
 export class FxInsert extends AbstractAction {
-    static get properties() {
-        return {
-            ...super.properties,
-            at: {
-                type: Number,
-            },
-            position: {
-                type: Number,
-            },
-            origin: {
-                type: Object,
-            },
-            keepValues: {
-                type: Boolean,
-            },
-        };
-    }
+  static get properties() {
+    return {
+      ...super.properties,
+      at: {
+        type: Number,
+      },
+      position: {
+        type: Number,
+      },
+      origin: {
+        type: Object,
+      },
+      keepValues: {
+        type: Boolean,
+      },
+    };
+  }
 
   constructor() {
     super();
@@ -127,26 +127,23 @@ export class FxInsert extends AbstractAction {
   }
 
   async perform() {
-    // super.perform();
-    // as we're overwriting the superclass we need to dispatch the execute-action ourselves
-
-
-    /*
-         todo: !!! calling super here does not correctly give the nodeset - it's likely still a bug in ForeElementMixin !!!
-        // super.perform();
-        console.log('this.nodeset', this.nodeset);
-        */
-
+    // We have a few terms here: `inScope` is the 'current item' we have. It is the item we're
+    // copying and inserting elsewhere.  If we have a `ref`, one of the nodes returned will
+    // become the sibling of this copy.  The `context` is the new parent of the copied
+    // element. It's usually better to add a `context` because that deals with empty elements.
     let inscope;
+    let context;
+    let targetSequence = [];
+    const inscopeContext = getInScopeContext(this);
+
     // ### 'context' attribute takes precedence over 'ref'
-    let targetSequence;
     if (this.hasAttribute('context')) {
-      inscope = getInScopeContext(this.getAttributeNode('context'), this.getAttribute('context'));
-      targetSequence = evaluateXPathToNodes(
+      [context] = evaluateXPathToNodes(
         this.getAttribute('context'),
-        inscope,
+        inscopeContext,
         this.getOwnerForm(),
       );
+		inscope = inscopeContext;
     }
 
     if (this.hasAttribute('ref')) {
@@ -163,14 +160,19 @@ export class FxInsert extends AbstractAction {
     let insertLocationNode;
     let index;
 
-    // const idx = this._getInsertIndex(inscope, targetSequence);
-    // console.log('insert index', idx);
-
     // if the targetSequence is empty but we got an originSequence use inscope as context and ignore 'at' and 'position'
     if (targetSequence.length === 0) {
-      insertLocationNode = inscope;
-      inscope.appendChild(originSequenceClone);
-      index = 1;
+      if (context) {
+        insertLocationNode = context;
+        context.appendChild(originSequenceClone);
+        index = 1;
+      } else {
+        // No context. We can insert into the `inscope`.
+        insertLocationNode = inscope;
+        inscope.appendChild(originSequenceClone);
+        index = 1;
+
+      }
     } else {
       /* ### insert at position given by 'at' or use the last item in the targetSequence ### */
       if (this.hasAttribute('at')) {
@@ -221,31 +223,31 @@ export class FxInsert extends AbstractAction {
         }
       }
     }
-	  // instance('default')/items/item[index()]
+    // instance('default')/items/item[index()]
 
     // console.log('insert context item ', insertLocationNode);
     // console.log('parent ', insertLocationNode.parentNode);
     // console.log('instance ', this.getModel().getDefaultContext());
     // Fore.dispatch()
 
-	  // const instanceId = XPathUtil.resolveInstance(this, this.getAttribute('context'));
+    // const instanceId = XPathUtil.resolveInstance(this, this.getAttribute('context'));
     const instanceId = XPathUtil.resolveInstance(this, this.ref);
     const inst = this.getModel().getInstance(instanceId);
-      // console.log('<<<<<<< resolved instance', inst);
-	  // Note: the parent to insert under is always the parent of the inserted node. The 'context' is not always the parent if the sequence is empty, or the position is different
-	  // const xpath = XPathUtil.getPath(originSequenceClone.parentNode, instanceId);
+    // console.log('<<<<<<< resolved instance', inst);
+    // Note: the parent to insert under is always the parent of the inserted node. The 'context' is not always the parent if the sequence is empty, or the position is different
+    // const xpath = XPathUtil.getPath(originSequenceClone.parentNode, instanceId);
     const xpath = XPathUtil.getPath(insertLocationNode.parentNode, instanceId);
 
 
 
     const path = Fore.getDomNodeIndexString(originSequenceClone);
     this.dispatchEvent(
-        new CustomEvent('execute-action', {
-          composed: true,
-          bubbles: true,
-          cancelable:true,
-          detail: { action: this, event:this.event, path },
-        }),
+      new CustomEvent('execute-action', {
+        composed: true,
+        bubbles: true,
+        cancelable:true,
+        detail: { action: this, event:this.event, path },
+      }),
     );
 
     Fore.dispatch(inst,'insert',{
@@ -267,9 +269,9 @@ export class FxInsert extends AbstractAction {
       }),
     );
 
-      this.needsUpdate = true;
-	  console.log('Changed!', xpath)
-	  return [xpath];
+    this.needsUpdate = true;
+    console.log('Changed!', xpath)
+    return [xpath];
   }
 
   // eslint-disable-next-line class-methods-use-this

package/src/actions/fx-load.js

@@ -5,10 +5,9 @@ import {XPathUtil} from "../xpath-util.js";
 import {Fore} from "../fore.js";
 
 /**
- * `fx-message`
- *
- * Action to display messages to the user.
+ * `fx-load`
  *
+ * Action to load a window, tab or embed some Html into the current page at given location.
  *
  */
 class FxLoad extends AbstractAction {
@@ -145,24 +144,14 @@ class FxLoad extends AbstractAction {
             });
             const data = await response.text();
             // console.log('data loaded: ', data);
+            // const data = Fore.loadHtml(resolvedUrl);
 
             // todo: if data contain '<template' element as first child instanciate and insert it
             if (!this.attachTo) {
                 this.innerHtml = data;
             }
-/*
-            if (this.attachTo.startsWith('#')) {
-                const targetId = this.attachTo.substring(1);
-                const resolved = resolveId(targetId, this);
-                resolved.innerHTML = '';
-                resolved.innerHTML = data;
-            }
-*/
             this._attachToElement(data);
-
-
             Fore.dispatch(this, 'loaded', {url: this.url})
-
         } catch (error) {
             throw new Error(`failed loading data ${error}`);
         }
@@ -228,27 +217,6 @@ class FxLoad extends AbstractAction {
         return replaced;
     }
 
-
-    /*
-        _getValue() {
-            if (this.hasAttribute('value')) {
-                const valAttr = this.getAttribute('value');
-                try {
-                    const inscopeContext = getInScopeContext(this, valAttr);
-                    return evaluateXPathToString(valAttr, inscopeContext, this);
-                } catch (error) {
-                    console.error(error);
-                    Fore.dispatch(this, 'error', {message: error});
-                }
-            }
-            if (this.textContent) {
-                return this.textContent;
-            }
-            return null;
-        }
-    */
-
-
 }
 
 if (!customElements.get('fx-load')) {

package/src/actions/fx-refresh.js

@@ -21,6 +21,7 @@ class FxRefresh extends AbstractAction {
     );
 
     if (this.hasAttribute('self')) {
+      console.log(`### <<<<< refresh() self ${this} >>>>>`);
       const control = XPathUtil.getClosest('fx-control', this);
       if (control) {
         control.refresh();
@@ -28,11 +29,13 @@ class FxRefresh extends AbstractAction {
       }
     }
     if(this.hasAttribute('force')){
+      console.log(`### <<<<< refresh() force ${this} >>>>>`);
       this.getOwnerForm().forceRefresh();
       return;
     }
     if(this.hasAttribute('control')){
       const targetId = this.getAttribute('control');
+      console.log(`### <<<<< refresh() control '${targetId}' >>>>>`);
       const ctrl = resolveId(targetId, this);
       if (ctrl && Fore.isUiElement(ctrl.nodeName) && typeof ctrl.refresh === 'function') {
         ctrl.refresh();

package/src/actions/fx-setattribute.js

@@ -0,0 +1,68 @@
+// import { FxAction } from './fx-action.js';
+import '../fx-model.js';
+import {AbstractAction} from './abstract-action.js';
+import {evaluateXPathToString} from '../xpath-evaluation.js';
+import {Fore} from '../fore.js';
+import getInScopeContext from "../getInScopeContext";
+
+/**
+ * `fx-setattribute` allows to create and set an attribute value in the data.
+ *
+ * @customElement
+ */
+export default class FxSetattribute extends AbstractAction {
+    static get properties() {
+        return {
+            ...super.properties,
+            ref: {
+                type: String,
+            },
+            attrName: {
+                type: String,
+            },
+            attrValue:{
+                type: String
+            }
+        };
+    }
+
+    constructor() {
+        super();
+        this.ref = '';
+        this.attrName = '';
+        this.attrValue = '';
+    }
+
+    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.attrName = this.hasAttribute('name') ? this.getAttribute('name') : null;
+        this.attrValue = this.hasAttribute('value') ? this.getAttribute('value') : '';
+        if(!this.attrName){
+            Fore.dispatch('this', 'error',{message:'name or value not specified'});
+        }
+    }
+
+    async perform() {
+        super.perform();
+        const mi = this.getModelItem();
+        if(mi.node.nodeType !== Node.ELEMENT_NODE){
+            Fore.dispatch('this', 'error',{message:'referenced item is not an element'});
+            return;
+        }
+        mi.node.setAttribute(this.attrName, this.attrValue);
+        this.needsUpdate = true;
+    }
+
+}
+
+if (!customElements.get('fx-setattribute')) {
+    window.customElements.define('fx-setattribute', FxSetattribute);
+}

package/src/actions/fx-toggle.js

@@ -32,7 +32,7 @@ class FxToggle extends AbstractAction {
       const fxSwitch = caseElement.parentNode;
       fxSwitch.toggle(caseElement);
     }
-    // this.needsUpdate = true;
+    this.needsUpdate = true;
   }
 }