@jinntec/fore 1.4.0 → 1.6.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-action-log.js

@@ -0,0 +1,358 @@
+import {XPathUtil} from "../xpath-util";
+
+export class FxActionLog extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+    this.listenTo = [];
+    this.listeners = [];
+  }
+
+  connectedCallback() {
+    const style = `
+      :host {
+        display:block;
+        margin-top:1rem;
+        position:relative;
+        max-width:40em;
+      }
+      .buttons button{
+        margin-right:0.5rem;
+      }
+      .info{
+        padding:0.25em;
+      }
+      ol{
+        background: #efefef;
+        padding: 0.5em 1.5em;
+      }
+      li .info{
+        margin:0.25em 0;
+      }
+      .info{
+        display:grid;
+        grid-template-columns:repeat(2, 1fr);
+        background:orange;
+      }
+      .action.info{
+        background:lightblue;
+      }
+      
+      .event-name{
+        width:14rem;
+        display:inline-block;
+      }
+/*
+      .event-name::before{
+        content:'triggered by';
+        font-size:0.8em;
+        text-decoration:italic;
+      }
+*/
+      #filter{
+        padding:1rem;
+        display:flex;
+      }
+      label{
+        margin-right:0.5rem;
+        white-space:nowrap;
+        display:inline-block;
+      }
+      .log-row{
+        margin:0.25em 0;
+        padding:0.5em;
+        position:relative;
+      }
+      .log-row.empty-row summary{
+        position:relative;
+      }
+      .log-row.empty-row summary{
+        list-style:none;
+        padding-left:1rem;
+      }
+      .log-row.empty-row summary::-webkit-details-marker {
+        display: none;
+      }
+      .outermost{
+        background:lightsteelblue;
+      }
+    `;
+
+    if(localStorage.getItem('fx-action-log-filters')){
+      this.listenTo = JSON.parse(localStorage.getItem('fx-action-log-filters'));
+    }else {
+      this._defaultSettings();
+    }
+
+
+    const html = `
+      <details open>
+        <summary>Event Log <span class="buttons"><button id="del"">del</a></button></span></summary>
+        <details id="filter">
+            <summary>filter <button id="reset">reset filters</button></summary>
+            <div class="boxes"></div>
+        </details>
+        <div id="log"></div>
+      </details>
+    `;
+
+    this.shadowRoot.innerHTML = `
+        <style>
+            ${style}
+        </style>
+        ${html}
+    `;
+
+    const fore = window.document.querySelector('fx-fore');
+    if(!fore){
+      console.error('fx-fore element not found in this page.');
+    }
+    const log = this.shadowRoot.querySelector('#log');
+    fore.classList.add('action-log');
+
+    this.listenTo.forEach(eventName => {
+      if(eventName.show){
+        fore.addEventListener(eventName.name, e => {
+          this._log(e,log);
+        });
+      }
+    });
+
+    const boxes = this.shadowRoot.querySelector('.boxes');
+
+    this.listenTo.forEach(item =>{
+      const lbl = document.createElement('label');
+      lbl.setAttribute('title',item.description);
+      lbl.innerText = item.name;
+      const cbx = document.createElement('input');
+      cbx.setAttribute('type', 'checkbox');
+      cbx.setAttribute('name', item.name);
+      if(item.show){
+        cbx.setAttribute('checked','');
+      }
+      lbl.append(cbx);
+      cbx.addEventListener('click', e =>{
+        console.log('filter box ticked', e);
+        if(!e.target.checked){
+          //remove event listener
+          const fore = document.querySelector('fx-fore');
+          fore.removeEventListener(item.name,this._log);
+          // e.preventDefault();
+          // e.stopPropagation();
+        }
+        const t = this.listenTo.find(evt => evt.name === item.name);
+        e.target.checked ? t.show=true:t.show=false;
+        // console.log('filter', this.listenTo);
+        localStorage.setItem('fx-action-log-filters', JSON.stringify(this.listenTo));
+      })
+      boxes.appendChild(lbl);
+    });
+
+        document.addEventListener('outermost-action-start', e => {
+            this.outermost = true;
+        },{capture:true});
+        document.addEventListener('outermost-action-end', e => {
+            this.outermost = false;
+            this.outermostAppender = null;
+        },{capture:true});
+
+    //buttons
+    const del = this.shadowRoot.querySelector('#del');
+    del.addEventListener('click', e => {
+      this.shadowRoot.querySelector('#log').innerHTML = '';
+    });
+    const reset = this.shadowRoot.querySelector('#reset');
+    reset.addEventListener('click', e => {
+      this._defaultSettings();
+      localStorage.removeItem('fx-action-log-filters');
+      window.location.reload();
+    });
+
+
+
+  }
+
+  _defaultSettings(){
+    this.listenTo=[
+      {name:"action-performed",show:true,description:'fired after an action has been performed'},
+      {name:"click",show:true,description:''},
+      {name:"deleted",show:true,description:'fired after a delete action has been executed'},
+      {name:"dialog-shown",show:true,description:'fired when a dialog has been shown'},
+      {name:"dialog-hidden",show:true,description:''},
+      {name:"error",show:true,description:''},
+      {name: "execute-action", show: true, description: ''},
+      {name:"init",show:false,description:''},
+      {name:"invalid",show:true,description:''},
+      {name:"index-changed",show:true,description:''},
+      {name:"instance-loaded",show:true,description:''},
+      {name:"item-created",show:false,description:''},
+      {name:"loaded",show:true,description:''},
+      {name:"model-construct",show:true,description:''},
+      {name:"model-construct-done",show:true,description:''},
+      {name:"nonrelevant",show:true,description:''},
+      {name:"optional",show:false,description:''},
+      {name:"path-mutated", show:true,description:''},
+      {name:"refresh-done", show:true,description:''},
+      {name:"readonly",show:true,description:''},
+      {name:"readwrite",show:true,description:''},
+      {name:"rebuild-done",show:true,description:''},
+      {name:"required",show:true,description:''},
+      {name:"ready",show:true,description:''},
+      {name:"recalculate-done",show:true,description:''},
+      {name:"relevant",show:false,description:''},
+      {name:"reload",show:true,description:''},
+      {name:"select",show:true,description:''},
+      {name:"deselect",show:true,description:''},
+      {name:"submit",show:true,description:''},
+      {name:"submit-error",show:true,description:''},
+      {name:"submit-done",show:true,description:''},
+      {name:"valid",show:false,description:''},
+            {name: "value-changed", show: true, description: ''},
+            {name: "outermost-action-start", show: true, description: ''},
+            {name: "outermost-action-end", show: true, description: ''}
+        ];
+  }
+
+  _log(e, log) {
+    if(e.target.nodeName === 'FX-ACTION-LOG') return;
+    e.preventDefault();
+    e.stopPropagation();
+
+
+
+
+    const row = document.createElement('div');
+    row.classList.add('log-row');
+    const logRow = this._logDetails(e);
+    if(e.detail &&
+        Object.keys(e.detail).length === 0 &&
+        Object.getPrototypeOf(e.detail) === Object.prototype){
+      row.classList.add('empty-row');
+    }
+
+    row.innerHTML = logRow;
+
+    if(this.outermost){
+      /*
+      outermost-action-start and outermost-action-end are use as marker events only to start/end a list.
+      They don't have aditional information to log.
+       */
+      if(e.type === 'outermost-action-start') return; // we don't want this event to actualy log something
+      if(!this.outermostAppender){
+        this.outermostAppender = document.createElement('ol');
+        log.append(this.outermostAppender);
+      }
+      const li = document.createElement('li');
+      li.innerHTML = logRow;
+      this.outermostAppender.append(li);
+    }else{
+      log.append(row);
+    }
+    const logRowTarget = row.querySelector('.event-target');
+    if(!logRowTarget) return;
+
+    const targetElement = e.target;
+    logRowTarget.addEventListener('click', e => {
+      const alreadyLogged = document.querySelectorAll('.fx-action-log-debug');
+      alreadyLogged.forEach(logged => {
+        logged.classList.remove('fx-action-log-debug')
+      });
+
+      targetElement.dispatchEvent(
+          new CustomEvent('log-action', {
+            composed: false,
+            bubbles: true,
+            cancelable:true,
+            detail: { target:targetElement },
+          }),
+      );
+
+
+      targetElement.classList.add('fx-action-log-debug');
+      targetElement.setAttribute('data-name', targetElement.nodeName)
+      this._highlight(targetElement);
+
+    });
+    // log.append(logElements);
+  }
+
+  _logDetails(e){
+     const {type} = e;
+     // console.log('>>>> event type', type)
+    const path = XPathUtil.getPath(e.target);
+    switch (type){
+      case 'outermost-action-start':
+        return `start`;
+        break;
+      case 'outermost-action-end':
+        return ``;
+        break;
+      case 'execute-action':
+        const stripped = e.detail.action.nodeName.split('-')[1];
+
+        switch (e.detail.action.nodeName){
+          case 'FX-SEND':
+            return `
+              <div class="info action"
+                  <label class="action-name">${stripped} ${e.detail.action.getAttribute('submission')}</label>
+                  <a href="#" class="event-name">${e.detail.event}</a>
+              </div>
+            `;
+            break;
+          default:
+            return `
+              <div class="info action">
+                  <label class="action-name">${stripped}</label>
+                  <a href="#" class="event-name">${e.detail.event}</a>
+              </div>
+            `;
+        }
+        break;
+      default:
+        return `
+        <div class="info event"
+            <label class="event-name">${e.type}</label>
+            <a href="#" class="event-target" title="${path}">${e.target.nodeName.toLowerCase()}</a>
+          ${this._listAttributes(e)}
+        </div>
+    `;
+
+    }
+
+    // }
+  }
+
+  _listAttributes(e){
+    console.log('_listAttributes',e)
+    return ``;
+    // return `${e.detail.model.id}`;
+/*
+    if(e.detail &&
+        Object.keys(e.detail).length === 0 &&
+        Object.getPrototypeOf(e.detail) === Object.prototype){
+      return ``;
+    }else{
+      return `${e.detail.map((item) => `<span>${item}</span>`)}`;
+    }
+*/
+  }
+
+  _highlight(element) {
+        const defaultBG = element.style.backgroundColor;
+        const defaultTransition = element.style.transition;
+
+    element.style.transition = "background 1s";
+    element.style.backgroundColor = "#FDFF47";
+
+        setTimeout(() => {
+      element.style.backgroundColor = defaultBG;
+            setTimeout(() => {
+        element.style.transition = defaultTransition;
+      }, 400);
+    }, 400);
+  }
+
+}
+if (!customElements.get('fx-action-log')) {
+  customElements.define('fx-action-log', FxActionLog);
+}

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', {}));