tp-elements/tp-splitter
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fixes and support for splitter content

Browse Source
This commit is contained in:
trading_peter 2024-03-15 14:01:41 +01:00
parent 30ac8c75eb
commit 8f2586d4b0
3 changed files with 37 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -1,6 +1,6 @@
{
"name": "@tp/tp-splitter",
"version": "1.0.0",
"version": "1.1.0",
"description": "",
"main": "tp-splitter.js",
"scripts": {

45
tp-hsplitter.js
View File

@ -16,7 +16,7 @@ class TpHSplitter extends LitElement {
:host([tophidden]),
:host([bottomhidden]) {
grid-template-rows: 1fr;
grid-template-rows: 1fr !important;
}
[hidden] {
@ -29,14 +29,19 @@ class TpHSplitter extends LitElement {
overflow: hidden;
}
.splitter {
background: var(--lighter-black);
#splitter {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
background: var(--tp-splitter-line-color, #3b3b3b);
cursor: row-resize;
opacity: 1;
z-index: 2;
}
.splitter:hover {
background: var(--hl-color);
#splitter:hover {
background: var(--tp-splitter-line-color-hover, #007dd1);
opacity: 0.5;
}
`
@ -47,9 +52,9 @@ class TpHSplitter extends LitElement {
const { topHidden, bottomHidden } = this;
return html`
<div id="top" ?hidden=${topHidden}><slot name="top"></slot></div>
<div class="splitter" @mousedown=${this._enableDrag} ?hidden=${topHidden || bottomHidden}></div>
<div id="bottom" ?hidden=${bottomHidden}><slot name="bottom"></slot></div>
<div id="top" part="top" ?hidden=${topHidden}><slot name="top"></slot></div>
<div id="splitter" part="splitter" @mousedown=${this._enableDrag} ?hidden=${topHidden || bottomHidden}><slot name="splitter"></slot></div>
<div id="bottom" part="bottom" ?hidden=${bottomHidden}><slot name="bottom"></slot></div>
`;
}
@ -57,8 +62,9 @@ class TpHSplitter extends LitElement {
return {
topHidden: { type: Boolean, reflect: true },
bottomHidden: { type: Boolean, reflect: true },
lateResize: { type: Boolean },
rows: { type: String },
_dragging: { type: Boolean },
dragging: { type: Boolean, reflect: true },
};
}
@ -67,6 +73,7 @@ class TpHSplitter extends LitElement {
this._disableDrag = this._disableDrag.bind(this);
this._resize = this._resize.bind(this);
this._bufferedDelta = 0;
}
shouldUpdate(changes) {
@ -85,24 +92,40 @@ class TpHSplitter extends LitElement {
return this.shadowRoot.querySelector('#bottom');
}
get splitter() {
return this.shadowRoot.querySelector('#splitter')
}
_enableDrag(e) {
document.addEventListener('mouseup', this._disableDrag)
document.addEventListener('mousemove', this._resize);
document.body.style['userSelect'] = 'none';
this._startY = e.clientY;
this._topHeight = this.top.offsetHeight;
this._dragging = true;
this.dragging = true;
}
_disableDrag() {
document.removeEventListener('mouseup', this._disableDrag)
document.removeEventListener('mousemove', this._resize);
document.body.style['userSelect'] = '';
this._dragging = false;
this.dragging = false;
if (this.lateResize && this._bufferedDelta) {
this.splitter.style.transform = '';
this.style.gridTemplateRows = `${this._topHeight + this._bufferedDelta}px 5px 1fr`;
this._bufferedDelta = 0;
}
this.dispatchEvent(new CustomEvent('resize-done', { detail: this.style.gridTemplateRows, bubbles: true, composed: true }));
}
_resize(e) {
if (this.lateResize) {
this._bufferedDelta = e.clientY - this._startY;
this.splitter.style.transform = `translateY(${this._bufferedDelta}px)`;
return;
}
const delta = e.clientY - this._startY;
this.style.gridTemplateRows = `${this._topHeight + delta}px 5px 1fr`;
this.dispatchEvent(new CustomEvent('resized', { detail: null, bubbles: true, composed: true }));

4
tp-vsplitter.js
View File

@ -21,13 +21,13 @@ class TpVSplitter extends LitElement {
}
.splitter {
background: var(--lighter-black);
background: var(--tp-splitter-line-color, #3b3b3b);
cursor: col-resize;
opacity: 1;
}
.splitter:hover {
background: var(--hl-color);
background: var(--tp-splitter-line-color-hover, #007dd1);
opacity: 0.5;
}
`