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", "name": "@tp/tp-splitter",
"version": "1.0.0", "version": "1.1.0",
"description": "", "description": "",
"main": "tp-splitter.js", "main": "tp-splitter.js",
"scripts": { "scripts": {

45
tp-hsplitter.js
View File

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