@jinntec/fore 0.25.0 → 1.0.0-2

package/src/ui/fx-repeat.js

@@ -2,7 +2,7 @@ import './fx-repeatitem.js';
 
 import { Fore } from '../fore.js';
 import { foreElementMixin } from '../ForeElementMixin.js';
-import { evaluateXPath, evaluateXPathToNodes } from '../xpath-evaluation.js';
+import { evaluateXPath } from '../xpath-evaluation.js';
 import getInScopeContext from '../getInScopeContext.js';
 
 /**
@@ -25,9 +25,6 @@ export class FxRepeat extends foreElementMixin(HTMLElement) {
       index: {
         type: Number,
       },
-      ref: {
-        type: String,
-      },
       template: {
         type: Object,
       },
@@ -57,7 +54,7 @@ export class FxRepeat extends foreElementMixin(HTMLElement) {
     this.inited = false;
     this.index = 1;
     this.repeatSize = 0;
-    this.attachShadow({ mode: 'open' });
+    this.attachShadow({ mode: 'open', delegatesFocus: true });
   }
 
   get repeatSize() {
@@ -91,6 +88,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 => {
@@ -103,6 +101,7 @@ export class FxRepeat extends foreElementMixin(HTMLElement) {
     // todo: review - this is just used by append action - event consolidation ?
     this.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);
@@ -116,23 +115,28 @@ 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);
+        this.refresh(true);
+      });
+    }
+    this.getOwnerForm().registerLazyElement(this);
+
     const style = `
-            :host {
-                // display: none;
-            }
-            ::slotted(*){
-                // display:none;
-            }
-            .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>
         `;
     this.shadowRoot.innerHTML = `
@@ -167,6 +171,14 @@ export class FxRepeat extends foreElementMixin(HTMLElement) {
     const inscope = getInScopeContext(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());
@@ -195,18 +207,14 @@ 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();
-
-    /*
-    const inscope = this.getInScopeContext();
-    this.nodeset = evaluateXPathToNodes(this.ref, inscope, this.getOwnerForm());
-*/
-
+    console.time('repeat-refresh', this);
     this._evalNodeset();
     // console.log('repeat refresh nodeset ', this.nodeset);
+    // console.log('repeatCount', this.repeatCount);
 
     const repeatItems = this.querySelectorAll(':scope > fx-repeatitem');
     const repeatItemCount = repeatItems.length;
