@jinntec/fore 1.5.0 → 1.7.0

package/src/tools/helpers.js

@@ -0,0 +1,132 @@
+export function addClass(element, strClass) {
+  element.classList.add(strClass);
+}
+
+export function removeClass(element, strClass) {
+  element.classList.remove(strClass);
+}
+
+// Checks whether the text node is not empty or contains only the EOL
+export function isEmptyTextNode(node) {
+  if (typeof node !== 'object') {
+    throw new Error(
+      `isEmptyTextNode: Expected argument node of type object, ${typeof node} given.`,
+    );
+  }
+
+  return /^\s*$/.test(node.textContent);
+}
+
+// Checks whether the node or its children contains only text information
+export function containsOnlyText(node, checkChildren) {
+  if (typeof node !== 'object') {
+    throw new Error(
+      `containsOnlyText: Expected argument node of type object, ${typeof node} given.`,
+    );
+  }
+
+  checkChildren = checkChildren || false;
+
+  let result = false;
+  let nodeTmp = null;
+
+  // does the node contain only text nodes?
+  if (checkChildren) {
+    for (let i = 0, len = node.childNodes.length; i < len; i += 1) {
+      nodeTmp = node.childNodes[i];
+      result =
+        nodeTmp.nodeType === Node.TEXT_NODE ||
+        nodeTmp.nodeType === Node.COMMENT_NODE ||
+        nodeTmp.nodeType === Node.CDATA_SECTION_NODE;
+
+      if (!result) {
+        break;
+      }
+    }
+  } else {
+    // check the node type if it doesn't have any children
+    result =
+      node.nodeType === Node.TEXT_NODE ||
+      node.nodeType === Node.COMMENT_NODE ||
+      node.nodeType === Node.CDATA_SECTION_NODE;
+  }
+
+  return result;
+}
+
+// Create element wrapper -- allows to set attributes using the config object.
+export function newElement(elem, attrs) {
+  const el = document.createElement(elem);
+
+  attrs = attrs || {};
+  for (const attr of Object.keys(attrs)) {
+    el.setAttribute(attr, attrs[attr]);
+  }
+
+  return el;
+}
+
+ // Helper function for options view
+export function drawOptionRow(optionCode, optionText) {
+  const row = newElement('span', { class: 'adi-opt' });
+  row.innerHTML = `<label><input type="checkbox" data-opt="${optionCode}">${optionText}</label>`;
+
+  return row;
+}
+
+// Renders the options panel
+export function drawOptions() {
+  const ui = newElement('div', { id: 'adi-opts-view', class: 'adi-hidden' });
+  const head1 = newElement('span', { class: 'adi-opt-heading' });
+  const head2 = newElement('span', { class: 'adi-opt-heading' });
+  const close = newElement('span', { class: 'adi-opt-close' });
+
+  head1.textContent = 'General options';
+  head2.textContent = 'Observed nodes';
+
+  ui.appendChild(head1);
+  ui.appendChild(drawOptionRow('saving', 'Enable saving of settings'));
+  ui.appendChild(drawOptionRow('makeVisible', 'Scroll to the active element in DOM View'));
+  ui.appendChild(drawOptionRow('omitEmptyText', 'Hide empty text nodes'));
+  ui.appendChild(drawOptionRow('foldText', 'Fold the text nodes'));
+  ui.appendChild(drawOptionRow('transparent', 'Enable transparent background'));
+  ui.appendChild(head2);
+  ui.appendChild(drawOptionRow('nodeTypes-3', 'Text node'));
+  ui.appendChild(drawOptionRow('nodeTypes-8', 'Comment node'));
+  // ui.appendChild(drawOptionRow('nodeTypes-1', 'Element node'));
+  // ui.appendChild(drawOptionRow('nodeTypes-9', 'Document node'));
+  ui.appendChild(close);
+
+  return ui;
+}
+
+// Stops event propagation and also prevents the default behavior.
+export function pauseEvent(e) {
+  if (e.stopPropagation) {
+    e.stopPropagation();
+  }
+
+  if (e.preventDefault) {
+    e.preventDefault();
+  }
+
+  e.cancelBubble = true;
+  e.returnValue = false;
+
+  return false;
+}
+// Helper function for attributes view
+export function drawAttrRow(attrName, attrValue) {
+  const row = newElement('span', { class: 'adi-attr' });
+  switch (attrName.toLowerCase()) {
+    case 'defaultaction':
+      row.innerHTML = `<label>${attrName}: <select data-attr="${attrName}" value="${attrValue}"><option>perform</option><option>cancel</option></label>`;
+      break;
+    case 'delay':
+      row.innerHTML = `<label>${attrName}: <input type="number" data-attr="${attrName}" value="${attrValue}" readonly="readonly"></label>`;
+      break;
+    default:
+      row.innerHTML = `<label>${attrName}: <input type="text" data-attr="${attrName}" value="${attrValue}" readonly="readonly"></label>`;
+  }
+  return row;
+}

