@jinntec/fore 1.2.0 → 1.3.0

package/src/actions/fx-setfocus.js

@@ -3,7 +3,7 @@ import {resolveId} from "../xpath-evaluation";
 
 /**
  * `fx-setfocus`
- * Set the focus to a target control.
+ * Set the focus to a target control optionally selecting eventual value in case a `select` attribute is given.
  *
  * @customElement
  */
@@ -16,22 +16,49 @@ export class FxSetfocus extends AbstractAction {
   perform() {
       console.log('setting focus', this.control);
       // super.perform();
-
-      // const targetElement = resolveId(this.control, this);
       const selector = '#'+this.control;
-      let targetElement = document.querySelector(selector);
+
+      let targetElement = this.getOwnerForm().querySelector(selector);;
+
+      // ### focus action is itself hosted within a repeat
+      const parentIItem = this.closest('fx-repeatitem');
+      if(parentIItem){
+          console.log('parentRepeat',parentIItem);
+          targetElement = parentIItem.querySelector(selector);
+          this._focus(targetElement);
+          return;
+      }
+
+      // ### the target element is hosted within a repeat
       const repeatitem = targetElement.closest('fx-repeatitem, .fx-repeatitem');
       if(repeatitem){
         // targetElement is repeated
         // get the active repeatitem (only for fx-repeat for now - todo: support repeat attributes
         const repeat = repeatitem.parentNode;
         targetElement = repeat.querySelector('[repeat-index] ' + selector);
+      }
 
+      this._focus(targetElement);
+      if(this.hasAttribute('select')){
+          this._select(targetElement);
       }
-      targetElement.getWidget().focus();
   }
+
+    _focus(targetElement){
+        if(targetElement){
+            targetElement.getWidget().focus();
+        }
+    }
+
+    _select(targetElement){
+        if(targetElement){
+            targetElement.getWidget().select();
+        }
+    }
+
 }
 
+
 if (!customElements.get('fx-setfocus')) {
   window.customElements.define('fx-setfocus', FxSetfocus);
 }

package/src/actions/fx-setvalue.js

@@ -52,16 +52,17 @@ export default class FxSetvalue extends AbstractAction {
         }
         console.log('value', value);
         if (value.nodeType === Node.ATTRIBUTE_NODE) {
-            console.log('value', value.nodeValue);
+            // console.log('value', value.nodeValue);
             value = value.nodeValue;
         }
         const mi = this.getModelItem();
         this.setValue(mi, value);
+        // todo: check this again - logically needsUpate should be set but makes tests fail
+        //  this.needsUpdate = true;
+
     }
 
     setValue(modelItem, newVal) {
-        console.log('setvalue[1]  ', modelItem, newVal);
-
         const item = modelItem;
         if (!item) return;
 
@@ -69,7 +70,6 @@ export default class FxSetvalue extends AbstractAction {
             item.value = newVal;
             this.getModel().changed.push(modelItem);
             this.needsUpdate = true;
-            console.log('setvalue[2] ', item, newVal);
         }
     }
 }

package/src/actions/fx-show.js

@@ -23,6 +23,7 @@ export class FxShow extends FxAction {
       console.error('target dialog with given id does not exist',this.dialog);
     }
     targetDlg.open();
+    Fore.dispatch(targetDlg,'dialog-shown',{});
   }
 }
 

package/src/actions/fx-toggle.js

@@ -1,4 +1,5 @@
 import { AbstractAction } from './abstract-action.js';
