@jinntec/fore 1.0.0-4 → 1.0.0-5

package/src/actions/fx-hide.js

@@ -1,4 +1,5 @@
 import { FxAction } from './fx-action.js';
+import {AbstractAction} from "./abstract-action";
 
 /**
  * `fx-hide`
@@ -7,7 +8,7 @@ import { FxAction } from './fx-action.js';
  * @customElement
  * @demo demo/project.html
  */
-export class FxHide extends FxAction {
+export class FxHide extends AbstractAction {
   connectedCallback() {
     this.dialog = this.getAttribute('dialog');
     if(!this.dialog){

package/src/actions/fx-insert.js

@@ -85,32 +85,22 @@ export class FxInsert extends AbstractAction {
         console.log('this.nodeset', this.nodeset);
         */
 
-    // ### obtaining targetSequence
-    const inscope = getInScopeContext(this.getAttributeNode('ref'), this.ref);
-
-    // @ts-ignore
-    const targetSequence = evaluateXPathToNodes(this.ref, inscope, this.getOwnerForm());
-    // console.log('insert nodeset ', targetSequence);
+    let inscope;
+    // ### 'context' attribute takes precedence over 'ref'
+    let targetSequence;
+    if(this.hasAttribute('context')){
+      inscope = getInScopeContext(this.getAttributeNode('context'), this.getAttribute('context'));
+      targetSequence = evaluateXPathToNodes(this.getAttribute('context'), inscope, this.getOwnerForm());
+    }
 
-    // ### obtaining originSequence
-    /*
-        let originSequence;
-        if (this.origin) {
-            // ### if there's an origin attribute use it
-            const originTarget = evaluateXPathToFirstNode(this.origin, inscope, this.getOwnerForm());
-            if(Array.isArray(originTarget) && originTarget.length === 0){
-                console.warn('invalid origin for this insert action - ignoring...', this);
-                return;
-            }
-            originSequence = originTarget.cloneNode(true);
-        } else if (targetSequence) {
-            // ### use last item of targetSequence
-            originSequence = this._cloneTargetSequence(targetSequence);
-            if(originSequence && !this.keepValues){
-                this._clear(originSequence);
-            }
-        }
-*/
+    if(this.hasAttribute('ref')){
+      if(inscope){
+        targetSequence = evaluateXPathToNodes(this.ref, inscope, this.getOwnerForm());
+      }else{
+        inscope = getInScopeContext(this.getAttributeNode('ref'), this.ref);
+        targetSequence = evaluateXPathToNodes(this.ref, inscope, this.getOwnerForm());
+      }
+    }
     const originSequenceClone = this._cloneOriginSequence(inscope, targetSequence);
     if (!originSequenceClone) return; // if no origin back out without effect
 
@@ -127,13 +117,10 @@ export class FxInsert extends AbstractAction {
       index = 1;
       console.log('appended', inscope);
     } else {
-      // todo: eval 'at'
 
-      /*
-            insert at position given by 'at' or use the last item in the targetSequence
-             */
-      // if (this.at) {
+      /* ### insert at position given by 'at' or use the last item in the targetSequence ### */
       if (this.hasAttribute('at')) {
+        // todo: eval 'at'
         // index = this.at;
         // insertLocationNode = targetSequence[this.at - 1];
 
@@ -165,7 +152,16 @@ export class FxInsert extends AbstractAction {
         // insertLocationNode.parentNode.append(originSequence);
         // const nextSibl = insertLocationNode.nextSibling;
         index += 1;
-        insertLocationNode.insertAdjacentElement('afterend', originSequenceClone);
+        if(this.hasAttribute('context') && this.hasAttribute('ref')){
+          // index=1;
+          inscope.append(originSequenceClone);
+        }else if(this.hasAttribute('context')){
+          const contextAttr = this.getAttribute('context');
+          index=1;
+          insertLocationNode.prepend(originSequenceClone);
+        }else{
+          insertLocationNode.insertAdjacentElement('afterend', originSequenceClone);
+        }
       }
     }
 
@@ -173,16 +169,17 @@ export class FxInsert extends AbstractAction {
     // console.log('parent ', insertLocationNode.parentNode);
     // console.log('instance ', this.getModel().getDefaultContext());
 
-    // console.log('<<<<<<< at', this.at);
-    // console.log('<<<<<<< index', index);
+    console.log('<<<<<<< at', this.at);
+    console.log('<<<<<<< index', index);
     // todo: this actually should dispatch to respective instance
     document.dispatchEvent(
-      new CustomEvent('insert', {
+      // new CustomEvent('insert', {
+      new CustomEvent('index-changed', {
         composed: true,
         bubbles: true,
         detail: {
           insertedNodes: originSequenceClone,
-          position: index,
+          index,
         },
       }),
     );

package/src/actions/fx-toggle.js

@@ -17,7 +17,8 @@ class FxToggle extends FxAction {
     }
 
 */
-  execute() {
+  perform() {
+    super.perform();
     console.log('### fx-toggle.execute ');
     if (this.case) {
       const ownerForm = this.getOwnerForm();

package/src/dep_graph.js

@@ -91,7 +91,9 @@ function createDFS(edges, leavesOnly, result, circular) {
           // return;
           // console.log('‘circular path: ' + currentPath);
           // throw new DepGraphCycleError(currentPath);
-          // throw new Error(currentPath);
+
+          // Stop all processing. This form is broken and we should not break the browser
+          throw new Error(`Cyclic at ${currentPath}`);
         }
 
         inCurrentPath[node] = true;

package/src/fore.js

@@ -190,14 +190,16 @@ export class Fore {
     return fadeIn();
   }
 
-  static fadeOutElement(element) {
-    const duration = 2600;
+  static fadeOutElement(element, duration) {
+    // const duration = duration;
     let fadeOut = () => {
+
       // Stop all current animations
       if (element.getAnimations) {
         element.getAnimations().map(anim => anim.finish());
       }
 
+
       // Play the animation with the newly specified duration
       fadeOut = element.animate(
         {
@@ -220,6 +222,33 @@ export class Fore {
     target.dispatchEvent(event);
   }
 
+  static prettifyXml(source) {
+    const xmlDoc = new DOMParser().parseFromString(source, 'application/xml');
+    const xsltDoc = new DOMParser().parseFromString(
+        [
+          // describes how we want to modify the XML - indent everything
+          '<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform">',
+          '  <xsl:strip-space elements="*"/>',
+          '  <xsl:template match="para[content-style][not(text())]">', // change to just text() to strip space in text nodes
+          '    <xsl:value-of select="normalize-space(.)"/>',
+          '  </xsl:template>',
+          '  <xsl:template match="node()|@*">',
+          '    <xsl:copy><xsl:apply-templates select="node()|@*"/></xsl:copy>',
+          '  </xsl:template>',
+          '  <xsl:output indent="yes"/>',
+          '</xsl:stylesheet>',
+        ].join('\n'),
+        'application/xml',
+    );
+
+    const xsltProcessor = new XSLTProcessor();
+    xsltProcessor.importStylesheet(xsltDoc);
+    const resultDoc = xsltProcessor.transformToDocument(xmlDoc);
+    const resultXml = new XMLSerializer().serializeToString(resultDoc);
+    return resultXml;
+  }
+
+
   /**
    * clear all text nodes and attribute values to get a 'clean' template.
    * @param n

package/src/fx-bind.js

@@ -251,7 +251,7 @@ export class FxBind extends foreElementMixin(HTMLElement) {
         // console.log('otherPath', otherPath)
 
         // todo: nasty hack to prevent duplicate pathes like 'a[1]' and 'a[1]/text()[1]' to end up as separate nodes in the graph
-        if(!otherPath.endsWith('text()[1]')){
+        if (!otherPath.endsWith('text()[1]')) {
           if (!this.model.mainGraph.hasNode(otherPath)) {
             this.model.mainGraph.addNode(otherPath, ref);
           }
@@ -335,7 +335,7 @@ export class FxBind extends foreElementMixin(HTMLElement) {
         } else {
           // eslint-disable-next-line no-lonely-if
           if (this.ref) {
-            const localResult = evaluateXPathToNodes(this.ref, n, this.getOwnerForm());
+            const localResult = evaluateXPathToNodes(this.ref, n, this);
             localResult.forEach(item => {
               this.nodeset.push(item);
             });
@@ -351,7 +351,7 @@ export class FxBind extends foreElementMixin(HTMLElement) {
     } else {
       const inst = this.getModel().getInstance(this.instanceId);
       if (inst.type === 'xml') {
-        this.nodeset = evaluateXPathToNodes(this.ref, inscopeContext, this.getOwnerForm());
+        this.nodeset = evaluateXPathToNodes(this.ref, inscopeContext, this);
       } else {
         this.nodeset = this.ref;
       }
@@ -517,7 +517,7 @@ export class FxBind extends foreElementMixin(HTMLElement) {
       const touchedNodes = new Set();
       const domFacade = new DependencyNotifyingDomFacade(otherNode => touchedNodes.add(otherNode));
       this.nodeset.forEach(node => {
-        evaluateXPathToString(propertyExpr, node, this.getOwnerForm(), domFacade);
+        evaluateXPathToString(propertyExpr, node, this, domFacade);
       });
 
       return Array.from(touchedNodes.values());

package/src/fx-fore.js

@@ -152,6 +152,7 @@ export class FxFore extends HTMLElement {
 
     const html = `
            <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"></jinn-toast>
            <slot></slot>
            <div id="modalMessage" class="overlay">
@@ -676,6 +677,7 @@ export class FxFore extends HTMLElement {
     await this.refresh();
     // this.style.display='block'
     this.classList.add('fx-ready');
+    document.body.classList.add('fx-ready');
 
     this.ready = true;
     this.initialRun = false;
@@ -728,9 +730,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 === 'modeless') {
+    } else if (level === 'sticky') {
       // const notification = this.$.modeless;
-      this.shadowRoot.querySelector('#message').showToast(msg);
+      this.shadowRoot.querySelector('#sticky').showToast(msg);
     } else {
       const toast = this.shadowRoot.querySelector('#message');
       toast.showToast(msg);

package/src/getInScopeContext.js

@@ -2,12 +2,14 @@ import { evaluateXPathToFirstNode } from './xpath-evaluation.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;
   }
 
+
   if (node.nodeType === Node.ELEMENT_NODE) {
     // The context of a query should be the element having a ref
     return node;
@@ -37,7 +39,10 @@ function _getInitialContext(node, ref) {
   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();
@@ -55,9 +60,23 @@ export default function getInScopeContext(node, ref) {
 
   const repeatItem = parentElement.closest('fx-repeatitem');
   if (repeatItem) {
+    if(node.nodeName === 'context'){
+      return evaluateXPathToFirstNode(node.nodeValue, repeatItem.nodeset, _getForeContext(parentElement));
+    }
     return repeatItem.nodeset;
   }
 
+  if (parentElement.hasAttribute('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 === '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/ui/fx-container.js

@@ -44,6 +44,10 @@ export class FxContainer extends foreElementMixin(HTMLElement) {
     if (this.isBound()) {
       this.evalInContext();
       this.modelItem = this.getModelItem();
+      if(!this.modelItem.boundControls.includes(this)){
+        this.modelItem.boundControls.push(this);
+      }
+
       // this.value = this.modelItem.value;
     }
 

package/src/ui/fx-dialog.js

@@ -1,3 +1,4 @@
+import {Fore} from '../fore.js';
 export class FxDialog extends HTMLElement {
 
     static get properties() {
@@ -14,7 +15,7 @@ export class FxDialog extends HTMLElement {
     connectedCallback() {
         const style = `
           :host {
-            display: none;
+            display:none;
             height: 100vh;
             width:100vw;
             position:fixed;
@@ -22,7 +23,9 @@ export class FxDialog extends HTMLElement {
             top:0;
             right:0;
             bottom:0;
+            transition:opacity 0.4s linear;
           }
+
         `;
 
         this.shadowRoot.innerHTML = this.render(style);
@@ -37,6 +40,11 @@ export class FxDialog extends HTMLElement {
             });
         }
 
+        this.addEventListener('transitionend',()=>{
+            console.log('transitionend');
+            // this.style.display = 'none';
+        });
+
         this.focus();
     }
 
@@ -59,7 +67,8 @@ export class FxDialog extends HTMLElement {
         this.classList.add('show');
     }
 
-    hide(){
+    async hide(){
+        await Fore.fadeOutElement(this,400);
         this.classList.remove('show');
     }
 

package/src/ui/fx-items.js

@@ -1,6 +1,4 @@
-import XfAbstractControl from './abstract-control.js';
 import { evaluateXPath, evaluateXPathToString, evaluateXPathToNodes } from '../xpath-evaluation.js';
-import getInScopeContext from '../getInScopeContext.js';
 import FxControl from './fx-control.js';
 import { Fore } from '../fore.js';
 
@@ -103,7 +101,7 @@ export class FxItems extends FxControl {
     // getting expr
     const expr = input.value;
     const cutted = expr.substring(1, expr.length - 1);
-    const evaluated = evaluateXPath(cutted, node, newEntry);
+    const evaluated = evaluateXPathToString(cutted, node, newEntry);
 
     // adding space around value to allow matching of 'words'
     const spaced = ` ${evaluated} `;

package/src/ui/fx-repeat.js

@@ -4,7 +4,7 @@ import { Fore } from '../fore.js';
 import { foreElementMixin } from '../ForeElementMixin.js';
 import { evaluateXPath } from '../xpath-evaluation.js';
 import getInScopeContext from '../getInScopeContext.js';
-import {XPathUtil} from "../xpath-util";
+import { XPathUtil } from '../xpath-util';
 
 /**
  * `fx-repeat`
@@ -100,41 +100,46 @@ export class FxRepeat extends foreElementMixin(HTMLElement) {
       this.index = idx + 1;
     });
     // todo: review - this is just used by append action - event consolidation ?
-    this.addEventListener('index-changed', e => {
+    document.addEventListener('index-changed', e => {
       e.stopPropagation();
       if (!e.target === this) return;
       console.log('handle index event ', e);
       // const { item } = e.detail;
       // const idx = Array.from(this.children).indexOf(item);
       const { index } = e.detail;
-      this.index = index;
+      this.index = Number(index);
       this.applyIndex(this.children[index - 1]);
     });
+    /*
     document.addEventListener('insert', e => {
       const nodes = e.detail.insertedNodes;
       this.index = e.detail.position;
       console.log('insert catched', nodes, this.index);
     });
+*/
 
     // if (this.getOwnerForm().lazyRefresh) {
-      this.mutationObserver = new MutationObserver(mutations => {
-        console.log('mutations', mutations);
-
-        if(mutations[0].type === "childList"){
-          const added = mutations[0].addedNodes[0];
-          if(added){
-            const path = XPathUtil.getPath(added);
-            console.log('path mutated',path);
-            // this.dispatch('path-mutated',{'path':path,'nodeset':this.nodeset,'index': this.index});
-            this.dispatch('path-mutated',{'path':path,'index': this.index});
-          }
-
+    this.mutationObserver = new MutationObserver(mutations => {
+      console.log('mutations', mutations);
+
+      if (mutations[0].type === 'childList') {
+        const added = mutations[0].addedNodes[0];
+        if (added) {
+          const path = XPathUtil.getPath(added);
+          console.log('path mutated', path);
+          // this.dispatch('path-mutated',{'path':path,'nodeset':this.nodeset,'index': this.index});
+          // this.index = index;
+          // const prev = mutations[0].previousSibling.previousElementSibling;
+          // const index = prev.index();
+          // this.applyIndex(this.index -1);
+
+          this.dispatch('path-mutated', { path, index: this.index });
         }
-      });
+      }
+    });
     // }
     this.getOwnerForm().registerLazyElement(this);
 
-
     const style = `
       :host{
       }
@@ -192,7 +197,7 @@ export class FxRepeat extends foreElementMixin(HTMLElement) {
       });
     }
 
-    const seq = evaluateXPath(this.ref, inscope, this.getOwnerForm());
+    const seq = evaluateXPath(this.ref, inscope, this);
     // const seq = evaluateXPathToNodes(this.ref, inscope, this.getOwnerForm());
     if (seq === null) {
       // Empty sequence

package/src/xpath-evaluation.js

@@ -10,38 +10,14 @@ import {
   registerCustomXPathFunction,
   registerXQueryModule,
 } from 'fontoxpath';
+import { Fore } from './fore.js';
+
 import { XPathUtil } from './xpath-util.js';
 
 const XFORMS_NAMESPACE_URI = 'http://www.w3.org/2002/xforms';
 
 const createdNamespaceResolversByXPathQueryAndNode = new Map();
 
-function prettifyXml(source) {
-  const xmlDoc = new DOMParser().parseFromString(source, 'application/xml');
-  const xsltDoc = new DOMParser().parseFromString(
-    [
-      // describes how we want to modify the XML - indent everything
-      '<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform">',
-      '  <xsl:strip-space elements="*"/>',
-      '  <xsl:template match="para[content-style][not(text())]">', // change to just text() to strip space in text nodes
-      '    <xsl:value-of select="normalize-space(.)"/>',
-      '  </xsl:template>',
-      '  <xsl:template match="node()|@*">',
-      '    <xsl:copy><xsl:apply-templates select="node()|@*"/></xsl:copy>',
-      '  </xsl:template>',
-      '  <xsl:output indent="yes"/>',
-      '</xsl:stylesheet>',
-    ].join('\n'),
-    'application/xml',
-  );
-
-  const xsltProcessor = new XSLTProcessor();
-  xsltProcessor.importStylesheet(xsltDoc);
-  const resultDoc = xsltProcessor.transformToDocument(xmlDoc);
-  const resultXml = new XMLSerializer().serializeToString(resultDoc);
-  return resultXml;
-}
-
 function getCachedNamespaceResolver(xpath, node) {
   if (!createdNamespaceResolversByXPathQueryAndNode.has(xpath)) {
     return null;
@@ -236,9 +212,11 @@ function getVariablesInScope(formElement) {
   }
 
   const variables = {};
-  for (const key of closestActualFormElement.inScopeVariables.keys()) {
-    const varElement = closestActualFormElement.inScopeVariables.get(key);
-    variables[key] = varElement.value;
+  if(closestActualFormElement.inScopeVariables){
+    for (const key of closestActualFormElement.inScopeVariables.keys()) {
+      const varElement = closestActualFormElement.inScopeVariables.get(key);
+      variables[key] = varElement.value;
+    }
   }
   return variables;
 }
@@ -599,7 +577,7 @@ registerCustomXPathFunction(
         // return JSON.stringify(instance.getDefaultContext());
       } else {
         const def = new XMLSerializer().serializeToString(instance.getDefaultContext());
-        return prettifyXml(def);
+        return Fore.prettifyXml(def);
       }
     }
     return null;

package/src/xpath-util.js

@@ -57,16 +57,27 @@ export class XPathUtil {
     throw new Error('no Fore element present');
   }
 
-  // todo: this will need more work to look upward for instance() expr.
+  /**
+   * returns the instance id from a complete XPath using `instance()` function.
+   *
+   * Will return 'default' in case no ref is given at all or the `instance()` function is called without arg.
+   *
+   * Otherwise instance id is extracted from function and returned. If all fails null is returned.
+   * @param ref
+   * @returns {string}
+   */
   static getInstanceId(ref) {
     if (!ref) {
       return 'default';
     }
+    if (ref.startsWith('instance()')) {
+      return 'default';
+    }
     if (ref.startsWith('instance(')) {
       const result = ref.substring(ref.indexOf('(') + 1);
       return result.substring(1, result.indexOf(')') - 1);
     }
-    return 'default';
+    return null;
   }
 
   // todo: certainly not ideal to rely on duplicating instance id on instance document - better way later ;)