[MWPW-160630] - Added new Article template UI

blocks/article-hero-marquee/article-hero-marquee.css

@@ -0,0 +1,66 @@
+.marquee.article-hero-banner {
+  position: relative;
+}
+
+.marquee.split.article-hero-banner {
+  flex-direction: column-reverse;
+}
+
+.marquee.split.article-hero-banner .asset {
+  position: relative;
+  z-index: 1;
+  aspect-ratio: 16 / 9;
+}
+
+.article-hero-banner::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: max(56.25%, calc(100% - 360px));
+  z-index: -1;
+  background-image: var(--bg-img);
+  background-size: cover;
+  background-repeat: no-repeat;
+}
+
+main .article-hero-category-link {
+  display: inline-block;
+  color: var(--color-white);
+}
+
+main .article-hero-banner.light .article-hero-category-link {
+  color: var(--text-color);
+}
+
+main .article-hero-banner .text p {
+  display: none;
+}
+
+main .article-hero-banner.light .asset {
+  background: var(--color-white);
+}
+
+main .article-hero-banner.dark .asset {
+  background: var(--color-black);
+}
+
+@media (min-width: 600px) {
+  .article-hero-banner::before {
+    width: 50%;
+    height: 100%;
+  }
+
+  .marquee.split.article-hero-banner .asset {
+    aspect-ratio: auto;
+  }
+
+  main .article-hero-banner .text p {
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+} 

blocks/article-hero-marquee/article-hero-marquee.js

@@ -0,0 +1,143 @@
+import { getLibs, buildBlock, hasDarkOrLightClass, getCircleGradientValue, hexToRgb, getImageCaption } from '../../scripts/utils.js';
+
+function getBackgroundConfig(block) {
+  const backgroundConfig = {
+    backgroundEl: '<p> transparent </p>',
+    addGradientClass: true,
+    customGradients: false,
+    customImage: false,
+  };
+
+  const customBackgroundImage = block.querySelector('img');
+  const backgroundTextContent = block.textContent?.trim();
+  const circleGradients = getCircleGradientValue(backgroundTextContent);
+
+  if (customBackgroundImage) {
+    backgroundConfig.customImage = customBackgroundImage;
+    backgroundConfig.addGradientClass = false;
+    return backgroundConfig;
+  }
+
+  if (circleGradients) {
+    const gradient1 = hexToRgb(circleGradients[0]);
+    const gradient2 = hexToRgb(circleGradients[1]);
+    backgroundConfig.customGradients = [gradient1, gradient2];
+    return backgroundConfig;
+  }
+
+  if (backgroundTextContent.length > 0) {
+    backgroundConfig.backgroundEl = `<p> ${backgroundTextContent} </p>`;
+    backgroundConfig.addGradientClass = false;
+    return backgroundConfig;
+  }
+
+  return backgroundConfig;
+}
+
+async function loadAndExposeMarqueeBlock() {
+  const miloLibs = getLibs();
+  const [{ default: initMiloMarqueeBlock }, { loadStyle }] = await Promise.all([
+    import(`${miloLibs}/blocks/marquee/marquee.js`),
+    import(`${miloLibs}/utils/utils.js`)
+  ]);
+  loadStyle(`${miloLibs}/blocks/marquee/marquee.css`);
+  window.initMarqueeBlock = initMiloMarqueeBlock;
+}
+
+function getFeaturedImage(block) {
+  const pictures = Array.from(document.querySelectorAll('a[href*=".mp4"], picture'));
+  const backgroundImage = block.querySelector('img');
+  if (!backgroundImage) return pictures[0];
+
+  const picture = Array.from(pictures).find(picture => !picture.closest('.article-hero-marquee'));
+
+  return picture || null;
+}
+
+export default async function init(block) { 
+  const miloLibs = getLibs();
+  const [{ getMetadata }, { loadTaxonomy, getLinkForTopic, getTaxonomyModule }] = await Promise.all([
+    import(`${miloLibs}/utils/utils.js`),
+    import(`${miloLibs}/blocks/article-feed/article-helpers.js`),
+    loadAndExposeMarqueeBlock()
+  ]);
+
+  // remove article hero marquee if it's not in sidebar layout, as it'll have duplicated content information with the original full-width article header
+  const isSidebarLayout = getMetadata('page-template') === 'sidebar';
+  if (!isSidebarLayout) {
+    block.remove();
+    return;
+  }
+
+  if (!getTaxonomyModule()) {
+    await loadTaxonomy();
+  }
+
+  // get article category link, title, description + image
+  const div = document.createElement('div');
+  div.classList.add('section');
+  const main = document.querySelector('main');
+
+  const tag = getMetadata('article:tag');
+  const category = tag || 'News';
+  const categoryTag = getLinkForTopic(category);
+
+  const h1 = document.querySelector('h1');
+  const description = getMetadata('description');
+  const picture = getFeaturedImage(block);
+  const caption = getImageCaption(picture);
+  const figure = document.createElement('div');
+  figure.append(picture, caption);
+
+  const tagEl = document.createElement('p');
+  tagEl.textContent = category;
+
+  // get background information
+  const { backgroundEl, addGradientClass, customGradients, customImage } = getBackgroundConfig(block);
+
+  const marqueeEl = buildBlock('marquee', [
+    [ backgroundEl ],
+    [
+      {
+        elems: [
+          categoryTag,
+          h1,
+          `<p>${description}</p>`,
+        ],
+      },
+      picture,
+    ],
+  ]);
+  marqueeEl.classList.add('split', 'medium', 'article-hero-banner');
+  window.initMarqueeBlock(marqueeEl);
+
+  const categoryLink = marqueeEl.querySelector('a');
+  categoryLink.classList.add('article-hero-category-link');
+
+  if (addGradientClass) marqueeEl.classList.add('marquee-circle-gradient');
+  if (customImage) {
+    marqueeEl.style.setProperty('--bg-img', `url(${customImage.src})`);
+  }
+
+  if (customGradients?.length == 2) {
+    marqueeEl.style.setProperty('--bg-circle-gradient-1', customGradients[0]);
+    marqueeEl.style.setProperty('--bg-circle-gradient-2', customGradients[1]);
+  }
+
+  if (!hasDarkOrLightClass(block)) marqueeEl.classList.add('light');  
+
+  // allow user to pass in classes from block to marquee
+  if (block.classList.length > 1) {
+    [...block.classList].forEach((className) => {
+      if (className != 'article-hero-marquee') {
+        marqueeEl.classList.add(className);
+      }
+    })
+  }
+
+  div.append(marqueeEl);
+  main.prepend(div);
+
+  // remove block as it's used as an medium to pass through required information only
+  block.remove();  
+}