From a26ae6dcb2e8ebeef24fabd726647712df43480e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Drago=C8=99-Cristian=20Bute?= <44490413+dnbute@users.noreply.github.com> Date: Fri, 29 Sep 2023 09:54:39 +0300 Subject: [PATCH] Added network-item video support (#76) * Added network-item video support * Renamed dollar variables * Updated authoring experience --------- Co-authored-by: Dragos Cristian Bute --- .../hero-horizontal-tabs.css | 6 +- .../hero-horizontal-tabs.js | 26 ++--- blocks/network-item/network-item.css | 37 +++++- blocks/network-item/network-item.js | 109 +++++++++++------- 4 files changed, 122 insertions(+), 56 deletions(-) diff --git a/blocks/hero-horizontal-tabs/hero-horizontal-tabs.css b/blocks/hero-horizontal-tabs/hero-horizontal-tabs.css index c05d589e..93058c57 100644 --- a/blocks/hero-horizontal-tabs/hero-horizontal-tabs.css +++ b/blocks/hero-horizontal-tabs/hero-horizontal-tabs.css @@ -30,10 +30,14 @@ main .hero-horizontal-tabs.block { margin-bottom: 5rem; } -main div.tab-item.hidden { +main div.tab-item { display: none; } +main div.tab-item.active { + display: block; +} + main .hero-horiz-tabs-text { color: var(--muted-text); padding-top: 26px; diff --git a/blocks/hero-horizontal-tabs/hero-horizontal-tabs.js b/blocks/hero-horizontal-tabs/hero-horizontal-tabs.js index f7d720f4..1787a9da 100644 --- a/blocks/hero-horizontal-tabs/hero-horizontal-tabs.js +++ b/blocks/hero-horizontal-tabs/hero-horizontal-tabs.js @@ -22,7 +22,7 @@ export function createTabs(block, text) { return { title, name, - $tab: li, + tabButton: li, }; }); @@ -58,13 +58,12 @@ export function createTabs(block, text) { const tabDiv = document.createElement('div'); tabDiv.classList.add('tab-item'); tabDiv.append(...tabContent.children); - tabDiv.classList.add('hidden'); sectionWrapper.append(tabDiv); container.insertBefore(sectionWrapper, wrapper); // remove it from the dom tabContent.remove(); - tab.$content = tabDiv; + tab.content = tabDiv; } }); return tabs; @@ -96,29 +95,28 @@ export default function decorate(block) { tabs.forEach((tab, index) => { const button = document.createElement('button'); - const { $tab, title, name } = tab; + const { tabButton, title, name } = tab; button.textContent = title.split(','); button.classList.add('tab'); - $tab.replaceChildren(button); + tabButton.replaceChildren(button); - $tab.addEventListener('click', () => { + tabButton.addEventListener('click', () => { const activeButton = block.querySelector('button.active'); - if (activeButton !== $tab) { + if (activeButton !== tabButton) { activeButton.classList.remove('active'); // remove active class from parent li activeButton.parentElement.classList.remove('active'); - button.classList.add('active'); // add active class to parent li - $tab.classList.add('active'); + tabButton.classList.add('active'); tabs.forEach((t) => { if (name === t.name) { - t.$content.classList.remove('hidden'); + t.content.classList.add('active'); } else { - t.$content.classList.add('hidden'); + t.content.classList.remove('active'); } }); } @@ -127,8 +125,10 @@ export default function decorate(block) { if (index === 0) { button.classList.add('active'); // add active class to parent li - $tab.classList.add('active'); - if (tab.$content) tab.$content.classList.remove('hidden'); + tabButton.classList.add('active'); + if (tab.content) { + tab.content.classList.add('active'); + } } }); diff --git a/blocks/network-item/network-item.css b/blocks/network-item/network-item.css index 796a6cbd..346498fd 100644 --- a/blocks/network-item/network-item.css +++ b/blocks/network-item/network-item.css @@ -96,6 +96,10 @@ color: var(--living-environment-green); } +.network-item .tags div.gray { + color: var(--gray); +} + .network-item .tags div.green::before { background-color: var(--living-environment-green); } @@ -112,10 +116,33 @@ background-color: var(--health-beauty-orange); } +.network-item .tags div.gray::before { + background-color: var(--gray); +} + .network-item .tags div:last-child { margin-right: 0; } +.network-item.video div.network-item-img { + position:relative; +} + +div.network-item.video div.network-item-img a::after { + content: ''; + position: absolute; + top: 48%; + left: 50%; + transform: translate(-50%, -50%); + height: 5.25rem; + width: 5.25rem; + background-image: url("../../icons/play.svg"); + background-repeat: no-repeat; + background-size: cover; + background-position: center; + min-width: auto; +} + div.network-item div.content-wrapper div.network-item-img { max-width: 100%; width: 340px; @@ -123,8 +150,10 @@ div.network-item div.content-wrapper div.network-item-img { margin-bottom: 1rem; } -.network-item div.our-hr a::after, -.network-item.image div.text-content-wrapper div.website a::after { +/* stylelint-disable no-descending-specificity */ +div.network-item div.our-hr a::after, +div.network-item.image div.text-content-wrapper div.website a::after, +div.network-item.video div.text-content-wrapper div.website a::after{ content: url("../../icons/angle-right-blue.svg"); position:relative; left: 0.3rem; @@ -147,4 +176,8 @@ div.network-item div.content-wrapper div.network-item-img { width: 100%; height: auto; } + + div.network-item.video div.network-item-img a::after { + top: 50%; + } } \ No newline at end of file diff --git a/blocks/network-item/network-item.js b/blocks/network-item/network-item.js index 814189c3..68fbab45 100644 --- a/blocks/network-item/network-item.js +++ b/blocks/network-item/network-item.js @@ -13,7 +13,7 @@ import { readBlockConfig } from '../../scripts/lib-franklin.js'; import { getNamedValueFromTable } from '../../scripts/scripts.js'; -function addCareerTagColor(tagDiv) { +function addTagColors(tagDiv) { if (tagDiv.innerText === 'Oral Care' || tagDiv.innerText === 'Mouth & Body') { tagDiv.classList.add('blue'); } else if (tagDiv.innerText === 'Safety & Mobility') { @@ -22,22 +22,26 @@ function addCareerTagColor(tagDiv) { tagDiv.classList.add('green'); } else if (tagDiv.innerText === 'Health & Beauty') { tagDiv.classList.add('orange'); + } else { + tagDiv.classList.add('gray'); } } function createTagsDiv(tags) { + if (!tags) return null; const tagsDiv = document.createElement('div'); tagsDiv.classList.add('tags'); tags.forEach((tag) => { const tagDiv = document.createElement('div'); tagDiv.innerText = tag.trim(); - addCareerTagColor(tagDiv); + addTagColors(tagDiv); tagsDiv.append(tagDiv); }); return tagsDiv; } function createWebsiteDiv(website) { + if (!website) return null; const websiteDiv = document.createElement('div'); websiteDiv.classList.add('website'); const websiteA = document.createElement('a'); @@ -67,6 +71,7 @@ function createOurHrDiv() { } function createRecruitingLinkDiv(recruitingLink, recruitingLinkText) { + if (!recruitingLink) return null; const recruitingLinkDiv = document.createElement('div'); recruitingLinkDiv.classList.add('recruiting-link'); const recruitingLinkA = document.createElement('a'); @@ -94,51 +99,72 @@ function getText(block) { return div; } -export default function decorate(block) { - const blockCfg = readBlockConfig(block); - const image = getImage(block); - const text = getText(block); - const hasImage = !!blockCfg.image; - - let { title } = blockCfg; +function createTitle(title) { + const titleH3 = document.createElement('h3'); + titleH3.classList.add('title'); + titleH3.innerText = title; + return titleH3; +} - if (Array.isArray(blockCfg.title)) { - title = title.join('\n'); +function getVideo(block, videoImage) { + const video = getNamedValueFromTable(block, 'Video'); + const div = document.createElement('div'); + div.classList.add('network-item-img'); + div.append(video.children[0]); + + if (videoImage) { + const picture = videoImage.querySelector('picture'); + picture.classList.add('network-item-img', 'video-image'); + const a = div.querySelector('a'); + a.replaceChildren(picture); + a.classList.remove('button'); } - const tags = [...blockCfg.tags.split(',')]; + return div; +} +function getVideoImage(block) { + const div = getNamedValueFromTable(block, 'Video-image'); + if (!div) return null; + div.classList.add('network-item-img'); + return div; +} + +export default function decorate(block) { + const blockCfg = readBlockConfig(block); + const hasMultimediaContent = !!blockCfg.image || !!blockCfg.video; + const hasVideo = block.classList.contains('video'); + const hasVideoImage = hasVideo && !!blockCfg['video-image']; + + const image = blockCfg.image ? getImage(block) : null; + const text = blockCfg.content ? getText(block) : null; + const videoImage = hasVideoImage ? getVideoImage(block) : null; + const video = hasVideo ? getVideo(block, videoImage) : null; + const title = Array.isArray(blockCfg.title) ? blockCfg.title.join('\n') : blockCfg.title; + const tags = blockCfg.tags ? [...blockCfg.tags.split(',')] : null; const recruitingLink = blockCfg['recruiting-link']; const recruitingLinkText = blockCfg['recruiting-link-text']; + /* eslint-disable-next-line prefer-destructuring */ + const website = blockCfg.website; - const { website } = blockCfg; - let websiteDiv; - let recruitingLinkDiv; - - const titleDiv = document.createElement('h3'); - titleDiv.classList.add('title'); - titleDiv.innerText = title; - + const websiteDiv = createWebsiteDiv(website); + const recruitingLinkDiv = createRecruitingLinkDiv(recruitingLink, recruitingLinkText); + const titleH3 = createTitle(title); const tagsDiv = createTagsDiv(tags); + const ourHrDiv = createOurHrDiv(); + const careerOpportunitiesDiv = createCareerOpportunitiesDiv(); - if (recruitingLink) { - recruitingLinkDiv = createRecruitingLinkDiv(recruitingLink, recruitingLinkText); - } + block.replaceChildren(titleH3); - if (website) { - websiteDiv = createWebsiteDiv(website); + if (tags) { + block.append(tagsDiv); } - const ourHrDiv = createOurHrDiv(); - - block.replaceChildren(titleDiv, tagsDiv); - if (website) { block.append(websiteDiv); } - const careerOpportunitiesDiv = createCareerOpportunitiesDiv(); - if (!hasImage) { + if (!hasMultimediaContent) { block.append(careerOpportunitiesDiv); } @@ -146,26 +172,29 @@ export default function decorate(block) { block.append(recruitingLinkDiv); } - if (!hasImage) { + if (!hasMultimediaContent) { block.append(ourHrDiv); } - if (hasImage && image) { + if (hasMultimediaContent) { const contentWrapper = document.createElement('div'); const textContentWrapper = document.createElement('div'); + textContentWrapper.classList.add('text-content-wrapper'); + textContentWrapper.append(text); if (website) { - textContentWrapper.append(text, websiteDiv); - } else { - textContentWrapper.append(text); + textContentWrapper.append(websiteDiv); } contentWrapper.classList.add('content-wrapper'); - contentWrapper.append(image, textContentWrapper); - - block.replaceChildren(titleDiv, tagsDiv, contentWrapper); + if (image) { + contentWrapper.append(image); + } else if (video) { + contentWrapper.append(video); + } + contentWrapper.append(textContentWrapper); + block.append(contentWrapper); } - return block; }