@jinntec/fore 1.0.0-4 → 1.1.0

package/src/ui/fx-inspector.js

@@ -1,44 +1,147 @@
+import { Fore } from '../fore.js';
+
 /**
  * lists out all live instances in html 'details' and 'summary' elements.
  */
 export class FxInspector extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+  }
+
   connectedCallback() {
     const style = `
           :host {
+            position:absolute;
             display: block;
-            width:100%;
+            width:var(--inspector-handle-width);
             background:var(--inspector-bg);
+            top:0;
+            right:0;
+            bottom:0;
+            height: 100%;
+            background: var(--inspector-bg);
+            color: white;
+            /*max-height: 33%;*/
+            overflow: scroll;
+            transition:width 0.3s ease;
+          }
+          :host([open]){
+            width: 30%;
+          }
+          details{
+            margin:1rem;
+          }
+          .main{
+            padding-left:var(--inspector-handle-width);
+            color:var(--inspector-color);
+            overflow:scroll;
+            height:100%;
           }
           pre{
             background:var(--inspector-pre-bg);
             color:var(--inspector-color);
-            max-height:var(--inspector-instance-height,300px);
             overflow:scroll;
+            padding:0.2rem;
+          }
+          .handle{
+            display:block;
+            height:100%;
+            width:var(--inspector-handle-width);
+            background:var(--inspector-handle-bg);
+            opacity:0.7;
+            position:absolute;
+            left:0;
+            color:white;
+            cursor:pointer;
+          }
+          .handle:hover{
+            opacity:1;
+          }
+          .handle::before{
+            content: 'Data Inspector';
+            white-space: nowrap;
+            transform: rotate(-90deg);
+            display: inline-block;
+            position: absolute;
+            left: -85px;
+            width: 200px;
+            top: 40px;
+          }
+          summary{
+            cursor:pointer;
           }
         `;
 
-    const instances = Array.from(document.querySelectorAll('fx-instance'));
-    this.innerHTML = `
+    const fore = this.closest('fx-fore');
+
+    // fore.addEventListener('ready', (e) => {
+    this.render(style);
+    // });
+    fore.addEventListener('refresh-done', () => {
+      this.update();
+    });
+  }
+
+  update() {
+    // console.log('update');
+    const pre = this.shadowRoot.querySelectorAll('pre');
+    // console.log('pre', pre);
+    const fore = this.closest('fx-fore');
+
+    Array.from(pre).forEach(element => {
+      const inst = fore.getModel().getInstance(element.getAttribute('id'));
+      if (inst.type === 'xml') {
+        element.innerText = this.serializeDOM(inst.instanceData);
+      }
+      if (inst.type === 'json') {
+        element.innerText = JSON.stringify(inst.instanceData, undefined, 2);
+      }
+    });
+  }
+
+  render(style) {
+    const fore = this.closest('fx-fore');
+    const instances = Array.from(fore.querySelectorAll('fx-instance'));
+    this.shadowRoot.innerHTML = `
             <style>
                 ${style}
             </style>
+            <div class="main">
             <slot></slot>
-            ${instances
-              .map(
-                (instance, index) => `
-              <details ${index === 0 ? `open` : ''}>
-                  <summary>${instance.id}</summary>
-                  <pre>{log('${instance.id}')}</pre>
-              </details>
-            `,
-              )
-              .join('')}
+            <span class="handle"></span>
+                ${instances.map(
+                  (instance, index) => `
+                  <details>
+                      <summary>${instance.id}</summary>
+                      <pre id="${instance.id}"></pre>
+                  </details>
+                `,
+                )}
+            </div>
         `;
 
-    this.addEventListener('slotchange', e => {
-      console.log('slotchange ', e);
+/*
+    const handle = this.shadowRoot.querySelector('.handle');
+    handle.addEventListener('click', e => {
+      // console.log('toggling');
+      const { target } = e;
+      if (this.hasAttribute('open')) {
+        this.removeAttribute('open');
+      } else {
+        this.setAttribute('open', 'open');
+      }
     });
+*/
+  }
+
+  serializeDOM(data) {
+    // console.log('serializeDOM', data);
+    const ser = new XMLSerializer().serializeToString(data);
+    return Fore.prettifyXml(ser);
   }
 }
 
-customElements.define('fx-inspector', FxInspector);
+if (!customElements.get('fx-inspector')) {
+  customElements.define('fx-inspector', FxInspector);
+}

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 { evaluateXPathToString, resolveId } from '../xpath-evaluation.js';
 import FxControl from './fx-control.js';
 import { Fore } from '../fore.js';
 
@@ -35,7 +33,7 @@ export class FxItems extends FxControl {
 
       let target;
       if (e.target.nodeName === 'LABEL') {
-        target = document.getElementById(e.target.getAttribute('for'));
+        target = resolveId(e.target.getAttribute('for'), this);
         target.checked = !target.checked;
       }
 
@@ -48,7 +46,7 @@ export class FxItems extends FxControl {
       this.setAttribute('value', val.trim());
 
       // ### check for parent control
-      const parentBind = this.parentNode.closest('[ref]');
+      const parentBind = Fore.getClosest('[ref]', this.parentNode);
       if (!parentBind) return;
       const modelitem = parentBind.getModelItem();
       const setval = this.shadowRoot.getElementById('setvalue');
@@ -64,7 +62,7 @@ export class FxItems extends FxControl {
   async updateWidgetValue() {
     // console.log('setting items value');
 
-    const parentBind = this.parentNode.closest('[ref]');
+    const parentBind = Fore.getClosest('[ref]', this.parentNode);
     if (parentBind) {
       this.value = parentBind.value;
     }
@@ -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} `;
@@ -117,4 +115,6 @@ export class FxItems extends FxControl {
   }
 }
 
