@jinntec/fore 3.3.1 → 4.0.0

package/src/tools/fx-dom-inspector.js

@@ -1,610 +0,0 @@
-import ADI from './adi.js';
-
-export class FxDomInspector extends HTMLElement {
-  constructor() {
-    super();
-    this.attachShadow({ mode: 'open' });
-    this.instanceName = null;
-    this.instance = null;
-  }
-
-  connectedCallback() {
-    this.render();
-    if (this.instance) {
-      this.shadowRoot.querySelector('#focus-button').style = 'display: none';
-    } else {
-      this.setupFocusButton();
-    }
-  }
-
-  setInstance(instance) {
-    this.instance = instance;
-  }
-
-  disconnectedCallback() {
-    this.adiInstance = null;
-  }
-
-  setupFocusButton() {
-    let styleBackup = '';
-    let focusedElement = null;
-    const removeFocus = () => {
-      if (styleBackup === '') {
-        focusedElement.removeAttribute('style');
-      } else {
-        focusedElement.setAttribute('style', styleBackup);
-      }
-      focusedElement = null;
-    };
-
-    const onHover = event => {
-      const { target } = event;
-      if (event.type === 'mouseover') {
-        styleBackup = target.getAttribute('style') || '';
-        target.setAttribute('style', `outline: 2px solid blue; ${styleBackup}`);
-        focusedElement = target;
-        return;
-      }
-      if (focusedElement) {
-        removeFocus();
-      }
-    };
-
-    const focusButton = this.shadowRoot.querySelector('#focus-button');
-    let isFocussing = false;
-    const styleElement = window.document.head.appendChild(document.createElement('style'));
-    const stopFocussing = () => {
-      isFocussing = false;
-      window.document.body.removeEventListener('click', listener);
-      focusButton.classList.remove('selected-btn');
-      styleElement.innerHTML = '';
-      document.body.style.cursor = 'auto';
-
-      window.document.body.removeEventListener('mouseover', onHover);
-      window.document.body.removeEventListener('mouseout', onHover);
-      if (focusedElement) {
-        removeFocus();
-      }
-    };
-    const listener = event => {
-      stopFocussing();
-
-      event.preventDefault();
-      event.stopPropagation();
-      if (event.target !== focusButton) {
-        // Do not 'click on the focusbutton. It's a cancel.
-        // console.log('done', event.target);
-        window.document.dispatchEvent(
-          new CustomEvent('log-active-element', { detail: { target: event.target } }),
-        );
-      }
-    };
-    const startFocussing = () => {
-      isFocussing = true;
-      focusButton.classList.add('selected-btn');
-      document.body.style.cursor = 'crosshair';
-
-      window.document.body.removeEventListener('click', listener);
-      styleElement.innerHTML =
-        'fx-fore::before { color:blue; content: "Sub fore!" } fx-fore {border: solid 1px blue}';
-      window.document.body.addEventListener('click', listener);
-
-      window.document.body.addEventListener('mouseover', onHover);
-      window.document.body.addEventListener('mouseout', onHover);
-    };
-    window.document.addEventListener('keyup', event => {
-      if (isFocussing && event.code === 'Escape') {
-        stopFocussing();
-        return;
-      }
-      if (!isFocussing && event.code === 'KeyI' && event.ctrlKey) {
-        startFocussing();
-      }
-    });
-    focusButton.addEventListener('click', clickEvent => {
-      if (isFocussing) {
-        stopFocussing();
-      } else {
-        startFocussing();
-      }
-
-      clickEvent.preventDefault();
-      clickEvent.stopPropagation();
-    });
-  }
-
-  render() {
-    const style = `
-      @import '../../resources/fore.css';
-      
-        :host {
-          display:block;
-          background:transparent;
-        }
-        body {
-            -webkit-animation: bugfix infinite 1s;
-            font-size:1rem;
-        }
-        
-        @-webkit-keyframes bugfix {
-            from {
-                padding: 0
-            }
-            to {
-                padding: 0
-            }
-        }
-        .adi-content {
-            position: relative;
-            overflow: auto;
-            box-sizing: border-box;
-            -moz-box-sizing: border-box;
-            height: 100% !important;
-            padding:0;
-            font-size:0.8em;
-        }
-        .adi-content header{
-            padding:0.5rem;
-            // background:rgba(255, 255, 255, 0.2);
-            border-bottom:2px solid #ddd;
-            border-collapse:collapse;
-        }
-        .adi-content > * {
-            padding:0 0.25em;
-        }
-        
-        #adi-wrapper {
-            top: 0;
-            font-family: "Segoe UI", Arial;
-            font-size: 1.1rem;
-            -webkit-user-select: none;
-            -moz-user-select: none;
-            -ms-user-select: none;
-            user-select: none;
-            position:relative;
-            height:calc(100% - 8rem);
-            display:flex;
-        }
-        
-        #adi-wrapper.left {
-            left: 0
-        }
-        
-        #adi-wrapper.right {
-            right: 0
-        }
-        
-        #adi-wrapper.transparent {
-            background: rgba(250, 250, 250, 0.9)
-        }
-        
-        #adi-panel {
-            position:fixed;
-            top:0;
-            /*bottom: 0;*/
-            right: 0;
-            height: 24px;
-            background: #d4d4d4;
-            border-top: 1px solid #bbc5c9
-        }
-        
-        #adi-panel .adi-path-wrap {
-            position:absolute;
-            bottom: 0;
-            left: 0;
-            width: 80%;
-            height: 24px;
-            padding: 0 13px 0 18px;
-            line-height: 24px;
-            overflow: hidden;
-            box-sizing: border-box;
-            -moz-box-sizing: border-box
-        }
-        
-        #adi-panel .adi-path-wrap.adi-overflowing .adi-path-left, 
-        #adi-panel .adi-path-wrap.adi-overflowing .adi-path-right {
-            display: block
-        }
-        
-        #adi-panel .adi-path {
-            height: 24px;
-            overflow: hidden;
-            white-space: nowrap
-        }
-        
-        #adi-panel .adi-path-left, #adi-panel .adi-path-right {
-            display: none;
-            position: absolute;
-            top: 0;
-            width: 8px;
-            height: 24px;
-            background-repeat: no-repeat;
-            background-position: center center;
-            opacity: .7
-        }
-        
-        #adi-panel .adi-path-left:hover, #adi-panel .adi-path-right:hover {
-            opacity: 1
-        }
-        
-        #adi-panel .adi-path-left {
-            left: 7px;
-            background-image: url('img/left_shift.png')
-        }
-        
-        #adi-panel .adi-path-right {
-            position:absolute;
-            right: 2px;
-            background-image: url('/resources/scripts/dom-inspector/img/right_shift.png')
-        }
-        
-        #adi-panel .adi-menu-wrap {
-            bottom: 0;
-            right: 24px;
-            width: 50px;
-            height: 24px
-        }
-        
-        #adi-panel .adi-menu-lookup, #adi-panel .adi-menu-config {
-            display: block;
-            float: left;
-            width: 24px;
-            height: 24px;
-            border-left: 1px solid #bbc5c9;
-            background-position: center center;
-            background-repeat: no-repeat;
-            opacity: .7;
-            border-radius: 0
-        }
-        
-        #adi-panel .adi-menu-lookup:hover, #adi-panel .adi-menu-config:hover {
-            background-color: #c5d9d8;
-            opacity: 1
-        }
-        
-        #adi-panel .adi-menu-lookup.adi-active, #adi-panel .adi-menu-config.adi-active {
-            background-color: #fafafa;
-            opacity: 1
-        }
-        
-        #adi-panel .adi-menu-lookup {
-            background-image: url('/resources/scripts/dom-inspector/img/lookup.png')
-        }
-        
-        #adi-panel .adi-menu-config {
-            background-image: url('/resources/scripts/dom-inspector/img/config.png')
-        }
-        
-        
-        
-        #adi-vert-split {
-            position: fixed;
-            top: 0;
-            width: 4px;
-            height: 100%;
-            cursor: e-resize;
-            border-width: 0 1px 0 0;
-            background: #bbc5c9;
-            border-color: #768285;
-            border-style: solid;
-            -webkit-user-select: none;
-            -moz-user-select: none;
-            -ms-user-select: none;
-            user-select: none;
-        }
-        
-        #adi-vert-split:hover {
-            background: #c5d9d8;
-        }
-        
-        
-        #adi-dom-view {
-            border-right:2px solid #ddd;
-            overflow:auto;
-            flex-grow:3;
-        }
-        
-        #adi-dom-view ul {
-            margin: 0;
-            padding: 0;
-            list-style: none
-        }
-        
-        #adi-dom-view ul[data-open=true] {
-            display: block
-        }
-        
-        #adi-dom-view ul[data-open=false] {
-            display: none
-        }
-        
-        #adi-dom-view ul ul {
-            margin: 4px 0
-        }
-        
-        #adi-dom-view ul li {
-            padding-left: 1em;
-            padding-bottom: 0.125em;
-            margin: 0;
-            padding-top: 0.125em;        
-        }
-        
-        
-        
-        
-        
-        
-        
-        #adi-dom-view .adi-normal-node, 
-        #adi-dom-view .adi-end-node {
-            margin-right: 5px;
-            padding: 0 6px 0px;
-            background: #d2e8ff;
-            border-radius: 8px;
-            cursor: default;
-            font-size:0.8rem;
-        }
-        #adi-dom-view .adi-text-node:after, #adi-dom-view .adi-comment-node:after {
-            content: '"'
-        }
-        
-        #adi-dom-view .adi-text-node:before, #adi-dom-view .adi-comment-node:before {
-            content: '"'
-        }
-        
-        #adi-dom-view .adi-comment-node {
-            color: #999;
-            font-style: italic
-        }
-        
-        #adi-dom-view .adi-text-node, #adi-dom-view .adi-comment-node {
-            display: block;
-            padding: 3px 8px;
-            color: #444;
-            background: #fff;
-            border-radius: 8px
-        }
-        
-        #adi-dom-view .adi-normal-node:hover, 
-        #adi-dom-view .adi-normal-node.hover, 
-        #adi-dom-view .adi-end-node:hover, 
-        #adi-dom-view .adi-end-node.hover {
-            background: var(--paper-grey-700);
-            color:white;
-        }
-        
-       #adi-dom-view .adi-normal-node:hover ~ span,
-       #adi-dom-view .adi-normal-node.hover ~ span,
-       #adi-dom-view .adi-end-node:hover ~ span,
-       #adi-dom-view .adi-end-node.hover ~ span {
-            background: var(--paper-grey-700);
-            color:white;
-        }
-        
-        #adi-dom-view .adi-normal-node.adi-active-node, 
-        #adi-dom-view .adi-end-node.adi-active-node {
-            background: var(--paper-grey-700);
-            color:white;
-        }
-        
-        #adi-dom-view .adi-normal-node.adi-active-node ~ span,
-        #adi-dom-view .adi-end-node.adi-active-node ~ span {
-            background: var(--paper-grey-700);
-            color:white;
-        }
-        
-        
-        
-        
-        
-        
-        #adi-dom-view .adi-trigger {
-            display: inline-block;
-            width: 10px;
-            height: 10px;
-            margin: 0 5px 0 -13px;
-            opacity: .7
-        }
-        
-        #adi-dom-view .adi-trigger.closed {
-            // background: url('/resources/scripts/dom-inspector/img/node_closed.png') no-repeat;
-        }   
-        #adi-dom-view .adi-trigger.closed::before {
-            content:'\\25B8';
-        }
-        
-        #adi-dom-view .adi-trigger.opened {
-            // background: url('/resources/scripts/dom-inspector/img/node_opened.png') no-repeat
-        }
-        #adi-dom-view .adi-trigger.opened::before{
-            content:'\\25BE';
-        }
-        
-        #adi-dom-view .adi-trigger:hover {
-            opacity: 1
-        }
-        
-        #adi-opts-view {
-            position: relative;
-            height: 100%;
-            padding: 0 15px;
-            background: #fff
-        }
-        
-        #adi-opts-view.adi-hidden {
-            display: none
-        }
-        
-        #adi-opts-view .adi-opt-heading, #adi-opts-view .adi-opt {
-            display: block;
-            padding: 5px 0
-        }
-        
-        #adi-opts-view .adi-opt-heading {
-            padding: 20px 0 10px;
-            font-size: 1rem;
-        }
-        
-        #adi-opts-view .adi-opt-heading:first-child {
-            padding-top: 10px
-        }
-        
-        #adi-opts-view .adi-opt input {
-            margin-right: 6px
-        }
-        
-        #adi-opts-view .adi-opt-close {
-            position: absolute;
-            top: 5px;
-            right: 28px;
-            width: 16px;
-            height: 16px;
-            background: url('/resources/scripts/dom-inspector/img/options_close.png') no-repeat;
-            opacity: .7;
-        }
-        
-        #adi-opts-view .adi-opt-close:hover {
-            opacity: 1;
-        }
-        
-        #adi-attr-view {
-            top: 0.5rem;
-            border: 1px solid #ddd;
-            overflow: auto;
-            padding: 0.25em;
-            height: calc(90% - 1em);
-            min-width: 10rem;
-            position: absolute;
-            z-index: 10;
-            right: 0.5rem;
-            background:rgba(255,255,255,0.85);
-        }
-        #adi-attr-view > .adi-content{
-            height:calc(100% - 5em);
-            overflow:auto;
-        }
-        
-        #adi-attr-view .adi-attr {
-            display: block;
-            padding: 0.25em;
-        }
-        
-        #adi-attr-view hr {
-            height: 1px;
-            border: none
-        }
-        
-        #adi-attr-view input[type=text] {
-            width: calc(100% - 0.5em);
-            margin-top: 3px;
-            padding: 2px;
-        }
-        
-        #adi-horiz-split {
-            height: 4px;
-            cursor: n-resize;
-            border-width: 0 0 1px 0;
-            background: #bbc5c9;
-            border-color: #768285;
-            border-style: solid;
-            -webkit-user-select: none;
-            -moz-user-select: none;
-            -ms-user-select: none;
-            user-select: none;
-        }
-        
-        #adi-horiz-split:hover {
-            background: #c5d9d8;
-        }
-        
-        #adi-dom-view .fore-node{
-            background: var(--paper-blue-700);
-            font-size:1.1em;
-             color:white;
-        }
-        #adi-dom-view .adi-normal-node.fore-node:hover {
-            background: var(--paper-grey-700);
-            color:white;
-        }
-        #adi-dom-view .adi-end-node.fore-node{
-            background: var(--paper-blue-700);
-            font-size:1em;
-            color:white;
-       }
-
-        #adi-dom-view .adi-node .adi-active-node.fore-node,
-        #adi-dom-view .adi-node.action .adi-active-node.fore-node,
-        #adi-dom-view .adi-node.action .adi-active-node.fore-node ~ .adi-end-node
-         {
-            background: var(--paper-grey-700);
-            color:white;
-        }
-        
-        #adi-dom-view .adi-node.fx-fore{
-            background:var(--paper-blue-grey-50); 
-        }
-        #adi-dom-view .adi-node.fx-model{
-            background:var(--paper-blue-grey-100); 
-            padding:0.25em 0;
-        }       
-               
-        #adi-dom-view .adi-node.action .fore-node {
-            background:var(--paper-blue-grey-100);
-            color:black;
-            font-family:monospace;
-        }
-                    
-        .toggleView{
-            /*width:20px;*/
-            /*height: 20px;*/
-        }
-        input, select{
-            display: block;
-        }
-        header{
-            background:rgba(255, 255, 255, 0.2);
-        }
-
-        .selected-btn { color: orange }
-      `;
-
-    const html = `
-        <slot name="header"></slot>
-        <button id="focus-button">Focus</button>
-        <slot></slot>
-      `;
-
-    this.shadowRoot.innerHTML = `
-          <style>
-              ${style}
-          </style>
-          ${html}
-      `;
-    const inst = this.hasAttribute('instance') ? this.getAttribute('instance') : '#document';
-    this.adiInstance = new ADI(
-      this.shadowRoot,
-      this.hasAttribute('instance') ? this.instance : '#document',
-    );
-  }
-
-  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();
-    }
-  }
-}
-
-if (!customElements.get('fx-dom-inspector')) {
-  customElements.define('fx-dom-inspector', FxDomInspector);
-}