@jinntec/fore 1.2.0 → 1.4.0

package/index.js

@@ -41,6 +41,7 @@ import './src/actions/fx-return.js';
 import './src/actions/fx-confirm.js';
 import './src/actions/fx-show.js';
 import './src/actions/fx-hide.js';
+import './src/actions/fx-reload.js';
 
 import './src/functions/fx-function.js';
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jinntec/fore",
-  "version": "1.2.0",
+  "version": "1.4.0",
   "description": "Fore - declarative user interfaces in plain HTML",
   "module": "./index.js",
   "publishConfig": {
@@ -31,7 +31,7 @@
   ],
   "dependencies": {
     "@jinntec/jinn-toast": "^1.0.4",
-    "fontoxpath": "^3.26.0"
+    "fontoxpath": "^3.27.1"
   },
   "devDependencies": {
     "@babel/plugin-proposal-class-properties": "^7.17.12",

package/resources/fore.css

@@ -17,32 +17,34 @@ html{
     pointer-events: none;
     cursor: default;
 }
-input[readonly]{
-    background: lightgrey;
+[refresh-on-view]{
+    /*opacity: 0;*/
 }
+/*
+    defaults for relevance
 
-/* fx-fore{ */
-/*     opacity: 0; */
-/* } */
-/* fx-fore.fx-ready{ */
-/*     opacity: 1; */
-/* } */
-fx-group, fx-switch, fx-repeat, fx-dialog{
-    display: block;
-}
-fx-trigger a[disabled] {
-    color:lightgrey;
+    You can overwrite these matchers to use transistions
+*/
+[nonrelevant]{
+    display: none;
 }
-fx-trigger img[disabled]{
-    filter:blur(2px);
+[relevant]{
+    display: block;
 }
 
-.error{
-    background: var(--paper-red-500);
+[required]:after {
+    content: "*";
+    display: inline;
+    color: red;
 }
+
 fx-alert{
     color:darkred;
     font-size: 0.9rem;
+    display: none;
+}
+.visited[invalid] fx-alert{
+    display: block;
 }
 
 /* case not displayed by default - if you want e.g. apply transitions you have to overwrite this rule with display='inline' or similar */
@@ -50,36 +52,18 @@ fx-case{
     display: none;
 }
 
-fx-model, fx-model *, fx-model ::slotted(fx-instance), fx-instance{
-    display:none;
+fx-output[readonly] img{
+    background: inherit;
 }
 
-fx-control, fx-trigger{
-    white-space: nowrap;
-    /* position: relative; */
+.error{
+    background: var(--paper-red-500);
 }
-.fx-checkbox{
+
+fx-control, fx-trigger , .fx-checkbox{
     white-space: nowrap;
+    /* position: relative; */
 }
-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-DIALOG STYLES ### */
 /* ### FX-DIALOG STYLES ### */
@@ -87,7 +71,11 @@ fx-repeatitem{
 fx-dialog{
     display: none;
     opacity: 0;
+    width:100vw;
+    height: 100vh;
     transition: opacity 1s linear;
+    z-index: -1;
+    transition: none;
 }
 fx-dialog.show{
     display: block;
@@ -96,7 +84,7 @@ fx-dialog.show{
     opacity: 1;
     background:rgba(0,0,0,0.5);
     z-index: 10;
-    transition: opacity 2s linear;
+    transition: opacity 0.4s linear;
 }
 
 fx-dialog.show .dialog-content{
@@ -126,48 +114,59 @@ fx-dialog .action{
     display: block;
 }
 
+/* fx-fore{ */
+/*     opacity: 0; */
+/* } */
+/* fx-fore.fx-ready{ */
+/*     opacity: 1; */
+/* } */
 
 
-/*
-.visible {
-    visibility: visible;
-    opacity: 1;
-    transition: opacity 2s linear;
+fx-group, fx-switch, fx-repeat, fx-dialog{
+    display: block;
 }
-*/
 
-.required:after {
-    content: '*';
-    color: red;
-    padding-left: 4px;
-    right:3px;
-    top:3px;
-    z-index: 1;
+fx-hint{
+    display: none;
 }
 
-[required]:after {
-    content: "*";
-    display: inline;
-    color: red;
+fx-model,
+fx-model *,
+fx-model ::slotted(fx-instance),
+fx-instance,
+fx-action,
+fx-setvalue{
+    display:none;
 }
-.logtree details{
-    padding:0.1rem 1rem;
-    margin:0;
+
+fx-trigger a[disabled] {
+    color:lightgrey;
+}
+fx-trigger img[disabled]{
+    filter:blur(2px);
 }
-.logtree details summary{
 
+
+fx-repeatitem{
+    position:relative;
+    opacity:1;
+    /*
+    -webkit-transition: opacity 3s;
+    -moz-transition: opacity 3s;
+    transition: opacity 3s;
+    */
 }
-.non-relevant{
+
+.hidden {
+    visibility: hidden;
     opacity: 0;
-    height: 0;
-    transition: opacity 1s;
-}
-.vertical label{
-    display: block;
+    transition: visibility 0s 2s, opacity 2s linear;
 }
-[refresh-on-view]{
-    /*opacity: 0;*/
+
+.isEmpty.visited .widget{
+    background: lightpink;
 }
+
 .loaded{
     animation: fadein 0.3s forwards;
 }
@@ -176,6 +175,35 @@ fx-dialog .action{
     animation: none;
     opacity: 1;
 }
+
+.logtree details{
+    padding:0.1rem 1rem;
+    margin:0;
+}
+.logtree details summary{
+
+}
+
+/*
+.nonrelevant{
+    opacity: 0;
+    height: 0;
+    display: block;
+    padding: 0;
+    margin: 0;
+    border: none;
+    transition: opacity 0.4s;
+}
+*/
+
+
+.submit-validation-failed .isEmpty .widget{
+    background: lightpink;
+}
+.vertical label{
+    display: block;
+}
+
 /* @keyframes fadein { */
 /*     0% { */
 /*         opacity:0; */

package/src/ForeElementMixin.js

@@ -100,6 +100,10 @@ export const foreElementMixin = superclass =>
      */
     evalInContext() {
       // const inscopeContext = this.getInScopeContext();
+      const model = this.getModel();
+      if(!model){
+        return;
+      }
       let inscopeContext;
       if (this.hasAttribute('context')) {
         inscopeContext = getInScopeContext(this.getAttributeNode('context') || this, this.context);

package/src/actions/abstract-action.js

@@ -16,6 +16,9 @@ async function wait(howLong) {
  * @demo demo/index.html
  */
 export class AbstractAction extends foreElementMixin(HTMLElement) {
+  static outermostHandler = null;
+  static dataChanged = false;
+
   static get properties() {
     return {
       ...super.properties,
@@ -114,33 +117,65 @@ export class AbstractAction extends foreElementMixin(HTMLElement) {
    * @param e
    */
   async execute(e) {
+    let resolveThisEvent = () => {};
+    if (e && e.listenerPromises) {
+      e.listenerPromises.push(
+        new Promise(resolve => {
+          resolveThisEvent = resolve;
+        }),
+      );
+    }
+
     // console.log('executing', this);
+
     // console.log('executing e', e);
     // console.log('executing e phase', e.eventPhase);
-    if(e && e.code){
+    if (AbstractAction.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);
+      AbstractAction.outermostHandler = this;
+    }
+
+    if (AbstractAction.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', AbstractAction.outermostHandler);
+
+    if (e && e.code) {
       const vars = new Map();
-      vars.set('code',e.code);
+      vars.set('code', e.code);
       // this.setInScopeVariables(vars);
-      this.setInScopeVariables(new Map([...vars, ...this.inScopeVariables]));
+      this.setInScopeVariables(new Map([...this.inScopeVariables, ...vars]));
     }
 
     if (e && e.detail) {
       this.detail = e.detail;
       const vars = new Map();
-      Object.keys(e.detail).forEach(function(key,index) {
+      Object.keys(e.detail).forEach(function(key, index) {
         // key: the name of the object key
         // index: the ordinal position of the key within the object
-        vars.set(key,e.detail[key]);
+        vars.set(key, e.detail[key]);
       });
-      console.log("event detail vars", vars);
-      this.setInScopeVariables(new Map([...vars, ...this.inScopeVariables]));
+      if (vars.size !== 0) {
+        console.log('event detail vars', vars);
+      }
+      this.setInScopeVariables(new Map([...this.inScopeVariables, ...vars]));
     }
     this.needsUpdate = false;
 
-    try{
+    try {
       this.evalInContext();
-    }catch (error){
-      console.warn('evaluation faild',error);
+    } catch (error) {
+      console.warn('evaluation faild', error);
     }
     if (this.targetElement && this.targetElement.nodeset) {
       this.nodeset = this.targetElement.nodeset;
@@ -148,6 +183,7 @@ export class AbstractAction extends foreElementMixin(HTMLElement) {
 
     // First check if 'if' condition is true - otherwise exist right away
     if (this.ifExpr && !evaluateXPathToBoolean(this.ifExpr, getInScopeContext(this), this)) {
+      this._finalizePerform(resolveThisEvent);
       return;
     }
 
@@ -171,13 +207,20 @@ export class AbstractAction extends foreElementMixin(HTMLElement) {
         this.perform();
 
         // 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 uninteruptable and immediate
+          loop();
+          return;
+        }
         await loop();
       };
 
       // After loop is done call actionPerformed to update the model and UI
       await loop();
-      this.actionPerformed();
-      Fore.dispatch(this, 'while-performed', {});
+
+      this._finalizePerform(resolveThisEvent);
       return;
     }
 
@@ -187,21 +230,39 @@ export class AbstractAction extends foreElementMixin(HTMLElement) {
       if (!this.ownerDocument.contains(this)) {
         // We are no longer in the document. Stop working
         this.actionPerformed();
+        resolveThisEvent();
         return;
       }
     }
 
-    this.perform();
+    await this.perform();
+    this._finalizePerform(resolveThisEvent);
+
+  }
+
+  _finalizePerform(resolveThisEvent) {
     this.actionPerformed();
+    if (AbstractAction.outermostHandler === this) {
+      AbstractAction.outermostHandler = null;
+      console.info(
+        `%coutermost Action done`,
+        'background:#e65100; color:white; padding:0.3rem; display:inline-block; white-space: nowrap; border-radius:0.3rem;',
+        this,
+      );
+      console.timeEnd('outermostHandler');
+
+    }
+    resolveThisEvent();
   }
 
   /**
    * 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
+   * This function should not called on any action directly - call execute() instead to ensure proper execution of 'if' and 'while'
    */
-  perform() {
+  async perform() {
+    //todo: review - this evaluation seems redundant as we already evaluated in execute
     if (this.isBound() || this.nodeName === 'FX-ACTION') {
       this.evalInContext();
     }
@@ -211,13 +272,36 @@ export class AbstractAction extends foreElementMixin(HTMLElement) {
    * calls the update cycle if action signalled that update is needed.
    */
   actionPerformed() {
+    const model = this.getModel();
+    if(!model){
+      return;
+    }
+    if (!model.inited) {
+      return;
+    }
+    if (
+      AbstractAction.outermostHandler &&
+      !AbstractAction.outermostHandler.ownerDocument.contains(AbstractAction.outermostHandler)
+    ) {
+      // The old outermosthandler fell out of the document. An error has happened.
+      // Just remove the old one and act like we are starting anew.
+      console.warn('Unsetting outermost handler');
+      AbstractAction.outermostHandler = null;
+    }
     // console.log('actionPerformed action parentNode ', this.parentNode);
-    if (this.needsUpdate) {
-      const model = this.getModel();
+    if (
+      this.needsUpdate &&
+      (AbstractAction.outermostHandler === this || !AbstractAction.outermostHandler)
+    ) {
+      console.log('Running actionperformed');
       model.recalculate();
       model.revalidate();
       model.parentNode.refresh(true);
       this.dispatchActionPerformed();
+    } else if (this.needsUpdate) {
+      // We need an update, but the outermost action handler may not. Make this clear!
+      AbstractAction.outermostHandler.needsUpdate = true;
+      console.log('Update surpressed!');
     }
   }
 
@@ -227,7 +311,7 @@ export class AbstractAction extends foreElementMixin(HTMLElement) {
    * @event action-performed - whenever an action has been run
    */
   dispatchActionPerformed() {
-    console.log('action-performed ', this);
+    // console.log('action-performed ', this);
     Fore.dispatch(this, 'action-performed', {});
   }
 }

package/src/actions/fx-action.js

@@ -31,7 +31,7 @@ export class FxAction extends AbstractAction {
     `;
   }
 
-  perform() {
+  async perform() {
     super.perform();
     const { children } = this;
 
@@ -42,15 +42,14 @@ export class FxAction extends AbstractAction {
       script.src = this.src;
       this.appendChild(script);
     } else {
-      Array.from(children).forEach(actionOrVar => {
-        if (actionOrVar.localName === 'fx-var') {
-          return;
-        }
-        const action = actionOrVar;
-        action.detail = this.detail;
-        action.perform();
-        // action.execute();
-      });
+		for (const actionOrVar of children) {
+			if (actionOrVar.localName === 'fx-var') {
+				continue;
+			}
+			const action = actionOrVar;
+			action.detail = this.detail;
+        await action.execute();
+      }
       this.dispatchActionPerformed();
       this.needsUpdate = true;
     }

package/src/actions/fx-append.js

@@ -58,7 +58,7 @@ class FxAppend extends AbstractAction {
    * behavior should be needed for some reason later on, it can be added easier by a providing an 'duplicate' action.
    *
    */
-  perform() {
+  async perform() {
     super.perform();
 
     this._dataFromTemplate();

package/src/actions/fx-confirm.js

@@ -1,4 +1,4 @@
-import {AbstractAction} from "./abstract-action";
+import {FxAction} from "./fx-action.js";
 
 /**
  * `fx-confirm`
@@ -7,12 +7,12 @@ import {AbstractAction} from "./abstract-action";
  * @customElement
  * @demo demo/project.html
  */
-export class FxConfirm extends AbstractAction {
+export class FxConfirm extends FxAction {
   connectedCallback() {
     this.message = this.hasAttribute('message') ? this.getAttribute('message') : null;
   }
 
-  perform() {
+  async perform() {
     if (window.confirm(this.message)) {
       super.perform();
     }

package/src/actions/fx-copy.js

@@ -0,0 +1,68 @@
+import '../fx-model.js';
+import {AbstractAction} from './abstract-action.js';
+
+/**
+ * `fx-copy`
+ * todo: demo + tests
+ * @customElement
+ */
+export default class FxCopy extends AbstractAction {
+    static get properties() {
+        return {
+            ...super.properties,
+            ref: {
+                type: String,
+            },
+            to: {
+                type: String,
+            },
+        };
+    }
+
+    constructor() {
+        super();
+        this.ref = '';
+        this.to = '';
+    }
+
+    connectedCallback() {
+        if (super.connectedCallback) {
+            super.connectedCallback();
+        }
+
+        if (this.hasAttribute('ref')) {
+            this.ref = this.getAttribute('ref');
+        } else {
+            throw new Error('fx-copy must specify a "ref" attribute');
+        }
+        this.to = this.getAttribute('to');
+    }
+
+    perform() {
+        console.log('copying to clipboard')
+        super.perform();
+
+        if(this.nodeset.nodeType === Node.ATTRIBUTE_NODE){
+            navigator.clipboard.writeText(this.nodeset.nodeValue);
+        }else{
+            navigator.clipboard.writeText(this.nodeset);
+        }
+    }
+
+/*
+    setValue(modelItem, newVal) {
+        const item = modelItem;
+        if (!item) return;
+
+        if (item.value !== newVal) {
+            item.value = newVal;
+            this.getModel().changed.push(modelItem);
+            this.needsUpdate = true;
+        }
+    }
+*/
+}
+
+if (!customElements.get('fx-copy')) {
+    window.customElements.define('fx-copy', FxCopy);
+}