@jinntec/fore 2.1.1 → 2.3.0

package/src/actions/fx-insertchild.js

@@ -0,0 +1,88 @@
+import { AbstractAction } from './abstract-action.js';
+import getInScopeContext from '../getInScopeContext.js';
+import {
+  evaluateXPathToNodes,
+  evaluateXPathToFirstNode,
+  evaluateXPathToNumber,
+} from '../xpath-evaluation.js';
+import { XPathUtil } from '../xpath-util';
+import { Fore } from '../fore.js';
+
+/**
+ * `fx-insert`
+ * inserts nodes into data instances
+ *
+ *                         <fx-insertChild parent="instance('i-stopwatches')/stopwatches"
+ *                                         child="watch"
+ *                                         template="instance('vars')/templates/watch"
+ *                                         at="1"
+ *                                         position="before"></fx-insertChild>
+ * @customElement
+ */
+export class FxInsertchild extends AbstractAction {
+  static get properties() {
+    return {
+      ...super.properties,
+      at: {
+        type: Number,
+      },
+      child: {
+        type: String,
+      },
+      parent: {
+        type: String,
+      },
+      origin: {
+        type: Object,
+      },
+      keepValues: {
+        type: Boolean,
+      },
+    };
+  }
+
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+  }
+
+  connectedCallback() {
+    if (super.connectedCallback) {
+      super.connectedCallback();
+    }
+    this.at = Number(this.hasAttribute('at') ? this.getAttribute('at') : 1); // default: size of nodeset, determined later
+    this.child = this.getAttribute('child');
+    this.parent = this.getAttribute('parent');
+    this.position = this.hasAttribute('position') ? this.getAttribute('position') : 'after';
+    this.origin = this.hasAttribute('origin') ? this.getAttribute('origin') : null; // last item of context seq
+    this.keepValues = !!this.hasAttribute('keep-values');
+
+    const style = `
+        :host{
+            display:none;
+        }
+    `;
+    this.shadowRoot.innerHTML = `
+        <style>
+            ${style}
+        </style>
+        <fx-insert context="${this.parent}"
+                   ref="${this.ref}"
+                   origin="${this.origin}"
+                   at="${this.at}"
+                   position="${this.position}"></fx-insert>
+                   
+    `;
+  }
+
+  async perform() {
+    super.perform();
+    const insert = this.shadowRoot.querySelector('fx-insert');
+    await insert.perform();
+    this.needsUpdate = true;
+  }
+}
+
+if (!customElements.get('fx-insertChild')) {
+  window.customElements.define('fx-insertchild', FxInsertchild);
+}

package/src/actions/fx-load.js

@@ -1,8 +1,8 @@
-import {AbstractAction} from './abstract-action.js';
-import {evaluateXPathToString, resolveId} from "../xpath-evaluation.js";
+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";
+import { XPathUtil } from '../xpath-util.js';
+import { Fore } from '../fore.js';
 
 /**
  * `fx-load`
@@ -11,214 +11,217 @@ import {Fore} from "../fore.js";
  *
  */
 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 = `
+  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 = `
+    this.shadowRoot.innerHTML = `
             <style>
                 ${style}
             </style>
             ${this.renderHTML()}`;
-    }
+  }
 
-    disconnectedCallback() {
-        // super.disconnectedCallback();
-        this.targetElement.removeEventListener(this.event, e => this.execute(e));
-    }
+  disconnectedCallback() {
+    // super.disconnectedCallback();
+    this.targetElement.removeEventListener(this.event, e => this.execute(e));
+  }
 
