@jinntec/fore 1.8.0 → 1.10.0

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';
@@ -43,6 +43,9 @@ export default class FxControl extends XfAbstractControl {
     static get properties() {
         return {
             ...XfAbstractControl.properties,
+            credentials:{
+                type: String
+            },
             initial: {
                 type: Boolean
             }
@@ -74,6 +77,13 @@ export default class FxControl extends XfAbstractControl {
             }
         `;
 
+        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 = `
             <style>
                 ${style}
@@ -369,7 +379,7 @@ export default class FxControl extends XfAbstractControl {
         }
 
         // ### when there's a url Fore is used as widget and will be loaded from external file
-        if (this.url && !this.loaded) {
+        if (this.url && !this.loaded && this.modelItem.relevant) {
             // ### evaluate initial data if necessary
 
             if (this.initial) {
@@ -417,10 +427,8 @@ export default class FxControl extends XfAbstractControl {
         try {
             const response = await fetch(this.url, {
                 method: 'GET',
-                /*
-                        mode: 'cors',
-                        credentials: 'include',
-                */
+                credentials: this.credentials,
+                mode: 'cors',
                 headers: {
                     'Content-Type': 'text/html',
                 },
@@ -446,9 +454,12 @@ export default class FxControl extends XfAbstractControl {
                 'model-construct-done',
                 e => {
                     const defaultInst = imported.querySelector('fx-instance');
-                    if (this.initialNode) {
+                    if (this.initial) {
                         const doc = new DOMParser().parseFromString('<data></data>', 'application/xml');
                         // Note: Clone the input to prevent the inner fore from editing the outer node
+						// Also update the `initialNode` to make sure we have an up-to-date version
+						this.initialNode = evaluateXPathToFirstNode(this.initial, this.nodeset, this);
+
                         doc.firstElementChild.appendChild(this.initialNode.cloneNode(true));
                         defaultInst.setInstanceData(doc);
                     }

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);
+
+			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,13 @@ export class FxRepeat extends foreElementMixin(HTMLElement) {
       });
     }
 
-    const rawNodeset = evaluateXPath(this.ref, inscope, this);
+	  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 );
+	  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 +228,7 @@ export class FxRepeat extends foreElementMixin(HTMLElement) {
     if (!this.inited) this.init();
     // console.time('repeat-refresh', this);
     this._evalNodeset();
+
     // 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() {
@@ -91,13 +93,13 @@ 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.style.display = 'none';
     } else {
       // if(this.hasAttribute('repeat-index')){
       //   Fore.fadeInElement(this);
       // }
       // this.style.display = this.display;
-      this.classList.remove('nonrelevant');
+		this.style.display = 'block';
     }
 
     /*

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];
 

package/src/xpath-evaluation.js

@@ -341,7 +341,18 @@ function functionNameResolver({prefix, localName}, _arity) {
         case 'instance':
         case 'log':
         case 'parse':
+        case 'local-date':
+        case 'local-dateTime':
         case 'logtree':
+        case 'uri':
+        case 'uri-fragment':
+        case 'uri-host':
+        case 'uri-param':
+        case 'uri-path':
+        case 'uri-port':
+        case 'uri-query':
+        case 'uri-scheme':
+        case 'uri-scheme-specific-part':
             return {namespaceURI: XFORMS_NAMESPACE_URI, localName};
         default:
             if (prefix === '' && globallyDeclaredFunctionLocalNames.includes(localName)) {
@@ -407,14 +418,14 @@ function getVariablesInScope(formElement) {
  * @param  {Node} contextNode The start of the XPath
  * @param  {{parentNode}|ForeElementMixin} formElement  The form element associated to the XPath
  */
-export function evaluateXPath(xpath, contextNode, formElement, variables = {}, options={}) {
+export function evaluateXPath(xpath, contextNode, formElement, variables = {}, options={}, domFacade = null) {
     const namespaceResolver = createNamespaceResolverForNode(xpath, contextNode, formElement);
     const variablesInScope = getVariablesInScope(formElement);
 
     return fxEvaluateXPath(
         xpath,
         contextNode,
-        null,
+        domFacade,
         {...variablesInScope, ...variables},
         fxEvaluateXPath.ALL_RESULTS_TYPE,
         {
@@ -834,8 +845,8 @@ const instance = (dynamicContext, string) => {
     );
 
     const inst = string
-        ? formElement.querySelector(`#${string}`)
-        : formElement.querySelector(`fx-instance`);
+          ? formElement.getModel().getInstance(string)
+          : formElement.getModel().getDefaultInstance();
 
 /*
     const inst = string
@@ -980,3 +991,89 @@ registerCustomXPathFunction(
     'xs:string?',
     (dynamicContext, string) => btoa(string),
 );
+
+registerCustomXPathFunction(
+    {namespaceURI: XFORMS_NAMESPACE_URI, localName: 'local-date'},
+    [],
+    'xs:string?',
+    (dynamicContext, string) => new Date().toLocaleDateString(),
+);
+registerCustomXPathFunction(
+    {namespaceURI: XFORMS_NAMESPACE_URI, localName: 'local-dateTime'},
+    [],
+    'xs:string?',
+    (dynamicContext, string) => {
+        return new Date().toLocaleString();
+    },
+);
+registerCustomXPathFunction(
+    {namespaceURI: XFORMS_NAMESPACE_URI, localName: 'uri'},
+    [],
+    'xs:string?',
+    (dynamicContext, string) => window.location.href,
+);
+registerCustomXPathFunction(
+    {namespaceURI: XFORMS_NAMESPACE_URI, localName: 'uri-fragment'},
+    [],
+    'xs:string?',
+    (dynamicContext, arg) => window.location.hash,
+);
+registerCustomXPathFunction(
+    {namespaceURI: XFORMS_NAMESPACE_URI, localName: 'uri-host'},
+    [],
+    'xs:string?',
+    (dynamicContext, arg) => window.location.host,
+);
+registerCustomXPathFunction(
+    {namespaceURI: XFORMS_NAMESPACE_URI, localName: 'uri-query'},
+    [],
+    'xs:string?',
+    (dynamicContext, arg) => window.location.search,
+);
+registerCustomXPathFunction(
+    {namespaceURI: XFORMS_NAMESPACE_URI, localName: 'uri-path'},
+    [],
+    'xs:string?',
+    (dynamicContext, arg) => {
+        return new URL(window.location.href).pathname;
+    },
+);
+registerCustomXPathFunction(
+    {namespaceURI: XFORMS_NAMESPACE_URI, localName: 'uri-port'},
+    [],
+    'xs:string?',
+    (dynamicContext, arg) => {
+        return window.location.port;
+    },
+);
+registerCustomXPathFunction(
+    {namespaceURI: XFORMS_NAMESPACE_URI, localName: 'uri-param'},
+    ['xs:string?'],
+    'xs:string?',
+    (dynamicContext, arg) => {
+        if (!arg) return null;
+
+        const search = window.location.search;
+        const urlparams = new URLSearchParams(search);
+        const param = urlparams.get(arg);
+        return param ? param : '';
+
+    },
+);
+registerCustomXPathFunction(
+    {namespaceURI: XFORMS_NAMESPACE_URI, localName: 'uri-scheme'},
+    [],
+    'xs:string?',
+    (dynamicContext, arg) => {
+        return new URL(window.location.href).protocol;
+    },
+);
+registerCustomXPathFunction(
+    {namespaceURI: XFORMS_NAMESPACE_URI, localName: 'uri-scheme-specific-part'},
+    [],
+    'xs:string?',
+    (dynamicContext, arg) => {
+        const uri = window.location.href;
+        return uri.substring(uri.indexOf(':') + 1, uri.length);
+    },
+);

package/src/xpath-util.js

@@ -115,29 +115,26 @@ export class XPathUtil {
     return null;
   }
 
-  static resolveInstance(boundElement){
-    const instanceId = XPathUtil.getInstanceId(boundElement.getAttribute('ref'));
+	static resolveInstance(boundElement, path){
+		let instanceId = XPathUtil.getInstanceId(path);
+		if (!instanceId) {
+			instanceId = XPathUtil.getInstanceId(boundElement.getAttribute('ref'));
+		}
     if(instanceId !== null){
       return instanceId;
     }
 
     const parentBinding = XPathUtil.getParentBindingElement(boundElement);
     if(parentBinding){
-      return this.resolveInstance(parentBinding);
+		return this.resolveInstance(parentBinding, path);
     }
     return 'default';
   }
 
-  // todo: certainly not ideal to rely on duplicating instance id on instance document - better way later ;)
-  static getPath(node) {
+  static getPath(node, instanceId) {
     const path = fx.evaluateXPathToString('path()', node);
-    /*
-    const instanceId = node.ownerDocument.firstElementChild.getAttribute('id');
-    if (instanceId !== null && instanceId !== 'default') {
-      return `#${instanceId}${XPathUtil.shortenPath(path)}`;
-    }
-*/
-    return XPathUtil.shortenPath(path);
+	// Path is like `$default/x/y`
+	return `$${instanceId}${XPathUtil.shortenPath(path)}`;
   }
 
   static shortenPath(path) {