@jinntec/fore 2.4.1 → 2.5.0

package/src/ui/fx-upload.js

@@ -0,0 +1,304 @@
+import XfAbstractControl from './abstract-control.js';
+import {
+  evaluateXPath,
+  evaluateXPathToString,
+  evaluateXPathToFirstNode,
+} from '../xpath-evaluation.js';
+import getInScopeContext from '../getInScopeContext.js';
+import { Fore } from '../fore.js';
+import { ModelItem } from '../modelitem.js';
+import { debounce } from '../events.js';
+import { FxModel } from '../fx-model.js';
+
+const WIDGETCLASS = 'widget';
+
+/**
+ * `fx-upload` allows to embed uploaded content into XML.
+ *
+ * @customElement
+ */
+
+
+export default class FxUpload extends XfAbstractControl {
+  constructor() {
+    super();
+    this.inited = false;
+    this.attachShadow({ mode: 'open' });
+  }
+
+  static get properties() {
+    return {
+      ...XfAbstractControl.properties,
+      accept: {
+        type: String,
+      },
+      fileNameExpr: {
+        type: String,
+      },
+      mimetypeExpr: {
+        type: String,
+      },
+    };
+  }
+  connectedCallback() {
+
+    this.updateEvent = 'change';
+    this.accept = this.hasAttribute('accept') ? this.getAttribute('accept'):'';
+    this.label = this.hasAttribute('label') ? this.getAttribute('label') : null;
+    const style = `
+            :host{
+                display:inline-block;
+            }
+        `;
+
+    this.shadowRoot.innerHTML = `
+            <style>
+                ${style}
+            </style>
+            ${this.renderHTML(this.ref)}
+        `;
+
+    this.widget = this.getWidget();
+
+    this.addEventListener('mousedown', e => {
+      // ### prevent mousedown events on all control content that is not the widget or within the widget
+      if (!Fore.isWidget(e.target) && !e.target?.classList.contains('fx-hint')) {
+        e.preventDefault();
+        // e.stopImmediatePropagation();
+      }
+      this.widget.focus();
+    });
+
+    // console.log('widget ', this.widget);
+    let listenOn = this.widget; // default: usually listening on widget
+
+    // ### convenience marker event
+    if (this.debounceDelay) {
+      listenOn.addEventListener(
+          this.updateEvent,
+          debounce(
+              this,
+              () => {
+                // console.log('eventlistener ', this.updateEvent);
+                // console.info('handling Event:', event.type, listenOn);
+                this._importUploadedContent();
+              },
+              this.debounceDelay,
+          ),
+      );
+    } else {
+      listenOn.addEventListener(this.updateEvent, async event => {
+        this._importUploadedContent(event);
+      });
+    }
+    this.boundInitialized = false;
+    this.fileNameExpr = this.getAttribute('filename');
+    this.mimetypeExpr = this.getAttribute('mimetype');
+
+  }
+
+  async _importUploadedContent(event) {
+    console.log('_importUploadedContent',event);
+    const file = event.target.files[0];
+
+    this.evalInContext();
+    // update file ref
+    const fileNode = evaluateXPathToFirstNode(this.fileNameExpr,this.nodeset,this.getOwnerForm());
+    if(fileNode){
+      this.fileName = fileNode.nodeValue = file.name;
+    }
+    this.mimetype = file.type;
+
+    // update mediatype
+    const mimetypeNode = evaluateXPathToFirstNode(this.mimetypeExpr,this.nodeset, this.getOwnerForm());
+    if(mimetypeNode){
+      mimetypeNode.nodeValue = this.mimetype;
+    }
+
+    let content = await this._readFile(file);
+    // const setval = this.shadowRoot.getElementById('setvalue');
+    console.log('content',content);
+    if(file.type.endsWith('xml')){
+      const uploadedXML = new DOMParser().parseFromString(content, 'application/xml');
+      content = uploadedXML.firstElementChild;
+    }
+    this.setValue(content);
+    // // this.value=content;
+    // return content;
+  }
+
+  async _readFile(file) {
+    return new Promise((resolve, reject) => {
+      const reader = new FileReader();
+
+      // Determine how to read the file based on MIME type
+      const isTextFile = file.type.startsWith("text/");
+      const readMethod = isTextFile ? "readAsText" : "readAsDataURL";
+
+      reader.onload = () => {
+        const result = reader.result;
+        // If it's a binary file, return only the Base64 content without the MIME prefix
+        if (!isTextFile) {
+          const base64Content = result.split(",")[1]; // Remove MIME prefix
+          resolve(base64Content);
+        } else {
+          resolve(result); // Return plain text
+        }
+      };
+
+      reader.onerror = () => reject(new Error("Error reading file"));
+
+      // Start reading the file
+      reader[readMethod](file);
+    });
+  }
+
+
+
+
+  /**
+   * updates the model with a new value by executing it's `<fx-setvalue>` action.
+   *
+   * In case the `as='node'` is given the bound node is replaced with the widgets' value with is
+   * expected to be a node again.
+   *
+   * @param val the new value to be set
+   */
+  setValue(val) {
+    this.value=val;
+    const modelitem = this.getModelItem();
+
+    if(this.mimetype.endsWith('xml')){
+      this.nodeset.textContent = '';
+      this.nodeset.append(document.importNode(val,true));
+    }else{
+      modelitem.value = val;
+      if(this.mimetype.startsWith('text/')){
+        const cdata = this.nodeset.ownerDocument.createCDATASection(val);
+        this.nodeset.textContent = '';
+        this.nodeset.append(cdata);
+      } else {
+        this.nodeset.textContent = '';
+        this.nodeset.append(val);
+      }
+    }
+
+
+    if (this.getAttribute('class')) {
+      this.classList.add('visited');
+    } else {
+      this.setAttribute('class', 'visited');
+    }
+
+    if (modelitem?.readonly) {
+      console.warn('attempt to change readonly node', modelitem);
+      return; // do nothing when modelItem is readonly
+    }
+
+    // const setval = this.shadowRoot.getElementById('setvalue');
+    // setval.setValue(modelitem, val);
+
+    if (this.modelItem instanceof ModelItem && !this.modelItem?.boundControls.includes(this)) {
+      this.modelItem.boundControls.push(this);
+    }
+    const model = this.getModel();
+    Fore.dispatch(this, 'value-changed', {
+      path: this.modelItem.path,
+      value: this.modelItem.value,
+      oldvalue: "",
+      instanceId:this.modelItem.instanceId,
+      foreId:this.getOwnerForm().id
+    });
+    this.getModel().updateModel();
+    this.getOwnerForm().refresh(true);
+
+    // console.log('data', this.getOwnerForm().getModel().getDefaultInstanceData());
+  }
+
+
+  renderHTML(ref) {
+    return `
+            ${this.label ? `${this.label}` : ''}
+            <slot></slot>
+            <input type="file" ${this.accept !== '' ? `accept="${this.accept}"` : ''}>
+            <fx-setvalue id="setvalue" ref="${ref}"></fx-setvalue>
+        `;
+  }
+
+  /**
+   * The widget is the actual control being used in the UI e.g. a native input control or any
+   * other component that presents a control that can be interacted with.
+   *
+   * This function returns the widget by querying the children of this control for an element
+   * with `class="widget"`. If that cannot be found it searches for an native `input` of any type.
+   * If either cannot be found a `<input type="text">` is created.
+   *
+   * @returns {HTMLElement|*}
+   */
+  getWidget() {
+    return this.shadowRoot.querySelector('input');
+  }
+
+  /**
+   * updates the widget from the modelItem value. During refresh the a control
+   * evaluates it's binding expression to determine the bound node. The bound node corresponds
+   * to a modelItem which acts a the state object of a node. The modelItem determines the value
+   * and the state of the node and set the `value` property of this class.
+   *
+   * @returns {Promise<void>}
+   */
+  async updateWidgetValue() {
+    // this._getValueFromHtmlDom() = this.value;
+
+    let { widget } = this;
+    if (!widget) {
+      widget = this;
+    }
+
+    if (widget.value !== this.value) {
+      // widget.value = this.value;
+    }
+  }
+
+  async refresh(force) {
+    // console.log('fx-control refresh', this);
+    super.refresh(force);
+    // ### if we find a ref on control we have a 'select' control of some kind
+    Fore.refreshChildren(this, force);
+  }
+
+
+
+  evalLabel(optionLabel, node, newEntry) {
+    const labelExpr = optionLabel.substring(1, optionLabel.length - 1);
+    if (!labelExpr) return;
+
+    const label = evaluateXPathToString(labelExpr, node, this);
+    newEntry.textContent = label;
+  }
+
+  createEntry() {
+    return this.template.content.firstElementChild.cloneNode(true);
+    // const content = this.template.content.firstElementChild.cloneNode(true);
+    // return content;
+    // const newEntry = document.importNode(content, true);
+    // this.template.parentNode.appendChild(newEntry);
+    // return newEntry;
+  }
+
+  // eslint-disable-next-line class-methods-use-this
+  _getValueAttribute(element) {
+    let result;
+    Array.from(element.attributes).forEach(attribute => {
+      const attrVal = attribute.value;
+      if (attrVal.indexOf('{') !== -1) {
+        // console.log('avt found ', attribute);
+        result = attribute;
+      }
+    });
+    return result;
+  }
+}
+if (!customElements.get('fx-upload')) {
+  window.customElements.define('fx-upload', FxUpload);
+}

