@jinntec/fore 1.0.0-5 → 1.0.0

package/src/ui/fx-dialog.js

@@ -1,19 +1,19 @@
-import {Fore} from '../fore.js';
-export class FxDialog extends HTMLElement {
+import { Fore } from '../fore.js';
 
-    static get properties() {
-        return {
-            id: String
-        };
-    }
+export class FxDialog extends HTMLElement {
+  static get properties() {
+    return {
+      id: String,
+    };
+  }
 
-    constructor() {
-        super();
-        this.attachShadow({mode: 'open'});
-    }
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+  }
 
-    connectedCallback() {
-        const style = `
+  connectedCallback() {
+    const style = `
           :host {
             display:none;
             height: 100vh;
@@ -28,50 +28,55 @@ export class FxDialog extends HTMLElement {
 
         `;
 
-        this.shadowRoot.innerHTML = this.render(style);
-        this.id = this.getAttribute('id');
+    this.shadowRoot.innerHTML = this.render(style);
+    this.id = this.getAttribute('id');
 
-        // const dialog = document.getElementById(this.id);
+    // const dialog = document.getElementById(this.id);
 
-        const closeBtn = this.querySelector('.close-dialog');
-        if (closeBtn) {
-            closeBtn.addEventListener('click', (e) => {
-                document.getElementById(this.id).classList.remove('show');
-            });
-        }
+    const closeBtn = this.querySelector('.close-dialog');
+    if (closeBtn) {
+      closeBtn.addEventListener('click', () => {
+        this.classList.remove('show');
+      });
+    }
 
-        this.addEventListener('transitionend',()=>{
-            console.log('transitionend');
-            // this.style.display = 'none';
-        });
+    this.addEventListener('transitionend', () => {
+      console.log('transitionend');
+      // this.style.display = 'none';
+    });
 
-        this.focus();
-    }
+    this.focus();
+  }
 
-    render(styles) {
-        return `
+  render(styles) {
+    return `
       <style>
           ${styles}
       </style>
       <slot></slot>
     `;
-    }
+  }
 
-    open(){
-        window.addEventListener('keyup', (e) => {
-            if (e.key === "Escape") {
-                this.hide();
-            }
-        },{once:true});
+  open() {
+    window.addEventListener(
+      'keyup',
+      e => {
+        if (e.key === 'Escape') {
+          this.hide();
+        }
+      },
+      { once: true },
+    );
 
-        this.classList.add('show');
-    }
-
-    async hide(){
-        await Fore.fadeOutElement(this,400);
-        this.classList.remove('show');
-    }
+    this.classList.add('show');
+  }
 
+  async hide() {
+    await Fore.fadeOutElement(this, 400);
+    this.classList.remove('show');
+  }
 }
 
-customElements.define('fx-dialog', FxDialog);
+if (!customElements.get('fx-dialog')) {
+  customElements.define('fx-dialog', FxDialog);
+}

package/src/ui/fx-group.js

@@ -86,4 +86,6 @@ class FxGroup extends FxContainer {
   }
 }
 
-window.customElements.define('fx-group', FxGroup);
+if (!customElements.get('fx-group')) {
+  window.customElements.define('fx-group', FxGroup);
+}

package/src/ui/fx-hint.js

@@ -45,4 +45,7 @@ export class FxHint extends XfAbstractControl {
   }
 */
 }
-customElements.define('fx-hint', FxHint);
+
+if (!customElements.get('fx-hint')) {
+  customElements.define('fx-hint', FxHint);
+}

package/src/ui/fx-inspector.js

@@ -1,44 +1,144 @@
+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;
           }
           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:100vh;
+            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 open>
+                      <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,4 +1,4 @@
-import { evaluateXPath, evaluateXPathToString, evaluateXPathToNodes } from '../xpath-evaluation.js';
+import { evaluateXPathToString, resolveId } from '../xpath-evaluation.js';
 import FxControl from './fx-control.js';
 import { Fore } from '../fore.js';
 
@@ -33,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;
       }
 
@@ -46,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');
@@ -62,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;
     }
@@ -115,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';
@@ -20,6 +21,8 @@ export class FxOutput extends XfAbstractControl {
     super();
     this.attachShadow({ mode: 'open' });
     this.valueAttr = this.hasAttribute('value') ? this.getAttribute('value') : null;
+    // Outputs are always readonly!
+    this.readonly = true;
   }
 
   connectedCallback() {
@@ -85,13 +88,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 +104,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 +158,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() {
@@ -133,7 +135,7 @@ export class FxRepeat extends foreElementMixin(HTMLElement) {
           // const index = prev.index();
           // this.applyIndex(this.index -1);
 
-          this.dispatch('path-mutated', { path, index: this.index });
+          Fore.dispatch(this, 'path-mutated', { path, index: this.index });
         }
       }
     });
@@ -197,31 +199,13 @@ export class FxRepeat extends foreElementMixin(HTMLElement) {
       });
     }
 
-    const seq = evaluateXPath(this.ref, inscope, this);
-    // 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) {
@@ -269,6 +253,7 @@ export class FxRepeat extends foreElementMixin(HTMLElement) {
 
         newItem.nodeset = this.nodeset[position - 1];
         newItem.index = position;
+        this.getOwnerForm().someInstanceDataStructureChanged = true;
       }
     }
 
@@ -410,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

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