Skip to content

Commit

Permalink
feat(carousel): Styles update - FRONT-4571 (#3583)
Browse files Browse the repository at this point in the history 
* feat(carousel): Using pause-outline icon - FRONT-4571

* feat(carousel): Styles - FRONT-4571

* feat(carousel): Increasing margin in controls for EC - FRONT-4571

* feat(carousel): Alignment of the play button in large viewports - FRONT-4571

* feat(carousel): Reintroducing shadows, removing border bottom - FRONT-4571

* feat(carousel): Padding in the controls area - FRONT-4571

* feat(carousel): Single slide display, hiding element initially - FRONT-4571

* feat(carousel): Removing debug - FRONT-4571

* feat(carousel): fixing full width use case - FRONT-4571

* feat(carousel): Only hide on init - FRONT-4571

* feat(carousel): Adding text in the demo for grid content - FRONT-4571

* feat(carousel): Consistent calculations removing the scrollbar before rendering - FRONT-4571

* feat(carousel): Css only layout, js is only sliding now - FRONT-4571

---------

Co-authored-by: Romain Emery <emery.romain@gmail.com>
  • Loading branch information
@planctus @emeryro
planctus and emeryro authored Sep 5, 2024
1 parent fcee017 commit b4f0a40
Show file tree
Hide file tree
Showing 6 changed files with 80 additions and 87 deletions.
6 changes: 3 additions & 3 deletions src/implementations/twig/components/carousel/__snapshots__/carousel.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@ exports[`Carousel Default renders correctly 1`] = `
focusable="false"
>
<use
xlink:href="/icons.svg#pause"
xlink:href="/icons.svg#pause-outline"
/>
</svg>
</span>
Expand Down Expand Up @@ -448,7 +448,7 @@ exports[`Carousel Default renders correctly with extra attributes 1`] = `
focusable="false"
>
<use
xlink:href="/icons.svg#pause"
xlink:href="/icons.svg#pause-outline"
/>
</svg>
</span>
Expand Down Expand Up @@ -832,7 +832,7 @@ exports[`Carousel Default renders correctly with extra class names 1`] = `
focusable="false"
>
<use
xlink:href="/icons.svg#pause"
xlink:href="/icons.svg#pause-outline"
/>
</svg>
</span>
Expand Down
2 changes: 1 addition & 1 deletion src/implementations/twig/components/carousel/carousel.html.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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',
},
Expand Down
2 changes: 1 addition & 1 deletion src/implementations/twig/components/carousel/carousel.story.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -100,7 +100,7 @@ const renderStory = async (data, args) => {
}
if (args.grid_content) {
story +=
'<div class="ecl-container"><p class="ecl-u-type-paragraph">Content inside the grid</p></div>';
'<div class="ecl-container"><p class="ecl-u-type-paragraph ecl-u-pt-xl">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.</p></div>';
}

return story;
Expand Down
86 changes: 56 additions & 30 deletions src/implementations/vanilla/components/carousel/carousel.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -88,6 +88,7 @@ export class Carousel {
this.cloneLastSLide = null;
this.executionCount = 0;
this.maxExecutions = 5;
this.slideWidth = 0;

// Bind `this` for use in callbacks
this.handleAutoPlay = this.handleAutoPlay.bind(this);
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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) => {
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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);
}
}
});
}
Expand Down Expand Up @@ -399,7 +424,8 @@ export class Carousel {
* @param {Boolean} transition
*/
moveSlides(transition) {
const newOffset = this.container.offsetWidth * 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`;
Expand All @@ -410,8 +436,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;
Expand Down Expand Up @@ -520,36 +552,30 @@ export class Carousel {
);
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) {
this.intervalId = setInterval(this.checkBannerHeights, 100);
} else {
this.resetBannerHeights();
}
}, 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);
this.slideWidth = this.slides[0].scrollWidth;
this.checkIndex();
setTimeout(() => {
// Reveal the carousel
this.element.style.opacity = 1;
}, 250);
}, 250);

// 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
// Deactivate autoPlay for mobile or activate autoPlay onLoad for desktop
if ((vw <= 768 && this.autoPlay) || (vw > 768 && this.autoPlay === null)) {
this.handleAutoPlay();
}
Expand Down
67 changes: 17 additions & 50 deletions src/implementations/vanilla/components/carousel/carousel.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,38 +34,30 @@ $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 {
display: flex;
flex-direction: row;
list-style: none;
margin: 0;
padding: 0;
position: relative;
width: 100%;
}

.ecl-carousel__slide {
position: relative;
scroll-snap-type: x mandatory;

&::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 {
flex: 0 0 auto;
scroll-snap-align: start;
width: 100%;
}
}

.ecl-carousel__slide .ecl-banner__credit {
margin-inline-end: var(--s-2xs);
width: auto;
}

Expand All @@ -83,6 +75,10 @@ $carousel: null !default;
display: flex;
justify-content: space-between;
}

.ecl-carousel__pause {
display: none;
}
}

.ecl-carousel__controls,
Expand Down Expand Up @@ -115,12 +111,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 {
Expand All @@ -143,6 +133,11 @@ $carousel: null !default;

/* stylelint-disable-next-line order/order */
@include breakpoints.up('l') {
.ecl-carousel__controls .ecl-container {
padding-inline-start: var(--s-2xl);
padding-inline-end: var(--s-2xl);
}

.ecl-carousel {
.ecl-banner {
height: initial;
Expand All @@ -153,10 +148,6 @@ $carousel: null !default;
}
}

.ecl-carousel__container {
width: 100%;
}

.ecl-carousel__slide {
position: relative;

Expand All @@ -177,21 +168,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);
}
Expand Down Expand Up @@ -232,12 +208,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);
}
4 changes: 2 additions & 2 deletions src/themes/ec/variables/_carousel.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,9 @@

$carousel: (
box-shadow: var(--sh-6),
separator: 1px solid var(--c-n),
separator: none,
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),
Expand Down

1 comment on commit b4f0a40

@github-actions
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🚀 Deployed on https://v4-dev--europa-component-library.netlify.app

Please sign in to comment.