@jinntec/fore 1.0.0-0 → 1.0.0-3

package/src/ui/fx-container.js

@@ -30,18 +30,21 @@ export class FxContainer extends foreElementMixin(HTMLElement) {
             </style>
             ${html}
     `;
+
+    this.getOwnerForm().registerLazyElement(this);
   }
 
   /**
    * (re)apply all state properties to this control.
    */
-  refresh() {
-    console.log('### FxContainer.refresh on : ', this);
+  refresh(force) {
+    if (!force && this.hasAttribute('refresh-on-view')) return;
+    // console.log('### FxContainer.refresh on : ', this);
 
     if (this.isBound()) {
       this.evalInContext();
       this.modelItem = this.getModelItem();
-      this.value = this.modelItem.value;
+      // this.value = this.modelItem.value;
     }
 
     // await this.updateComplete;
@@ -50,7 +53,7 @@ export class FxContainer extends foreElementMixin(HTMLElement) {
     if (this._getForm().ready) {
       this.handleModelItemProperties();
     }
-    Fore.refreshChildren(this);
+    Fore.refreshChildren(this, force);
   }
 
   handleModelItemProperties() {
@@ -78,6 +81,8 @@ export class FxContainer extends foreElementMixin(HTMLElement) {
 
   handleRelevant() {
     // console.log('mip valid', this.modelItem.enabled);
+    if (!this.modelItem) return;
+
     if (this.isEnabled() !== this.modelItem.enabled) {
       if (this.modelItem.enabled) {
         this.dispatchEvent(new CustomEvent('enabled', {}));

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-dialog.js

@@ -0,0 +1,68 @@
+export class FxDialog extends HTMLElement {
+
+    static get properties() {
+        return {
+            id: String
+        };
+    }
+
+    constructor() {
+        super();
+        this.attachShadow({mode: 'open'});
+    }
+
+    connectedCallback() {
+        const style = `
+          :host {
+            display: none;
+            height: 100vh;
+            width:100vw;
+            position:fixed;
+            left:0;
+            top:0;
+            right:0;
+            bottom:0;
+          }
+        `;
+
+        this.shadowRoot.innerHTML = this.render(style);
+        this.id = this.getAttribute('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');
+            });
+        }
+
+        this.focus();
+    }
+
+    render(styles) {
+        return `
+      <style>
+          ${styles}
+      </style>
+      <slot></slot>
+    `;
+    }
+
+    open(){
+        window.addEventListener('keyup', (e) => {
+            if (e.key === "Escape") {
+                this.hide();
+            }
+        },{once:true});
+
+        this.classList.add('show');
+    }
+
+    hide(){
+        this.classList.remove('show');
+    }
+
+}
+
+customElements.define('fx-dialog', FxDialog);

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,120 @@
+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);
+
+    // adding space around value to allow matching of 'words'
+    const spaced = ` ${evaluated} `;
+
+    const valAttr = ` ${this.getAttribute('value')} `;
+    input.value = evaluated;
+    input.setAttribute('id', id);
+    if (valAttr.indexOf(spaced) !== -1) {
+      input.checked = true;
+    }
+  }
+}
+
+customElements.define('fx-items', FxItems);

package/src/ui/fx-output.js

@@ -1,4 +1,7 @@
 import XfAbstractControl from './abstract-control.js';
+import { evaluateXPath, evaluateXPathToStrings } 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.
@@ -20,8 +23,6 @@ export class FxOutput extends XfAbstractControl {
   }
 
   connectedCallback() {
-    console.log('connectedCallback output', this.shadowRoot);
-
     const style = `
           :host {
             display: inline-block;
@@ -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);
@@ -57,18 +68,32 @@ export class FxOutput extends XfAbstractControl {
   }
 
   async refresh() {
-    // ### 1. eval 'value' attr
+    // Resolve the ref first. The ref will set the `nodeset` which is important for the 'context'
+    if (this.ref) {
+      await super.refresh();
+    }
 
+    // ### 2. Eval the value
     if (this.valueAttr) {
       this.value = this.getValue();
       await this.updateWidgetValue();
-      return;
     }
-    // ### 2. eval 'ref' attr
-    if (this.ref) {
-      super.refresh();
+  }
+
+  getValue() {
+    // return 'foobar';
+    try {
+      const inscopeContext = getInScopeContext(this, this.valueAttr);
+      if (this.hasAttribute('html')) {
+        return evaluateXPath(this.valueAttr, inscopeContext, this);
+      }
+
+      return evaluateXPathToStrings(this.valueAttr, inscopeContext, this)[0];
+    } catch (error) {
+      console.error(error);
+      this.dispatch('error', { message: error });
     }
-    // ### 3. use inline content which is there anyway
+    return null;
   }
 
   getWidget() {
@@ -77,7 +102,50 @@ export class FxOutput extends XfAbstractControl {
   }
 
   async updateWidgetValue() {
+    console.log('updateWidgetValue');
     const valueWrapper = this.shadowRoot.getElementById('value');
+
+    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;
+
+        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;
+      valueWrapper.innerHTML = this.value.outerHTML;
+
+      // this.shadowRoot.appendChild(this.value);
+      return;
+    }
+
     valueWrapper.innerHTML = this.value;
   }