Feature: Slider - Draggable functionality #93
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,62 @@ | ||
| tp-slider { | ||
| display: block; | ||
| } | ||
|
|
||
| tp-slider-track { | ||
| display: block; | ||
| overflow-y: visible; | ||
| overflow-x: clip; | ||
| position: relative; | ||
| } | ||
|
|
||
| tp-slider-slides { | ||
| position: relative; | ||
| display: flex; | ||
| align-items: flex-start; | ||
| } | ||
| tp-slider:not([resizing=yes]) tp-slider-slides { | ||
| transition-duration: 0.6s; | ||
| transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1); | ||
| } | ||
|
|
||
| tp-slider-slide { | ||
| flex: 0 0 100%; | ||
| scroll-snap-align: start; | ||
| } | ||
| tp-slider[flexible-height=yes]:not([initialized]) tp-slider-slide:not(:first-child) { | ||
| display: none; | ||
| } | ||
|
|
||
| tp-slider-nav { | ||
| display: flex; | ||
| gap: 10px; | ||
| } | ||
|
|
||
| tp-slider[behaviour=fade] { | ||
| /** | ||
| * We are using first of type and direct child here | ||
| * so that if there is a nested slider it does not affect | ||
| * the styles for the inner slider and is only applied to the | ||
| * parent. | ||
| */ | ||
| } | ||
| tp-slider[behaviour=fade] tp-slider-slides:first-of-type { | ||
| display: block; | ||
| } | ||
| tp-slider[behaviour=fade] tp-slider-slides:first-of-type > tp-slider-slide { | ||
| position: absolute; | ||
| left: 0; | ||
| top: 0; | ||
| width: 100%; | ||
| height: auto; | ||
| transition-property: opacity, visibility; | ||
| transition-duration: 0.6s; | ||
| transition-timing-function: ease; | ||
| visibility: hidden; | ||
| opacity: 0; | ||
| } | ||
| tp-slider[behaviour=fade] tp-slider-slides:first-of-type > tp-slider-slide[active=yes] { | ||
| visibility: visible; | ||
| opacity: 1; | ||
| z-index: 1; | ||
| }/*# sourceMappingURL=style.css.map */ | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -27,7 +27,11 @@ export class TPSliderElement extends HTMLElement { | |
| 'per-view', | ||
| 'step', | ||
| 'responsive', | ||
| 'draggable', | ||
| ]; | ||
| protected isDragging: boolean = false; | ||
| protected dragStartX: number = 0; | ||
| protected dragOffsetX: number = 0; | ||
|
|
||
| /** | ||
| * Constructor. | ||
|
|
@@ -68,6 +72,9 @@ export class TPSliderElement extends HTMLElement { | |
| // Touch listeners. | ||
| this.addEventListener( 'touchstart', this.handleTouchStart.bind( this ), { passive: true } ); | ||
| this.addEventListener( 'touchend', this.handleTouchEnd.bind( this ) ); | ||
|
|
||
| // Check for draggable initialization. | ||
| this.checkDraggable(); | ||
| } | ||
|
|
||
| /** | ||
|
|
@@ -91,7 +98,126 @@ export class TPSliderElement extends HTMLElement { | |
| */ | ||
| static get observedAttributes(): string[] { | ||
| // Observed attributes. | ||
| return [ 'current-slide', 'flexible-height', 'infinite', 'swipe', 'per-view', 'step', 'draggable' ]; | ||
| } | ||
|
|
||
| /** | ||
| * Check and initialize draggable behavior. | ||
| */ | ||
| checkDraggable() { | ||
|
There was a problem hiding this comment. @AvinashVinod03 I wonder if draggable should be implied by |
||
| // Check if draggable attribute is set to "yes". | ||
| if ( 'yes' === this.getAttribute( 'draggable' ) ) { | ||
| this.initializeDraggableEvents(); | ||
| } | ||
| } | ||
|
|
||
| /** | ||
| * Initialize draggable event listeners. | ||
| */ | ||
| initializeDraggableEvents() { | ||
| // Add event listeners to handle dragging behavior (start, move, stop) for the slider. | ||
| this.addEventListener( 'mousedown', this.handleMouseDown.bind( this ) ); | ||
| this.addEventListener( 'mousemove', this.handleMouseMove.bind( this ) ); | ||
| this.addEventListener( 'mouseup', this.handleMouseUp.bind( this ) ); | ||
| this.addEventListener( 'mouseleave', this.handleMouseUp.bind( this ) ); | ||
|
|
||
| // Add cursor changes for grab on hover | ||
| this.addEventListener( 'mouseover', this.handleMouseOver.bind( this ) ); | ||
| this.addEventListener( 'mouseout', this.handleMouseOut.bind( this ) ); | ||
| } | ||
|
|
||
| /** | ||
| * Mouse down event - Start dragging. | ||
| * | ||
| * @param {MouseEvent} event - The mouse event object. | ||
| */ | ||
| handleMouseDown( event: MouseEvent ) { | ||
| // Set dragging state to true | ||
| this.isDragging = true; | ||
|
|
||
| // Store the initial X position when the mouse is pressed | ||
| this.dragStartX = event.clientX; | ||
|
|
||
| // Prevent the default behavior (e.g., text selection) | ||
| 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 ? |
||
| this.style.userSelect = 'none'; | ||
| } | ||
|
|
||
| /** | ||
| * Mouse move event - Drag the slider. | ||
| * | ||
| * @param {MouseEvent} event - The mouse event object. | ||
| */ | ||
| handleMouseMove( event: MouseEvent ) { | ||
| // Check if the dragging is active | ||
| if ( this.isDragging ) { | ||
| const deltaX: number = this.dragStartX - event.clientX; | ||
| this.dragOffsetX = deltaX; | ||
|
|
||
| // Find the slides container element and apply the transformation | ||
| const slidesContainer: TPSliderSlidesElement | null = this.querySelector( 'tp-slider-slides' ); | ||
|
|
||
| // Ensure slidesContainer exists before applying the transformation | ||
| if ( slidesContainer ) { | ||
| slidesContainer.style.transform = `translateX(${ this.dragOffsetX }px)`; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| /** | ||
| * Mouse up or mouse leave event - End dragging. | ||
| */ | ||
| handleMouseUp() { | ||
| // Check if the dragging is active | ||
| if ( this.isDragging ) { | ||
| this.isDragging = false; | ||
|
|
||
| // Find the slides container element and apply the transformation | ||
| const slidesContainer: TPSliderSlidesElement | null = this.querySelector( 'tp-slider-slides' ); | ||
|
|
||
| // Ensure slidesContainer exists before applying the transformation | ||
| if ( slidesContainer ) { | ||
| slidesContainer.style.transform = `translateX(0)`; | ||
|
|
||
| // Determine the next or previous slide based on the drag offset | ||
| if ( 100 < this.dragOffsetX ) { | ||
| this.next(); | ||
| } else if ( -100 > this.dragOffsetX ) { | ||
| this.previous(); | ||
| } | ||
| } | ||
|
|
||
| // Reset draggable state | ||
| this.isDragging = false; | ||
| this.dragOffsetX = 0; | ||
|
|
||
| // Update styles for releasing and re-enable text selection. | ||
| this.style.cursor = 'grab'; | ||
| this.style.userSelect = ''; | ||
| } | ||
| } | ||
|
|
||
| /** | ||
| * Handle mouse over - Set cursor to grab. | ||
| */ | ||
| handleMouseOver() { | ||
| // Only styles when the draggable will be yes. | ||
| if ( 'yes' === this.getAttribute( 'draggable' ) ) { | ||
| this.style.cursor = 'grab'; | ||
| } | ||
| } | ||
|
|
||
| /** | ||
| * Handle mouse out - Reset cursor. | ||
| */ | ||
| handleMouseOut() { | ||
| // Reset cursor if not dragging. | ||
| if ( ! this.isDragging ) { | ||
| this.style.cursor = ''; | ||
| } | ||
| } | ||
|
|
||
| /** | ||
|
|
||
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@AvinashVinod03 Is this committed by mistake?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
No @junaidbhura, as this is for the draggable functionality example.