@jinntec/fore 1.5.0 → 1.7.0

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

@@ -0,0 +1,435 @@
+
+/**
+ * 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 = `
+        @import '../../resources/fore.css';
+      
+        :host {
+          display:block;
+          font-size:0.8em;
+          background:rgba(250, 250, 250, 0.9);
+        }
+        .container{
+            margin-left:1em;
+        }
+        .header{
+            margin-left:0;
+        }
+
+        ::slot[name='header']{
+            margin-left:-1em;
+        }
+        /* Syntax highlighting for JSON objects */
+        ul.json-dict, ol.json-array {
+          list-style-type: none;
+          margin: 0 0 0 1px;
+          border-left: 1px dotted #ccc;
+          padding-left: 2em;
+        }
+        .json-string {
+          // color: #0B7500;
+        }
+        .json-literal {
+          color: #1A01CC;
+          font-weight: bold;
+        }
+        
+        /* Toggle button */
+        a.json-toggle {
+          position: relative;
+          color: inherit;
+          text-decoration: none;
+        }
+        a.json-toggle:focus {
+          outline: none;
+        }
+        a.json-toggle:before {
+          content: "\\25BC"; /* down arrow */
+          position: absolute;
+          display: inline-block;
+          width: 1em;
+          left: -1.2em;
+          font-size:0.8em;
+        }
+        a.json-toggle.collapsed:before {
+          content: "\\25B6"; /* left arrow */
+        }
+        
+        /* Collapsable placeholder links */
+        a.json-placeholder {
+          color: #aaa;
+          padding: 0 1em;
+          text-decoration: none;
+        }
+        a.json-placeholder:hover {
+          text-decoration: underline;
+        }
+        
+        /* Copy path icon */
+        .pick-path {
+          color: lightgray;
+          cursor: pointer;
+          margin-left: 3px;
+        }
+        
+        .pick-path:hover {
+          color: darkgray;
+        }
+        
+      `;
+
+        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 = `
+          <div class="container"></div>
+      `;
+
+        this.shadowRoot.innerHTML = `
+          <style>
+              ${style}
+          </style>
+          <slot name="header">
+            <header class="header">${instanceId}</header>
+          </slot>
+          <slot></slot>
+          ${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';
+    }
+
+    _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]);
+            }
+        }
+
+        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 (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>';
+                }
+
+                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 (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
+
+                        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 += '{}';
+            }
+        }
+
+        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;
+            };
+        }
+        return this._typeof(obj);
+    }
+
+    isCollapsable(arg) {
+        return arg instanceof Object && Object.keys(arg).length > 0;
+    }
+
+
+/*
+    setup() {
+        // Create shadow DOM
+
+        // Add styles to shadow DOM
+        const style = document.createElement('style');
+        style.textContent = `
+    /!* add your CSS styles here *!/
+  `;
+        shadowRoot.appendChild(style);
+
+        // Move content to shadow DOM
+        const container = this.container.cloneNode(true);
+        shadowRoot.appendChild(container);
+        this.container.remove();
+        this.container = shadowRoot.querySelector('.json-path-picker-container');
+        this.clearBtn = shadowRoot.querySelector('.json-path-picker-clear-btn');
+        this.jsonTextarea = shadowRoot.querySelector('.json-path-picker-json');
+        this.treeView = shadowRoot.querySelector('.json-path-picker-tree');
+        this.resultView = shadowRoot.querySelector('.json-path-picker-result');
+
+        const data = {
+            "automobiles": [
+                {
+                    "maker": "Nissan",
+                    "model": "Teana",
+                    "year": 2000
+                },
+                {
+                    "maker": "Honda",
+                    "model": "Jazz",
+                    "year": 2023
+                },
+                {
+                    "maker": "Honda",
+                    "model": "Civic",
+                    "year": 2007
+                },
+                {
+                    "maker": "Toyota",
+                    "model": "Yaris",
+                    "year": 2008
+                },
+                {
+                    "maker": "Honda",
+                    "model": "Accord",
+                    "year": 2011
+                }
+            ],
+            "motorcycles": [{
+                "maker": "Honda",
+                "model": "ST1300",
+                "year": 2012
+            }]
+        }
+
+        this.updateTree(JSON.stringify(data));
+
+    }
+*/
+
+
+    static get observedAttributes() {
+        return ['data'];
+    }
+
+    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");
+        }
+    }
+
+    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;
+    }
+
+}
+
+
+if (!customElements.get('fx-json-instance')) {
+    customElements.define('fx-json-instance', FxJsonInstance);
+}

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

@@ -0,0 +1,133 @@
+
+export class FxLogItem extends HTMLElement {
+
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+    this.eventName = '';
+    this.shortName = '';
+    this.shortInfo = '';
+    this.shortPath='';
+    this.xpath ='';
+  }
+
+
+  connectedCallback() {
+    const style = `
+      :host {
+        height: auto;
+        font-size: 0.8em;
+        font-weight: 400;
+
+      }
+
+      a,a:link,a:visited{
+        color:black;
+      }
+      a{
+        position:relative;
+      }
+      a[alt]:hover::after {
+        content:attr(alt);
+        position:absolute; 
+        left:0;
+        top:1em;
+        border.thin solid;
+        padding:0.5em;
+        background:white;
+        z-index:1;
+        min-width:5em;
+        border:thin solid;
+        white-space:nowrap;
+        overflow-wrap:break-word;
+      }
+
+     .info{
+        padding:0 0.5em;
+        margin:0.1rem 0;
+        background:white;
+        position:relative;
+        border:1px solid #ddd;
+        border-radius:1em;       
+        box-shadow: 1px 1px 5px 0px rgba(79, 136, 183, 0.8);
+      }
+      :host(.action) .info{
+        border-radius:0;
+        border-color:steelblue;
+      }
+
+      .info label{
+        grid-area:left;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+      .info a{
+        grid-area:right;
+        justify-self:end;
+      }
+      .info:hover{
+        outline:3px solid lightblue;       
+        transition:height 0.4s;
+      }
+
+       summary{
+        padding:1em;
+        display:flex;
+        flex-wrap:wrap;
+        padding:0.5em 0;
+        cursor:pointer;
+        gap:0.25em;
+      }
+/*
+      .log-name{
+        font-size:1.2em;
+      }
+      .log-name, .short-info{
+        width:10em;
+      }
+*/
+      .event-name{
+        width:12em;
+        text-align:right;
+        }
+      .short-info{
+        flex:3;
+        overflow:hidden;
+        white-space:nowrap;
+        text-overflow:ellipsis;
+      }
+    `;
+
+    this.eventName = this.getAttribute('event-name');
+    this.shortName = this.getAttribute('short-name');
+    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 html = `
+       <details class="info send">
+              <summary>
+                <span class="log-name"><a href="#" title="${shortPath}" data-path="${this.xpath}">${this.shortName}</a></span>
+                <span class="short-info">${this.shortInfo}</span>
+                <span class="event-name">${this.eventName}</span>                    
+              </summary>
+            <slot></slot>
+        </details>
+    `;
+
+    this.shadowRoot.innerHTML = `
+        <style>
+            ${style}
+        </style>
+        ${html}
+    `;
+  }
+
+}
+if (!customElements.get('fx-log-item')) {
+  customElements.define('fx-log-item', FxLogItem);
+}