@jinntec/fore 1.2.0 → 1.4.0

package/src/fore.js

@@ -9,8 +9,19 @@ export class Fore {
 
   static TYPE_DEFAULT = 'xs:string';
 
+  /**
+   * returns the next `fx-fore` element upwards in tree
+   *
+   * @param start
+   * @returns {*}
+   */
+  static getFore(start) {
+    return start.nodeType === Node.TEXT_NODE ? start.parentNode.closest('fx-fore'):start.closest('fx-fore');
+  }
+
   static get ACTION_ELEMENTS() {
     return [
+      'FX-ACTION',
       'FX-DELETE',
       'FX-DISPATCH',
       'FX-HIDE',
@@ -21,6 +32,7 @@ export class Fore {
       'FX-RECALCULATE',
       'FX-REFRESH',
       'FX-RENEW',
+      'FX-RELOAD',
       'FX-REPLACE',
       'FX-RESET',
       'FX-RETAIN',
@@ -64,16 +76,12 @@ export class Fore {
     return [
       'FX-ALERT',
       'FX-CONTROL',
-      'FX-BUTTON',
-      'FX-CONTROL',
       'FX-DIALOG',
       'FX-FILENAME',
       'FX-MEDIATYPE',
       'FX-GROUP',
       'FX-HINT',
-      'FX-INPUT',
       'FX-ITEMS',
-      'FX-LABEL',
       'FX-OUTPUT',
       'FX-RANGE',
       'FX-REPEAT',
@@ -89,6 +97,16 @@ export class Fore {
     ];
   }
 
+  static get MODEL_ELEMENTS(){
+    return [
+      'FX-BIND',
+      'FX-FUNCTION',
+      'FX-MODEL',
+      'FX-INSTANCE',
+      'FX-SUBMISSION',
+    ];
+  }
+
   static isUiElement(elementName) {
     const found = Fore.UI_ELEMENTS.includes(elementName);
     if (found) {
@@ -133,7 +151,7 @@ export class Fore {
           if (Fore.isUiElement(element.nodeName) && typeof element.refresh === 'function') {
             // console.log('refreshing', element, element?.ref);
             // console.log('refreshing ',element);
-            element.refresh();
+            element.refresh(force);
           } else if (element.nodeName.toUpperCase() !== 'FX-MODEL') {
             Fore.refreshChildren(element, force);
           }
@@ -145,6 +163,61 @@ export class Fore {
     return refreshed;
   }
 
+  static copyDom(inputElement){
+    console.time('convert');
+    const target = new DOMParser().parseFromString('<fx-fore></fx-fore>', 'text/html');
+    console.log('copyDom new doc',target);
+    console.log('copyDom new body',target.body);
+    console.log('copyDom new body',target.querySelector('fx-fore'));
+    const newFore = target.querySelector('fx-fore');
+    this.convertFromSimple(inputElement,newFore);
+    newFore.removeAttribute('convert');
+    console.log('converted', newFore);
+    return newFore;
+    console.timeEnd('convert');
+  }
+  static convertFromSimple(startElement,targetElement){
+    const children = startElement.childNodes;
+    if (children) {
+      Array.from(children).forEach(node => {
+        const lookFor = `FX-${node.nodeName.toUpperCase()}`;
+        if (Fore.MODEL_ELEMENTS.includes(lookFor)
+            || Fore.UI_ELEMENTS.includes(lookFor)
+            || Fore.ACTION_ELEMENTS.includes(lookFor)
+        ) {
+          const conv = targetElement.ownerDocument.createElement(lookFor);
+          console.log('conv', node, conv);
+          targetElement.appendChild(conv);
+          Fore.copyAttributes(node,conv);
+          Fore.convertFromSimple(node,conv);
+        } else{
+
+          if(node.nodeType === Node.TEXT_NODE){
+            const copied = targetElement.ownerDocument.createTextNode(node.textContent);
+            targetElement.appendChild(copied);
+          }
+
+          if(node.nodeType === Node.ELEMENT_NODE){
+            const copied = targetElement.ownerDocument.createElement(node.nodeName);
+            targetElement.appendChild(copied);
+            Fore.copyAttributes(node,targetElement);
+            Fore.convertFromSimple(node,copied);
+          }
+        }
+      });
+    }
+  }
+
+  static copyAttributes(source, target) {
+    return Array.from(source.attributes).forEach(attribute => {
+      target.setAttribute(
+          attribute.nodeName,
+          attribute.nodeValue,
+      );
+    });
+  }
+
+
   /**
    * Alternative to `closest` that respects subcontrol boundaries
    */
@@ -168,8 +241,8 @@ export class Fore {
    * @param instance an fx-instance element
    * @returns {string|null}
    */
-  static getContentType(instance, method) {
-    if (method === 'urlencoded-post') {
+  static getContentType(instance, contentType) {
+    if (contentType === 'application/x-www-form-urlencoded') {
       return 'application/x-www-form-urlencoded; charset=UTF-8';
     }
     if (instance.type === 'xml') {
@@ -222,14 +295,23 @@ export class Fore {
     return fadeOut();
   }
 
-  static dispatch(target, eventName, detail) {
+  static async dispatch(target, eventName, detail) {
     const event = new CustomEvent(eventName, {
       composed: false,
       bubbles: true,
       detail,
     });
-    console.log('dispatching', event);
-    target.dispatchEvent(event);
+	  event.listenerPromises = [];
+      // console.info('dispatching', event.type, target);
+	  // console.log('!!! DISPATCH_START', eventName);
+
+      target.dispatchEvent(event);
+
+	  // By now, all listeners for the event should have registered their completion promises to us.
+	  if (event.listenerPromises.length) {
+		  await Promise.all(event.listenerPromises);
+	  }
+	  // console.log('!!! DISPATCH_DONE', eventName);
   }
 
   static prettifyXml(source) {
@@ -346,13 +428,42 @@ export class Fore {
             }),
           );
         }
-        hostElement.appendChild(theFore);
-        theFore.classList.add('widget');
-        // return theFore;
-        // theFore.setAttribute('from-src', this.src);
-        // this.replaceWith(theFore);
+        const imported = document.importNode(theFore,true);
+        console.log(`########## loaded fore as component ##### ${hostElement.url}`);
+        imported.addEventListener(
+            'model-construct-done',
+            e => {
+              console.log('subcomponent ready', e.target);
+              const defaultInst = imported.querySelector('fx-instance');
+              // console.log('defaultInst', defaultInst);
+              if(hostElement.initialNode){
+                const doc = new DOMParser().parseFromString('<data></data>', 'application/xml');
+                // Note: Clone the input to prevent the inner fore from editing the outer node
+                doc.firstElementChild.appendChild(hostElement.initialNode.cloneNode(true));
+                // defaultinst.setInstanceData(this.initialNode);
+                defaultInst.setInstanceData(doc);
+              }
+              // console.log('new data', defaultInst.getInstanceData());
+              // theFore.getModel().modelConstruct();
+              imported.getModel().updateModel();
+              imported.refresh();
+              return 'done';
+
+            },
+            { once: true },
+        );
+
+        const dummy = hostElement.querySelector('input');
+        if (hostElement.hasAttribute('shadow')) {
+          dummy.parentNode.removeChild(dummy);
+          hostElement.shadowRoot.appendChild(imported);
+        } else {
+          console.log(this, 'replacing widget with',theFore);
+          dummy.replaceWith(imported);
+          // this.appendChild(imported);
+        }
       })
-      .catch(error => {
+      /*.catch(error => {
         hostElement.dispatchEvent(
           new CustomEvent('error', {
             composed: false,
@@ -363,7 +474,7 @@ export class Fore {
             },
           }),
         );
-      });
+      });*/
   }
 
   /**

package/src/fx-bind.js

@@ -61,7 +61,7 @@ export class FxBind extends foreElementMixin(HTMLElement) {
    */
   init(model) {
     this.model = model;
-    console.log('init binding ', this);
+    // console.log('init binding ', this);
     this.instanceId = this._getInstanceId();
     this.bindType = this.getModel().getInstance(this.instanceId).type;
     // console.log('binding type ', this.bindType);
@@ -320,6 +320,11 @@ export class FxBind extends foreElementMixin(HTMLElement) {
       this,
     );
 
+    const alert = this.getAlert();
+    if (alert) {
+      newItem.addAlert(alert);
+    }
+
     this.getModel().registerModelItem(newItem);
   }
 

package/src/fx-fore.js

@@ -1,8 +1,8 @@
 import {Fore} from './fore.js';
 import './fx-instance.js';
-import './fx-model.js';
+import {FxModel} from './fx-model.js';
 import '@jinntec/jinn-toast';
-import {evaluateXPathToNodes, evaluateXPathToString} from './xpath-evaluation.js';
+import {evaluateXPathToBoolean, evaluateXPathToNodes, evaluateXPathToString} from './xpath-evaluation.js';
 import getInScopeContext from './getInScopeContext.js';
 import {XPathUtil} from './xpath-util.js';
 
@@ -14,9 +14,9 @@ import {XPathUtil} from './xpath-util.js';
  * fx-fore is the outermost container for each form. A form can have exactly one model
  * with arbitrary number of instances.
  *
- * Main responsiblities are initialization and updating of model and instances, update of UI (refresh) and global messaging.
+ * Main responsibilities are initialization and updating of model and instances, update of UI (refresh) and global messaging.
  *
- * @event compute-exception - dispatched in case the dependency graph is cirular
+ * @event compute-exception - dispatched in case the dependency graph is circular
  * @event refresh-done - dispatched after a refresh() run
  * @event ready - dispatched after Fore has fully been initialized
  * @event error - dispatches error when template expression fails to evaluate
@@ -55,7 +55,7 @@ export class FxFore extends HTMLElement {
     constructor() {
         super();
         this.model = {};
-        this.addEventListener('model-construct-done', this._handleModelConstructDone);
+        // this.addEventListener('model-construct-done', this._handleModelConstructDone);
         this.addEventListener('message', this._displayMessage);
         this.addEventListener('error', this._displayError);
         window.addEventListener('compute-exception', e => {
@@ -67,19 +67,11 @@ export class FxFore extends HTMLElement {
 
         const style = `
             :host {
-                // display: none;
-                height:auto;
-                padding:var(--model-element-padding);
-                font-family:Roboto, sans-serif;
-                color:var(--paper-grey-900);
+                display: block;
             }
             :host ::slotted(fx-model){
                 display:none;
             }
-            // :host(.fx-ready){
-            //     animation: fadein .4s forwards;
-            //     display:block;
-            // }
 
             #modalMessage .dialogActions{
                 text-align:center;
@@ -143,14 +135,6 @@ export class FxFore extends HTMLElement {
             #messageContent{
                 margin-top:40px;
             }
-            @keyframes fadein {
-              0% {
-                  opacity:0;
-              }
-              100% {
-                  opacity:1;
-              }
-            }
         `;
 
         const html = `
@@ -181,6 +165,8 @@ export class FxFore extends HTMLElement {
     }
 
     connectedCallback() {
+        this.style.visibility = 'hidden';
+        console.time('init');
         /*
         document.addEventListener('ready', (e) =>{
           if(e.target !== this){
@@ -217,7 +203,15 @@ export class FxFore extends HTMLElement {
         }
 
         const slot = this.shadowRoot.querySelector('slot');
-        slot.addEventListener('slotchange', event => {
+        slot.addEventListener('slotchange', async event => {
+
+            // preliminary addition for auto-conversion of non-prefixed element into prefixed elements. See fore.js
+            if(this.hasAttribute('convert')){
+                this.replaceWith(Fore.copyDom(this));
+                // Fore.copyDom(this);
+                return;
+            }
+
             const children = event.target.assignedElements();
             let modelElement = children.find(
                 modelElem => modelElem.nodeName.toUpperCase() === 'FX-MODEL',
@@ -228,18 +222,21 @@ export class FxFore extends HTMLElement {
                 modelElement = generatedModel;
             }
             if (!modelElement.inited) {
-                console.log(
-                    `########## FORE: kick off processing for ... ${window.location.href} ##########`,
+                console.info(
+                    `%cFore is processing URL ${window.location.href}`,
+                    "background:#64b5f6; color:white; padding:1rem; display:inline-block; white-space: nowrap; border-radius:0.3rem;width:100%;",
                 );
+
                 if (this.src) {
                     console.log('########## FORE: loaded from ... ', this.src, '##########');
                 }
-                modelElement.modelConstruct();
+                await modelElement.modelConstruct();
+				this._handleModelConstructDone();
             }
             this.model = modelElement;
         });
-        this.addEventListener('path-mutated', e => {
-            console.log('path-mutated event received', e.detail.path, e.detail.index);
+        this.addEventListener('path-mutated', () => {
+            // console.log('path-mutated event received', e.detail.path, e.detail.index);
             this.someInstanceDataStructureChanged = true;
         });
     }
@@ -287,7 +284,7 @@ export class FxFore extends HTMLElement {
 
                 // console.log('thefore', theFore)
                 if (!theFore) {
-                    Fore.dispatchEvent(this, 'error', {
+                    Fore.dispatch(this, 'error', {
                         detail: {
                             message: `Fore element not found in '${this.src}'. Maybe wrapped within 'template' element?`,
                         },
@@ -311,9 +308,13 @@ export class FxFore extends HTMLElement {
      */
     handleIntersect(entries, observer) {
         console.time('refreshLazy');
+
         entries.forEach(entry => {
             const {target} = entry;
 
+            const fore = Fore.getFore(target);
+            if(fore.initialRun) return;
+
             if (entry.isIntersecting) {
                 console.log('in view', entry);
                 // console.log('repeat in view entry', entry.target);
@@ -375,7 +376,8 @@ export class FxFore extends HTMLElement {
 
     async refresh(force) {
         // refresh () {
-        console.group('### refresh');
+        console.info('%crefresh','font-style: italic; background: #8bc34a; color:white; padding:0.3rem 5rem 0.3rem 0.3rem; display:block; width:100%;');
+        console.group('refresh', force);
 
         console.time('refresh');
 
@@ -393,7 +395,7 @@ export class FxFore extends HTMLElement {
                 const controlsToRefresh = modelItem.boundControls;
                 if (controlsToRefresh) {
                     controlsToRefresh.forEach(ctrl => {
-                        ctrl.refresh();
+                        ctrl.refresh(force);
                     });
                 }
 
@@ -409,7 +411,7 @@ export class FxFore extends HTMLElement {
                             const modelItemOfDep = this.getModel().modelItems.find(mip => mip.path === basePath);
                             // ### refresh all boundControls
                             modelItemOfDep.boundControls.forEach(control => {
-                                control.refresh();
+                                control.refresh(force);
                             });
                         });
                         needsRefresh = true;
@@ -418,7 +420,7 @@ export class FxFore extends HTMLElement {
             });
             this.toRefresh = [];
             if (!needsRefresh) {
-                console.log('skipping refresh - no dependants');
+                console.log('no dependants to refresh');
             }
         } else {
             Fore.refreshChildren(this, true);
@@ -437,6 +439,8 @@ export class FxFore extends HTMLElement {
         console.groupEnd();
         // console.log('### <<<<< dispatching refresh-done - end of UI update cycle >>>>>');
         // this.dispatchEvent(new CustomEvent('refresh-done'));
+        // this.initialRun = false;
+        this.style.visibility='visible';
         Fore.dispatch(this, 'refresh-done', {});
     }
 
@@ -449,9 +453,8 @@ export class FxFore extends HTMLElement {
      * @private
      */
     _updateTemplateExpressions() {
-        // Note the fact we're going over HTML here: therefore the `html` prefix.
         const search =
-            "(descendant-or-self::*/(text(), @*))[not(ancestor-or-self::fx-model)][matches(.,'\\{.*\\}')]";
+            "(descendant-or-self::*!(text(), @*))[contains(., '{')][substring-after(., '{') => contains('}')][not(ancestor-or-self::fx-model)]";
 
         const tmplExpressions = evaluateXPathToNodes(search, this, this);
         // console.log('template expressions found ', tmplExpressions);
@@ -482,7 +485,18 @@ export class FxFore extends HTMLElement {
     }
 
     _processTemplateExpressions() {
-        for (const node of this.storedTemplateExpressionByNode.keys()) {
+        for (const node of Array.from(this.storedTemplateExpressionByNode.keys())) {
+			if (node.nodeType === Node.ATTRIBUTE_NODE) {
+				// Attribute nodes are not contained by the document, but their owner elements are!
+				if (!node.ownerDocument.contains(node.ownerElement)) {
+					this.storedTemplateExpressionByNode.delete(node);
+					continue;
+				}
+			} else if (!node.ownerDocument.contains(node)) {
+				// For all other nodes, if the document does not contain them, they are dead
+				this.storedTemplateExpressionByNode.delete(node);
+				continue;
+			}
             this._processTemplateExpression({
                 node,
                 expr: this.storedTemplateExpressionByNode.get(node),
@@ -497,7 +511,7 @@ export class FxFore extends HTMLElement {
         const {expr} = exprObj;
         const {node} = exprObj;
         // console.log('expr ', expr);
-        this.evaluateTemplateExpression(expr, node, this);
+        this.evaluateTemplateExpression(expr, node);
     }
 
     /**
@@ -552,11 +566,43 @@ export class FxFore extends HTMLElement {
 
     /**
      * called when `model-construct-done` event is received to
-     * start initing of the UI.
+     * start initing the UI.
      *
      * @private
      */
     _handleModelConstructDone() {
+        /*
+        listening on beforeunload after model is constructed - this is to be able to evaluate a condition on the data
+        that specifies whether or not to show confirmation.
+         */
+        if(this.hasAttribute('show-confirmation')){
+            const condition = this.getAttribute('show-confirmation');
+            if(condition
+                && condition !== 'show-confirmation'
+                && condition !== 'true'
+                && condition !== ''){
+                window.addEventListener('beforeunload', event => {
+                    const mustDisplay = evaluateXPathToBoolean(condition, this.getModel().getDefaultContext(), this)
+                    if(mustDisplay){
+                        console.log('have to display confirmation')
+                        return event.returnValue = 'are you sure';
+                    }
+                    event.preventDefault();
+                    console.log('do not display confirmation')
+                })
+            }else{
+                window.addEventListener('beforeunload', event => {
+                    // if(AbstractAction.dataChanged){
+                    if(FxModel.dataChanged){
+                        console.log('have to display confirmation')
+                        return event.returnValue = 'are you sure';
+                    }
+                    event.preventDefault();
+                    console.log('do not display confirmation')
+                })
+            }
+        }
+
         this._initUI();
     }
 
@@ -700,7 +746,8 @@ export class FxFore extends HTMLElement {
         };
     */
 
-        await this.refresh();
+		// First refresh should be forced
+        await this.refresh(true);
         // this.style.display='block'
         this.classList.add('fx-ready');
         document.body.classList.add('fx-ready');
@@ -708,9 +755,14 @@ export class FxFore extends HTMLElement {
         this.ready = true;
         this.initialRun = false;
         // console.log('### >>>>> dispatching ready >>>>>', this);
-        console.log('### modelItems: ', this.getModel().modelItems);
-        console.log('### <<<<< FORE: form fully initialized...', this);
+        // console.log('### modelItems: ', this.getModel().modelItems);
         Fore.dispatch(this, 'ready', {});
+        console.info(
+            `%cPage Initialization done`,
+            "background:#64b5f6; color:white; padding:1rem; display:block; white-space: nowrap; border-radius:0.3rem;width:100%;",
+        );
+        console.timeEnd('init');
+        console.log('dataChanged', FxModel.dataChanged);
     }
 
     registerLazyElement(element) {