package/src/ui/abstract-control.js

@@ -2,6 +2,9 @@ import '../fx-model.js';
 import { foreElementMixin } from '../ForeElementMixin.js';
 import { ModelItem } from '../modelitem.js';
 import { Fore } from '../fore.js';
+import {XPathUtil} from "../xpath-util";
+import getInScopeContext from "../getInScopeContext";
+import { evaluateXPathToFirstNode} from '../xpath-evaluation.js';
 
 /**
  * `AbstractControl` -
@@ -69,7 +72,41 @@ export default class AbstractControl extends foreElementMixin(HTMLElement) {
       // this.control = this.querySelector('#control');
 
       if(!this.nodeset){
-        this.style.display = 'none';
+
+        const create = this.closest('[create]');
+        if(create){
+          // ### check if parent element exists
+          let attrName,parentPath, parentNode;
+
+          if(this.ref.includes('/')){
+            parentPath = this.ref.substring(0, this.ref.indexOf('/'));
+            const inscope = getInScopeContext(this.parentNode, this.ref);
+            parentNode = evaluateXPathToFirstNode(parentPath,inscope,this);
+
+            if(parentNode && parentNode.nodeType === Node.ELEMENT_NODE){
+              if(this.ref.includes('@')){
+                attrName = this.ref.substring(this.ref.indexOf('/')+2);
+                parentNode.setAttribute(attrName,'');
+              }else{
+                Fore.dispatch(this,'warn',{message:'"create" is not implemented for elements'})
+              }
+            }
+          }else{
+            let inscope = getInScopeContext(this, this.ref);
+
+            if(this.ref.includes('@')) {
+              attrName = this.ref.substring(this.ref.indexOf('@') + 1);
+              inscope.setAttribute(attrName, '');
+            }else{
+              Fore.dispatch(this,'warn',{message:'"create" is not implemented for elements'})
+              // inscope = getInScopeContext(this.parentNode, this.ref);
+            }
+          }
+        }else{
+          // ### this actually makes the control nonrelevant
+          // todo: we should call a template function here to allow detachment of event-listeners and resetting eventual state
+          this.style.display = 'none';
+        }
         return;
       }
 
@@ -119,6 +156,9 @@ export default class AbstractControl extends foreElementMixin(HTMLElement) {
         this.handleModelItemProperties();
 
         // if(!this.closest('fx-fore').ready) return; // state change event do not fire during init phase (initial refresh)
+        if(this.getOwnerForm().initialRun){
+          Fore.dispatch(this,'init',{});
+        }
         if (!this.getOwnerForm().ready) return; // state change event do not fire during init phase (initial refresh)
         if (currentVal !== this.value ) {
           // todo: discuss how to prevent unnecessary/unwanted value-changes e.g. when repeatitems are inserted
@@ -254,9 +294,7 @@ export default class AbstractControl extends foreElementMixin(HTMLElement) {
   // todo - review alert handling altogether. There could be potentially multiple ones in model
   handleValid() {
     // console.log('mip valid', this.modelItem.required);
-    const alert = this.querySelector('fx-alert');
 
-    const mi = this.getModelItem();
     // console.log('late modelItem', mi);
     if (this.isValid() !== this.modelItem.constraint) {
       if (this.modelItem.constraint) {

package/src/ui/fx-alert.js

@@ -33,7 +33,6 @@ export class FxAlert extends AbstractControl {
   }
 
   async updateWidgetValue() {
-    console.log('alert update', this);
     this.innerHTML = this.value;
   }
 }

package/src/ui/fx-container.js

@@ -1,5 +1,4 @@
 import '../fx-model.js';
-import { Fore } from '../fore.js';
 import { foreElementMixin } from '../ForeElementMixin.js';
 
 /**
@@ -32,6 +31,18 @@ export class FxContainer extends foreElementMixin(HTMLElement) {
     `;
 
     this.getOwnerForm().registerLazyElement(this);
+
+/*
+    this.addEventListener('mousedown', e => {
+
+      if(e.target === this){
+        e.preventDefault();
+        // e.stopImmediatePropagation();
+      }
+    } );
+*/
+
+    this.setAttribute('tabindex','0');
   }
 
   /**
@@ -58,7 +69,7 @@ export class FxContainer extends foreElementMixin(HTMLElement) {
   }
 
   /**
-   * anly relevance is processed for container controls
+   * relevance is processed for container controls only
    */
   handleModelItemProperties() {
     this.handleRelevant();
@@ -71,7 +82,7 @@ export class FxContainer extends foreElementMixin(HTMLElement) {
   handleRelevant() {
     // console.log('mip valid', this.modelItem.enabled);
     if (!this.modelItem) {
-      console.log('container is not relevant');
+      // console.log('container is not relevant');
       this.removeAttribute('relevant','');
       this.setAttribute('nonrelevant','');
       this.dispatchEvent(new CustomEvent('disabled', {}));