generated from pricefx/pricefx-eds-qa
-
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.
Sync main branch from pricefx-eds-qa, excluding fstab.yaml
- Loading branch information
Showing
7 changed files
with
286 additions
and
53 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,26 +1,117 @@ | ||
| /* GENERAL STYLES */ | ||
| .iframe.block { | ||
| margin: 20px auto; | ||
| text-align: center; | ||
| margin: 20px auto; | ||
| text-align: center; | ||
| } | ||
|
|
||
| .iframe.container { | ||
| height: 100%; | ||
| width: 100%; | ||
| overflow: hidden; | ||
| position: relative; | ||
| display: inline-block; | ||
| .badge__wrapper { | ||
| display: flex; | ||
| flex-wrap: wrap; | ||
| justify-content: center; | ||
| margin: 0 auto -14px; | ||
| max-width: 880px; | ||
| position: relative; | ||
| width: 100%; | ||
| z-index: 1; | ||
| } | ||
|
|
||
| .iframe.noheight { | ||
| height: 0; | ||
| padding-bottom: 56.25%; | ||
| .badge__container { | ||
| margin: 0 3px; | ||
| max-width: 93px; | ||
| width: 100%; | ||
| } | ||
|
|
||
| .iframe iframe { | ||
| border: none; | ||
| height: 100%; | ||
| left: 0; | ||
| position: absolute; | ||
| top: 0; | ||
| width: 100%; | ||
| .iframe__wrapper { | ||
| display: flex; | ||
| justify-content: center; | ||
| margin: 0 auto; | ||
| max-width: 1262px; | ||
| padding: 36px 0 0 36px; | ||
| position: relative; | ||
| width: 100%; | ||
| } | ||
|
|
||
| .iframe__wrapper::after { | ||
| background: var(--c-dark); | ||
| content: ''; | ||
| height: 100%; | ||
| left: 0; | ||
| opacity: 0.1511; | ||
| position: absolute; | ||
| top: 0; | ||
| width: 100%; | ||
| z-index: 0; | ||
| } | ||
|
|
||
| .frame__wrapper--with-badge.iframe__wrapper::after { | ||
| height: calc(100% + 58px); | ||
| top: -58px; | ||
| } | ||
|
|
||
| .iframe__container { | ||
| padding: 0 36px 36px 0; | ||
| position: relative; | ||
| max-width: 636px; | ||
| width: 100%; | ||
| z-index: 1; | ||
| } | ||
|
|
||
| .iframe__container iframe { | ||
| border: none; | ||
| display: block; | ||
| min-height: 600px; | ||
| height: auto; | ||
| overflow: hidden; | ||
| width: 100%; | ||
| } | ||
|
|
||
| .iframe__left-column, | ||
| .iframe__wrapper--three-iframes .iframe__left-column .iframe__container { | ||
| max-width: 716px; | ||
| width: 100%; | ||
| } | ||
|
|
||
| .iframe__wrapper--three-iframes .iframe__left-column .iframe__container iframe { | ||
| min-height: 334px; | ||
| } | ||
|
|
||
| .iframe__right-column, | ||
| .iframe__wrapper--three-iframes .iframe__right-column .iframe__container { | ||
| max-width: 510px; | ||
| width: 100%; | ||
| } | ||
|
|
||
| .iframe__wrapper--three-iframes .iframe__right-column .iframe__container iframe { | ||
| min-height: 704px; | ||
| } | ||
|
|
||
| /* RESPONSIVE STYLES */ | ||
| @media (width <= 850px) { | ||
| .iframe__wrapper { | ||
| align-items: center; | ||
| flex-direction: column; | ||
| padding: 36px 36px 0; | ||
| } | ||
|
|
||
| .iframe__container { | ||
| max-width: none !important; | ||
| padding: 0 0 36px; | ||
| } | ||
|
|
||
| .iframe__left-column, | ||
| .iframe__wrapper--three-iframes .iframe__left-column .iframe__container, | ||
| .iframe__right-column, | ||
| .iframe__wrapper--three-iframes .iframe__right-column .iframe__container { | ||
| max-width: none !important; | ||
| } | ||
| } | ||
|
|
||
| @media (width <= 560px) { | ||
| .iframe__wrapper { | ||
| padding: var(--spacing-xsmall) var(--spacing-xsmall) 0; | ||
| } | ||
|
|
||
| .iframe__container { | ||
| padding: 0 0 var(--spacing-xsmall); | ||
| } | ||
| } |
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 |
|---|---|---|
| @@ -1,26 +1,137 @@ | ||
| // Render badges based on authored field | ||
| const renderBadges = (badges) => { | ||
| const fragment = document.createDocumentFragment(); | ||
| badges.forEach((badge) => { | ||
| const badgeContainer = document.createElement('div'); | ||
| badgeContainer.classList.add('badge__container'); | ||
| const badgeLink = document.createElement('a'); | ||
| badgeLink.title = badge.textContent; | ||
| badgeLink.href = 'https://www.g2.com/products/pricefx/reviews?utm_source=rewards-badge'; | ||
| const badgeImg = document.createElement('img'); | ||
| badgeImg.decoding = 'async'; | ||
| badgeImg.alt = badge.textContent; | ||
| badgeImg.dataset.src = badge.href; | ||
| badgeImg.src = badge.href; | ||
| badgeImg.loading = 'lazy'; // Add lazy loading for images | ||
| badgeImg.classList.add('badge__icon'); | ||
| badgeLink.appendChild(badgeImg); | ||
| badgeContainer.appendChild(badgeLink); | ||
| fragment.appendChild(badgeContainer); | ||
| }); | ||
| return fragment; | ||
| }; | ||
|
|
||
| // Render iframes based on authored field | ||
| const renderIframes = (iframes, height, width) => { | ||
| const fragment = document.createDocumentFragment(); | ||
| if (iframes.length === 3) { | ||
| // Creating left column and children elements | ||
| const leftColumn = document.createElement('div'); | ||
| leftColumn.classList.add('iframe__left-column'); | ||
| if (width) { | ||
| leftColumn.setAttribute('style', `max-width:${width + 36}px;`); | ||
| } | ||
| const iframeContainerOne = document.createElement('div'); | ||
| iframeContainerOne.classList.add('iframe__container'); | ||
| if (width) { | ||
| iframeContainerOne.setAttribute('style', `max-width:${width + 36}px;`); | ||
| } | ||
| const iframeElOne = document.createElement('iframe'); | ||
| iframeElOne.src = iframes[0].textContent.trim(); | ||
| iframeElOne.setAttribute('frameborder', '0'); | ||
| if (height) { | ||
| iframeElOne.setAttribute('style', `min-height:${height}px;`); | ||
| } | ||
| iframeContainerOne.appendChild(iframeElOne); | ||
| leftColumn.appendChild(iframeContainerOne); | ||
| const iframeContainerTwo = document.createElement('div'); | ||
| iframeContainerTwo.classList.add('iframe__container'); | ||
| if (width) { | ||
| iframeContainerTwo.setAttribute('style', `max-width:${width + 36}px;`); | ||
| } | ||
| const iframeElTwo = document.createElement('iframe'); | ||
| iframeElTwo.src = iframes[1].textContent.trim(); | ||
| iframeElTwo.setAttribute('frameborder', '0'); | ||
| if (height) { | ||
| iframeElTwo.setAttribute('style', `min-height:${height}px;`); | ||
| } | ||
| iframeContainerTwo.appendChild(iframeElTwo); | ||
| leftColumn.appendChild(iframeContainerTwo); | ||
| fragment.appendChild(leftColumn); | ||
|
|
||
| // Creating right column and children elements | ||
| const rightColumn = document.createElement('div'); | ||
| rightColumn.classList.add('iframe__right-column'); | ||
| if (width) { | ||
| rightColumn.setAttribute('style', `max-width:${width + 36}px;`); | ||
| } | ||
| const iframeContainerThree = document.createElement('div'); | ||
| iframeContainerThree.classList.add('iframe__container'); | ||
| if (width) { | ||
| iframeContainerThree.setAttribute('style', `max-width:${width + 36}px;`); | ||
| } | ||
| const iframeElThree = document.createElement('iframe'); | ||
| iframeElThree.src = iframes[2].textContent.trim(); | ||
| iframeElThree.setAttribute('frameborder', '0'); | ||
| if (height) { | ||
| iframeElThree.setAttribute('style', `min-height:${height * 2 + 36}px;`); | ||
| } | ||
| iframeContainerThree.appendChild(iframeElThree); | ||
| rightColumn.appendChild(iframeContainerThree); | ||
| fragment.appendChild(rightColumn); | ||
| } else { | ||
| iframes.forEach((iframe) => { | ||
| const iframeSource = iframe.textContent.trim(); | ||
| const iframeContainer = document.createElement('div'); | ||
| iframeContainer.classList.add('iframe__container'); | ||
| if (width) { | ||
| iframeContainer.setAttribute('style', `max-width:${width + 36}px;`); | ||
| } | ||
| const iframeEl = document.createElement('iframe'); | ||
| iframeEl.src = iframeSource; | ||
| iframeEl.setAttribute('frameborder', '0'); | ||
| if (height) { | ||
| iframeEl.setAttribute('style', `min-height:${height}px;`); | ||
| } | ||
| iframeContainer.appendChild(iframeEl); | ||
| fragment.appendChild(iframeContainer); | ||
| }); | ||
| } | ||
| return fragment; | ||
| }; | ||
|
|
||
| export default function decorate(block) { | ||
| const [urlElement, widthElement, heightElement] = block.children; | ||
| const [badgeLinks, iframeLinks, widthElement, heightElement] = block.children; | ||
| const badgeItems = badgeLinks.querySelectorAll('a'); | ||
| const iframeItems = iframeLinks.querySelectorAll('p'); | ||
| const height = Number(heightElement.textContent); | ||
| const width = Number(widthElement.textContent); | ||
| const url = new URL(urlElement.textContent); | ||
| const container = document.createElement('div'); | ||
| const iframe = document.createElement('iframe'); | ||
|
|
||
| block.textContent = ''; | ||
| container.classList.add('iframe', 'container'); | ||
| container.appendChild(iframe); | ||
| iframe.src = url.href; | ||
|
|
||
| if (height) { | ||
| container.classList.remove('noheight'); | ||
| container.style.height = `${height}px`; | ||
| } else { | ||
| container.classList.add('noheight'); | ||
| // Create badge wrapper element and render individual badges | ||
| if (badgeLinks.textContent.trim() !== '') { | ||
| const badgeWrapper = document.createElement('div'); | ||
| badgeWrapper.classList.add('badge__wrapper'); | ||
| badgeWrapper.append(renderBadges(badgeItems)); | ||
| block.append(badgeWrapper); | ||
| } | ||
|
|
||
| if (width) { | ||
| container.style.width = `${width}px`; | ||
| } | ||
| // Create iFrame wrapper element and render individual iFrames | ||
| if (iframeLinks.textContent.trim() !== '') { | ||
| const iframeWrapper = document.createElement('div'); | ||
| iframeWrapper.classList.add('iframe__wrapper'); | ||
|
|
||
| // Add custom class for 3 iframes | ||
| if (iframeItems.length === 3) { | ||
| iframeWrapper.classList.add('iframe__wrapper--three-iframes'); | ||
| } | ||
|
|
||
| block.appendChild(container); | ||
| // Add custom class if badges are present | ||
| if (badgeLinks.textContent.trim() !== '') { | ||
| iframeWrapper.classList.add('frame__wrapper--with-badge'); | ||
| } | ||
|
|
||
| iframeWrapper.append(renderIframes(iframeItems, height, width)); | ||
| block.append(iframeWrapper); | ||
| } | ||
| } |
Oops, something went wrong.