@jinntec/fore 2.1.1 → 2.3.0

package/src/tools/adi.js

@@ -1,87 +1,87 @@
 import {
-    addClass,
-    removeClass,
-    isEmptyTextNode,
-    containsOnlyText,
-    newElement,
-    drawOptions,
-    pauseEvent,
-    drawAttrRow
+  addClass,
+  removeClass,
+  isEmptyTextNode,
+  containsOnlyText,
+  newElement,
+  drawOptions,
+  pauseEvent,
+  drawAttrRow,
 } from './helpers.js';
 
-import {Fore} from '../fore.js';
+import { Fore } from '../fore.js';
 
 function isAttributeShown(name, sourceNode) {
-    if(name === 'style') return false;
-    return true;
-    // return name === 'id' || name === 'ref' || name === 'event';
+  if (name === 'style') return false;
+  return true;
+  // return name === 'id' || name === 'ref' || name === 'event';
 }
 
 class ADI {
-    constructor(rootElement, instance) {
-		this.sourceNodeByInspectorNodeLookup = new Map();
-
-        this.uiView = null;
-        this.menuView = null;
-        this.domView = null;
-        this.attrView = null;
-        this.optsView = null;
-		/**
-		 * The current active element. Note this is the element in the DOM view
-		 */
-        this.activeElement = null;
-        this.vertResizing = false;
-        this.horizResizing = false;
-        this.pathScrolling = null;
-        this.elemLookup = false;
-        this.styleBackup = '';
-        this.xPos = 0;
-        this.delegatedEvents = [];
-
-        this.options = {
-            align: 'right', // NOTE: left is not supported in this version
-            split: 50,
-            minSplit: 30,
-            visible: true,
-            saving: false,
-            transparent: true,
-            omitEmptyText: true,
-            makeVisible: true,
-            foldText: true,
-            nodeTypes: [Node.ELEMENT_NODE, Node.TEXT_NODE, Node.COMMENT_NODE, Node.DOCUMENT_NODE],
-        };
-
-        if (instance === '#document') {
-			this.instanceId = '#document';
-            this.document = window.document;
-            this.isInstanceViewer = false;
-        } else {
-			this.instanceId = instance.id;
-            if (!instance || instance.localName !== 'fx-instance') {
-                console.error('No instance found!');
-            }
-            this.document = instance.getInstanceData();
-            this.isInstanceViewer = true;
-            this.options.foldText = false;
-        }
-        this.drawUI(rootElement);
-        this.registerEvents();
-
-		// We're updating here, but we're doing that again later, when the UI is read (the 'ready' event fires)
-        this.drawDOM(this.document, this.domView.querySelector('.adi-tree-view'), true);
-        document.addEventListener('execute-action', e => this.processExecuteAction);
+  constructor(rootElement, instance) {
+    this.sourceNodeByInspectorNodeLookup = new Map();
+
+    this.uiView = null;
+    this.menuView = null;
+    this.domView = null;
+    this.attrView = null;
+    this.optsView = null;
+    /**
+     * The current active element. Note this is the element in the DOM view
+     */
+    this.activeElement = null;
+    this.vertResizing = false;
+    this.horizResizing = false;
+    this.pathScrolling = null;
+    this.elemLookup = false;
+    this.styleBackup = '';
+    this.xPos = 0;
+    this.delegatedEvents = [];
+
+    this.options = {
+      align: 'right', // NOTE: left is not supported in this version
+      split: 50,
+      minSplit: 30,
+      visible: true,
+      saving: false,
+      transparent: true,
+      omitEmptyText: true,
+      makeVisible: true,
+      foldText: true,
+      nodeTypes: [Node.ELEMENT_NODE, Node.TEXT_NODE, Node.COMMENT_NODE, Node.DOCUMENT_NODE],
+    };
+
+    if (instance === '#document') {
+      this.instanceId = '#document';
+      this.document = window.document;
+      this.isInstanceViewer = false;
+    } else {
+      this.instanceId = instance.id;
+      if (!instance || instance.localName !== 'fx-instance') {
+        console.error('No instance found!');
+      }
+      this.document = instance.getInstanceData();
+      this.isInstanceViewer = true;
+      this.options.foldText = false;
+    }
+    this.drawUI(rootElement);
+    this.registerEvents();
+
+    // We're updating here, but we're doing that again later, when the UI is read (the 'ready' event fires)
+    this.drawDOM(this.document, this.domView.querySelector('.adi-tree-view'), true);
+    document.addEventListener('execute-action', e => this.processExecuteAction);
+  }
+
+  // Returns selected element or null
+  getSelected() {
+    if (!this.activeElement) {
+      return null;
     }
 
-    // Returns selected element or null
-    getSelected() {
-        if (!this.activeElement) {
-            return null;
-        }
-
-        let elem = document;
+    let elem = document;
 
-        elem = this.sourceNodeByInspectorNodeLookup.get(this.activeElement);
-/*
+    elem = this.sourceNodeByInspectorNodeLookup.get(this.activeElement);
+    /*
         document.dispatchEvent(
             new CustomEvent('path-touched', {
                 composed: true,
@@ -91,105 +91,108 @@ class ADI {
         );
 */
 
-        return elem;
-    }
+    return elem;
+  }
 
-    // Loads user defined options stored in HTML5 storage (if available)
-    loadOptions() {
-        let userOptions = {};
+  // Loads user defined options stored in HTML5 storage (if available)
+  loadOptions() {
+    let userOptions = {};
 
-        userOptions = JSON.parse(window.localStorage.getItem('ADI.options')) || {};
+    userOptions = JSON.parse(window.localStorage.getItem('ADI.options')) || {};
 
-        // merge with defaults
-        for (const opt of Object.keys(userOptions)) {
-            this.options[opt] = userOptions[opt];
-        }
+    // merge with defaults
+    for (const opt of Object.keys(userOptions)) {
+      this.options[opt] = userOptions[opt];
     }
+  }
 
-    // Saves user defined options into the HTML5 storage (if available)
-    saveOptions() {
-        if (this.options.saving) {
-            window.localStorage.setItem('ADI.options', JSON.stringify(this.options));
-        }
+  // Saves user defined options into the HTML5 storage (if available)
+  saveOptions() {
+    if (this.options.saving) {
+      window.localStorage.setItem('ADI.options', JSON.stringify(this.options));
+    }
+  }
+
+  // Checks if a node has some child nodes and if at least on of them is of a supported type
+  hasRequiredNodes(node) {
+    if (typeof node !== 'object') {
+      throw new Error(
+        `hasRequiredNodes: Expected argument node of type object, ${typeof node} given.`,
+      );
     }
 
-    // Checks if a node has some child nodes and if at least on of them is of a supported type
-    hasRequiredNodes(node) {
-        if (typeof node !== 'object') {
-            throw new Error(
-                `hasRequiredNodes: Expected argument node of type object, ${typeof node} given.`,
-            );
-        }
-
-        if (node.hasChildNodes()) {
-            for (let i = 0, len = node.childNodes.length; i < len; i += 1) {
-				const child = node.childNodes[i];
-                if (this.options.nodeTypes.includes(child.nodeType)) {
-                    return true;
-                }
-            }
+    if (node.hasChildNodes()) {
+      for (let i = 0, len = node.childNodes.length; i < len; i += 1) {
+        const child = node.childNodes[i];
+        if (this.options.nodeTypes.includes(child.nodeType)) {
+          return true;
         }
+      }
+    }
 
+    return false;
+  }
 
-        return false;
+  // Creates a starting markup for a new DOM tree view node
+  newTreeNode(sourceNode) {
+    if (typeof sourceNode !== 'object') {
+      throw new Error(
+        `newTreeNode: Expected argument node of type object, ${typeof sourceNode} given.`,
+      );
     }
 
-    // Creates a starting markup for a new DOM tree view node
-    newTreeNode(sourceNode) {
-        if (typeof sourceNode !== 'object') {
-            throw new Error(`newTreeNode: Expected argument node of type object, ${typeof sourceNode} given.`);
-        }
-
-        const withChildren = this.hasRequiredNodes(sourceNode);
-        let omit = false;
-        let adiNode = sourceNode.nodeName.startsWith('FX-') ? `adi-node ${sourceNode.nodeName.toLowerCase()}`:'';
-        if(sourceNode.nodeName.startsWith('FX-')){
-            adiNode = `adi-node ${sourceNode.nodeName.toLowerCase()}`;
-            adiNode += Fore.isActionElement(sourceNode.nodeName) ? ' action':'';
-        }
-        const elem = newElement('li', {
-            class: adiNode,
-        });
+    const withChildren = this.hasRequiredNodes(sourceNode);
+    let omit = false;
+    let adiNode = sourceNode.nodeName.startsWith('FX-')
+      ? `adi-node ${sourceNode.nodeName.toLowerCase()}`
+      : '';
+    if (sourceNode.nodeName.startsWith('FX-')) {
+      adiNode = `adi-node ${sourceNode.nodeName.toLowerCase()}`;
+      adiNode += Fore.isActionElement(sourceNode.nodeName) ? ' action' : '';
+    }
+    const elem = newElement('li', {
+      class: adiNode,
+    });
 
-        // do not show ADI DOM nodes in the DOM view
-        if (sourceNode === this.uiView) {
-            return null;
-        }
+    // do not show ADI DOM nodes in the DOM view
+    if (sourceNode === this.uiView) {
+      return null;
+    }
 
-        // generate UI for elements with children
-        if (withChildren) {
-            elem.appendChild(newElement('span', {class: 'adi-trigger'}));
-        }
+    // generate UI for elements with children
+    if (withChildren) {
+      elem.appendChild(newElement('span', { class: 'adi-trigger' }));
+    }
 
-        // we can omit empty text nodes if allowed in options
-        if (this.options.omitEmptyText && sourceNode.nodeType === Node.TEXT_NODE) {
-            omit = isEmptyTextNode(sourceNode);
-        }
+    // we can omit empty text nodes if allowed in options
+    if (this.options.omitEmptyText && sourceNode.nodeType === Node.TEXT_NODE) {
+      omit = isEmptyTextNode(sourceNode);
+    }
 
-        if (!omit) {
-            const tagStart = newElement('span');
+    if (!omit) {
+      const tagStart = newElement('span');
 
-            this.sourceNodeByInspectorNodeLookup.set(tagStart, sourceNode);
-            this.sourceNodeByInspectorNodeLookup.set(sourceNode, tagStart);
+      this.sourceNodeByInspectorNodeLookup.set(tagStart, sourceNode);
+      this.sourceNodeByInspectorNodeLookup.set(sourceNode, tagStart);
 
-            let tagEnd = null;
+      let tagEnd = null;
 
-            if (containsOnlyText(sourceNode)) {
-                if (sourceNode.nodeType === Node.COMMENT_NODE) {
-                    addClass(tagStart, 'adi-comment-node');
-                    if (typeof tagStart.innerText === 'string') {
-                        tagStart.innerText = `<!-- ${sourceNode.textContent} -->`;
-                    }
-                } else {
-                    addClass(tagStart, 'adi-text-node');
-                    tagStart.textContent = sourceNode.textContent;
-                }
-            } else {
-                addClass(tagStart, 'adi-normal-node');
-                if (sourceNode.nodeType !== Node.DOCUMENT_NODE) {
-                    // tagStart.textContent = '<' + node.nodeName.toLowerCase() + '>';
+      if (containsOnlyText(sourceNode)) {
+        if (sourceNode.nodeType === Node.COMMENT_NODE) {
+          addClass(tagStart, 'adi-comment-node');
+          if (typeof tagStart.innerText === 'string') {
+            tagStart.innerText = `<!-- ${sourceNode.textContent} -->`;
+          }
+        } else {
+          addClass(tagStart, 'adi-text-node');
+          tagStart.textContent = sourceNode.textContent;
+        }
+      } else {
+        addClass(tagStart, 'adi-normal-node');
+        if (sourceNode.nodeType !== Node.DOCUMENT_NODE) {
+          // tagStart.textContent = '<' + node.nodeName.toLowerCase() + '>';
 
-/*
+          /*
                     let attrString = `<${sourceNode.nodeName.toLowerCase()} `;
                     if(sourceNode.attributes){
                         Array.from(sourceNode.attributes).forEach(attr => {
@@ -213,30 +216,29 @@ class ADI {
                         tagStart.textContent = `<${sourceNode.nodeName.toLowerCase()} id="${sourceNode.getAttribute('id')}">`;
                     } else {
 */
-                        const attrString =  Array.from(sourceNode.attributes)
-							  .filter(
-								  attr => this.isInstanceViewer ? true : isAttributeShown(attr.name, sourceNode))
-							  .map(attr => `${attr.name}="${attr.value}"`).join(' ');
-                        tagStart.textContent = `<${
-                            sourceNode.nodeName.toLowerCase()
-                        }${
-                           attrString ? (` ${attrString}`) : ''
-                        }>`;
-                    // }
-
-                    if (withChildren) {
-                        tagEnd = newElement('span');
-                        addClass(tagEnd, 'adi-end-node');
-                        tagEnd.textContent = `</${sourceNode.nodeName.toLowerCase()}>`;
-                    }
-                } else {
-                    tagStart.textContent = sourceNode.nodeName.toLowerCase();
-                }
-
-            }
+          const attrString = Array.from(sourceNode.attributes)
+            .filter(attr =>
+              this.isInstanceViewer ? true : isAttributeShown(attr.name, sourceNode),
+            )
+            .map(attr => `${attr.name}="${attr.value}"`)
+            .join(' ');
+          tagStart.textContent = `<${sourceNode.nodeName.toLowerCase()}${
+            attrString ? ` ${attrString}` : ''
+          }>`;
+          // }
+
+          if (withChildren) {
+            tagEnd = newElement('span');
+            addClass(tagEnd, 'adi-end-node');
+            tagEnd.textContent = `</${sourceNode.nodeName.toLowerCase()}>`;
+          }
+        } else {
+          tagStart.textContent = sourceNode.nodeName.toLowerCase();
+        }
+      }
 
-            elem.appendChild(tagStart);
-            /*
+      elem.appendChild(tagStart);
+      /*
                       const icon = document.createElement('span');
                       icon.textContent = 'x';
                       icon.classList.add(('icon'))
@@ -246,244 +248,246 @@ class ADI {
                       elem.appendChild(icon);
                       elem.appendChild(icon2);
       */
-            if (sourceNode.nodeName.startsWith('FX-')) {
-                tagStart.classList.add('fore-node');
-                tagStart.classList.add(sourceNode.nodeName.toLowerCase());
-            }
-
-            if (tagEnd) {
-                elem.appendChild(tagEnd);
+      if (sourceNode.nodeName.startsWith('FX-')) {
+        tagStart.classList.add('fore-node');
+        tagStart.classList.add(sourceNode.nodeName.toLowerCase());
+      }
 
-                if (sourceNode.nodeName.startsWith('FX-')) {
-                    tagEnd.classList.add('fore-node');
-                }
-            }
+      if (tagEnd) {
+        elem.appendChild(tagEnd);
 
-            return elem;
+        if (sourceNode.nodeName.startsWith('FX-')) {
+          tagEnd.classList.add('fore-node');
         }
-        return null;
+      }
+
+      return elem;
     }
+    return null;
+  }
 
-    // Renders the DOM Tree view
-    drawDOM(root, elem, isRoot) {
-        if (typeof root !== 'object') {
-            throw new Error(`drawDOM: Expected argument root of type object, ${typeof root} given.`);
-        }
+  // Renders the DOM Tree view
+  drawDOM(root, elem, isRoot) {
+    if (typeof root !== 'object') {
+      throw new Error(`drawDOM: Expected argument root of type object, ${typeof root} given.`);
+    }
 
-        let newNode = null;
-        let isOpen = true;
+    let newNode = null;
+    let isOpen = true;
 
-        const adiNode = elem.nodeName.startsWith('FX-') ? `adi-node ${node.nodeName.toLowerCase()}`:'';
+    const adiNode = elem.nodeName.startsWith('FX-')
+      ? `adi-node ${node.nodeName.toLowerCase()}`
+      : '';
 
-        if (isRoot && this.options.nodeTypes.indexOf(root.nodeType) !== -1) {
-            elem.innerHTML = '';
-            newNode = this.newTreeNode(root);
+    if (isRoot && this.options.nodeTypes.indexOf(root.nodeType) !== -1) {
+      elem.innerHTML = '';
+      newNode = this.newTreeNode(root);
 
-            if (this.hasRequiredNodes(root)) {
+      if (this.hasRequiredNodes(root)) {
+        newNode.appendChild(newElement('ul', { 'data-open': true, class: adiNode }));
 
-                newNode.appendChild(newElement('ul', {'data-open': true, class:adiNode}));
+        addClass(newNode.querySelector('.adi-trigger'), 'opened');
+      }
 
-                addClass(newNode.querySelector('.adi-trigger'), 'opened');
-            }
-
-            elem.appendChild(newNode);
-            elem = elem.querySelector('ul');
-        }
+      elem.appendChild(newNode);
+      elem = elem.querySelector('ul');
+    }
 
-        // recursive DOM traversal
-        for (let i = 0, len = root.childNodes.length; i < len; i += 1) {
-            const node = root.childNodes[i];
-            const withChildren = this.hasRequiredNodes(node);
+    // recursive DOM traversal
+    for (let i = 0, len = root.childNodes.length; i < len; i += 1) {
+      const node = root.childNodes[i];
+      const withChildren = this.hasRequiredNodes(node);
 
-            if (this.options.nodeTypes.indexOf(node.nodeType) !== -1) {
-                newNode = this.newTreeNode(node);
+      if (this.options.nodeTypes.indexOf(node.nodeType) !== -1) {
+        newNode = this.newTreeNode(node);
 
-                if (newNode) {
-                    if (withChildren) {
-                        if (this.options.foldText) {
-                            isOpen = !containsOnlyText(node, true);
-                        } else {
-                            isOpen = true;
-                        }
+        if (newNode) {
+          if (withChildren) {
+            if (this.options.foldText) {
+              isOpen = !containsOnlyText(node, true);
+            } else {
+              isOpen = true;
+            }
 
-                        if (node.nodeName === 'HEAD') isOpen = false;
-                        if (node.nodeName === 'SELECT') isOpen = false;
-                        if (node.nodeName === 'FX-INSTANCE') isOpen = false;
-/*
+            if (node.nodeName === 'HEAD') isOpen = false;
+            if (node.nodeName === 'SELECT') isOpen = false;
+            if (node.nodeName === 'FX-INSTANCE') isOpen = false;
+            /*
                         if(this.options.closedElements.includes(node.nodeName.toLowerCase())){
                             isOpen = false;
                         }
 */
 
-                        if (node.nodeType === Node.DOCUMENT_NODE) {
-                            newNode.appendChild(newElement('ul', {'data-open': isOpen, class:adiNode}));
-                        } else {
-                            newNode.insertBefore(newElement('ul', {'data-open': isOpen,class:adiNode}), newNode.lastChild);
-                        }
-
-                        addClass(newNode.querySelector('.adi-trigger'), isOpen ? 'opened' : 'closed');
-                    }
+            if (node.nodeType === Node.DOCUMENT_NODE) {
+              newNode.appendChild(newElement('ul', { 'data-open': isOpen, class: adiNode }));
+            } else {
+              newNode.insertBefore(
+                newElement('ul', { 'data-open': isOpen, class: adiNode }),
+                newNode.lastChild,
+              );
+            }
 
-                    elem.appendChild(newNode);
+            addClass(newNode.querySelector('.adi-trigger'), isOpen ? 'opened' : 'closed');
+          }
 
-					if (this.getSelected() === node) {
-						const span = newNode.querySelector('span.adi-normal-node');
-						span?.classList?.add('adi-active-node');
-						this.activeElement = span;
-						newNode.scrollIntoView({block:'nearest', behavior: 'instant'});
-					}
+          elem.appendChild(newNode);
 
+          if (this.getSelected() === node) {
+            const span = newNode.querySelector('span.adi-normal-node');
+            span?.classList?.add('adi-active-node');
+            this.activeElement = span;
+            newNode.scrollIntoView({ block: 'nearest', behavior: 'instant' });
+          }
 
-                    if (withChildren) {
-                        this.drawDOM(node, newNode.querySelector('ul'), false);
-                    }
-                }
-            }
+          if (withChildren) {
+            this.drawDOM(node, newNode.querySelector('ul'), false);
+          }
         }
+      }
     }
-
-    // Show/hide the options view
-    toggleOptions() {
-        if (this.optsView.className.indexOf('adi-hidden') !== -1) {
-            removeClass(this.optsView, 'adi-hidden');
-        } else {
-            addClass(this.optsView, 'adi-hidden');
-            this.attrView.querySelector('.adi-content').innerHTML = '';
-            this.refreshUI();
-            this.drawDOM(document, this.domView.querySelector('.adi-tree-view'), true);
-            if (this.options.saving) {
-                this.saveOptions();
-            } else {
-                window.localStorage.removeItem('ADI.options');
-            }
-        }
+  }
+
+  // Show/hide the options view
+  toggleOptions() {
+    if (this.optsView.className.indexOf('adi-hidden') !== -1) {
+      removeClass(this.optsView, 'adi-hidden');
+    } else {
+      addClass(this.optsView, 'adi-hidden');
+      this.attrView.querySelector('.adi-content').innerHTML = '';
+      this.refreshUI();
+      this.drawDOM(document, this.domView.querySelector('.adi-tree-view'), true);
+      if (this.options.saving) {
+        this.saveOptions();
+      } else {
+        window.localStorage.removeItem('ADI.options');
+      }
+    }
+  }
+
+  // Renders the UI
+  drawUI(rootElement) {
+    this.uiView = newElement('div', {
+      id: 'adi-wrapper',
+      class: this.options.transparent ? 'transparent' : '',
+    });
+    this.domView = newElement('div', { id: 'adi-dom-view' });
+    const domViewContent = newElement('div', { class: 'adi-content', id: 'detailsView' });
+    // this.attrView.appendChild(newElement('fx-fore', {src: './lab/inspector-view.html'}));
+
+    // const horizSplit = newElement('div', {id: 'adi-horiz-split'});
+    const domTree = newElement('ul', { class: 'adi-tree-view' });
+    const domPathWrap = newElement('div', { class: 'adi-path-wrap' });
+    const domPathScrollLeft = newElement('span', { class: 'adi-path-left' });
+    const domPathScrollRight = newElement('span', { class: 'adi-path-right' });
+    this.menuView = newElement('div', { id: 'adi-panel' });
+    const naviButtons = newElement('div', { class: 'adi-menu-wrap' });
+    const naviConfig = newElement('a', { class: 'adi-menu-config', title: 'Settings' });
+    const naviLookup = newElement('a', { class: 'adi-menu-lookup', title: 'Lookup tool' });
+
+    // this.horizSplit = horizSplit;
+
+    this.optsView = drawOptions();
+
+    // put UI together
+    domViewContent.appendChild(domTree);
+    this.domView.appendChild(this.menuView);
+    this.domView.appendChild(domViewContent);
+
+    domPathWrap.appendChild(domPathScrollLeft);
+    domPathWrap.appendChild(domPathScrollRight);
+    naviButtons.appendChild(naviLookup);
+    naviButtons.appendChild(naviConfig);
+    this.menuView.appendChild(domPathWrap);
+    this.menuView.appendChild(naviButtons);
+    // this.uiView.appendChild(this.menuView);
+    this.uiView.appendChild(this.optsView);
+    this.uiView.appendChild(this.domView);
+    if (!this.isInstanceViewer) {
+      this.attrView = newElement('div', { id: 'adi-attr-view' });
+      const attrViewContent = newElement('div', { class: 'adi-content' });
+      this.attrView.appendChild(attrViewContent);
+      this.uiView.appendChild(this.attrView);
     }
 
-    // Renders the UI
-    drawUI(rootElement) {
-        this.uiView = newElement('div', {
-            id: 'adi-wrapper',
-            class: this.options.transparent ? 'transparent' : '',
-        });
-        this.domView = newElement('div', {id: 'adi-dom-view'});
-        const domViewContent = newElement('div', {class: 'adi-content', id: 'detailsView'});
-        // this.attrView.appendChild(newElement('fx-fore', {src: './lab/inspector-view.html'}));
-
-
-        // const horizSplit = newElement('div', {id: 'adi-horiz-split'});
-        const domTree = newElement('ul', {class: 'adi-tree-view'});
-        const domPathWrap = newElement('div', {class: 'adi-path-wrap'});
-        const domPathScrollLeft = newElement('span', {class: 'adi-path-left'});
-        const domPathScrollRight = newElement('span', {class: 'adi-path-right'});
-        this.menuView = newElement('div', {id: 'adi-panel'});
-        const naviButtons = newElement('div', {class: 'adi-menu-wrap'});
-        const naviConfig = newElement('a', {class: 'adi-menu-config', title: 'Settings'});
-        const naviLookup = newElement('a', {class: 'adi-menu-lookup', title: 'Lookup tool'});
-
-        // this.horizSplit = horizSplit;
-
-        this.optsView = drawOptions();
-
-        // put UI together
-        domViewContent.appendChild(domTree);
-        this.domView.appendChild(this.menuView);
-        this.domView.appendChild(domViewContent);
-
-        domPathWrap.appendChild(domPathScrollLeft);
-        domPathWrap.appendChild(domPathScrollRight);
-        naviButtons.appendChild(naviLookup);
-        naviButtons.appendChild(naviConfig);
-        this.menuView.appendChild(domPathWrap);
-        this.menuView.appendChild(naviButtons);
-        // this.uiView.appendChild(this.menuView);
-        this.uiView.appendChild(this.optsView);
-        this.uiView.appendChild(this.domView);
-        if (!this.isInstanceViewer) {
-            this.attrView = newElement('div', {id: 'adi-attr-view'});
-            const attrViewContent = newElement('div', {class: 'adi-content'});
-            this.attrView.appendChild(attrViewContent);
-            this.uiView.appendChild(this.attrView);
-        }
+    // this.uiView.appendChild(horizSplit);
+    // wrapper.appendChild(naviWrap);
 
-        // this.uiView.appendChild(horizSplit);
-        // wrapper.appendChild(naviWrap);
+    // cache UI object and append to the DOM
 
-        // cache UI object and append to the DOM
+    rootElement.appendChild(this.uiView);
+    // document.querySelector('#inspector').appendChild(wrapper);
 
-        rootElement.appendChild(this.uiView);
-        // document.querySelector('#inspector').appendChild(wrapper);
+    this.refreshUI(true);
+  }
 
-        this.refreshUI(true);
+  // Refreshes the global UI
+  refreshUI(refreshOpts) {
+    if (this.uiView === null) {
+      return;
     }
 
-    // Refreshes the global UI
-    refreshUI(refreshOpts) {
-        if (this.uiView === null) {
-            return;
-        }
+    // load options if requested (e.g. before the first UI refresh)
+    if (refreshOpts) {
+      this.loadOptions();
+    }
 
-        // load options if requested (e.g. before the first UI refresh)
-        if (refreshOpts) {
-            this.loadOptions();
-        }
+    // Options view refresh
+    if (refreshOpts) {
+      this.optsView.querySelector('[data-opt="transparent"]').checked = this.options.transparent;
+      this.optsView.querySelector('[data-opt="saving"]').checked = this.options.saving;
+      this.optsView.querySelector('[data-opt="omitEmptyText"]').checked =
+        this.options.omitEmptyText;
+      this.optsView.querySelector('[data-opt="makeVisible"]').checked = this.options.makeVisible;
+      this.optsView.querySelector('[data-opt="foldText"]').checked = this.options.foldText;
+      this.optsView.querySelector('[data-opt="nodeTypes-3"]').checked =
+        this.options.nodeTypes.indexOf(3) !== -1;
+      this.optsView.querySelector('[data-opt="nodeTypes-8"]').checked =
+        this.options.nodeTypes.indexOf(8) !== -1;
+      // this.optsView.querySelector('[data-opt="nodeTypes-1"]').checked = this.options.nodeTypes.indexOf(1) !== -1;
+      // this.optsView.querySelector('[data-opt="nodeTypes-9"]').checked = this.options.nodeTypes.indexOf(9) !== -1;
+    }
 
-        // Options view refresh
-        if (refreshOpts) {
-            this.optsView.querySelector('[data-opt="transparent"]').checked = this.options.transparent;
-            this.optsView.querySelector('[data-opt="saving"]').checked = this.options.saving;
-            this.optsView.querySelector(
-                '[data-opt="omitEmptyText"]',
-            ).checked = this.options.omitEmptyText;
-            this.optsView.querySelector('[data-opt="makeVisible"]').checked = this.options.makeVisible;
-            this.optsView.querySelector('[data-opt="foldText"]').checked = this.options.foldText;
-            this.optsView.querySelector('[data-opt="nodeTypes-3"]').checked =
-                this.options.nodeTypes.indexOf(3) !== -1;
-            this.optsView.querySelector('[data-opt="nodeTypes-8"]').checked =
-                this.options.nodeTypes.indexOf(8) !== -1;
-            // this.optsView.querySelector('[data-opt="nodeTypes-1"]').checked = this.options.nodeTypes.indexOf(1) !== -1;
-            // this.optsView.querySelector('[data-opt="nodeTypes-9"]').checked = this.options.nodeTypes.indexOf(9) !== -1;
-        }
+    // UI appearance refresh
+    this.uiView.className = this.options.transparent ? 'transparent' : '';
+    // this.uiView.style.display = this.options.visible ? 'grid' : 'none';
+    // this.domView.style.height = `${this.options.split}%`;
+    // this.attrView.style.height = `${100 - this.options.split}%`;
+    this.domView.querySelector('.adi-content').style.height = `${this.domView.clientHeight}px`;
+    if (!this.isInstanceViewer) {
+      this.attrView.querySelector('.adi-content').style.height = `${
+        this.attrView.clientHeight - this.menuView.clientHeight
+      }px`;
+    }
 
-        // UI appearance refresh
-        this.uiView.className = this.options.transparent ? 'transparent' : '';
-        // this.uiView.style.display = this.options.visible ? 'grid' : 'none';
-        // this.domView.style.height = `${this.options.split}%`;
-        // this.attrView.style.height = `${100 - this.options.split}%`;
-        this.domView.querySelector('.adi-content').style.height = `${this.domView.clientHeight}px`;
-        if (!this.isInstanceViewer) {
-            this.attrView.querySelector('.adi-content').style.height = `${this.attrView.clientHeight -
-                this.menuView.clientHeight}px`
-        }
+    addClass(this.uiView, this.options.align);
+  }
 
-        addClass(this.uiView, this.options.align);
+  // UI visibility toggle handler
+  toggleVisibilityUI() {
+    if (this.uiView === null) {
+      return;
     }
 
-    // UI visibility toggle handler
-    toggleVisibilityUI() {
-        if (this.uiView === null) {
-            return;
-        }
+    this.uiView.style.display = this.options.visible ? 'none' : 'block';
+    this.options.visible = !this.options.visible;
+    this.saveOptions();
+  }
 
-        this.uiView.style.display = this.options.visible ? 'none' : 'block';
-        this.options.visible = !this.options.visible;
-        this.saveOptions();
+  // Renders the attribute view
+  drawAttrs(elem) {
+    if (this.isInstanceViewer) {
+      return;
     }
+    const content = this.attrView.querySelector('.adi-content');
+    // prepare attributes
+    content.innerHTML = '';
 
-    // Renders the attribute view
-    drawAttrs(elem) {
-        if (this.isInstanceViewer) {
-            return;
-        }
-        const content = this.attrView.querySelector('.adi-content');
-        // prepare attributes
-        content.innerHTML = '';
-
-        const header = document.createElement('header');
-        header.innerText = 'Attributes';
-        content.appendChild(header);
+    const header = document.createElement('header');
+    header.innerText = 'Attributes';
+    content.appendChild(header);
 
-        // todo: hook element-def.json in here
-/*
+    // todo: hook element-def.json in here
+    /*
         if (elem.nodeName.startsWith('FX-')) {
             console.log('got a fore element');
             const {properties} = elem.constructor;
@@ -547,121 +551,120 @@ class ADI {
             });
         } else {
 */
-            [...elem.attributes].forEach(attr => {
-                if(attr.name !== 'style'){
-                    content.appendChild(drawAttrRow(attr.name, attr.value));
-                }
-            })
-        // }
+    [...elem.attributes].forEach(attr => {
+      if (attr.name !== 'style') {
+        content.appendChild(drawAttrRow(attr.name, attr.value));
+      }
+    });
+    // }
+  }
+
+  // Handles attribute changes
+  changeAttribute(e) {
+    const target = e ? e.target : window.event.srcElement;
+    const attr = target.getAttribute('data-attr');
+    const val = target.value;
+    const elem = this.getSelected();
+
+    // remove attribute if the new value is empty
+    if (val === '') {
+      elem.removeAttribute(attr);
+    } else {
+      elem.setAttribute(attr, val);
     }
-
-    // Handles attribute changes
-    changeAttribute(e) {
-        const target = e ? e.target : window.event.srcElement;
-        const attr = target.getAttribute('data-attr');
-        const val = target.value;
-        const elem = this.getSelected();
-
-        // remove attribute if the new value is empty
-        if (val === '') {
-            elem.removeAttribute(attr);
-        } else {
-            elem.setAttribute(attr, val);
-        }
+  }
+
+  // Handles option changes
+  changeOption(e) {
+    const target = e ? e.target : window.event.srcElement;
+    const data = target.getAttribute('data-opt');
+    const val = target.checked;
+
+    if (data.indexOf('nodeTypes') !== -1) {
+      const type = parseInt(data.match(/\d+/)[0], 10);
+
+      if (val) {
+        this.options.nodeTypes.push(type);
+      } else {
+        this.options.nodeTypes.splice(this.options.nodeTypes.indexOf(type), 1);
+      }
+    } else {
+      this.options[data] = val;
+    }
+  }
+
+  // Key events processing
+  processKey(e) {
+    e = e || window.event;
+    const code = e.keyCode || e.which;
+
+    switch (code) {
+      case 272: // ctrl + alt + d
+        this.toggleVisibilityUI();
+        break;
+      default:
+        break;
     }
+  }
 
-    // Handles option changes
-    changeOption(e) {
-        const target = e ? e.target : window.event.srcElement;
-        const data = target.getAttribute('data-opt');
-        const val = target.checked;
+  // Vertical splitter resize handler
+  verticalResize(e) {
+    if (!this.vertResizing) {
+      return;
+    }
 
-        if (data.indexOf('nodeTypes') !== -1) {
-            const type = parseInt(data.match(/\d+/)[0], 10);
+    e = e || window.event;
+    document.documentElement.style.cursor = 'e-resize';
+    const nWidth = this.options.width + this.xPos - e.clientX;
 
-            if (val) {
-                this.options.nodeTypes.push(type);
-            } else {
-                this.options.nodeTypes.splice(this.options.nodeTypes.indexOf(type), 1);
-            }
-        } else {
-            this.options[data] = val;
-        }
+    if (nWidth >= this.options.minWidth) {
+      this.options.width = nWidth;
+      this.xPos = e.clientX;
+      this.refreshUI();
+      this.saveOptions();
     }
+  }
 
-    // Key events processing
-    processKey(e) {
-        e = e || window.event;
-        const code = e.keyCode || e.which;
-
-        switch (code) {
-            case 272: // ctrl + alt + d
-                this.toggleVisibilityUI();
-                break;
-            default:
-                break;
-        }
+  // Horizontal splitter resize handler
+  horizontalResize(e) {
+    if (!this.horizResizing) {
+      return;
     }
 
-    // Vertical splitter resize handler
-    verticalResize(e) {
-        if (!this.vertResizing) {
-            return;
-        }
-
-        e = e || window.event;
-        document.documentElement.style.cursor = 'e-resize';
-        const nWidth = this.options.width + this.xPos - e.clientX;
-
-        if (nWidth >= this.options.minWidth) {
-            this.options.width = nWidth;
-            this.xPos = e.clientX;
-            this.refreshUI();
-            this.saveOptions();
-        }
+    e = e || window.event;
+    document.documentElement.style.cursor = 'n-resize';
+    const nSplit = Math.floor((e.clientY / this.uiView.clientHeight) * 100);
 
+    if (nSplit >= this.options.minSplit && nSplit <= 100 - this.options.minSplit) {
+      this.options.split = nSplit;
+      this.refreshUI();
+      this.saveOptions();
     }
+  }
 
-    // Horizontal splitter resize handler
-    horizontalResize(e) {
-        if (!this.horizResizing) {
-            return;
-        }
+  processExecuteAction(e) {
+    this.refreshUI();
+  }
 
-        e = e || window.event;
-        document.documentElement.style.cursor = 'n-resize';
-        const nSplit = Math.floor((e.clientY / this.uiView.clientHeight) * 100);
+  // Handles active element selection
+  handleActive(e) {
+    let target = e ? e.detail?.target || e.target : window.event.srcElement;
+    const active = this.domView.querySelector('.adi-active-node');
 
-        if (nSplit >= this.options.minSplit && nSplit <= 100 - this.options.minSplit) {
-            this.options.split = nSplit;
-            this.refreshUI();
-            this.saveOptions();
-        }
+    if (active) {
+      removeClass(active, 'adi-active-node');
     }
 
-    processExecuteAction(e) {
-        this.refreshUI();
+    // clicked on normal-node or end-node?
+    if (!target || target.nodeType === Node.DOCUMENT_NODE) return;
+    if (target && target.classList && target.classList.contains('adi-end-node')) {
+      target = target.parentNode.querySelector('.adi-normal-node');
     }
 
-    // Handles active element selection
-    handleActive(e) {
-        let target = e ? e.detail?.target || e.target : window.event.srcElement;
-        const active = this.domView.querySelector('.adi-active-node');
-
-        if (active) {
-            removeClass(active, 'adi-active-node');
-        }
-
-        // clicked on normal-node or end-node?
-        if(!target || target.nodeType === Node.DOCUMENT_NODE) return;
-        if (target && target.classList && target.classList.contains('adi-end-node')) {
-            target = target.parentNode.querySelector('.adi-normal-node');
-        }
+    this.activeElement = target;
+    addClass(target, 'adi-active-node');
 
-        this.activeElement = target;
-        addClass(target, 'adi-active-node');
-
-/*
+    /*
         e.target.dispatchEvent(
             new CustomEvent('handle-active', {
                 composed: true,
@@ -671,242 +674,253 @@ class ADI {
         );
 */
 
-        // make it visible (scroll)
-        if (this.options.makeVisible) {
-            const wrap = this.domView.querySelector('.adi-content');
-            wrap.scrollIntoView({block:'center', behavior: 'instant'})
-        }
-		const selected = this.getSelected();
-        this.drawAttrs(selected);
-
-		if (selected && typeof selected.getModelItem === 'function' && selected.getModelItem()?.node) {
-			let selectedElement = selected.modelItem.node;
-			if (selectedElement?.nodeType === Node.ATTRIBUTE_NODE) {
-				selectedElement = selectedElement.ownerElement;
-			}
-			window.document.dispatchEvent(new CustomEvent('log-active-element', {detail: {target: selectedElement}}));
-		}
-		//	window.document.dispatchEvent(new CustomEvent('log-active-element', {detail: {target: selected}}));
+    // make it visible (scroll)
+    if (this.options.makeVisible) {
+      const wrap = this.domView.querySelector('.adi-content');
+      wrap.scrollIntoView({ block: 'center', behavior: 'instant' });
+    }
+    const selected = this.getSelected();
+    this.drawAttrs(selected);
+
+    if (selected && typeof selected.getModelItem === 'function' && selected.getModelItem()?.node) {
+      let selectedElement = selected.modelItem.node;
+      if (selectedElement?.nodeType === Node.ATTRIBUTE_NODE) {
+        selectedElement = selectedElement.ownerElement;
+      }
+      window.document.dispatchEvent(
+        new CustomEvent('log-active-element', { detail: { target: selectedElement } }),
+      );
     }
+    //	window.document.dispatchEvent(new CustomEvent('log-active-element', {detail: {target: selected}}));
+  }
 
+  // Highlights an element on page
+  highlightElement(event) {
+    // console.log('highlight',e);
+    let sourceNode = event ? event.target : window.event.srcElement;
 
-    // Highlights an element on page
-    highlightElement(event) {
-        // console.log('highlight',e);
-        let sourceNode = event ? event.target : window.event.srcElement;
+    if (sourceNode.classList.contains('adi-end-node')) {
+      sourceNode = sourceNode.parentNode.querySelector('.adi-normal-node');
+    }
 
-        if (sourceNode.classList.contains('adi-end-node')) {
-            sourceNode = sourceNode.parentNode.querySelector('.adi-normal-node');
-        }
+    const inspectorNode = this.sourceNodeByInspectorNodeLookup.get(sourceNode);
 
-        const inspectorNode = this.sourceNodeByInspectorNodeLookup.get(sourceNode);
+    if (!inspectorNode || inspectorNode.ownerDocument !== window.document) {
+      // Not in HTML: ignore
+      return;
+    }
 
-        if (!inspectorNode || inspectorNode.ownerDocument !== window.document) {
-            // Not in HTML: ignore
-            return;
-        }
+    if (inspectorNode) {
+      if (event.type === 'mouseover') {
+        this.styleBackup = inspectorNode.getAttribute('style') || '';
+        inspectorNode.setAttribute('style', `outline: 2px solid blue; ${this.styleBackup}`);
+      } else if (this.styleBackup === '') {
+        inspectorNode.removeAttribute('style');
+      } else {
+        inspectorNode.setAttribute('style', this.styleBackup);
+      }
+    }
+  }
 
-        if (inspectorNode) {
-            if (event.type === 'mouseover') {
-                this.styleBackup = inspectorNode.getAttribute('style') || '';
-                inspectorNode.setAttribute('style', `outline: 2px solid blue; ${this.styleBackup}`);
-            } else if (this.styleBackup === '') {
-                inspectorNode.removeAttribute('style');
-            } else {
-                inspectorNode.setAttribute('style', this.styleBackup);
-            }
-        }
+  // Handles element lookup on page
+  handleLookup(e) {
+    const target = e ? e.detail?.target || e.target : window.event.srcElement;
+
+    if (!this.document.contains(target)) {
+      // Targetted at somewhere else!!!
+      return;
+    }
+    if (target.nodeType === Node.DOCUMENT_NODE) {
+      // Targetted at the document node. Nothing to highlight
+      return;
     }
 
-    // Handles element lookup on page
-    handleLookup(e) {
-        const target = e ? e.detail?.target || e.target : window.event.srcElement;
-
-		if (!this.document.contains(target)) {
-			// Targetted at somewhere else!!!
-			return;
-		}
-		if (target.nodeType === Node.DOCUMENT_NODE) {
-			// Targetted at the document node. Nothing to highlight
-			return;
-		}
-
-        if (target.className.indexOf('adi-menu-lookup') !== -1) {
-            // enable/disable interactive lookup
-            if (this.elemLookup) {
-                removeClass(target, 'adi-active');
-                this.elemLookup = false;
-                this.removeEvent(document.body, 'mouseover', this.handleLookup, true);
-                this.removeEvent(document.body, 'mouseout', this.handleLookup, true);
-                this.removeEvent(document.body, 'click', this.handleLookup, true);
-                return;
-            }
-            addClass(target, 'adi-active');
-            this.elemLookup = true;
-            this.addEventDelegate(document.body,
-                'mouseover',
-                this.handleLookup,
-                false,
-                '*',
-                true,
-                'adi-wrapper',
-            );
-            this.addEventDelegate(document.body,
-                'mouseout',
-                this.handleLookup,
-                false,
-                '*',
-                true,
-                'adi-wrapper',
-            );
-            this.addEventDelegate(document.body, 'click', this.handleLookup, false, '*', true, 'adi-wrapper');
-            return;
-        }
-        // handle lookup events
-        if (e.type === 'mouseover') {
-            this.styleBackup = target.getAttribute('style') || '';
-            target.setAttribute('style', `outline: 1px dashed red; ${this.styleBackup}`);
-            return;
-        }
-        if (e.type === 'mouseout') {
-            target.setAttribute('style', this.styleBackup);
-            return;
-        }
+    if (target.className.indexOf('adi-menu-lookup') !== -1) {
+      // enable/disable interactive lookup
+      if (this.elemLookup) {
+        removeClass(target, 'adi-active');
         this.elemLookup = false;
-        removeClass(this.menuView.querySelector('.adi-menu-lookup'), 'adi-active');
-        target.setAttribute('style', this.styleBackup);
         this.removeEvent(document.body, 'mouseover', this.handleLookup, true);
         this.removeEvent(document.body, 'mouseout', this.handleLookup, true);
         this.removeEvent(document.body, 'click', this.handleLookup, true);
-        pauseEvent(e);
+        return;
+      }
+      addClass(target, 'adi-active');
+      this.elemLookup = true;
+      this.addEventDelegate(
+        document.body,
+        'mouseover',
+        this.handleLookup,
+        false,
+        '*',
+        true,
+        'adi-wrapper',
+      );
+      this.addEventDelegate(
+        document.body,
+        'mouseout',
+        this.handleLookup,
+        false,
+        '*',
+        true,
+        'adi-wrapper',
+      );
+      this.addEventDelegate(
+        document.body,
+        'click',
+        this.handleLookup,
+        false,
+        '*',
+        true,
+        'adi-wrapper',
+      );
+      return;
+    }
+    // handle lookup events
+    if (e.type === 'mouseover') {
+      this.styleBackup = target.getAttribute('style') || '';
+      target.setAttribute('style', `outline: 1px dashed red; ${this.styleBackup}`);
+      return;
+    }
+    if (e.type === 'mouseout') {
+      target.setAttribute('style', this.styleBackup);
+      return;
+    }
+    this.elemLookup = false;
+    removeClass(this.menuView.querySelector('.adi-menu-lookup'), 'adi-active');
+    target.setAttribute('style', this.styleBackup);
+    this.removeEvent(document.body, 'mouseover', this.handleLookup, true);
+    this.removeEvent(document.body, 'mouseout', this.handleLookup, true);
+    this.removeEvent(document.body, 'click', this.handleLookup, true);
+    pauseEvent(e);
+
+    // find corresponding node in the DOM view
+    const active = this.sourceNodeByInspectorNodeLookup.get(target);
+
+    // activate it
+    if (!active) return;
+    if (active) {
+      active.click();
+    }
 
-        // find corresponding node in the DOM view
-        const active = this.sourceNodeByInspectorNodeLookup.get(target);
+    // open the whole path in DOM view
+    if (!active.parentNode) return;
+    let node = active.parentNode;
+    let tmp;
 
-        // activate it
-        if(!active) return;
-        if (active) {
-            active.click();
+    if (node.querySelector('ul')) {
+      node.querySelector('ul').setAttribute('data-open', 'true');
+    }
+    while (node !== this.domView.querySelector('.adi-content')) {
+      if (node.className.indexOf('adi-node') !== -1) {
+        tmp = node.querySelector('.adi-trigger');
+        if (tmp) {
+          removeClass(tmp, 'closed');
+          addClass(tmp, 'opened');
         }
 
-        // open the whole path in DOM view
-        if (!active.parentNode) return;
-        let node = active.parentNode;
-        let tmp;
-
-        if (node.querySelector('ul')) {
-            node.querySelector('ul').setAttribute('data-open', 'true');
-        }
-        while (node !== this.domView.querySelector('.adi-content')) {
-            if (node.className.indexOf('adi-node') !== -1) {
-                tmp = node.querySelector('.adi-trigger');
-                if (tmp) {
-                    removeClass(tmp, 'closed');
-                    addClass(tmp, 'opened');
-                }
+        node = node.parentNode; // ul node
+        node.setAttribute('data-open', 'true');
+      }
 
-                node = node.parentNode; // ul node
-                node.setAttribute('data-open', 'true');
-            }
+      node = node.parentNode;
+    }
 
-            node = node.parentNode;
-        }
+    // make it visible (scroll)
+    if (this.options.makeVisible) {
+      active.scrollIntoView({ behavior: 'instant', block: 'nearest', inline: 'nearest' });
+    }
+    target.scrollIntoView({ behavior: 'instant', block: 'nearest', inline: 'nearest' });
+  }
+
+  // Simple cross-browser event handler that enables simple event delegation.
+  // Note that the selector must be a string and no nesting is supported.
+  // Selector is expected to be in one of formats listed below and works for all children
+  // in the particular element.
+  // Store parameter enables storing the reference to custom event handler.
+  // Exclude parameter will exclude the particular element and all of its children, this works
+  // only for id selectors.
+  // Selector formats: tag name ("div"), class name (".my-class"), id ("#my-id") and any ("*").
+
+  addEventDelegate(elem, evt, fn, capture, selector, store, exclude) {
+    // custom event handler is registered
+    const handler = e => {
+      // check if target corresponds to the selector
+      const target = e ? e.target : window.event.srcElement;
+      const sel = selector.substr(1);
+      let delegate = false;
+
+      if (exclude) {
+        let node = target;
+
+        while (node !== document) {
+          if (node.id === exclude) {
+            return;
+          }
 
-        // make it visible (scroll)
-        if (this.options.makeVisible) {
-            active.scrollIntoView({behavior: "instant", block: "nearest", inline: "nearest"});
+          node = node.parentNode;
         }
-        target.scrollIntoView({behavior: "instant", block: "nearest", inline: "nearest"});
+      }
+
+      // should the event be delegated?
+      if (selector.indexOf('#') === 0) {
+        // ID
+        delegate = target.id === sel;
+      } else if (selector.indexOf('.') === 0) {
+        // class
+        delegate = target.className.indexOf(sel) !== -1;
+      } else if (selector === '*') {
+        // any
+        delegate = true;
+      } else {
+        // tag name
+        delegate = target.nodeName.toLowerCase() === selector;
+      }
+
+      // delegate the event handling
+      if (delegate) {
+        fn(e);
+      }
+    };
+    // save the reference
+    if (store) {
+      this.delegatedEvents.push({
+        handle: handler,
+        elem,
+        fn,
+        evt,
+      });
     }
 
-    // Simple cross-browser event handler that enables simple event delegation.
-    // Note that the selector must be a string and no nesting is supported.
-    // Selector is expected to be in one of formats listed below and works for all children
-    // in the particular element.
-    // Store parameter enables storing the reference to custom event handler.
-    // Exclude parameter will exclude the particular element and all of its children, this works
-    // only for id selectors.
-    // Selector formats: tag name ("div"), class name (".my-class"), id ("#my-id") and any ("*").
-
-    addEventDelegate(elem, evt, fn, capture, selector, store, exclude) {
-        // custom event handler is registered
-        const handler = e => {
-            // check if target corresponds to the selector
-            const target = e ? e.target : window.event.srcElement;
-            const sel = selector.substr(1);
-            let delegate = false;
-
-            if (exclude) {
-                let node = target;
-
-                while (node !== document) {
-                    if (node.id === exclude) {
-                        return;
-                    }
-
-                    node = node.parentNode;
-                }
-            }
-
-            // should the event be delegated?
-            if (selector.indexOf('#') === 0) {
-                // ID
-                delegate = target.id === sel;
-            } else if (selector.indexOf('.') === 0) {
-                // class
-                delegate = target.className.indexOf(sel) !== -1;
-            } else if (selector === '*') {
-                // any
-                delegate = true;
-            } else {
-                // tag name
-                delegate = target.nodeName.toLowerCase() === selector;
-            }
-
-            // delegate the event handling
-            if (delegate) {
-                fn(e);
-            }
-        };
-        // save the reference
-        if (store) {
-            this.delegatedEvents.push({
-                handle: handler,
-                elem,
-                fn,
-                evt,
-            });
-        }
+    elem.addEventListener(evt, handler, capture);
+  }
 
-        elem.addEventListener(evt, handler, capture);
+  // Simple cross-browser event removing
+  removeEvent(elem, evt, fn, wasDelegated) {
+    if (typeof elem !== 'object') {
+      throw new Error(`addEvent: Expected argument elem of type object, ${typeof elem} given.`);
     }
 
-    // Simple cross-browser event removing
-    removeEvent(elem, evt, fn, wasDelegated) {
-        if (typeof elem !== 'object') {
-            throw new Error(`addEvent: Expected argument elem of type object, ${typeof elem} given.`);
+    // try to find stored delegated event
+    let stored = null;
+    if (wasDelegated) {
+      for (let i = 0, len = this.delegatedEvents.length; i < len; i += 1) {
+        stored = this.delegatedEvents[i];
+        if (stored.elem === elem && stored.evt === evt && stored.fn === fn) {
+          fn = stored.handle;
+          this.delegatedEvents.splice(i, 1);
+          break;
         }
-
-        // try to find stored delegated event
-        let stored = null;
-        if (wasDelegated) {
-            for (let i = 0, len = this.delegatedEvents.length; i < len; i += 1) {
-                stored = this.delegatedEvents[i];
-                if (stored.elem === elem && stored.evt === evt && stored.fn === fn) {
-                    fn = stored.handle;
-                    this.delegatedEvents.splice(i, 1);
-                    break;
-                }
-            }
-        }
-
-        // elem.detachEvent(`on${evt}`, fn);
+      }
     }
 
-    // Event registration
-    registerEvents() {
-        // events for splitters
-        /*
+    // elem.detachEvent(`on${evt}`, fn);
+  }
+
+  // Event registration
+  registerEvents() {
+    // events for splitters
+    /*
                 this.horizSplit.addEventListener(
                     'mousedown',
                     e => {
@@ -918,148 +932,180 @@ class ADI {
                 );
         */
 
-		const redrawUi = () => {
-            if (this.instanceId !== '#document') {
-                const instance = window.document.querySelector(`#${this.instanceId}`);
-                this.document = instance.getInstanceData();
-            }
-            this.drawDOM(this.document, this.domView.querySelector('.adi-tree-view'), true);
-		};
-
-		// Update UI when something with instances changed
-		document.addEventListener('instance-loaded', redrawUi);
-		// Update UI when some value changes
-        document.addEventListener('value-changed', redrawUi);
-		// Update UI when we're done loading and all repeats are done
-		document.addEventListener('ready', redrawUi);
-
-        document.addEventListener(
-            'mouseup',
-            () => {
-                document.documentElement.style.cursor = 'default';
-                this.vertResizing = false;
-                this.horizResizing = false;
-            },
-            false,
-        );
-
-        document.addEventListener('mousemove', event => this.verticalResize(event), false);
-        document.addEventListener('mousemove', event => this.horizontalResize(event), false)
-        ;
-        // window resize
-        window.addEventListener('resize', event => this.refreshUI(event), false);
-
-        // keypress events
-        document.addEventListener('keypress', event => this.processKey(event), false);
-
-        // fore action events
-        document.addEventListener('log-active-element', event => this.handleLookup(event), false);
-
-        // Dom view folding handler
-        const handleFolding = e => {
-            const target = e ? e.target : window.event.srcElement;
-            const ul = target.parentNode.querySelector('ul');
-
-            if (ul.getAttribute('data-open') === 'true') {
-                removeClass(target, 'opened');
-                addClass(target, 'closed');
-                ul.setAttribute('data-open', 'false');
-            } else {
-                removeClass(target, 'closed');
-                addClass(target, 'opened');
-                ul.setAttribute('data-open', 'true');
-            }
-        };
-
-        // dom tree view folding
-        this.addEventDelegate(this.domView, 'click', handleFolding, false, '.adi-trigger');
-
-        // active element
-        this.addEventDelegate(this.domView, 'click', (event) => this.handleActive(event), false, '.adi-normal-node');
-        this.addEventDelegate(this.domView, 'click', (event) => this.handleActive(event), false, '.adi-end-node');
-
-        // matching tag highlighting
-        this.addEventDelegate(
-            this.domView,
-            'mouseover',
-            e => {
-                const target = e ? e.target : window.event.srcElement;
-                addClass(target.parentNode.querySelector('.adi-normal-node'), 'hover');
-            },
-            false,
-            '.adi-end-node',
-        );
-        this.addEventDelegate(
-            this.domView,
-            'mouseout',
-            e => {
-                const target = e ? e.target : window.event.srcElement;
-                removeClass(target.parentNode.querySelector('.adi-normal-node'), 'hover');
-            },
-            false,
-            '.adi-end-node',
-        );
-
-        // page element highlighting
-        this.addEventDelegate(this.domView, 'mouseover', (event) => this.highlightElement(event), false, '.adi-end-node');
-        this.addEventDelegate(
-            this.domView,
-            'mouseover',
-            (event) => this.highlightElement(event),
-            false,
-            '.adi-normal-node',
-        );
-        this.addEventDelegate(this.domView, 'mouseout', (event) => this.highlightElement(event), false, '.adi-end-node');
-        this.addEventDelegate(
-            this.domView,
-            'mouseout',
-            (event) => this.highlightElement(event),
-            false,
-            '.adi-normal-node',
-        );
-
-        // element lookup
-        this.menuView.querySelector('.adi-menu-lookup').addEventListener(
-            'click',
-            event => this.handleLookup(event),
-            false,
-        );
-
-        document.addEventListener('handle-active', (e) => {
-            if (e.detail.selected === this.getSelected()) {
-                // We caused this. ignore
-                return;
-            }
-            const {selected} = e.detail;
-            const target = this.sourceNodeByInspectorNodeLookup.get(selected);
-            // make it visible (scroll)
-            if (this.options.makeVisible) {
-                const wrap = this.domView.querySelector('.adi-content');
-                if (target.offsetTop >= wrap.clientHeight || target.offsetTop <= wrap.scrollTop) {
-                    wrap.scrollTop = target.offsetTop - Math.floor(wrap.clientHeight / 2);
-                }
-            }
-
-                this.drawAttrs(this.getSelected());
-        });
-
-        document.addEventListener('execute-action',(e) => this.processExecuteAction(event),{capture:true});
-
-        // options events
-        this.addEventDelegate(this.optsView, 'change', (event) => this.changeOption(event), false, 'input');
-        this.addEventDelegate(this.optsView, 'click', (event) => this.toggleOptions(event), false, '.adi-opt-close');
-        this.menuView.querySelector('.adi-menu-config').addEventListener(
-            'click',
-            (event) => this.toggleOptions(event),
-            false,
-        );
-
-        // attributes events
-        if(!this.isInstanceViewer) {
-            this.addEventDelegate(this.attrView, 'change', this.changeAttribute, false, 'input');
+    const redrawUi = () => {
+      if (this.instanceId !== '#document') {
+        const instance = window.document.querySelector(`#${this.instanceId}`);
+        this.document = instance.getInstanceData();
+      }
+      this.drawDOM(this.document, this.domView.querySelector('.adi-tree-view'), true);
+    };
+
+    // Update UI when something with instances changed
+    document.addEventListener('instance-loaded', redrawUi);
+    // Update UI when some value changes
+    document.addEventListener('value-changed', redrawUi);
+    // Update UI when we're done loading and all repeats are done
+    document.addEventListener('ready', redrawUi);
+
+    document.addEventListener(
+      'mouseup',
+      () => {
+        document.documentElement.style.cursor = 'default';
+        this.vertResizing = false;
+        this.horizResizing = false;
+      },
+      false,
+    );
+
+    document.addEventListener('mousemove', event => this.verticalResize(event), false);
+    document.addEventListener('mousemove', event => this.horizontalResize(event), false);
+    // window resize
+    window.addEventListener('resize', event => this.refreshUI(event), false);
+
+    // keypress events
+    document.addEventListener('keypress', event => this.processKey(event), false);
+
+    // fore action events
+    document.addEventListener('log-active-element', event => this.handleLookup(event), false);
+
+    // Dom view folding handler
+    const handleFolding = e => {
+      const target = e ? e.target : window.event.srcElement;
+      const ul = target.parentNode.querySelector('ul');
+
+      if (ul.getAttribute('data-open') === 'true') {
+        removeClass(target, 'opened');
+        addClass(target, 'closed');
+        ul.setAttribute('data-open', 'false');
+      } else {
+        removeClass(target, 'closed');
+        addClass(target, 'opened');
+        ul.setAttribute('data-open', 'true');
+      }
+    };
+
+    // dom tree view folding
+    this.addEventDelegate(this.domView, 'click', handleFolding, false, '.adi-trigger');
+
+    // active element
+    this.addEventDelegate(
+      this.domView,
+      'click',
+      event => this.handleActive(event),
+      false,
+      '.adi-normal-node',
+    );
+    this.addEventDelegate(
+      this.domView,
+      'click',
+      event => this.handleActive(event),
+      false,
+      '.adi-end-node',
+    );
+
+    // matching tag highlighting
+    this.addEventDelegate(
+      this.domView,
+      'mouseover',
+      e => {
+        const target = e ? e.target : window.event.srcElement;
+        addClass(target.parentNode.querySelector('.adi-normal-node'), 'hover');
+      },
+      false,
+      '.adi-end-node',
+    );
+    this.addEventDelegate(
+      this.domView,
+      'mouseout',
+      e => {
+        const target = e ? e.target : window.event.srcElement;
+        removeClass(target.parentNode.querySelector('.adi-normal-node'), 'hover');
+      },
+      false,
+      '.adi-end-node',
+    );
+
+    // page element highlighting
+    this.addEventDelegate(
+      this.domView,
+      'mouseover',
+      event => this.highlightElement(event),
+      false,
+      '.adi-end-node',
+    );
+    this.addEventDelegate(
+      this.domView,
+      'mouseover',
+      event => this.highlightElement(event),
+      false,
+      '.adi-normal-node',
+    );
+    this.addEventDelegate(
+      this.domView,
+      'mouseout',
+      event => this.highlightElement(event),
+      false,
+      '.adi-end-node',
+    );
+    this.addEventDelegate(
+      this.domView,
+      'mouseout',
+      event => this.highlightElement(event),
+      false,
+      '.adi-normal-node',
+    );
+
+    // element lookup
+    this.menuView
+      .querySelector('.adi-menu-lookup')
+      .addEventListener('click', event => this.handleLookup(event), false);
+
+    document.addEventListener('handle-active', e => {
+      if (e.detail.selected === this.getSelected()) {
+        // We caused this. ignore
+        return;
+      }
+      const { selected } = e.detail;
+      const target = this.sourceNodeByInspectorNodeLookup.get(selected);
+      // make it visible (scroll)
+      if (this.options.makeVisible) {
+        const wrap = this.domView.querySelector('.adi-content');
+        if (target.offsetTop >= wrap.clientHeight || target.offsetTop <= wrap.scrollTop) {
+          wrap.scrollTop = target.offsetTop - Math.floor(wrap.clientHeight / 2);
         }
+      }
+
+      this.drawAttrs(this.getSelected());
+    });
+
+    document.addEventListener('execute-action', e => this.processExecuteAction(event), {
+      capture: true,
+    });
+
+    // options events
+    this.addEventDelegate(
+      this.optsView,
+      'change',
+      event => this.changeOption(event),
+      false,
+      'input',
+    );
+    this.addEventDelegate(
+      this.optsView,
+      'click',
+      event => this.toggleOptions(event),
+      false,
+      '.adi-opt-close',
+    );
+    this.menuView
+      .querySelector('.adi-menu-config')
+      .addEventListener('click', event => this.toggleOptions(event), false);
+
+    // attributes events
+    if (!this.isInstanceViewer) {
+      this.addEventDelegate(this.attrView, 'change', this.changeAttribute, false, 'input');
     }
+  }
 }
 
 export default ADI;
-