Merge pull request #161 from hlxsites/ops

Ops Experience

blocks/category/category.js

@@ -1,6 +1,7 @@
-import { parseFragment, render } from '../../scripts/scripts.js';
-import { showRoute } from '../intro/utils.js';
-import { collapseSection, expandSection } from './utils.js';
+import {
+  PATH_PREFIX, collapseSection,
+  parseFragment, render, showRoute,
+} from '../../scripts/scripts.js';
 
 const TEMPLATE_BUTTON = `
 <div slot="category-button" class="ops-accordion-item">
@@ -9,6 +10,14 @@ const TEMPLATE_BUTTON = `
     <slot name="teaser"></slot>
   </button>
   <slot name="details" class="accordion-details"></slot>
+  <div class="ops-accordion-item-toggle">
+    <span class="ops-accordion-item-toggle-expand">See more outcomes</span>
+    <span class="ops-accordion-item-toggle-close">Close outcomes</span>
+    <svg focusable="false" aria-label="Clear" class="icon icon-down-arrow" version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+      <title>Down Arrow</title>
+      <path d="M7.79 9.671c-0.867-0.894-2.276-0.894-3.144 0-0.862 0.889-0.862 2.327 0 3.217l8.717 8.988c1.455 1.5 3.817 1.5 5.272 0l8.717-8.988c0.862-0.889 0.862-2.327 0-3.217-0.867-0.894-2.276-0.894-3.144 0l-7.492 7.724c-0.393 0.405-1.043 0.405-1.436 0l-7.492-7.724z"></path>
+    </svg>
+  </div>
 </div>
 `;
 
@@ -21,6 +30,53 @@ const TEMPLATE = /* html */ `
 </div>
 `;
 
+const TEMPLATE_NAV = /* html */ `
+<div class="ops-category-nav">
+  <a href="" class="back ops-icon-button category-back">
+    <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" width="40" height="40" focusable="false"><path d="M9.408 0.837c-1.116 1.116-1.116 2.925 0 4.041l14.112 14.112c0.558 0.558 0.558 1.463 0 2.021l-14.112 14.112c-1.116 1.116-1.116 2.925 0 4.041s2.925 1.116 4.041 0l17.143-17.143c1.116-1.116 1.116-2.925 0-4.041l-17.143-17.143c-1.116-1.116-2.925-1.116-4.041 0z"></path></svg>
+  </a>
+  <div class="ops-category-nav-buttons">
+
+  </div>
+</div>
+`;
+
+const TEMPLATE_MOBILE_NAV = `
+<div class="ops-category-nav-mobile">
+    <div class="drawer"></div>
+    <button class="nav-label selected">
+    <span class="title">Secure the Infrastructure</span>
+    <svg focusable="false" aria-label="Clear" class="icon icon-down-arrow" version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+        <title>Down Arrow</title>
+        <path d="M7.79 9.671c-0.867-0.894-2.276-0.894-3.144 0-0.862 0.889-0.862 2.327 0 3.217l8.717 8.988c1.455 1.5 3.817 1.5 5.272 0l8.717-8.988c0.862-0.889 0.862-2.327 0-3.217-0.867-0.894-2.276-0.894-3.144 0l-7.492 7.724c-0.393 0.405-1.043 0.405-1.436 0l-7.492-7.724z"></path>
+    </svg>
+    </button>
+</div>
+`;
+
+const LOTTIE_TEMPLATE = '<lottie-player loop mode="normal"></lottie-player>';
+
+const expandSection = (element) => {
+  // Get the height of the element's inner content, regardless of its actual size
+  const sectionHeight = element.scrollHeight;
+
+  // Have the element transition to the height of its inner content
+  element.style.height = `${sectionHeight}px`;
+
+  // When the next css transition finishes (which should be the one we just triggered)
+  element.addEventListener('transitionend', () => {
+    // Remove this event listener so it only gets triggered once
+    // eslint-disable-next-line no-caller, no-restricted-properties, no-undef
+    element.removeEventListener('transitionend', arguments.callee);
+
+    // Remove "height" from the element's inline styles, so it can return to its initial value
+    element.style.height = null;
+  });
+
+  // Mark the section as "currently not collapsed"
+  element.setAttribute('data-collapsed', 'false');
+};
+
 function toNodeList(arrayOfNodes, fragment) {
   let items = [];
   arrayOfNodes.forEach((item, i) => {
@@ -42,6 +98,7 @@ function toNodeList(arrayOfNodes, fragment) {
  * @param {HTMLElement} block the container element
  */
 async function renderContent(block) {
+  const { lang } = document.documentElement;
   const rows = [...block.querySelectorAll(':scope > div')];
 
   const overview = rows[0].querySelector(':scope > div');
@@ -88,11 +145,44 @@ async function renderContent(block) {
 
   console.log('store : ', store);
 
+  /** Prepend category nav */
+  const hasCategoryNav = document.querySelector('.ops-category-nav');
+  if (!hasCategoryNav) {
+    const navTemplate = parseFragment(TEMPLATE_NAV);
+    const categoryContainer = document.querySelector('.category-container');
+    categoryContainer.prepend(navTemplate);
+
+    // Mobile nav
+    const mobileNavTemplate = parseFragment(TEMPLATE_MOBILE_NAV);
+    categoryContainer.prepend(mobileNavTemplate);
+  }
+
+  // Add category nav button
+  const categoryNav = document.querySelector('.ops-category-nav-buttons');
+  const mobileNav = document.querySelector('.ops-category-nav-mobile');
+  const mobileNavDrawer = mobileNav.querySelector('.ops-category-nav-mobile .drawer');
+  const categoryNavLink = document.createElement('a');
+  categoryNavLink.textContent = overviewTitle.textContent;
+  categoryNavLink.href = `${PATH_PREFIX}/${lang}/operationalize#${categoryRouteId}`;
+  categoryNavLink.setAttribute('data-category-nav-route', `#${categoryRouteId}`);
+  if (categoryNav && mobileNav) {
+    categoryNav.append(categoryNavLink);
+    mobileNavDrawer.append(categoryNavLink.cloneNode(true));
+  }
+
+  const backButton = document.querySelector('.category-back');
+  backButton.href = `${PATH_PREFIX}/${lang}/operationalize#`;
+
   const template = parseFragment(TEMPLATE);
   const templateRoot = template.querySelector('.ops-category');
   templateRoot.setAttribute('data-route', `#${categoryRouteId}`);
   const overviewSlot = template.querySelector('slot[name="overview"]');
   overview.classList.add('overview');