-customElements.define('fx-items', FxItems);
+if (!customElements.get('fx-items')) {
+  customElements.define('fx-items', FxItems);
+}

package/src/ui/fx-output.js

@@ -1,3 +1,4 @@
+import { Fore } from '../fore.js';
 import XfAbstractControl from './abstract-control.js';
 import { evaluateXPath, evaluateXPathToStrings } from '../xpath-evaluation.js';
 import getInScopeContext from '../getInScopeContext.js';
@@ -7,6 +8,7 @@ import getInScopeContext from '../getInScopeContext.js';
  * todo: review placing of value. should probably work with value attribute and not allow slotted content.
  */
 export class FxOutput extends XfAbstractControl {
+/*
   static get properties() {
     return {
       ...super.properties,
@@ -16,10 +18,13 @@ export class FxOutput extends XfAbstractControl {
     };
   }
 
+*/
   constructor() {
     super();
     this.attachShadow({ mode: 'open' });
     this.valueAttr = this.hasAttribute('value') ? this.getAttribute('value') : null;
+    // Outputs are always readonly!
+    this.readonly = true;
   }
 
   connectedCallback() {
@@ -85,13 +90,13 @@ export class FxOutput extends XfAbstractControl {
     try {
       const inscopeContext = getInScopeContext(this, this.valueAttr);
       if (this.hasAttribute('html')) {
-        return evaluateXPath(this.valueAttr, inscopeContext, this);
+        return evaluateXPath(this.valueAttr, inscopeContext, this)[0];
       }
 
       return evaluateXPathToStrings(this.valueAttr, inscopeContext, this)[0];
     } catch (error) {
       console.error(error);
-      this.dispatch('error', { message: error });
+      Fore.dispatch(this, 'error', { message: error });
     }
     return null;
   }
@@ -101,6 +106,11 @@ export class FxOutput extends XfAbstractControl {
     return valueWrapper;
   }
 
+  handleReadonly() {
+    // An output is always read-only
+    this.setAttribute('readonly', 'readonly');
+  }
+
   async updateWidgetValue() {
     console.log('updateWidgetValue');
     const valueWrapper = this.shadowRoot.getElementById('value');
@@ -150,9 +160,10 @@ export class FxOutput extends XfAbstractControl {
   }
 
   isReadonly() {
-    this.readonly = true;
-    return this.readonly;
+    return true;
   }
 }
 
-customElements.define('fx-output', FxOutput);
+if (!customElements.get('fx-output')) {
+  customElements.define('fx-output', FxOutput);
+}

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.js';
 
 /**
  * `fx-repeat`
@@ -18,6 +18,8 @@ import {XPathUtil} from "../xpath-util";
  *
  * @customElement
  * @demo demo/todo.html
+ *
+ * todo: it should be seriously be considered to extend FxContainer instead but needs refactoring first.
  */
 export class FxRepeat extends foreElementMixin(HTMLElement) {
   static get properties() {
@@ -100,41 +102,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);
+
+          Fore.dispatch(this, 'path-mutated', { path, index: this.index });
         }
-      });
+      }
+    });
     // }
     this.getOwnerForm().registerLazyElement(this);
 
