@jinntec/fore 2.4.2 → 2.6.0

package/src/fx-model.js

@@ -51,7 +51,7 @@ export class FxModel extends HTMLElement {
             <slot></slot>
         `;
 
-/*
+    /*
       this.addEventListener('model-construct-done', () => {
         // this.modelConstructed = true;
         // console.log('model-construct-done fired ', this.modelConstructed);
@@ -65,12 +65,38 @@ export class FxModel extends HTMLElement {
     this.fore = this.parentNode;
   }
 
-  static lazyCreateModelItem(model, ref, node) {
+  /**
+   * @param {FxModel}           model        The model to create a model item for
+   * @param {string}            ref          The XPath ref that led to this model item
+   * @param {Node}              node         The node the XPath led to
+   * @param {ForeElementMixin}  formElement  The form element making this model. Used to resolve variables against
+   */
+  static lazyCreateModelItem(model, ref, node, formElement) {
     // console.log('lazyCreateModelItem ', node);
-
+    const instanceId = XPathUtil.resolveInstance(formElement, ref);
+
+    if (model.parentNode.createNodes && (node === null || node === undefined)) {
+      // ### intializing ModelItem with default values (as there is no <fx-bind> matching for given ref)
+      const mi = new ModelItem(
+        undefined,
+        ref,
+        Fore.READONLY_DEFAULT,
+        false,
+        Fore.REQUIRED_DEFAULT,
+        Fore.CONSTRAINT_DEFAULT,
+        Fore.TYPE_DEFAULT,
+        null,
+        this,
+        instanceId,
+      );
+
+      // console.log('new ModelItem is instanceof ModelItem ', mi instanceof ModelItem);
+      model.registerModelItem(mi);
+      return mi;
+    }
     let targetNode = {};
     if (node === null || node === undefined) return null;
-    if (node.nodeType === node.TEXT_NODE) {
+    if (node.nodeType === Node.TEXT_NODE) {
       // const parent = node.parentNode;
       // console.log('PARENT ', parent);
       targetNode = node.parentNode;
@@ -81,9 +107,7 @@ export class FxModel extends HTMLElement {
     // const path = fx.evaluateXPath('path()',node);
     let path;
     if (node.nodeType) {
-      const instance = XPathUtil.resolveInstance(model, ref);
-
-      path = XPathUtil.getPath(node, instance);
+      path = XPathUtil.getPath(node, instanceId);
     } else {
       path = null;
       targetNode = node;
@@ -101,6 +125,7 @@ export class FxModel extends HTMLElement {
       Fore.TYPE_DEFAULT,
       targetNode,
       this,
+      instanceId,
     );
 
     // console.log('new ModelItem is instanceof ModelItem ', mi instanceof ModelItem);
@@ -118,7 +143,11 @@ export class FxModel extends HTMLElement {
    *
    */
   async modelConstruct() {
-    console.log(`### <<<<< dispatching model-construct for '${this.fore.id}' >>>>>`);
+    console.info(
+      `%cdispatching model-construct for #${this.parentNode.id}`,
+      'background:lightblue; color:black; padding:.5rem; display:inline-block; white-space: nowrap; border-radius:0.3rem;width:100%;',
+    );
+
     // this.dispatchEvent(new CustomEvent('model-construct', { detail: this }));
     Fore.dispatch(this, 'model-construct', { model: this });
 
@@ -132,25 +161,25 @@ export class FxModel extends HTMLElement {
 
       // Wait until all the instances are built
       await Promise.all(promises);
-            this.instances = Array.from(instances);
-            // console.log('_modelConstruct this.instances ', this.instances);
-			// Await until the model-construct-done event is handled off
-            this.modelConstructed = true;
-            await Fore.dispatch(this, 'model-construct-done', {model: this});
-            this.inited = true;
-            this.updateModel();
-        } else {
-            // ### if there's no instance one will created
-            console.log(`### <<<<< dispatching model-construct-done for '${this.fore.id}' >>>>>`);
-            this.modelConstructed = true;
-            await this.dispatchEvent(
-                new CustomEvent('model-construct-done', {
-                    composed: false,
-                    bubbles: true,
-                    detail: {model: this},
-                }),
-            );
-        }
+      this.instances = Array.from(instances);
+      // console.log('_modelConstruct this.instances ', this.instances);
+      // Await until the model-construct-done event is handled off
+      this.modelConstructed = true;
+      await Fore.dispatch(this, 'model-construct-done', { model: this });
+      this.inited = true;
+      this.updateModel();
+    } else {
+      // ### if there's no instance one will created
+      console.log(`### <<<<< dispatching model-construct-done for '${this.fore.id}' >>>>>`);
+      this.modelConstructed = true;
+      await this.dispatchEvent(
+        new CustomEvent('model-construct-done', {
+          composed: false,
+          bubbles: true,
+          detail: { model: this },
+        }),
+      );
+    }
 
     const functionlibImports = Array.from(this.querySelectorAll('fx-functionlib'));
     await Promise.all(functionlibImports.map(lib => lib.readyPromise));