+import {Fore} from "../fore";
 
 /**
  * `fx-toggle`
@@ -24,6 +25,10 @@ class FxToggle extends AbstractAction {
     if (this.case) {
       const ownerForm = this.getOwnerForm();
       const caseElement = ownerForm.querySelector(`#${this.case}`);
+      if(!caseElement){
+        Fore.dispatch(this, 'error', { message: `fx-case id not found: ${this.case}` });
+        return;
+      }
       const fxSwitch = caseElement.parentNode;
       fxSwitch.toggle(caseElement);
     }

package/src/events.js

@@ -0,0 +1,24 @@
+export function leadingDebounce(caller, func, timeout = 300){
+    console.log('debouncing', func);
+    let timer;
+    return (...args) => {
+        if (!timer) {
+            func.apply(caller, args);
+        }
+        clearTimeout(timer);
+        timer = setTimeout(() => {
+            timer = undefined;
+            return null;
+        }, timeout);
+    };
+}
+
+export function debounce(caller, func, timeout = 300) {
+    let timer;
+    return (...args) => {
+        clearTimeout(timer);
+        timer = setTimeout(() => {
+            func.apply(caller, args);
+        }, timeout);
+    };
+}

package/src/fore.js

@@ -11,6 +11,7 @@ export class Fore {
 
   static get ACTION_ELEMENTS() {
     return [
+      'FX-ACTION',
       'FX-DELETE',
       'FX-DISPATCH',
       'FX-HIDE',
@@ -21,6 +22,7 @@ export class Fore {
       'FX-RECALCULATE',
       'FX-REFRESH',
       'FX-RENEW',
+      'FX-RELOAD',
       'FX-REPLACE',
       'FX-RESET',
       'FX-RETAIN',
@@ -64,16 +66,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 +87,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 +141,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 +153,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 +231,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') {
@@ -228,7 +291,7 @@ export class Fore {
       bubbles: true,
       detail,
     });
-    console.log('dispatching', event);
+    console.info('dispatching', event.type, target);
     target.dispatchEvent(event);
   }
 

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);

package/src/fx-fore.js

@@ -1,10 +1,11 @@
 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';
+import {AbstractAction} from "./actions/abstract-action";
 
 /**
  * Main class for Fore.Outermost container element for each Fore application.
@@ -181,6 +182,8 @@ export class FxFore extends HTMLElement {
     }
 
     connectedCallback() {
+        this.style.visibility = 'hidden';
+
         /*
         document.addEventListener('ready', (e) =>{
           if(e.target !== this){
@@ -218,6 +221,14 @@ export class FxFore extends HTMLElement {
 
         const slot = this.shadowRoot.querySelector('slot');
         slot.addEventListener('slotchange', 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,9 +239,11 @@ 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, '##########');
                 }
@@ -239,7 +252,7 @@ export class FxFore extends HTMLElement {
             this.model = modelElement;
         });
         this.addEventListener('path-mutated', e => {
-            console.log('path-mutated event received', e.detail.path, e.detail.index);
+            // console.log('path-mutated event received', e.detail.path, e.detail.index);
             this.someInstanceDataStructureChanged = true;
         });
     }
@@ -375,7 +388,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 +407,7 @@ export class FxFore extends HTMLElement {
                 const controlsToRefresh = modelItem.boundControls;
                 if (controlsToRefresh) {
                     controlsToRefresh.forEach(ctrl => {
-                        ctrl.refresh();
+                        ctrl.refresh(force);
                     });
                 }
 
@@ -409,7 +423,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 +432,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 +451,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 +465,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);
@@ -557,6 +572,38 @@ export class FxFore extends HTMLElement {
      * @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(showConfirm, 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();
     }
 
@@ -708,9 +755,13 @@ 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.log('dataChanged', FxModel.dataChanged);
     }
 
     registerLazyElement(element) {

package/src/fx-instance.js

@@ -84,14 +84,14 @@ export class FxInstance extends HTMLElement {
    */
   getInstanceData() {
     if (!this.instanceData) {
-      this._createInstanceData();
+      this.createInstanceData();
     }
     return this.instanceData;
   }
 
   setInstanceData(data) {
     if (!data) {
-      this._createInstanceData();
+      this.createInstanceData();
       return;
     }
     this.instanceData = data;
@@ -142,7 +142,7 @@ export class FxInstance extends HTMLElement {
     }
   }
 
-  _createInstanceData() {
+  createInstanceData() {
     if (this.type === 'xml') {
       // const doc = new DOMParser().parseFromString('<data data-id="default"></data>', 'application/xml');
       const doc = new DOMParser().parseFromString('<data></data>', 'application/xml');
@@ -157,6 +157,31 @@ export class FxInstance extends HTMLElement {
     const url = `${this.src}`;
     const contentType = Fore.getContentType(this, 'get');
 
+    if(url.startsWith('localStore')){
+      const key = url.substring(url.indexOf(':')+1);
+
+      const doc = new DOMParser().parseFromString('<data></data>', 'application/xml');
+      const root = doc.firstElementChild;
+      this.instanceData = doc;
+
+      if(!key){
+        console.warn('no key specified for localStore');
+        return;
+      }
+
+      const serialized = localStorage.getItem(key);
+      if(!serialized){
+        console.warn(`Data for key ${key} cannot be found`);
+        this._useInlineData();
+        return;
+      }
+      const data = new DOMParser().parseFromString(serialized, 'application/xml');
+      // let data = this._parse(serialized, instance);
+      // root.appendChild(data);
+      doc.firstElementChild.replaceWith(data.firstElementChild);
+      return;
+    }
+
     await fetch(url, {
       method: 'GET',
       mode: 'cors',
@@ -168,12 +193,12 @@ export class FxInstance extends HTMLElement {
       .then(response => {
         const { status } = response;
         if (status >= 400) {
-          console.log('response status', status);
+          // console.log('response status', status);
           alert(`response status:  ${status} - failed to load data for '${this.src}' - stopping.`);
           throw new Error(`failed to load data - status: ${status}`);
         }
         const responseContentType = response.headers.get('content-type').toLowerCase();
-        console.log('********** responseContentType *********', responseContentType);
+        // console.log('********** responseContentType *********', responseContentType);
         if (responseContentType.startsWith('text/html')) {
           // const htmlResponse = response.text();
           // return new DOMParser().parseFromString(htmlResponse, 'text/html');
@@ -205,7 +230,7 @@ export class FxInstance extends HTMLElement {
       .then(data => {
         if (data.nodeType) {
           this.instanceData = data;
-          console.log('instanceData loaded: ', this.instanceData);
+          console.log('instanceData loaded: ', this.id, this.instanceData);
           return;
         }
         this.instanceData = data;
@@ -231,12 +256,12 @@ export class FxInstance extends HTMLElement {
       // console.log('innerHTML ', this.innerHTML);
       const instanceData = new DOMParser().parseFromString(this.innerHTML, 'application/xml');
 
-      console.log('fx-instance init id:', this.id);
+      // console.log('fx-instance init id:', this.id);
       this.instanceData = instanceData;
       // console.log('instanceData ', this.instanceData);
       // console.log('instanceData ', this.instanceData.firstElementChild);
 
-      console.log('fx-instance data: ', this.instanceData);
+      // console.log('fx-instance data: ', this.instanceData);
       // this.instanceData.firstElementChild.setAttribute('id', this.id);
       // todo: move innerHTML out to shadowDOM (for later reset)
     } else if (this.type === 'json') {