-    // eslint-disable-next-line class-methods-use-this
-    renderHTML() {
-        return `
+  // 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;
+  }
+
+  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);
+          };
 
-        if(!this.url){
-            // for authoring errors we log errors directly to DOM
-
-            this.dispatchEvent(
-                new CustomEvent('error', {
-                    composed: false,
-                    bubbles: true,
-                    cancelable:true,
-                    detail: {
-                        origin:this,
-                        message: `neither template element nor Url was specified.`,
-                        level:'Error'},
-                }),
-            );
-            return;
-        }
-        const resolvedUrl = this.evaluateAttributeTemplateExpression(this.url,this);
-        if (this.attachTo === '_blank') {
-            window.open(this.url);
-        }
+          resolved.appendChild(content);
+          resolved.addEventListener(this.awaitEvent, eventListener);
 
-        if (this.attachTo === '_self') {
-            window.location.href = this.url;
-        }
+          await waitForEvent;
 
-        try {
-            const response = await fetch(resolvedUrl,  {
-                method: 'GET',
-                mode: 'cors',
-                credentials: 'same-origin',
-                headers: {
-                  'Content-Type': "text/html",
-                },
-            });
-            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;
-            }
-            this._attachToElement(data);
-            Fore.dispatch(this, 'loaded', {url: this.url})
-        } catch (error) {
-            throw new Error(`failed loading data ${error}`);
+          this.needsUpdate = true;
+
+          Fore.dispatch(this, 'loaded', { attachPoint: this.attachTo, content });
+          return;
         }
+
+        resolved.appendChild(content);
+
+        this.needsUpdate = true;
+      }
+      Fore.dispatch(this, 'loaded', {});
+      return;
     }
 
-    _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.url) {
+      // for authoring errors we log errors directly to DOM
+
+      this.dispatchEvent(
+        new CustomEvent('error', {
+          composed: false,
+          bubbles: true,
+          cancelable: true,
+          detail: {
+            origin: this,
+            message: 'neither template element nor Url was specified.',
+            level: 'Error',
+          },
+        }),
+      );
+      return;
+    }
+    const resolvedUrl = this.evaluateAttributeTemplateExpression(this.url, this);
+    if (this.attachTo === '_blank') {
+      window.open(this.url);
+    }
 
-        if(!(this.attachTo.startsWith('_')||this.attachTo.startsWith('#'))){
-            Fore.dispatch(this,'error',{message:'valid values for "attach-to" start with "_" or "#"'});
-        }
+    if (this.attachTo === '_self') {
+      window.location.href = this.url;
+    }
 
-        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);
-        }
+    try {
+      const response = await fetch(resolvedUrl, {
+        method: 'GET',
+        mode: 'cors',
+        credentials: 'same-origin',
+        headers: {
+          'Content-Type': 'text/html',
+        },
+      });
+      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;
+      }
+      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' });
+      }
     }
 
-    _evaluateUrlExpression() {
-        const url = this.getAttribute('url');
-        if (!url) {
-            throw new Error('url not specified');
-        }
+    if (!(this.attachTo.startsWith('_') || this.attachTo.startsWith('#'))) {
+      Fore.dispatch(this, 'error', {
+        message: 'valid values for "attach-to" start with "_" or "#"',
+      });
+    }
 
-        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;
+    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;
+  }
 }
 
 if (!customElements.get('fx-load')) {
-    window.customElements.define('fx-load', FxLoad);
+  window.customElements.define('fx-load', FxLoad);
 }

package/src/actions/fx-message.js

@@ -1,6 +1,6 @@
 import { AbstractAction } from './abstract-action.js';
-import {evaluateXPathToString} from "../xpath-evaluation.js";
-import {Fore} from "../fore.js";
+import { evaluateXPathToString } from '../xpath-evaluation.js';
+import { Fore } from '../fore.js';
 import getInScopeContext from '../getInScopeContext.js';
 
 /**
@@ -16,18 +16,18 @@ class FxMessage extends AbstractAction {
     this.attachShadow({ mode: 'open' });
   }
 
-	static get properties () {
-		return {
-			...AbstractAction.properties,
-			modelItem:undefined,
-			messageTextContent: {
-				type: String,
-				get value() {
-					return "here!";
-				}
-			}
-		};
-	}
+  static get properties() {
+    return {
+      ...AbstractAction.properties,
+      modelItem: undefined,
+      messageTextContent: {
+        type: String,
+        get value() {
+          return 'here!';
+        },
+      },
+    };
+  }
 
   connectedCallback() {
     super.connectedCallback();
@@ -35,7 +35,7 @@ class FxMessage extends AbstractAction {
     this.level = this.hasAttribute('level') ? this.getAttribute('level') : 'ephemeral';
     this.message = '';
 
-	this.messageTextContent = this.textContent;
+    this.messageTextContent = this.textContent;
     const style = `
         :host{
             display:none;
@@ -49,7 +49,7 @@ class FxMessage extends AbstractAction {
     `;
   }
 
-/*
+  /*
   disconnectedCallback() {
     // super.disconnectedCallback();
     this.targetElement.removeEventListener(this.event, e => this.execute(e));
@@ -68,7 +68,7 @@ class FxMessage extends AbstractAction {
     if (this.hasAttribute('value')) {
       this.message = this._getValue();
     } else {
-		this.getOwnerForm().evaluateTemplateExpression(this.messageTextContent, this.firstChild);
+      this.getOwnerForm().evaluateTemplateExpression(this.messageTextContent, this.firstChild);
       this.message = this.textContent;
     }
 
@@ -76,7 +76,7 @@ class FxMessage extends AbstractAction {
       new CustomEvent('message', {
         composed: false,
         bubbles: true,
-        detail: { level: this.level, message:this.message },
+        detail: { level: this.level, message: this.message },
       }),
     );
   }
@@ -97,7 +97,6 @@ class FxMessage extends AbstractAction {
     }
     return null;
   }
-
 }
 
 if (!customElements.get('fx-message')) {

package/src/actions/fx-refresh.js

@@ -1,7 +1,7 @@
 import { AbstractAction } from './abstract-action.js';
 import { Fore } from '../fore.js';
-import {resolveId} from "../xpath-evaluation.js";
-import {XPathUtil} from "../xpath-util.js";
+import { resolveId } from '../xpath-evaluation.js';
+import { XPathUtil } from '../xpath-util.js';
 
 /**
  * `fx-refresh`
@@ -12,12 +12,12 @@ import {XPathUtil} from "../xpath-util.js";
 class FxRefresh extends AbstractAction {
   async perform() {
     this.dispatchEvent(
-        new CustomEvent('execute-action', {
-          composed: true,
-          bubbles: true,
-          cancelable:true,
-          detail: { action: this, event:this.event},
-        }),
+      new CustomEvent('execute-action', {
+        composed: true,
+        bubbles: true,
+        cancelable: true,
+        detail: { action: this, event: this.event },
+      }),
     );
 
     if (this.hasAttribute('self')) {
@@ -28,12 +28,12 @@ class FxRefresh extends AbstractAction {
         return;
       }
     }
-    if(this.hasAttribute('force')){
+    if (this.hasAttribute('force')) {
       console.log(`### <<<<< refresh() force ${this} >>>>>`);
       this.getOwnerForm().forceRefresh();
       return;
     }
-    if(this.hasAttribute('control')){
+    if (this.hasAttribute('control')) {
       const targetId = this.getAttribute('control');
       console.log(`### <<<<< refresh() control '${targetId}' >>>>>`);
       const ctrl = resolveId(targetId, this);

package/src/actions/fx-reload.js

@@ -1,5 +1,5 @@
 import { AbstractAction } from './abstract-action.js';
-import {Fore} from "../fore.js";
+import { Fore } from '../fore.js';
 
 /**
  * `fx-reload`
@@ -10,24 +10,27 @@ import {Fore} from "../fore.js";
  * @demo demo/project.html
  */
 export class FxReload extends AbstractAction {
-
   connectedCallback() {
-    if(super.connectedCallback){
-    super.connectedCallback();
+    if (super.connectedCallback) {
+      super.connectedCallback();
     }
-    this.addEventListener('reload', () => {
-      window.location.reload();
-    },{once:true});
+    this.addEventListener(
+      'reload',
+      () => {
+        window.location.reload();
+      },
+      { once: true },
+    );
   }
 
   async perform() {
     this.dispatchEvent(
-        new CustomEvent('execute-action', {
-          composed: true,
-          bubbles: true,
-          cancelable:true,
-          detail: { action: this, event:this.event},
-        }),
+      new CustomEvent('execute-action', {
+        composed: true,
+        bubbles: true,
+        cancelable: true,
+        detail: { action: this, event: this.event },
+      }),
     );
 
     Fore.dispatch(this, 'reload', {});
@@ -37,4 +40,3 @@ export class FxReload extends AbstractAction {
 if (!customElements.get('fx-reload')) {
   window.customElements.define('fx-reload', FxReload);
 }
-