+
+  // Add lottie player
+  const lottieTemplate = parseFragment(LOTTIE_TEMPLATE);
+  overview.append(lottieTemplate);
+
   overviewSlot.replaceWith(overview.cloneNode(true));
 
   const buttonsSlot = template.querySelector('[slot="buttons"]');
@@ -110,25 +200,44 @@ async function renderContent(block) {
     // Details
     const detailsSlot = _fragment.querySelector('slot[name="details"]');
     toNodeList(value.items, detailsSlot);
+    const rowsOfContent = value.items.length / 2;
 
     buttonsSlot.append(_fragment);
 
-    root.addEventListener('click', (e) => {
-      const rootEl = e.target.closest('[slot="category-button"]');
-      const isCollapsed = rootEl.getAttribute('data-collapsed') === 'true';
+    if (rowsOfContent > 1) {
+      root.classList.add('accordion-active');
+      root.addEventListener('click', (e) => {
+        const anchorEl = e.target.closest('a');
+        if (anchorEl) {
+          return;
+        }
+        const rootEl = e.target.closest('[slot="category-button"]');
+        const isCollapsed = rootEl.getAttribute('data-collapsed') === 'true';
 
-      if (isCollapsed) {
-        expandSection(detailsSlot);
-        rootEl.setAttribute('data-collapsed', false);
-      } else {
-        collapseSection(detailsSlot);
-        rootEl.setAttribute('data-collapsed', true);
-      }
-    });
+        if (isCollapsed) {
+          expandSection(detailsSlot);
+          rootEl.setAttribute('data-collapsed', false);
+        } else {
+          collapseSection(detailsSlot);
+          rootEl.setAttribute('data-collapsed', true);
+        }
+      });
+    }
 
     index += 1;
   }
 
