@jinntec/fore 1.9.0 → 1.10.0

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');
     }
 

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

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) {