tp-splitter/tp-vsplitter.js

156 lines
4.3 KiB
JavaScript
Raw Normal View History

2023-02-06 14:16:10 +01:00
/**
@license
Copyright (c) 2023 trading_peter
*/
import { LitElement, html, css } from 'lit';
class TpVSplitter extends LitElement {
static get styles() {
return [
css`
:host {
display: grid;
2025-01-28 11:07:57 +01:00
grid-template-columns: 1fr var(--tp-splitter-width, 5px) 1fr;
}
:host([lefthidden]),
:host([righthidden]) {
2025-01-28 11:29:00 +01:00
grid-template-columns: 1fr !important;
2025-01-28 11:07:57 +01:00
}
[hidden] {
display: none !important;
2023-02-06 14:16:10 +01:00
}
#left,
#right {
position: relative;
overflow: hidden;
}
2025-01-28 11:07:57 +01:00
#splitter {
2024-03-15 14:01:41 +01:00
background: var(--tp-splitter-line-color, #3b3b3b);
2023-02-06 14:16:10 +01:00
cursor: col-resize;
opacity: 1;
}
2025-01-28 11:07:57 +01:00
#splitter:hover {
2024-03-15 14:01:41 +01:00
background: var(--tp-splitter-line-color-hover, #007dd1);
2023-02-06 14:16:10 +01:00
opacity: 0.5;
}
`
];
}
render() {
2025-01-28 11:07:57 +01:00
const { leftHidden, rightHidden } = this;
2023-02-06 14:16:10 +01:00
return html`
2025-01-28 11:07:57 +01:00
<div id="left" part="left" ?hidden=${leftHidden}><slot name="left"></slot></div>
2025-01-28 11:32:12 +01:00
<div id="splitter" part="splitter" @mousedown=${this._enableDrag} ?hidden=${leftHidden || rightHidden}></div>
2025-01-28 11:07:57 +01:00
<div id="right" part="right" ?hidden=${rightHidden}><slot name="right"></slot></div>
2023-02-06 14:16:10 +01:00
`;
}
static get properties() {
return {
2025-01-28 11:07:57 +01:00
leftHidden: { type: Boolean },
rightHidden: { type: Boolean },
dragging: { type: Boolean },
minSideWidth: { type: Number },
2025-01-28 11:29:00 +01:00
lateResize: { type: Boolean },
initialLeftWidth: { type: String },
2023-02-06 14:16:10 +01:00
};
}
constructor() {
super();
this._disableDrag = this._disableDrag.bind(this);
this._resize = this._resize.bind(this);
2025-01-28 11:29:00 +01:00
this._bufferedDelta = 0;
2023-02-06 14:16:10 +01:00
}
get left() {
return this.shadowRoot.querySelector('#left');
}
get right() {
return this.shadowRoot.querySelector('#right');
}
2025-01-28 11:29:00 +01:00
get splitter() {
return this.shadowRoot.querySelector('#splitter')
}
firstUpdated() {
if (this.initialLeftWidth) {
this.style.gridTemplateColumns = `${this.initialLeftWidth} var(--tp-splitter-width, 5px) 1fr`;
}
}
2025-01-28 11:07:57 +01:00
disconnectedCallback() {
super.disconnectedCallback();
document.removeEventListener('mouseup', this._disableDrag)
document.removeEventListener('mousemove', this._resize);
document.body.style['userSelect'] = '';
2023-02-06 14:16:10 +01:00
}
setWidth(width) {
this.style.gridTemplateColumns = `${width} var(--tp-splitter-width, 5px) 1fr`;
}
2023-02-06 14:16:10 +01:00
_enableDrag(e) {
document.addEventListener('mouseup', this._disableDrag)
document.addEventListener('mousemove', this._resize);
document.body.style['userSelect'] = 'none';
this._startX = e.clientX;
2025-01-28 11:07:57 +01:00
this._leftWidth = this.left.offsetWidth;
this.dragging = true;
2023-02-06 14:16:10 +01:00
}
_disableDrag() {
document.removeEventListener('mouseup', this._disableDrag)
document.removeEventListener('mousemove', this._resize);
document.body.style['userSelect'] = '';
2025-01-28 11:07:57 +01:00
this.dragging = false;
2025-01-28 11:29:00 +01:00
let finalWidth;
2025-01-28 11:29:00 +01:00
if (this.lateResize && this._bufferedDelta) {
finalWidth = this._leftWidth + this._bufferedDelta;
2025-01-28 11:29:00 +01:00
this.splitter.style.transform = '';
this.style.gridTemplateColumns = `${finalWidth}px 5px 1fr`;
2025-01-28 11:29:00 +01:00
this._bufferedDelta = 0;
} else {
finalWidth = this.left.offsetWidth;
2025-01-28 11:29:00 +01:00
}
this.dispatchEvent(new CustomEvent('resize-done', { detail: finalWidth, bubbles: true, composed: true }));
2023-02-06 14:16:10 +01:00
}
_resize(e) {
const delta = e.clientX - this._startX;
2025-01-28 11:07:57 +01:00
const totalWidth = this.offsetWidth;
2025-01-28 11:29:00 +01:00
const minWidth = this.minSideWidth || 0;
2025-01-28 11:07:57 +01:00
const splitterWidth = parseInt(getComputedStyle(this).getPropertyValue('--tp-splitter-width')) || 5;
2025-01-28 11:29:00 +01:00
// Calculate restricted delta
const maxDelta = totalWidth - splitterWidth - minWidth - this._leftWidth;
const minDelta = -this._leftWidth + minWidth;
const restrictedDelta = Math.max(minDelta, Math.min(delta, maxDelta));
if (this.lateResize) {
this._bufferedDelta = restrictedDelta;
this.splitter.style.transform = `translateX(${this._bufferedDelta}px)`;
return;
}
const newLeftWidth = this._leftWidth + restrictedDelta;
2025-01-28 11:07:57 +01:00
this.style.gridTemplateColumns = `${newLeftWidth}px ${splitterWidth}px 1fr`;
2023-02-06 14:16:10 +01:00
this.dispatchEvent(new CustomEvent('resized', { detail: null, bubbles: true, composed: true }));
}
}
window.customElements.define('tp-vsplitter', TpVSplitter);