From 27fa5d3cec2051c8c531bcbc49dfabd74f1065c4 Mon Sep 17 00:00:00 2001 From: planctus Date: Fri, 23 Aug 2024 10:06:08 +0300 Subject: [PATCH 01/13] feat(carousel): Using pause-outline icon - FRONT-4571 --- .../components/carousel/__snapshots__/carousel.test.js.snap | 6 +++--- .../twig/components/carousel/carousel.html.twig | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/implementations/twig/components/carousel/__snapshots__/carousel.test.js.snap b/src/implementations/twig/components/carousel/__snapshots__/carousel.test.js.snap index 9e730a2a55..b868542ab5 100644 --- a/src/implementations/twig/components/carousel/__snapshots__/carousel.test.js.snap +++ b/src/implementations/twig/components/carousel/__snapshots__/carousel.test.js.snap @@ -62,7 +62,7 @@ exports[`Carousel Default renders correctly 1`] = ` focusable="false" > @@ -448,7 +448,7 @@ exports[`Carousel Default renders correctly with extra attributes 1`] = ` focusable="false" > @@ -832,7 +832,7 @@ exports[`Carousel Default renders correctly with extra class names 1`] = ` focusable="false" > diff --git a/src/implementations/twig/components/carousel/carousel.html.twig b/src/implementations/twig/components/carousel/carousel.html.twig index 26984c623b..7fb5bf59f6 100644 --- a/src/implementations/twig/components/carousel/carousel.html.twig +++ b/src/implementations/twig/components/carousel/carousel.html.twig @@ -92,7 +92,7 @@ extra_classes: 'ecl-carousel__pause', icon: { path: _icon_path, - name: 'pause', + name: 'pause-outline', size: 'm', extra_classes: 'ecl-carousel__icon-default', }, From bc9c48a0d5b716f8797ec0d9ca43312387d9cc69 Mon Sep 17 00:00:00 2001 From: planctus Date: Fri, 23 Aug 2024 17:27:28 +0300 Subject: [PATCH 02/13] feat(carousel): Styles - FRONT-4571 --- .../vanilla/components/banner/banner.scss | 9 +++++- .../vanilla/components/carousel/carousel.scss | 30 ------------------- src/themes/ec/variables/_carousel.scss | 2 +- src/themes/eu/variables/_carousel.scss | 4 +-- 4 files changed, 11 insertions(+), 34 deletions(-) diff --git a/src/implementations/vanilla/components/banner/banner.scss b/src/implementations/vanilla/components/banner/banner.scss index ca0f7cde74..eb93d68a81 100644 --- a/src/implementations/vanilla/components/banner/banner.scss +++ b/src/implementations/vanilla/components/banner/banner.scss @@ -54,11 +54,18 @@ $banner: null !default; } // stylelint-disable-next-line plugin/selector-bem-pattern -.ecl-container .ecl-banner:not(.ecl-banner--full-width) .ecl-container { +.ecl-container .ecl-banner .ecl-container { padding-inline-start: var(--s-m); padding-inline-end: var(--s-m); } +@include breakpoints.up('s') { + .ecl-container .ecl-banner .ecl-container { + padding-inline-start: var(--s-2xl); + padding-inline-end: var(--s-2xl); + } +} + .ecl-banner__container { display: flex; padding-bottom: map.get($banner, 'container-padding-bottom', 'mobile'); diff --git a/src/implementations/vanilla/components/carousel/carousel.scss b/src/implementations/vanilla/components/carousel/carousel.scss index 08be7ae4e7..10b84c1186 100644 --- a/src/implementations/vanilla/components/carousel/carousel.scss +++ b/src/implementations/vanilla/components/carousel/carousel.scss @@ -115,12 +115,6 @@ $carousel: null !default; } } -.ecl-carousel-container--padded .ecl-banner { - .ecl-container { - margin-inline-start: 100px; - } -} - /* stylelint-disable-next-line order/order */ @include breakpoints.up('s') { .ecl-carousel__navigation { @@ -177,21 +171,6 @@ $carousel: null !default; /* stylelint-disable-next-line order/order */ @include breakpoints.up('xl') { - .ecl-container - .ecl-carousel:not(.ecl-carousel--full-width) - .ecl-banner - .ecl-container { - margin-inline-start: 120px; - } - - .ecl-container - .ecl-carousel:not(.ecl-carousel--full-width) - .ecl-banner - .ecl-banner__credit - .ecl-container { - margin-inline-start: 60px; - } - .ecl-carousel__prev { left: var(--s-m); } @@ -232,12 +211,3 @@ $carousel: null !default; margin-inline-start: -50vw; width: 100vw; } - -// stylelint-disable-next-line plugin/selector-bem-pattern, selector-max-compound-selectors -.ecl-container - .ecl-carousel--full-width - .ecl-banner:not(.ecl-banner--full-width) - .ecl-container { - padding-inline-start: var(--s-m); - padding-inline-end: var(--s-m); -} diff --git a/src/themes/ec/variables/_carousel.scss b/src/themes/ec/variables/_carousel.scss index 74158ac399..78535e68db 100644 --- a/src/themes/ec/variables/_carousel.scss +++ b/src/themes/ec/variables/_carousel.scss @@ -2,7 +2,7 @@ @use '../index' as *; $carousel: ( - box-shadow: var(--sh-6), + box-shadow: none, separator: 1px solid var(--c-n), controls-background: map.get($color, 'white'), controls-padding: var(--s-xs) 0, diff --git a/src/themes/eu/variables/_carousel.scss b/src/themes/eu/variables/_carousel.scss index 474c41412a..f92bdd2881 100644 --- a/src/themes/eu/variables/_carousel.scss +++ b/src/themes/eu/variables/_carousel.scss @@ -2,8 +2,8 @@ @use '../index' as *; $carousel: ( - box-shadow: var(--sh-2), - separator: none, + box-shadow: none, + separator: 1px solid var(--c-p-20), controls-background: map.get($color, 'white'), controls-padding: var(--s-xs) 0, navigation-color: var(--c-d-80), From 78b7f874a5075367efa4182172ab0a7a67b27380 Mon Sep 17 00:00:00 2001 From: planctus Date: Mon, 26 Aug 2024 11:18:20 +0300 Subject: [PATCH 03/13] feat(carousel): Increasing margin in controls for EC - FRONT-4571 --- src/themes/ec/variables/_carousel.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/themes/ec/variables/_carousel.scss b/src/themes/ec/variables/_carousel.scss index 78535e68db..610006e1de 100644 --- a/src/themes/ec/variables/_carousel.scss +++ b/src/themes/ec/variables/_carousel.scss @@ -5,7 +5,7 @@ $carousel: ( box-shadow: none, separator: 1px solid var(--c-n), controls-background: map.get($color, 'white'), - controls-padding: var(--s-xs) 0, + controls-padding: var(--s-m) 0, navigation-background-active: var(--c-n), navigation-color-active: var(--c-d), navigation-border-active: var(--c-n), From 088249a04fd22cb09db6c44c71c26763f1e4b7db Mon Sep 17 00:00:00 2001 From: planctus Date: Mon, 26 Aug 2024 11:30:50 +0300 Subject: [PATCH 04/13] feat(carousel): Alignment of the play button in large viewports - FRONT-4571 --- src/implementations/vanilla/components/carousel/carousel.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/implementations/vanilla/components/carousel/carousel.scss b/src/implementations/vanilla/components/carousel/carousel.scss index 10b84c1186..0b7ba50862 100644 --- a/src/implementations/vanilla/components/carousel/carousel.scss +++ b/src/implementations/vanilla/components/carousel/carousel.scss @@ -137,6 +137,10 @@ $carousel: null !default; /* stylelint-disable-next-line order/order */ @include breakpoints.up('l') { + .ecl-carousel__controls .ecl-container { + padding-inline-start: var(--s-2xl); + } + .ecl-carousel { .ecl-banner { height: initial; From fb8405e78d9228cf75a68d7c7fef6b720dac8fbf Mon Sep 17 00:00:00 2001 From: planctus Date: Mon, 26 Aug 2024 16:01:58 +0300 Subject: [PATCH 05/13] feat(carousel): Reintroducing shadows, removing border bottom - FRONT-4571 --- src/themes/ec/variables/_carousel.scss | 4 ++-- src/themes/eu/variables/_carousel.scss | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/themes/ec/variables/_carousel.scss b/src/themes/ec/variables/_carousel.scss index 610006e1de..25b0272e94 100644 --- a/src/themes/ec/variables/_carousel.scss +++ b/src/themes/ec/variables/_carousel.scss @@ -2,8 +2,8 @@ @use '../index' as *; $carousel: ( - box-shadow: none, - separator: 1px solid var(--c-n), + box-shadow: var(--sh-6), + separator: none, controls-background: map.get($color, 'white'), controls-padding: var(--s-m) 0, navigation-background-active: var(--c-n), diff --git a/src/themes/eu/variables/_carousel.scss b/src/themes/eu/variables/_carousel.scss index f92bdd2881..474c41412a 100644 --- a/src/themes/eu/variables/_carousel.scss +++ b/src/themes/eu/variables/_carousel.scss @@ -2,8 +2,8 @@ @use '../index' as *; $carousel: ( - box-shadow: none, - separator: 1px solid var(--c-p-20), + box-shadow: var(--sh-2), + separator: none, controls-background: map.get($color, 'white'), controls-padding: var(--s-xs) 0, navigation-color: var(--c-d-80), From d39dede53acdd387d87339acab5dffda8fb571c7 Mon Sep 17 00:00:00 2001 From: planctus Date: Mon, 26 Aug 2024 17:00:37 +0300 Subject: [PATCH 06/13] feat(carousel): Padding in the controls area - FRONT-4571 --- src/implementations/vanilla/components/carousel/carousel.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/src/implementations/vanilla/components/carousel/carousel.scss b/src/implementations/vanilla/components/carousel/carousel.scss index 0b7ba50862..d60a97e92c 100644 --- a/src/implementations/vanilla/components/carousel/carousel.scss +++ b/src/implementations/vanilla/components/carousel/carousel.scss @@ -139,6 +139,7 @@ $carousel: null !default; @include breakpoints.up('l') { .ecl-carousel__controls .ecl-container { padding-inline-start: var(--s-2xl); + padding-inline-end: var(--s-2xl); } .ecl-carousel { From e87b3cbf678598fc3b3245c3406ba62756bd0036 Mon Sep 17 00:00:00 2001 From: planctus Date: Tue, 27 Aug 2024 16:04:16 +0300 Subject: [PATCH 07/13] feat(carousel): Single slide display, hiding element initially - FRONT-4571 --- .../vanilla/components/carousel/carousel.js | 89 +++++++++++++------ .../vanilla/components/carousel/carousel.scss | 27 ++---- 2 files changed, 66 insertions(+), 50 deletions(-) diff --git a/src/implementations/vanilla/components/carousel/carousel.js b/src/implementations/vanilla/components/carousel/carousel.js index 751bbe22fa..06d8df6ef0 100644 --- a/src/implementations/vanilla/components/carousel/carousel.js +++ b/src/implementations/vanilla/components/carousel/carousel.js @@ -88,6 +88,7 @@ export class Carousel { this.cloneLastSLide = null; this.executionCount = 0; this.maxExecutions = 5; + this.containerWidth = 0; // Bind `this` for use in callbacks this.handleAutoPlay = this.handleAutoPlay.bind(this); @@ -115,7 +116,8 @@ export class Carousel { throw new TypeError('Called init but ECL is not present'); } ECL.components = ECL.components || new Map(); - + // Hide the carousel initially, we will show it in handleesize() + this.element.style.opacity = 0; this.btnPlay = queryOne(this.playSelector, this.element); this.btnPause = queryOne(this.pauseSelector, this.element); this.slidesContainer = queryOne(this.slidesClass, this.element); @@ -145,23 +147,27 @@ export class Carousel { const lastSlide = this.slides[this.slides.length - 1]; // Clone first and last slide - this.cloneFirstSLide = firstSlide.cloneNode(true); - this.cloneLastSLide = lastSlide.cloneNode(true); - this.slidesContainer.appendChild(this.cloneFirstSLide); - this.slidesContainer.insertBefore(this.cloneLastSLide, firstSlide); + this.cloneFirstSlide = firstSlide.cloneNode(true); + this.cloneLastSlide = lastSlide.cloneNode(true); + this.slidesContainer.appendChild(this.cloneFirstSlide); + this.slidesContainer.insertBefore(this.cloneLastSlide, firstSlide); + + // Initialize the js for the two cloned slides + const cloneFirstBanner = new ECL.Banner( + this.cloneFirstSlide.firstElementChild, + ); + const cloneLastBanner = new ECL.Banner( + this.cloneLastSlide.firstElementChild, + ); + + cloneFirstBanner.init(); + cloneLastBanner.init(); // Refresh the slides variable after adding new cloned slides this.slides = queryAll(this.slideClass, this.element); - // Initialize position of slides and size of the carousel - this.slides.forEach((slide) => { - slide.style.width = `${100 / this.slides.length}%`; - }); - this.handleResize(); - // Initialze pagination and navigation - this.checkIndex(); - + this.handleResize(); // Bind events if (this.navigationItems) { this.navigationItems.forEach((nav, index) => { @@ -268,6 +274,9 @@ export class Carousel { } const heightValues = this.slides.map((slide) => { const banner = queryOne('.ecl-banner', slide); + const bannerInstance = ECL.components.get(banner); + const ratio = bannerInstance.defaultRatio(); + bannerInstance.setHeight(ratio); const height = parseInt(banner.style.height, 10); if (banner.style.height === 'auto') { return 0; @@ -317,12 +326,28 @@ export class Carousel { this.slides.forEach((slide) => { const banner = queryOne('.ecl-banner', slide); let bannerImage = null; + let bannerVideo = null; + let bannerFooter = null; if (banner) { banner.style.height = ''; bannerImage = queryOne('img', banner); + bannerVideo = queryOne('video', banner); + bannerFooter = queryOne('.ecl-banner__credit', banner); + if (bannerImage) { bannerImage.style.aspectRatio = ''; } + if (bannerVideo) { + bannerVideo.style.aspectRatio = ''; + } + if (bannerFooter) { + setTimeout(() => { + banner.style.setProperty( + '--banner-footer-height', + `${bannerFooter.offsetHeight}px`, + ); + }, 100); + } } }); } @@ -399,7 +424,7 @@ export class Carousel { * @param {Boolean} transition */ moveSlides(transition) { - const newOffset = this.container.offsetWidth * this.index; + const newOffset = parseFloat(this.containerWidth) * this.index; this.slidesContainer.style.transitionDuration = transition ? '0.4s' : '0s'; if (this.direction === 'rtl') { this.slidesContainer.style.right = `-${newOffset}px`; @@ -410,8 +435,14 @@ export class Carousel { /** * Action to update slides index and position. + * @param {Event} e */ - checkIndex() { + checkIndex(e) { + if (e) { + if (e.propertyName !== 'left') { + return; + } + } // Update index if (this.index === 0) { this.index = this.total; @@ -477,6 +508,7 @@ export class Carousel { if (isFocus) { this.btnPause.focus(); } + console.log(this.autoPlay); } else { clearInterval(this.autoPlayInterval); this.autoPlay = false; @@ -514,13 +546,14 @@ export class Carousel { * Trigger events on resize. */ handleResize() { + this.element.style.opacity = 0; const vw = Math.max( document.documentElement.clientWidth || 0, window.innerWidth || 0, ); clearInterval(this.intervalId); clearTimeout(this.resizeTimer); - let containerWidth = 0; + // We set 250ms delay which is higher than the 200ms delay in the banner. this.resizeTimer = setTimeout(() => { if (vw >= 998) { @@ -528,27 +561,25 @@ export class Carousel { } else { this.resetBannerHeights(); } + // Cannot find an explanation for the missing 15 pixels here. + this.containerWidth = this.container.offsetWidth + 15; + this.slidesContainer.style.width = `${this.containerWidth * this.slides.length}px`; + // Initialize position of slides and size of the carousel + this.slides.forEach((slide) => { + slide.style.width = `${this.containerWidth}px`; + }); + this.checkIndex(); + setTimeout(() => { + this.element.style.opacity = 1; + }, 250); }, 250); - if (vw >= 768) { - containerWidth = this.container.offsetWidth; - } else { - containerWidth = this.container.offsetWidth + 15; - } - - this.slidesContainer.style.width = `${ - containerWidth * this.slides.length - }px`; - - this.moveSlides(false); - // Add class to set a left margin to banner content and avoid arrow overlapping if (vw >= 1140 && vw <= 1260) { this.container.classList.add('ecl-carousel-container--padded'); } else { this.container.classList.remove('ecl-carousel-container--padded'); } - // Desactivate autoPlay for mobile or activate autoPlay onLoad for desktop if ((vw <= 768 && this.autoPlay) || (vw > 768 && this.autoPlay === null)) { this.handleAutoPlay(); diff --git a/src/implementations/vanilla/components/carousel/carousel.scss b/src/implementations/vanilla/components/carousel/carousel.scss index d60a97e92c..75f96ffdb8 100644 --- a/src/implementations/vanilla/components/carousel/carousel.scss +++ b/src/implementations/vanilla/components/carousel/carousel.scss @@ -34,10 +34,11 @@ $carousel: null !default; } .ecl-carousel__container { + box-sizing: border-box; box-shadow: inset 0 -4px 12px -9px rgba(map.get($theme, 'color', 'black'), 0.6); order: 1; - width: calc(100% - var(--s-xl)); + width: 100%; } .ecl-carousel__slides { @@ -49,23 +50,7 @@ $carousel: null !default; width: 100%; } -.ecl-carousel__slide { - position: relative; - - &::before { - background: map.get($theme, 'color', 'white'); - content: ''; - display: block; - height: 100%; - left: calc(-1 * var(--s-2xs)); - position: absolute; - top: 0; - width: var(--s-2xs); - } -} - .ecl-carousel__slide .ecl-banner__credit { - margin-inline-end: var(--s-2xs); width: auto; } @@ -83,6 +68,10 @@ $carousel: null !default; display: flex; justify-content: space-between; } + + .ecl-carousel__pause { + display: none; + } } .ecl-carousel__controls, @@ -152,10 +141,6 @@ $carousel: null !default; } } - .ecl-carousel__container { - width: 100%; - } - .ecl-carousel__slide { position: relative; From 914c64012a1d74576095d3826793b4191e17e414 Mon Sep 17 00:00:00 2001 From: planctus Date: Tue, 27 Aug 2024 16:07:37 +0300 Subject: [PATCH 08/13] feat(carousel): Removing debug - FRONT-4571 --- src/implementations/vanilla/components/carousel/carousel.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/implementations/vanilla/components/carousel/carousel.js b/src/implementations/vanilla/components/carousel/carousel.js index 06d8df6ef0..a3648a9213 100644 --- a/src/implementations/vanilla/components/carousel/carousel.js +++ b/src/implementations/vanilla/components/carousel/carousel.js @@ -508,7 +508,6 @@ export class Carousel { if (isFocus) { this.btnPause.focus(); } - console.log(this.autoPlay); } else { clearInterval(this.autoPlayInterval); this.autoPlay = false; From 53a6fa01ba98275ee0f4f12cba4f182f1032e710 Mon Sep 17 00:00:00 2001 From: planctus Date: Tue, 27 Aug 2024 17:19:21 +0300 Subject: [PATCH 09/13] feat(carousel): fixing full width use case - FRONT-4571 --- .../vanilla/components/banner/banner.scss | 9 +-------- .../vanilla/components/carousel/carousel.js | 7 +++++-- 2 files changed, 6 insertions(+), 10 deletions(-) diff --git a/src/implementations/vanilla/components/banner/banner.scss b/src/implementations/vanilla/components/banner/banner.scss index 120921d62f..5db4989c12 100644 --- a/src/implementations/vanilla/components/banner/banner.scss +++ b/src/implementations/vanilla/components/banner/banner.scss @@ -54,18 +54,11 @@ $banner: null !default; } // stylelint-disable-next-line plugin/selector-bem-pattern -.ecl-container .ecl-banner .ecl-container { +.ecl-container .ecl-banner:not(.ecl-banner--full-width) .ecl-container { padding-inline-start: var(--s-m); padding-inline-end: var(--s-m); } -@include breakpoints.up('s') { - .ecl-container .ecl-banner .ecl-container { - padding-inline-start: var(--s-2xl); - padding-inline-end: var(--s-2xl); - } -} - .ecl-banner__container { display: flex; padding-bottom: map.get($banner, 'container-padding-bottom', 'mobile'); diff --git a/src/implementations/vanilla/components/carousel/carousel.js b/src/implementations/vanilla/components/carousel/carousel.js index a3648a9213..3bac826087 100644 --- a/src/implementations/vanilla/components/carousel/carousel.js +++ b/src/implementations/vanilla/components/carousel/carousel.js @@ -561,7 +561,10 @@ export class Carousel { this.resetBannerHeights(); } // Cannot find an explanation for the missing 15 pixels here. - this.containerWidth = this.container.offsetWidth + 15; + this.containerWidth = + this.container.offsetWidth + 15 > vw + ? vw + : this.container.offsetWidth + 15; this.slidesContainer.style.width = `${this.containerWidth * this.slides.length}px`; // Initialize position of slides and size of the carousel this.slides.forEach((slide) => { @@ -579,7 +582,7 @@ export class Carousel { } else { this.container.classList.remove('ecl-carousel-container--padded'); } - // Desactivate autoPlay for mobile or activate autoPlay onLoad for desktop + // Deactivate autoPlay for mobile or activate autoPlay onLoad for desktop if ((vw <= 768 && this.autoPlay) || (vw > 768 && this.autoPlay === null)) { this.handleAutoPlay(); } From 5621394bf17a383ed57be4f60fbee8aaee856e7e Mon Sep 17 00:00:00 2001 From: planctus Date: Tue, 27 Aug 2024 19:52:35 +0300 Subject: [PATCH 10/13] feat(carousel): Only hide on init - FRONT-4571 --- src/implementations/vanilla/components/carousel/carousel.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/implementations/vanilla/components/carousel/carousel.js b/src/implementations/vanilla/components/carousel/carousel.js index 3bac826087..e3dd6d973a 100644 --- a/src/implementations/vanilla/components/carousel/carousel.js +++ b/src/implementations/vanilla/components/carousel/carousel.js @@ -545,7 +545,6 @@ export class Carousel { * Trigger events on resize. */ handleResize() { - this.element.style.opacity = 0; const vw = Math.max( document.documentElement.clientWidth || 0, window.innerWidth || 0, From eff0f1214af9038f7c51add19ac5df41cff927a0 Mon Sep 17 00:00:00 2001 From: planctus Date: Wed, 28 Aug 2024 11:53:41 +0300 Subject: [PATCH 11/13] feat(carousel): Adding text in the demo for grid content - FRONT-4571 --- src/implementations/twig/components/carousel/carousel.story.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/implementations/twig/components/carousel/carousel.story.js b/src/implementations/twig/components/carousel/carousel.story.js index cfbf52c22f..78bca03f58 100644 --- a/src/implementations/twig/components/carousel/carousel.story.js +++ b/src/implementations/twig/components/carousel/carousel.story.js @@ -100,7 +100,7 @@ const renderStory = async (data, args) => { } if (args.grid_content) { story += - '

Content inside the grid

'; + '

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eleifend auctor libero et scelerisque. Phasellus malesuada sem vel augue egestas facilisis. Curabitur velit nibh, scelerisque in massa vitae, consectetur tempor ligula. Nunc vehicula tellus vel nunc facilisis, ac condimentum nulla lacinia. Integer at vulputate sapien.

'; } return story; From 0b5b9ed02aa6562915c88b7e2be01c2ae48bde31 Mon Sep 17 00:00:00 2001 From: planctus Date: Thu, 29 Aug 2024 13:31:50 +0300 Subject: [PATCH 12/13] feat(carousel): Consistent calculations removing the scrollbar before rendering - FRONT-4571 --- .../vanilla/components/carousel/carousel.js | 15 ++++++++------- 1 file changed, 8 insertions(+), 7 deletions(-) diff --git a/src/implementations/vanilla/components/carousel/carousel.js b/src/implementations/vanilla/components/carousel/carousel.js index e3dd6d973a..dc50cdf768 100644 --- a/src/implementations/vanilla/components/carousel/carousel.js +++ b/src/implementations/vanilla/components/carousel/carousel.js @@ -551,7 +551,8 @@ export class Carousel { ); clearInterval(this.intervalId); clearTimeout(this.resizeTimer); - + // Prevent scrollbars from disturbing the calculations. + document.body.style.overflow = 'hidden'; // We set 250ms delay which is higher than the 200ms delay in the banner. this.resizeTimer = setTimeout(() => { if (vw >= 998) { @@ -559,18 +560,18 @@ export class Carousel { } else { this.resetBannerHeights(); } - // Cannot find an explanation for the missing 15 pixels here. - this.containerWidth = - this.container.offsetWidth + 15 > vw - ? vw - : this.container.offsetWidth + 15; + + this.containerWidth = this.container.offsetWidth; this.slidesContainer.style.width = `${this.containerWidth * this.slides.length}px`; // Initialize position of slides and size of the carousel this.slides.forEach((slide) => { - slide.style.width = `${this.containerWidth}px`; + slide.style.width = `${100 / this.slides.length}%`; }); this.checkIndex(); setTimeout(() => { + // Restore body scroll + document.body.style.overflow = ''; + // Reveal the carousel this.element.style.opacity = 1; }, 250); }, 250); From 1e24caf793ad1b0e2dbc231dce08c097c921d053 Mon Sep 17 00:00:00 2001 From: planctus Date: Tue, 3 Sep 2024 13:03:57 +0300 Subject: [PATCH 13/13] feat(carousel): Css only layout, js is only sliding now - FRONT-4571 --- .../vanilla/components/carousel/carousel.js | 17 +++++------------ .../vanilla/components/carousel/carousel.scss | 9 ++++++++- 2 files changed, 13 insertions(+), 13 deletions(-) diff --git a/src/implementations/vanilla/components/carousel/carousel.js b/src/implementations/vanilla/components/carousel/carousel.js index dc50cdf768..41f283e727 100644 --- a/src/implementations/vanilla/components/carousel/carousel.js +++ b/src/implementations/vanilla/components/carousel/carousel.js @@ -88,7 +88,7 @@ export class Carousel { this.cloneLastSLide = null; this.executionCount = 0; this.maxExecutions = 5; - this.containerWidth = 0; + this.slideWidth = 0; // Bind `this` for use in callbacks this.handleAutoPlay = this.handleAutoPlay.bind(this); @@ -424,7 +424,8 @@ export class Carousel { * @param {Boolean} transition */ moveSlides(transition) { - const newOffset = parseFloat(this.containerWidth) * this.index; + const newOffset = this.slideWidth * this.index; + this.slidesContainer.style.transitionDuration = transition ? '0.4s' : '0s'; if (this.direction === 'rtl') { this.slidesContainer.style.right = `-${newOffset}px`; @@ -551,8 +552,7 @@ export class Carousel { ); clearInterval(this.intervalId); clearTimeout(this.resizeTimer); - // Prevent scrollbars from disturbing the calculations. - document.body.style.overflow = 'hidden'; + // We set 250ms delay which is higher than the 200ms delay in the banner. this.resizeTimer = setTimeout(() => { if (vw >= 998) { @@ -561,16 +561,9 @@ export class Carousel { this.resetBannerHeights(); } - this.containerWidth = this.container.offsetWidth; - this.slidesContainer.style.width = `${this.containerWidth * this.slides.length}px`; - // Initialize position of slides and size of the carousel - this.slides.forEach((slide) => { - slide.style.width = `${100 / this.slides.length}%`; - }); + this.slideWidth = this.slides[0].scrollWidth; this.checkIndex(); setTimeout(() => { - // Restore body scroll - document.body.style.overflow = ''; // Reveal the carousel this.element.style.opacity = 1; }, 250); diff --git a/src/implementations/vanilla/components/carousel/carousel.scss b/src/implementations/vanilla/components/carousel/carousel.scss index 75f96ffdb8..16b817282a 100644 --- a/src/implementations/vanilla/components/carousel/carousel.scss +++ b/src/implementations/vanilla/components/carousel/carousel.scss @@ -43,11 +43,18 @@ $carousel: null !default; .ecl-carousel__slides { display: flex; + flex-direction: row; list-style: none; margin: 0; padding: 0; position: relative; - width: 100%; + scroll-snap-type: x mandatory; + + .ecl-carousel__slide { + flex: 0 0 auto; + scroll-snap-align: start; + width: 100%; + } } .ecl-carousel__slide .ecl-banner__credit {