-
     const style = `
       :host{
       }
@@ -192,31 +199,13 @@ export class FxRepeat extends foreElementMixin(HTMLElement) {
       });
     }
 
-    const seq = evaluateXPath(this.ref, inscope, this.getOwnerForm());
-    // const seq = evaluateXPathToNodes(this.ref, inscope, this.getOwnerForm());
-    if (seq === null) {
-      // Empty sequence
-      this.nodeset = [];
+    const rawNodeset = evaluateXPath(this.ref, inscope, this);
+    if (rawNodeset.length === 1 && Array.isArray(rawNodeset[0])) {
+      // This XPath likely returned an XPath array. Just collapse to that array
+      this.nodeset = rawNodeset[0];
       return;
     }
-
-    if (typeof seq === 'object') {
-      // Either a node or an array
-      if ('nodeType' in seq) {
-        // Node
-        this.nodeset = [seq];
-        return;
-      }
-
-      // if (Array.isArray(seq) && seq.every(item => typeof item === 'object')) {
-      if (Array.isArray(seq)) {
-        // multiple Nodes or maps
-        this.nodeset = seq;
-        return;
-      }
-    }
-
-    throw new Error(`Unexpected result of repeat nodeset: ${seq}`);
+    this.nodeset = rawNodeset;
   }
 
   async refresh(force) {
@@ -264,6 +253,7 @@ export class FxRepeat extends foreElementMixin(HTMLElement) {
 
         newItem.nodeset = this.nodeset[position - 1];
         newItem.index = position;
+        this.getOwnerForm().someInstanceDataStructureChanged = true;
       }
     }
 
@@ -405,4 +395,6 @@ export class FxRepeat extends foreElementMixin(HTMLElement) {
   }
 }
 
-window.customElements.define('fx-repeat', FxRepeat);
+if (!customElements.get('fx-repeat')) {
+  window.customElements.define('fx-repeat', FxRepeat);
+}

package/src/ui/fx-repeatitem.js

@@ -73,16 +73,20 @@ export class FxRepeatitem extends foreElementMixin(HTMLElement) {
     this.inited = true;
   }
 
+  /*
   getModelItem() {
     super.getModelItem();
     // console.log('modelItem in repeatitem ', this.getModelItem()[this.index]);
     return this.getModelItem()[this.index];
   }
+*/
 
   refresh(force) {
-    // console.log('refresh repeatitem: ',this.nodeset);
-    // console.log('refresh repeatitem nodeset: ',this.nodeset);
-    this.modelItem = this.getModel().getModelItem(this.nodeset);
+    this.modelItem = this.getModelItem();
+    // ### register ourselves as boundControl
+    if (!this.modelItem.boundControls.includes(this)) {
+      this.modelItem.boundControls.push(this);
+    }
 
     if (this.modelItem && !this.modelItem.relevant) {
       // await Fore.fadeOutElement(this)
@@ -105,4 +109,6 @@ export class FxRepeatitem extends foreElementMixin(HTMLElement) {
   }
 }
 
-window.customElements.define('fx-repeatitem', FxRepeatitem);
+if (!customElements.get('fx-repeatitem')) {
+  window.customElements.define('fx-repeatitem', FxRepeatitem);
+}

package/src/ui/fx-switch.js

@@ -39,7 +39,7 @@ class FxSwitch extends FxContainer {
   refresh() {
     super.refresh();
     console.log('refresh on switch ');
-    const cases = this.querySelectorAll('fx-case');
+    const cases = this.querySelectorAll(':scope > fx-case');
     if (this.isBound()) {
       Array.from(cases).forEach(caseElem => {
         const name = caseElem.getAttribute('name');
@@ -50,7 +50,7 @@ class FxSwitch extends FxContainer {
         }
       });
     } else {
-      const selected = this.querySelector('.selected-case');
+      const selected = this.querySelector(':scope > .selected-case');
       if (!selected) {
         cases[0].classList.add('selected-case');
       }
@@ -74,4 +74,6 @@ class FxSwitch extends FxContainer {
   }
 }
 
-window.customElements.define('fx-switch', FxSwitch);
+if (!customElements.get('fx-switch')) {
+  window.customElements.define('fx-switch', FxSwitch);
+}

package/src/ui/fx-trigger.js

@@ -110,4 +110,6 @@ export class FxTrigger extends XfAbstractControl {
       */
 }
 
-customElements.define('fx-trigger', FxTrigger);
+if (!customElements.get('fx-trigger')) {
+  customElements.define('fx-trigger', FxTrigger);
+}