@jinntec/fore 0.25.0 → 1.0.0-2

package/src/ui/fx-control.js

@@ -1,5 +1,7 @@
 import XfAbstractControl from './abstract-control.js';
-import { evaluateXPathToNodes, 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,11 +56,27 @@ 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') {
+      this.widget.addEventListener('keyup', event => {
+        if (event.keyCode === 13) {
+          // Cancel the default action, if needed
+          event.preventDefault();
+          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) {
@@ -76,7 +94,12 @@ class FxControl extends XfAbstractControl {
         `;
   }
 
+  /**
+   *
+   * @returns {HTMLElement|*}
+   */
   getWidget() {
+    if (this.widget) return this.widget;
     let widget = this.querySelector(`.${WIDGETCLASS}`);
     if (!widget) {
       widget = this.querySelector('input');
@@ -109,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 = evaluateXPathToNodes(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);
@@ -133,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

@@ -1,33 +1,117 @@
-import { html, css } from 'lit-element';
-
 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';
 
 /**
- * todo
+ * 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 XfAbstractControl {
-  static get styles() {
-    return css`
-      :host {
-        display: block;
-        height: auto;
-        font-size: 0.8em;
-        font-weight: 400;
-        font-style: italic;
-      }
-    `;
-  }
-
+export class FxItems extends FxControl {
   static get properties() {
     return {
       ...super.properties,
+      valueAttr: {
+        type: String,
+      },
     };
   }
 
-  render() {
-    return html`
-      <slot></slot>
-    `;
+  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,4 +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.
@@ -7,17 +10,19 @@ export class FxOutput extends XfAbstractControl {
   static get properties() {
     return {
       ...super.properties,
+      valueAttr: {
+        type: String,
+      },
     };
   }
 
   constructor() {
     super();
     this.attachShadow({ mode: 'open' });
+    this.valueAttr = this.hasAttribute('value') ? this.getAttribute('value') : null;
   }
 
   connectedCallback() {
-    console.log('connectedCallback output', this.shadowRoot);
-
     const style = `
           :host {
             display: inline-block;
@@ -28,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>
         `;
 
@@ -46,19 +60,94 @@ 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);
     });
   }
 
+  async refresh() {
+    // ### 1. eval 'value' attr
+    // await super.refresh();
+
+    if (this.valueAttr) {
+      this.value = this.getValue();
+      await this.updateWidgetValue();
+      return;
+    }
+    // ### 2. eval 'ref' attr
+    if (this.ref) {
+      super.refresh();
+    }
+    // ### 3. use inline content which is there anyway
+  }
+
+  getValue() {
+    // return 'foobar';
+    try {
+      const inscopeContext = getInScopeContext(this, this.valueAttr);
+      if (this.hasAttribute('html')) {
+        return evaluateXPath(this.valueAttr, inscopeContext, this);
+      }
+      return evaluateXPathToString(this.valueAttr, inscopeContext, this);
+    } catch (error) {
+      console.error(error);
+      this.dispatch('error', { message: error });
+    }
+    return null;
+  }
+
   getWidget() {
     const valueWrapper = this.shadowRoot.getElementById('value');
     return valueWrapper;
   }
 
   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.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;
+      valueWrapper.innerHTML = this.value.outerHTML;
+
+      // this.shadowRoot.appendChild(this.value);
+      return;
+    }
+
     valueWrapper.innerHTML = this.value;
   }