@jinntec/fore 1.4.0 → 1.6.0

package/src/ui/fx-group.js

@@ -1,4 +1,3 @@
-import { html } from 'lit-element';
 import { Fore } from '../fore.js';
 // import XfAbstractControl from "./fx-abstract-control";
 import { FxContainer } from './fx-container.js';
@@ -36,7 +35,7 @@ class FxGroup extends FxContainer {
   }
 
   render() {
-    return html`
+    return `
       <slot></slot>
     `;
   }
@@ -52,10 +51,10 @@ class FxGroup extends FxContainer {
 
   initializeChildren(node) {
     const children = Array.from(node.children);
-    console.log('_initializeChildren ', children);
+    // console.log('_initializeChildren ', children);
 
     children.forEach(child => {
-      console.log('child ', child);
+      // console.log('child ', child);
 
       if (Fore.isUiElement(child.nodeName)) {
         child.init(this.model);

package/src/ui/fx-hint.js

@@ -1,10 +1,8 @@
-import { html, css } from 'lit-element';
-
 import XfAbstractControl from './abstract-control.js';
 
 export class FxHint extends XfAbstractControl {
   static get styles() {
-    return css`
+    return `
       :host {
         display: block;
         height: auto;
@@ -22,7 +20,7 @@ export class FxHint extends XfAbstractControl {
   }
 
   render() {
-    return html`
+    return `
       <slot></slot>
     `;
   }

package/src/ui/fx-inspector.js

@@ -1,4 +1,4 @@
-import { Fore } from '../fore.js';
+import { prettifyXml } from '../functions/common-function.js';
 
 /**
  * lists out all live instances in html 'details' and 'summary' elements.
@@ -92,10 +92,10 @@ export class FxInspector extends HTMLElement {
 
     Array.from(pre).forEach(element => {
       const inst = fore.getModel().getInstance(element.getAttribute('id'));
-      if (inst.type === 'xml') {
+      if (inst.getAttribute('type') === 'xml') {
         element.innerText = this.serializeDOM(inst.instanceData);
       }
-      if (inst.type === 'json') {
+      if (inst.getAttribute('type') === 'json') {
         element.innerText = JSON.stringify(inst.instanceData, undefined, 2);
       }
     });
@@ -112,7 +112,7 @@ export class FxInspector extends HTMLElement {
             <slot></slot>
             <span class="handle"></span>
                 ${instances.map(
-                  (instance, index) => `
+                  (instance) => `
                   <details>
                       <summary>${instance.id}</summary>
                       <pre id="${instance.id}"></pre>
@@ -125,7 +125,6 @@ export class FxInspector extends HTMLElement {
     const handle = this.shadowRoot.querySelector('.handle');
     handle.addEventListener('click', e => {
       // console.log('toggling');
-      const { target } = e;
       if (this.hasAttribute('open')) {
         this.removeAttribute('open');
       } else {
@@ -141,7 +140,7 @@ export class FxInspector extends HTMLElement {
     }
     // console.log('serializeDOM', data);
     const ser = new XMLSerializer().serializeToString(data);
-    return Fore.prettifyXml(ser);
+    return prettifyXml(ser);
   }
 }
 

package/src/ui/fx-items.js

@@ -1,6 +1,7 @@
-import { evaluateXPathToString, resolveId } from '../xpath-evaluation.js';
+import { evaluateXPath,evaluateXPathToString, resolveId } from '../xpath-evaluation.js';
 import FxControl from './fx-control.js';
 import { Fore } from '../fore.js';
+import { XPathUtil} from "../xpath-util.js";
 
 /**
  * FxItems provices a templated list over its bound nodes. It is not standalone but expects to be used
@@ -27,10 +28,38 @@ export class FxItems extends FxControl {
 
   connectedCallback() {
     super.connectedCallback();
+    // Some other library is stealing focus when clicking on the label of a checkbox list.
+    // The browser should handle this, but we need to manually focus the checkbox if the label is pressed
+    // TODO: find a better solution
+    this.addEventListener('mousedown', e => {
+      // const items = this.querySelectorAll('[value]');
+
+      if (!Fore.isWidget(e.target)) {
+        e.preventDefault();
+        e.stopImmediatePropagation();
+      }
 
-    this.addEventListener('click', e => {
+      if (e.target.nodeName === 'LABEL') {
+        const target = resolveId(e.target.getAttribute('for'), this);
+        target.focus();
+      }
+    });
+
+    // Some other library is stealing focus when clicking on the label of a checkbox list.
+    // The browser should handle this, but we need to manually focus the checkbox if the label is pressed
+    // TODO: find a better solution
+    this.addEventListener('mousedown', e => {
       const items = this.querySelectorAll('[value]');
 
+      if (e.target.nodeName === 'LABEL') {
+	      const target = resolveId(e.target.getAttribute('for'), this);
+	      target.focus();
+      }
+	});
+    this.addEventListener('click', e => {
+      e.preventDefault;
+      e.stopPropagation();
+      const items = this.querySelectorAll('[value]');
       let target;
       if (e.target.nodeName === 'LABEL') {
         target = resolveId(e.target.getAttribute('for'), this);
@@ -46,7 +75,7 @@ export class FxItems extends FxControl {
       this.setAttribute('value', val.trim());
 
       // ### check for parent control
-      const parentBind = Fore.getClosest('[ref]', this.parentNode);
+      const parentBind = XPathUtil.getClosest('[ref]', this.parentNode);
       if (!parentBind) return;
       const modelitem = parentBind.getModelItem();
       const setval = this.shadowRoot.getElementById('setvalue');
@@ -62,7 +91,7 @@ export class FxItems extends FxControl {
   async updateWidgetValue() {
     // console.log('setting items value');
 
-    const parentBind = Fore.getClosest('[ref]', this.parentNode);
+    const parentBind = XPathUtil.getClosest('[ref]', this.parentNode);
     if (parentBind) {
       this.value = parentBind.value;
     }
@@ -84,28 +113,40 @@ export class FxItems extends FxControl {
    */
   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 ###
