From e6fcbe73c57e7196f87c139af043030be9de7a2e Mon Sep 17 00:00:00 2001 From: Tomasz Dziezyk Date: Wed, 15 Nov 2023 11:38:16 +0100 Subject: [PATCH] #38 Refactor after CR --- blocks/v2-images-grid/v2-images-grid.css | 20 ++++++- blocks/v2-images-grid/v2-images-grid.js | 67 +++++++++++++++--------- common/modal/modal-component.css | 5 ++ 3 files changed, 67 insertions(+), 25 deletions(-) diff --git a/blocks/v2-images-grid/v2-images-grid.css b/blocks/v2-images-grid/v2-images-grid.css index 6e54232a1..32fd53e1f 100644 --- a/blocks/v2-images-grid/v2-images-grid.css +++ b/blocks/v2-images-grid/v2-images-grid.css @@ -155,8 +155,20 @@ .v2-images-grid__modal-arrow:hover, .v2-images-grid__modal-arrow:active, -.v2-images-grid__modal-arrow:focus { +.v2-images-grid__modal-arrow:focus +.v2-images-grid__modal-arrow:focus-visible { background: var(--c-primary-white); + + --color-icon: var(--c-accent-copper); +} + +.v2-images-grid__modal-arrow svg { + height: 24px; + width: 24px; +} + +.v2-images-grid__modal-arrow:disabled:hover svg { + --color-icon: var(--c-primary-black); } .v2-images-grid__carousel-items-wrapper { @@ -177,6 +189,12 @@ position: absolute; } +.v2-images-grid__modal-arrows-wrapper + .v2-images-grid__modal-arrow:first-of-type + svg { + rotate: 180deg; +} + .v2-images-grid__modal-arrows-wrapper .v2-images-grid__modal-arrow:last-of-type { top: 50%; diff --git a/blocks/v2-images-grid/v2-images-grid.js b/blocks/v2-images-grid/v2-images-grid.js index d67c56f56..0e99ab575 100644 --- a/blocks/v2-images-grid/v2-images-grid.js +++ b/blocks/v2-images-grid/v2-images-grid.js @@ -14,9 +14,31 @@ const scrollLeft = (el, leftPadding) => { }); }; -const setActiveSlide = (activeSlideIndex, carouselItemsList, carouselImagesList) => { +const udpateArrowsState = (activeSlideIndex, itemsCount) => { + const arrowButtons = [...document.querySelectorAll(`.${blockClassName}__modal-arrows-wrapper button`)]; + + if (!arrowButtons.length) { + return; + } + + if (activeSlideIndex === 0) { + arrowButtons[0].setAttribute('disabled', 'disabled'); + } else { + arrowButtons[0].removeAttribute('disabled'); + } + + if (activeSlideIndex === itemsCount - 1) { + arrowButtons[1].setAttribute('disabled', 'disabled'); + } else { + arrowButtons[1].removeAttribute('disabled'); + } +}; + +const setActiveSlide = (activeSlideIndex, carouselItemsList, carouselImagesList, modalContent) => { const itemWidth = carouselItemsList.getBoundingClientRect().width; + udpateArrowsState(activeSlideIndex, carouselItemsList.children.length, modalContent); + scrollLeft(carouselImagesList, activeSlideIndex * 90); scrollLeft(carouselItemsList, activeSlideIndex * itemWidth); }; @@ -63,6 +85,8 @@ const createModalContent = (content) => { const observer = new IntersectionObserver(() => { debouncedOnItemChange(index); + + udpateArrowsState(index, carouselItemsList.children.length, el.closest(`${blockClassName}__carousel-items-wrapper`)); }, options); observer.observe(carouselItem); @@ -73,15 +97,11 @@ const createModalContent = (content) => { itemsWrapper.innerHTML = `
- -
`; @@ -92,18 +112,9 @@ const createModalContent = (content) => { el.addEventListener('click', () => { const itemWidth = carouselItemsList.getBoundingClientRect().width; - let index = Math.round(carouselItemsList.scrollLeft / itemWidth) + modifiers[elIndex]; - - if (index < 0) { - index = carouselItemsList.children.length - 1; - } + const index = Math.round(carouselItemsList.scrollLeft / itemWidth) + modifiers[elIndex]; - if (index > carouselItemsList.children.length - 1) { - index = 0; - } - - scrollLeft(carouselImagesList, index * 90); - scrollLeft(carouselItemsList, index * itemWidth); + setActiveSlide(index, carouselItemsList, carouselImagesList, content); }); }); @@ -112,6 +123,10 @@ const createModalContent = (content) => { return wrapper; }; +const showImagesGridModal = async (modalContent) => { + await showModal(modalContent, { classes: ['modal-content--bottom'] }); +}; + export default function decorate(block) { // all items are inside a ul list with classname called 'v2-images-grid__items' const ul = createElement('ul', { classes: `${blockClassName}__items` }); @@ -155,8 +170,8 @@ export default function decorate(block) { const carouselItemsList = modalContent.querySelector(`.${blockClassName}__carousel-items-list`); const carouselImagesList = modalContent.querySelector(`.${blockClassName}__carousel-preview-list`); - await showModal(modalContent, { classes: ['modal-content--bottom'] }); - setActiveSlide(idx, carouselItemsList, carouselImagesList); + await showImagesGridModal(modalContent); + setActiveSlide(idx, carouselItemsList, carouselImagesList, modalContent); }); return; @@ -168,8 +183,12 @@ export default function decorate(block) { classes: ['button', 'button--large', 'button--primary'], }); button.textContent = getTextLabel('Open Gallery'); - button.addEventListener('click', () => { - showModal(modalContent, { classes: ['modal-content--bottom'] }); + button.addEventListener('click', async () => { + const carouselItemsList = modalContent.querySelector(`.${blockClassName}__carousel-items-list`); + const carouselImagesList = modalContent.querySelector(`.${blockClassName}__carousel-preview-list`); + + await showImagesGridModal(modalContent); + setActiveSlide(0, carouselItemsList, carouselImagesList, modalContent); }); block.append(button); diff --git a/common/modal/modal-component.css b/common/modal/modal-component.css index 0e6c8e96e..7b32f7ae6 100644 --- a/common/modal/modal-component.css +++ b/common/modal/modal-component.css @@ -109,6 +109,11 @@ position: absolute; right: 0; } + + .redesign-v2 .modal-background button.modal-close-button:hover, + .redesign-v2 .modal-background button.modal-close-button:focus-visible { + --color-icon: var(--c-accent-copper); + } } /* adjustments for soundcloud variant of modal, e.g. https://www.volvotrucks.us/trucks/powertrain/i-torque/ */