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

Switch to pointer events for mobile support

Browse Source
This commit is contained in:
trading_peter
2026-01-01 21:24:59 +01:00
parent cea028c229
commit c6944b87ca
3 changed files with 49 additions and 15 deletions
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": "2.0.0", "version": "2.1.0",
"description": "", "description": "",
"main": "tp-splitter.js", "main": "tp-splitter.js",
"scripts": { "scripts": {

31
tp-hsplitter.js
View File

@@ -38,6 +38,7 @@ class TpHSplitter extends LitElement {
cursor: row-resize; cursor: row-resize;
opacity: 1; opacity: 1;
z-index: 2; z-index: 2;
touch-action: none;
} }
#splitter:hover { #splitter:hover {
@@ -53,7 +54,7 @@ class TpHSplitter extends LitElement {
return html` return html`
<div id="top" part="top" ?hidden=${topHidden}><slot name="top"></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="splitter" part="splitter" @pointerdown=${this._enableDrag} ?hidden=${topHidden || bottomHidden}><slot name="splitter"></slot></div>
<div id="bottom" part="bottom" ?hidden=${bottomHidden}><slot name="bottom"></slot></div> <div id="bottom" part="bottom" ?hidden=${bottomHidden}><slot name="bottom"></slot></div>
`; `;
} }
@@ -100,8 +101,8 @@ class TpHSplitter extends LitElement {
disconnectedCallback() { disconnectedCallback() {
super.disconnectedCallback(); super.disconnectedCallback();
document.removeEventListener('mouseup', this._disableDrag) document.removeEventListener('pointerup', this._disableDrag)
document.removeEventListener('mousemove', this._resize); document.removeEventListener('pointermove', this._resize);
document.body.style['userSelect'] = ''; document.body.style['userSelect'] = '';
} }
@@ -110,8 +111,14 @@ class TpHSplitter extends LitElement {
} }
_enableDrag(e) { _enableDrag(e) {
document.addEventListener('mouseup', this._disableDrag) e.preventDefault();
document.addEventListener('mousemove', this._resize); if (this.splitter && e.pointerId != null) {
this.splitter.setPointerCapture(e.pointerId);
this._activePointerId = e.pointerId;
}
document.addEventListener('pointerup', this._disableDrag)
document.addEventListener('pointermove', this._resize, { passive: false });
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;
@@ -119,11 +126,20 @@ class TpHSplitter extends LitElement {
} }
_disableDrag() { _disableDrag() {
document.removeEventListener('mouseup', this._disableDrag) document.removeEventListener('pointerup', this._disableDrag)
document.removeEventListener('mousemove', this._resize); document.removeEventListener('pointermove', this._resize);
document.body.style['userSelect'] = ''; document.body.style['userSelect'] = '';
this.dragging = false; this.dragging = false;
if (this.splitter && this._activePointerId != null) {
try {
this.splitter.releasePointerCapture(this._activePointerId);
} catch (_) {
// ignore
}
this._activePointerId = null;
}
let finalTopHeight; let finalTopHeight;
if (this.lateResize && this._bufferedDelta) { if (this.lateResize && this._bufferedDelta) {
finalTopHeight = this._topHeight + this._bufferedDelta; finalTopHeight = this._topHeight + this._bufferedDelta;
@@ -149,6 +165,7 @@ class TpHSplitter extends LitElement {
} }
_resize(e) { _resize(e) {
e.preventDefault();
const delta = e.clientY - this._startY; const delta = e.clientY - this._startY;
const totalHeight = this.offsetHeight; const totalHeight = this.offsetHeight;
const minHeight = this.minSideHeight || 0; const minHeight = this.minSideHeight || 0;

31
tp-vsplitter.js
View File

@@ -33,6 +33,7 @@ class TpVSplitter extends LitElement {
background: var(--tp-splitter-line-color, #3b3b3b); background: var(--tp-splitter-line-color, #3b3b3b);
cursor: col-resize; cursor: col-resize;
opacity: 1; opacity: 1;
touch-action: none;
} }
#splitter:hover { #splitter:hover {
@@ -48,7 +49,7 @@ class TpVSplitter extends LitElement {
return html` return html`
<div id="left" part="left" ?hidden=${leftHidden}><slot name="left"></slot></div> <div id="left" part="left" ?hidden=${leftHidden}><slot name="left"></slot></div>
<div id="splitter" part="splitter" @mousedown=${this._enableDrag} ?hidden=${leftHidden || rightHidden}></div> <div id="splitter" part="splitter" @pointerdown=${this._enableDrag} ?hidden=${leftHidden || rightHidden}></div>
<div id="right" part="right" ?hidden=${rightHidden}><slot name="right"></slot></div> <div id="right" part="right" ?hidden=${rightHidden}><slot name="right"></slot></div>
`; `;
} }
@@ -99,8 +100,8 @@ class TpVSplitter extends LitElement {
disconnectedCallback() { disconnectedCallback() {
super.disconnectedCallback(); super.disconnectedCallback();
document.removeEventListener('mouseup', this._disableDrag) document.removeEventListener('pointerup', this._disableDrag)
document.removeEventListener('mousemove', this._resize); document.removeEventListener('pointermove', this._resize);
document.body.style['userSelect'] = ''; document.body.style['userSelect'] = '';
} }
@@ -109,8 +110,14 @@ class TpVSplitter extends LitElement {
} }
_enableDrag(e) { _enableDrag(e) {
document.addEventListener('mouseup', this._disableDrag) e.preventDefault();
document.addEventListener('mousemove', this._resize); if (this.splitter && e.pointerId != null) {
this.splitter.setPointerCapture(e.pointerId);
this._activePointerId = e.pointerId;
}
document.addEventListener('pointerup', this._disableDrag)
document.addEventListener('pointermove', this._resize, { passive: false });
document.body.style['userSelect'] = 'none'; document.body.style['userSelect'] = 'none';
this._startX = e.clientX; this._startX = e.clientX;
this._leftWidth = this.left.offsetWidth; this._leftWidth = this.left.offsetWidth;
@@ -118,11 +125,20 @@ class TpVSplitter extends LitElement {
} }
_disableDrag() { _disableDrag() {
document.removeEventListener('mouseup', this._disableDrag) document.removeEventListener('pointerup', this._disableDrag)
document.removeEventListener('mousemove', this._resize); document.removeEventListener('pointermove', this._resize);
document.body.style['userSelect'] = ''; document.body.style['userSelect'] = '';
this.dragging = false; this.dragging = false;
if (this.splitter && this._activePointerId != null) {
try {
this.splitter.releasePointerCapture(this._activePointerId);
} catch (_) {
// ignore
}
this._activePointerId = null;
}
let finalLeftWidth; let finalLeftWidth;
if (this.lateResize && this._bufferedDelta) { if (this.lateResize && this._bufferedDelta) {
finalLeftWidth = this._leftWidth + this._bufferedDelta; finalLeftWidth = this._leftWidth + this._bufferedDelta;
@@ -148,6 +164,7 @@ class TpVSplitter extends LitElement {
} }
_resize(e) { _resize(e) {
e.preventDefault();
const delta = e.clientX - this._startX; const delta = e.clientX - this._startX;
const totalWidth = this.offsetWidth; const totalWidth = this.offsetWidth;
const minWidth = this.minSideWidth || 0; const minWidth = this.minSideWidth || 0;