+    // ### create unique id to connect label and input
+    const id = Fore.createUUID();
 
+    // ### handle 'label'
     const label = newEntry.querySelector('label');
-    label.textContent = node.textContent;
-
-    const id = Fore.createUUID();
+    const lblExpr = Fore.getExpression(label.textContent);
+
+    // ### xml / JSON
+    if(node.nodeType){
+      const lblEvaluated = evaluateXPathToString(lblExpr, node, this);
+      label.textContent = lblEvaluated;
+    } else{
+      const labelExpr = Fore.getExpression(lblExpr);
+      label.textContent = node[labelExpr];
+    }
     label.setAttribute('for', id);
 
+    // ### handle the 'value'
     // 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 = evaluateXPathToString(cutted, node, newEntry);
+    // const cutted = expr.substring(1, expr.length - 1);
+    const cutted = Fore.getExpression(expr);
+    let evaluated;
+    if(node.nodeType){
+      evaluated =  evaluateXPathToString(cutted, node, newEntry);
+    }else{
+      evaluated = node[cutted];
+    }
 
     // adding space around value to allow matching of 'words'
     const spaced = ` ${evaluated} `;
-
     const valAttr = ` ${this.getAttribute('value')} `;
     input.value = evaluated;
     input.setAttribute('id', id);

package/src/ui/fx-output.js

@@ -31,6 +31,7 @@ export class FxOutput extends XfAbstractControl {
     const style = `
           :host {
             display: inline-block;
+            max-width:100%;
           }
           #widget {
             display: inline-block;
@@ -38,14 +39,8 @@ export class FxOutput extends XfAbstractControl {
           .label{
             display: inline-block;
           }
-          table,tbody{
-            width:100%;
-          }
-          th{
-            text-align:left;
-          }
-          td{
-            padding-right:1rem;
+          #value{
+            max-width:100%;
           }
         `;
 
@@ -53,7 +48,7 @@ export class FxOutput extends XfAbstractControl {
             <slot name="label"></slot>
             
             <span id="value">
-                <slot></slot>
+                <slot name="default"></slot>
             </span>
         `;
 
@@ -117,7 +112,7 @@ export class FxOutput extends XfAbstractControl {
   async updateWidgetValue() {
     // console.log('updateWidgetValue');
     const valueWrapper = this.shadowRoot.getElementById('value');
-
+    valueWrapper.innerHTML = '';
 
     // if (this.mediatype === 'markdown') {
     //   const md = markdown(this.nodeset);
@@ -126,13 +121,27 @@ export class FxOutput extends XfAbstractControl {
 
     if (this.mediatype === 'html') {
       if (this.modelItem.node) {
-        /*
-        valueWrapper.innerHTML = this.modelItem.node.outerHTML;
-        return;
-*/
 
+        const defaultSlot = this.shadowRoot.querySelector('#default');
         const { node } = this.modelItem;
+        if (node.nodeType) {
+
+          valueWrapper.append(node);
+          // this.appendChild(node);
+          return;
+        }
+
+        // ### try to parse as string
+        const tmpDoc = new DOMParser().parseFromString(node,'text/html');
+        const theNode = tmpDoc.body.childNodes;
+        // console.log('actual node', theNode)
+        Array.from(theNode).forEach(n =>{
+          valueWrapper.append(n);
+        });
+        // valueWrapper.append(theNode);
 
+        // valueWrapper.innerHTML=node;
+/*
         if (node.nodeType) {
           this.appendChild(node);
           return;
@@ -141,11 +150,19 @@ export class FxOutput extends XfAbstractControl {
           // valueWrapper.appendChild(obj[1]);
           this.appendChild(obj[1]);
         });
+*/
+/*
+        Object.entries(node).map(obj => {
+          // valueWrapper.appendChild(obj[1]);
+          this.appendChild(obj[1]);
+        });
+*/
+
         return;
       }
 
       // this.innerHTML = this.value.outerHTML;
-      valueWrapper.innerHTML = this.value.outerHTML;
+      // valueWrapper.innerHTML = this.value.outerHTML;
 
       // this.shadowRoot.appendChild(this.value);
       return;
@@ -153,8 +170,10 @@ export class FxOutput extends XfAbstractControl {
 
     if(this.mediatype === 'image'){
       const img = document.createElement('img');
-      img.setAttribute('src',this.value);
-      this.appendChild(img);
+		img.setAttribute('src',this.value);
+		// Reset the output before adding the image
+		this.innerHTML = '';
+      valueWrapper.appendChild(img);
       return;
     }