From 9931aefcd5592cf9339a683bb2585410aeecd7c7 Mon Sep 17 00:00:00 2001 From: avinash Date: Thu, 28 Nov 2024 13:22:56 +0530 Subject: [PATCH 1/2] feature: Slider draggable support --- src/slider/style.css.map | 1 + src/slider/style.scss | 12 ++++ src/slider/tp-slider.ts | 132 ++++++++++++++++++++++++++++++++++++++- 3 files changed, 144 insertions(+), 1 deletion(-) create mode 100644 src/slider/style.css.map diff --git a/src/slider/style.css.map b/src/slider/style.css.map new file mode 100644 index 0000000..2e9b2d9 --- /dev/null +++ b/src/slider/style.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AAAA;EACC,cAAA;ACCD;;ADEA;EACC,cAAA;EACA,mBAAA;EACA,gBAAA;EACA,kBAAA;ACCD;;ADEA;EACC,kBAAA;EACA,aAAA;EACA,uBAAA;ACCD;ADCC;EACC,yBAAA;EACA,0DAAA;ACCF;;ADGA;EACC,cAAA;EACA,wBAAA;ACAD;ADEC;EACC,aAAA;ACAF;;ADIA;EACC,gBAAA;ACDD;;ADIA;EACC,YAAA;ACDD;;ADIA;EACC,yBAAA;KAAA,sBAAA;UAAA,iBAAA;ACDD;;ADIA;EACC,aAAA;EACA,SAAA;ACDD;;ADKA;EAEC;;;;;IAAA;ACED;ADIC;EACC,cAAA;ACFF;ADIE;EACC,kBAAA;EACA,OAAA;EACA,MAAA;EACA,WAAA;EACA,YAAA;EACA,wCAAA;EACA,yBAAA;EACA,gCAAA;EACA,kBAAA;EACA,UAAA;ACFH;ADKE;EACC,mBAAA;EACA,UAAA;EACA,UAAA;ACHH","file":"style.css"} \ No newline at end of file diff --git a/src/slider/style.scss b/src/slider/style.scss index f78544f..9b7c84b 100644 --- a/src/slider/style.scss +++ b/src/slider/style.scss @@ -29,6 +29,18 @@ tp-slider-slide { } } +.tp-slider--grabbing { + cursor: grabbing; +} + +.tp-slider--grab { + cursor: grab; +} + +.tp-slider--dragging { + user-select: none; +} + tp-slider-nav { display: flex; gap: 10px; diff --git a/src/slider/tp-slider.ts b/src/slider/tp-slider.ts index b1b476a..1426e02 100644 --- a/src/slider/tp-slider.ts +++ b/src/slider/tp-slider.ts @@ -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,130 @@ export class TPSliderElement extends HTMLElement { */ static get observedAttributes(): string[] { // Observed attributes. - return [ 'current-slide', 'flexible-height', 'infinite', 'swipe', 'per-view', 'step' ]; + return [ 'current-slide', 'flexible-height', 'infinite', 'swipe', 'per-view', 'step', 'draggable' ]; + } + + /** + * Check and initialize draggable behavior. + */ + checkDraggable() { + // 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(); + + // Apply the grabbing cursor class + this.classList.add( 'tp-slider--grabbing' ); + this.classList.remove( 'tp-slider--grab' ); + + // Prevent text selection + this.classList.add( 'tp-slider--dragging' ); + } + + /** + * 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; + + // Reset cursor and user-select styles + this.classList.remove( 'tp-slider--grabbing' ); + this.classList.add( 'tp-slider--grab' ); + this.classList.remove( 'tp-slider--dragging' ); + } + } + + /** + * Handle mouse over - Set cursor to grab. + */ + handleMouseOver() { + // Only styles when the draggable will be yes. + if ( this.getAttribute( 'draggable' ) === 'yes' ) { + this.classList.add( 'tp-slider--grab' ); + } + } + + /** + * Handle mouse out - Reset cursor. + */ + handleMouseOut() { + // Reset cursor if not dragging. + if ( ! this.isDragging ) { + this.classList.remove( 'tp-slider--grab' ); + } } /** From 9ae76bdee654f01b685d86bb197420084b333360 Mon Sep 17 00:00:00 2001 From: avinash Date: Fri, 29 Nov 2024 11:47:45 +0530 Subject: [PATCH 2/2] feature: Slider draggable support update --- src/slider/index.html | 29 +++++++++++++++++++ src/slider/style.css | 62 ++++++++++++++++++++++++++++++++++++++++ src/slider/style.css.map | 2 +- src/slider/style.scss | 12 -------- src/slider/tp-slider.ts | 22 ++++++-------- 5 files changed, 101 insertions(+), 26 deletions(-) create mode 100644 src/slider/style.css diff --git a/src/slider/index.html b/src/slider/index.html index c3a68e2..11cfca5 100644 --- a/src/slider/index.html +++ b/src/slider/index.html @@ -90,6 +90,35 @@
+ + + + + + + + + + +

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

