@jinntec/fore 2.1.1 → 2.3.0

package/src/tools/fx-json-instance.js

@@ -1,25 +1,24 @@
-
 /**
  * A simple collapsible treeview for showing JSON data.
  *
  */
 class FxJsonInstance extends HTMLElement {
-    // constructor(container, options = {}) {
-    constructor() {
-        super();
-        const shadowRoot = this.attachShadow({mode: 'open'});
-        this.instanceElement = null;
-        this.foreSelector = null;
-    }
-
-    connectedCallback() {
-        this.container = this.querySelector('.json-path-picker-container');
-        this.foreSelector = this.hasAttribute('fore') ? this.getAttribute('fore') : 'fx-fore'; // default to first one in doc
-        this.render();
-    }
-
-    render() {
-        const style = `
+  // constructor(container, options = {}) {
+  constructor() {
+    super();
+    const shadowRoot = this.attachShadow({ mode: 'open' });
+    this.instanceElement = null;
+    this.foreSelector = null;
+  }
+
+  connectedCallback() {
+    this.container = this.querySelector('.json-path-picker-container');
+    this.foreSelector = this.hasAttribute('fore') ? this.getAttribute('fore') : 'fx-fore'; // default to first one in doc
+    this.render();
+  }
+
+  render() {
+    const style = `
         @import '../../resources/fore.css';
       
         :host {
@@ -96,17 +95,17 @@ class FxJsonInstance extends HTMLElement {
         
       `;
 
-        const instanceId = this.hasAttribute('instance') ? this.getAttribute('instance') : 'default';
-        const fore = document.querySelector(this.foreSelector);
-        if(!fore){
-            throw new Error(`this '${this.foreSelector}' does not match a fx-fore element`);
-        }
+    const instanceId = this.hasAttribute('instance') ? this.getAttribute('instance') : 'default';
+    const fore = document.querySelector(this.foreSelector);
+    if (!fore) {
+      throw new Error(`this '${this.foreSelector}' does not match a fx-fore element`);
+    }
 
-        const html = `
+    const html = `
           <div class="container"></div>
       `;
 
-        this.shadowRoot.innerHTML = `
+    this.shadowRoot.innerHTML = `
           <style>
               ${style}
           </style>
@@ -117,204 +116,218 @@ class FxJsonInstance extends HTMLElement {
           ${html}
       `;
 
-        // fore.addEventListener('ready', e => {
-
-            const instanceElement = document.querySelector(`#${instanceId}`);
-            if(!instanceElement || instanceElement.nodeName !== 'FX-INSTANCE' || instanceElement.getAttribute('type') !== 'json'){
-                throw new Error(`this '${instanceId}' does not match an fx-instance element or is not of type JSON`);
-            }
-            const container = this.shadowRoot.querySelector('.container');
-
-            const json = instanceElement.instanceData;
-            let tree = this.json2html(json,{"outputWithQuotes":true});
-            if (this.isCollapsable(json)) tree = "<a href='#' class=\"json-toggle\"></a>".concat(tree); // Insert HTML in target DOM element
-
-            container.innerHTML = tree;
-
-            const toggles = this.shadowRoot.querySelectorAll('.json-toggle');
-            toggles.forEach(toggle => {
-               toggle.addEventListener('click', this._handleToggleEvent.bind(this));
-            });
-            // container.addEventListener('click', (event) => this._handleToggleEvent);
-        // });
-    }
-
-
-    disconnectedCallback() {
-    }
-
-    _isHidden(elem) {
-        var width = elem.offsetWidth;
-        var height = elem.offsetHeight;
-        return width === 0 && height === 0 || window.getComputedStyle(elem).display === 'none';
+    // fore.addEventListener('ready', e => {
+
+    const instanceElement = document.querySelector(`#${instanceId}`);
+    if (
+      !instanceElement ||
+      instanceElement.nodeName !== 'FX-INSTANCE' ||
+      instanceElement.getAttribute('type') !== 'json'
+    ) {
+      throw new Error(
+        `this '${instanceId}' does not match an fx-instance element or is not of type JSON`,
+      );
     }
-
-    _handleToggleEvent(event) {
-        // Change class
-        // event.preventDefault();
-        // event.stopPropagation();
-
-        const elm = event.target;
-        elm.classList.toggle('collapsed'); // Fetch every json-dict and json-array to toggle them
-
-        var subTarget = this._siblings(elm, 'ul.json-dict, ol.json-array', function (el) {
-            el.style.display = el.style.display === '' || el.style.display === 'block' ? 'none' : 'block';
-        }); // ForEach subtarget, previous siblings return array so we parse it
-
-        for (var i = 0; i < subTarget.length; i += 1) {
-            if (!this._isHidden(subTarget[i])) {
-                // Parse every siblings with '.json-placehoder' and remove them (previous add by else)
-                this._siblings(subTarget[i], '.json-placeholder', function (el) {
-                    return el.parentNode.removeChild(el);
-                });
-            } else {
-                // count item in object / array
-                var childs = subTarget[i].children;
-                var count = 0;
-
-                for (var j = 0; j < childs.length; j += 1) {
-                    if (childs[j].tagName === 'LI') {
-                        count += 1;
-                    }
-                }
-
-                var placeholder = count + (count > 1 ? ' items' : ' item'); // Append a placeholder
-                subTarget[i].insertAdjacentHTML('afterend', "<a href class=\"json-placeholder\">".concat(placeholder, "</a>"));
-            }
-        } // Prevent propagation
-
-
-        event.stopPropagation();
-        event.preventDefault();
-    }
-
-    _siblings(el, sel, callback) {
-        var sibs = [];
-
-        for (var i = 0; i < el.parentNode.children.length; i += 1) {
-            var child = el.parentNode.children[i];
-
-            if (child !== el && typeof sel === 'string' && child.matches(sel)) {
-                sibs.push(child);
-            }
-        } // If a callback is passed, call it on each sibs
-
-
-        if (callback && typeof callback === 'function') {
-            for (var _i = 0; _i < sibs.length; _i += 1) {
-                callback(sibs[_i]);
-            }
+    const container = this.shadowRoot.querySelector('.container');
+
+    const json = instanceElement.instanceData;
+    let tree = this.json2html(json, { outputWithQuotes: true });
+    if (this.isCollapsable(json)) tree = '<a href=\'#\' class="json-toggle"></a>'.concat(tree); // Insert HTML in target DOM element
+
+    container.innerHTML = tree;
+
+    const toggles = this.shadowRoot.querySelectorAll('.json-toggle');
+    toggles.forEach(toggle => {
+      toggle.addEventListener('click', this._handleToggleEvent.bind(this));
+    });
+    // container.addEventListener('click', (event) => this._handleToggleEvent);
+    // });
+  }
+
+  disconnectedCallback() {}
+
+  _isHidden(elem) {
+    const width = elem.offsetWidth;
+    const height = elem.offsetHeight;
+    return (width === 0 && height === 0) || window.getComputedStyle(elem).display === 'none';
+  }
+
+  _handleToggleEvent(event) {
+    // Change class
+    // event.preventDefault();
+    // event.stopPropagation();
+
+    const elm = event.target;
+    elm.classList.toggle('collapsed'); // Fetch every json-dict and json-array to toggle them
+
+    const subTarget = this._siblings(elm, 'ul.json-dict, ol.json-array', el => {
+      el.style.display = el.style.display === '' || el.style.display === 'block' ? 'none' : 'block';
+    }); // ForEach subtarget, previous siblings return array so we parse it
+
+    for (let i = 0; i < subTarget.length; i += 1) {
+      if (!this._isHidden(subTarget[i])) {
+        // Parse every siblings with '.json-placehoder' and remove them (previous add by else)
+        this._siblings(subTarget[i], '.json-placeholder', el => el.parentNode.removeChild(el));
+      } else {
+        // count item in object / array
+        const childs = subTarget[i].children;
+        let count = 0;
+
+        for (let j = 0; j < childs.length; j += 1) {
+          if (childs[j].tagName === 'LI') {
+            count += 1;
+          }
         }
 
-        return sibs;
+        const placeholder = count + (count > 1 ? ' items' : ' item'); // Append a placeholder
+        subTarget[i].insertAdjacentHTML(
+          'afterend',
+          '<a href class="json-placeholder">'.concat(placeholder, '</a>'),
+        );
+      }
+    } // Prevent propagation
+
+    event.stopPropagation();
+    event.preventDefault();
+  }
+
+  _siblings(el, sel, callback) {
+    const sibs = [];
+
+    for (let i = 0; i < el.parentNode.children.length; i += 1) {
+      const child = el.parentNode.children[i];
+
+      if (child !== el && typeof sel === 'string' && child.matches(sel)) {
+        sibs.push(child);
+      }
+    } // If a callback is passed, call it on each sibs
+
+    if (callback && typeof callback === 'function') {
+      for (let _i = 0; _i < sibs.length; _i += 1) {
+        callback(sibs[_i]);
+      }
     }
 
-    json2html(json, options) {
-        let html = '';
-
-        if (typeof json === 'string') {
-            // Escape tags
-            const tmp = json.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
-
-            if (this.isUrl(tmp)) {
-                html += "<a href=\"".concat(tmp, "\" class=\"json-string\">").concat(tmp, "</a>");
-            } else {
-                html += "<span class=\"json-string\">\"".concat(tmp, "\"</span>");
-            }
-        } else if (typeof json === 'number') {
-            html += "<span class=\"json-literal\">".concat(json, "</span>");
-        } else if (typeof json === 'boolean') {
-            html += "<span class=\"json-literal\">".concat(json, "</span>");
-        } else if (json === null) {
-            html += '<span class="json-literal">null</span>';
-        } else if (json instanceof Array) {
-            if (json.length > 0) {
-                html += '[<ol class="json-array">';
-
-                for (var i = 0; i < json.length; i += 1) {
-                    html += "<li data-key-type=\"array\" data-key=\"".concat(i, "\">"); // Add toggle button if item is collapsable
-
-                    if (this.isCollapsable(json[i])) {
-                        html += '<a href="#" class="json-toggle"></a>';
-                    }
-
-                    html += this.json2html(json[i], options); // Add comma if item is not last
-
-                    if (i < json.length - 1) {
-                        html += ',';
-                    }
-
-                    html += '</li>';
-                }
+    return sibs;
+  }
+
+  json2html(json, options) {
+    let html = '';
+
+    if (typeof json === 'string') {
+      // Escape tags
+      const tmp = json
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;');
+
+      if (this.isUrl(tmp)) {
+        html += '<a href="'.concat(tmp, '" class="json-string">').concat(tmp, '</a>');
+      } else {
+        html += '<span class="json-string">"'.concat(tmp, '"</span>');
+      }
+    } else if (typeof json === 'number') {
+      html += '<span class="json-literal">'.concat(json, '</span>');
+    } else if (typeof json === 'boolean') {
+      html += '<span class="json-literal">'.concat(json, '</span>');
+    } else if (json === null) {
+      html += '<span class="json-literal">null</span>';
+    } else if (json instanceof Array) {
+      if (json.length > 0) {
+        html += '[<ol class="json-array">';
+
+        for (let i = 0; i < json.length; i += 1) {
+          html += '<li data-key-type="array" data-key="'.concat(i, '">'); // Add toggle button if item is collapsable
+
+          if (this.isCollapsable(json[i])) {
+            html += '<a href="#" class="json-toggle"></a>';
+          }
+
+          html += this.json2html(json[i], options); // Add comma if item is not last
+
+          if (i < json.length - 1) {
+            html += ',';
+          }
+
+          html += '</li>';
+        }
 
-                html += '</ol>]';
+        html += '</ol>]';
+      } else {
+        html += '[]';
+      }
+    } else if (this._typeof(json) === 'object') {
+      let keyCount = Object.keys(json).length;
+
+      if (keyCount > 0) {
+        html += '{<ul class="json-dict">';
+
+        for (const key in json) {
+          if (json.hasOwnProperty(key)) {
+            html += '<li data-key-type="object" data-key="'.concat(key, '">');
+            const keyRepr = options.outputWithQuotes
+              ? '<span class="json-string">"'.concat(key, '"</span>')
+              : key; // Add toggle button if item is collapsable
+
+            if (this.isCollapsable(json[key])) {
+              html += '<a href=\'#\' class="json-toggle">'.concat(keyRepr, '</a>');
             } else {
-                html += '[]';
+              html += keyRepr;
             }
-        } else if (this._typeof(json) === 'object') {
-            let keyCount = Object.keys(json).length;
 
-            if (keyCount > 0) {
-                html += '{<ul class="json-dict">';
+            // ### keep the following comment for later - pick path is a good idea but needs to be adapted to XPath syntax
+            // html += '<span class="pick-path" title="Pick path">&#10697;</span>';
+            html += ': '.concat(this.json2html(json[key], options)); // Add comma if item is not last
 
-                for (var key in json) {
-                    if (json.hasOwnProperty(key)) {
-                        html += "<li data-key-type=\"object\" data-key=\"".concat(key, "\">");
-                        const keyRepr = options.outputWithQuotes ? "<span class=\"json-string\">\"".concat(key, "\"</span>") : key; // Add toggle button if item is collapsable
+            keyCount -= 1;
 
-                        if (this.isCollapsable(json[key])) {
-                            html += "<a href='#' class=\"json-toggle\">".concat(keyRepr, "</a>");
-                        } else {
-                            html += keyRepr;
-                        }
-
-                        // ### keep the following comment for later - pick path is a good idea but needs to be adapted to XPath syntax
-                        // html += '<span class="pick-path" title="Pick path">&#10697;</span>';
-                        html += ": ".concat(this.json2html(json[key], options)); // Add comma if item is not last
-
-                        keyCount -= 1;
-
-                        if (keyCount > 0) {
-                            html += ',';
-                        }
-
-                        html += '</li>';
-                    }
-                }
-
-                html += '</ul>}';
-            } else {
-                html += '{}';
+            if (keyCount > 0) {
+              html += ',';
             }
-        }
-
-        return html;
-    }
-
-    isUrl(string) {
-        var regexp = /^(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#:.?+=&%@!\-/]))?/;
-        return regexp.test(string);
-    }
 
-    _typeof(obj) {
-        if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
-            this._typeof = function _typeof(obj) {
-                return typeof obj;
-            };
-        } else {
-            this._typeof = function _typeof(obj) {
-                return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
-            };
+            html += '</li>';
+          }
         }
-        return this._typeof(obj);
+
+        html += '</ul>}';
+      } else {
+        html += '{}';
+      }
     }
 
-    isCollapsable(arg) {
-        return arg instanceof Object && Object.keys(arg).length > 0;
+    return html;
+  }
+
+  isUrl(string) {
+    const regexp =
+      /^(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#:.?+=&%@!\-/]))?/;
+    return regexp.test(string);
+  }
+
+  _typeof(obj) {
+    if (typeof Symbol === 'function' && typeof Symbol.iterator === 'symbol') {
+      this._typeof = function _typeof(obj) {
+        return typeof obj;
+      };
+    } else {
+      this._typeof = function _typeof(obj) {
+        return obj &&
+          typeof Symbol === 'function' &&
+          obj.constructor === Symbol &&
+          obj !== Symbol.prototype
+          ? 'symbol'
+          : typeof obj;
+      };
     }
+    return this._typeof(obj);
+  }
 
+  isCollapsable(arg) {
+    return arg instanceof Object && Object.keys(arg).length > 0;
+  }
 
-/*
+  /*
     setup() {
         // Create shadow DOM
 
@@ -375,61 +388,57 @@ class FxJsonInstance extends HTMLElement {
     }
 */
 
+  static get observedAttributes() {
+    return ['data'];
+  }
 
-    static get observedAttributes() {
-        return ['data'];
-    }
-
-    attributeChangedCallback(name, oldValue, newValue) {
-        if (name === 'data') {
-            this.jsonTextarea.value = newValue;
-            this.updateTree(newValue);
-        }
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (name === 'data') {
+      this.jsonTextarea.value = newValue;
+      this.updateTree(newValue);
     }
-
-
-    updateTree(jsonString) {
-        try {
-            this.data = JSON.parse(jsonString);
-            this.treeView.innerHTML = "";
-            this.treeView.appendChild(this.createTreeView(this.data, ""));
-        } catch (e) {
-            console.error(e);
-            alert("Invalid JSON");
-        }
+  }
+
+  updateTree(jsonString) {
+    try {
+      this.data = JSON.parse(jsonString);
+      this.treeView.innerHTML = '';
+      this.treeView.appendChild(this.createTreeView(this.data, ''));
+    } catch (e) {
+      console.error(e);
+      alert('Invalid JSON');
     }
-
-    createTreeView(data, path) {
-        let ul = document.createElement("ul");
-        ul.classList.add("jp-ul");
-        if (Array.isArray(data)) {
-            data.forEach((item, index) => {
-                let li = document.createElement("li");
-                li.classList.add("jp-li");
-                let newPath = path + "[" + index + "]";
-                li.appendChild(this.createItemView(newPath, item));
-                ul.appendChild(li);
-            });
-        } else if (typeof data === "object" && data !== null) {
-            Object.keys(data).forEach(key => {
-                let li = document.createElement("li");
-                li.classList.add("jp-li");
-                let newPath = path + "." + key;
-                li.appendChild(this.createItemView(newPath, data[key]));
-                ul.appendChild(li);
-            });
-        } else {
-            let li = document.createElement("li");
-            li.classList.add("jp-li");
-            li.appendChild(this.createItemView(path, data));
-            ul.appendChild(li);
-        }
-        return ul;
+  }
+
+  createTreeView(data, path) {
+    const ul = document.createElement('ul');
+    ul.classList.add('jp-ul');
+    if (Array.isArray(data)) {
+      data.forEach((item, index) => {
+        const li = document.createElement('li');
+        li.classList.add('jp-li');
+        const newPath = `${path}[${index}]`;
+        li.appendChild(this.createItemView(newPath, item));
+        ul.appendChild(li);
+      });
+    } else if (typeof data === 'object' && data !== null) {
+      Object.keys(data).forEach(key => {
+        const li = document.createElement('li');
+        li.classList.add('jp-li');
+        const newPath = `${path}.${key}`;
+        li.appendChild(this.createItemView(newPath, data[key]));
+        ul.appendChild(li);
+      });
+    } else {
+      const li = document.createElement('li');
+      li.classList.add('jp-li');
+      li.appendChild(this.createItemView(path, data));
+      ul.appendChild(li);
     }
-
+    return ul;
+  }
 }
 
-
 if (!customElements.get('fx-json-instance')) {
-    customElements.define('fx-json-instance', FxJsonInstance);
+  customElements.define('fx-json-instance', FxJsonInstance);
 }

package/src/tools/fx-log-item.js

@@ -1,17 +1,14 @@
-
 export class FxLogItem extends HTMLElement {
-
   constructor() {
     super();
     this.attachShadow({ mode: 'open' });
     this.eventName = '';
     this.shortName = '';
     this.shortInfo = '';
-    this.shortPath='';
-    this.xpath ='';
+    this.shortPath = '';
+    this.xpath = '';
   }
 
-
   connectedCallback() {
     const style = `
       :host {
@@ -100,13 +97,12 @@ export class FxLogItem extends HTMLElement {
 
     this.eventName = this.getAttribute('event-name');
     this.shortName = this.getAttribute('short-name');
-    this.shortInfo = this.hasAttribute('short-info') ? this.getAttribute('short-info'):'';
+    this.shortInfo = this.hasAttribute('short-info') ? this.getAttribute('short-info') : '';
     this.xpath = this.getAttribute('xpath');
 
-
-    const cut = this.xpath.substring(this.xpath.indexOf('/fx-fore'), this.xpath.length);;
-    const xpathCut = "/" + cut;
-    const shortPath = xpathCut.replaceAll('fx-','');
+    const cut = this.xpath.substring(this.xpath.indexOf('/fx-fore'), this.xpath.length);
+    const xpathCut = `/${cut}`;
+    const shortPath = xpathCut.replaceAll('fx-', '');
 
     const html = `
        <details class="info send">
@@ -126,7 +122,6 @@ export class FxLogItem extends HTMLElement {
         ${html}
     `;
   }
-
 }
 if (!customElements.get('fx-log-item')) {
   customElements.define('fx-log-item', FxLogItem);