@jinntec/fore 1.0.0-1 → 1.0.0-4

package/src/ui/fx-repeat.js

@@ -4,6 +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";
 
 /**
  * `fx-repeat`
@@ -88,6 +89,7 @@ export class FxRepeat extends foreElementMixin(HTMLElement) {
   }
 
   connectedCallback() {
+    // this.display = window.getComputedStyle(this, null).getPropertyValue("display");
     this.ref = this.getAttribute('ref');
     // console.log('### fx-repeat connected ', this.id);
     this.addEventListener('item-changed', e => {
@@ -114,16 +116,37 @@ export class FxRepeat extends foreElementMixin(HTMLElement) {
       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.getOwnerForm().registerLazyElement(this);
+
+
     const style = `
-             .fade-out-bottom {
-                -webkit-animation: fade-out-bottom 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
-                animation: fade-out-bottom 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
-            }
-            .fade-out-bottom {
-                -webkit-animation: fade-out-bottom 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
-                animation: fade-out-bottom 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
-            }
-        `;
+      :host{
+      }
+       .fade-out-bottom {
+          -webkit-animation: fade-out-bottom 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
+          animation: fade-out-bottom 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
+      }
+      .fade-out-bottom {
+          -webkit-animation: fade-out-bottom 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
+          animation: fade-out-bottom 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
+      }
+   `;
     const html = `
           <slot name="header"></slot>
           <slot></slot>
@@ -157,9 +180,17 @@ export class FxRepeat extends foreElementMixin(HTMLElement) {
    */
   _evalNodeset() {
     // const inscope = this.getInScopeContext();
-    const inscope = getInScopeContext(this, this.ref);
+    const inscope = getInScopeContext(this.getAttributeNode('ref') || this, this.ref);
     // console.log('##### inscope ', inscope);
     // console.log('##### ref ', this.ref);
+    // now we got a nodeset and attach MutationObserver to it
+
+    if (this.mutationObserver && inscope.nodeName) {
+      this.mutationObserver.observe(inscope, {
+        childList: true,
+        subtree: true,
+      });
+    }
 
     const seq = evaluateXPath(this.ref, inscope, this.getOwnerForm());
     // const seq = evaluateXPathToNodes(this.ref, inscope, this.getOwnerForm());
@@ -188,12 +219,13 @@ export class FxRepeat extends foreElementMixin(HTMLElement) {
     throw new Error(`Unexpected result of repeat nodeset: ${seq}`);
   }
 
-  async refresh() {
-    console.group('fx-repeat.refresh on', this.id);
+  async refresh(force) {
+    // console.group('fx-repeat.refresh on', this.id);
 
     if (!this.inited) this.init();
+    console.time('repeat-refresh', this);
     this._evalNodeset();
-    console.log('repeat refresh nodeset ', this.nodeset);
+    // console.log('repeat refresh nodeset ', this.nodeset);
     // console.log('repeatCount', this.repeatCount);
 
     const repeatItems = this.querySelectorAll(':scope > fx-repeatitem');
@@ -213,7 +245,7 @@ export class FxRepeat extends foreElementMixin(HTMLElement) {
         // remove repeatitem
         const itemToRemove = repeatItems[position - 1];
         itemToRemove.parentNode.removeChild(itemToRemove);
-
+        this.getOwnerForm().unRegisterLazyElement(itemToRemove);
         // this._fadeOut(itemToRemove);
         // Fore.fadeOutElement(itemToRemove)
       }
@@ -228,6 +260,8 @@ export class FxRepeat extends foreElementMixin(HTMLElement) {
         newItem.appendChild(clonedTemplate);
         this.appendChild(newItem);
 
+        this._initVariables(newItem);
+
         newItem.nodeset = this.nodeset[position - 1];
         newItem.index = position;
       }
@@ -236,13 +270,25 @@ export class FxRepeat extends foreElementMixin(HTMLElement) {
     // ### update nodeset of repeatitems
     for (let position = 0; position < repeatItemCount; position += 1) {
       const item = repeatItems[position];
+      this.getOwnerForm().registerLazyElement(item);
+
       if (item.nodeset !== this.nodeset[position]) {
         item.nodeset = this.nodeset[position];
       }
     }
 
-    Fore.refreshChildren(this);
+    // Fore.refreshChildren(clone,true);
+    const fore = this.getOwnerForm();
+    if (!fore.lazyRefresh || force) {
+      Fore.refreshChildren(this, force);
+    }
+    // this.style.display = 'block';
+    // this.style.display = this.display;
     this.setIndex(this.index);
+    console.timeEnd('repeat-refresh');
+
+    // this.replaceWith(clone);
+
     // this.repeatCount = contextSize;
     // console.log('repeatCount', this.repeatCount);
     console.groupEnd();
@@ -289,7 +335,7 @@ export class FxRepeat extends foreElementMixin(HTMLElement) {
     // todo: this is still weak - should handle that better maybe by an explicit slot?
     // this.template = this.firstElementChild;
     this.template = this.querySelector('template');
-    console.log('### init template for repeat ', this.id, this.template);
+    // console.log('### init template for repeat ', this.id, this.template);
 
     if (this.template === null) {
       // console.error('### no template found for this repeat:', this.id);
@@ -321,9 +367,24 @@ export class FxRepeat extends foreElementMixin(HTMLElement) {
       if (repeatItem.index === 1) {
         this.applyIndex(repeatItem);
       }
+
+      this._initVariables(repeatItem);
     });
   }
 
+  _initVariables(newRepeatItem) {
+    const inScopeVariables = new Map(this.inScopeVariables);
+    newRepeatItem.setInScopeVariables(inScopeVariables);
+    (function registerVariables(node) {
+      for (const child of node.children) {
+        if ('setInScopeVariables' in child) {
+          child.setInScopeVariables(inScopeVariables);
+        }
+        registerVariables(child);
+      }
+    })(newRepeatItem);
+  }
+
   _clone() {
     // const content = this.template.content.cloneNode(true);
     this.template = this.shadowRoot.querySelector('template');
@@ -336,6 +397,12 @@ export class FxRepeat extends foreElementMixin(HTMLElement) {
       item.removeAttribute('repeat-index');
     });
   }
+
+  setInScopeVariables(inScopeVariables) {
+    // Repeats are interesting: the variables should be scoped per repeat item, they should not be
+    // able to see the variables in adjacent repeat items!
+    this.inScopeVariables = new Map(inScopeVariables);
+  }
 }
 
 window.customElements.define('fx-repeat', FxRepeat);

package/src/ui/fx-repeatitem.js

@@ -22,7 +22,8 @@ export class FxRepeatitem extends foreElementMixin(HTMLElement) {
     this.inited = false;
 
     this.addEventListener('click', this._dispatchIndexChange);
-    this.addEventListener('focusin', this._handleFocus);
+    // this.addEventListener('focusin', this._handleFocus);
+    this.addEventListener('focusin', this._dispatchIndexChange);
 
     this.attachShadow({ mode: 'open', delegatesFocus: true });
   }
@@ -30,7 +31,12 @@ export class FxRepeatitem extends foreElementMixin(HTMLElement) {
   _handleFocus() {
     this.parentNode.setIndex(this.index);
     // TODO: do this somewhere else, somewhere more central
-    this.closest('fx-fore').refresh();
+
+    /**
+     * todo: resolve - this is problematic as it triggers a lot of unneeded refreshes but it needed
+     * when you want to support activating the right repeatitem when the user tabs through controls.
+     */
+    // this.closest('fx-fore').refresh();
   }
 
   _dispatchIndexChange() {
@@ -52,6 +58,7 @@ export class FxRepeatitem extends foreElementMixin(HTMLElement) {
     this.shadowRoot.innerHTML = `
             ${html}
         `;
+    this.getOwnerForm().registerLazyElement(this);
   }
 
   disconnectedCallback() {
@@ -72,7 +79,7 @@ export class FxRepeatitem extends foreElementMixin(HTMLElement) {
     return this.getModelItem()[this.index];
   }
 
-  refresh() {
+  refresh(force) {
     // console.log('refresh repeatitem: ',this.nodeset);
     // console.log('refresh repeatitem nodeset: ',this.nodeset);
     this.modelItem = this.getModel().getModelItem(this.nodeset);
@@ -94,7 +101,7 @@ export class FxRepeatitem extends foreElementMixin(HTMLElement) {
     }
 */
 
-    Fore.refreshChildren(this);
+    Fore.refreshChildren(this, force);
   }
 }
 

package/src/ui/fx-trigger.js

@@ -80,6 +80,9 @@ export class FxTrigger extends XfAbstractControl {
       repeatedItem.click();
     }
 
+    // Update all child variables, but only once
+    this.querySelectorAll('fx-var').forEach(variableElement => variableElement.refresh());
+
     const forLoop = async () => {
       for (let i = 0; i < this.children.length; i += 1) {
         const child = this.children[i];