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

resize-done events only return the relevant width/height value instead of the grid styling string.

Browse Source
This commit is contained in:
trading_peter 2025-01-28 12:12:09 +01:00
parent c77017bfbc
commit 5453201b67
3 changed files with 27 additions and 5 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.3.1",
"version": "1.4.0",
"description": "",
"main": "tp-splitter.js",
"scripts": {

15
tp-hsplitter.js
View File

@ -65,6 +65,7 @@ class TpHSplitter extends LitElement {
dragging: { type: Boolean, reflect: true },
minSideHeight: { type: Number },
lateResize: { type: Boolean },
initialTopHeight: { type: String },
};
}
@ -88,6 +89,12 @@ class TpHSplitter extends LitElement {
return this.shadowRoot.querySelector('#splitter')
}
firstUpdated() {
if (this.initialTopHeight) {
this.style.gridTemplateRows = `${this.initialTopHeight} var(--tp-splitter-width, 5px) 1fr`;
}
}
disconnectedCallback() {
super.disconnectedCallback();
document.removeEventListener('mouseup', this._disableDrag)
@ -110,13 +117,17 @@ class TpHSplitter extends LitElement {
document.body.style['userSelect'] = '';
this.dragging = false;
let finalHeight;
if (this.lateResize && this._bufferedDelta) {
finalHeight = this._topHeight + this._bufferedDelta;
this.splitter.style.transform = '';
this.style.gridTemplateRows = `${this._topHeight + this._bufferedDelta}px 5px 1fr`;
this.style.gridTemplateRows = `${finalHeight}px 5px 1fr`;
this._bufferedDelta = 0;
} else {
finalHeight = this.top.offsetHeight;
}
this.dispatchEvent(new CustomEvent('resize-done', { detail: this.style.gridTemplateRows, bubbles: true, composed: true }));
this.dispatchEvent(new CustomEvent('resize-done', { detail: finalHeight, bubbles: true, composed: true }));
}
_resize(e) {

15
tp-vsplitter.js
View File

@ -60,6 +60,7 @@ class TpVSplitter extends LitElement {
dragging: { type: Boolean },
minSideWidth: { type: Number },
lateResize: { type: Boolean },
initialLeftWidth: { type: String },
};
}
@ -83,6 +84,12 @@ class TpVSplitter extends LitElement {
return this.shadowRoot.querySelector('#splitter')
}
firstUpdated() {
if (this.initialLeftWidth) {
this.style.gridTemplateColumns = `${this.initialLeftWidth} var(--tp-splitter-width, 5px) 1fr`;
}
}
disconnectedCallback() {
super.disconnectedCallback();
document.removeEventListener('mouseup', this._disableDrag)
@ -105,13 +112,17 @@ class TpVSplitter extends LitElement {
document.body.style['userSelect'] = '';
this.dragging = false;
let finalWidth;
if (this.lateResize && this._bufferedDelta) {
finalWidth = this._leftWidth + this._bufferedDelta;
this.splitter.style.transform = '';
this.style.gridTemplateColumns = `${this._leftWidth + this._bufferedDelta}px 5px 1fr`;
this.style.gridTemplateColumns = `${finalWidth}px 5px 1fr`;
this._bufferedDelta = 0;
} else {
finalWidth = this.left.offsetWidth;
}
this.dispatchEvent(new CustomEvent('resize-done', { detail: this.style.gridTemplateColumns, bubbles: true, composed: true }));
this.dispatchEvent(new CustomEvent('resize-done', { detail: finalWidth, bubbles: true, composed: true }));
}
_resize(e) {