@jinntec/fore 1.10.0 → 1.10.1

package/src/fx-model.js

@@ -104,7 +104,7 @@ export class FxModel extends HTMLElement {
      *
      */
     async modelConstruct() {
-        // console.log('### <<<<< dispatching model-construct >>>>>');
+        console.log('### <<<<< dispatching model-construct >>>>>');
         // this.dispatchEvent(new CustomEvent('model-construct', { detail: this }));
         Fore.dispatch(this, 'model-construct', {model: this});
 
@@ -122,12 +122,12 @@ export class FxModel extends HTMLElement {
             this.instances = Array.from(instances);
             // console.log('_modelConstruct this.instances ', this.instances);
 			// Await until the model-construct-done event is handled off
-
             await Fore.dispatch(this, 'model-construct-done', {model: this});
             this.inited = true;
             this.updateModel();
         } else {
             // ### if there's no instance one will created
+            console.log('### <<<<< dispatching model-construct-done >>>>>');
             await this.dispatchEvent(
                 new CustomEvent('model-construct-done', {
                     composed: false,
@@ -165,6 +165,8 @@ export class FxModel extends HTMLElement {
     }
 
     rebuild() {
+        console.log('### <<<<< rebuild() >>>>>');
+
         this.mainGraph = new DepGraph(false); // do: should be moved down below binds.length check but causes errors in tests.
         this.modelItems = [];
 
@@ -194,10 +196,13 @@ export class FxModel extends HTMLElement {
      * todo: use 'changed' flag on modelItems to determine subgraph for recalculation. Flag already exists but is not used.
      */
     recalculate() {
+
         if (!this.mainGraph) {
             return;
         }
 
+        console.log('### <<<<< recalculate() >>>>>');
+
         // console.log('changed nodes ', this.changed);
         this.computes = 0;
 
@@ -361,14 +366,13 @@ export class FxModel extends HTMLElement {
 
         if (this.modelItems.length === 0) return true;
 
-        console.time('revalidate');
+        console.log('### <<<<< revalidate() >>>>>');
 
         // reset submission validation
         // this.parentNode.classList.remove('submit-validation-failed')
         let valid = true;
         this.modelItems.forEach(modelItem => {
             // console.log('validating node ', modelItem.node);
-
             const {bind} = modelItem;
             if (bind) {
                 /*
@@ -382,7 +386,10 @@ export class FxModel extends HTMLElement {
                         // console.log('modelItem validity computed: ', compute);
                         modelItem.constraint = compute;
                         this.formElement.addToRefresh(modelItem); // let fore know that modelItem needs refresh
-                        if (!compute) valid = false;
+                        if (!compute) {
+                            console.log('validation failed on modelitem ', modelItem);
+                            valid = false;
+                        }
                     }
                 }
                 if (typeof bind.hasAttribute === 'function' && bind.hasAttribute('required')) {
@@ -393,6 +400,7 @@ export class FxModel extends HTMLElement {
                         modelItem.required = compute;
                         this.formElement.addToRefresh(modelItem); // let fore know that modelItem needs refresh
                         if (!modelItem.node.textContent) {
+                            console.log('validation failed on modelitem ', modelItem);
                             valid = false;
                         }
                         // if (!compute) valid = false;
@@ -452,7 +460,12 @@ export class FxModel extends HTMLElement {
         const instArray = Array.from(this.instances);
         const found = instArray.find(inst => inst.id === id);
         if(!found){
-            return this.getDefaultInstance(); // if id is not found always defaults to first in doc order
+            // return this.getDefaultInstance(); // if id is not found always defaults to first in doc order
+            Fore.dispatch(this, 'error', {
+                origin: this,
+                message: `Instance '${id}' does not exist`,
+                level:'Error'
+            });
         }
         return found;
     }

package/src/fx-submission.js

@@ -144,6 +144,7 @@ export class FxSubmission extends foreElementMixin(HTMLElement) {
             const data = this._parse(serialized, instance);
             this._handleResponse(data);
             // this.dispatch('submit-done', {});
+            console.log('### <<<<< submit-done >>>>>');
             Fore.dispatch(this, 'submit-done', {});
             this.parameters.clear();
             return;
@@ -166,6 +167,7 @@ export class FxSubmission extends foreElementMixin(HTMLElement) {
                 if (this.method === 'consume') {
                     localStorage.removeItem(key);
                 }
+                console.log('### <<<<< submit-done >>>>>');
                 Fore.dispatch(this, 'submit-done', {});
             }
             if (this.method === 'post') {
@@ -173,6 +175,7 @@ export class FxSubmission extends foreElementMixin(HTMLElement) {
                 const key = resolvedUrl.substring(resolvedUrl.indexOf(':') + 1);
                 localStorage.setItem(key, serialized);
                 this._handleResponse(instance.instanceData);
+                console.log('### <<<<< submit-done >>>>>');
                 Fore.dispatch(this, 'submit-done', {});
             }
             if (this.method === 'delete') {
@@ -180,6 +183,7 @@ export class FxSubmission extends foreElementMixin(HTMLElement) {
                 localStorage.removeItem(key);
                 const newInst = new DOMParser().parseFromString('<data></data>', 'application/xml');
                 this._handleResponse(newInst);
+                console.log('### <<<<< submit-done >>>>>');
                 Fore.dispatch(this, 'submit-done', {});
             }
 
@@ -228,6 +232,7 @@ export class FxSubmission extends foreElementMixin(HTMLElement) {
             }
 
             // this.dispatch('submit-done', {});
+            console.log(`### <<<<< ${this.id} submit-done >>>>>`);
             Fore.dispatch(this, 'submit-done', {});
         } catch (error) {
             Fore.dispatch(this, 'submit-error', {error: error.message});

package/src/tools/fx-action-log.js

@@ -459,7 +459,7 @@ export class FxActionLog extends HTMLElement {
      */
     _logDetails(e) {
         const eventType = e.type;
-        const path = XPathUtil.getPath(e.target, 'unknown');
+        const path = XPathUtil.getDocPath(e.target);
         // console.log('>>>> _logDetails', path);
         const cut = path.substring(path.indexOf('/fx-fore'), path.length);
         const xpath = `/${cut}`;

package/src/ui/abstract-control.js

@@ -14,7 +14,7 @@ import { evaluateXPathToFirstNode} from '../xpath-evaluation.js';
 export default class AbstractControl extends foreElementMixin(HTMLElement) {
   constructor() {
     super();
-    this.value = '';
+    this.value = null;
     this.display = this.style.display;
     this.required = false;
     this.readonly = false;
@@ -24,27 +24,6 @@ export default class AbstractControl extends foreElementMixin(HTMLElement) {
     // this.attachShadow({ mode: 'open' });
   }
 
-
-  // todo: discuss - this is a hack to circumvent that modelItems in toRefresh diverge from the modelItems in
-  // the model in some situations. This code first looks for refresh
-/*
-  getModelItem() {
-    console.log('toRefreshModelItems', this.getOwnerForm().toRefresh);
-    const s = this.modelItem.path;
-    console.log('toRefreshModelItems path', s);
-
-    const toRefresh = this.getOwnerForm().toRefresh;
-    let mi;
-    if(toRefresh){
-      mi = this.getOwnerForm().toRefresh.find(m => m.path === s);
-    }
-
-    return mi? mi: super.getModelItem();
-    // console.log('toRefreshModelItems realitem', mi);
-
-  }
-*/
-
   // eslint-disable-next-line class-methods-use-this
   getWidget() {
     throw new Error('You have to implement the method getWidget!');
@@ -65,6 +44,8 @@ export default class AbstractControl extends foreElementMixin(HTMLElement) {
     // await this.updateComplete;
     // await this.getWidget();
     this.oldVal = this.nodeset ? this.nodeset : null;
+    // console.log('oldVal',this.oldVal);
+
     this.evalInContext();
 
     // todo this if should be removed - see above
@@ -105,7 +86,8 @@ export default class AbstractControl extends foreElementMixin(HTMLElement) {
         }else{
           // ### this actually makes the control nonrelevant
           // todo: we should call a template function here to allow detachment of event-listeners and resetting eventual state
-          this.style.display = 'none';
+          // this.style.display = 'none';
+          this.setAttribute('nonrelevant','');
         }
         return;
       }
@@ -124,6 +106,7 @@ export default class AbstractControl extends foreElementMixin(HTMLElement) {
         } else {
           this.value = this.modelItem.value;
         }
+        // console.log('newVal',this.value);
 
         // console.log('value of widget',this.value);
 
@@ -160,9 +143,8 @@ export default class AbstractControl extends foreElementMixin(HTMLElement) {
           Fore.dispatch(this,'init',{});
         }
         if (!this.getOwnerForm().ready) return; // state change event do not fire during init phase (initial refresh)
-        if (currentVal !== this.value ) {
-          // todo: discuss how to prevent unnecessary/unwanted value-changes e.g. when repeatitems are inserted
-        // if (currentVal !== this.value && this.visited) {
+        // if oldVal is null we haven't received a concrete value yet
+        if (this.oldVal !== null && currentVal !== this.value) {
           Fore.dispatch(this, 'value-changed', { path: this.modelItem.path , value:this.modelItem.value});
         }
       }
@@ -337,20 +319,25 @@ export default class AbstractControl extends foreElementMixin(HTMLElement) {
   handleRelevant() {
     // console.log('mip valid', this.modelItem.enabled);
     const item = this.modelItem.node;
+    this.removeAttribute('relevant');
+    this.removeAttribute('nonrelevant');
     if (Array.isArray(item) && item.length === 0) {
       this._dispatchEvent('nonrelevant');
-      this.style.display = 'none';
+      this.setAttribute('nonrelevant','');
+      // this.style.display = 'none';
       return;
     }
     if (this.isEnabled() !== this.modelItem.relevant) {
       if (this.modelItem.relevant) {
         this._dispatchEvent('relevant');
         // this._fadeIn(this, this.display);
-        this.style.display = this.display;
+        this.setAttribute('relevant','');
+        // this.style.display = this.display;
       } else {
         this._dispatchEvent('nonrelevant');
         // this._fadeOut(this);
-        this.style.display = 'none';
+        this.setAttribute('nonrelevant','');
+        // this.style.display = 'none';
       }
     }
   }
@@ -360,11 +347,7 @@ export default class AbstractControl extends foreElementMixin(HTMLElement) {
   }
 
   isValid() {
-    // return this.valid;
-    if (this.hasAttribute('invalid')) {
-      return false;
-    }
-    return true;
+    return this.hasAttribute('invalid') ? false : true;
   }
 
   isReadonly() {
@@ -373,11 +356,7 @@ export default class AbstractControl extends foreElementMixin(HTMLElement) {
   }
 
   isEnabled() {
-    // if(this.style.display === 'none' || this.classList.contains('non-relevant')){
-    if (this.style.display === 'none') {
-      return false;
-    }
-    return true;
+    return !this.hasAttribute('nonrelevant');
   }
 
   // eslint-disable-next-line class-methods-use-this

package/src/ui/fx-control.js

@@ -123,12 +123,8 @@ export default class FxControl extends XfAbstractControl {
 
         this.addEventListener('keyup', () => {
             FxModel.dataChanged = true;
-/*
-            if (!this.classList.contains('visited')) {
-                this.classList.add('visited');
-            }
-*/
         });
+
         // ### convenience marker event
         if (this.updateEvent === 'enter') {
             this.widget.addEventListener('keyup', event => {
@@ -494,9 +490,13 @@ export default class FxControl extends XfAbstractControl {
             this.dispatchEvent(new CustomEvent('loaded', {detail: {fore: theFore}}));
         } catch (error) {
             // console.log('error', error);
-            this.getOwnerForm().dispatchEvent(
-                new CustomEvent('error', {detail: {message: `${this.url} not found`}}),
-            );
+            Fore.dispatch(this, 'error', {
+                origin: this,
+                message: `control couldn't be loaded from url '${this.url}'`,
+                expr:xpath,
+                level:'Error'
+            });
+
         }
     }
 
@@ -550,9 +550,6 @@ export default class FxControl extends XfAbstractControl {
             // const nodeset = evaluateXPathToNodes(ref, inscope, this);
             const nodeset = evaluateXPath(ref, inscope, this);
 
-            // ### bail out when nodeset is array and empty
-            if (Array.isArray(nodeset) && nodeset.length === 0) return;
-
             // ### clear items
             const {children} = widget;
             Array.from(children).forEach(child => {
@@ -561,6 +558,9 @@ export default class FxControl extends XfAbstractControl {
                 }
             });
 
+            // ### bail out when nodeset is array and empty
+            if (Array.isArray(nodeset) && nodeset.length === 0) return;
+
             // ### build the items
             const {template} = this;
             if (template) {
@@ -574,7 +574,7 @@ export default class FxControl extends XfAbstractControl {
                     this.widget.insertBefore(option, firstTemplateChild);
                 }
 
-                if (nodeset.length) {
+                if (nodeset.length !== 0) {
                     // console.log('nodeset', nodeset);
                     const fragment = document.createDocumentFragment();
                     // console.time('offscreen');

package/src/ui/fx-repeat-attributes.js

@@ -135,9 +135,9 @@ export class FxRepeatAttributes extends foreElementMixin(HTMLElement) {
       if (mutations[0].type === 'childList') {
         const added = mutations[0].addedNodes[0];
         if (added) {
-          const instance = XPathUtil.resolveInstance(this);
 
-			const path = XPathUtil.getPath(added, instance);
+          const instance = XPathUtil.resolveInstance(this,this.ref);
+          const path = XPathUtil.getPath(added, instance);
           // this.dispatch('path-mutated',{'path':path,'nodeset':this.nodeset,'index': this.index});
           // this.index = index;
           // const prev = mutations[0].previousSibling.previousElementSibling;

package/src/ui/fx-repeat.js

@@ -207,13 +207,17 @@ export class FxRepeat extends foreElementMixin(HTMLElement) {
       });
     }
 
+/*
 	  this.touchedPaths = new Set();
 	  const instance = XPathUtil.resolveInstance(this, this.ref);
 	  const depTrackDomfacade = new DependencyNotifyingDomFacade((node) => {
 		  this.touchedPaths.add(XPathUtil.getPath(node, instance));
 	  });
       const rawNodeset = evaluateXPath(this.ref, inscope, this, {}, {}, depTrackDomfacade );
-	  console.log('Touched!', this.ref, [...this.touchedPaths].join(', '));
+*/
+    const rawNodeset = evaluateXPath(this.ref, inscope, this);
+
+    // console.log('Touched!', this.ref, [...this.touchedPaths].join(', '));
     if (rawNodeset.length === 1 && Array.isArray(rawNodeset[0])) {
       // This XPath likely returned an XPath array. Just collapse to that array
       this.nodeset = rawNodeset[0];
@@ -229,6 +233,13 @@ export class FxRepeat extends foreElementMixin(HTMLElement) {
     // console.time('repeat-refresh', this);
     this._evalNodeset();
 
+    // ### register ourselves as boundControl
+/*
+    const modelItem = this.getModelItem();
+    if (!modelItem.boundControls.includes(this)) {
+      modelItem.boundControls.push(this);
+    }
+*/
     // console.log('repeat refresh nodeset ', this.nodeset);
     // console.log('repeatCount', this.repeatCount);
 

package/src/ui/fx-repeatitem.js

@@ -91,15 +91,9 @@ export class FxRepeatitem extends foreElementMixin(HTMLElement) {
     }
 
     if (this.modelItem && !this.modelItem.relevant) {
-      // await Fore.fadeOutElement(this)
-      // this.style.display = 'none';
-		this.style.display = 'none';
+        this.setAttribute('nonrelevant','');
     } else {
-      // if(this.hasAttribute('repeat-index')){
-      //   Fore.fadeInElement(this);
-      // }
-      // this.style.display = this.display;
-		this.style.display = 'block';
+		this.setAttribute('relevant','');
     }
 
     /*

package/src/ui/fx-trigger.js

@@ -116,19 +116,9 @@ export class FxTrigger extends XfAbstractControl {
     }
   }
 
-  /*
-        async refresh() {
-          super.refresh();
-          // console.log('fx-button refresh');
-
-          const elements = this.querySelectorAll(':scope > *');
-          elements.forEach(element => {
-            if (typeof element.refresh === 'function') {
-              element.refresh();
-            }
-          });
-        }
-      */
+  async refresh() {
+    super.refresh();
+  }
 }
 
 if (!customElements.get('fx-trigger')) {