From 22f8d2249d1204018472484ab1d3b4edc691b065 Mon Sep 17 00:00:00 2001 From: Yash Kukreja Date: Thu, 7 Mar 2024 10:09:20 +0530 Subject: [PATCH 1/4] Add slides-per-view and step attribute in tp-slider --- src/slider/index.html | 4 +++- src/slider/tp-slider.ts | 50 +++++++++++++++++++++++++++++++++++------ 2 files changed, 46 insertions(+), 8 deletions(-) diff --git a/src/slider/index.html b/src/slider/index.html index b115bc4..ac313cf 100644 --- a/src/slider/index.html +++ b/src/slider/index.html @@ -140,7 +140,8 @@
- + + @@ -148,6 +149,7 @@ + diff --git a/src/slider/tp-slider.ts b/src/slider/tp-slider.ts index febe7be..3b00028 100644 --- a/src/slider/tp-slider.ts +++ b/src/slider/tp-slider.ts @@ -64,7 +64,7 @@ export class TPSliderElement extends HTMLElement { * @return {Array} List of observed attributes. */ static get observedAttributes(): string[] { - return [ 'current-slide', 'flexible-height', 'infinite', 'swipe' ]; + return [ 'current-slide', 'flexible-height', 'infinite', 'swipe', 'slides-per-view', 'step' ]; } /** @@ -108,9 +108,10 @@ export class TPSliderElement extends HTMLElement { */ getTotalSlides(): number { const slides: NodeListOf | null | undefined = this.getSlideElements(); + const slidesPerView: number = parseInt( this.getAttribute( 'slides-per-view' ) || '1' ); if ( slides ) { - return slides.length; + return slides.length - slidesPerView + 1; } return 0; @@ -140,7 +141,15 @@ export class TPSliderElement extends HTMLElement { return; } - this.setCurrentSlide( this.currentSlideIndex + 1 ); + const slideStep: number = parseInt( this.getAttribute( 'step' ) || '1' ); + const nextSlideNumber = this.currentSlideIndex + slideStep; + + // Check if the next slide step is not taking it beyond the last slide. + if ( nextSlideNumber <= this.getTotalSlides() ) { + this.setCurrentSlide( this.currentSlideIndex + slideStep ); + } else { + this.setCurrentSlide( this.getTotalSlides() ); + } } /** @@ -155,7 +164,15 @@ export class TPSliderElement extends HTMLElement { return; } - this.setCurrentSlide( this.currentSlideIndex - 1 ); + const slideStep: number = parseInt( this.getAttribute( 'step' ) || '1' ); + const previousSlideNumber = this.currentSlideIndex - slideStep; + + // Check if the previous slide step is not taking it beyond the first slide. + if ( previousSlideNumber >= 1 ) { + this.setCurrentSlide( previousSlideNumber ); + } else { + this.setCurrentSlide( 1 ); + } } /** @@ -336,9 +353,28 @@ export class TPSliderElement extends HTMLElement { // Check if we have a flexible height. if ( 'yes' === this.getAttribute( 'flexible-height' ) ) { - // Set the height of the container to be the height of the current slide. - const height: number = slides[ this.currentSlideIndex - 1 ].scrollHeight; - slidesContainer.style.height = `${ height }px`; + const slidesPerView: number = parseInt( this.getAttribute( 'slides-per-view' ) || '1' ); + + // Check if slides-per-view is greater than 1. + if ( slidesPerView > 1 ) { + const currentIndex: number = this.currentSlideIndex - 1; + let slidesOnCurrentView: number = currentIndex + slidesPerView; + let maxHeight: number = 0; + + // Traverse all slides in the current view and add their height to the array. + for ( let i = currentIndex; i < slidesOnCurrentView; i++ ) { + if ( slides[ i ].scrollHeight > maxHeight ) { + maxHeight = slides[ i ].scrollHeight; + } + } + + // Set the height of the container to be the max height of the slides in the current view. + slidesContainer.style.height = `${ maxHeight }px`; + } else { + // Set the height of the container to be the height of the current slide. + const height: number = slides[ this.currentSlideIndex - 1 ].scrollHeight; + slidesContainer.style.height = `${ height }px`; + } } else { // Set the height of the container to be the height of the tallest slide. let height: number = 0; From 40ed5dca8060a9ef58b2c3e0f025001e11c92a98 Mon Sep 17 00:00:00 2001 From: Yash Kukreja Date: Thu, 7 Mar 2024 10:41:58 +0530 Subject: [PATCH 2/4] Modify README.md for slider adding slides-per-view and step attribute --- src/slider/README.md | 17 +++++++++-------- 1 file changed, 9 insertions(+), 8 deletions(-) diff --git a/src/slider/README.md b/src/slider/README.md index 030a287..eda2269 100644 --- a/src/slider/README.md +++ b/src/slider/README.md @@ -53,14 +53,15 @@ slider.setCurrentSlide( 2 ); ## Attributes -| Attribute | Required | Values | Notes | -|---------------------|----------|-----------------|--------------------------------------------------------------------------------------------------------| -| flexible-height | No | `yes` | Whether the height of the slider changes depending on the content inside the slides | -| infinite | No | `yes` | Go back to the first slide at the end of all slides, and open the last slide when navigating backwards | -| swipe | No | `yes` | Whether to add support for swiping gestures on touch devices | -| behaviour | No | `fade`, `slide` | The default behaviour is to slide between slides. This can be updated to fade. | -| auto-slide-interval | No | | Interval in milliseconds. | - +| Attribute | Required | Values | Notes | +|---------------------|----------|-------------------|--------------------------------------------------------------------------------------------------------| +| flexible-height | No | `yes` | Whether the height of the slider changes depending on the content inside the slides | +| infinite | No | `yes` | Go back to the first slide at the end of all slides, and open the last slide when navigating backwards | +| swipe | No | `yes` | Whether to add support for swiping gestures on touch devices | +| behaviour | No | `fade`, `slide` | The default behaviour is to slide between slides. This can be updated to fade. | +| auto-slide-interval | No | | Interval in milliseconds. | +| slides-per-view | No | | Handles slider behavior having more than 1 slides. Default value is 1. | +| step | No | | Steps number of slides on next and previous transition. Default value is 1. | ## Events | Event | Notes | From b4be9ee695a0fa2338faed89c8cb4be787ac638c Mon Sep 17 00:00:00 2001 From: Yash Kukreja Date: Thu, 7 Mar 2024 10:47:30 +0530 Subject: [PATCH 3/4] Fix lint issue --- src/slider/tp-slider.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/slider/tp-slider.ts b/src/slider/tp-slider.ts index cad301a..314ed03 100644 --- a/src/slider/tp-slider.ts +++ b/src/slider/tp-slider.ts @@ -359,7 +359,7 @@ export class TPSliderElement extends HTMLElement { // Check if slides-per-view is greater than 1. if ( slidesPerView > 1 ) { const currentIndex: number = this.currentSlideIndex - 1; - let slidesOnCurrentView: number = currentIndex + slidesPerView; + const slidesOnCurrentView: number = currentIndex + slidesPerView; let maxHeight: number = 0; // Traverse all slides in the current view and add their height to the array. From 9777ed84e60f13614c047b19043dbb1918b2a0f9 Mon Sep 17 00:00:00 2001 From: Junaid Bhura Date: Tue, 12 Mar 2024 10:17:11 +1100 Subject: [PATCH 4/4] update per view and step --- src/slider/README.md | 19 +++++----- src/slider/index.html | 4 +-- src/slider/tp-slider-count.ts | 8 ++--- src/slider/tp-slider.ts | 67 +++++++++++++++++++++++++---------- 4 files changed, 65 insertions(+), 33 deletions(-) diff --git a/src/slider/README.md b/src/slider/README.md index eda2269..8529242 100644 --- a/src/slider/README.md +++ b/src/slider/README.md @@ -53,15 +53,16 @@ slider.setCurrentSlide( 2 ); ## Attributes -| Attribute | Required | Values | Notes | -|---------------------|----------|-------------------|--------------------------------------------------------------------------------------------------------| -| flexible-height | No | `yes` | Whether the height of the slider changes depending on the content inside the slides | -| infinite | No | `yes` | Go back to the first slide at the end of all slides, and open the last slide when navigating backwards | -| swipe | No | `yes` | Whether to add support for swiping gestures on touch devices | -| behaviour | No | `fade`, `slide` | The default behaviour is to slide between slides. This can be updated to fade. | -| auto-slide-interval | No | | Interval in milliseconds. | -| slides-per-view | No | | Handles slider behavior having more than 1 slides. Default value is 1. | -| step | No | | Steps number of slides on next and previous transition. Default value is 1. | +| Attribute | Required | Values | Notes | +|---------------------|----------|-----------------|--------------------------------------------------------------------------------------------------------| +| flexible-height | No | `yes` | Whether the height of the slider changes depending on the content inside the slides | +| infinite | No | `yes` | Go back to the first slide at the end of all slides, and open the last slide when navigating backwards | +| swipe | No | `yes` | Whether to add support for swiping gestures on touch devices | +| behaviour | No | `fade`, `slide` | The default behaviour is to slide between slides. This can be updated to fade. | +| auto-slide-interval | No | | Interval in milliseconds. | +| per-view | No | | Handles slider behavior having more than 1 slides. Default value is 1. | +| step | No | | Steps number of slides on next and previous transition. Default value is 1. | + ## Events | Event | Notes | diff --git a/src/slider/index.html b/src/slider/index.html index 40bc7e1..c7d2f4e 100644 --- a/src/slider/index.html +++ b/src/slider/index.html @@ -141,7 +141,7 @@
- + @@ -149,7 +149,7 @@ - + diff --git a/src/slider/tp-slider-count.ts b/src/slider/tp-slider-count.ts index 8fd01ba..fa5596a 100644 --- a/src/slider/tp-slider-count.ts +++ b/src/slider/tp-slider-count.ts @@ -50,15 +50,15 @@ export class TPSliderCountElement extends HTMLElement { return; } - const current = slider.getAttribute( 'current-slide' ); - const total = slider.getAttribute( 'total' ); + const current: number = slider.currentSlideIndex - 1 + slider.step; + const total: string = slider.getAttribute( 'total' ) ?? ''; this.innerHTML = this.format - .replace( '$current', current || '' ) + .replace( '$current', current.toString() ) .replace( '$total', total || '' ); - this.setAttribute( 'current', current || '' ); + this.setAttribute( 'current', current.toString() ); this.setAttribute( 'total', total || '' ); } } diff --git a/src/slider/tp-slider.ts b/src/slider/tp-slider.ts index 314ed03..62db2fd 100644 --- a/src/slider/tp-slider.ts +++ b/src/slider/tp-slider.ts @@ -65,7 +65,7 @@ export class TPSliderElement extends HTMLElement { * @return {Array} List of observed attributes. */ static get observedAttributes(): string[] { - return [ 'current-slide', 'flexible-height', 'infinite', 'swipe', 'slides-per-view', 'step' ]; + return [ 'current-slide', 'flexible-height', 'infinite', 'swipe', 'per-view', 'step' ]; } /** @@ -102,6 +102,42 @@ export class TPSliderElement extends HTMLElement { this.setCurrentSlide( index ); } + /** + * Get current step. + * + * @return {number} Current step. + */ + get step(): number { + return parseInt( this.getAttribute( 'step' ) ?? '1' ); + } + + /** + * Set current step. + * + * @param {number} step Step. + */ + set step( step: number ) { + this.setAttribute( 'step', step.toString() ); + } + + /** + * Get per view. + * + * @return {number} Current step. + */ + get perView(): number { + return parseInt( this.getAttribute( 'per-view' ) ?? '1' ); + } + + /** + * Set per view. + * + * @param {number} perView Per view. + */ + set perView( perView: number ) { + this.setAttribute( 'per-view', perView.toString() ); + } + /** * Get total number of slides. * @@ -109,10 +145,9 @@ export class TPSliderElement extends HTMLElement { */ getTotalSlides(): number { const slides: NodeListOf | null | undefined = this.getSlideElements(); - const slidesPerView: number = parseInt( this.getAttribute( 'slides-per-view' ) || '1' ); if ( slides ) { - return slides.length - slidesPerView + 1; + return slides.length; } return 0; @@ -142,15 +177,14 @@ export class TPSliderElement extends HTMLElement { return; } - const slideStep: number = parseInt( this.getAttribute( 'step' ) || '1' ); - const nextSlideNumber = this.currentSlideIndex + slideStep; + const nextSlideIndex: number = this.currentSlideIndex + this.step; // Check if the next slide step is not taking it beyond the last slide. - if ( nextSlideNumber <= this.getTotalSlides() ) { - this.setCurrentSlide( this.currentSlideIndex + slideStep ); - } else { - this.setCurrentSlide( this.getTotalSlides() ); + if ( nextSlideIndex > totalSlides ) { + return; } + + this.setCurrentSlide( nextSlideIndex ); } /** @@ -165,11 +199,10 @@ export class TPSliderElement extends HTMLElement { return; } - const slideStep: number = parseInt( this.getAttribute( 'step' ) || '1' ); - const previousSlideNumber = this.currentSlideIndex - slideStep; + const previousSlideNumber: number = this.currentSlideIndex - this.step; // Check if the previous slide step is not taking it beyond the first slide. - if ( previousSlideNumber >= 1 ) { + if ( previousSlideNumber > 1 ) { this.setCurrentSlide( previousSlideNumber ); } else { this.setCurrentSlide( 1 ); @@ -354,16 +387,14 @@ export class TPSliderElement extends HTMLElement { // Check if we have a flexible height. if ( 'yes' === this.getAttribute( 'flexible-height' ) ) { - const slidesPerView: number = parseInt( this.getAttribute( 'slides-per-view' ) || '1' ); - - // Check if slides-per-view is greater than 1. - if ( slidesPerView > 1 ) { + // Check if per-view is greater than 1. + if ( this.perView > 1 ) { const currentIndex: number = this.currentSlideIndex - 1; - const slidesOnCurrentView: number = currentIndex + slidesPerView; + const slidesOnCurrentView: number = currentIndex + this.perView; let maxHeight: number = 0; // Traverse all slides in the current view and add their height to the array. - for ( let i = currentIndex; i < slidesOnCurrentView; i++ ) { + for ( let i: number = currentIndex; i < slidesOnCurrentView; i++ ) { if ( slides[ i ].scrollHeight > maxHeight ) { maxHeight = slides[ i ].scrollHeight; }