@jinntec/fore 1.0.0-4 → 1.1.0

package/src/relevance.js

@@ -0,0 +1,64 @@
+export class Relevance {
+  static selectRelevant(element, type) {
+    console.log('selectRelevant', type);
+    switch (type) {
+      case 'xml':
+        return Relevance._relevantXmlNodes(element);
+      default:
+        console.warn(`relevance selection not supported for type:${element.type}`);
+        return element.nodeset;
+    }
+  }
+
+  static _relevantXmlNodes(element) {
+    // ### no relevance selection - current nodeset is used 'as-is'
+    const nonrelevant = element.getAttribute('nonrelevant');
+    if (nonrelevant === 'keep') {
+      return element.nodeset;
+    }
+
+    // first check if nodeset of submission is relevant - otherwise bail out
+    const mi = element.getModel().getModelItem(element.nodeset);
+    if (mi && !mi.relevant) return null;
+
+    const root = element.nodeset.cloneNode(false);
+
+    if (element.nodeset.children.length === 0 && Relevance._isRelevant(element, element.nodeset)) {
+      return element.nodeset;
+    }
+    return Relevance._filterRelevant(element, element.nodeset, root);
+  }
+
+  static _filterRelevant(element, node, result) {
+    const { childNodes } = node;
+    Array.from(childNodes).forEach(n => {
+      if (Relevance._isRelevant(element, n)) {
+        const clone = n.cloneNode(false);
+        result.appendChild(clone);
+        const { attributes } = n;
+        if (attributes) {
+          Array.from(attributes).forEach(attr => {
+            if (Relevance._isRelevant(element, attr)) {
+              clone.setAttribute(attr.nodeName, attr.value);
+            } else if (element.nonrelevant === 'empty') {
+              clone.setAttribute(attr.nodeName, '');
+            } else {
+              clone.removeAttribute(attr.nodeName);
+            }
+          });
+        }
+        return Relevance._filterRelevant(element, n, clone);
+      }
+      return null;
+    });
+    return result;
+  }
+
+  static _isRelevant(element, node) {
+    const mi = element.getModel().getModelItem(node);
+    if (!mi || mi.relevant) {
+      return true;
+    }
+    return false;
+  }
+}

package/src/ui/abstract-control.js

@@ -1,6 +1,7 @@
 import '../fx-model.js';
 import { foreElementMixin } from '../ForeElementMixin.js';
 import { ModelItem } from '../modelitem.js';
+import { Fore } from '../fore.js';
 
 /**
  * `AbstractControl` -
@@ -26,7 +27,7 @@ export default class AbstractControl extends foreElementMixin(HTMLElement) {
   /**
    * (re)apply all modelItem state properties to this control. model -> UI
    */
