@jinntec/fore 0.25.0 → 1.0.0-2

package/resources/fore.css

@@ -1,9 +1,29 @@
 @import 'toastify.css';
+@import 'vars.css';
 
+html{
+    --inspector-bg:var(--paper-grey-500);
+    --inspector-pre-bg:var(--paper-grey-100);
+    --inspector-color:var(--paper-grey-800);
+    --inspector-instance-height:200px;
+}
 [unresolved]{
     display: none;
 }
+[disabled] {
+    pointer-events: none;
+    cursor: default;
+}
+fx-trigger a[disabled] {
+    color:lightgrey;
+}
+fx-trigger img[disabled]{
+    filter:blur(2px);
+}
 
+.error{
+    background: var(--paper-red-500);
+}
 fx-alert{
     color:darkred;
     font-size: 0.9rem;
@@ -13,16 +33,91 @@ fx-model, fx-model *, fx-model ::slotted(fx-instance), fx-instance{
     display:none;
 }
 
-fx-control{
+fx-control, fx-trigger{
+    white-space: nowrap;
+    position: relative;
+}
+.fx-checkbox{
     white-space: nowrap;
 }
+fx-hint{
+    display: none;
+}
+fx-repeatitem{
+    position:relative;
+    /*
+    opacity:1;
+    -webkit-transition: opacity 3s;
+    -moz-transition: opacity 3s;
+    transition: opacity 3s;
+    */
+}
+.hidden {
+    visibility: hidden;
+    opacity: 0;
+    transition: visibility 0s 2s, opacity 2s linear;
+}
+
+/* fx-inspector styles */
+fx-inspector{
+    position:fixed;
+    left:0;
+    right:0;
+    bottom:0;
+    width: 100%;
+    background: var(--inspector-bg);
+    color: white;
+    max-height: 33%;
+    overflow: scroll;
+    border-top:3px solid black;
+    opacity: 0.9;
+}
+fx-inspector::before{
+    content:'Instance Inspector';
+    font-style:italic;
+    position:absolute;
+    top:0;
+    right: 0.3rem;
+    z-index: 10;
+    font-size: 0.8rem;
+}
+fx-inspector details{
+    padding: 1rem;
+}
+fx-inspector pre{
+    background: var(--inspector-pre-bg);
+    border-radius: 0.5rem;
+    padding: 0.3rem;
+    max-height: var(--inspector-instance-height);
+    /*overflow: scroll;*/
+}
+fx-inspector details{
+    overflow: auto;
+    margin:0;
+}
+fx-inspector summary{
+    padding: 0;
+}
+
+
+/*
+.visible {
+    visibility: visible;
+    opacity: 1;
+    transition: opacity 2s linear;
+}
+*/
+
 .required:after {
     content: '*';
     color: red;
     padding-left: 4px;
+    right:3px;
+    top:3px;
+    z-index: 1;
 }
 
-fx-control [required]:after {
+[required]:after {
     content: "*";
     display: inline;
     color: red;
@@ -34,8 +129,30 @@ fx-control [required]:after {
 .logtree details summary{
 
 }
-
+.non-relevant{
+    opacity: 0;
+    height: 0;
+    transition: opacity 1s;
+}
 .vertical label{
     display: block;
 }
-
+[refresh-on-view]{
+    /*opacity: 0;*/
+}
+.loaded{
+    animation: fadein 0.3s forwards;
+}
+/* avoid flicker from nested lazily loaded elements */
+.loaded .loaded{
+    animation: none;
+    opacity: 1;
+}
+@keyframes fadein {
+    0% {
+        opacity:0;
+    }
+    100% {
+        opacity:1;
+    }
+}

package/resources/toastify.css

@@ -12,7 +12,7 @@
     display: inline-block;
     box-shadow: 0 3px 6px -1px rgba(0, 0, 0, 0.12), 0 10px 36px -4px rgba(77, 96, 232, 0.3);
     background: -webkit-linear-gradient(315deg, #73a5ff, #5477f5);
-    background: linear-gradient(135deg, #73a5ff, #5477f5);
+    background: linear-gradient(135deg, #f8f8f9, #cfcfcf);
     position: fixed;
     opacity: 0;
     transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
@@ -21,6 +21,8 @@
     text-decoration: none;
     max-width: calc(50% - 20px);
     z-index: 2147483647;
+    font-weight: 300;
+    color:black;
 }
 
 .toastify.on {

package/src/DependencyNotifyingDomFacade.js

@@ -9,7 +9,7 @@ import { getBucketsForNode } from 'fontoxpath';
  */
 export class DependencyNotifyingDomFacade {
   /**
-   * @param  {function(touchedNode: Node): void)} onNodeTouched A function what will be executed whenever a node is 'touched' by the XPath
+   * @param  onNodeTouched - onNodeTouched A function what will be executed whenever a node is 'touched' by the XPath
    */
   constructor(onNodeTouched) {
     this._onNodeTouched = onNodeTouched;
@@ -45,13 +45,21 @@ export class DependencyNotifyingDomFacade {
    * @param  bucket - The bucket that matches the attribute that will be used.
    */
   // eslint-disable-next-line class-methods-use-this
+/*
   getChildNodes(node, bucket) {
     const matchingNodes = Array.from(node.childNodes).filter(
       childNode => !bucket || getBucketsForNode(childNode).includes(bucket),
     );
     return matchingNodes;
   }
+*/
 
+  getChildNodes(node, bucket) {
+    const matchingNodes = Array.from(node.childNodes).filter(
+        childNode => !bucket || getBucketsForNode(childNode).includes(bucket));
+    matchingNodes.forEach(matchingNode => this._onNodeTouched(matchingNode));
+    return matchingNodes;
+  }
   /**
    * Get the data of this node.
    *

package/src/ForeElementMixin.js

@@ -1,24 +1,46 @@
 import { XPathUtil } from './xpath-util.js';
 import { FxModel } from './fx-model.js';
-import { evaluateXPath, evaluateXPathToFirstNode } from './xpath-evaluation.js';
+import {
+  evaluateXPath,
+  evaluateXPathToFirstNode,
+  evaluateXPathToString,
+} from './xpath-evaluation.js';
 import getInScopeContext from './getInScopeContext.js';
 
 export const foreElementMixin = superclass =>
   class ForeElementMixin extends superclass {
     static get properties() {
       return {
+        /**
+         * context object for evaluation
+         */
         context: {
           type: Object,
         },
+        /**
+         * the model of this element
+         */
         model: {
           type: Object,
         },
-        ref: {
-          type: String,
-        },
+        /**
+         * The modelitem object associated to the bound node holding the evaluated state.
+         */
         modelItem: {
           type: Object,
         },
+        /**
+         * the node(s) bound by this element
+         */
+        nodeset: {
+          type: Object,
+        },
+        /**
+         * XPath binding expression pointing to bound node
+         */
+        ref: {
+          type: String,
+        },
       };
     }
 
@@ -41,6 +63,10 @@ export const foreElementMixin = superclass =>
       return ownerForm.querySelector('fx-model');
     }
 
+    /**
+     *
+     * @returns {{parentNode}|ForeElementMixin}
+     */
     getOwnerForm() {
       let currentElement = this;
       while (currentElement && currentElement.parentNode) {
@@ -65,29 +91,33 @@ export const foreElementMixin = superclass =>
     evalInContext() {
       // const inscopeContext = this.getInScopeContext();
       const inscopeContext = getInScopeContext(this, this.ref);
+      if (!inscopeContext) {
+        console.warn('no in scopeContext for ', this);
+        return;
+      }
       if (this.ref === '') {
         this.nodeset = inscopeContext;
       } else if (Array.isArray(inscopeContext)) {
+        /*
         inscopeContext.forEach(n => {
           if (XPathUtil.isSelfReference(this.ref)) {
             this.nodeset = inscopeContext;
           } else {
-            const localResult = evaluateXPathToFirstNode(this.ref, n, null);
+            const localResult = evaluateXPathToFirstNode(this.ref, n, this);
             // console.log('local result: ', localResult);
             this.nodeset.push(localResult);
           }
         });
+*/
+        this.nodeset = evaluateXPathToFirstNode(this.ref, inscopeContext[0], this);
       } else {
         // this.nodeset = fx.evaluateXPathToFirstNode(this.ref, inscopeContext, null, {namespaceResolver: this.namespaceResolver});
-
-        // todo: code below fails - why?
-        const formElement = this.getOwnerForm();
-        if (inscopeContext.nodeType) {
-          this.nodeset = evaluateXPathToFirstNode(this.ref, inscopeContext, formElement);
+        const { nodeType } = inscopeContext;
+        if (nodeType) {
+          this.nodeset = evaluateXPathToFirstNode(this.ref, inscopeContext, this);
         } else {
-          this.nodeset = evaluateXPath(this.ref, inscopeContext, formElement);
+          this.nodeset = evaluateXPath(this.ref, inscopeContext, this);
         }
-        // this.nodeset = evaluateXPath(this.ref,inscopeContext,formElement)
       }
       // console.log('UiElement evaluated to nodeset: ', this.nodeset);
     }
@@ -112,6 +142,14 @@ export const foreElementMixin = superclass =>
       return parent.getAttribute('ref');
     }
 
+    getInstance() {
+      if (this.ref.startsWith('instance(')) {
+        const instId = XPathUtil.getInstanceId(this.ref);
+        return this.getModel().getInstance(instId);
+      }
+      return this.getModel().getInstance('default');
+    }
+
     _getParentBindingElement(start) {
       if (start.parentNode.host) {
         const { host } = start.parentNode;
@@ -155,7 +193,40 @@ export const foreElementMixin = superclass =>
       return existed;
     }
 
+    /**
+     * Returns the effective value for the element.
+     * a: look for 'value' attribute and if present evaluate it and return the resulting value
+     * b: look for textContent and return the value if present
+     * c: return null
+     */
+    getValue() {
+      if (this.hasAttribute('value')) {
+        const valAttr = this.getAttribute('value');
+        try {
+          const inscopeContext = getInScopeContext(this, valAttr);
+          return evaluateXPathToString(valAttr, inscopeContext, this.getOwnerForm());
+        } catch (error) {
+          console.error(error);
+          this.dispatch('error', { message: error });
+        }
+      }
+      if (this.textContent) {
+        return this.textContent;
+      }
+      return null;
+    }
+
     getInScopeContext() {
       return getInScopeContext(this, this.ref);
     }
+
+    dispatch(eventName, detail) {
+      const event = new CustomEvent(eventName, {
+        composed: true,
+        bubbles: true,
+        detail,
+      });
+      // console.log('firing', event);
+      this.dispatchEvent(event);
+    }
   };

package/src/actions/abstract-action.js

@@ -1,10 +1,15 @@
 import { foreElementMixin } from '../ForeElementMixin.js';
 import { evaluateXPathToBoolean } from '../xpath-evaluation.js';
 
+async function wait(howLong) {
+  return new Promise(resolve => setTimeout(() => resolve(), howLong));
+}
+
 /**
- * `fx-action`
- * a button triggering Fore actions
+ * Superclass for all action elements. Provides basic wiring of events to targets as well as
+ * handle conditionals and loops of actions.
  *
+ * @fires action-performed - is dispatched after each execution of an action.
  * @customElement
  * @demo demo/index.html
  */
@@ -12,12 +17,49 @@ export class AbstractAction extends foreElementMixin(HTMLElement) {
   static get properties() {
     return {
       ...super.properties,
+      /**
+       * detail - event detail object
+       */
       detail: {
         type: Object,
       },
+      /**
+       * wether nor not an action needs to run the update cycle
+       */
       needsUpdate: {
         type: Boolean,
       },
+      /**
+       * event to listen for
+       */
+      event: {
+        type: Object,
+      },
+      /**
+       * id of target element to attach listener to
+       */
+      target: {
+        type: String,
+      },
+      /**
+       * boolean XPath expression. If true the action will be executed.
+       */
+      ifExpr: {
+        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.
+       */
+      whileExpr: {
+        type: String,
+      },
+      /**
+       * delay before executing action in milliseconds
+       */
+      delay: {
+        type: Number,
+      },
     };
   }
 
@@ -39,7 +81,9 @@ export class AbstractAction extends foreElementMixin(HTMLElement) {
 
     this.target = this.getAttribute('target');
     if (this.target) {
-      if (this.target === '#document') {
+      if (this.target === '#window') {
+        window.addEventListener(this.event, e => this.execute(e));
+      } else if (this.target === '#document') {
         document.addEventListener(this.event, e => this.execute(e));
       } else {
         this.targetElement = document.getElementById(this.target);
@@ -57,12 +101,18 @@ export class AbstractAction extends foreElementMixin(HTMLElement) {
   }
 
   /**
-   * executes the action. This function is usually triggered by a fx-trigger.
+   * executes the action.
+   *
+   * Will first evaluate ifExpr and continue only if it evaluates to 'true'. The 'whileExpr' will be executed
+   * considering the delay if present.
+   *
+   * After calling `perform' which actually implements the semantics of an concrete action
+   * `actionPerformed` will make sure that update cycle is run if 'needsUpdate' is true.
    *
    * @param e
    */
-  // eslint-disable-next-line no-unused-vars
-  execute(e) {
+  async execute(e) {
+    console.log('executing', this);
     if (e && e.detail) {
       this.detail = e.detail;
     }
@@ -73,38 +123,57 @@ export class AbstractAction extends foreElementMixin(HTMLElement) {
       this.nodeset = this.targetElement.nodeset;
     }
 
-    if (this.ifExpr) {
-      if (evaluateXPathToBoolean(this.ifExpr, this.nodeset, this.getOwnerForm()) === false) {
-        return;
-      }
+    // First check if 'if' condition is true - otherwise exist right away
+    if (this.ifExpr && !evaluateXPathToBoolean(this.ifExpr, this.nodeset, this.getOwnerForm())) {
+      return;
     }
 
     if (this.whileExpr) {
-      while (evaluateXPathToBoolean(this.whileExpr, this.nodeset, this.getOwnerForm()) === true) {
-        // if(this.delay){
-        //   setTimeout(() => {
-        //     this.perform();
-        //   },this.delay);
-        // }else{
+      // 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 (!this.ownerDocument.contains(this)) {
+          // We are no longer in the document. Stop working
+          return;
+        }
+
+        if (!evaluateXPathToBoolean(this.whileExpr, this.nodeset, this.getOwnerForm())) {
+          // Done with iterating
+          return;
+        }
+
+        // Perform the action once
         this.perform();
-        // }
-      }
+
+        // Go for one more iteration
+        await loop();
+      };
+
+      // After loop is done call actionPerformed to update the model and UI
+      await loop();
       this.actionPerformed();
       return;
     }
 
     if (this.delay) {
-      setTimeout(() => {
-        this.perform();
-      }, this.delay);
-    } else {
-      this.perform();
+      // Delay further execution until the delay is done
+      await wait(this.delay);
+      if (!this.ownerDocument.contains(this)) {
+        // We are no longer in the document. Stop working
+        this.actionPerformed();
+        return;
+      }
     }
+
+    this.perform();
     this.actionPerformed();
   }
 
   /**
-   * this should only be called by bound actions
+   * Template method to be implemented by each action that is called by execute() as part of
+   * the processing.
    *
    * todo: review - this could probably just be empty or throw error signalling that extender needs to implement it
    */
@@ -114,18 +183,23 @@ export class AbstractAction extends foreElementMixin(HTMLElement) {
     }
   }
 
+  /**
+   * calls the update cycle if action signalled that update is needed.
+   */
   actionPerformed() {
     // console.log('actionPerformed action parentNode ', this.parentNode);
     if (this.needsUpdate) {
       const model = this.getModel();
       model.recalculate();
       model.revalidate();
-      model.parentNode.refresh();
-      this._dispatchActionPerformed();
+      model.parentNode.refresh(true);
+      this.dispatchActionPerformed();
     }
   }
 
-  _dispatchActionPerformed() {
+  /**
+   */
+  dispatchActionPerformed() {
     console.log('action-performed ', this);
     this.dispatchEvent(
       new CustomEvent('action-performed', { composed: true, bubbles: true, detail: {} }),

package/src/actions/fx-action.js

@@ -43,9 +43,11 @@ export class FxAction extends AbstractAction {
     } else {
       Array.from(children).forEach(action => {
         action.detail = this.detail;
-        action.perform();
+        // action.perform();
+        action.execute();
       });
-      this.needsUpdate = true;
+      this.dispatchActionPerformed();
+      // this.needsUpdate = false;
     }
   }
 }

package/src/actions/fx-append.js

@@ -2,31 +2,32 @@ import { AbstractAction } from './abstract-action.js';
 import { Fore } from '../fore.js';
 
 /**
- * `fx-append`
- *
- *
+ * `fx-append` appends an entry to a repeat.
  *
  *
  *
+ * @deprecated - will be replaced with `fx-insert`
+ * @fires index-changed - fired after new item is appended
  * @customElement
  */
 // class FxAppend extends FxAction {
 class FxAppend extends AbstractAction {
-  /*
-    static get properties() {
-        return {
-            ref: {
-                type: String,
-            },
-            repeat: {
-                type: String,
-            },
-            clear: {
-                type: String,
-            },
-        };
-    }
-*/
+  static get properties() {
+    return {
+      ref: {
+        type: String,
+      },
+      /**
+       * the repeat this action is appending to.
+       */
+      repeat: {
+        type: String,
+      },
+      clear: {
+        type: String,
+      },
+    };
+  }
 
   constructor() {
     super();
@@ -138,6 +139,8 @@ class FxAppend extends AbstractAction {
    * clear all text nodes and attribute values to get a 'clean' template.
    * @param n
    * @private
+   *
+   *
    */
   _clear(n) {
     let node = n.firstChild;

package/src/actions/fx-confirm.js

@@ -0,0 +1,22 @@
+import { FxAction } from './fx-action.js';
+
+/**
+ * `fx-confirm`
+ * Displays a simple confirmation before actually executing the nested actions.
+ *
+ * @customElement
+ * @demo demo/project.html
+ */
+export class FxConfirm extends FxAction {
+  connectedCallback() {
+    this.message = this.hasAttribute('message') ? this.getAttribute('message') : null;
+  }
+
+  perform() {
+    if (window.confirm(this.message)) {
+      super.perform();
+    }
+  }
+}
+
+window.customElements.define('fx-confirm', FxConfirm);

package/src/actions/fx-dispatch.js

@@ -1,5 +1,6 @@
 import { AbstractAction } from './abstract-action.js';
-import { evaluateXPath } from '../xpath-evaluation.js';
+import { evaluateXPath, resolveId } from '../xpath-evaluation.js';
+import { XPathUtil } from '../xpath-util.js';
 
 /**
  * `fx-dispatch`
@@ -89,7 +90,14 @@ export class FxDispatch extends AbstractAction {
 
     // ### when targetid is given dispatch to that if present (throw an error if not) - otherwise dispatch to document
     if (this.targetid) {
-      const target = document.getElementById(this.targetid);
+      // const target = document.getElementById(this.targetid);
+      let target;
+      if (XPathUtil.isRepeated(this)) {
+        target = resolveId(this.targetid, this.parentNode, null);
+      } else {
+        target = document.getElementById(this.targetid);
+      }
+      console.log('target', target);
       if (!target) {
         throw new Error(`targetid ${this.targetid} does not exist in document`);
       }