package/src/xpath-util.js

@@ -1,6 +1,100 @@
 import * as fx from 'fontoxpath';
 
 export class XPathUtil {
+  /**
+   * creates DOM Nodes from an XPath locationpath expression. Support namespaced and un-namespaced
+   * nodes.
+   * E.g. 'foo/bar' creates an element 'foo' with an child element 'bar'
+   * 'foo/@bar' creates a 'foo' element with an 'bar' attribute
+   *
+   * supports multiple steps
+   *
+   * @param xpath
+   * @param doc
+   * @param fore
+   * @return {*}
+   */
+  static createElementFromXPath(xpath, doc, fore) {
+    if (!doc) {
+      doc = document.implementation.createDocument(null, null, null); // Create a new XML document if not provided
+    }
+
+    const parts = xpath.split('/');
+    let rootNode = null;
+    let currentNode = null;
+
+    for (const part of parts) {
+      if (!part) continue; // Skip empty parts (e.g., leading slashes)
+
+      // Handle attributes
+      if (part.startsWith('@')) {
+        const attrName = part.slice(1); // Strip '@'
+        if (!currentNode) {
+          throw new Error('Cannot create an attribute without a parent element.');
+        }
+        currentNode.setAttribute(attrName, '');
+      } else {
+        // Handle namespaces if present
+        const [prefix, localName] = part.includes(':') ? part.split(':') : [null, part];
+        const namespace = prefix ? XPathUtil.lookupNamespace(fore, prefix) : null;
+
+        const newElement = namespace
+          ? doc.createElementNS(namespace, part)
+          : doc.createElement(localName);
+
+        if (!rootNode) {
+          rootNode = newElement; // Set as the root node
+        } else {
+          currentNode.appendChild(newElement);
+        }
+
+        currentNode = newElement;
+      }
+    }
+
+    if (!rootNode) {
+      throw new Error('Invalid XPath; no root element could be created.');
+    }
+
+    return rootNode;
+  }
+
+  /**
+   * looks up namespace on ownerForm. Though not strictly in the sense of resolving namespaces in XML, the
+   * fx-fore element is a convenient place to put namespace declarations for 2 reasons:
+   * - this way namespaces are scoped to a Fore element
+   * - as fx-fore is a web component we can add our xmlns attributes as we got no restrictions to attributes
+   *   though strictly speaking they are no xmlns declarations and just serve the purpose of namespace lookup.
+   *
+   * @param boundElement
+   * @param prefix
+   * @return {string}
+   */
+  static lookupNamespace(ownerForm, prefix) {
+    return ownerForm.getAttribute(`xmlns:${prefix}`);
+  }
+
+  static querySelectorAll(querySelector, start) {
+    const queue = [start];
+    const found = [];
+    while (queue.length) {
+      const item = queue.shift();
+      for (const child of Array.from(item.children).reverse()) {
+        queue.unshift(child);
+      }
+
+      if (item.matches && item.matches('template')) {
+        queue.unshift(item.content);
+      }
+
+      if (item.matches && item.matches(querySelector)) {
+        found.push(item);
+      }
+    }
+
+    return found;
+  }
+
   /**
    * Alternative to `contains` that respects shadowroots
    * @param {Node} ancestor
@@ -74,7 +168,7 @@ export class XPathUtil {
       (start.parentNode.nodeType !== Node.DOCUMENT_NODE ||
         start.parentNode.nodeType !== Node.DOCUMENT_FRAGMENT_NODE)
     ) {
-      return start.parentNode.closest('[ref]');
+      return this.getClosest('[ref],fx-repeatitem', start.parentNode);
     }
     return null;
   }
@@ -87,7 +181,9 @@ export class XPathUtil {
    * path, otherwise <code>false</code>.
    */
   static isAbsolutePath(path) {
-    return path != null && (path.startsWith('/') || path.startsWith('instance('));
+    return (
+      path != null && (path.startsWith('/') || path.startsWith('instance(') || path.startsWith('$'))
+    );
   }
 
   /**
@@ -104,9 +200,10 @@ export class XPathUtil {
    *
    * Otherwise instance id is extracted from function and returned. If all fails null is returned.
    * @param {string} ref
+   * @param {HTMLElement}  boundElement  The element related to this ref. Used to resolve variables
    * @returns {string}
    */
-  static getInstanceId(ref) {
+  static getInstanceId(ref, boundElement) {
     if (!ref) {
       return 'default';
     }
@@ -117,6 +214,23 @@ export class XPathUtil {
       const result = ref.substring(ref.indexOf('(') + 1);
       return result.substring(1, result.indexOf(')') - 1);
     }
+    if (ref.startsWith('$')) {
+      // this variable might actually point to an instance
+      const variableName = ref.match(/\$(?<variableName>[a-zA-Z0-9\-\_]+).*/)?.groups?.variableName;
+      let closestActualFormElement = boundElement;
+      while (closestActualFormElement && !('inScopeVariables' in closestActualFormElement)) {
+        closestActualFormElement =
+          closestActualFormElement.nodeType === Node.ATTRIBUTE_NODE
+            ? closestActualFormElement.ownerElement
+            : closestActualFormElement.parentNode;
+      }
+
+      const correspondingVariable = closestActualFormElement?.inScopeVariables?.get(variableName);
+      if (!correspondingVariable) {
+        return null;
+      }
+      return this.getInstanceId(correspondingVariable.valueQuery, correspondingVariable);
+    }
     return null;
   }
 
@@ -126,9 +240,9 @@ export class XPathUtil {
    * @returns {string}
    */
   static resolveInstance(boundElement, path) {
-    let instanceId = XPathUtil.getInstanceId(path);
+    let instanceId = XPathUtil.getInstanceId(path, boundElement);
     if (!instanceId) {
-      instanceId = XPathUtil.getInstanceId(boundElement.getAttribute('ref'));
+      instanceId = XPathUtil.getInstanceId(boundElement.getAttribute('ref'), boundElement);
     }
     if (instanceId !== null) {
       return instanceId;