+ + + + + + + + + + 1 / 4 + + +
+ diff --git a/src/slider/style.css b/src/slider/style.css new file mode 100644 index 0000000..983d3c3 --- /dev/null +++ b/src/slider/style.css @@ -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 */ \ No newline at end of file diff --git a/src/slider/style.css.map b/src/slider/style.css.map index 2e9b2d9..1859db6 100644 --- a/src/slider/style.css.map +++ b/src/slider/style.css.map @@ -1 +1 @@ -{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AAAA;EACC,cAAA;ACCD;;ADEA;EACC,cAAA;EACA,mBAAA;EACA,gBAAA;EACA,kBAAA;ACCD;;ADEA;EACC,kBAAA;EACA,aAAA;EACA,uBAAA;ACCD;ADCC;EACC,yBAAA;EACA,0DAAA;ACCF;;ADGA;EACC,cAAA;EACA,wBAAA;ACAD;ADEC;EACC,aAAA;ACAF;;ADIA;EACC,gBAAA;ACDD;;ADIA;EACC,YAAA;ACDD;;ADIA;EACC,yBAAA;KAAA,sBAAA;UAAA,iBAAA;ACDD;;ADIA;EACC,aAAA;EACA,SAAA;ACDD;;ADKA;EAEC;;;;;IAAA;ACED;ADIC;EACC,cAAA;ACFF;ADIE;EACC,kBAAA;EACA,OAAA;EACA,MAAA;EACA,WAAA;EACA,YAAA;EACA,wCAAA;EACA,yBAAA;EACA,gCAAA;EACA,kBAAA;EACA,UAAA;ACFH;ADKE;EACC,mBAAA;EACA,UAAA;EACA,UAAA;ACHH","file":"style.css"} \ No newline at end of file +{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AAAA;EACC,cAAA;ACCD;;ADEA;EACC,cAAA;EACA,mBAAA;EACA,gBAAA;EACA,kBAAA;ACCD;;ADEA;EACC,kBAAA;EACA,aAAA;EACA,uBAAA;ACCD;ADCC;EACC,yBAAA;EACA,0DAAA;ACCF;;ADGA;EACC,cAAA;EACA,wBAAA;ACAD;ADEC;EACC,aAAA;ACAF;;ADIA;EACC,aAAA;EACA,SAAA;ACDD;;ADKA;EAEC;;;;;IAAA;ACED;ADIC;EACC,cAAA;ACFF;ADIE;EACC,kBAAA;EACA,OAAA;EACA,MAAA;EACA,WAAA;EACA,YAAA;EACA,wCAAA;EACA,yBAAA;EACA,gCAAA;EACA,kBAAA;EACA,UAAA;ACFH;ADKE;EACC,mBAAA;EACA,UAAA;EACA,UAAA;ACHH","file":"style.css"} \ No newline at end of file diff --git a/src/slider/style.scss b/src/slider/style.scss index 9b7c84b..f78544f 100644 --- a/src/slider/style.scss +++ b/src/slider/style.scss @@ -29,18 +29,6 @@ tp-slider-slide { } } -.tp-slider--grabbing { - cursor: grabbing; -} - -.tp-slider--grab { - cursor: grab; -} - -.tp-slider--dragging { - user-select: none; -} - tp-slider-nav { display: flex; gap: 10px; diff --git a/src/slider/tp-slider.ts b/src/slider/tp-slider.ts index 1426e02..a1a454e 100644 --- a/src/slider/tp-slider.ts +++ b/src/slider/tp-slider.ts @@ -141,12 +141,9 @@ export class TPSliderElement extends HTMLElement { // Prevent the default behavior (e.g., text selection) event.preventDefault(); - // Apply the grabbing cursor class - this.classList.add( 'tp-slider--grabbing' ); - this.classList.remove( 'tp-slider--grab' ); - - // Prevent text selection - this.classList.add( 'tp-slider--dragging' ); + // Update styles for grabbing and disable text selection. + this.style.cursor = 'grabbing'; + this.style.userSelect = 'none'; } /** @@ -197,10 +194,9 @@ export class TPSliderElement extends HTMLElement { this.isDragging = false; this.dragOffsetX = 0; - // Reset cursor and user-select styles - this.classList.remove( 'tp-slider--grabbing' ); - this.classList.add( 'tp-slider--grab' ); - this.classList.remove( 'tp-slider--dragging' ); + // Update styles for releasing and re-enable text selection. + this.style.cursor = 'grab'; + this.style.userSelect = ''; } } @@ -209,8 +205,8 @@ export class TPSliderElement extends HTMLElement { */ handleMouseOver() { // Only styles when the draggable will be yes. - if ( this.getAttribute( 'draggable' ) === 'yes' ) { - this.classList.add( 'tp-slider--grab' ); + if ( 'yes' === this.getAttribute( 'draggable' ) ) { + this.style.cursor = 'grab'; } } @@ -220,7 +216,7 @@ export class TPSliderElement extends HTMLElement { handleMouseOut() { // Reset cursor if not dragging. if ( ! this.isDragging ) { - this.classList.remove( 'tp-slider--grab' ); + this.style.cursor = ''; } }