-  async refresh(force) {
+  async refresh() {
     // console.log('### AbstractControl.refresh on : ', this);
 
     const currentVal = this.value;
@@ -36,6 +37,7 @@ export default class AbstractControl extends foreElementMixin(HTMLElement) {
 
     // await this.updateComplete;
     // await this.getWidget();
+    this.oldVal = this.nodeset ? this.nodeset : null;
     this.evalInContext();
 
     if (this.isBound()) {
@@ -51,12 +53,36 @@ export default class AbstractControl extends foreElementMixin(HTMLElement) {
       if (this.modelItem instanceof ModelItem) {
         // console.log('### XfAbstractControl.refresh modelItem : ', this.modelItem);
 
-        this.value = this.modelItem.value;
+        if (this.hasAttribute('as') && this.getAttribute('as') === 'node') {
+          console.log('as', this.nodeset);
+          this.modelItem.value = this.nodeset;
+          this.value = this.modelItem.node;
+        } else {
+          this.value = this.modelItem.value;
+        }
+
+        // console.log('value of widget',this.value);
+
+        /*
+         * todo: find out on which foreign modelitems we might be dependant on when no binds are used.
+         *
+         * e.g. filter expr on 'ref' 'instance('countries')//country[@continent = instance('default')/continent]'
+         *
+         * the country node is dependant on instance('default')/continent here (foreign node).
+         *
+         * possible approach:
+         * - pipe ref expression through DependencyNotifyingDomFacade to get referred nodes.
+         * - lookup modelItems of referred nodes
+         * - add ourselves to boundControls of foreign modelItem -> this control will then get refreshed when the foreign modelItem is changed.
+         */
+
+        // const touched = FxBind.getReferencesForRef(this.ref,Array.from(this.nodeset));
+        // console.log('touched',touched);
 
         /*
         this is another case that highlights the fact that an init() function might make sense in general.
          */
-        if(!this.modelItem.boundControls.includes(this)){
+        if (!this.modelItem.boundControls.includes(this)) {
           this.modelItem.boundControls.push(this);
         }
 
@@ -68,15 +94,10 @@ export default class AbstractControl extends foreElementMixin(HTMLElement) {
         // if(!this.closest('fx-fore').ready) return; // state change event do not fire during init phase (initial refresh)
         if (!this.getOwnerForm().ready) return; // state change event do not fire during init phase (initial refresh)
         if (currentVal !== this.value) {
-          // console.log('dispatching value-changed for ', this);
-          // console.log('value-changed path ', this.modelItem.path);
-          this.dispatch('value-changed', { path: this.modelItem.path });
+          Fore.dispatch(this, 'value-changed', { path: this.modelItem.path });
         }
-        // this.requestUpdate();
       }
     }
-    // Fore.refreshChildren(this,force);
-    // await this.updateComplete;
   }
 
   /**
@@ -89,13 +110,14 @@ export default class AbstractControl extends foreElementMixin(HTMLElement) {
   }
 
   handleModelItemProperties() {
-    // console.log('form ready', this.getOwnerForm().ready);
+    // console.log('handleModelItemProperties',this.modelItem);
     this.handleRequired();
     this.handleReadonly();
     if (this.getOwnerForm().ready) {
       this.handleValid();
     }
     this.handleRelevant();
+    // todo: handleType()
   }
 
   _getForm() {
@@ -104,43 +126,46 @@ export default class AbstractControl extends foreElementMixin(HTMLElement) {
 
   _dispatchEvent(event) {
     if (this.getOwnerForm().ready) {
-      this.dispatch(event, {});
+      Fore.dispatch(this, event, {});
     }
   }
 
   // eslint-disable-next-line class-methods-use-this
   handleRequired() {
     // console.log('mip required', this.modelItem.required);
-    // const control = this.querySelector('#control');
     this.widget = this.getWidget();
-    if (this.isRequired() !== this.modelItem.required) {
+    // if (this.required !== this.modelItem.required) {
+    // if (this.isRequired() !== this.modelItem.required) {
       if (this.modelItem.required) {
-        this.widget.setAttribute('required', 'required');
-        this.classList.add('required');
+        if (this.getOwnerForm().ready){
+          if(this.widget.value === ''){
+            this.classList.add('isRequiredFalse');
+          }else{
+            this.classList.remove('isRequiredFalse');
+          }
+        }
+        this.widget.setAttribute('required', '');
+        this.setAttribute('required', '');
         this._dispatchEvent('required');
       } else {
         this.widget.removeAttribute('required');
-        this.required = false;
-        // this.removeAttribute('required');
-        this.classList.toggle('required');
+        this.removeAttribute('required');
         this._dispatchEvent('optional');
       }
-    }
+    // }
   }
 
   handleReadonly() {
     // console.log('mip readonly', this.modelItem.isReadonly);
     if (this.isReadonly() !== this.modelItem.readonly) {
       if (this.modelItem.readonly) {
-        this.widget.setAttribute('readonly', 'readonly');
-        // this.setAttribute('readonly','readonly');
-        this.classList.toggle('readonly');
+        this.widget.setAttribute('readonly', '');
+        this.setAttribute('readonly', '');
         this._dispatchEvent('readonly');
       }
       if (!this.modelItem.readonly) {
         this.widget.removeAttribute('readonly');
-        // this.removeAttribute('readonly');
-        this.classList.toggle('readonly');
+        this.removeAttribute('readonly');
         this._dispatchEvent('readwrite');
       }
     }
@@ -153,12 +178,12 @@ export default class AbstractControl extends foreElementMixin(HTMLElement) {
 
     if (this.isValid() !== this.modelItem.constraint) {
       if (this.modelItem.constraint) {
-        this.classList.remove('invalid');
         if (alert) alert.style.display = 'none';
         this._dispatchEvent('valid');
+        this.removeAttribute('invalid');
       } else {
+        this.setAttribute('invalid', '');
         // ### constraint is invalid - handle alerts
-        this.classList.add('invalid');
         if (alert) {
           alert.style.display = 'block';
         }
@@ -185,6 +210,12 @@ export default class AbstractControl extends foreElementMixin(HTMLElement) {
 
   handleRelevant() {
     // console.log('mip valid', this.modelItem.enabled);
+    const item = this.modelItem.node;
+    if (Array.isArray(item) && item.length === 0) {
+      this._dispatchEvent('nonrelevant');
+      this.style.display = 'none';
+      return;
+    }
     if (this.isEnabled() !== this.modelItem.relevant) {
       if (this.modelItem.relevant) {
         this._dispatchEvent('relevant');
@@ -199,14 +230,12 @@ export default class AbstractControl extends foreElementMixin(HTMLElement) {
   }
 
   isRequired() {
-    if (this.widget.hasAttribute('required')) {
-      return true;
-    }
-    return false;
+    return this.hasAttribute('required');
   }
 
   isValid() {
-    if (this.classList.contains('invalid')) {
+    // return this.valid;
+    if (this.hasAttribute('invalid')) {
       return false;
     }
     return true;
@@ -214,10 +243,7 @@ export default class AbstractControl extends foreElementMixin(HTMLElement) {
 
   isReadonly() {
     // const widget = this.querySelector('#widget');
-    if (this.widget.hasAttribute('readonly')) {
-      return true;
-    }
-    return false;
+    return this.hasAttribute('readonly');
   }
 
   isEnabled() {
@@ -257,5 +283,6 @@ export default class AbstractControl extends foreElementMixin(HTMLElement) {
     })();
   }
 }
-
-window.customElements.define('fx-abstract-control', AbstractControl);
+if (!customElements.get('fx-abstract-control')) {
+  window.customElements.define('fx-abstract-control', AbstractControl);
+}

package/src/ui/fx-alert.js

@@ -29,9 +29,15 @@ export class FxAlert extends AbstractControl {
     `;
   }
 
+  getWidget() {
+    return this;
+  }
+
   async updateWidgetValue() {
     console.log('alert update', this);
     this.innerHTML = this.value;
   }
 }
-customElements.define('fx-alert', FxAlert);
+if (!customElements.get('fx-alert')) {
+  customElements.define('fx-alert', FxAlert);
+}

package/src/ui/fx-case.js

@@ -26,7 +26,7 @@ class FxCase extends HTMLElement {
 
     const style = `
             :host {
-                display: none;
+                visibility: none;
             }
         `;
     const html = `
@@ -40,8 +40,9 @@ class FxCase extends HTMLElement {
             ${html}
     `;
 
-    this.style.display = 'none';
   }
 }
 
-window.customElements.define('fx-case', FxCase);
+if (!customElements.get('fx-case')) {
+  window.customElements.define('fx-case', FxCase);
+}

package/src/ui/fx-container.js

@@ -44,6 +44,10 @@ export class FxContainer extends foreElementMixin(HTMLElement) {
     if (this.isBound()) {
       this.evalInContext();
       this.modelItem = this.getModelItem();
+      if (!this.modelItem.boundControls.includes(this)) {
+        this.modelItem.boundControls.push(this);
+      }
+
       // this.value = this.modelItem.value;
     }
 
@@ -107,4 +111,6 @@ export class FxContainer extends foreElementMixin(HTMLElement) {
   }
 }
 
-window.customElements.define('fx-container', FxContainer);
+if (!customElements.get('fx-container')) {
+  window.customElements.define('fx-container', FxContainer);
+}