@@ -218,103 +226,102 @@ export class FxRepeat extends foreElementMixin(HTMLElement) {
 
     // const contextSize = this.nodeset.length;
     const contextSize = nodeCount;
-    const modified = [];
+    // todo: review - cant the context really never be smaller than the repeat count?
+    // todo: this code can be deprecated probably but check first
     if (contextSize < repeatItemCount) {
       for (let position = repeatItemCount; position > contextSize; position -= 1) {
         // remove repeatitem
         const itemToRemove = repeatItems[position - 1];
-        this._fadeOut(itemToRemove);
-        // setTimeout(itemToRemove.parentNode.removeChild(itemToRemove),1000);
-        // itemToRemove.parentNode.removeChild(itemToRemove);
-        // modified.push(itemToRemove);
+        itemToRemove.parentNode.removeChild(itemToRemove);
+        this.getOwnerForm().unRegisterLazyElement(itemToRemove);
+        // this._fadeOut(itemToRemove);
+        // Fore.fadeOutElement(itemToRemove)
       }
-
-      // todo: update index
     }
 
     if (contextSize > repeatItemCount) {
       for (let position = repeatItemCount + 1; position <= contextSize; position += 1) {
         // add new repeatitem
 
-        // const lastRepeatItem = repeatItems[repeatItemCount-1];
-        // const newItem = lastRepeatItem.cloneNode(true);
-
         const newItem = document.createElement('fx-repeatitem');
         const clonedTemplate = this._clone();
-
-        // newItem.style.display = 'none';
-        newItem.style.opacity = '0';
         newItem.appendChild(clonedTemplate);
-        this._fadeIn(newItem);
-        // const tmpl = this.shadowRoot.querySelector('template');
-        // const newItem = tmpl.content.cloneNode(true);
+        this.appendChild(newItem);
 
         newItem.nodeset = this.nodeset[position - 1];
         newItem.index = position;
-        this.appendChild(newItem);
-        // modified.push(newItem);
       }
     }
 
+    // ### 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);
-    /*
-    if (!this.inited) {
-      Fore.refreshChildren(this);
-    }
-    if (contextSize === repeatItemCount) {
-      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();
   }
 
+  // eslint-disable-next-line class-methods-use-this
+  _fadeOut(el) {
+    el.style.opacity = 1;
+
+    (function fade() {
+      // eslint-disable-next-line no-cond-assign
+      if ((el.style.opacity -= 0.1) < 0) {
+        el.style.display = 'none';
+      } else {
+        requestAnimationFrame(fade);
+      }
+    })();
+  }
+
   // eslint-disable-next-line class-methods-use-this
   _fadeIn(el) {
-    // eslint-disable-next-line no-param-reassign
+    if (!el) return;
+
     el.style.opacity = 0;
-    // eslint-disable-next-line no-param-reassign
+    el.style.display = this.display;
+
     (function fade() {
+      // setTimeout(() => {
       let val = parseFloat(el.style.opacity);
-      val += 0.1;
-      if (!(val > 1)) {
-        // eslint-disable-next-line no-param-reassign
+      // eslint-disable-next-line no-cond-assign
+      if (!((val += 0.1) > 1)) {
         el.style.opacity = val;
         requestAnimationFrame(fade);
       }
+      // }, 40);
     })();
   }
 
-  // eslint-disable-next-line class-methods-use-this
-  _fadeOut(el) {
-    el.classList.add('fade-out-bottom');
-    /*
-        el.style.opacity = 1;
-
-        (function fade() {
-            if ((el.style.opacity -= .01) < 0) {
-                el.style.display = "none";
-            } else {
-                requestAnimationFrame(fade);
-            }
-        })();
-*/
-  }
-
   _initTemplate() {
-    const shadowTemplate = this.shadowRoot.querySelector('template');
-    console.log('shadowtempl ', shadowTemplate);
+    // const shadowTemplate = this.shadowRoot.querySelector('template');
+    // console.log('shadowtempl ', shadowTemplate);
 
     // const defaultSlot = this.shadowRoot.querySelector('slot');
     // todo: this is still weak - should handle that better maybe by an explicit slot?
-    this.template = this.firstElementChild;
-    console.log('### init template for repeat ', this.id, this.template);
+    // this.template = this.firstElementChild;
+    this.template = this.querySelector('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);
@@ -333,7 +340,7 @@ export class FxRepeat extends foreElementMixin(HTMLElement) {
 
   _initRepeatItems() {
     // const model = this.getModel();
-    this.textContent = '';
+    // this.textContent = '';
     this.nodeset.forEach((item, index) => {
       const repeatItem = document.createElement('fx-repeatitem');
       repeatItem.nodeset = this.nodeset[index];

package/src/ui/fx-repeatitem.js

@@ -20,8 +20,23 @@ export class FxRepeatitem extends foreElementMixin(HTMLElement) {
   constructor() {
     super();
     this.inited = false;
+
     this.addEventListener('click', this._dispatchIndexChange);
-    this.attachShadow({ mode: 'open' });
+    // this.addEventListener('focusin', this._handleFocus);
+    this.addEventListener('focusin', this._dispatchIndexChange);
+
+    this.attachShadow({ mode: 'open', delegatesFocus: true });
+  }
+
+  _handleFocus() {
+    this.parentNode.setIndex(this.index);
+    // TODO: do this somewhere else, somewhere more central
+
+    /**
+     * 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() {
@@ -34,6 +49,8 @@ export class FxRepeatitem extends foreElementMixin(HTMLElement) {
   }
 
   connectedCallback() {
+    this.display = this.style.display;
+
     const html = `
            <slot></slot>
         `;
@@ -41,11 +58,13 @@ export class FxRepeatitem extends foreElementMixin(HTMLElement) {
     this.shadowRoot.innerHTML = `
             ${html}
         `;
+    this.getOwnerForm().registerLazyElement(this);
   }
 
   disconnectedCallback() {
     // console.log('disconnectedCallback ', this);
     this.removeEventListener('click', this._dispatchIndexChange());
+    this.removeEventListener('focusin', this._handleFocus);
   }
 
   init() {
@@ -60,59 +79,30 @@ export class FxRepeatitem extends foreElementMixin(HTMLElement) {
     return this.getModelItem()[this.index];
   }
 
-  /*
-    _initializeChildren(node) {
-        const children = Array.from(node.children);
-        // console.log('_initializeChildren ', children);
-
-        children.forEach(child => {
-            if (Fore.isUiElement(child.nodeName)) {
-                child.repeated = true;
-            } else if (child.children.length !== 0) {
-                const grantChildren = Array.from(child.children);
-                grantChildren.forEach(grantChild => {
-                    this._initializeChildren(grantChild);
-                });
-            }
-
-        });
-    }
-*/
+  refresh(force) {
+    // console.log('refresh repeatitem: ',this.nodeset);
+    // console.log('refresh repeatitem nodeset: ',this.nodeset);
+    this.modelItem = this.getModel().getModelItem(this.nodeset);
 
-  /*
-    firstUpdated(_changedProperties) {
-        // console.log('### fx-repeatitem firstUpdated index ', this.index);
-        // console.log('### fx-repeatitem firstUpdated nodeset ', this.nodeset);
-        // console.log('### fx-repeatitem firstUpdated model ', this.model);
-        this.dispatchEvent(new CustomEvent('repeatitem-created', {
-            composed: true,
-            bubbles: true,
-            detail: {item: this}
-        }));
-        // this.init();
+    if (this.modelItem && !this.modelItem.relevant) {
+      // await Fore.fadeOutElement(this)
+      this.style.display = 'none';
+    } else {
+      // if(this.hasAttribute('repeat-index')){
+      //   Fore.fadeInElement(this);
+      // }
+      this.style.display = this.display;
     }
-*/
 
-  refresh() {
-    // console.log('refresh repeatitem: ',this.nodeset);
     /*
-        if(!this.inited){
-            this.init();
-        }
-*/
-    // console.log('refresh repeatitem nodeset: ',this.nodeset);
-    Fore.refreshChildren(this);
-  }
-
-  /*
-    createRenderRoot() {
-        /!**
-         * Render template without shadow DOM. Note that shadow DOM features like
-         * encapsulated CSS and slots are unavailable.
-         *!/
-        return this;
+    if (this?.modelItem?.relevant) {
+      // Fore.refreshChildren(this);
+    } else {
     }
 */
+
+    Fore.refreshChildren(this, force);
+  }
 }
 
 window.customElements.define('fx-repeatitem', FxRepeatitem);

package/src/ui/fx-trigger.js

@@ -25,7 +25,7 @@ export class FxTrigger extends XfAbstractControl {
 
       const element = elements[0];
       element.addEventListener('click', e => this.performActions(e));
-
+      this.widget = element;
       // # terrible hack but browser behaves strange - seems to fire a 'click' for a button when it receives a
       // # 'Space' or 'Enter' key
       if (element.nodeName !== 'BUTTON') {
@@ -37,13 +37,13 @@ export class FxTrigger extends XfAbstractControl {
       }
     });
     /*
-        this.addEventListener('click', e => this.performActions(e));
-        this.addEventListener('keypress', (e) => {
-            if(e.code === 'Space' || e.code === 'Enter'){
-                this.performActions(e);
-            }
-        });
-*/
+            this.addEventListener('click', e => this.performActions(e));
+            this.addEventListener('keypress', (e) => {
+                if(e.code === 'Space' || e.code === 'Enter'){
+                    this.performActions(e);
+                }
+            });
+    */
   }
 
   // eslint-disable-next-line class-methods-use-this
@@ -53,36 +53,58 @@ export class FxTrigger extends XfAbstractControl {
     `;
   }
 
-  performActions(e) {
-    console.log('performActions ', this.children);
+  getWidget() {
+    return this.widget;
+  }
+
+  async updateWidgetValue() {
+    console.log('trigger update', this);
+    return null;
+  }
+
+  handleReadonly() {
+    super.handleReadonly();
+    // ### add disabled attribute in case we're readonly. This is special behavior of fx-trigger
+    if (this.widget.hasAttribute('readonly')) {
+      this.widget.setAttribute('disabled', 'disabled');
+    } else {
+      this.widget.removeAttribute('disabled');
+    }
+  }
+
+  async performActions(e) {
+    // todo: support readonly for trigger not executing the action
     const repeatedItem = this.closest('fx-repeatitem');
     if (repeatedItem) {
       console.log('repeated click');
       repeatedItem.click();
     }
-    for (let i = 0; i < this.children.length; i += 1) {
-      // console.log('child ', this.children[i]);
-      const child = this.children[i];
 
-      if (typeof child.execute === 'function') {
-        child.execute(e);
+    const forLoop = async () => {
+      for (let i = 0; i < this.children.length; i += 1) {
+        const child = this.children[i];
+        if (typeof child.execute === 'function') {
+          // eslint-disable-next-line no-await-in-loop
+          await child.execute(e);
+        }
       }
-    }
+    };
+    forLoop();
   }
 
   /*
-      async refresh() {
-        super.refresh();
-        // console.log('fx-button refresh');
+        async refresh() {
+          super.refresh();
+          // console.log('fx-button refresh');
 
-        const elements = this.querySelectorAll(':scope > *');
-        elements.forEach(element => {
-          if (typeof element.refresh === 'function') {
-            element.refresh();
-          }
-        });
-      }
-    */
+          const elements = this.querySelectorAll(':scope > *');
+          elements.forEach(element => {
+            if (typeof element.refresh === 'function') {
+              element.refresh();
+            }
+          });
+        }
+      */
 }
 
 customElements.define('fx-trigger', FxTrigger);