From 8bb254cb7cf8e6fa3aa830ff1b61a07aa14044ae Mon Sep 17 00:00:00 2001 From: Patrick Zimmermann Date: Tue, 19 Sep 2023 17:17:44 +0200 Subject: [PATCH 1/9] fixing CSS issues on long-form pages --- blocks/courses/courses.css | 9 ++++++++- blocks/default-article/default-article.js | 4 ++-- blocks/embed/embed.css | 4 ++++ blocks/long-form/long-form.css | 12 +++++++----- blocks/more-cards/more-cards.css | 6 ++++-- blocks/social-share/social-share.css | 7 +++++++ 6 files changed, 32 insertions(+), 10 deletions(-) diff --git a/blocks/courses/courses.css b/blocks/courses/courses.css index 9ede77f7..901477aa 100644 --- a/blocks/courses/courses.css +++ b/blocks/courses/courses.css @@ -5,13 +5,20 @@ justify-content: space-between; font-family: var(--font-gotham); padding: 20px; - margin: 20px; + margin: 20px auto; + max-width: 800px; } .courses-wrapper .courses.block .courses-info-wrapper { display: flex; } +.courses-wrapper .courses.block .courses-info { + line-height: 26.4px; + letter-spacing: 0; + text-align: left; +} + .courses-wrapper .courses.block .courses-info-wrapper + p { margin-bottom: 0; } diff --git a/blocks/default-article/default-article.js b/blocks/default-article/default-article.js index 36b5f622..d9634118 100644 --- a/blocks/default-article/default-article.js +++ b/blocks/default-article/default-article.js @@ -44,9 +44,9 @@ export default async function decorate(block) {
${author ? `By ${author}` : ''}
-
+ ${publicationDate ? `
${publicationDate} -
+
` : ''}
diff --git a/blocks/embed/embed.css b/blocks/embed/embed.css index 0c88ea50..2aaf7d4a 100644 --- a/blocks/embed/embed.css +++ b/blocks/embed/embed.css @@ -79,6 +79,10 @@ main .embed.block:has(div > iframe, iframe) { max-width: 100%; } +main article.article-content .embed.block:has(div > iframe, iframe) { + max-width: 800px; +} + main .embed.block[data-embed-link^="https://view.ceros.com/golf-digest/"] { max-width: var(--layout-width); } diff --git a/blocks/long-form/long-form.css b/blocks/long-form/long-form.css index 804b92de..dd0efa07 100644 --- a/blocks/long-form/long-form.css +++ b/blocks/long-form/long-form.css @@ -1,5 +1,6 @@ .long-form-wrapper .long-form.block .container { margin: 0 auto; + --article-width: 800px; } .long-form-wrapper .long-form.block .container-article { @@ -26,6 +27,7 @@ .long-form-wrapper .long-form.block .article-body a { color: #000; text-decoration: none; + font-weight: 500; } .long-form-wrapper .long-form.block .article-body strong > a { @@ -115,10 +117,11 @@ margin: 20px 0; } -.long-form-wrapper .long-form.block .article-body div > p { +.long-form-wrapper .long-form.block .article-body > div > div > div > p { line-height: 30px; - margin-bottom: 20px; + margin: 0 auto 20px; padding: 0 20px; + max-width: var(--article-width); } .long-form-wrapper .long-form.block .article-body h2 { @@ -142,8 +145,8 @@ } @media (min-width: 1025px) { - .long-form-wrapper .long-form.block .article-body div > p { - padding: 0 35px; + .long-form-wrapper .long-form.block .article-body > div > div > div > p { + padding: 0 15px 0 35px; margin-bottom: 60px; } @@ -307,7 +310,6 @@ } .long-form-wrapper .long-form.block .article-body { - max-width: 800px; margin: auto; padding-bottom: 60px; } diff --git a/blocks/more-cards/more-cards.css b/blocks/more-cards/more-cards.css index 4ed43821..9db8e79b 100644 --- a/blocks/more-cards/more-cards.css +++ b/blocks/more-cards/more-cards.css @@ -1,5 +1,5 @@ .more-cards { - padding: 15px 10px; + padding: 15px 22px; margin: 30px 0; display: flex; justify-content: center; @@ -22,7 +22,9 @@ @media (min-width: 1025px) { .more-cards { - margin: 60px 0; + margin: 60px auto; + width: max-content; + max-width: 100%; } } diff --git a/blocks/social-share/social-share.css b/blocks/social-share/social-share.css index 8e2429ee..b93bff03 100644 --- a/blocks/social-share/social-share.css +++ b/blocks/social-share/social-share.css @@ -52,6 +52,13 @@ display: none; } +.long-form-wrapper .long-form.block .social-share { + width: 100%; + max-width: 800px; + padding: 0 20px; + margin: 0 auto 28px; +} + @media (max-width: 770px) { main .sharing.hide-on-mobile{ display: none; From a703fc9e6ab7a07ceb1698674c404a47982e2bec Mon Sep 17 00:00:00 2001 From: Patrick Zimmermann Date: Wed, 20 Sep 2023 16:27:29 +0200 Subject: [PATCH 2/9] adjusting long-form CSS, creating auto-carousel --- blocks/long-form/long-form.css | 13 ++- blocks/long-form/long-form.js | 54 ++++++----- scripts/scripts.js | 164 +++++++++++++++++++++++++++++++++ styles/styles.css | 78 ++++++++++++++++ 4 files changed, 283 insertions(+), 26 deletions(-) diff --git a/blocks/long-form/long-form.css b/blocks/long-form/long-form.css index dd0efa07..82932d98 100644 --- a/blocks/long-form/long-form.css +++ b/blocks/long-form/long-form.css @@ -354,14 +354,23 @@ } } -.long-form-wrapper .long-form.block .article-body .fullscreen { +.long-form-wrapper .long-form.block .article-body p > picture { margin-bottom: 0; } -.long-form-wrapper .long-form.block .article-body .fullscreen img { +.long-form-wrapper .long-form.block .article-body p:has( > picture img ) { + width: 100vw; + max-width: none !important; + padding: 0 !important; +} + +.long-form-wrapper .long-form.block .article-body p > picture img { position: relative; background-color: #ededed; width: 100vw; object-fit: contain; max-height: 850px; + /* transform: translateX(-25vw); */ + /* transform: translateX(min(-20px, calc(363px - 50vw))); */ + /* transform: translateX(calc(363px - 25vw)); */ } diff --git a/blocks/long-form/long-form.js b/blocks/long-form/long-form.js index 88046d92..e9909606 100644 --- a/blocks/long-form/long-form.js +++ b/blocks/long-form/long-form.js @@ -1,7 +1,7 @@ import { addPhotoCredit, ARTICLE_TEMPLATES, - assignSlot, getAuthors, normalizeAuthorURL, + assignSlot, generateAutoCarousel, getAuthors, normalizeAuthorURL, parseFragment, parseSectionMetadata, removeEmptyElements, @@ -116,15 +116,6 @@ export default async function decorate(block) { const pictures = template.querySelectorAll('.article-body p > picture'); addPhotoCredit(pictures); - // Set fullscreen images - pictures.forEach((picture) => { - const img = picture.querySelector('img'); - picture.parentElement.classList.add('fullscreen'); - img.onload = () => { - img.style.left = `-${img.offsetLeft}px`; - }; - }); - // Update block with rendered template block.innerHTML = ''; block.append(template); @@ -143,18 +134,33 @@ export default async function decorate(block) { }).observe(block.querySelector('.lead .image')); }); - // Get images that were styled as fullscreen and adjust position - window.onresize = () => { - block.querySelectorAll('.fullscreen img').forEach((img) => { - // Hide visibility before resetting the position - img.style.visibility = 'hidden'; - img.style.left = 0; - - // Wait frame before reading position - requestAnimationFrame(() => { - img.style.left = `-${img.offsetLeft}px`; - img.style.visibility = 'visible'; - }); - }); - }; + // creating auto carousels + const autoCarouselGroups = [] + + const potentialArticleImageGroups = block.querySelectorAll('.article-body *:not(:has(picture)) + p:has(> picture img)') + potentialArticleImageGroups.forEach((imageParagraph) => { + // this element is followed by at least 2 other images + if ( + imageParagraph.nextElementSibling.querySelector('picture > img') && + imageParagraph.nextElementSibling.nextElementSibling.querySelector('picture > img') + ) { + const imageGroup = [] + + let nextElementToProcess = imageParagraph + while (nextElementToProcess) { + const hasImage = nextElementToProcess.querySelector('picture > img') + if (hasImage) { + imageGroup.push(nextElementToProcess) + nextElementToProcess = nextElementToProcess.nextElementSibling + } else { + nextElementToProcess = false + } + } + autoCarouselGroups.push(imageGroup) + } + }) + + console.log("\x1b[31m ~ autoCarouselGroups:", autoCarouselGroups) + autoCarouselGroups.forEach((imageArray) => generateAutoCarousel(imageArray)) + } diff --git a/scripts/scripts.js b/scripts/scripts.js index 6decfef7..5dcde85d 100644 --- a/scripts/scripts.js +++ b/scripts/scripts.js @@ -879,3 +879,167 @@ export const generateArticleBlocker = (block, selector) => { articleBody.appendChild(articleBlocker); }; + +/** + * Generates an auto-carousel for articles + * @param {Image Element Array} + */ + +export const generateAutoCarousel = (imageElementArray) => { + const images = imageElementArray.map((element) => element.nodeName.toLowerCase() === 'picture' ? element : element.querySelector('picture')) + + for (let i = 1; i < imageElementArray.length; i++) { + imageElementArray[i].outerHTML = '' + } + + + let htmlTemplate = document.createElement('div') + htmlTemplate.className = 'auto-carousel-wrapper' + htmlTemplate.innerHTML = ` +
+
+
+ +
+ +
+ +
+
+ +
+
+ ${images.map((image) => { + return ` +
+ ${image.outerHTML} +
+ ` + }).join('')} +
+
+
+ `; + + const carouselWrapper = htmlTemplate.querySelector('.auto-carousel') + const carouselFrame = htmlTemplate.querySelector('.carousel-frame'); + const rightButton = htmlTemplate.querySelector('.controls .right-button'); + const leftButton = htmlTemplate.querySelector('.controls .left-button'); + let pressed = false; + let x = 0; + let maxScroll = 1440; + + const updateButtonVisibility = () => { + if (x > -40) { + leftButton.classList.add('hidden'); + } else { + leftButton.classList.remove('hidden'); + } + if (x < -maxScroll + 40) { + rightButton.classList.add('hidden'); + } else { + rightButton.classList.remove('hidden'); + } + }; + updateButtonVisibility(); + + const refreshMaxScroll = () => { + maxScroll = (images.length - 1) * document.body.getBoundingClientRect().width || window.innerWidth + }; + refreshMaxScroll() + + const roundX = (step = document.body.getBoundingClientRect().width || window.innerWidth) => { + const rounded = Math.round(x / step) * step; + x = Math.min(0, Math.max(rounded, -maxScroll)); + }; + + const addToX = (addValue) => { + const newValue = x + addValue; + // while dragging over the edge, value is reduced + if (newValue > 0) { + x = !pressed ? 0 : x + addValue / 8; + } else if (newValue < -maxScroll) { + x = !pressed ? -maxScroll : x + addValue / 8; + } else { + x = newValue; + } + }; + + // button logic + const rightOnClick = () => { + refreshMaxScroll() + addToX(-carouselFrame.getBoundingClientRect().width); + roundX(); + carouselFrame.style.transform = `translateX(${x}px)`; + updateButtonVisibility(); + }; + + const leftOnClick = () => { + addToX(carouselFrame.getBoundingClientRect().width); + roundX(); + carouselFrame.style.transform = `translateX(${x}px)`; + updateButtonVisibility(); + }; + + // drag logic starting with initialization for mobile + let previousTouch; + + const mouseMoveHandler = (e) => { + if (!pressed) return; + if (!e?.touches?.[0]) { + e.preventDefault(); + } + addToX(e.movementX); + carouselFrame.style.transform = `translateX(${x}px)`; + // prettier-ignore + }; + + const touchMoveHandler = (e) => { + const touch = e.touches[0]; + if (previousTouch) { + e.movementX = touch.pageX - previousTouch.pageX; + mouseMoveHandler(e); + } + previousTouch = touch; + }; + + // mouse drag handlers + const mouseUpHandler = () => { + pressed = false; + carouselWrapper.classList.remove('grabbed'); + roundX(); + carouselFrame.style.transform = `translateX(${x}px)`; + updateButtonVisibility(); + // cleanup + window.removeEventListener('mouseup', mouseUpHandler); + window.removeEventListener('touchend', mouseUpHandler); + + window.removeEventListener('mousemove', mouseMoveHandler); + window.removeEventListener('touchmove', touchMoveHandler); + }; + + const mouseDownHandler = (e) => { + if (e?.touches?.[0]) { + [previousTouch] = e.touches; + } + carouselWrapper.classList.add('grabbed'); + pressed = true; + refreshMaxScroll(); + + window.addEventListener('mouseup', mouseUpHandler); + window.addEventListener('touchend', mouseUpHandler); + + window.addEventListener('mousemove', mouseMoveHandler); + window.addEventListener('touchmove', touchMoveHandler); + }; + carouselWrapper.onmousedown = mouseDownHandler; + carouselWrapper.addEventListener('touchstart', mouseDownHandler); + + + rightButton.onclick = rightOnClick + leftButton.onclick = leftOnClick + + imageElementArray[0].replaceWith(htmlTemplate) + const overwrittenHtml = imageElementArray[0]; + +} \ No newline at end of file diff --git a/styles/styles.css b/styles/styles.css index 11cc5770..50f85683 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -338,3 +338,81 @@ div.article-blocker-wrapper div.article-blocker-content a.cta:hover { .newsletter-subscribe main { background-color: rgb(246 246 246); } + + + +.auto-carousel-wrapper .auto-carousel { + height: 850px; + width: 100%; + overflow: hidden; + position: relative; +} + +.auto-carousel-wrapper .auto-carousel .controls .button-wrapper { + /* width: 100%; */ + height: 100%; + top: 0; + left: 0; + display: flex; + align-items: center; + justify-content: space-between; + position: absolute; + z-index: 1; +} + +.auto-carousel-wrapper .auto-carousel .controls .button-wrapper:has(.right-button) { + left: unset; + right: 0; +} + +.auto-carousel-wrapper .auto-carousel .controls .button-wrapper .auto-carousel-button { + width: 70px; + height: 55px; + border: none; + border-radius: 0; + background: rgba(0 0 0 / 60%) url('/icons/arrow-icon.svg'); + background-position: center center; + background-size: 20px 30px; + background-repeat: no-repeat; + cursor: pointer; +} + +.auto-carousel-wrapper .auto-carousel .controls .button-wrapper .auto-carousel-button.hidden { + display: none; +} + +.auto-carousel-wrapper .auto-carousel .controls .button-wrapper .auto-carousel-button.left-button { + transform: rotate(180deg); +} + +.auto-carousel-wrapper .auto-carousel .carousel-inner-wrapper { + height: 100%; +} + +.auto-carousel-wrapper .auto-carousel .carousel-inner-wrapper .carousel-frame { + height: 100%; + width: 100%; + display: flex; + transition: all 0.25s ease 0s; +} + +.auto-carousel-wrapper .auto-carousel.grabbed .carousel-inner-wrapper .carousel-frame { + transition: none; +} + +.auto-carousel-wrapper .auto-carousel .carousel-inner-wrapper .carousel-frame .image-wrapper { + flex-shrink: 0; + width: 100%; + height: 100%; + background-color: #EDEDED; +} + +.auto-carousel-wrapper .auto-carousel .carousel-inner-wrapper .carousel-frame .image-wrapper picture, +.auto-carousel-wrapper .auto-carousel .carousel-inner-wrapper .carousel-frame .image-wrapper img { + width: 100%; + height: 100%; + object-fit: contain; + object-position: center center; +} + + From 14ac4e102382cd742fa906c9e72cb3e8d2ca5463 Mon Sep 17 00:00:00 2001 From: Patrick Zimmermann Date: Thu, 21 Sep 2023 10:15:58 +0200 Subject: [PATCH 3/9] refactoring carousel block to support auto-carousel --- blocks/carousel/carousel.css | 257 ++++++++++++---- blocks/carousel/carousel.js | 550 +++++++++++++++++++--------------- blocks/long-form/long-form.js | 110 ++++--- scripts/scripts.js | 163 ---------- styles/styles.css | 73 ----- 5 files changed, 577 insertions(+), 576 deletions(-) diff --git a/blocks/carousel/carousel.css b/blocks/carousel/carousel.css index c16e8b8f..b789b3b4 100644 --- a/blocks/carousel/carousel.css +++ b/blocks/carousel/carousel.css @@ -195,7 +195,6 @@ right: -10px; } - .carousel-wrapper .carousel.block .controls button.left-button { transform: rotate(180deg); } @@ -229,12 +228,9 @@ flex-shrink: 0; } -.dark .carousel-wrapper .carousel.block - .carousel-main-wrapper - .carousel-frame - .carousel-item { - background-color: #1c1c1c; - border: none; +.dark .carousel-wrapper .carousel.block .carousel-main-wrapper .carousel-frame .carousel-item { + background-color: #1c1c1c; + border: none; } .carousel-wrapper .carousel.block.wedges .carousel-main-wrapper .carousel-frame .carousel-item { @@ -288,18 +284,29 @@ } } -.carousel-wrapper .carousel.block.wedges .carousel-main-wrapper .carousel-frame .carousel-item div.carousel-image-wrapper { +.carousel-wrapper + .carousel.block.wedges + .carousel-main-wrapper + .carousel-frame + .carousel-item + div.carousel-image-wrapper { aspect-ratio: 1/1; margin: 0 0 21px; } -.carousel-wrapper .carousel.block.large .carousel-main-wrapper .carousel-frame .carousel-item div.carousel-image-wrapper { +.carousel-wrapper + .carousel.block.large + .carousel-main-wrapper + .carousel-frame + .carousel-item + div.carousel-image-wrapper { width: 100%; height: 100%; position: absolute; } -.carousel-wrapper .carousel.block.wedges +.carousel-wrapper + .carousel.block.wedges .carousel-main-wrapper .carousel-frame .carousel-item @@ -309,7 +316,13 @@ object-position: 0% 0%; } -.carousel-wrapper .carousel.block.wedges .carousel-main-wrapper .carousel-frame .carousel-item .carousel-image-wrapper picture::before { +.carousel-wrapper + .carousel.block.wedges + .carousel-main-wrapper + .carousel-frame + .carousel-item + .carousel-image-wrapper + picture::before { content: ""; display: block; position: absolute; @@ -317,7 +330,13 @@ width: 100%; } -.carousel-wrapper .carousel.block.wedges .carousel-main-wrapper .carousel-frame .carousel-item .carousel-image-wrapper picture::after { +.carousel-wrapper + .carousel.block.wedges + .carousel-main-wrapper + .carousel-frame + .carousel-item + .carousel-image-wrapper + picture::after { top: 35%; pointer-events: all; content: ""; @@ -351,7 +370,13 @@ } } -.carousel-wrapper .carousel.block .carousel-main-wrapper .carousel-frame .carousel-item .carousel-item-wrapper .carousel-image-wrapper { +.carousel-wrapper + .carousel.block + .carousel-main-wrapper + .carousel-frame + .carousel-item + .carousel-item-wrapper + .carousel-image-wrapper { margin: -0.5px; width: calc(100% - 1px); height: auto; @@ -360,7 +385,8 @@ flex-shrink: 0; } -.carousel-wrapper .carousel.block +.carousel-wrapper + .carousel.block .carousel-main-wrapper .carousel-frame .carousel-item @@ -372,7 +398,8 @@ width: 100%; } -.carousel-wrapper .carousel.block +.carousel-wrapper + .carousel.block .carousel-main-wrapper .carousel-frame .carousel-item @@ -392,7 +419,8 @@ z-index: 1; } -.carousel-wrapper .carousel.block +.carousel-wrapper + .carousel.block .carousel-main-wrapper .carousel-frame .carousel-item:hover @@ -402,14 +430,26 @@ transform: scale(1.2); } -.carousel-wrapper .carousel.block .carousel-main-wrapper .carousel-frame .carousel-item .carousel-item-wrapper .carousel-text-content { +.carousel-wrapper + .carousel.block + .carousel-main-wrapper + .carousel-frame + .carousel-item + .carousel-item-wrapper + .carousel-text-content { display: flex; flex-direction: column; padding: 20px; gap: 10px; } -.carousel-wrapper .carousel.block.large .carousel-main-wrapper .carousel-frame .carousel-item .carousel-item-wrapper .carousel-text-content { +.carousel-wrapper + .carousel.block.large + .carousel-main-wrapper + .carousel-frame + .carousel-item + .carousel-item-wrapper + .carousel-text-content { background: linear-gradient(180deg, transparent 50%, #000); display: flex; position: relative; @@ -422,7 +462,8 @@ z-index: 1; } -.carousel-wrapper .carousel.block.wedges +.carousel-wrapper + .carousel.block.wedges .carousel-main-wrapper .carousel-frame .carousel-item @@ -432,7 +473,8 @@ padding: 0; } -.carousel-wrapper .carousel.block +.carousel-wrapper + .carousel.block .carousel-main-wrapper .carousel-frame .carousel-item @@ -448,7 +490,8 @@ font-family: var(--font-gotham); } -.carousel-wrapper .carousel.block.wedges +.carousel-wrapper + .carousel.block.wedges .carousel-main-wrapper .carousel-frame .carousel-item @@ -463,7 +506,8 @@ width: 90%; } - .carousel-wrapper .carousel.block.large + .carousel-wrapper + .carousel.block.large .carousel-main-wrapper .carousel-frame .carousel-item @@ -472,7 +516,8 @@ padding: 18px; } - .carousel-wrapper .carousel.block.large + .carousel-wrapper + .carousel.block.large .carousel-main-wrapper .carousel-frame .carousel-item @@ -483,7 +528,8 @@ } } -.carousel-wrapper .carousel.block +.carousel-wrapper + .carousel.block .carousel-main-wrapper .carousel-frame .carousel-item @@ -499,7 +545,8 @@ margin: 0; } -.carousel-wrapper .carousel.block.wedges +.carousel-wrapper + .carousel.block.wedges .carousel-main-wrapper .carousel-frame .carousel-item @@ -517,7 +564,8 @@ text-align: center; } -.carousel-wrapper .carousel.block.large +.carousel-wrapper + .carousel.block.large .carousel-main-wrapper .carousel-frame .carousel-item @@ -535,7 +583,8 @@ margin: 0; } -.carousel-wrapper .carousel.block +.carousel-wrapper + .carousel.block .carousel-main-wrapper .carousel-frame .carousel-item @@ -549,7 +598,8 @@ line-height: 130%; } -.carousel-wrapper .carousel.block.large +.carousel-wrapper + .carousel.block.large .carousel-main-wrapper .carousel-frame .carousel-item @@ -559,7 +609,8 @@ display: none; } -.carousel-wrapper .carousel.block.wedges +.carousel-wrapper + .carousel.block.wedges .carousel-main-wrapper .carousel-frame .carousel-item @@ -569,7 +620,8 @@ display: none; } -.carousel-wrapper .carousel.block +.carousel-wrapper + .carousel.block .carousel-main-wrapper .carousel-frame .carousel-item @@ -585,7 +637,8 @@ margin-top: 6px; } -.carousel-wrapper .carousel.block.wedges +.carousel-wrapper + .carousel.block.wedges .carousel-main-wrapper .carousel-frame .carousel-item @@ -595,7 +648,8 @@ display: none; } -.carousel-wrapper .carousel.block +.carousel-wrapper + .carousel.block .carousel-main-wrapper .carousel-frame .carousel-item @@ -617,7 +671,9 @@ } /* Carousel dark */ -.dark .carousel-wrapper .carousel.block +.dark + .carousel-wrapper + .carousel.block .carousel-main-wrapper .carousel-frame .carousel-item @@ -625,7 +681,6 @@ .carousel-text-content .carousel-item-pills { background-color: #151517; - } .dark .carousel-wrapper .carousel.block { @@ -633,7 +688,9 @@ color: white; } -.dark .carousel-wrapper .carousel.block +.dark + .carousel-wrapper + .carousel.block .carousel-main-wrapper .carousel-frame .carousel-item @@ -644,14 +701,13 @@ background-color: #1c1c1c; } - /* With video variation */ -.carousel-wrapper .carousel.block.with-video - .carousel-main-wrapper { - max-height: 330px; +.carousel-wrapper .carousel.block.with-video .carousel-main-wrapper { + max-height: 330px; } -.carousel-wrapper .carousel.block.with-video +.carousel-wrapper + .carousel.block.with-video .carousel-main-wrapper .carousel-frame .carousel-item @@ -660,7 +716,8 @@ padding-top: 55%; } -.carousel-wrapper .carousel.block.with-video +.carousel-wrapper + .carousel.block.with-video .carousel-main-wrapper .carousel-frame .carousel-item @@ -669,31 +726,121 @@ padding: 20px; } -.dark .carousel-wrapper .carousel.block +.dark + .carousel-wrapper + .carousel.block .carousel-main-wrapper .carousel-frame .carousel-item .carousel-item-wrapper .carousel-text-content .carousel-video-duration { - font-family: var(--font-gotham); - font-weight: 500; - line-height: 10px; - letter-spacing: .1em; - color: #adb4b7; - background: none; - position: static; - padding: 0; - margin: 0; - margin-top: 10px; - display: block; - font-size: 10px; + font-family: var(--font-gotham); + font-weight: 500; + line-height: 10px; + letter-spacing: 0.1em; + color: #adb4b7; + background: none; + position: static; + padding: 0; + margin: 0; + margin-top: 10px; + display: block; + font-size: 10px; } - @media (max-width: 768px) { .carousel-wrapper .carousel.block.with-video .carousel-main-wrapper { max-height: 280px; } } +.carousel-wrapper .carousel.block.auto-carousel .carousel-main-wrapper { + padding: 0; + height: 850px; + width: 100%; + overflow: hidden; + position: relative; +} + +.carousel-wrapper .carousel.block.auto-carousel .carousel-main-wrapper .controls { + /* width: 100%; */ + height: 100%; + top: 0; + left: 0; + display: flex; + align-items: center; + justify-content: space-between; + position: absolute; + z-index: 1; +} + +.carousel-wrapper .carousel.block.auto-carousel .carousel-main-wrapper .controls .auto-carousel-button { + width: 70px; + height: 55px; + border: none; + border-radius: 0; + background: rgba(0 0 0 / 60%) url("/icons/arrow-icon.svg"); + background-position: center center; + background-size: 20px 30px; + background-repeat: no-repeat; + cursor: pointer; + position: static; +} + +.carousel-wrapper .carousel.block.auto-carousel .carousel-main-wrapper .controls .auto-carousel-button.hidden { + width: 0; +} + +.carousel-wrapper .carousel.block.auto-carousel .carousel-main-wrapper .controls .auto-carousel-button.left-button { + transform: rotate(180deg); +} + +.carousel-wrapper .carousel.block.auto-carousel .carousel-main-wrapper .carousel-inner-wrapper { + height: 100%; +} + +.carousel-wrapper .carousel.block.auto-carousel .carousel-main-wrapper .carousel-inner-wrapper .carousel-frame { + height: 100%; + width: 100%; + display: flex; + transition: all 0.25s ease 0s; + gap: 0; +} + +.carousel-wrapper .carousel.block.auto-carousel .carousel-main-wrapper.grabbed .carousel-inner-wrapper .carousel-frame { + transition: none; +} + +.carousel-wrapper + .carousel.block.auto-carousel + .carousel-main-wrapper + .carousel-inner-wrapper + .carousel-frame + .image-wrapper { + flex-shrink: 0; + width: 100%; + height: 100%; + background-color: #ededed; +} + +.carousel-wrapper + .carousel.block.auto-carousel + .carousel-main-wrapper + .carousel-inner-wrapper + .carousel-frame + .image-wrapper + picture, +.carousel-wrapper + .carousel.block.auto-carousel + .carousel-main-wrapper + .carousel-inner-wrapper + .carousel-frame + .image-wrapper + img { + width: 100%; + height: 100%; + object-fit: contain; + object-position: center center; + position: static; +} diff --git a/blocks/carousel/carousel.js b/blocks/carousel/carousel.js index 351380d4..620cd9f3 100644 --- a/blocks/carousel/carousel.js +++ b/blocks/carousel/carousel.js @@ -1,52 +1,295 @@ -import { createOptimizedPicture } from '../../scripts/lib-franklin.js'; -import { - getBlockId, - parseFragment, - removeEmptyElements, - render, -} from '../../scripts/scripts.js'; +import { createOptimizedPicture } from "../../scripts/lib-franklin.js"; +import { getBlockId, parseFragment, removeEmptyElements, render } from "../../scripts/scripts.js"; + +const placeholderHtml = (isLarge) => + `
`; + +const enableCarouselFunctionality = (template, { isWedges, isLarge, isAutoCarousel }) => { + // initialize variables & functions required for carousel features + const carouselWrapper = template.querySelector(".carousel-main-wrapper"); + const carouselFrame = template.querySelector(".carousel-frame"); + const carouselCardLinks = carouselFrame.children; + const rightButton = template.querySelector(".controls .right-button"); + const leftButton = template.querySelector(".controls .left-button"); + let pressed = false; + let x = 0; + let maxScroll = 1440; + + let gapOffset = 27; + const updateGapOffset = () => { + if (isAutoCarousel) { + gapOffset = 0; + return; + } + if (!isWedges) { + gapOffset = isLarge ? 13 : 27; + return; + } + if (window.innerWidth <= 1280) { + gapOffset = 10.5; + } else { + gapOffset = 40; + } + }; + updateGapOffset(); -const placeholderHtml = (isLarge) => `