Added network-item video support

hlxsites · Sep 28, 2023 · 53c5884 · 53c5884
1 parent 0b374d0
commit 53c5884
Show file tree

Hide file tree

Showing 4 changed files with 115 additions and 48 deletions.
diff --git 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
@@ -58,7 +58,6 @@ 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);
 
@@ -109,16 +108,15 @@ export default function decorate(block) {
         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');
 
         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');
           }
         });
       }
@@ -128,7 +126,9 @@ export default function decorate(block) {
       button.classList.add('active');
       // add active class to parent li
       $tab.classList.add('active');
-      if (tab.$content) tab.$content.classList.remove('hidden');
+      if (tab.$content) {
+        tab.$content.classList.add('active');
+      }
     }
   });
 

diff --git 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,19 +116,44 @@
     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;
     margin-right: 1rem;
     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%;
+    }
 }
diff --git 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,78 +99,103 @@ 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 extractVideoFromContent(content, videoImage) {
+  const video = content.querySelector('p.button-container > a').parentNode;
+  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(',')];
+  content.removeChild(video);
+  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 || block.classList.contains('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 = (!!text && hasVideo) ? extractVideoFromContent(text, 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);
   }
 
   if (recruitingLink) {
     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;
 }