@@ -416,7 +445,7 @@ export class FxModel extends HTMLElement {
             modelItem.required = compute;
             this.formElement.addToRefresh(modelItem); // let fore know that modelItem needs refresh
             if (!modelItem.node.textContent) {
-/*
+              /*
               console.log(
                 'node is required but has no value ',
                 XPathUtil.getDocPath(modelItem.node),
@@ -468,17 +497,17 @@ export class FxModel extends HTMLElement {
   /**
    * @returns {import('./fx-instance.js').FxInstance}
    */
-    getDefaultInstance() {
-/*
+  getDefaultInstance() {
+    /*
         if (this.instances.length === 0) {
             throw new Error('No instances defined. Fore cannot work without any <data/> elements.');
         }
 */
-        if (this.instances.length) {
-			return this.instances[0];
-		}
-		return this.getInstance('default');
+    if (this.instances.length) {
+      return this.instances[0];
     }
+    return this.getInstance('default');
+  }
 
   getDefaultInstanceData() {
     return this.instances[0].getInstanceData();

package/src/fx-submission.js

@@ -83,10 +83,9 @@ export class FxSubmission extends ForeElementMixin {
   }
 
   async _submit() {
-    console.log('submitting....', this.getAttribute('id'));
     console.info(
-        `%csubmitting #${this.id}`,
-        'background:yellow; color:black; padding:.5rem; display:inline-block; white-space: nowrap; border-radius:0.3rem;width:100%;',
+      `%csubmitting #${this.id}`,
+      'background:yellow; color:black; padding:.5rem; display:inline-block; white-space: nowrap; border-radius:0.3rem;width:100%;',
     );
 
     this.evalInContext();
@@ -101,7 +100,7 @@ export class FxSubmission extends ForeElementMixin {
         this.getOwnerForm().classList.add('submit-validation-failed');
         // ### allow alerts to pop up
         // this.dispatch('submit-error', {});
-        Fore.dispatch(this, 'submit-error', {});
+        Fore.dispatch(this, 'submit-error', { status: 0, message: 'validation failed' });
         this.getModel().parentNode.refresh(true);
         return;
       }
@@ -184,6 +183,7 @@ export class FxSubmission extends ForeElementMixin {
         const serialized = localStorage.getItem(key);
         if (!serialized) {
           Fore.dispatch(this, 'submit-error', {
+            status: 400,
             message: `Error reading key ${key} from localstorage`,
           });
           this.parameters.clear();
@@ -238,11 +238,14 @@ export class FxSubmission extends ForeElementMixin {
       if (!response.ok || response.status > 400) {
         // this.dispatch('submit-error', { message: `Error while submitting ${this.id}` });
         console.info(
-            `%csubmit-error #${this.id}`,
-            'background:red; color:black; padding:.5rem; display:inline-block; white-space: nowrap; border-radius:0.3rem;width:100%;',
+          `%csubmit-error #${this.id}`,
+          'background:red; color:black; padding:.5rem; display:inline-block; white-space: nowrap; border-radius:0.3rem;width:100%;',
         );
 
-        Fore.dispatch(this, 'submit-error', { message: `Error while submitting ${this.id}` });
+        Fore.dispatch(this, 'submit-error', {
+          status: response.status,
+          message: `Error during submit ${this.id}`,
+        });
         return;
       }
 
@@ -265,13 +268,14 @@ export class FxSubmission extends ForeElementMixin {
       // this.dispatch('submit-done', {});
       // console.log(`### <<<<< ${this.id} submit-done >>>>>`);
       Fore.dispatch(this, 'submit-done', {});
+      /*
       console.info(
           `%csubmit-done #${this.id}`,
           'background:green; color:white; padding:.5rem; display:inline-block; white-space: nowrap; border-radius:0.3rem;width:100%;',
       );
-
+*/
     } catch (error) {
-      Fore.dispatch(this, 'submit-error', { error: error.message });
+      Fore.dispatch(this, 'submit-error', { status: 500, error: error.message });
     } finally {
       this.parameters.clear();
       const download = document.querySelector('[download]');
@@ -394,26 +398,27 @@ export class FxSubmission extends ForeElementMixin {
     if (this.replace === 'instance') {
       if (targetInstance) {
         if (this.targetref) {
-
           const [theTarget] = evaluateXPath(
-              this.targetref,
-              targetInstance.instanceData.firstElementChild,
-              this,
+            this.targetref,
+            targetInstance.instanceData.firstElementChild,
+            this,
           );
           console.log('theTarget', theTarget);
-          if(this.responseMediatype === 'application/xml' || this.responseMediatype === 'text/html'){
+          if (
+            this.responseMediatype === 'application/xml' ||
+            this.responseMediatype === 'text/html'
+          ) {
             const clone = data.firstElementChild;
             const parent = theTarget.parentNode;
             parent.replaceChild(clone, theTarget);
             console.log('finally ', parent);
           }
-          if(this.responseMediatype.startsWith('text/')){
+          if (this.responseMediatype.startsWith('text/')) {
             theTarget.textContent = data;
           }
-          if(this.responseMediatype === 'application/json'){
-            console.warn('targetref is not supported for application/json responses')
+          if (this.responseMediatype === 'application/json') {
+            console.warn('targetref is not supported for application/json responses');
           }
-
         } else if (this.into) {
           const [theTarget] = evaluateXPath(
             this.into,
@@ -465,12 +470,21 @@ export class FxSubmission extends ForeElementMixin {
       }
       // document.getElementsByTagName('html')[0].innerHTML = data;
     }
-    if (this.replace === 'target' && contentType.startsWith('text/html')) {
+    if (this.replace === 'target') {
       // const target = this.getAttribute('target');
       const target = this._getProperty('target');
       const targetNode = document.querySelector(target);
       if (targetNode) {
-        targetNode.innerHTML = data;
+        if (contentType.startsWith('text/html')) {
+          targetNode.innerHTML = data;
+        }
+        if (this.responseMediatype.startsWith('image/svg')) {
+          const parser = new DOMParser();
+          const svgDoc = parser.parseFromString(data, 'image/svg+xml');
+
+          const objectURL = URL.createObjectURL(data);
+          targetNode.src = objectURL;
+        }
       } else {
         Fore.dispatch(this, 'submit-error', {
           message: `targetNode for selector ${target} not found`,
@@ -482,10 +496,11 @@ export class FxSubmission extends ForeElementMixin {
     }
   }
 
+  /*
   _handleError() {
     // this.dispatch('submit-error', {});
     Fore.dispatch(this, 'submit-error', {});
-    /*
+    /!*
                     console.log('ERRRORRRRR');
                     this.dispatchEvent(
                         new CustomEvent('submit-error', {
@@ -494,8 +509,9 @@ export class FxSubmission extends ForeElementMixin {
                             detail: {},
                         }),
                     );
-            */
+            *!/
   }
+*/
 
   /*
     mergeNodes(node1, node2) {

package/src/getInScopeContext.js

@@ -48,7 +48,7 @@ function _getInitialContext(node, ref) {
   }
 
   if (XPathUtil.isAbsolutePath(ref)) {
-    const instanceId = XPathUtil.getInstanceId(ref);
+    const instanceId = XPathUtil.getInstanceId(ref, node);
     if (instanceId) {
       return model.getInstance(instanceId).getDefaultContext();
     }
@@ -69,6 +69,7 @@ function _getInitialContext(node, ref) {
 export default function getInScopeContext(node, ref) {
   // console.log('getInScopeContext', ref, node);
 
+  //todo: check for multi-step pathes
   const parentElement = _getElement(node);
   // console.log('getInScopeContext parent', parentElement);
 

package/src/modelitem.js

@@ -6,111 +6,127 @@
  * Each bound node in an instance has exactly one ModelItem associated with it.
  */
 export class ModelItem {
-  /**
-   *
-   * @param {string} path calculated normalized path expression linking to data
-   * @param {string} ref relative binding expression
-   * @param {boolean} readonly - boolean to signal readonly/readwrite state
-   * @param {boolean} relevant - boolean to signal relevant/non-relevant state
-   * @param {boolean} required - boolean to signal required/optional state
-   * @param {boolean} constraint - boolean boolean to signal valid/invalid state
-   * @param {string} type - string expression to set a datatype
-   * @param {Node} node - the node the 'ref' expression is referring to
-   * @param {import('./fx-bind').FxBind} bind - the fx-bind element having created this modelItem
-   */
-  constructor(path, ref, readonly, relevant, required, constraint, type, node, bind) {
     /**
-     * @type {string}
+     *
+     * @param {string} path calculated normalized path expression linking to data
+     * @param {string} ref relative binding expression
+     * @param {boolean} readonly - boolean to signal readonly/readwrite state
+     * @param {boolean} relevant - boolean to signal relevant/non-relevant state
+     * @param {boolean} required - boolean to signal required/optional state
+     * @param {boolean} constraint - boolean boolean to signal valid/invalid state
+     * @param {string} type - string expression to set a datatype
+     * @param {Node} node - the node the 'ref' expression is referring to
+     * @param {import('./fx-bind').FxBind} bind - the fx-bind element having created this modelItem
+     * @param {string} instance - the fx-instance id having created this modelItem
      */
-    this.path = path;
-    /**
-     * @type {string}
-     */
-    this.ref = ref;
-    /**
-     * @type {boolean}
-     */
-    this.constraint = constraint;
-    /**
-     * @type {boolean}
-     */
-    this.readonly = readonly;
-    /**
-     * @type {boolean}
-     */
-    this.relevant = relevant;
-    /**
-     * @type {boolean}
-     */
-    this.required = required;
-    /**
-     * @type {string}
-     */
-    this.type = type;
-    /**
-     * @type {Node}
-     */
-    this.node = node;
-    /**
-     * @type {import('./fx-bind').FxBind}
-     */
-    this.bind = bind;
-    this.changed = false;
-    /**
-     * @type {import('./ui/fx-alert').FxAlert[]}
-     */
-    this.alerts = [];
-    /**
-     * @type {import('./ui/fx-control').default[]}
-     */
-    this.boundControls = [];
-    // this.value = this._getValue();
-  }
+    constructor(
+        path,
+        ref,
+        readonly,
+        relevant,
+        required,
+        constraint,
+        type,
+        node,
+        bind,
+        instance,
+    ) {
+        /**
+         * @type {string}
+         */
+        this.path = path;
+        /**
+         * @type {string}
+         */
+        this.ref = ref;
+        /**
+         * @type {boolean}
+         */
+        this.constraint = constraint;
+        /**
+         * @type {boolean}
+         */
+        this.readonly = readonly;
+        /**
+         * @type {boolean}
+         */
+        this.relevant = relevant;
+        /**
+         * @type {boolean}
+         */
+        this.required = required;
+        /**
+         * @type {string}
+         */
+        this.type = type;
+        /**
+         * @type {Node}
+         */
+        this.node = node;
+        /**
+         * @type {import('./fx-bind').FxBind}
+         */
+        this.bind = bind;
+        this.changed = false;
+        /**
+         * @type {import('./ui/fx-alert').FxAlert[]}
+         */
+        this.alerts = [];
+        /**
+         * @type {import('./ui/abstract-control').default[]}
+         */
+        this.boundControls = [];
+        // this.value = this._getValue();
+        this.instanceId = instance;
+    }
 
-  /*
+    /*
     get ref(){
         return this.bind.ref;
     }
 */
 
-  get value() {
-    if (!this.node.nodeType) return this.node;
+    get value() {
+        if (!this.node) {
+            return null;
+        }
+        if (!this.node.nodeType) return this.node;
 
-    if (this.node.nodeType === Node.ATTRIBUTE_NODE) {
-      return this.node.nodeValue;
+        if (this.node.nodeType === Node.ATTRIBUTE_NODE) {
+            return this.node.nodeValue;
+        }
+        return this.node.textContent;
     }
-    return this.node.textContent;
-  }
 
-  /**
-   * @param  {Node} newVal
-   */
-  set value(newVal) {
-    // console.log('modelitem.setvalue oldVal', this.value);
-    // console.log('modelitem.setvalue newVal', newVal);
+    /**
+     * @param  {Node} newVal
+     */
+    set value(newVal) {
+        // console.log('modelitem.setvalue oldVal', this.value);
+        // console.log('modelitem.setvalue newVal', newVal);
 
-    if (newVal.nodeType === Node.DOCUMENT_NODE) {
-      this.node.replaceWith(newVal.firstElementChild);
-      this.node = newVal.firstElementChild;
-      // this.node.appendChild(newVal.firstElementChild);
-    } else if (newVal.nodeType === Node.ELEMENT_NODE) {
-      this.node.replaceWith(newVal);
-      this.node = newVal;
-      // this.node.appendChild(newVal);
-    } else if (this.node.nodeType === Node.ATTRIBUTE_NODE) {
-      this.node.nodeValue = newVal;
-    } else {
-      this.node.textContent = newVal;
+        if (newVal.nodeType === Node.DOCUMENT_NODE) {
+            this.node.replaceWith(newVal.firstElementChild);
+            this.node = newVal.firstElementChild;
+            // this.node.appendChild(newVal.firstElementChild);
+        } else if (newVal.nodeType === Node.ELEMENT_NODE) {
+            this.node.replaceWith(newVal);
+            this.node = newVal;
+            // this.node.appendChild(newVal);
+        } else if (this.node.nodeType === Node.ATTRIBUTE_NODE) {
+            this.node.nodeValue = newVal;
+        } else {
+            this.node.textContent = newVal;
+        }
     }
-  }
 
-  addAlert(alert) {
-    if (!this.alerts.includes(alert)) {
-      this.alerts.push(alert);
+    addAlert(alert) {
+        if (!this.alerts.includes(alert)) {
+            this.alerts.push(alert);
+        }
     }
-  }
 
-  cleanAlerts() {
-    this.alerts = [];
-  }
+    cleanAlerts() {
+        this.alerts = [];
+    }
 }

package/src/ui/UIElement.js

@@ -0,0 +1,91 @@
+import ForeElementMixin from '../ForeElementMixin.js';
+import { Fore } from '../fore.js';
+
+export class UIElement extends ForeElementMixin {
+  constructor() {
+    super();
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.ondemand = this.hasAttribute('on-demand') ? true : false;
+    this.wasOnDemandInitially = this.ondemand;
+    if (this.ondemand) {
+      this.addEventListener('show-control', () => {
+        this.removeAttribute('on-demand');
+      });
+      this.addTrashIcon();
+    }
+  }
+
+  activate() {
+    console.log('UIElement.activate() called');
+    this.removeAttribute('on-demand');
+    this.style.display = '';
+    if (this.isBound()) {
+      this.refresh(true);
+    }
+    Fore.dispatch(this, 'show-group', {});
+  }
+
+  attributeChangedCallback(name, _oldValue, newValue) {
+    if (name === 'on-demand') {
+      this.ondemand = newValue !== null;
+      if (!newValue && !this.wasOnDemandInitially) {
+        this.removeTrashIcon();
+      } else {
+        this.wasOnDemandInitially = true;
+        this.addTrashIcon();
+      }
+    }
+  }
+
+  static get observedAttributes() {
+    return ['on-demand'];
+  }
+
+  addTrashIcon() {
+    // Only show icon if explicitly marked by control-menu
+
+    if (!this.closest('[show-icon]')) return;
+
+    // const wrapper = this.shadowRoot.querySelector('.wrapper');
+    // if (!wrapper || wrapper.querySelector('.trash')) return;
+    const trash = this.querySelector('.trash');
+    if (trash) return;
+    const icon = document.createElement('span');
+    // icon.innerHTML = '🗑'; // trash icon
+    icon.innerHTML = `
+  <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
+       stroke="currentColor" stroke-width="2" stroke-linecap="round"
+       stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg">
+    <path d="M17.94 17.94C16.13 19.12 14.13 20 12 20C7 20 2.73 15.88 1 12C1.6 10.66 2.43 9.47 3.46 8.48M10.58 10.58C10.21 11.01 10 11.5 10 12C10 13.11 10.89 14 12 14C12.5 14 12.99 13.79 13.42 13.42M6.53 6.53C7.87 5.54 9.39 5 12 5C17 5 21.27 9.12 23 12C22.4 13.34 21.57 14.53 20.54 15.52M1 1L23 23"/>
+  </svg>
+`;
+
+    icon.classList.add('trash');
+    icon.setAttribute('title', 'Hide');
+    // icon.setAttribute('part', 'trash');
+    icon.style.cursor = 'pointer';
+    icon.style.marginLeft = '0.5em';
+
+    icon.addEventListener('click', e => {
+      e.stopPropagation();
+      this.setAttribute('on-demand', 'true');
+      this.style.display = 'none';
+      document.dispatchEvent(new CustomEvent('update-control-menu'));
+      Fore.dispatch(this, 'hide-control', {});
+    });
+
+    this.appendChild(icon);
+  }
+
+  removeTrashIcon() {
+    debugger;
+    const icon = this.querySelector('.trash');
+    if (icon) icon.remove();
+  }
+}
+if (!customElements.get('ui-element')) {
+  customElements.define('ui-element', UIElement);
+}