@jinntec/fore 1.9.0 → 1.10.1

package/src/ui/abstract-control.js

@@ -2,8 +2,8 @@ import '../fx-model.js';
 import { foreElementMixin } from '../ForeElementMixin.js';
 import { ModelItem } from '../modelitem.js';
 import { Fore } from '../fore.js';
-import {XPathUtil} from "../xpath-util";
-import getInScopeContext from "../getInScopeContext";
+import { XPathUtil } from '../xpath-util.js';
+import getInScopeContext from '../getInScopeContext.js';
 import { evaluateXPathToFirstNode} from '../xpath-evaluation.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
@@ -76,7 +57,7 @@ export default class AbstractControl extends foreElementMixin(HTMLElement) {
         const create = this.closest('[create]');
         if(create){
           // ### check if parent element exists
-          let attrName,parentPath, parentNode;
+          let attrName; let parentPath; let parentNode;
 
           if(this.ref.includes('/')){
             parentPath = this.ref.substring(0, this.ref.indexOf('/'));
@@ -92,7 +73,7 @@ export default class AbstractControl extends foreElementMixin(HTMLElement) {
               }
             }
           }else{
-            let inscope = getInScopeContext(this, this.ref);
+            const inscope = getInScopeContext(this, this.ref);
 
             if(this.ref.includes('@')) {
               attrName = this.ref.substring(this.ref.indexOf('@') + 1);
@@ -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});
         }
       }
@@ -206,12 +188,13 @@ export default class AbstractControl extends foreElementMixin(HTMLElement) {
   // eslint-disable-next-line class-methods-use-this
   handleRequired() {
     // console.log('mip required', this.modelItem.required);
-    this.widget = this.getWidget();
+      this.widget = this.getWidget();
+	  const wasRequired = this.isRequired();
 
     if(!this.modelItem.required){
       this.widget.removeAttribute('required');
       this.removeAttribute('required');
-      if (this.isRequired() !== this.modelItem.required){
+      if (wasRequired !== this.modelItem.required){
         this._dispatchEvent('optional');
       }
       return;
@@ -229,7 +212,7 @@ export default class AbstractControl extends foreElementMixin(HTMLElement) {
     }
     this.widget.setAttribute('required', '');
     this.setAttribute('required', '');
-    if (this.isRequired() !== this.modelItem.required) {
+    if (wasRequired !== this.modelItem.required) {
       this._dispatchEvent('required');
     }
 
@@ -336,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';
       }
     }
   }
@@ -359,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() {
@@ -372,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

@@ -2,7 +2,7 @@ import XfAbstractControl from './abstract-control.js';
 import {
     evaluateXPath,
     evaluateXPathToString,
-    evaluateXPathToFirstNode, resolveId,
+    evaluateXPathToFirstNode,
 } from '../xpath-evaluation.js';
 import getInScopeContext from '../getInScopeContext.js';
 import {Fore} from '../fore.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-dialog.js

@@ -39,6 +39,8 @@ export class FxDialog extends HTMLElement {
         this.classList.remove('show');
       });
     }
+    this.setAttribute('role','dialog');
+    this.setAttribute('aria-modal','false');
 
 /*
     this.addEventListener('transitionend', () => {

package/src/ui/fx-group.js

@@ -33,7 +33,10 @@ class FxGroup extends FxContainer {
     super();
     this.collapse = false;
   }
-
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute('role','group');
+  }
   render() {
     return `
       <slot></slot>

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

@@ -98,6 +98,7 @@ export class FxRepeatAttributes extends foreElementMixin(HTMLElement) {
     const refd = this.querySelector('[data-ref]');
     return refd.children;
   }
+
   async connectedCallback() {
     // console.log('connectedCallback',this);
     // this.display = window.getComputedStyle(this, null).getPropertyValue("display");
@@ -134,7 +135,9 @@ export class FxRepeatAttributes extends foreElementMixin(HTMLElement) {
       if (mutations[0].type === 'childList') {
         const added = mutations[0].addedNodes[0];
         if (added) {
-          const path = XPathUtil.getPath(added);
+
+          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

@@ -5,6 +5,7 @@ import { foreElementMixin } from '../ForeElementMixin.js';
 import { evaluateXPath } from '../xpath-evaluation.js';
 import getInScopeContext from '../getInScopeContext.js';
 import { XPathUtil } from '../xpath-util.js';
+import {DependencyNotifyingDomFacade} from '../DependencyNotifyingDomFacade';
 
 /**
  * `fx-repeat`
@@ -131,7 +132,8 @@ export class FxRepeat extends foreElementMixin(HTMLElement) {
       if (mutations[0].type === 'childList') {
         const added = mutations[0].addedNodes[0];
         if (added) {
-          const path = XPathUtil.getPath(added);
+			const instance = XPathUtil.resolveInstance(this, this.ref);
+			const path = XPathUtil.getPath(added, instance);
           // console.log('path mutated', path);
           // this.dispatch('path-mutated',{'path':path,'nodeset':this.nodeset,'index': this.index});
           // this.index = index;
@@ -205,7 +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 );
+*/
     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];
@@ -220,6 +232,14 @@ export class FxRepeat extends foreElementMixin(HTMLElement) {
     if (!this.inited) this.init();
     // 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

@@ -58,7 +58,9 @@ export class FxRepeatitem extends foreElementMixin(HTMLElement) {
     this.shadowRoot.innerHTML = `
             ${html}
         `;
-    this.getOwnerForm().registerLazyElement(this);
+      this.getOwnerForm().registerLazyElement(this);
+
+	  this.ref = `${this.parentNode.ref}`;
   }
 
   disconnectedCallback() {
@@ -89,15 +91,9 @@ export class FxRepeatitem extends foreElementMixin(HTMLElement) {
     }
 
     if (this.modelItem && !this.modelItem.relevant) {
-      // await Fore.fadeOutElement(this)
-      // this.style.display = 'none';
-      this.classList.add('nonrelevant');
+        this.setAttribute('nonrelevant','');
     } else {
-      // if(this.hasAttribute('repeat-index')){
-      //   Fore.fadeInElement(this);
-      // }
-      // this.style.display = this.display;
-      this.classList.remove('nonrelevant');
+		this.setAttribute('relevant','');
     }
 
     /*

package/src/ui/fx-trigger.js

@@ -25,7 +25,9 @@ export class FxTrigger extends XfAbstractControl {
     slot.addEventListener('slotchange', () => {
       const elements = slot.assignedElements({ flatten: true });
       elements[0].setAttribute('tabindex', '0');
-      elements[0].setAttribute('role', 'button');
+      if(elements[0].nodeName !== 'BUTTON'){
+        elements[0].setAttribute('role', 'button');
+      }
 
       const element = elements[0];
 
@@ -114,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')) {