diff --git a/src/components/SliderInput/index.ts b/src/components/SliderInput/index.ts index cbcc82ef..97e70155 100644 --- a/src/components/SliderInput/index.ts +++ b/src/components/SliderInput/index.ts @@ -72,7 +72,7 @@ class SliderInput extends Element implements IBindable, IFocusable, IPlaceholder protected _cursorHandleOffset = 0; - protected _touchId: number = null; + protected _pointerId: number = null; /** * Creates a new SliderInput. @@ -132,8 +132,7 @@ class SliderInput extends Element implements IBindable, IFocusable, IPlaceholder this._domHandle.classList.add(CLASS_SLIDER_HANDLE); this._domBar.appendChild(this._domHandle); - this._domSlider.addEventListener('mousedown', this._onMouseDown); - this._domSlider.addEventListener('touchstart', this._onTouchStart, { passive: true }); + this._domSlider.addEventListener('pointerdown', this._onPointerDown); this._domHandle.addEventListener('keydown', this._onKeyDown); if (args.value !== undefined) { @@ -153,81 +152,33 @@ class SliderInput extends Element implements IBindable, IFocusable, IPlaceholder destroy() { if (this._destroyed) return; - this._domSlider.removeEventListener('mousedown', this._onMouseDown); - this._domSlider.removeEventListener('touchstart', this._onTouchStart); - + this._domSlider.removeEventListener('pointerdown', this._onPointerDown); this._domHandle.removeEventListener('keydown', this._onKeyDown); - this.dom.removeEventListener('mouseup', this._onMouseUp); - this.dom.removeEventListener('mousemove', this._onMouseMove); - this.dom.removeEventListener('touchmove', this._onTouchMove); - this.dom.removeEventListener('touchend', this._onTouchEnd); - super.destroy(); } - protected _onMouseDown = (evt: MouseEvent) => { - if (evt.button !== 0 || !this.enabled || this.readOnly) return; + protected _onPointerDown = (evt: PointerEvent) => { + if ((evt.pointerType === 'mouse' && evt.button !== 0) || !this.enabled || this.readOnly || this._pointerId !== null) return; + evt.stopPropagation(); + this._domSlider.setPointerCapture(evt.pointerId); + this._pointerId = evt.pointerId; this._onSlideStart(evt.pageX); }; - protected _onMouseMove = (evt: MouseEvent) => { + protected _onPointerMove = (evt: PointerEvent) => { + if (evt.pointerId !== this._pointerId) return; evt.stopPropagation(); evt.preventDefault(); this._onSlideMove(evt.pageX); }; - protected _onMouseUp = (evt: MouseEvent) => { + protected _onPointerUp = (evt: PointerEvent) => { + if (evt.pointerId !== this._pointerId || this._pointerId === null) return; evt.stopPropagation(); - evt.preventDefault(); + this._domSlider.releasePointerCapture(evt.pointerId); this._onSlideEnd(evt.pageX); - }; - - protected _onTouchStart = (evt: TouchEvent) => { - if (!this.enabled || this.readOnly) return; - - for (let i = 0; i < evt.changedTouches.length; i++) { - const touch = evt.changedTouches[i]; - const node = touch.target as Node; - - if (!node.ui || node.ui !== this) - continue; - - this._touchId = touch.identifier; - this._onSlideStart(touch.pageX); - break; - } - }; - - protected _onTouchMove = (evt: TouchEvent) => { - for (let i = 0; i < evt.changedTouches.length; i++) { - const touch = evt.changedTouches[i]; - - if (touch.identifier !== this._touchId) - continue; - - evt.stopPropagation(); - evt.preventDefault(); - - this._onSlideMove(touch.pageX); - break; - } - }; - - protected _onTouchEnd = (evt: TouchEvent) => { - for (let i = 0; i < evt.changedTouches.length; i++) { - const touch = evt.changedTouches[i]; - - if (touch.identifier !== this._touchId) - continue; - - evt.stopPropagation(); - evt.preventDefault(); - - this._onSlideEnd(touch.pageX); - this._touchId = null; - break; - } + this._pointerId = null; }; protected _onKeyDown = (evt: KeyboardEvent) => { @@ -289,13 +240,8 @@ class SliderInput extends Element implements IBindable, IFocusable, IPlaceholder protected _onSlideStart(pageX: number) { this._domHandle.focus(); - if (this._touchId === null) { - window.addEventListener('mousemove', this._onMouseMove); - window.addEventListener('mouseup', this._onMouseUp); - } else { - window.addEventListener('touchmove', this._onTouchMove); - window.addEventListener('touchend', this._onTouchEnd); - } + window.addEventListener('pointermove', this._onPointerMove); + window.addEventListener('pointerup', this._onPointerUp); this.class.add(CLASS_SLIDER_ACTIVE); @@ -337,13 +283,8 @@ class SliderInput extends Element implements IBindable, IFocusable, IPlaceholder this.class.remove(CLASS_SLIDER_ACTIVE); - if (this._touchId === null) { - window.removeEventListener('mousemove', this._onMouseMove); - window.removeEventListener('mouseup', this._onMouseUp); - } else { - window.removeEventListener('touchmove', this._onTouchMove); - window.removeEventListener('touchend', this._onTouchEnd); - } + window.removeEventListener('pointermove', this._onPointerMove); + window.removeEventListener('pointerup', this._onPointerUp); if (this.binding) { this.binding.historyCombine = this._historyCombine; @@ -352,7 +293,6 @@ class SliderInput extends Element implements IBindable, IFocusable, IPlaceholder this._historyCombine = false; this._historyPostfix = null; } - } focus() { diff --git a/src/components/SliderInput/style.scss b/src/components/SliderInput/style.scss index d2d1d977..b71e5f38 100644 --- a/src/components/SliderInput/style.scss +++ b/src/components/SliderInput/style.scss @@ -5,6 +5,7 @@ height: 24px; margin: $element-margin; align-items: center; + touch-action: none; // Prevents gestures and touch event interference. > .pcui-numeric-input { flex: 1;