Feature: Slider - Draggable functionality #93
Conversation
src/slider/tp-slider.ts
Outdated
| handleMouseOver() { | ||
| // Only styles when the draggable will be yes. | ||
| if ( this.getAttribute( 'draggable' ) === 'yes' ) { | ||
| this.classList.add( 'tp-slider--grab' ); |
There was a problem hiding this comment.
@AvinashVinod03 lets use javascript to do the style updates.
src/slider/tp-slider.ts
Outdated
| handleMouseOut() { | ||
| // Reset cursor if not dragging. | ||
| if ( ! this.isDragging ) { | ||
| this.classList.remove( 'tp-slider--grab' ); |
There was a problem hiding this comment.
@AvinashVinod03 lets use javascript to do the style updates.
src/slider/tp-slider.ts
Outdated
| this.dragOffsetX = 0; | ||
|
|
||
| // Reset cursor and user-select styles | ||
| this.classList.remove( 'tp-slider--grabbing' ); |
There was a problem hiding this comment.
@AvinashVinod03 lets use javascript to do the style updates.
src/slider/tp-slider.ts
Outdated
|
|
||
| // Reset cursor and user-select styles | ||
| this.classList.remove( 'tp-slider--grabbing' ); | ||
| this.classList.add( 'tp-slider--grab' ); |
There was a problem hiding this comment.
@AvinashVinod03 lets use javascript to do the style updates.
src/slider/tp-slider.ts
Outdated
| // Reset cursor and user-select styles | ||
| this.classList.remove( 'tp-slider--grabbing' ); | ||
| this.classList.add( 'tp-slider--grab' ); | ||
| this.classList.remove( 'tp-slider--dragging' ); |
There was a problem hiding this comment.
@AvinashVinod03 lets use javascript to do the style updates.
src/slider/tp-slider.ts
Outdated
| event.preventDefault(); | ||
|
|
||
| // Apply the grabbing cursor class | ||
| this.classList.add( 'tp-slider--grabbing' ); |
There was a problem hiding this comment.
@AvinashVinod03 lets use javascript to do the style updates.
src/slider/tp-slider.ts
Outdated
|
|
||
| // Apply the grabbing cursor class | ||
| this.classList.add( 'tp-slider--grabbing' ); | ||
| this.classList.remove( 'tp-slider--grab' ); |
There was a problem hiding this comment.
@AvinashVinod03 lets use javascript to do the style updates.
src/slider/tp-slider.ts
Outdated
| this.classList.remove( 'tp-slider--grab' ); | ||
|
|
||
| // Prevent text selection | ||
| this.classList.add( 'tp-slider--dragging' ); |
There was a problem hiding this comment.
@AvinashVinod03 lets use javascript to do the style updates.
| @@ -0,0 +1,62 @@ | |||
| tp-slider { | |||
There was a problem hiding this comment.
@AvinashVinod03 Is this committed by mistake?
There was a problem hiding this comment.
No @junaidbhura, as this is for the draggable functionality example.
| /** | ||
| * Check and initialize draggable behavior. | ||
| */ | ||
| checkDraggable() { |
There was a problem hiding this comment.
@AvinashVinod03 I wonder if draggable should be implied by swipe rather than creating a separate attribute? Have we evaluated the pros and cons?
| event.preventDefault(); | ||
|
|
||
| // Update styles for grabbing and disable text selection. | ||
| this.style.cursor = 'grabbing'; |
There was a problem hiding this comment.
@AvinashVinod03 Perhaps this should be attributes on the component itself. Please avoid using CSS in JS
There was a problem hiding this comment.
@junaidbhura do you want that we want to use classList.add and give styles with the css file itself ?
3 participants
This PR introduces draggable functionality to the TP Slider component. It enables users to drag the slider using mouse events (mousedown, mousemove, mouseup) for improved navigation. The PR also includes necessary updates to the slider's event listeners and ensures smooth dragging behavior.