@jinntec/fore 1.0.0-1 → 1.0.0-2

package/src/ui/fx-control.js

@@ -1,5 +1,7 @@
 import XfAbstractControl from './abstract-control.js';
-import { evaluateXPath, evaluateXPathToString } from '../xpath-evaluation.js';
+import { evaluateXPath, evaluateXPathToString, evaluateXPathToNodes } from '../xpath-evaluation.js';
+import getInScopeContext from '../getInScopeContext.js';
+import { Fore } from '../fore.js';
 
 const WIDGETCLASS = 'widget';
 
@@ -12,7 +14,7 @@ const WIDGETCLASS = 'widget';
  * @customElement
  * @demo demo/index.html
  */
-class FxControl extends XfAbstractControl {
+export default class FxControl extends XfAbstractControl {
   constructor() {
     super();
     this.inited = false;
@@ -54,7 +56,7 @@ class FxControl extends XfAbstractControl {
         `;
 
     this.widget = this.getWidget();
-    console.log('widget ', this.widget);
+    // console.log('widget ', this.widget);
 
     // ### convenience marker event
     if (this.updateEvent === 'enter') {
@@ -64,15 +66,17 @@ class FxControl extends XfAbstractControl {
           event.preventDefault();
           this.setValue(this.widget[this.valueProp]);
         }
-        // console.log('enter handler ', this.updateEvent);
-        // this.setValue(this.widget[this.valueProp]);
       });
       this.updateEvent = 'blur'; // needs to be registered too
     }
     this.widget.addEventListener(this.updateEvent, () => {
-      console.log('eventlistener ', this.updateEvent);
+      // console.log('eventlistener ', this.updateEvent);
       this.setValue(this.widget[this.valueProp]);
     });
+
+    const slot = this.shadowRoot.querySelector('slot');
+    this.template = this.querySelector('template');
+    // console.log('template',this.template);
   }
 
   setValue(val) {
@@ -95,6 +99,7 @@ class FxControl extends XfAbstractControl {
    * @returns {HTMLElement|*}
    */
   getWidget() {
+    if (this.widget) return this.widget;
     let widget = this.querySelector(`.${WIDGETCLASS}`);
     if (!widget) {
       widget = this.querySelector('input');
@@ -127,23 +132,34 @@ class FxControl extends XfAbstractControl {
     }
   }
 
-  async refresh() {
+  getTemplate() {
+    return this.querySelector('template');
+  }
+
+  async refresh(force) {
+    // console.log('fx-control refresh', this);
     super.refresh();
+    // console.log('refresh template', this.template);
     // const {widget} = this;
 
     // ### if we find a ref on control we have a 'select' control of some kind
-    // todo: review - seems a bit implicite to draw that 'itemset decision' just from the existence of a 'ref'
-    if (this.widget.hasAttribute('ref')) {
-      const tmpl = this.widget.querySelector('template');
-
+    const widget = this.getWidget();
+    if (widget.hasAttribute('ref')) {
       // ### eval nodeset for list control
-      const ref = this.widget.getAttribute('ref');
-      const inscope = this.getInScopeContext();
-      const formElement = this.closest('fx-fore');
-      const nodeset = evaluateXPath(ref, inscope, formElement);
+      const ref = widget.getAttribute('ref');
+      /*
+      actually a ref on a select or similar component should point to a different instance
+      with an absolute expr e.g. 'instance('theId')/...'
+
+      todo: even bail out if ref is not absolute?
+       */
+
+      const inscope = getInScopeContext(this, ref);
+      // const nodeset = evaluateXPathToNodes(ref, inscope, this);
+      const nodeset = evaluateXPath(ref, inscope, this);
 
       // ### clear items
-      const { children } = this.widget;
+      const { children } = widget;
       Array.from(children).forEach(child => {
         if (child.nodeName.toLowerCase() !== 'template') {
           child.parentNode.removeChild(child);
@@ -151,33 +167,54 @@ class FxControl extends XfAbstractControl {
       });
 
       // ### build the items
-      Array.from(nodeset).forEach(node => {
-        console.log('#### node', node);
-        const content = tmpl.content.firstElementChild.cloneNode(true);
-        const newEntry = document.importNode(content, true);
-        // console.log('newEntry ', newEntry);
-        this.widget.appendChild(newEntry);
-
-        // ### initialize new entry
-        // ### set value
-        const valueAttribute = this._getValueAttribute(newEntry);
-        const valueExpr = valueAttribute.value;
-        const cutted = valueExpr.substring(1, valueExpr.length - 1);
-        const evaluated = evaluateXPath(cutted, node, formElement);
-        valueAttribute.value = evaluated;
-
-        if (this.value === evaluated) {
-          newEntry.setAttribute('selected', 'selected');
+      if (this.template) {
+        if (nodeset.length) {
+          // console.log('nodeset', nodeset);
+          Array.from(nodeset).forEach(node => {
+            // console.log('#### node', node);
+            const newEntry = this.createEntry();
+
+            // ### initialize new entry
+            // ### set value
+            this.updateEntry(newEntry, node);
+          });
+        } else {
+          const newEntry = this.createEntry();
+          this.updateEntry(newEntry, nodeset);
         }
+      }
+    }
+    Fore.refreshChildren(this, force);
+  }
 
-        // ### set label
-        const optionLabel = newEntry.textContent;
-        const labelExpr = optionLabel.substring(1, optionLabel.length - 1);
+  updateEntry(newEntry, node) {
+    // ### >>> todo: needs rework this code is heavily assuming a select control with 'value' attribute - not generic at all yet.
 
-        const label = evaluateXPathToString(labelExpr, node, formElement);
-        newEntry.textContent = label;
-      });
+    if (this.widget.nodeName !== 'SELECT') return;
+    const valueAttribute = this._getValueAttribute(newEntry);
+    const valueExpr = valueAttribute.value;
+    const cutted = valueExpr.substring(1, valueExpr.length - 1);
+    const evaluated = evaluateXPath(cutted, node, newEntry);
+    valueAttribute.value = evaluated;
+
+    if (this.value === evaluated) {
+      newEntry.setAttribute('selected', 'selected');
     }
+
+    // ### set label
+    const optionLabel = newEntry.textContent;
+    const labelExpr = optionLabel.substring(1, optionLabel.length - 1);
+
+    const label = evaluateXPathToString(labelExpr, node, newEntry);
+    newEntry.textContent = label;
+    //  ### <<< needs rework
+  }
+
+  createEntry() {
+    const content = this.template.content.firstElementChild.cloneNode(true);
+    const newEntry = document.importNode(content, true);
+    this.template.parentNode.appendChild(newEntry);
+    return newEntry;
   }
 
   // eslint-disable-next-line class-methods-use-this

package/src/ui/fx-inspector.js

@@ -0,0 +1,44 @@
+/**
+ * lists out all live instances in html 'details' and 'summary' elements.
+ */
+export class FxInspector extends HTMLElement {
+  connectedCallback() {
+    const style = `
+          :host {
+            display: block;
+            width:100%;
+            background:var(--inspector-bg);
+          }
+          pre{
+            background:var(--inspector-pre-bg);
+            color:var(--inspector-color);
+            max-height:var(--inspector-instance-height,300px);
+            overflow:scroll;
+          }
+        `;
+
+    const instances = Array.from(document.querySelectorAll('fx-instance'));
+    this.innerHTML = `
+            <style>
+                ${style}
+            </style>
+            <slot></slot>
+            ${instances
+              .map(
+                (instance, index) => `
+              <details ${index === 0 ? `open` : ''}>
+                  <summary>${instance.id}</summary>
+                  <pre>{log('${instance.id}')}</pre>
+              </details>
+            `,
+              )
+              .join('')}
+        `;
+
+    this.addEventListener('slotchange', e => {
+      console.log('slotchange ', e);
+    });
+  }
+}
+
+customElements.define('fx-inspector', FxInspector);

package/src/ui/fx-items.js

@@ -0,0 +1,117 @@
+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';
+
+/**
+ * FxItems provices a templated list over its bound nodes. It is not standalone but expects to be used
+ * within an fx-control element.
+ *
+ *
+ *
+ * @demo demo/selects3.html
+ */
+export class FxItems extends FxControl {
+  static get properties() {
+    return {
+      ...super.properties,
+      valueAttr: {
+        type: String,
+      },
+    };
+  }
+
+  constructor() {
+    super();
+    this.valueAttr = this.hasAttribute('value') ? this.getAttribute('value') : null;
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+
+    this.addEventListener('click', e => {
+      const items = this.querySelectorAll('[value]');
+
+      let target;
+      if (e.target.nodeName === 'LABEL') {
+        target = document.getElementById(e.target.getAttribute('for'));
+        target.checked = !target.checked;
+      }
+
+      let val = '';
+      Array.from(items).forEach(item => {
+        if (item.checked) {
+          val += ` ${item.getAttribute('value')}`;
+        }
+      });
+      this.setAttribute('value', val.trim());
+
+      // ### check for parent control
+      const parentBind = this.parentNode.closest('[ref]');
+      if (!parentBind) return;
+      const modelitem = parentBind.getModelItem();
+      const setval = this.shadowRoot.getElementById('setvalue');
+      setval.setValue(modelitem, val.trim());
+      setval.actionPerformed();
+    });
+  }
+
+  getWidget() {
+    return this;
+  }
+
+  async updateWidgetValue() {
+    // console.log('setting items value');
+
+    const parentBind = this.parentNode.closest('[ref]');
+    if (parentBind) {
+      this.value = parentBind.value;
+    }
+    this.setAttribute('value', this.value);
+  }
+
+  /**
+   * Updates an entry by setting the label and the value.
+   *
+   * Will connect label and control with `for` attribute with generated id.
+   *
+   * attention: limitations here: assumes that there's an `label` element plus an element with an `value`
+   * attribute which it will update.
+   *
+   *
+   *
+   * @param newEntry
+   * @param node
+   */
+  updateEntry(newEntry, node) {
+    // console.log('fx-items updateEntry', this.value);
+    // super.updateEntry(newEntry,node);
+
+    // ### danger zone - highly specific - assumes knowledge of the template structure ###
+    // ### danger zone - highly specific - assumes knowledge of the template structure ###
+    // ### danger zone - highly specific - assumes knowledge of the template structure ###
+
+    const label = newEntry.querySelector('label');
+    label.textContent = node.textContent;
+
+    const id = Fore.createUUID();
+    label.setAttribute('for', id);
+
+    // getting element which has 'value' attr
+    const input = newEntry.querySelector('[value]');
+    // getting expr
+    const expr = input.value;
+    const cutted = expr.substring(1, expr.length - 1);
+    const evaluated = evaluateXPath(cutted, node, newEntry);
+
+    const valAttr = this.getAttribute('value');
+    input.value = evaluated;
+    input.setAttribute('id', id);
+    if (valAttr.indexOf(input.value) !== -1) {
+      input.checked = true;
+    }
+  }
+}
+
+customElements.define('fx-items', FxItems);

package/src/ui/fx-output.js

@@ -1,6 +1,7 @@
 import XfAbstractControl from './abstract-control.js';
 import { evaluateXPath, evaluateXPathToString } from '../xpath-evaluation.js';
 import getInScopeContext from '../getInScopeContext.js';
+// import {markdown} from '../drawdown.js';
 
 /**
  * todo: review placing of value. should probably work with value attribute and not allow slotted content.
@@ -32,12 +33,21 @@ export class FxOutput extends XfAbstractControl {
           .label{
             display: inline-block;
           }
+          table,tbody{
+            width:100%;
+          }
+          th{
+            text-align:left;
+          }
+          td{
+            padding-right:1rem;
+          }
         `;
 
     const outputHtml = `
             <slot name="label"></slot>
             <span id="value">
-                <slot></slot>
+                <slot id="main"></slot>
             </span>
         `;
 
@@ -50,6 +60,7 @@ export class FxOutput extends XfAbstractControl {
     // this.widget = this.shadowRoot.querySelector('#widget');
     // this.widget = this.getWidget();
     // console.log('widget ', this.widget);
+    this.mediatype = this.hasAttribute('mediatype') ? this.getAttribute('mediatype') : null;
 
     this.addEventListener('slotchange', e => {
       console.log('slotchange ', e);
@@ -93,12 +104,41 @@ export class FxOutput extends XfAbstractControl {
   }
 
   async updateWidgetValue() {
+    console.log('updateWidgetValue');
     const valueWrapper = this.shadowRoot.getElementById('value');
 
-    if (this.hasAttribute('html')) {
+    if (this.mediatype === 'markdown') {
+      const md = markdown(this.nodeset);
+      this.innerHtml = md;
+    }
+
+    if (this.mediatype === 'html') {
       if (this.modelItem.node) {
+        /*
         valueWrapper.innerHTML = this.modelItem.node.outerHTML;
         return;
+*/
+
+        const node = this.modelItem.node;
+
+        if (node.nodeType) {
+          // const mainSlot = this.shadowRoot.querySelector('#main');
+          // valueWrapper.appendChild(node);
+
+          // todo: checking if ownerDocument of node and ownerDocument of this are the same - otherwise import first
+          // const imported = this.ownerDocument.importNode(node,true);
+          // const clone = node.cloneNode(true);
+
+          this.appendChild(node);
+          // this.innerHtml = node;
+          // this.innerHTML = node;
+          return;
+        }
+        Object.entries(node).map(obj => {
+          // valueWrapper.appendChild(obj[1]);
+          this.appendChild(obj[1]);
+        });
+        return;
       }
 
       // this.innerHTML = this.value.outerHTML;

package/src/ui/fx-repeat.js

@@ -88,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 => {
@@ -114,16 +115,26 @@ 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 = `
-             .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>
@@ -160,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());
@@ -188,12 +207,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 +233,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)
       }
@@ -236,13 +256,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 +321,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);

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