@jinntec/fore 1.1.0 → 1.3.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.1.0",
+  "version": "1.3.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,44 +52,30 @@ 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;
-}
-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;
+    /* position: relative; */
 }
 
-/* fx-inspector styles */
-
 /* ### FX-DIALOG STYLES ### */
 /* ### FX-DIALOG STYLES ### */
 /* ### FX-DIALOG STYLES ### */
 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,54 @@ 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{
+    display:none;
 }
-.logtree details{
-    padding:0.1rem 1rem;
-    margin:0;
+
+fx-trigger a[disabled] {
+    color:lightgrey;
 }
-.logtree details summary{
+fx-trigger img[disabled]{
+    filter:blur(2px);
+}
+
 
+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 +170,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

@@ -59,7 +59,7 @@ export const foreElementMixin = superclass =>
       this.model = null;
       this.modelItem = {};
       this.ref = this.hasAttribute('ref') ? this.getAttribute('ref') : '';
-      this.inScopeVariables = null;
+      this.inScopeVariables = new Map();
     }
 
     getModel() {

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,
@@ -115,12 +118,33 @@ export class AbstractAction extends foreElementMixin(HTMLElement) {
    */
   async execute(e) {
     // console.log('executing', this);
+
     // console.log('executing e', e);
     // console.log('executing e phase', e.eventPhase);
+    if(AbstractAction.outermostHandler === null){
+      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);
-      this.setInScopeVariables(vars);
+      vars.set('code', e.code);
+      // this.setInScopeVariables(vars);
+      this.setInScopeVariables(new Map([ ...this.inScopeVariables, ...vars]));
     }
 
     if (e && e.detail) {
@@ -131,12 +155,18 @@ export class AbstractAction extends foreElementMixin(HTMLElement) {
         // index: the ordinal position of the key within the object
         vars.set(key,e.detail[key]);
       });
-      console.log("event detail vars", vars);
-      this.setInScopeVariables(vars);
+      if(vars.size !== 0){
+        console.log("event detail vars", vars);
+      }
+		this.setInScopeVariables(new Map([ ...this.inScopeVariables, ...vars]));
     }
     this.needsUpdate = false;
 
-    this.evalInContext();
+    try{
+      this.evalInContext();
+    }catch (error){
+      console.warn('evaluation faild',error);
+    }
     if (this.targetElement && this.targetElement.nodeset) {
       this.nodeset = this.targetElement.nodeset;
     }
@@ -172,6 +202,7 @@ export class AbstractAction extends foreElementMixin(HTMLElement) {
       // After loop is done call actionPerformed to update the model and UI
       await loop();
       this.actionPerformed();
+      Fore.dispatch(this, 'while-performed', {});
       return;
     }
 
@@ -187,15 +218,31 @@ export class AbstractAction extends foreElementMixin(HTMLElement) {
 
     this.perform();
     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
+      );
+
+    }
   }
 
   /**
    * 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() {
+    console.info(
+        `%cperform `,
+        "background:orange; color:white; padding:0.3rem; display:inline-block; white-space: nowrap; border-radius:0.3rem;",
+        this
+    );
+
+    //todo: review - this evaluation seems redundant as we already evaluated in execute
     if (this.isBound() || this.nodeName === 'FX-ACTION') {
       this.evalInContext();
     }
@@ -206,6 +253,7 @@ export class AbstractAction extends foreElementMixin(HTMLElement) {
    */
   actionPerformed() {
     // console.log('actionPerformed action parentNode ', this.parentNode);
+    // if (this.needsUpdate && AbstractAction.outermostHandler !== this) {
     if (this.needsUpdate) {
       const model = this.getModel();
       model.recalculate();
@@ -221,7 +269,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

@@ -32,6 +32,7 @@ export class FxAction extends AbstractAction {
   }
 
   perform() {
+    super.perform();
     const { children } = this;
 
     if (this.src) {
@@ -47,8 +48,7 @@ export class FxAction extends AbstractAction {
         }
         const action = actionOrVar;
         action.detail = this.detail;
-        action.perform();
-        // action.execute();
+        action.execute();
       });
       this.dispatchActionPerformed();
       this.needsUpdate = true;

package/src/actions/fx-confirm.js

@@ -1,4 +1,4 @@
-import {AbstractAction} from "./abstract-action";
+import {FxAction} from "./fx-action.js";
 
 /**
  * `fx-confirm`
@@ -7,7 +7,7 @@ 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;
   }

package/src/actions/fx-delete.js

@@ -1,83 +1,74 @@
-import { AbstractAction } from './abstract-action.js';
-import { Fore } from '../fore.js';
+import {AbstractAction} from './abstract-action.js';
+import {Fore} from '../fore.js';
+import {evaluateXPathToNodes} from "../xpath-evaluation.js";
+import {XPathUtil} from "../xpath-util";
+import getInScopeContext from '../getInScopeContext.js';
 
 /**
  * `fx-delete`
- * general class for bound elements
+ * deletes nodes from instance data.
  *
+ * @fires deleted event
  * @customElement
  * @demo demo/todo.html
  */
 class FxDelete extends AbstractAction {
-  constructor() {
-    super();
-    this.repeatId = '';
-  }
-
-  /**
-   * deletes a
-   */
-  perform() {
-    super.perform();
-    console.log('##### fx-delete executing...');
-
-    // this.ref = this.getAttribute('ref');
-    // const inscope = this.getInScopeContext();
-    // this.nodeset = fx.evaluateXPathToNodes(this.ref, inscope, null, {});
-
-    console.log('delete nodeset ', this.nodeset);
-
-    // ### if there's no repeat the delete action is inside of a repeat template
-    if (this.repeatId === '') {
-      // find the index to delete
-      const rItem = Fore.getClosest('fx-repeatitem', this.parentNode);
-      const idx = Array.from(rItem.parentNode.children).indexOf(rItem) + 1;
-      // console.log('>>> idx to delete ', idx);
+    constructor() {
+        super();
+    }
 
-      // ### get the model now as it'll be hard once we've deleted ourselves ;)
-      this.model = this.getModel();
-      const repeat = Fore.getClosest('fx-repeat', this.parentNode);
+    /**
+     * deletes nodes from instance data.
+     *
+     * Will NOT perform delete if nodeset is pointing to document node, document fragment, root node or being readonly.
+     */
+    perform() {
+        console.log('##### fx-delete executing...');
+        const inscopeContext = getInScopeContext(this.getAttributeNode('ref') || this, this.ref);
+        this.nodeset = evaluateXPathToNodes(this.ref, inscopeContext, this);
 
-      // ### update the nodeset
-      let nodeToDelete;
-      if (Array.isArray(this.nodeset)) {
-        nodeToDelete = this.nodeset[idx - 1];
-      } else {
-        nodeToDelete = this.nodeset;
-      }
-      const p = nodeToDelete.parentNode;
-      p.removeChild(nodeToDelete);
+        console.log('delete nodeset ', this.nodeset);
 
-      // ### remove the repeatitem
-      rItem.parentNode.removeChild(rItem);
+        const nodesToDelete = this.nodeset;
+        let parent;
+        if (Array.isArray(nodesToDelete)) {
+            if(nodesToDelete.length === 0) return;
+            parent = nodesToDelete[0].parentNode;
+            nodesToDelete.forEach(item => {
+                this._deleteNode(parent, item);
+            });
+        } else {
+            parent = nodesToDelete.parentNode;
+            this._deleteNode(parent, nodesToDelete);
+        }
 
-      // ### update the index (set 'repeat-index' attribute on repeatitem
-      const { repeatSize } = repeat;
-      if (idx === 1 || repeatSize === 1) {
-        repeat.setIndex(1);
-      } else if (idx > repeatSize) {
-        repeat.setIndex(repeatSize);
-      } else {
-        repeat.setIndex(idx);
-      }
+        const instanceId = XPathUtil.resolveInstance(this);
+        const instance = this.getModel().getInstance(instanceId);
+        Fore.dispatch(instance, 'deleted', {deletedNodes:nodesToDelete});
+        this.needsUpdate = true;
     }
 
-    // this.needsRebuild = true;
-    // this.needsRecalculate = true;
-    // this.needsRevalidate = true;
-    // this.needsRefresh = true;
+    _deleteNode(parent, node) {
+        if (parent.nodeType === Node.DOCUMENT_NODE) return;
+        if (node.nodeType === Node.DOCUMENT_NODE) return;
+        if (node.nodeType === Node.DOCUMENT_FRAGMENT_NODE) return;
+        if (node.parentNode === null) return;
 
-    this.needsUpdate = true;
+        const mi = this.getModelItem();
+        if (mi.readonly) return;
 
-    // this.actionPerformed();
-  }
+        parent.removeChild(node);
+    }
 
-  actionPerformed() {
-    this.getModel().rebuild();
-    super.actionPerformed();
-  }
+    /**
+     * overwriting as we need to perform additional rebuild()
+     */
+    actionPerformed() {
+        this.getModel().rebuild();
+        super.actionPerformed();
+    }
 }
 
 if (!customElements.get('fx-delete')) {
-  window.customElements.define('fx-delete', FxDelete);
+    window.customElements.define('fx-delete', FxDelete);
 }

package/src/actions/fx-hide.js

@@ -18,7 +18,9 @@ export class FxHide extends AbstractAction {
   }
 
   perform() {
-    resolveId(this.dialog, this).hide();
+    const dialog = resolveId(this.dialog, this);
+    dialog.hide();
+    Fore.dispatch(dialog,'dialog-hidden',{})
   }
 }
 

package/src/actions/fx-message.js

@@ -1,4 +1,7 @@
 import { AbstractAction } from './abstract-action.js';
+import {evaluateXPathToString} from "../xpath-evaluation";
+import {Fore} from "../fore";
+import getInScopeContext from '../getInScopeContext.js';
 
 /**
  * `fx-message`
@@ -17,6 +20,8 @@ class FxMessage extends AbstractAction {
     super.connectedCallback();
     this.event = this.hasAttribute('event') ? this.getAttribute('event') : '';
     this.level = this.hasAttribute('level') ? this.getAttribute('level') : 'ephemeral';
+
+	this.messageTextContent = this.textContent;
     const style = `
         :host{
             display:none;
@@ -46,8 +51,9 @@ class FxMessage extends AbstractAction {
     super.perform();
     let message;
     if (this.hasAttribute('value')) {
-      message = this.getValue();
+      message = this._getValue();
     } else {
+		this.getOwnerForm().evaluateTemplateExpression(this.messageTextContent, this.firstChild);
       message = this.textContent;
     }
 
@@ -59,6 +65,24 @@ class FxMessage extends AbstractAction {
       }),
     );
   }
+
+  _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-message')) {

package/src/actions/fx-refresh.js

@@ -1,5 +1,6 @@
 import { AbstractAction } from './abstract-action.js';
 import { Fore } from '../fore.js';
+import {resolveId} from "../xpath-evaluation.js";
 
 /**
  * `fx-refresh`
@@ -20,6 +21,14 @@ class FxRefresh extends AbstractAction {
       this.getOwnerForm().forceRefresh();
       return;
     }
+    if(this.hasAttribute('control')){
+      const targetId = this.getAttribute('control');
+      const ctrl = resolveId(targetId, this);
+      if (Fore.isUiElement(ctrl.nodeName) && typeof ctrl.refresh === 'function') {
+        ctrl.refresh();
+      }
+      return;
+    }
     this.getOwnerForm().refresh();
   }
 }

package/src/actions/fx-reload.js

@@ -0,0 +1,30 @@
+import { Fore } from '../fore.js';
+import { AbstractAction } from './abstract-action.js';
+import { resolveId } from '../xpath-evaluation.js';
+
+/**
+ * `fx-reload`
+ * reloads browser window when receiving 'reload' event
+ *
+ * @event reload dispatched when action executes. Usually calls its own handler but might get cancelled by other handler.
+ * @customElement
+ * @demo demo/project.html
+ */
+export class FxReload extends AbstractAction {
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener('reload', event => {
+      window.location.reload();
+    },{once:true});
+  }
+
+  perform() {
+    Fore.dispatch(this, 'reload', {});
+  }
+}
+
+if (!customElements.get('fx-reload')) {
+  window.customElements.define('fx-reload', FxReload);
+}
+