From d191313b9902ac33d88b8ca201c29b035403a480 Mon Sep 17 00:00:00 2001 From: Luca Carini Date: Thu, 5 Dec 2024 17:25:32 +0000 Subject: [PATCH 1/5] list-promo: simplify JS --- .../blocks/list-promo/_list-promo.js | 151 +++++------------- .../blocks/list-promo/_list-promo.scss | 16 +- .../blocks/list-promo/list-promo.html | 49 +----- 3 files changed, 56 insertions(+), 160 deletions(-) diff --git a/src/components/blocks/list-promo/_list-promo.js b/src/components/blocks/list-promo/_list-promo.js index 7f538d95..65acc981 100644 --- a/src/components/blocks/list-promo/_list-promo.js +++ b/src/components/blocks/list-promo/_list-promo.js @@ -1,112 +1,47 @@ document.addEventListener('DOMContentLoaded', () => { - const ctrlsDirectional = [ - { - ctrlName: 'Previous', - ctrlClasses: ['u-btn-icon', 'u-btn-icon--light', 'u-btn-icon--point-left', 'b-list-promo__ctrls-directional-btn'], - ctrlAttr: 'disabled', - }, - { - ctrlName: 'Next', - ctrlClasses: ['u-btn-icon', 'u-btn-icon--light', 'u-btn-icon--point-right', 'b-list-promo__ctrls-directional-btn'], - }, - ]; - - const setActiveListItem = (listIndex, inst) => { - const promoImgListItems = inst.querySelectorAll('.b-list-promo__image-list-item'); - const promoInfoListItems = inst.querySelectorAll('.b-list-promo__list-item'); - - promoImgListItems.forEach((listItem, i) => { - if (i !== listIndex) { - listItem.classList.remove('b-list-promo__image-list-item--active'); - } else { - listItem.classList.add('b-list-promo__image-list-item--active'); - } - }); - - promoInfoListItems.forEach((listItem, i) => { - if (i !== listIndex) { - listItem.classList.remove('b-list-promo__list-item--active'); - } else { - listItem.classList.add('b-list-promo__list-item--active'); - } - }); - }; - - const switchListItem = (e) => { - const selectedDirection = e.target.textContent; - - const promoListItems = Array.from(e.target.inst.querySelectorAll('.b-list-promo__list-item')); - const promoListActiveItem = e.target.inst.querySelector('.b-list-promo__list-item--active'); - const currentListItemIndex = promoListItems.indexOf(promoListActiveItem); - const lastListItemIndex = promoListItems.length - 1; - - const ctrlDirectionPrev = e.target.inst.querySelector('.u-btn-icon--point-left.b-list-promo__ctrls-directional-btn'); - const ctrlDirectionNext = e.target.inst.querySelector('.u-btn-icon--point-right.b-list-promo__ctrls-directional-btn'); - - if (selectedDirection === 'Previous') { - if (currentListItemIndex > 0) { - setActiveListItem(currentListItemIndex - 1, e.target.inst); - ctrlDirectionNext.removeAttribute('disabled'); - } - if (currentListItemIndex === 1) { - ctrlDirectionPrev.setAttribute('disabled', ''); - } + Array.from(document.querySelectorAll('.b-list-promo'), (promo) => { + const listImgs = promo.querySelectorAll('.b-list-promo__image-list-item'); + + /* Promo logic only required if > 1 promo img present */ + if (listImgs.length > 1) { + const listItems = promo.querySelectorAll('.b-list-promo__list-item'); + + /* set initial item active state */ + let activeIndex = 0; + listItems[activeIndex].classList.add('b-list-promo__list-item--active'); + + /* fn to set active item classes */ + const setActiveItem = (itemIndex) => { + promo.querySelector('.b-list-promo__image-list-item--active').classList.remove('b-list-promo__image-list-item--active'); + listImgs[itemIndex].classList.add('b-list-promo__image-list-item--active'); + promo.querySelector('.b-list-promo__list-item--active').classList.remove('b-list-promo__list-item--active'); + listItems[itemIndex].classList.add('b-list-promo__list-item--active'); + }; + + /* promo ctrls can be shown */ + const ctrls = promo.querySelector('.b-list-promo__ctrls'); + ctrls.classList.add('b-list-promo__ctrls--active'); + + /* promo controls setup */ + const prev = ctrls.querySelector('.js-list-promo__ctrls-btn--prev'); + const next = ctrls.querySelector('.js-list-promo__ctrls-btn--next'); + prev.setAttribute('disabled', 'true'); + + /* promo controls logic */ + ctrls.addEventListener('click', (e) => { + if (e.target === prev) { + activeIndex -= 1; + next.removeAttribute('disabled'); + if (activeIndex === 0) prev.setAttribute('disabled', 'true'); + } else if (e.target === next) { + activeIndex += 1; + prev.removeAttribute('disabled'); + if (activeIndex === listImgs.length - 1) next.setAttribute('disabled', 'true'); + } + setActiveItem(activeIndex); + }); } - if (selectedDirection === 'Next') { - if (currentListItemIndex < lastListItemIndex) { - setActiveListItem(currentListItemIndex + 1, e.target.inst); - ctrlDirectionPrev.removeAttribute('disabled'); - } - if (currentListItemIndex === lastListItemIndex - 1) { - ctrlDirectionNext.setAttribute('disabled', ''); - } - } - }; - - const buildDirectionCtrls = (inst) => { - const ctrlsContainerParent = inst.querySelector('.b-list-promo__image-list-container'); - const ctrlsContainer = document.createElement('ul'); - - ctrlsContainer.classList.add('b-list-promo__ctrls-directional-list'); - - ctrlsDirectional.forEach((ctrl) => { - const ctrlListItem = document.createElement('li'); - const ctrlBtn = document.createElement('button'); - - ctrlBtn.classList.add(...ctrl.ctrlClasses); - ctrlBtn.textContent = ctrl.ctrlName; - ctrlBtn.setAttribute('title', `${ctrl.ctrlName} item`); - ctrlBtn.setAttribute('type', 'button'); - - // disable 'Previous' button on initialisation - if (ctrl.ctrlAttr) { - ctrlBtn.setAttribute(ctrl.ctrlAttr, ''); - } - - ctrlBtn.inst = inst; - ctrlBtn.addEventListener('click', switchListItem, false); - - ctrlListItem.appendChild(ctrlBtn); - ctrlsContainer.appendChild(ctrlListItem); - ctrlsContainerParent.appendChild(ctrlsContainer); - }); - }; - - const init = () => { - // there may be more than one instance on the page - const componentContainers = document.querySelectorAll('.b-list-promo'); - - componentContainers.forEach((inst) => { - const promoInfoListItems = inst.querySelectorAll('.b-list-promo__list-item'); - - setActiveListItem(0, inst); - - if (promoInfoListItems.length > 1) { - buildDirectionCtrls(inst); - } - }); - }; - - init(); + return true; + }); }); diff --git a/src/components/blocks/list-promo/_list-promo.scss b/src/components/blocks/list-promo/_list-promo.scss index 6c734387..beea996b 100644 --- a/src/components/blocks/list-promo/_list-promo.scss +++ b/src/components/blocks/list-promo/_list-promo.scss @@ -90,7 +90,7 @@ @include mixins.breakpoints-bpMinSmall { height: 296px; } - + @include mixins.breakpoints-bpMinMedium { height: 390px; } @@ -103,10 +103,8 @@ width: 100%; } - &__ctrls-directional-list { - @include mixins.unstyledelements-unstyledList; - - display: flex; + &__ctrls { + display: none; gap: 4px; position: absolute; right: 10px; @@ -119,9 +117,13 @@ @include mixins.breakpoints-bpMinMedium { top: 345px; } + + &--active { + display: flex; + } } - &__ctrls-directional-btn { + &__ctrls-btn { box-shadow: 1px 1px 12px 0 rgba(29, 30, 32, 50%), -1px -1px 12px 0 rgba(29, 30, 32, 50%); height: 26px; width: 26px; @@ -179,7 +181,7 @@ color: base.sitecolors-siteColor("vam-black"); } } - + &::after { background-color: base.sitecolors-siteColor("vam-black"); border-radius: 50%; diff --git a/src/components/blocks/list-promo/list-promo.html b/src/components/blocks/list-promo/list-promo.html index 531218ac..23ec16c9 100644 --- a/src/components/blocks/list-promo/list-promo.html +++ b/src/components/blocks/list-promo/list-promo.html @@ -17,51 +17,10 @@ {% endfor %} - -
-

{{ promoTitle }}

-

{{ promoDescription }}

- - -
- - -
- -
-
-
    - {% for img in promoItems %} -
  • - {{ promoTitle }} -
    • - {% endfor %} -
+
+ + +

{{ promoTitle }}

From e5387ab22aa42698e06208900878d8e4bf69f50e Mon Sep 17 00:00:00 2001 From: Luca Carini Date: Thu, 5 Dec 2024 17:44:27 +0000 Subject: [PATCH 2/5] list-promo: fix img sizes --- src/components/blocks/list-promo/list-promo.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/blocks/list-promo/list-promo.html b/src/components/blocks/list-promo/list-promo.html index 23ec16c9..d94c0c70 100644 --- a/src/components/blocks/list-promo/list-promo.html +++ b/src/components/blocks/list-promo/list-promo.html @@ -10,8 +10,8 @@ {{ img.image["640"] }} 640w, {{ img.image[960] }} 960w, {{ img.image[1280] }} 1280w" - sizes="(max-width: 499px) 100vw, - (min-width: 500px) 50vw" + sizes="(min-width: 768px) 50vw, + 100vw" src="{{ img.image["640"] }}" loading="lazy"> From 6a3560b26f368d3ed43437724050567063cb3d8f Mon Sep 17 00:00:00 2001 From: Luca Carini Date: Thu, 5 Dec 2024 18:05:48 +0000 Subject: [PATCH 3/5] list-promo: simplify HTML/CSS --- .../blocks/list-promo/_list-promo.scss | 4 --- .../blocks/list-promo/list-promo.html | 36 +++++++++---------- 2 files changed, 17 insertions(+), 23 deletions(-) diff --git a/src/components/blocks/list-promo/_list-promo.scss b/src/components/blocks/list-promo/_list-promo.scss index beea996b..b9eb8851 100644 --- a/src/components/blocks/list-promo/_list-promo.scss +++ b/src/components/blocks/list-promo/_list-promo.scss @@ -72,10 +72,6 @@ } } - &__image-list { - @include mixins.unstyledelements-unstyledList; - } - &__image-list-item { height: 0; opacity: 0; diff --git a/src/components/blocks/list-promo/list-promo.html b/src/components/blocks/list-promo/list-promo.html index d94c0c70..183bc4b2 100644 --- a/src/components/blocks/list-promo/list-promo.html +++ b/src/components/blocks/list-promo/list-promo.html @@ -1,25 +1,23 @@
-
    - {% for img in promoItems %} -
  • - {{ promoTitle }} -
    • - {% endfor %} -
+ {% for img in promoItems %} +
+ {{ promoTitle }} +
+ {% endfor %}
- - + +
From 62db3c4caf8ba58ddc32f0387f53c0c61f8dd6e1 Mon Sep 17 00:00:00 2001 From: Luca Carini Date: Thu, 5 Dec 2024 18:22:33 +0000 Subject: [PATCH 4/5] list-promo: allow for longer content; simplify CSS; improve visual transition --- .../blocks/list-promo/_list-promo.scss | 32 ++++++------------- 1 file changed, 10 insertions(+), 22 deletions(-) diff --git a/src/components/blocks/list-promo/_list-promo.scss b/src/components/blocks/list-promo/_list-promo.scss index b9eb8851..aec1c3b3 100644 --- a/src/components/blocks/list-promo/_list-promo.scss +++ b/src/components/blocks/list-promo/_list-promo.scss @@ -65,31 +65,27 @@ } &__image-list-container { + min-height: 190px; position: relative; @include mixins.breakpoints-bpMinSmall { flex: 1 1 0; + min-height: 296px; + } + + @include mixins.breakpoints-bpMinMedium { + min-height: 390px; } } &__image-list-item { - height: 0; + inset: 0; opacity: 0; - transition: visibility 0s, opacity 0.3s ease-in; - visibility: hidden; + position: absolute; + transition: opacity 0.3s ease-in; &--active { - height: 190px; opacity: 1; - visibility: visible; - - @include mixins.breakpoints-bpMinSmall { - height: 296px; - } - - @include mixins.breakpoints-bpMinMedium { - height: 390px; - } } } @@ -100,19 +96,11 @@ } &__ctrls { + bottom: 10px; display: none; gap: 4px; position: absolute; right: 10px; - top: 155px; - - @include mixins.breakpoints-bpMinSmall { - top: 250px; - } - - @include mixins.breakpoints-bpMinMedium { - top: 345px; - } &--active { display: flex; From 88d3c81e7cba20c894ff692a633e3d32c7029d9b Mon Sep 17 00:00:00 2001 From: Luca Carini Date: Thu, 5 Dec 2024 18:32:17 +0000 Subject: [PATCH 5/5] list-promo: variant label tweak --- src/components/blocks/list-promo/list-promo.config.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/blocks/list-promo/list-promo.config.js b/src/components/blocks/list-promo/list-promo.config.js index 53362ffd..8d91a0f5 100644 --- a/src/components/blocks/list-promo/list-promo.config.js +++ b/src/components/blocks/list-promo/list-promo.config.js @@ -57,8 +57,8 @@ module.exports = { }, variants: [ { - name: 'on-dark', - label: 'On dark', + name: 'dark', + label: 'Dark', context: { previewClass: 'fr-bg--dark', modifier: ['dark']