+  // Make all links open in new tab
+  for (const anchorLink of template.querySelectorAll('a')) {
+    anchorLink.setAttribute('target', '_blank');
+  }
+
+  const toggleDrawer = mobileNav.querySelector('.selected');
+
+  toggleDrawer.addEventListener('click', () => {
+    mobileNavDrawer.classList.toggle('is-active');
+  });
+
   // const template = parseFragment(TEMPLATE);
   const fragment = document.createElement('div');
 
@@ -138,14 +247,24 @@ async function renderContent(block) {
   block.innerHTML = '';
   block.append(template);
   // localize(block);
+
+  // Post-render
+  // Add events
+  // loadLottie();
+  // const player = block.querySelector('lottie-player');
+  // player.addEventListener('rendered', () => {
+  //   // Load via URL
+  //   player.load(LOTTIE_PATHS[categoryRouteId]);
+  // });
+
+  // Get current hash, render that view
+  const { hash } = window.location;
+  showRoute(hash, `#${categoryRouteId}`);
 }
 
 /**
  * @param {HTMLDivElement} block
  */
 export default async function decorate(block) {
-  await renderContent(block);
-  // Get current hash, render that view
-  const { hash } = window.location;
-  showRoute(hash);
+  renderContent(block);
 }

blocks/header/header.css

@@ -1,4 +1,4 @@
-:root {
+.header  {
   --desktop-bottom-padding: var(--spacing--3);
   --desktop-drawer-top-distance: var(--spacing--6);
 
@@ -19,12 +19,18 @@
   --mobile-drawer-header-padding-horz: var(--spacing--4);
   --mobile-drawer-header-padding-vert: var(--spacing--7);
   --mobile-link-active-text-color: var(--color-blue--600);
+
+  align-items: center;
+  display: flex;
+  height: 100%;
+  position: relative;
 }
 
 .header .search-bar {
   --search-height: var(--spacing--10);
 }
 
+.operationalize .header,
 [data-user-theme='dark'] .book .header {
   --header-primary-text-color: var(--color-neutral-dark-200);
   --header-search-text-color: var(--color-neutral-200);
@@ -45,29 +51,26 @@
   --search-text-color: var(--color-neutral-white);
 }
 
+.operationalize .header .nav-logo picture,
 [data-user-theme='dark'] .book .header .nav-logo picture {
   opacity: 0;
 }
 
+.operationalize .header .nav-logo a,
 [data-user-theme='dark'] .book .header .nav-logo a {
   background: url('/assets/techdocs-logo-dark-mode.webp') 0 0 no-repeat;
   background-size: contain;
 }
 
+
+
 .header-wrapper {
   left: 0;
   position: sticky;
   top: 0;
   width: 100%;
 }
 
-.header {
-  align-items: center;
-  display: flex;
-  height: 100%;
-  position: relative;
-}
-
 /* Mobile */
 .pan-mobile-nav {
   z-index: var(--z-index-500--mobile-nav);

blocks/header/header.js

@@ -6,6 +6,7 @@ import { getMetadata } from '../../scripts/lib-franklin.js';
 import {
   PATH_PREFIX,
   isMobile,
+  isTouchDevice,
   parseFragment,
   render,
 } from '../../scripts/scripts.js';
@@ -627,6 +628,10 @@ export default async function decorate(block) {
   document.body.querySelector('header').classList.add('loaded');
   store.emit('header:loaded');
 
+  if (isTouchDevice()) {
+    document.body.classList.add('is-touch');
+  }
+
   if (!isMobile()) {
     // renderBreadCrumbs();
   } else {