@jinntec/fore 1.2.0 → 1.4.0

package/src/getInScopeContext.js

@@ -1,106 +1,112 @@
-import { evaluateXPathToFirstNode } from './xpath-evaluation.js';
-import { Fore } from './fore.js';
+import {evaluateXPathToFirstNode} from './xpath-evaluation.js';
+import {Fore} from './fore.js';
 
-import { XPathUtil } from './xpath-util.js';
+import {XPathUtil} from './xpath-util.js';
 
 function _getElement(node) {
-  if (node && node.nodeType && node.nodeType === Node.ATTRIBUTE_NODE) {
-    // The context of an attribute is the ref of the element it's defined on
-    return node.ownerElement;
-  }
-
-  if (node.nodeType === Node.ELEMENT_NODE) {
-    // The context of a query should be the element having a ref
-    return node;
-  }
-
-  // For text nodes, just start looking from the parent element
-  return node.parentNode;
+    if (node && node.nodeType && node.nodeType === Node.ATTRIBUTE_NODE) {
+        // The context of an attribute is the ref of the element it's defined on
+        return node.ownerElement;
+    }
+
+    if (node.nodeType === Node.ELEMENT_NODE) {
+        // The context of a query should be the element having a ref
+        return node;
+    }
+
+    // For text nodes, just start looking from the parent element
+    return node.parentNode;
 }
 
 function _getForeContext(node) {
-  return node.closest('fx-fore');
+    return node.closest('fx-fore');
 }
 
 function _getModelInContext(node) {
-  // const ownerForm = node.closest('fx-fore');
-  const ownerForm = _getForeContext(node);
-  return ownerForm.getModel();
+    // const ownerForm = node.closest('fx-fore');
+    const ownerForm = _getForeContext(node);
+    return ownerForm.getModel();
 }
 
 function _getInitialContext(node, ref) {
-  const parentBind = Fore.getClosest('[ref]', node);
-  const localFore = Fore.getClosest('fx-fore', node);
-
-  const model = _getModelInContext(node);
-
-  if (parentBind !== null) {
-    /*
-    make sure that the closest ref belongs to the same fx-fore element
-    */
-    const parentBindFore = parentBind.closest('fx-fore');
-    if (localFore === parentBindFore) {
-      return parentBind.nodeset;
+    const parentBind = Fore.getClosest('[ref]', node);
+    const localFore = Fore.getClosest('fx-fore', node);
+
+    const model = _getModelInContext(node);
+
+    if (parentBind !== null) {
+        /*
+        make sure that the closest ref belongs to the same fx-fore element
+        */
+        const parentBindFore = parentBind.closest('fx-fore');
+        if (localFore === parentBindFore) {
+            return parentBind.nodeset;
+        }
+        return model.getDefaultInstance().getDefaultContext();
     }
-    return model.getDefaultInstance().getDefaultContext();
-  }
 
-  if (XPathUtil.isAbsolutePath(ref)) {
-    const instanceId = XPathUtil.getInstanceId(ref);
-    if (instanceId) {
-      return model.getInstance(instanceId).getDefaultContext();
+    if (XPathUtil.isAbsolutePath(ref)) {
+        const instanceId = XPathUtil.getInstanceId(ref);
+        if (instanceId) {
+            return model.getInstance(instanceId).getDefaultContext();
+        }
+        return model.getDefaultInstance().getDefaultContext();
     }
+    // should always return default context if all other fails
     return model.getDefaultInstance().getDefaultContext();
-  }
-  if (model.getDefaultInstance() !== null && model.inited) {
-    return model.getDefaultInstance().getDefaultContext();
-  }
-  return [];
 }
 
 export default function getInScopeContext(node, ref) {
-  const parentElement = _getElement(node);
-
-  const repeatItem = Fore.getClosest('fx-repeatitem', parentElement);
-  if (repeatItem) {
-    if (node.nodeName === 'context') {
-      return evaluateXPathToFirstNode(
-        node.nodeValue,
-        repeatItem.nodeset,
-        _getForeContext(parentElement),
-      );
+    const parentElement = _getElement(node);
+
+    if(parentElement.nodeName === 'FX-FORE'){
+        return parentElement.getModel().getDefaultInstance().getDefaultContext();
     }
-    return repeatItem.nodeset;
-  }
-
-  if (parentElement.hasAttribute('context')) {
-    const initialContext = _getInitialContext(parentElement.parentNode, ref);
-    const contextAttr = parentElement.getAttribute('context');
-    return evaluateXPathToFirstNode(contextAttr, initialContext, _getForeContext(parentElement));
-  }
-
-  if (node.nodeType === Node.ATTRIBUTE_NODE && node.nodeName === 'context') {
-    const initialContext = _getInitialContext(node.ownerElement.parentNode, ref);
-    const contextAttr = node.ownerElement.getAttribute('context');
-    return evaluateXPathToFirstNode(contextAttr, initialContext, _getForeContext(parentElement));
-  }
-  if (node.nodeType === Node.ATTRIBUTE_NODE && node.nodeName === 'ref') {
-    // Note: do not consider the ref of the owner element since it should not be used to define the
-    // context
-    if (node.ownerElement.hasAttribute('context')) {
-      const initialContext = _getInitialContext(node.ownerElement.parentNode, ref);
-      const contextAttr = node.ownerElement.getAttribute('context');
-      return evaluateXPathToFirstNode(contextAttr, initialContext, _getForeContext(parentElement));
+    const parentBind = Fore.getClosest('[ref]', parentElement.parentNode);
+    if (parentBind && parentBind.nodeName === 'FX-GROUP') {
+        return parentBind.nodeset;
     }
 
-    // Never resolve the context from a ref itself!
-    return _getInitialContext(parentElement.parentNode, ref);
-  }
+    const repeatItem = Fore.getClosest('fx-repeatitem', parentElement);
+    if (repeatItem) {
+        if (node.nodeName === 'context') {
+            return evaluateXPathToFirstNode(
+                node.nodeValue,
+                repeatItem.nodeset,
+                _getForeContext(parentElement),
+            );
+        }
+        return repeatItem.nodeset;
+    }
+
+    if (parentElement.hasAttribute('context')) {
+        const initialContext = _getInitialContext(parentElement.parentNode, ref);
+        const contextAttr = parentElement.getAttribute('context');
+        return evaluateXPathToFirstNode(contextAttr, initialContext, _getForeContext(parentElement));
+    }
+
+    if (node.nodeType === Node.ATTRIBUTE_NODE && node.nodeName === 'context') {
+        const initialContext = _getInitialContext(node.ownerElement.parentNode, ref);
+        const contextAttr = node.ownerElement.getAttribute('context');
+        return evaluateXPathToFirstNode(contextAttr, initialContext, _getForeContext(parentElement));
+    }
+    if (node.nodeType === Node.ATTRIBUTE_NODE && node.nodeName === 'ref') {
+        // Note: do not consider the ref of the owner element since it should not be used to define the
+        // context
+        if (node.ownerElement.hasAttribute('context')) {
+            const initialContext = _getInitialContext(node.ownerElement.parentNode, ref);
+            const contextAttr = node.ownerElement.getAttribute('context');
+            return evaluateXPathToFirstNode(contextAttr, initialContext, _getForeContext(parentElement));
+        }
+
+        // Never resolve the context from a ref itself!
+        return _getInitialContext(parentElement.parentNode, ref);
+    }
 
-  // if (node.nodeType === Node.ELEMENT_NODE && node.hasAttribute('context')) {
-  //   const initialContext = _getInitialContext(node.parentNode, ref);
-  //   const contextAttr = node.getAttribute('context');
-  //   return evaluateXPathToFirstNode(contextAttr, initialContext, _getForeContext(parentElement));
-  // }
-  return _getInitialContext(parentElement, ref);
+    // if (node.nodeType === Node.ELEMENT_NODE && node.hasAttribute('context')) {
+    //   const initialContext = _getInitialContext(node.parentNode, ref);
+    //   const contextAttr = node.getAttribute('context');
+    //   return evaluateXPathToFirstNode(contextAttr, initialContext, _getForeContext(parentElement));
+    // }
+    return _getInitialContext(parentElement, ref);
 }

package/src/modelitem.js

@@ -50,8 +50,8 @@ export class ModelItem {
   }
 
   set value(newVal) {
-    console.log('modelitem.setvalue oldVal', this.value);
-    console.log('modelitem.setvalue newVal', newVal);
+    // console.log('modelitem.setvalue oldVal', this.value);
+    // console.log('modelitem.setvalue newVal', newVal);
 
     if (newVal.nodeType === Node.DOCUMENT_NODE) {
       this.node.replaceWith(newVal.firstElementChild);
@@ -67,7 +67,9 @@ export class ModelItem {
   }
 
   addAlert(alert) {
-    this.alerts.push(alert);
+    if(!this.alerts.includes(alert)){
+      this.alerts.push(alert);
+    }
   }
 
   cleanAlerts() {

package/src/relevance.js

@@ -1,6 +1,6 @@
 export class Relevance {
   static selectRelevant(element, type) {
-    console.log('selectRelevant', type);
+    // console.log('selectRelevant', type);
     switch (type) {
       case 'xml':
         return Relevance._relevantXmlNodes(element);

package/src/ui/abstract-control.js

@@ -16,9 +16,32 @@ export default class AbstractControl extends foreElementMixin(HTMLElement) {
     this.required = false;
     this.readonly = false;
     this.widget = null;
+    this.visited = false;
+    this.force = false;
     // 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!');
@@ -27,7 +50,8 @@ export default class AbstractControl extends foreElementMixin(HTMLElement) {
   /**
    * (re)apply all modelItem state properties to this control. model -> UI
    */
-  async refresh() {
+  async refresh(force) {
+    if(force) this.force=true;
     // console.log('### AbstractControl.refresh on : ', this);
 
     const currentVal = this.value;
@@ -40,6 +64,7 @@ export default class AbstractControl extends foreElementMixin(HTMLElement) {
     this.oldVal = this.nodeset ? this.nodeset : null;
     this.evalInContext();
 
+    // todo this if should be removed - see above
     if (this.isBound()) {
       // this.control = this.querySelector('#control');
 
@@ -49,6 +74,7 @@ export default class AbstractControl extends foreElementMixin(HTMLElement) {
       }
 
       this.modelItem = this.getModelItem();
+      // console.log('refresh modelItem', this.modelItem);
 
       if (this.modelItem instanceof ModelItem) {
         // console.log('### XfAbstractControl.refresh modelItem : ', this.modelItem);
@@ -94,13 +120,19 @@ 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) {
-          Fore.dispatch(this, 'value-changed', { path: this.modelItem.path });
+        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) {
+          Fore.dispatch(this, 'value-changed', { path: this.modelItem.path , value:this.modelItem.value});
         }
       }
     }
   }
 
+  refreshFromModelItem(modelItem){
+
+  }
+
   /**
    *
    * @returns {Promise<void>}
@@ -135,24 +167,71 @@ export default class AbstractControl extends foreElementMixin(HTMLElement) {
   handleRequired() {
     // console.log('mip required', this.modelItem.required);
     this.widget = this.getWidget();
-    // if (this.required !== this.modelItem.required) {
+
+    if(!this.modelItem.required){
+      this.widget.removeAttribute('required');
+      this.removeAttribute('required');
+      if (this.isRequired() !== this.modelItem.required){
+        this._dispatchEvent('optional');
+      }
+      return;
+    }
+
+    // ### modelItem is required
+    if (this.visited || this.force) {
+      if (this.modelItem.value === '') {
+        this.classList.add('isEmpty');
+        this._toggleValid(false);
+      } else {
+        this.classList.remove('isEmpty');
+        this._toggleValid(true);
+      }
+    }
+    this.widget.setAttribute('required', '');
+    this.setAttribute('required', '');
     if (this.isRequired() !== this.modelItem.required) {
-      if (this.modelItem.required) {
-        if (this.getOwnerForm().ready){
-          if(this.widget.value === ''){
-            this.classList.add('isRequiredFalse');
-          }else{
-            this.classList.remove('isRequiredFalse');
-          }
+      this._dispatchEvent('required');
+    }
+
+/*
+    if (this.isRequired() !== this.modelItem.required) {
+      this._updateRequired();
+    }
+*/
+  }
+
+
+  _updateRequired() {
+    if (this.modelItem.required) {
+      // if (this.getOwnerForm().ready){
+      if (this.visited || this.force) {
+      // if (this.visited ) {
+      //   if (this.widget.value === '') {
+        if (this.modelItem.value === '') {
+          this.classList.add('isEmpty');
+          this._toggleValid(false);
+        } else {
+          this.classList.remove('isEmpty');
+          this._toggleValid(true);
         }
-        this.widget.setAttribute('required', '');
-        this.setAttribute('required', '');
-        this._dispatchEvent('required');
-      } else {
-        this.widget.removeAttribute('required');
-        this.removeAttribute('required');
-        this._dispatchEvent('optional');
       }
+      this.widget.setAttribute('required', '');
+      this.setAttribute('required', '');
+      this._dispatchEvent('required');
+    } else {
+      this.widget.removeAttribute('required');
+      this.removeAttribute('required');
+      this._dispatchEvent('optional');
+    }
+  }
+
+  _toggleValid(valid){
+    if(valid){
+      this.removeAttribute('invalid');
+      this.setAttribute('valid','');
+    }else{
+      this.removeAttribute('valid');
+      this.setAttribute('invalid','');
     }
   }
 
@@ -177,28 +256,35 @@ export default class AbstractControl extends foreElementMixin(HTMLElement) {
     // console.log('mip valid', this.modelItem.required);
     const alert = this.querySelector('fx-alert');
 
+    const mi = this.getModelItem();
+    // console.log('late modelItem', mi);
     if (this.isValid() !== this.modelItem.constraint) {
       if (this.modelItem.constraint) {
-        if (alert) alert.style.display = 'none';
+        // if (alert) alert.style.display = 'none';
         this._dispatchEvent('valid');
+        this.setAttribute('valid','');
         this.removeAttribute('invalid');
       } else {
         this.setAttribute('invalid', '');
+        this.removeAttribute('valid');
         // ### constraint is invalid - handle alerts
+/*
         if (alert) {
           alert.style.display = 'block';
         }
+*/
         if (this.modelItem.alerts.length !== 0) {
-          const { alerts } = this.modelItem;
-          // console.log('alerts from bind: ', alerts);
 
           const controlAlert = this.querySelector('fx-alert');
           if (!controlAlert) {
+            const { alerts } = this.modelItem;
+            // console.log('alerts from bind: ', alerts);
             alerts.forEach(modelAlert => {
               const newAlert = document.createElement('fx-alert');
+              // const newAlert = document.createElement('span');
               newAlert.innerHTML = modelAlert;
               this.appendChild(newAlert);
-              newAlert.style.display = 'block';
+              // newAlert.style.display = 'block';
             });
           }
         }

package/src/ui/fx-alert.js

@@ -13,7 +13,6 @@ export class FxAlert extends AbstractControl {
         font-size: 0.8em;
         font-weight: 400;
         color: red;
-        display: none;
       }
     `;
 

package/src/ui/fx-container.js

@@ -37,7 +37,7 @@ export class FxContainer extends foreElementMixin(HTMLElement) {
   /**
    * (re)apply all state properties to this control.
    */
-  refresh(force) {
+  async refresh(force) {
     if (!force && this.hasAttribute('refresh-on-view')) return;
     // console.log('### FxContainer.refresh on : ', this);
 
@@ -47,21 +47,20 @@ export class FxContainer extends foreElementMixin(HTMLElement) {
       if (this.modelItem && !this.modelItem.boundControls.includes(this)) {
         this.modelItem.boundControls.push(this);
       }
-
-      // this.value = this.modelItem.value;
+      this.handleModelItemProperties();
     }
 
-    // await this.updateComplete;
-
     // state change event do not fire during init phase (initial refresh)
-    if (this._getForm().ready) {
-      this.handleModelItemProperties();
-    }
-    Fore.refreshChildren(this, force);
+    // if (this._getForm().ready) {
+    //   this.handleModelItemProperties();
+    // }
+    // Fore.refreshChildren(this, force);
   }
 
+  /**
+   * anly relevance is processed for container controls
+   */
   handleModelItemProperties() {
-    this.handleReadonly();
     this.handleRelevant();
   }
 
@@ -69,28 +68,25 @@ export class FxContainer extends foreElementMixin(HTMLElement) {
     return this.getModel().parentNode;
   }
 
-  handleReadonly() {
-    // console.log('mip readonly', this.modelItem.isReadonly);
-    if (this.isReadonly() !== this.modelItem.readonly) {
-      if (this.modelItem.readonly) {
-        this.setAttribute('readonly', 'readonly');
-        this.dispatchEvent(new CustomEvent('readonly', {}));
-      }
-      if (!this.modelItem.readonly) {
-        this.removeAttribute('readonly');
-        this.dispatchEvent(new CustomEvent('readwrite', {}));
-      }
-    }
-  }
-
   handleRelevant() {
     // console.log('mip valid', this.modelItem.enabled);
-    if (!this.modelItem) return;
+    if (!this.modelItem) {
+      console.log('container is not relevant');
+      this.removeAttribute('relevant','');
+      this.setAttribute('nonrelevant','');
+      this.dispatchEvent(new CustomEvent('disabled', {}));
+      return;
+    }
 
     if (this.isEnabled() !== this.modelItem.enabled) {
-      if (this.modelItem.enabled) {
+      if (this.modelItem.relevant) {
+        // this.style.display = 'block';
+        this.removeAttribute('nonrelevant','');
+        this.setAttribute('relevant','');
         this.dispatchEvent(new CustomEvent('enabled', {}));
       } else {
+        this.removeAttribute('relevant','');
+        this.setAttribute('nonrelevant','');
         this.dispatchEvent(new CustomEvent('disabled', {}));
       }
     }