@jinntec/fore 1.0.0-3 → 1.0.0

package/src/fx-submission.js

@@ -1,4 +1,5 @@
 import { Fore } from './fore.js';
+import { Relevance } from './relevance.js';
 import { foreElementMixin } from './ForeElementMixin.js';
 import { evaluateXPathToString, evaluateXPath } from './xpath-evaluation.js';
 import getInScopeContext from './getInScopeContext.js';
@@ -66,7 +67,7 @@ export class FxSubmission extends foreElementMixin(HTMLElement) {
   }
 
   async submit() {
-    await this.dispatch('submit', { submission: this });
+    await Fore.dispatch(this, 'submit', { submission: this });
     this._submit();
   }
 
@@ -82,7 +83,8 @@ export class FxSubmission extends foreElementMixin(HTMLElement) {
       if (!valid) {
         console.log('validation failed. Bubmission stopped');
         // ### allow alerts to pop up
-        this.dispatch('submit-error', {});
+        // this.dispatch('submit-error', {});
+        Fore.dispatch(this, 'submit-error', {});
         this.getModel().parentNode.refresh();
         return;
       }
@@ -117,24 +119,20 @@ export class FxSubmission extends foreElementMixin(HTMLElement) {
   /**
    * sends the data after evaluating
    *
-   * todo: can send only XML at the moment
    * @private
    */
   async _serializeAndSend() {
     const resolvedUrl = this._evaluateAttributeTemplateExpression(this.url, this);
 
     const instance = this.getInstance();
-    if (instance.type !== 'xml') {
-      console.error('JSON serialization is not supported yet');
-      return;
-    }
+    console.log('instance type', instance.type);
 
-    // let serialized = serializer.serializeToString(this.nodeset);
     let serialized;
     if (this.serialization === 'none') {
       serialized = undefined;
     } else {
-      const relevant = this.selectRelevant();
+      // const relevant = this.selectRelevant(instance.type);
+      const relevant = Relevance.selectRelevant(this, instance.type);
       serialized = this._serialize(instance.type, relevant);
     }
 
@@ -145,17 +143,18 @@ export class FxSubmission extends foreElementMixin(HTMLElement) {
     // console.log('data being send', serialized);
     // console.log('submitting data',serialized);
 
-    if (resolvedUrl === '#echo') {
-      let doc;
-      if (serialized) {
-        doc = new DOMParser().parseFromString(serialized, 'application/xml');
-      } else {
-        doc = undefined;
+    // if (resolvedUrl === '#echo') {
+    if (resolvedUrl.startsWith('#echo')) {
+      let data = null;
+      if (serialized && instance.type === 'xml') {
+        data = new DOMParser().parseFromString(serialized, 'application/xml');
+      }
+      if (serialized && instance.type === 'json') {
+        data = JSON.parse(serialized);
       }
-      // const doc = new DOMParser().parseFromString(serialized, 'application/xml');
-      // const newDoc = doc.replaceChild(relevant, doc.firstElementChild);
-      this._handleResponse(doc);
-      this.dispatch('submit-done', {});
+      this._handleResponse(data);
+      // this.dispatch('submit-done', {});
+      Fore.dispatch(this, 'submit-done', {});
       return;
     }
     // ### setting headers
@@ -168,7 +167,8 @@ export class FxSubmission extends foreElementMixin(HTMLElement) {
     }
 
     if (!this.methods.includes(this.method.toLowerCase())) {
-      this.dispatch('error', { message: `Unknown method ${this.method}` });
+      // this.dispatch('error', { message: `Unknown method ${this.method}` });
+      Fore.dispatch(this, 'error', { message: `Unknown method ${this.method}` });
       return;
     }
     const response = await fetch(resolvedUrl, {
@@ -180,7 +180,8 @@ export class FxSubmission extends foreElementMixin(HTMLElement) {
     });
 
     if (!response.ok || response.status > 400) {
-      this.dispatch('submit-error', { message: `Error while submitting ${this.id}` });
+      // this.dispatch('submit-error', { message: `Error while submitting ${this.id}` });
+      Fore.dispatch(this, 'submit-error', { message: `Error while submitting ${this.id}` });
       return;
     }
 
@@ -204,7 +205,8 @@ export class FxSubmission extends foreElementMixin(HTMLElement) {
       this._handleResponse(blob);
     }
 
-    this.dispatch('submit-done', {});
+    // this.dispatch('submit-done', {});
+    Fore.dispatch(this, 'submit-done', {});
   }
 
   _serialize(instanceType, relevantNodes) {
@@ -221,11 +223,10 @@ export class FxSubmission extends foreElementMixin(HTMLElement) {
       const serializer = new XMLSerializer();
       return serializer.serializeToString(relevantNodes);
     }
-    /*
-            if(instanceType === 'json'){
-                console.warn('JSON serialization is not yet supported')
-            }
-    */
+    if (instanceType === 'json') {
+      // console.warn('JSON serialization is not yet supported')
+      return JSON.stringify(relevantNodes);
+    }
     throw new Error('unknown instance type ', instanceType);
   }
 
@@ -269,13 +270,28 @@ export class FxSubmission extends foreElementMixin(HTMLElement) {
     return targetInstance;
   }
 
+  /**
+   * handles replacement of instance data from response data.
+   *
+   * Please note that data might be
+   * @param data
+   * @private
+   */
   _handleResponse(data) {
     console.log('_handleResponse ', data);
+
+    /*
+    // ### responses need to be handled depending on their type.
+    if(this.type === 'json'){
+
+    }
+*/
+
     if (this.replace === 'instance') {
       const targetInstance = this._getTargetInstance();
       if (targetInstance) {
         if (this.targetref) {
-          const theTarget = evaluateXPath(
+          const [theTarget] = evaluateXPath(
             this.targetref,
             targetInstance.instanceData.firstElementChild,
             this,
@@ -286,7 +302,7 @@ export class FxSubmission extends foreElementMixin(HTMLElement) {
           parent.replaceChild(clone, theTarget);
           console.log('finally ', parent);
         } else if (this.into) {
-          const theTarget = evaluateXPath(
+          const [theTarget] = evaluateXPath(
             this.into,
             targetInstance.instanceData.firstElementChild,
             this,
@@ -296,6 +312,7 @@ export class FxSubmission extends foreElementMixin(HTMLElement) {
         } else {
           const instanceData = data;
           targetInstance.instanceData = instanceData;
+          console.log('### replaced instance ', this.getModel().instances);
           console.log('### replaced instance ', targetInstance.instanceData);
         }
 
@@ -318,26 +335,29 @@ export class FxSubmission extends foreElementMixin(HTMLElement) {
     if (this.replace === 'redirect') {
       window.location.href = data;
     }
-
-    /*
-                const event = new CustomEvent('submit-done', {
-                    composed: true,
-                    bubbles: true,
-                    detail: {},
-                });
-                console.log('firing',event);
-                this.dispatchEvent(event);
-        */
-    // this.dispatch('submit-done', {});
   }
 
   /**
    * select relevant nodes
    *
-   * todo: support for 'empty'
    * @returns {*}
    */
-  selectRelevant() {
+  /*
+  selectRelevant(type) {
+    console.log('selectRelevant' ,type)
+    switch (type){
+      case 'xml':
+        return this._relevantXmlNodes();
+      default:
+        console.warn(`relevance selection not supported for type:${this.type}`);
+        return this.nodeset;
+    }
+  }
+*/
+
+  // todo: support for 'empty'
+  /*
+  _relevantXmlNodes() {
     // ### no relevance selection - current nodeset is used 'as-is'
     if (this.nonrelevant === 'keep') {
       return this.nodeset;
@@ -353,10 +373,11 @@ export class FxSubmission extends foreElementMixin(HTMLElement) {
     if (this.nodeset.children.length === 0 && this._isRelevant(this.nodeset)) {
       return this.nodeset;
     }
-    const result = this._filterRelevant(this.nodeset, root);
-    return result;
+    return this._filterRelevant(this.nodeset, root);
   }
+*/
 
+  /*
   _filterRelevant(node, result) {
     const { childNodes } = node;
     Array.from(childNodes).forEach(n => {
@@ -381,7 +402,9 @@ export class FxSubmission extends foreElementMixin(HTMLElement) {
     });
     return result;
   }
+*/
 
+  /*
   _isRelevant(node) {
     const mi = this.getModel().getModelItem(node);
     if (!mi || mi.relevant) {
@@ -389,9 +412,11 @@ export class FxSubmission extends foreElementMixin(HTMLElement) {
     }
     return false;
   }
+*/
 
   _handleError() {
-    this.dispatch('submit-error', {});
+    // this.dispatch('submit-error', {});
+    Fore.dispatch(this, 'submit-error', {});
     /*
                 console.log('ERRRORRRRR');
                 this.dispatchEvent(
@@ -404,5 +429,6 @@ export class FxSubmission extends foreElementMixin(HTMLElement) {
         */
   }
 }
-
-customElements.define('fx-submission', FxSubmission);
+if (!customElements.get('fx-submission')) {
+  customElements.define('fx-submission', FxSubmission);
+}

package/src/fx-var.js

@@ -1,3 +1,4 @@
+import { Fore } from './fore.js';
 import './fx-instance.js';
 import { evaluateXPath } from './xpath-evaluation.js';
 import { foreElementMixin } from './ForeElementMixin.js';
@@ -24,13 +25,14 @@ export class FxVariable extends foreElementMixin(HTMLElement) {
   refresh() {
     const inscope = getInScopeContext(this, this.valueQuery);
 
-    this.value = evaluateXPath(this.valueQuery, inscope, this, this.precedingVariables);
+    const values = evaluateXPath(this.valueQuery, inscope, this, this.precedingVariables);
+    [this.value] = values;
   }
 
   setInScopeVariables(inScopeVariables) {
     if (inScopeVariables.has(this.name)) {
       console.error(`The variable ${this.name} is declared more than once`);
-      this.dispatch('xforms-binding-error');
+      Fore.dispatch(this, 'xforms-binding-error', {});
       return;
     }
     inScopeVariables.set(this.name, this);
@@ -39,5 +41,6 @@ export class FxVariable extends foreElementMixin(HTMLElement) {
     this.inScopeVariables = new Map(inScopeVariables);
   }
 }
-
-customElements.define('fx-var', FxVariable);
+if (!customElements.get('fx-var')) {
+  customElements.define('fx-var', FxVariable);
+}

package/src/getInScopeContext.js

@@ -1,9 +1,10 @@
 import { evaluateXPathToFirstNode } from './xpath-evaluation.js';
+import { Fore } from './fore.js';
 
 import { XPathUtil } from './xpath-util.js';
 
 function _getElement(node) {
-  if (node.nodeType === Node.ATTRIBUTE_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;
   }
@@ -28,16 +29,28 @@ function _getModelInContext(node) {
 }
 
 function _getInitialContext(node, ref) {
-  const parentBind = node.closest('[ref]');
+  const parentBind = Fore.getClosest('[ref]', node);
+  const localFore = Fore.getClosest('fx-fore', node);
+
+  const model = _getModelInContext(node);
 
   if (parentBind !== null) {
-    return parentBind.nodeset;
+    /*
+    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();
   }
 
-  const model = _getModelInContext(node);
   if (XPathUtil.isAbsolutePath(ref)) {
     const instanceId = XPathUtil.getInstanceId(ref);
-    return model.getInstance(instanceId).getDefaultContext();
+    if (instanceId) {
+      return model.getInstance(instanceId).getDefaultContext();
+    }
+    return model.getDefaultInstance().getDefaultContext();
   }
   if (model.getDefaultInstance() !== null && model.inited) {
     return model.getDefaultInstance().getDefaultContext();
@@ -47,17 +60,30 @@ function _getInitialContext(node, ref) {
 
 export default function getInScopeContext(node, ref) {
   const parentElement = _getElement(node);
-  /*
-  if(parentElement.nodeName.toUpperCase() === 'FX-REPEATITEM'){
-    return parentElement.nodeset;
-  }
-*/
 
-  const repeatItem = parentElement.closest('fx-repeatitem');
+  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

package/src/modelitem.js

@@ -54,11 +54,11 @@ export class ModelItem {
     console.log('modelitem.setvalue newVal', newVal);
 
     if (newVal.nodeType === Node.DOCUMENT_NODE) {
-      // this.node.replaceWith(newVal.firstElementChild);
-      this.node.appendChild(newVal.firstElementChild);
+      this.node.replaceWith(newVal.firstElementChild);
+      // this.node.appendChild(newVal.firstElementChild);
     } else if (newVal.nodeType === Node.ELEMENT_NODE) {
-      // this.node.replaceWith(newVal);
-      this.node.appendChild(newVal);
+      this.node.replaceWith(newVal);
+      // this.node.appendChild(newVal);
     } else if (this.node.nodeType === Node.ATTRIBUTE_NODE) {
       this.node.nodeValue = newVal;
     } else {

package/src/relevance.js

@@ -0,0 +1,65 @@
+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 doc = new DOMParser().parseFromString('<data></data>', 'application/xml');
+    const root = doc.firstElementChild;
+
+    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.value;
+        } 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,25 +126,23 @@ 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.required !== this.modelItem.required) {
     if (this.isRequired() !== this.modelItem.required) {
       if (this.modelItem.required) {
-        this.widget.setAttribute('required', 'required');
-        this.classList.add('required');
+        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');
       }
     }
@@ -132,15 +152,13 @@ export default class AbstractControl extends foreElementMixin(HTMLElement) {
     // 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 +171,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 +203,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 +223,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 +236,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 +276,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);
+}