@jinntec/fore 1.5.0 → 1.6.0

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

@@ -0,0 +1,609 @@
+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);
+}