forked from hlxsites/danaher-ls-aem
-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #12 from hlxsites/main
Merge Staging into Prod
- Loading branch information
Showing
41 changed files
with
6,895 additions
and
617 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,88 @@ | ||
| .product-hero-container { | ||
| @apply bg-gray-100 pt-6 pb-24; | ||
| } | ||
|
|
||
| .product-hero { | ||
| @apply p-4; | ||
| } | ||
|
|
||
| .product-hero .product-hero-content { | ||
| @apply grid md:grid-cols-12 lg:gap-16 md:gap-12 gap-2; | ||
| } | ||
|
|
||
| .product-hero .hero-default-content { | ||
| @apply md:col-span-6; | ||
| } | ||
|
|
||
| .product-hero .hero-default-content > div { | ||
| @apply w-full h-full text-center md:text-left text-gray-500; | ||
| } | ||
|
|
||
| .product-hero .hero-default-content > div .category-name { | ||
| @apply text-sm font-normal leading-5 text-danaherlightblue-500; | ||
| } | ||
|
|
||
| .product-hero .hero-default-content > div h1.title { | ||
| @apply mt-3 text-4xl font-extrabold leading-10 text-gray-900 mb-3; | ||
| } | ||
|
|
||
| .product-hero .hero-default-content > div h4 { | ||
| @apply font-bold text-gray-500; | ||
| } | ||
|
|
||
| .product-hero .hero-default-content > div ul, | ||
| .product-hero .hero-default-content > div p { | ||
| @apply text-base; | ||
| } | ||
|
|
||
| .product-hero .hero-default-content > div ul { | ||
| @apply list-disc ml-12 mt-3; | ||
| } | ||
|
|
||
| .product-hero .hero-default-content > div ul li { | ||
| @apply mb-2.5; | ||
| } | ||
|
|
||
| .product-hero .hero-default-content > div .basic-info { | ||
| @apply flex justify-between mt-8 text-gray-500; | ||
| } | ||
|
|
||
| .product-hero .hero-default-content > div .basic-info div > p:nth-child(1) { | ||
| @apply text-base font-bold; | ||
| } | ||
|
|
||
| .product-hero .hero-default-content > div .basic-info a { | ||
| @apply border-b-2 border-danaherlightblue-500; | ||
| } | ||
|
|
||
| .product-hero .vertical-gallery-container { | ||
| @apply md:col-span-5 order-first; | ||
| } | ||
|
|
||
| .product-hero .vertical-gallery-container > div { | ||
| @apply grid grid-rows-1 gap-2.5 bg-transparent overflow-hidden md:grid-cols-4; | ||
| } | ||
|
|
||
| .product-hero .vertical-gallery-container > div div:nth-child(1) { | ||
| @apply relative col-span-3 bg-white; | ||
| } | ||
|
|
||
| .product-hero .vertical-gallery-container > div div:nth-child(1) img { | ||
| @apply w-full h-full max-h-[380px] max-h-96 rounded shadow object-contain transition duration-700; | ||
| } | ||
|
|
||
| .product-hero .vertical-gallery-container > div > div:not(:nth-child(1)) { | ||
| @apply flex flex-row md:flex-col col-span-1 gap-2 md:order-first overflow-auto bg-transparent scroll-pl-6 snap-x; | ||
| } | ||
|
|
||
| .product-hero .vertical-gallery-container .view-more { | ||
| @apply flex flex-col p-2 my-auto bg-opacity-50 text-sm text-blue-500 font-semibold bg-white rounded text-center cursor-pointer; | ||
| } | ||
|
|
||
| .product-hero .vertical-gallery-container > div > div:not(:nth-child(1)) img { | ||
| @apply w-32 h-20 object-cover rounded cursor-pointer transition duration-500 hover:border hover:border-lightblue-500 hover:scale-95; | ||
| } | ||
|
|
||
| .product-hero .vertical-gallery-container > div div:not(:nth-child(1)) img.active { | ||
| @apply border border-4 border-lightblue-500 opacity-80 scale-95; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,81 @@ | ||
| import { | ||
| a, div, h1, img, p, span, | ||
| } from '../../scripts/dom-builder.js'; | ||
| import { decorateModals, getProductResponse } from '../../scripts/scripts.js'; | ||
|
|
||
| function showImage(e) { | ||
| const selectedImage = document.querySelector('.image-content'); | ||
| if (e.target) { | ||
| const currentActive = e.target.parentElement.querySelector('.active'); | ||
| if (currentActive) currentActive.classList.toggle('active'); | ||
| if (e.target.src !== selectedImage.src) { | ||
| selectedImage.src = e.target.src; | ||
| e.target.classList.toggle('active'); | ||
| } | ||
| } | ||
| } | ||
|
|
||
| function loadMore() { | ||
| const allImageContainer = document.querySelector('.vertical-gallery-container div div img.active').parentElement; | ||
| const shownImage = allImageContainer.querySelectorAll('img:not(.hidden)'); | ||
| const notShownImage = allImageContainer.querySelectorAll('img.hidden'); | ||
| if (shownImage.length > 0) { | ||
| if (shownImage[shownImage.length - 1].nextElementSibling && !shownImage[shownImage.length - 1].nextElementSibling.className.includes('view-more')) { | ||
| shownImage[0].classList.add('hidden'); | ||
| shownImage[shownImage.length - 1].nextElementSibling.classList.remove('hidden'); | ||
| } else { | ||
| // REMOVE THE LASTS FIRST-INDEXED NON-HIDDEN VALUE | ||
| const firstNonActive = allImageContainer.querySelector('.hidden'); | ||
| firstNonActive.classList.remove('hidden'); | ||
| // HIDE THE LAST-HIDDEN-ELEMENT'S NEXT-SIBLING | ||
| notShownImage[notShownImage.length - 1].nextElementSibling.classList.add('hidden'); | ||
| } | ||
| } | ||
| } | ||
|
|
||
| function imageSlider(allImages) { | ||
| const slideContent = div(img({ src: allImages[0], class: 'image-content' })); | ||
| const verticalSlides = div(); | ||
| allImages.map((image, index) => { | ||
| const imageElement = img({ src: image }); | ||
| let imageClass = (index === 0) ? 'active' : ''; | ||
| if (index > 2) imageClass += ' hidden'; | ||
| if (imageClass !== '') imageElement.className = imageClass; | ||
| imageElement.addEventListener('click', showImage); | ||
| verticalSlides.append(imageElement); | ||
| return image; | ||
| }); | ||
| const showMore = div({ class: 'view-more' }, 'View More ->'); | ||
| showMore.addEventListener('click', loadMore); | ||
| verticalSlides.append(showMore); | ||
| return div({ class: 'vertical-gallery-container' }, div(slideContent, verticalSlides)); | ||
| } | ||
|
|
||
| export default async function decorate(block) { | ||
| const response = getProductResponse(); | ||
| if (response?.length > 0) { | ||
| const allImages = response[0]?.raw.images; | ||
| const verticalImageGallery = imageSlider(allImages); | ||
| const defaultContent = div(); | ||
| defaultContent.innerHTML = response[0]?.raw.richdescription; | ||
| defaultContent.prepend(h1({ class: 'title' }, response[0]?.Title)); | ||
| defaultContent.prepend(span({ class: 'category-name' }, response[0]?.raw.defaultcategoryname)); | ||
| const rfqEl = block.querySelector('div')?.firstElementChild; | ||
| if (rfqEl && rfqEl.textContent && rfqEl.textContent === 'Request for Quote') { | ||
| rfqEl.classList.add(...'btn-outline-trending-brand text-lg rounded-full px-4 py-2 !no-underline'.split(' ')); | ||
| const rfqParent = p({ class: 'show-modal-btn w-[36%] pt-6 cursor-pointer' }, rfqEl); | ||
| defaultContent.append(rfqParent); | ||
| } | ||
| defaultContent.append( | ||
| div( | ||
| { class: 'basic-info' }, | ||
| div(p('Brand'), p(response[0]?.raw.opco)), | ||
| div(p('For additional information'), a({ href: `${response[0]?.raw.externallink}?utm_source=dhls_website`, target: '_blank' }, `Visit ${response[0]?.raw.opco}`)), | ||
| ), | ||
| ); | ||
| block.parentElement.classList.add(...'stretch'.split(' ')); | ||
| block.innerHTML = ''; | ||
| block.append(div({ class: 'product-hero-content' }, div({ class: 'hero-default-content' }, defaultContent), verticalImageGallery)); | ||
| decorateModals(block); | ||
| } | ||
| } |
Oops, something went wrong.