@jinntec/fore 1.4.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.4.0",
+  "version": "1.5.0",
   "description": "Fore - declarative user interfaces in plain HTML",
   "module": "./index.js",
   "publishConfig": {

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,6 +140,11 @@ 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(
@@ -219,8 +247,8 @@ export class AbstractAction extends foreElementMixin(HTMLElement) {
 
       // After loop is done call actionPerformed to update the model and UI
       await loop();
-
       this._finalizePerform(resolveThisEvent);
+
       return;
     }
 
@@ -237,7 +265,6 @@ export class AbstractAction extends foreElementMixin(HTMLElement) {
 
     await this.perform();
     this._finalizePerform(resolveThisEvent);
-
   }
 
   _finalizePerform(resolveThisEvent) {

package/src/fore.js

@@ -86,6 +86,7 @@ export class Fore {
       'FX-RANGE',
       'FX-REPEAT',
       'FX-REPEATITEM',
+      'FX-REPEAT-ATTRIBUTES',
       'FX-SWITCH',
       'FX-SECRET',
       'FX-SELECT',

package/src/fx-fore.js

@@ -5,6 +5,8 @@ import '@jinntec/jinn-toast';
 import {evaluateXPathToBoolean, evaluateXPathToNodes, evaluateXPathToString} from './xpath-evaluation.js';
 import getInScopeContext from './getInScopeContext.js';
 import {XPathUtil} from './xpath-util.js';
+// import {FxRepeat} from "./ui/fx-repeat";
+import {FxRepeatAttributes} from './ui/fx-repeat-attributes.js';
 
 /**
  * Main class for Fore.Outermost container element for each Fore application.
@@ -162,6 +164,7 @@ export class FxFore extends HTMLElement {
         this.toRefresh = [];
         this.initialRun = true;
         this.someInstanceDataStructureChanged = false;
+        this.repeatsFromAttributesCreated = false;
     }
 
     connectedCallback() {
@@ -234,6 +237,9 @@ export class FxFore extends HTMLElement {
 				this._handleModelConstructDone();
             }
             this.model = modelElement;
+
+            this._createRepeatsFromAttributes();
+
         });
         this.addEventListener('path-mutated', () => {
             // console.log('path-mutated event received', e.detail.path, e.detail.index);
@@ -818,6 +824,56 @@ export class FxFore extends HTMLElement {
             toast.showToast(msg);
         }
     }
+
+    /**
+     * wraps the element having a 'data-ref' attribute with an fx-repeat-attributes element.
+     * @private
+     */
+    _createRepeatsFromAttributes() {
+        if(this.repeatsFromAttributesCreated) return;
+        const repeats = this.querySelectorAll('[data-ref]');
+        if(repeats){
+            Array.from(repeats).forEach(item =>{
+
+                const table = item.parentNode.closest('table');
+                let host;
+                if(table){
+                    host = table.cloneNode(true);
+                }else{
+                    host = item.cloneNode(true);
+                }
+                // ### clone original item to move it into fx-repeat-attributes
+                // const host = item.cloneNode(true);
+
+                // ### create wrapper element
+                const repeatFromAttr = new FxRepeatAttributes();
+                // const repeatFromAttr = document.createElement('fx-repeat-attributes');
+
+                // ### copy the value of 'data-ref' to 'ref' on fx-repeat-attributes
+                repeatFromAttr.setAttribute('ref',item.getAttribute('data-ref'));
+                // item.removeAttribute('data-ref');
+
+                // ### append the cloned original element to fx-repeat-attributes
+                repeatFromAttr.appendChild(host);
+
+                // ### insert fx-repeat-attributes element before element with the 'data-ref'
+                // repeats[0].parentNode.insertBefore(repeatFromAttr,repeats[0]);
+
+                if(table){
+                    table.parentNode.insertBefore(repeatFromAttr,table);
+                    table.parentNode.removeChild(table);
+                }else{
+                    item.parentNode.insertBefore(repeatFromAttr,item);
+                    item.parentNode.removeChild(item);
+                }
+
+                // ### remove original item from DOM
+                item.setAttribute('insertPoint','');
+
+            });
+        }
+        this.repeatsFromAttributesCreated = true;
+    }
 }
 
 if (!customElements.get('fx-fore')) {

package/src/getInScopeContext.js

@@ -1,4 +1,4 @@
-import {evaluateXPathToFirstNode} from './xpath-evaluation.js';
+import { evaluateXPathToFirstNode } from './xpath-evaluation.js';
 import {Fore} from './fore.js';
 
 import {XPathUtil} from './xpath-util.js';
@@ -79,6 +79,22 @@ export default function getInScopeContext(node, ref) {
         return repeatItem.nodeset;
     }
 
+  // ### check for repeatitems created by fx-repeat-attributes - this could possibly be unified with standard repeats
+  // const repeatItemFromAttrs = Fore.getClosest('.fx-repeatitem', parentElement);
+  // const repeatItemFromAttrs = Fore.getClosest('.fx-repeatitem', parentElement);
+  const repeatItemFromAttrs = parentElement.closest('.fx-repeatitem');
+
+  if (repeatItemFromAttrs) {
+    // ### determine correct inscopecontext by determining the index of the repeatitem in its parent list and
+    // ### using that as an index on the repeat nodeset
+    const parent = repeatItemFromAttrs.parentNode;
+    const index = Array.from(parent.children).indexOf(repeatItemFromAttrs);
+
+    // ### fetching nodeset from fx-repeat-attributes element
+    const repeatFromAttributes = Fore.getClosest('fx-repeat-attributes', parentElement);
+    return repeatFromAttributes.nodeset[index];
+  }
+
     if (parentElement.hasAttribute('context')) {
         const initialContext = _getInitialContext(parentElement.parentNode, ref);
         const contextAttr = parentElement.getAttribute('context');

package/src/ui/fx-repeat-attributes.js

@@ -0,0 +1,442 @@
+import { Fore } from '../fore.js';
+import { evaluateXPath } from '../xpath-evaluation.js';
+import getInScopeContext from '../getInScopeContext.js';
+import { XPathUtil } from '../xpath-util.js';
+import {foreElementMixin} from "../ForeElementMixin.js";
+
+/**
+ * `fx-repeat`
+ *
+ * Repeats its template for each node in its' bound nodeset.
+ *
+ * Template is a standard HTML `<template>` element. Once instanciated the template
+ * is moved to the shadowDOM of the repeat for safe re-use.
+ *
+ *
+ *
+ * @customElement
+ * @demo demo/todo.html
+ *
+ * todo: it should be seriously be considered to extend FxContainer instead but needs refactoring first.
+ */
+export class FxRepeatAttributes extends foreElementMixin(HTMLElement) {
+  static get properties() {
+    return {
+      ...super.properties,
+      index: {
+        type: Number,
+      },
+      template: {
+        type: Object,
+      },
+      focusOnCreate: {
+        type: String,
+      },
+      initDone: {
+        type: Boolean,
+      },
+      repeatIndex: {
+        type: Number,
+      },
+      repeatSize:{
+        type:Number,
+      },
+      nodeset: {
+        type: Array,
+      },
+    };
+  }
+
+  constructor() {
+    super();
+    this.ref = '';
+    this.dataTemplate = [];
+    this.focusOnCreate = '';
+    this.initDone = false;
+    this.repeatIndex = 1;
+    this.nodeset = [];
+    this.inited = false;
+    this.host= {};
+    this.index = 1;
+    this.repeatSize = 0;
+    this.attachShadow({ mode: 'open', delegatesFocus: true });
+  }
+
+  get repeatSize() {
+    return this.querySelectorAll(':scope > .fx-repeatitem').length;
+  }
+
+  set repeatSize(size) {
+    super.repeatSize = size;
+  }
+
+
+  setIndex(index) {
+    // console.log('new repeat index ', index);
+    this.index = index;
+    const refd = this.querySelector('[data-ref]');
+    const rItems = refd.querySelectorAll(':scope > *');
+    this.applyIndex(rItems[this.index - 1]);
+  }
+
+  applyIndex(repeatItem) {
+    this._removeIndexMarker();
+    if (repeatItem) {
+      repeatItem.setAttribute('repeat-index', '');
+    }
+  }
+
+  get index() {
+    return this.getAttribute('index');
+  }
+
+  set index(idx) {
+    this.setAttribute('index', idx);
+  }
+
+  _getRepeatedItems(){
+    const refd = this.querySelector('[data-ref]');
+    return refd.children;
+  }
+  async connectedCallback() {
+    console.log('connectedCallback',this);
+    // this.display = window.getComputedStyle(this, null).getPropertyValue("display");
+    this.ref = this.getAttribute('ref');
+    // this.ref = this._getRef();
+    // console.log('### fx-repeat connected ', this.id);
+    this.addEventListener('item-changed', e => {
+      console.log('handle index event ', e);
+      const { item } = e.detail;
+      const repeatedItems = this._getRepeatedItems();
+      const idx = Array.from(repeatedItems).indexOf(item);
+      this.applyIndex(repeatedItems[idx]);
+      this.index = idx + 1;
+    });
+    // todo: review - this is just used by append action - event consolidation ?
+    document.addEventListener('index-changed', e => {
+      e.stopPropagation();
+      if (!e.target === this) return;
+      console.log('handle index event ', e);
+      // const { item } = e.detail;
+      // const idx = Array.from(this.children).indexOf(item);
+      const { index } = e.detail;
+      this.index = Number(index);
+      this.applyIndex(this.children[index - 1]);
+    });
+    /*
+    document.addEventListener('insert', e => {
+      const nodes = e.detail.insertedNodes;
+      this.index = e.detail.position;
+      console.log('insert catched', nodes, this.index);
+    });
+*/
+
+    // if (this.getOwnerForm().lazyRefresh) {
+    this.mutationObserver = new MutationObserver(mutations => {
+      console.log('mutations', mutations);
+
+      if (mutations[0].type === 'childList') {
+        const added = mutations[0].addedNodes[0];
+        if (added) {
+          const path = XPathUtil.getPath(added);
+          console.log('path mutated', path);
+          // this.dispatch('path-mutated',{'path':path,'nodeset':this.nodeset,'index': this.index});
+          // this.index = index;
+          // const prev = mutations[0].previousSibling.previousElementSibling;
+          // const index = prev.index();
+          // this.applyIndex(this.index -1);
+
+          Fore.dispatch(this, 'path-mutated', { path, index: this.index });
+        }
+      }
+    });
+    // }
+    this.getOwnerForm().registerLazyElement(this);
+
+    const style = `
+      :host{
+      }
+       .fade-out-bottom {
+          -webkit-animation: fade-out-bottom 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
+          animation: fade-out-bottom 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
+      }
+      .fade-out-bottom {
+          -webkit-animation: fade-out-bottom 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
+          animation: fade-out-bottom 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
+      }
+   `;
+    const html = `
+          <slot></slot>
+    `;
+    this.shadowRoot.innerHTML = `
+            <style>
+                ${style}
+            </style>
+            ${html}
+        `;
+
+    // this.init();
+  }
+
+  async init() {
+    // ### there must be a single 'template' child
+
+    const inited = new Promise(resolve => {
+      console.log('##### repeat-attributes init ', this.id);
+      // if(!this.inited) this.init();
+      // does not use this.evalInContext as it is expecting a nodeset instead of single node
+      this._evalNodeset();
+      // console.log('##### ',this.id, this.nodeset);
+
+      this._initTemplate();
+      // this._initRepeatItems();
+
+      this.setAttribute('index', this.index);
+      this.inited = true;
+      resolve('done');
+    });
+
+    return inited;
+  }
+
+  _getRef(){
+    return this.getAttribute('ref');
+  }
+
+  /**
+   * repeat has no own modelItems
+   * @private
+   */
+  _evalNodeset() {
+    // const inscope = this.getInScopeContext();
+    const inscope = getInScopeContext(this.getAttributeNode('ref') || this, this.ref);
+    // console.log('##### inscope ', inscope);
+    // console.log('##### ref ', this.ref);
+    // now we got a nodeset and attach MutationObserver to it
+
+    if (this.mutationObserver && inscope.nodeName) {
+      this.mutationObserver.observe(inscope, {
+        childList: true,
+        subtree: true,
+      });
+    }
+
+    const rawNodeset = evaluateXPath(this.ref, inscope, this);
+    if (rawNodeset.length === 1 && Array.isArray(rawNodeset[0])) {
+      // This XPath likely returned an XPath array. Just collapse to that array
+      this.nodeset = rawNodeset[0];
+      return;
+    }
+    this.nodeset = rawNodeset;
+  }
+
+  async refresh(force) {
+    // console.group('fx-repeat.refresh on', this.id);
+
+    if (!this.inited) this.init();
+    console.time('repeat-refresh', this);
+    this._evalNodeset();
+    // console.log('repeat refresh nodeset ', this.nodeset);
+
+    let repeatItems = this.querySelectorAll('.fx-repeatitem');
+    let repeatItemCount = repeatItems.length;
+
+    let nodeCount = 1;
+    if (Array.isArray(this.nodeset)) {
+      nodeCount = this.nodeset.length;
+    }
+
+    // const contextSize = this.nodeset.length;
+    const contextSize = nodeCount;
+    // todo: review - cant the context really never be smaller than the repeat count?
+    // todo: this code can be deprecated probably but check first
+    if (contextSize < repeatItemCount) {
+      for (let position = repeatItemCount; position > contextSize; position -= 1) {
+        // remove repeatitem
+        const itemToRemove = repeatItems[position - 1];
+        itemToRemove.parentNode.removeChild(itemToRemove);
+        this.getOwnerForm().unRegisterLazyElement(itemToRemove);
+        // this._fadeOut(itemToRemove);
+        // Fore.fadeOutElement(itemToRemove)
+        this.getOwnerForm().someInstanceDataStructureChanged = true;
+
+      }
+    }
+
+    if (contextSize > repeatItemCount) {
+      for (let position = repeatItemCount + 1; position <= contextSize; position += 1) {
+        // add new repeatitem
+
+        const clonedTemplate = this._clone();
+
+        // ### cloned templates are always appended to the binding element - the one having the data-ref
+        const bindingElement = this.querySelector('[data-ref]');
+        bindingElement.appendChild(clonedTemplate);
+        clonedTemplate.classList.add('fx-repeatitem');
+        clonedTemplate.setAttribute('index',position);
+
+        clonedTemplate.addEventListener('click', this._dispatchIndexChange);
+        // this.addEventListener('focusin', this._handleFocus);
+        clonedTemplate.addEventListener('focusin', this._dispatchIndexChange);
+
+
+        // this._initVariables(clonedTemplate);
+
+        // newItem.nodeset = this.nodeset[position - 1];
+        // newItem.index = position;
+        this.getOwnerForm().someInstanceDataStructureChanged = true;
+      }
+    }
+
+    // ### update nodeset of repeatitems
+    repeatItems = this.querySelectorAll(':scope > .fx-repeatitem');
+    repeatItemCount = repeatItems.length;
+
+    for (let position = 0; position < repeatItemCount; position += 1) {
+      const item = repeatItems[position];
+      this.getOwnerForm().registerLazyElement(item);
+
+      if (item.nodeset !== this.nodeset[position]) {
+        item.nodeset = this.nodeset[position];
+      }
+    }
+
+    // Fore.refreshChildren(clone,true);
+    const fore = this.getOwnerForm();
+    if (!fore.lazyRefresh || force) {
+      Fore.refreshChildren(this, force);
+    }
+    // this.style.display = 'block';
+    // this.style.display = this.display;
+    this.setIndex(this.index);
+    console.timeEnd('repeat-refresh');
+
+    console.groupEnd();
+  }
+
+  _dispatchIndexChange() {
+    // console.log('_dispatchIndexChange on index ', this.index);
+      this.dispatchEvent(
+          new CustomEvent('item-changed', { composed: false, bubbles: true, detail: { item: this , index:this.index } }),
+      );
+  }
+
+  // eslint-disable-next-line class-methods-use-this
+  _fadeOut(el) {
+    el.style.opacity = 1;
+
+    (function fade() {
+      // eslint-disable-next-line no-cond-assign
+      if ((el.style.opacity -= 0.1) < 0) {
+        el.style.display = 'none';
+      } else {
+        requestAnimationFrame(fade);
+      }
+    })();
+  }
+
+  // eslint-disable-next-line class-methods-use-this
+  _fadeIn(el) {
+    if (!el) return;
+
+    el.style.opacity = 0;
+    el.style.display = this.display;
+
+    (function fade() {
+      // setTimeout(() => {
+      let val = parseFloat(el.style.opacity);
+      // eslint-disable-next-line no-cond-assign
+      if (!((val += 0.1) > 1)) {
+        el.style.opacity = val;
+        requestAnimationFrame(fade);
+      }
+      // }, 40);
+    })();
+  }
+
+  async _initTemplate() {
+    // const shadowTemplate = this.shadowRoot.querySelector('template');
+    // console.log('shadowtempl ', shadowTemplate);
+
+    // const defaultSlot = this.shadowRoot.querySelector('slot');
+    // todo: this is still weak - should handle that better maybe by an explicit slot?
+    // this.template = this.firstElementChild;
+    this.template = this.querySelector('template');
+    console.log('### init template for repeat ', this.id, this.template);
+
+    if (this.template === null) {
+      // console.error('### no template found for this repeat:', this.id);
+      // todo: catch this on form element
+      this.dispatchEvent(
+        new CustomEvent('no-template-error', {
+          composed: true,
+          bubbles: true,
+          detail: { message: `no template found for repeat:${this.id}` },
+        }),
+      );
+    }
+
+    this.shadowRoot.appendChild(this.template);
+  }
+
+/*
+  _initRepeatItems() {
+    console.log('_initRepeatItems', this.nodeset);
+    // const model = this.getModel();
+    // this.textContent = '';
+    Array.from(this.nodeset).forEach((item, index) => {
+
+      const clone = this._clone();
+      this.appendChild(clone);
+/!*
+      this.appendChild(repeatItem);
+
+      if (item.index === 1) {
+        this.applyIndex(item);
+      }
+
+      this._initVariables(item);
+*!/
+    });
+  }
+*/
+
+  _initVariables(newRepeatItem) {
+    const inScopeVariables = new Map(this.inScopeVariables);
+    newRepeatItem.setInScopeVariables(inScopeVariables);
+    (function registerVariables(node) {
+      for (const child of node.children) {
+        if ('setInScopeVariables' in child) {
+          child.setInScopeVariables(inScopeVariables);
+        }
+        registerVariables(child);
+      }
+    })(newRepeatItem);
+  }
+
+  _clone() {
+    // const content = this.template.content.cloneNode(true);
+    this.template = this.shadowRoot.querySelector('template');
+    // this.template = this.querySelector('template');
+    // const content = this.template.content.cloneNode(true);
+    // return document.importNode(content, true);
+    return this.template.content.firstElementChild.cloneNode(true);
+  }
+
+  _removeIndexMarker() {
+    const refd = this.querySelector('[data-ref]');
+    Array.from(refd.children).forEach(item => {
+      item.removeAttribute('repeat-index');
+    });
+  }
+
+  setInScopeVariables(inScopeVariables) {
+    // Repeats are interesting: the variables should be scoped per repeat item, they should not be
+    // able to see the variables in adjacent repeat items!
+    this.inScopeVariables = new Map(inScopeVariables);
+  }
+}
+
+if (!customElements.get('fx-repeat-attributes')) {
+  window.customElements.define('fx-repeat-attributes', FxRepeatAttributes);
+}