@gravitee/ui-components 3.25.3-typescript-50960c3 → 3.25.3-typescript-9d19b68

package/src/organisms/gv-resizable-views.js

@@ -1 +1,371 @@
-Object.defineProperty(exports,"__esModule",{value:!0}),exports.GvResizableViews=void 0;const t=require("lit"),e=require("lit/directives/class-map"),o=require("../lib/events");class i extends t.LitElement{static get properties(){return{direction:{type:String,reflect:!0},noOverflow:{type:Boolean,attribute:"no-overflow"}}}constructor(){super(),this.direction="vertical"}split(){this.resize()}maximizeTop(){this.resize(85,15)}maximizeBottom(){this.resize(20,80)}resize(t=50,e=50){this.shadowRoot.querySelector(".top").style.height=`${t}%`,this.shadowRoot.querySelector(".bottom").style.height=`${e}%`,setTimeout((()=>{(0,o.dispatchCustomEvent)(this,"resize",{top:t,bottom:e})}),350)}resizable(t){const e=t.getAttribute("data-direction")||"horizontal",i=t.previousElementSibling,r=t.nextElementSibling;let s=0,n=0,l=0,a=0;const c=this.shadowRoot,d=this,h=function(c){const h=c.clientX-s,v=c.clientY-n;if((0,o.dispatchCustomEvent)(d,"move",{direction:e}),"vertical"===e)i.style.height=100*(l+v)/t.parentNode.getBoundingClientRect().height+"%",r.style.height=100-100*(l+v)/t.parentNode.getBoundingClientRect().height+"%";else i.style.width=100*(a+h)/t.parentNode.getBoundingClientRect().width+"%";const u="horizontal"===e?"col-resize":"row-resize";t.style.cursor=u,t.classList.add("drag"),document.body.style.cursor=u,i.style.userSelect="none",i.style.pointerEvents="none",r.style.userSelect="none",r.style.pointerEvents="none"},v=function(){t.style.removeProperty("cursor"),t.classList.remove("drag"),document.body.style.removeProperty("cursor"),i.style.removeProperty("user-select"),i.style.removeProperty("pointer-events"),r.style.removeProperty("user-select"),r.style.removeProperty("pointer-events"),document.removeEventListener("mousemove",h),document.removeEventListener("mouseup",v),c.querySelector(".box").classList.add("transition")};t.addEventListener("mousedown",(function(t){if(!t.target.classList.contains("action")){c.querySelector(".box").classList.remove("transition"),s=t.clientX,n=t.clientY;const e=i.getBoundingClientRect();l=e.height,a=e.width,document.addEventListener("mousemove",h),document.addEventListener("mouseup",v)}}))}firstUpdated(){this.shadowRoot.querySelectorAll(".resizer").forEach((t=>this.resizable(t)))}get shape(){return"horizontal"===this.direction?"design:vertical":"design:horizontal"}render(){return t.html`<div class="${(0,e.classMap)({box:!0,transition:!0,"no-overflow":this.noOverflow})}"><div class="top"><slot name="top"></slot></div><div class="resizer" data-direction="${this.direction}"><gv-icon shape="${this.shape}"></gv-icon><div class="actions"><gv-icon class="layout-icon" shape="layout:layout-right-panel-2"></gv-icon><gv-button small link class="action" icon="layout:layout-bottom-panel" title="Maximize top" @gv-button:click="${this.maximizeTop}"></gv-button><gv-button small link class="action" icon="layout:layout-horizontal-2" title="Split screen" @gv-button:click="${this.split}"></gv-button><gv-button small link class="action" icon="layout:layout-top-panel-6" title="Maximize bottom" @gv-button:click="${this.maximizeBottom}"></gv-button></div></div><div class="bottom"><slot name="bottom"></slot></div></div>`}static get styles(){return[t.css`.box{display:flex;height:100%;flex:1 1 0;flex-direction:column}:host([direction=horizontal]) .box{flex-direction:row}:host([direction=horizontal]) .layout-icon{display:none}*{box-sizing:border-box}::slotted(*){display:inline-block;width:100%}.no-overflow ::slotted(*){height:100%;position:relative}.bottom,.top{position:relative}.no-overflow .bottom,.no-overflow .top{overflow:hidden}.bottom{display:flex;flex-grow:1}.left{width:70%}.left,.right{padding:.2rem;overflow:auto}.bottom,.top{border-left:1px solid #bfbfbf;border-right:1px solid #bfbfbf;height:100%}:host([direction=horizontal]) .top{border-right:0}:host([direction=horizontal]) .bottom{border-left:0}.transition .bottom,.transition .top{transition:height 350ms ease-in-out}.top{overflow-y:auto;overflow-x:hidden;height:50%}.bottom{overflow-y:auto;overflow-x:hidden;height:50%}:host([direction=horizontal]) .bottom,:host([direction=horizontal]) .top{height:100%;width:50%}.resizer{z-index:10;background-color:#d9d9d9;--gv-icon--s:20px;display:flex;align-items:center;justify-content:flex-end;--gv-icon--c:#28444f;transition:all .2s ease-in-out;position:relative}.resizer.drag{border-width:4px 0;border-style:double;border-color:#d9d9d9;background-color:#fff}.resizer .actions,.resizer gv-icon{transition:all .2s ease-in-out}.resizer.drag .actions,.resizer.drag gv-icon{visibility:hidden;opacity:0}:host([direction=horizontal]) .resizer.drag{border-width:0 4px}.resizer>gv-icon{position:absolute}:host([direction=horizontal]) .resizer{align-items:flex-start}:host([direction=vertical]) .resizer gv-icon{right:45px}:host([direction=horizontal]) .resizer gv-icon{left:-9px;top:45px}.resizer[data-direction=vertical]{cursor:ns-resize;height:2px;width:100%}.resizer[data-direction=horizontal]{cursor:ew-resize;height:100%;width:2px}.actions{margin-top:-22px;margin-right:15px;padding:0 .2rem;border-radius:4px 4px 0 0;background-color:#d9d9d9}.actions gv-button{margin:.2rem .1rem;visibility:hidden;opacity:0;display:none;transition:all 250ms ease-in-out}.actions:focus-within,.actions:hover{padding:.2rem;margin-top:-66px}.actions:focus-within gv-button,.actions:hover gv-button{display:block;opacity:1;visibility:visible}.actions:focus-within gv-icon,.actions:hover gv-icon{display:none;opacity:0;visibility:hidden}`]}}exports.GvResizableViews=i,window.customElements.define("gv-resizable-views",i);
+/*
+ * Copyright (C) 2015 The Gravitee team (http://gravitee.io)
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *         http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { css, LitElement, html } from 'lit';
+import { classMap } from 'lit/directives/class-map';
+import { dispatchCustomEvent } from '../lib/events';
+/**
+ * Resizable views component
+ *
+ * @fires gv-resizable-views:resize - when user click to resize action
+ * @fires gv-resizable-views:move - when user move the resize cursor
+ *
+ * @slot top - The top content
+ * @slot bottom - The bottom content
+ *
+ * @attr {String} direction - the direction [vertical|horizonal]
+ * @attr {Boolean} no-overflow - true if slot containers should have `overflow: hidden`
+ */
+export class GvResizableViews extends LitElement {
+    static get properties() {
+        return {
+            direction: { type: String, reflect: true },
+            noOverflow: { type: Boolean, attribute: 'no-overflow' },
+        };
+    }
+    constructor() {
+        super();
+        this.direction = 'vertical';
+    }
+    split() {
+        this.resize();
+    }
+    maximizeTop() {
+        this.resize(85, 15);
+    }
+    maximizeBottom() {
+        this.resize(20, 80);
+    }
+    resize(top = 50, bottom = 50) {
+        this.shadowRoot.querySelector('.top').style.height = `${top}%`;
+        this.shadowRoot.querySelector('.bottom').style.height = `${bottom}%`;
+        // Dispatch event after transition
+        setTimeout(() => {
+            dispatchCustomEvent(this, 'resize', { top, bottom });
+        }, 350);
+    }
+    resizable(resizer) {
+        const direction = resizer.getAttribute('data-direction') || 'horizontal';
+        const prevSibling = resizer.previousElementSibling;
+        const nextSibling = resizer.nextElementSibling;
+        // The current position of mouse
+        let x = 0;
+        let y = 0;
+        let prevSiblingHeight = 0;
+        let prevSiblingWidth = 0;
+        const shadowRoot = this.shadowRoot;
+        const me = this;
+        // Handle the mousedown event
+        // that's triggered when user drags the resizer
+        const mouseDownHandler = function (e) {
+            if (!e.target.classList.contains('action')) {
+                // Get the current mouse position
+                shadowRoot.querySelector('.box').classList.remove('transition');
+                x = e.clientX;
+                y = e.clientY;
+                const rect = prevSibling.getBoundingClientRect();
+                prevSiblingHeight = rect.height;
+                prevSiblingWidth = rect.width;
+                // Attach the listeners to `document`
+                document.addEventListener('mousemove', mouseMoveHandler);
+                document.addEventListener('mouseup', mouseUpHandler);
+            }
+        };
+        const mouseMoveHandler = function (e) {
+            // How far the mouse has been moved
+            const dx = e.clientX - x;
+            const dy = e.clientY - y;
+            dispatchCustomEvent(me, 'move', { direction });
+            switch (direction) {
+                case 'vertical':
+                    prevSibling.style.height = `${((prevSiblingHeight + dy) * 100) / resizer.parentNode.getBoundingClientRect().height}%`;
+                    nextSibling.style.height = `${100 - ((prevSiblingHeight + dy) * 100) / resizer.parentNode.getBoundingClientRect().height}%`;
+                    break;
+                case 'horizontal':
+                default:
+                    prevSibling.style.width = `${((prevSiblingWidth + dx) * 100) / resizer.parentNode.getBoundingClientRect().width}%`;
+                    break;
+            }
+            const cursor = direction === 'horizontal' ? 'col-resize' : 'row-resize';
+            resizer.style.cursor = cursor;
+            resizer.classList.add('drag');
+            document.body.style.cursor = cursor;
+            prevSibling.style.userSelect = 'none';
+            prevSibling.style.pointerEvents = 'none';
+            nextSibling.style.userSelect = 'none';
+            nextSibling.style.pointerEvents = 'none';
+        };
+        const mouseUpHandler = function () {
+            resizer.style.removeProperty('cursor');
+            resizer.classList.remove('drag');
+            document.body.style.removeProperty('cursor');
+            prevSibling.style.removeProperty('user-select');
+            prevSibling.style.removeProperty('pointer-events');
+            nextSibling.style.removeProperty('user-select');
+            nextSibling.style.removeProperty('pointer-events');
+            // Remove the handlers of `mousemove` and `mouseup`
+            document.removeEventListener('mousemove', mouseMoveHandler);
+            document.removeEventListener('mouseup', mouseUpHandler);
+            shadowRoot.querySelector('.box').classList.add('transition');
+        };
+        // Attach the handler
+        resizer.addEventListener('mousedown', mouseDownHandler);
+    }
+    firstUpdated() {
+        this.shadowRoot.querySelectorAll('.resizer').forEach((elt) => this.resizable(elt));
+    }
+    get shape() {
+        if (this.direction === 'horizontal') {
+            return 'design:vertical';
+        }
+        return 'design:horizontal';
+    }
+    render() {
+        return html `
+      <div class="${classMap({ box: true, transition: true, 'no-overflow': this.noOverflow })}">
+        <div class="top"><slot name="top"></slot></div>
+        <div class="resizer" data-direction="${this.direction}">
+          <gv-icon shape="${this.shape}"></gv-icon>
+          <div class="actions">
+            <gv-icon class="layout-icon" shape="layout:layout-right-panel-2"></gv-icon>
+            <gv-button
+              small
+              link
+              class="action"
+              icon="layout:layout-bottom-panel"
+              title="Maximize top"
+              @gv-button:click="${this.maximizeTop}"
+            ></gv-button>
+            <gv-button
+              small
+              link
+              class="action"
+              icon="layout:layout-horizontal-2"
+              title="Split screen"
+              @gv-button:click="${this.split}"
+            ></gv-button>
+            <gv-button
+              small
+              link
+              class="action"
+              icon="layout:layout-top-panel-6"
+              title="Maximize bottom"
+              @gv-button:click="${this.maximizeBottom}"
+            ></gv-button>
+          </div>
+        </div>
+        <div class="bottom"><slot name="bottom"></slot></div>
+      </div>
+    `;
+    }
+    static get styles() {
+        return [
+            // language=css
+            css `
+        .box {
+          display: flex;
+          height: 100%;
+          flex: 1 1 0;
+          flex-direction: column;
+        }
+
+        :host([direction='horizontal']) .box {
+          flex-direction: row;
+        }
+
+        :host([direction='horizontal']) .layout-icon {
+          display: none;
+        }
+
+        * {
+          box-sizing: border-box;
+        }
+
+        ::slotted(*) {
+          display: inline-block;
+          width: 100%;
+        }
+
+        .no-overflow ::slotted(*) {
+          height: 100%;
+          position: relative;
+        }
+
+        .top,
+        .bottom {
+          position: relative;
+        }
+
+        .no-overflow .top,
+        .no-overflow .bottom {
+          overflow: hidden;
+        }
+
+        .bottom {
+          display: flex;
+          flex-grow: 1;
+        }
+
+        .left {
+          width: 70%;
+        }
+
+        .left,
+        .right {
+          padding: 0.2rem;
+          overflow: auto;
+        }
+
+        .top,
+        .bottom {
+          border-left: 1px solid #bfbfbf;
+          border-right: 1px solid #bfbfbf;
+          height: 100%;
+        }
+
+        :host([direction='horizontal']) .top {
+          border-right: 0;
+        }
+
+        :host([direction='horizontal']) .bottom {
+          border-left: 0;
+        }
+
+        .transition .top,
+        .transition .bottom {
+          transition: height 350ms ease-in-out;
+        }
+
+        .top {
+          overflow-y: auto;
+          overflow-x: hidden;
+          height: 50%;
+        }
+
+        .bottom {
+          overflow-y: auto;
+          overflow-x: hidden;
+          height: 50%;
+        }
+
+        :host([direction='horizontal']) .top,
+        :host([direction='horizontal']) .bottom {
+          height: 100%;
+          width: 50%;
+        }
+
+        .resizer {
+          z-index: 10;
+          background-color: #d9d9d9;
+          --gv-icon--s: 20px;
+          display: flex;
+          align-items: center;
+          justify-content: flex-end;
+          --gv-icon--c: #28444f;
+          transition: all 0.2s ease-in-out;
+          position: relative;
+        }
+
+        .resizer.drag {
+          border-width: 4px 0;
+          border-style: double;
+          border-color: #d9d9d9;
+          background-color: white;
+        }
+
+        .resizer gv-icon,
+        .resizer .actions {
+          transition: all 0.2s ease-in-out;
+        }
+
+        .resizer.drag gv-icon,
+        .resizer.drag .actions {
+          visibility: hidden;
+          opacity: 0;
+        }
+
+        :host([direction='horizontal']) .resizer.drag {
+          border-width: 0 4px;
+        }
+
+        .resizer > gv-icon {
+          position: absolute;
+        }
+
+        :host([direction='horizontal']) .resizer {
+          align-items: flex-start;
+        }
+
+        :host([direction='vertical']) .resizer gv-icon {
+          right: 45px;
+        }
+
+        :host([direction='horizontal']) .resizer gv-icon {
+          left: -9px;
+          top: 45px;
+        }
+
+        .resizer[data-direction='vertical'] {
+          cursor: ns-resize;
+          height: 2px;
+          width: 100%;
+        }
+
+        .resizer[data-direction='horizontal'] {
+          cursor: ew-resize;
+          height: 100%;
+          width: 2px;
+        }
+
+        .actions {
+          margin-top: -22px;
+          margin-right: 15px;
+          padding: 0 0.2rem;
+          border-radius: 4px 4px 0 0;
+          background-color: #d9d9d9;
+        }
+
+        .actions gv-button {
+          margin: 0.2rem 0.1rem;
+          visibility: hidden;
+          opacity: 0;
+          display: none;
+          transition: all 250ms ease-in-out;
+        }
+
+        .actions:focus-within,
+        .actions:hover {
+          padding: 0.2rem;
+          margin-top: -66px;
+        }
+
+        .actions:focus-within gv-button,
+        .actions:hover gv-button {
+          display: block;
+          opacity: 1;
+          visibility: visible;
+        }
+
+        .actions:focus-within gv-icon,
+        .actions:hover gv-icon {
+          display: none;
+          opacity: 0;
+          visibility: hidden;
+        }
+      `,
+        ];
+    }
+}
+window.customElements.define('gv-resizable-views', GvResizableViews);