@jinntec/fore 1.8.0 → 1.10.0

package/src/fx-fore.js

@@ -29,6 +29,12 @@ export class FxFore extends HTMLElement {
 
     static get properties() {
         return {
+            /**
+             * ignore certain nodes for template expression search
+             */
+            ignoreExpressions:{
+                type: String
+            },
             /**
              * merge-partial
              */
@@ -173,8 +179,8 @@ export class FxFore extends HTMLElement {
 
            <jinn-toast id="message" gravity="bottom" position="left"></jinn-toast>
            <jinn-toast id="sticky" gravity="bottom" position="left" duration="-1" close="true" data-class="sticky-message"></jinn-toast>
-           <jinn-toast id="error" text="error" duration="-1" data-class="error" close="true" position="left" gravity="bottom" escape-markup="false"></jinn-toast>
-           <jinn-toast id="warn" text="warning" duration="-1" data-class="warning" close="true" position="right" gravity="bottom"></jinn-toast>
+           <jinn-toast id="error" text="error" duration="-1" data-class="error" close="true" position="right" gravity="top" escape-markup="false"></jinn-toast>
+           <jinn-toast id="warn" text="warning" duration="5000" data-class="warning" position="left" gravity="top"></jinn-toast>
            <slot id="default"></slot>
            <slot name="messages"></slot>
            <div id="modalMessage" class="overlay">
@@ -225,6 +231,7 @@ export class FxFore extends HTMLElement {
           // e.stopImmediatePropagation();
         },true);
     */
+        this.ignoreExpressions = this.hasAttribute('ignore-expressions') ? this.getAttribute('ignore-expressions'): null;
 
         this.lazyRefresh = this.hasAttribute('refresh-on-view');
         if (this.lazyRefresh) {
@@ -254,6 +261,10 @@ export class FxFore extends HTMLElement {
                 return;
             }
 
+            if(this.ignoreExpressions){
+                this.ignoredNodes = Array.from(this.querySelectorAll(this.ignoreExpressions));
+            }
+
             const children = event.target.assignedElements();
             let modelElement = children.find(
                 modelElem => modelElem.nodeName.toUpperCase() === 'FX-MODEL',
@@ -284,6 +295,7 @@ export class FxFore extends HTMLElement {
         this.addEventListener('path-mutated', () => {
             this.someInstanceDataStructureChanged = true;
         });
+
     }
 
     _injectDevtools(){
@@ -438,7 +450,42 @@ export class FxFore extends HTMLElement {
         // console.timeEnd('refresh');
     }
 
-    async refresh(force) {
+    async refresh(force, changedPaths) {
+		if (!changedPaths) {
+			changedPaths = this.toRefresh.map(item => item.path);
+		} else {
+			this.toRefresh.push(
+				...changedPaths
+					.map(
+						path =>
+						this.getModel()
+							.modelItems
+							.find(item => item.path === path)
+					)
+					.filter(Boolean)
+			);
+
+			for(const changedPath of changedPaths) {
+				for (const repeat of this.querySelectorAll('fx-repeat')) {
+					if (repeat.closest('fx-fore') !== this) {
+						continue;
+					}
+
+					if (repeat.touchedPaths.has(changedPath)) {
+						// Make a temporary model-item-like structure for this
+						this.toRefresh.push({
+							path: changedPath,
+							boundControls: [repeat]
+						});
+
+						console.log('Found a repeat to update!!!', repeat)
+					}
+				}
+			}
+		}
+		if (this.isRefreshing) {
+			return;
+		}
         // refresh () {
         // ### refresh Fore UI elements
         // if (!this.initialRun && this.toRefresh.length !== 0) {
@@ -457,7 +504,7 @@ export class FxFore extends HTMLElement {
                 }
 
                 // ### check if other controls depend on current modelItem
-                const {mainGraph} = this.getModel();
+                const { mainGraph } = this.getModel();
                 if (mainGraph && mainGraph.hasNode(modelItem.path)) {
                     const deps = this.getModel().mainGraph.dependentsOf(modelItem.path, false);
                     // ### iterate dependant modelItems and refresh all their boundControls
@@ -490,7 +537,9 @@ export class FxFore extends HTMLElement {
             });
 */
 
-            Fore.refreshChildren(this, true);
+            if(this.inited){
+                Fore.refreshChildren(this, true);
+            }
             // console.timeEnd('refreshChildren');
         }
 
@@ -506,6 +555,13 @@ export class FxFore extends HTMLElement {
         // this.initialRun = false;
         this.style.visibility='visible';
         Fore.dispatch(this, 'refresh-done', {});
+
+		this.isRefreshing = true;
+		this.parentNode.closest('fx-fore')?.refresh(false, changedPaths);
+		for (const subFore of this.querySelectorAll('fx-fore')) {
+			subFore.refresh(false, changedPaths);
+		}
+		this.isRefreshing = false;
     }
 
     /**
@@ -547,7 +603,9 @@ export class FxFore extends HTMLElement {
             const expr = this._getTemplateExpression(node);
 
             // console.log('storedTemplateExpressionByNode', this.storedTemplateExpressionByNode);
-            this.storedTemplateExpressionByNode.set(node, expr);
+            if(expr){
+                this.storedTemplateExpressionByNode.set(node, expr);
+            }
         });
         // console.log('stored template expressions ', this.storedTemplateExpressionByNode);
 
@@ -629,6 +687,13 @@ export class FxFore extends HTMLElement {
 
     // eslint-disable-next-line class-methods-use-this
     _getTemplateExpression(node) {
+        if(this.ignoredNodes){
+            if(node.nodeType === Node.ATTRIBUTE_NODE){
+                node = node.ownerElement;
+            }
+            const found = this.ignoredNodes.find( (n) => n.contains(node));
+            if(found) return null;
+        }
         if (node.nodeType === Node.ATTRIBUTE_NODE) {
             return node.value;
         }
@@ -685,6 +750,18 @@ export class FxFore extends HTMLElement {
      */
     async _lazyCreateInstance() {
         const model = this.querySelector('fx-model');
+        // Inherit shared models from the parent component
+
+        const parentFore = this.parentNode.closest('fx-fore');
+		if (parentFore) {
+			const sharedInstances = Array.from(parentFore.getModel().querySelectorAll('fx-instance')).filter(instance => instance.hasAttribute('shared'));
+				for(const instance of sharedInstances) {
+					this.getModel().instances.push(instance);
+				}
+			this.getModel().updateModel();
+		}
+
+
         if (model.instances.length === 0) {
             // console.log('### lazy creation of instance');
             const generatedInstance = document.createElement('fx-instance');
@@ -696,7 +773,7 @@ export class FxFore extends HTMLElement {
             generatedInstance.instanceData = generated;
             model.instances.push(generatedInstance);
             // console.log('generatedInstance ', this.getModel().getDefaultInstanceData());
-            Fore.dispatch(this,'instance-loaded',{instance:this})
+            Fore.dispatch(this,'instance-loaded',{instance:this});
         }
     }
 
@@ -920,9 +997,9 @@ export class FxFore extends HTMLElement {
             this.shadowRoot.getElementById('messageContent').innerText = msg;
             // this.shadowRoot.getElementById('modalMessage').open();
             this.shadowRoot.getElementById('modalMessage').classList.add('show');
-        } else if (level === 'sticky') {
+        } else if (level === 'sticky' || level === 'error' || level === 'warn') {
             // const notification = this.$.modeless;
-            this.shadowRoot.querySelector('#sticky').showToast(msg);
+            this.shadowRoot.querySelector(`#${level}`).showToast(msg);
         } else {
             const toast = this.shadowRoot.querySelector('#message');
             toast.showToast(msg);

package/src/fx-instance.js

@@ -52,6 +52,7 @@ export class FxInstance extends HTMLElement {
     this.attachShadow({ mode: 'open' });
     this.originalInstance = null;
     this.partialInstance = null;
+    this.credentials = '';
   }
 
   connectedCallback() {
@@ -66,6 +67,13 @@ export class FxInstance extends HTMLElement {
       this.id = 'default';
     }
 
+    this.credentials = this.hasAttribute('credentials')
+        ? this.getAttribute('credentials')
+        : 'same-origin';
+    if (!['same-origin', 'include', 'omit'].includes(this.credentials)) {
+      console.error(`fx-submission: the value of credentials is not valid. Expected 'same-origin', 'include' or 'omit' but got '${this.credentials}'`, this);
+    }
+
     if (this.hasAttribute('type')) {
       this.type = this.getAttribute('type');
     } else {
@@ -243,10 +251,8 @@ export class FxInstance extends HTMLElement {
     try {
       const response = await fetch(url, {
         method: 'GET',
-/*
+        credentials: this.credentials,
         mode: 'cors',
-        credentials: 'include',
-*/
         headers: {
           'Content-Type': contentType,
         },

package/src/fx-model.js

@@ -67,7 +67,9 @@ export class FxModel extends HTMLElement {
         // const path = fx.evaluateXPath('path()',node);
         let path;
         if (node.nodeType) {
-            path = XPathUtil.getPath(node);
+			const instance = XPathUtil.resolveInstance(model, ref);
+
+            path = XPathUtil.getPath(node, instance);
         } else {
             path = null;
             targetNode = node;

package/src/fx-submission.js

@@ -12,6 +12,7 @@ export class FxSubmission extends foreElementMixin(HTMLElement) {
     constructor() {
         super();
         this.attachShadow({mode: 'open'});
+        this.credentials = '';
         this.parameters = new Map();
     }
 
@@ -56,6 +57,12 @@ export class FxSubmission extends foreElementMixin(HTMLElement) {
             : 'application/xml';
 
         this.validate = this.getAttribute('validate') ? this.getAttribute('validate') : 'true';
+        this.credentials = this.hasAttribute('credentials')
+            ? this.getAttribute('credentials')
+            : 'same-origin';
+		if (!['same-origin', 'include', 'omit'].includes(this.credentials)) {
+			console.error(`fx-submission: the value of credentials is not valid. Expected 'same-origin', 'include' or 'omit' but got '${this.credentials}'`, this);
+		}
         this.shadowRoot.innerHTML = this.renderHTML();
     }
 
@@ -96,9 +103,8 @@ export class FxSubmission extends foreElementMixin(HTMLElement) {
     _getProperty(attrName){
         if(this.parameters.has(attrName)){
             return this.parameters.get(attrName);
-        } else {
-            return this.getAttribute(attrName);
         }
+        return this.getAttribute(attrName);
     }
 
     /**
@@ -191,10 +197,8 @@ export class FxSubmission extends foreElementMixin(HTMLElement) {
         try {
             const response = await fetch(resolvedUrl, {
                 method: this.method,
-                /*
-                                mode: 'cors',
-                                credentials: 'include',
-                */
+                credentials: this.credentials,
+                mode:'cors',
                 headers,
                 body: serialized,
             });
@@ -207,9 +211,7 @@ export class FxSubmission extends foreElementMixin(HTMLElement) {
 
             const contentType = response.headers.get('content-type').toLowerCase();
             if (
-                contentType.startsWith('text/plain') ||
-                contentType.startsWith('text/html') ||
-                contentType.startsWith('text/markdown')
+                contentType.startsWith('text/')
             ) {
                 const text = await response.text();
                 this._handleResponse(text, resolvedUrl,contentType);
@@ -231,6 +233,10 @@ export class FxSubmission extends foreElementMixin(HTMLElement) {
             Fore.dispatch(this, 'submit-error', {error: error.message});
         } finally {
             this.parameters.clear();
+            const download = document.querySelector('[download]');
+            if(download){
+                document.body.removeChild(download);
+            }
         }
     }
 
@@ -333,26 +339,20 @@ export class FxSubmission extends foreElementMixin(HTMLElement) {
 
 /*
         if(this.replace === 'merge'){
+            if(targetInstance.type !== 'xml') {
+                Fore.dispatch(this, "warn", {'message': 'merging of instances only work for type xml'});
+            }
             if (targetInstance && targetInstance.type === 'xml') {
                 targetInstance.partialInstance = data;
-
-                const merged = this._mergeXML(targetInstance.instanceData,targetInstance.partialInstance);
+                // const resultDoc = new DOMParser(`${data.nodeName}`, 'application/xml');
+                // console.log('resultDoc', resultDoc)
+                const merged = Fore.combine(targetInstance.instanceData.firstElementChild, data.firstElementChild, this,null);
                 console.log('merged', merged);
 
                 targetInstance.instanceData = merged;
                 console.log('merging partial instance',targetInstance.partialInstance)
-                /!*
-                targetInstance.instanceData not touched here as we want to keep the default instance unmodified as the full template for the UI.
-                *!/
-
-                // Skip any refreshes if the model is not yet inited#
-                // duplicate from replace='instance'
-                // if (this.model.inited) {
-                    this.model.updateModel(); // force update
-                const owner = this.getOwnerForm();
-                // owner.mergePartial = true;
-                owner.refresh(true);
-                // }
+                this.model.updateModel();
+                this.getOwnerForm().refresh(true);
             }
         }
 */
@@ -399,11 +399,19 @@ export class FxSubmission extends foreElementMixin(HTMLElement) {
             }
         }
 
+        if (this.replace === 'download') {
+            const target = this._getProperty('target');
+            const downloadLink = document.createElement('a');
+            downloadLink.setAttribute('download',target);
+            downloadLink.setAttribute('href',`data:${contentType},${data}`);
+            document.body.appendChild(downloadLink);
+            downloadLink.click();
+        }
         if (this.replace === 'all') {
             const target = this._getProperty('target');
             if(target && target === '_blank'){
                 const win = window.open("", "_blank");
-                win.document.write(data);
+                win.document.write(`<pre>${data}</pre>`);
                 win.document.close();
             }else{
                 document.open();
@@ -428,51 +436,22 @@ export class FxSubmission extends foreElementMixin(HTMLElement) {
         }
     }
 
-
-/*
-    _mergeXML(xml1, xml2) {
-        const parser = new DOMParser();
-        const serializer = new XMLSerializer();
-
-        // const doc1 = parser.parseFromString(xml1, 'text/xml');
-        // const doc2 = parser.parseFromString(xml2, 'text/xml');
-
-        this.mergeNodes(xml1.documentElement, xml2.documentElement);
-
-        // return serializer.serializeToString(xml1);
-        return xml1;
-    }
-*/
-
-/*
-    _mergeNodes(node1, node2) {
-        const childNodes1 = node1.childNodes;
-        const childNodes2 = node2.childNodes;
-
-        for (let i = 0; i < childNodes2.length; i++) {
-            const child2 = childNodes2[i];
-            let nodeMerged = false;
-
-            if (child2.nodeType === 1) { // Element Node
-                for (let j = 0; j < childNodes1.length; j++) {
-                    const child1 = childNodes1[j];
-                    if (child1.nodeType === 1 && child1.tagName === child2.tagName) {
-                        this._mergeNodes(child1, child2);
-                        nodeMerged = true;
-                        break;
-                    }
-                }
-            }
-
-            if (!nodeMerged) {
-                const clonedNode = child2.cloneNode(true);
-                node1.appendChild(clonedNode);
-            }
-        }
+    _handleError() {
+        // this.dispatch('submit-error', {});
+        Fore.dispatch(this, 'submit-error', {});
+        /*
+                    console.log('ERRRORRRRR');
+                    this.dispatchEvent(
+                        new CustomEvent('submit-error', {
+                            composed: true,
+                            bubbles: true,
+                            detail: {},
+                        }),
+                    );
+            */
     }
-*/
 
-/*
+    /*
     mergeNodes(node1, node2) {
         // Overwrite attributes in node1 with values from node2
         for (const { name, value } of node2.attributes) {
@@ -503,97 +482,7 @@ export class FxSubmission extends foreElementMixin(HTMLElement) {
         });
     }
 */
-    /**
-     * select relevant nodes
-     *
-     * @returns {*}
-     */
-    /*
-    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;
-      }
-
-      // first check if nodeset of submission is relevant - otherwise bail out
-      const mi = this.getModel().getModelItem(this.nodeset);
-      if (mi && !mi.relevant) return null;
-
-      const doc = new DOMParser().parseFromString('<data></data>', 'application/xml');
-      const root = doc.firstElementChild;
-
-      if (this.nodeset.children.length === 0 && this._isRelevant(this.nodeset)) {
-        return this.nodeset;
-      }
-      return this._filterRelevant(this.nodeset, root);
-    }
-  */
-
-    /*
-    _filterRelevant(node, result) {
-      const { childNodes } = node;
-      Array.from(childNodes).forEach(n => {
-        if (this._isRelevant(n)) {
-          const clone = n.cloneNode(false);
-          result.appendChild(clone);
-          const { attributes } = n;
-          if (attributes) {
-            Array.from(attributes).forEach(attr => {
-              if (this._isRelevant(attr)) {
-                clone.setAttribute(attr.nodeName, attr.value);
-              } else if (this.nonrelevant === 'empty') {
-                clone.setAttribute(attr.nodeName, '');
-              } else {
-                clone.removeAttribute(attr.nodeName);
-              }
-            });
-          }
-          return this._filterRelevant(n, clone);
-        }
-        return null;
-      });
-      return result;
-    }
-  */
 
-    /*
-    _isRelevant(node) {
-      const mi = this.getModel().getModelItem(node);
-      if (!mi || mi.relevant) {
-        return true;
-      }
-      return false;
-    }
-  */
-
-    _handleError() {
-        // this.dispatch('submit-error', {});
-        Fore.dispatch(this, 'submit-error', {});
-        /*
-                    console.log('ERRRORRRRR');
-                    this.dispatchEvent(
-                        new CustomEvent('submit-error', {
-                            composed: true,
-                            bubbles: true,
-                            detail: {},
-                        }),
-                    );
-            */
-    }
 }
 
 if (!customElements.get('fx-submission')) {

package/src/tools/adi.js

@@ -11,8 +11,10 @@ import {
 
 import {Fore} from '../fore.js';
 
-function isAttributeShown(name) {
-    return name === 'id' || name === 'ref' || name === 'event';
+function isAttributeShown(name, sourceNode) {
+    if(name === 'style') return false;
+    return true;
+    // return name === 'id' || name === 'ref' || name === 'event';
 }
 
 class ADI {
@@ -187,10 +189,16 @@ class ADI {
                 if (sourceNode.nodeType !== Node.DOCUMENT_NODE) {
                     // tagStart.textContent = '<' + node.nodeName.toLowerCase() + '>';
 
+/*
+                    let attrString = `<${sourceNode.nodeName.toLowerCase()} `;
+                    if(sourceNode.attributes){
+                        Array.from(sourceNode.attributes).forEach(attr => {
+                            attrString += `${attr.nodeName}="${attr.nodeValue}" `;
+                        });
+                        console.log('ATTRSTRING',attrString);
+                    }
                     if (sourceNode.nodeName === 'FX-BIND') {
-                        tagStart.textContent = `<${sourceNode.nodeName.toLowerCase()} ref="${sourceNode.getAttribute(
-                            'ref',
-                        )}">`;
+                        tagStart.textContent = `<${sourceNode.nodeName.toLowerCase()} ref="${sourceNode.getAttribute('ref')}">`;
                     } else if (sourceNode.nodeName === 'FX-INSERT') {
                         tagStart.textContent = `<${sourceNode.nodeName.toLowerCase()} ref="${sourceNode.getAttribute('ref')}">`;
                     } else if (sourceNode.nodeName === 'FX-INSTANCE') {
@@ -204,16 +212,17 @@ class ADI {
                     } else if (sourceNode.nodeName === 'FX-SUBMISSION') {
                         tagStart.textContent = `<${sourceNode.nodeName.toLowerCase()} id="${sourceNode.getAttribute('id')}">`;
                     } else {
+*/
                         const attrString =  Array.from(sourceNode.attributes)
 							  .filter(
-								  attr => this.isInstanceViewer ? true : isAttributeShown(attr.name))
+								  attr => this.isInstanceViewer ? true : isAttributeShown(attr.name, sourceNode))
 							  .map(attr => `${attr.name}="${attr.value}"`).join(' ');
                         tagStart.textContent = `<${
                             sourceNode.nodeName.toLowerCase()
                         }${
                            attrString ? (` ${attrString}`) : ''
                         }>`;
-                    }
+                    // }
 
                     if (withChildren) {
                         tagEnd = newElement('span');

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);
+        const path = XPathUtil.getPath(e.target, 'unknown');
         // console.log('>>>> _logDetails', path);
         const cut = path.substring(path.indexOf('/fx-fore'), path.length);
         const xpath = `/${cut}`;

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';
 
 /**
@@ -76,7 +76,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 +92,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);
@@ -206,12 +206,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 +230,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');
     }