@jinntec/fore 1.5.0 → 1.6.0

package/src/actions/fx-action.js

@@ -37,7 +37,6 @@ export class FxAction extends AbstractAction {
 
     if (this.src) {
       this.innerHTML = ''; // reset
-      console.log('### fx-script.perform ');
       const script = document.createElement('script');
       script.src = this.src;
       this.appendChild(script);

package/src/actions/fx-append.js

@@ -15,6 +15,7 @@ import { resolveId } from '../xpath-evaluation.js';
 class FxAppend extends AbstractAction {
   static get properties() {
     return {
+	  ...AbstractAction.properties,
       ref: {
         type: String,
       },
@@ -37,7 +38,6 @@ class FxAppend extends AbstractAction {
 
   connectedCallback() {
     super.connectedCallback();
-    console.log('connectedCallback ', this);
     this.ref = this.getAttribute('ref');
     this.repeat = this.getAttribute('repeat');
     // this.repeated = this.closest('fx-repeatitem');
@@ -120,7 +120,6 @@ class FxAppend extends AbstractAction {
    */
   _dispatch() {
     const targetRepeat = resolveId(this.repeat, this);
-    console.log('dispatching index change ', targetRepeat.nodeset.length);
     Fore.dispatch(targetRepeat, 'index-changed', { index: targetRepeat.nodeset.length });
   }
 

package/src/actions/fx-confirm.js

@@ -8,7 +8,19 @@ import {FxAction} from "./fx-action.js";
  * @demo demo/project.html
  */
 export class FxConfirm extends FxAction {
+	static get properties () {
+		return {
+			...FxAction.properties,
+			message: {
+				type:String
+			}
+		};
+	}
+
   connectedCallback() {
+    if(super.connectedCallback){
+    super.connectedCallback();
+    }
     this.message = this.hasAttribute('message') ? this.getAttribute('message') : null;
   }
 

package/src/actions/fx-copy.js

@@ -39,7 +39,6 @@ export default class FxCopy extends AbstractAction {
     }
 
     perform() {
-        console.log('copying to clipboard')
         super.perform();
 
         if(this.nodeset.nodeType === Node.ATTRIBUTE_NODE){

package/src/actions/fx-delete.js

@@ -1,7 +1,8 @@
+import * as fx from "fontoxpath";
 import {AbstractAction} from './abstract-action.js';
 import {Fore} from '../fore.js';
-import {evaluateXPathToNodes} from "../xpath-evaluation.js";
-import {XPathUtil} from "../xpath-util";
+import {evaluateXPathToNodes, evaluateXPathToString} from "../xpath-evaluation.js";
+import {XPathUtil} from "../xpath-util.js";
 import getInScopeContext from '../getInScopeContext.js';
 
 /**
@@ -13,8 +14,13 @@ import getInScopeContext from '../getInScopeContext.js';
  * @demo demo/todo.html
  */
 class FxDelete extends AbstractAction {
-    constructor() {
-        super();
+    static get properties() {
+        return {
+            ...super.properties,
+            ref: {
+                type: String,
+            },
+        };
     }
 
     /**
@@ -23,13 +29,30 @@ class FxDelete extends AbstractAction {
      * Will NOT perform delete if nodeset is pointing to document node, document fragment, root node or being readonly.
      */
     async perform() {
-        console.log('##### fx-delete executing...');
+
         const inscopeContext = getInScopeContext(this.getAttributeNode('ref') || this, this.ref);
         this.nodeset = evaluateXPathToNodes(this.ref, inscopeContext, this);
 
-        console.log('delete nodeset ', this.nodeset);
+        // console.log('delete nodeset ', this.nodeset);
+
+        const instanceId = XPathUtil.resolveInstance(this);
+        const instance = this.getModel().getInstance(instanceId);
+
+        // const path = instance && this.nodeset.length !== 0 ? evaluateXPathToString('path()', this.nodeset[0], instance) : '';
+
+        const path = Fore.getDomNodeIndexString(this.nodeset);
 
         const nodesToDelete = this.nodeset;
+
+        this.dispatchEvent(
+            new CustomEvent('execute-action', {
+                composed: true,
+                bubbles: true,
+                cancelable:true,
+                detail: { action: this, event:this.event, path:path},
+            }),
+        );
+
         let parent;
         if (Array.isArray(nodesToDelete)) {
             if(nodesToDelete.length === 0) return;
@@ -42,9 +65,8 @@ class FxDelete extends AbstractAction {
             this._deleteNode(parent, nodesToDelete);
         }
 
-        const instanceId = XPathUtil.resolveInstance(this);
-        const instance = this.getModel().getInstance(instanceId);
-        Fore.dispatch(instance, 'deleted', {deletedNodes:nodesToDelete});
+
+        await Fore.dispatch(instance, 'deleted', {ref:path,deletedNodes:nodesToDelete});
         this.needsUpdate = true;
     }
 

package/src/actions/fx-dispatch.js

@@ -10,6 +10,21 @@ import { evaluateXPath, resolveId } from '../xpath-evaluation.js';
  * can be accessed in usual JavaScript way.
  */
 export class FxDispatch extends AbstractAction {
+    static get properties() {
+        return {
+            ...super.properties,
+            name: {
+                type: String,
+            },
+            targetid: {
+                type: String,
+            },
+            details: {
+                type: String,
+            },
+        };
+    }
+
   constructor() {
     super();
     this.name = null;
@@ -53,12 +68,12 @@ export class FxDispatch extends AbstractAction {
 */
 
   async perform() {
-    console.log('### fx-dispatch.perform ', this);
+    super.perform();
 
     const properties = this.querySelectorAll('fx-property');
     const details = {};
     Array.from(properties).forEach(prop => {
-      console.log('prop ', prop);
+      // console.log('prop ', prop);
       const name = prop.getAttribute('name');
       const value = prop.getAttribute('value');
       const expr = prop.getAttribute('expr');
@@ -67,7 +82,7 @@ export class FxDispatch extends AbstractAction {
         if (value) {
           throw new Error('if "expr" is given there must not be a "value" attribute');
         }
-        const [result] = evaluateXPath(expr, this.getInScopeContext(), this.getOwnerForm());
+        const [result] = evaluateXPath(expr, this.getInScopeContext(), this);
 
         let serialized = null;
         if (result.nodeName) {
@@ -86,7 +101,7 @@ export class FxDispatch extends AbstractAction {
       }
     });
 
-    console.log('details ', details);
+    // console.log('details ', details);
 
     // ### when targetid is given dispatch to that if present (throw an error if not) - otherwise dispatch to document
     if (this.targetid) {
@@ -96,7 +111,6 @@ export class FxDispatch extends AbstractAction {
         // However, it may be that our target is elsewhere. Do a global search for that case
         target = document.getElementById(this.targetid);
       }
-      console.log('target', target);
       if (!target) {
         throw new Error(`targetid ${this.targetid} does not exist in document`);
       }

package/src/actions/fx-hide.js

@@ -10,7 +10,17 @@ import { resolveId } from '../xpath-evaluation.js';
  * @demo demo/project.html
  */
 export class FxHide extends AbstractAction {
+    static get properties() {
+        return {
+            ...super.properties,
+            dialog: {
+                type: String,
+            },
+        };
+    }
+
   connectedCallback() {
+    super.connectedCallback();
     this.dialog = this.getAttribute('dialog');
     if (!this.dialog) {
       Fore.dispatch(this, 'error', { message: 'dialog does not exist' });
@@ -18,6 +28,15 @@ export class FxHide extends AbstractAction {
   }
 
   async perform() {
+    this.dispatchEvent(
+        new CustomEvent('execute-action', {
+          composed: true,
+          bubbles: true,
+          cancelable:true,
+          detail: { action: this, event:this.event},
+        }),
+    );
+
     const dialog = resolveId(this.dialog, this);
     dialog.hide();
     Fore.dispatch(dialog,'dialog-hidden',{})

package/src/actions/fx-insert.js

@@ -5,6 +5,8 @@ import {
   evaluateXPathToFirstNode,
   evaluateXPathToNumber,
 } from '../xpath-evaluation.js';
+import {XPathUtil} from "../xpath-util";
+import {Fore} from '../fore.js';
 
 /**
  * `fx-insert`
@@ -13,6 +15,24 @@ import {
  * @customElement
  */
 export class FxInsert extends AbstractAction {
+    static get properties() {
+        return {
+            ...super.properties,
+            at: {
+                type: Number,
+            },
+            position: {
+                type: Number,
+            },
+            origin: {
+                type: Object,
+            },
+            keepValues: {
+                type: Boolean,
+            },
+        };
+    }
+
   constructor() {
     super();
     this.attachShadow({ mode: 'open' });
@@ -40,6 +60,31 @@ export class FxInsert extends AbstractAction {
     this.keepValues = !!this.hasAttribute('keep-values');
   }
 
+  _getOriginSequence(inscope, targetSequence){
+    let originSequence;
+    if (this.origin) {
+      // ### if there's an origin attribute use it
+      let originTarget;
+      try {
+        originTarget = evaluateXPathToFirstNode(this.origin, inscope, this);
+        if (Array.isArray(originTarget) && originTarget.length === 0) {
+          console.warn('invalid origin for this insert action - ignoring...', this);
+          originSequence = null;
+        }
+        originSequence = originTarget;
+      } catch (error) {
+        console.warn('invalid origin for this insert action - ignoring...', this);
+      }
+    } else if (targetSequence) {
+      // ### use last item of targetSequence
+      originSequence = targetSequence;
+      if (originSequence && !this.keepValues) {
+        this._clear(originSequence);
+      }
+    }
+    return originSequence;
+  }
+
   _cloneOriginSequence(inscope, targetSequence) {
     let originSequenceClone;
     if (this.origin) {
@@ -52,7 +97,7 @@ export class FxInsert extends AbstractAction {
         // this.setInScopeVariables(this.detail);
 
         // originTarget = evaluateXPathToFirstNode(this.origin, inscope, this);
-        originTarget = evaluateXPathToFirstNode(this.origin, inscope, this.getOwnerForm());
+        originTarget = evaluateXPathToFirstNode(this.origin, inscope, this);
         if (Array.isArray(originTarget) && originTarget.length === 0) {
           console.warn('invalid origin for this insert action - ignoring...', this);
           originSequenceClone = null;
@@ -76,13 +121,15 @@ export class FxInsert extends AbstractAction {
       return null;
     }
     if (this.hasAttribute('at')) {
-      return evaluateXPathToNumber(this.getAttribute('at'), inscope, this.getOwnerForm());
+      return evaluateXPathToNumber(this.getAttribute('at'), inscope, this);
     }
     return targetSequence.length;
   }
 
   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 !!!
@@ -104,10 +151,10 @@ export class FxInsert extends AbstractAction {
 
     if (this.hasAttribute('ref')) {
       if (inscope) {
-        targetSequence = evaluateXPathToNodes(this.ref, inscope, this.getOwnerForm());
+        targetSequence = evaluateXPathToNodes(this.ref, inscope, this);
       } else {
         inscope = getInScopeContext(this.getAttributeNode('ref'), this.ref);
-        targetSequence = evaluateXPathToNodes(this.ref, inscope, this.getOwnerForm());
+        targetSequence = evaluateXPathToNodes(this.ref, inscope, this);
       }
     }
     const originSequenceClone = this._cloneOriginSequence(inscope, targetSequence);
@@ -124,7 +171,6 @@ export class FxInsert extends AbstractAction {
       insertLocationNode = inscope;
       inscope.appendChild(originSequenceClone);
       index = 1;
-      console.log('appended', inscope);
     } else {
       /* ### insert at position given by 'at' or use the last item in the targetSequence ### */
       if (this.hasAttribute('at')) {
@@ -132,7 +178,7 @@ export class FxInsert extends AbstractAction {
         // index = this.at;
         // insertLocationNode = targetSequence[this.at - 1];
 
-        index = evaluateXPathToNumber(this.getAttribute('at'), inscope, this.getOwnerForm());
+        index = evaluateXPathToNumber(this.getAttribute('at'), inscope, this);
         insertLocationNode = targetSequence[index - 1];
       } else {
         // this.at = targetSequence.length;
@@ -179,9 +225,27 @@ export class FxInsert extends AbstractAction {
     // console.log('insert context item ', insertLocationNode);
     // console.log('parent ', insertLocationNode.parentNode);
     // console.log('instance ', this.getModel().getDefaultContext());
+    // Fore.dispatch()
+
+    const inst = this.getModel().getInstance(XPathUtil.resolveInstance(this));
+    // console.log('<<<<<<< resolved instance', inst);
+
+    const path = Fore.getDomNodeIndexString(originSequenceClone);
+    this.dispatchEvent(
+        new CustomEvent('execute-action', {
+          composed: true,
+          bubbles: true,
+          cancelable:true,
+          detail: { action: this, event:this.event, path },
+        }),
+    );
+
+    Fore.dispatch(inst,'insert',{
+      'inserted-nodes': originSequenceClone,
+      'insert-location-node': insertLocationNode,
+      'position': this.position
+    });
 
-    console.log('<<<<<<< at', this.at);
-    console.log('<<<<<<< index', index);
     // todo: this actually should dispatch to respective instance
     document.dispatchEvent(
       // new CustomEvent('insert', {

package/src/actions/fx-load.js

@@ -0,0 +1,253 @@
+import {AbstractAction} from './abstract-action.js';
+import {evaluateXPathToString, resolveId} from "../xpath-evaluation.js";
+import getInScopeContext from '../getInScopeContext.js';
+import {XPathUtil} from "../xpath-util.js";
+import {Fore} from "../fore.js";
+
+/**
+ * `fx-message`
+ *
+ * Action to display messages to the user.
+ *
+ *
+ */
+class FxLoad extends AbstractAction {
+
+    static get properties() {
+        return {
+            ...super.properties,
+            attachTo: {
+                type: String
+            },
+            url: {
+                type: String
+            }
+        }
+    }
+
+    constructor() {
+        super();
+        this.attachShadow({mode: 'open'});
+        this.url='';
+    }
+
+    connectedCallback() {
+        super.connectedCallback();
+        this.attachTo = this.hasAttribute('attach-to') ? this.getAttribute('attach-to') : '_self';
+
+		// Add a 'doneEvent' to block the action chain untill the event fired on the element we're
+		// loading something into.
+        this.awaitEvent = this.hasAttribute('await') ? this.getAttribute('await') : '';
+        this.url = this.hasAttribute('url') ? this.getAttribute('url') : '';
+        const style = `
+            :host{
+                display:none;
+            }
+        `;
+        this.shadowRoot.innerHTML = `
+            <style>
+                ${style}
+            </style>
+            ${this.renderHTML()}`;
+    }
+
+    disconnectedCallback() {
+        // super.disconnectedCallback();
+        this.targetElement.removeEventListener(this.event, e => this.execute(e));
+    }
+
+    // eslint-disable-next-line class-methods-use-this
+    renderHTML() {
+        return `
+        <slot></slot>
+    `;
+    }
+
+    async perform() {
+        await super.perform();
+
+        // this.getOwnerForm().evaluateTemplateExpression(this.urlContent, this);
+
+        const template = this.querySelector('template');
+        if(template){
+            const clone = template.content.cloneNode(true);
+            const content = document.importNode(clone, true);
+            // this._attachToElement(content);
+            if (this.attachTo.startsWith('#')) {
+                const targetId = this.attachTo.substring(1);
+                const resolved = resolveId(targetId, this);
+                // remove all children
+                while (resolved.firstChild) {
+                    resolved.removeChild(resolved.firstChild);
+                }
+				if (this.awaitEvent) {
+					let resolveEvent;
+					const waitForEvent = new Promise((resolve) => {
+						resolveEvent = resolve;
+					});
+					const eventListener = () => {
+						resolveEvent();
+						resolved.removeEventListener(this.awaitEvent, eventListener);
+					};
+
+					resolved.appendChild(content);
+					resolved.addEventListener(this.awaitEvent, eventListener);
+
+					await waitForEvent;
+
+					this.needsUpdate  = true;
+
+					Fore.dispatch(this, 'loaded', {attachPoint:this.attachTo, content});
+					return;
+				}
+
+                resolved.appendChild(content);
+
+				this.needsUpdate  = true;
+            }
+            Fore.dispatch(this, 'loaded', {});
+            return;
+        }
+
+        if(!this.url){
+            // for authoring errors we log errors directly to DOM
+
+            this.dispatchEvent(
+                new CustomEvent('log', {
+                    composed: false,
+                    bubbles: true,
+                    cancelable:true,
+                    detail: { id:this.id, message: `neiter template element nor Url was specified.`, level:'Error'},
+                }),
+            );
+            return;
+        }
+        this.url = this.evaluateAttributeTemplateExpression(this.url,this);
+        if (this.attachTo === '_blank') {
+            window.open(this.url);
+        }
+
+        if (this.attachTo === '_self') {
+            window.location.href = this.url;
+        }
+
+        try {
+            const response = await fetch(this.url, {
+                method: 'GET',
+                mode: 'cors',
+                credentials: 'same-origin',
+                headers: {
+                  'Content-Type': "text/html",
+                },
+            });
+            const data = await response.text();
+            // console.log('data loaded: ', data);
+
+            // 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}`);
+        }
+    }
+
+    _attachToElement(content){
+        let effectiveContent;
+        if(content.nodeType){
+            effectiveContent = content
+        }else{
+            try{
+                effectiveContent = new DOMParser().parseFromString(content, 'text/html').firstElementChild;
+            }catch (e) {
+                Fore.dispatch(this,'error',{message:'parsing of content as HTML failed'})
+            }
+        }
+
+        if(!(this.attachTo.startsWith('_')||this.attachTo.startsWith('#'))){
+            Fore.dispatch(this,'error',{message:'valid values for "attach-to" start with "_" or "#"'});
+        }
+
+        if (this.attachTo.startsWith('#')) {
+            const targetId = this.attachTo.substring(1);
+            const resolved = resolveId(targetId, this);
+            resolved.innerHTML = '';
+            // resolved.innerHTML = effectiveContent;
+            if(effectiveContent.querySelector('fx-fore')){
+                resolved.append(effectiveContent.querySelector('fx-fore').cloneNode(true));
+                return;
+            }
+            const body = effectiveContent.querySelector('body').cloneNode(true);
+            resolved.appendChild( body.firstElementChild);
+        }
+    }
+
+    _evaluateUrlExpression() {
+        const url = this.getAttribute('url');
+        if (!url) {
+            throw new Error('url not specified');
+        }
+
+        const replaced = url.replace(/{[^}]*}/g, match => {
+            if (match === '{}') return match;
+            const naked = match.substring(1, match.length - 1);
+            const inscope = getInScopeContext(this, naked);
+            if (!inscope) {
+                console.warn('no inscope context for ', this);
+                return match;
+            }
+            // Templates are special: they use the namespace configuration from the place where they are
+            // being defined
+            const instanceId = XPathUtil.getInstanceId(naked);
+
+            // If there is an instance referred
+            const inst = instanceId ? this.getModel().getInstance(instanceId) : this.getModel().getDefaultInstance();
+            try {
+                return evaluateXPathToString(naked, inscope, this, null, inst);
+            } catch (error) {
+                console.warn('ignoring unparseable url', error);
+                return match;
+            }
+        });
+        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')) {
+    window.customElements.define('fx-load', FxLoad);
+}