@jinntec/fore 2.0.0 → 2.1.1

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": "2.0.0",
+  "version": "2.1.1",
   "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();
 
@@ -186,8 +202,6 @@ export class AbstractAction extends foreElementMixin(HTMLElement) {
      */
     async execute(e) {
         console.log(this, this.event);
-        // console.log('execute', 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-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/fore.js

@@ -18,7 +18,7 @@ export class Fore {
 
   static TYPE_DEFAULT = 'xs:string';
 
-  /**
+ /**
    * Loads and return a piece of HTML
    * @param url - the Url to load from
    * @returns {Promise<string>}
@@ -412,6 +412,7 @@ export class Fore {
     return 'done';
   }
 
+/*
   static evaluateAttributeTemplateExpression(expr, node) {
     const matches = expr.match(/{[^}]*}/g);
     if (matches) {
@@ -427,6 +428,7 @@ export class Fore {
     }
     return expr;
   }
+*/
 
   static fadeInElement(element) {
     const duration = 600;

package/src/fx-bind.js

@@ -72,6 +72,7 @@ export class FxBind extends foreElementMixin(HTMLElement) {
       this._buildBindGraph();
       this._createModelItems();
     }
+    // todo: support json
 
     // ### process child bindings
     this._processChildren(model);

package/src/fx-fore.js

@@ -26,6 +26,7 @@ import {FxRepeatAttributes} from './ui/fx-repeat-attributes.js';
  */
 export class FxFore extends HTMLElement {
     static outermostHandler = null;
+    static draggedItem = null;
 
     static get properties() {
         return {
@@ -103,6 +104,8 @@ export class FxFore extends HTMLElement {
 		// updates are included in that one
 		this.outermostHandler = null;
 
+		this.copiedElements = new WeakSet();
+
         const style = `
             :host {
                 display: block;
@@ -179,7 +182,6 @@ export class FxFore extends HTMLElement {
         `;
 
         const html = `
-           <noscript>This page uses Web Components and needs JavaScript to be enabled..</noscript>
 <!--           <slot name="errors"></slot> -->
            <jinn-toast id="message" gravity="bottom" position="left"></jinn-toast>
            <jinn-toast id="sticky" gravity="bottom" position="left" duration="-1" close="true" data-class="sticky-message"></jinn-toast>
@@ -390,6 +392,7 @@ export class FxFore extends HTMLElement {
     }
 
     disconnectedCallback() {
+		this.removeEventListener('dragstart', this.dragstart);
         /*
         this.removeEventListener('model-construct-done', this._handleModelConstructDone);
         this.removeEventListener('message', this._displayMessage);
@@ -530,6 +533,7 @@ export class FxFore extends HTMLElement {
             this._updateTemplateExpressions();
             this._scanForNewTemplateExpressionsNextRefresh = false; // reset
         }
+
         this._processTemplateExpressions();
 
         // console.log('### <<<<< dispatching refresh-done - end of UI update cycle >>>>>');
@@ -931,8 +935,51 @@ export class FxFore extends HTMLElement {
         Fore.dispatch(this, 'ready', {});
         // console.log('dataChanged', FxModel.dataChanged);
         console.timeEnd('init');
+
+		this.addEventListener('dragstart', this._handleDragStart);
+		//	this.addEventListener('dragend', this._handleDragEnd);
+		this.handleDrop = event => this._handleDrop(event);
+		this.ownerDocument.body.addEventListener('drop', this.handleDrop);
+		this.ownerDocument.body.addEventListener('dragover', e=>{
+			e.preventDefault();
+			e.stopPropagation();
+			e.dataTransfer.dropEffect = "move";
+		});
     }
 
+	_handleDragStart (event) {
+		const draggedItem = event.target.closest('[draggable="true"]');
+		this.originalDraggedItem = draggedItem;
+		console.log('DRAG START', this);
+		if (draggedItem.getAttribute('drop-action') === 'copy') {
+			event.dataTransfer.dropEffect = 'copy';
+			event.dataTransfer.effectAllowed = 'copy';
+			this.draggedItem = draggedItem.cloneNode(true);
+			this.draggedItem.setAttribute('drop-action', 'move');
+			this.copiedElements.add(this.draggedItem);
+		} else {
+			event.dataTransfer.dropEffect = 'move';
+			event.dataTransfer.effectAllowed = 'move';
+			this.draggedItem = draggedItem;
+		}
+	}
+
+	_handleDrop (event) {
+		console.log('DROP ON BODY', this)
+		if (!this.draggedItem) {
+			return;
+		}
+		// A drop on 'body' should be a removal.
+		if (event.dataTransfer.dropEffect === 'none') {
+			if (this.copiedElements.has(this.originalDraggedItem)) {
+				this.originalDraggedItem.remove();
+			}
+		}
+		this.originalDraggedItem = null
+		this.draggedItem = null;
+		event.stopPropagation();
+	}
+
     registerLazyElement(element) {
         if (this.intersectionObserver) {
             // console.log('registerLazyElement',element);