Merge pull request #4 from Esri/esriMain

Esri main
Esri · Oct 23, 2024 · 3ffe064 · 3ffe064
2 parents 77f304f + 4ccf06c
commit 3ffe064
Show file tree

Hide file tree

Showing 6 changed files with 441 additions and 248 deletions.
diff --git a/eds/blocks/header/header.css b/eds/blocks/header/header.css
@@ -7,3 +7,7 @@
 .gnav_top-nav_language-chooser-button:focus {
     background-color: unset;
 }
+
+div#globalfooter {
+    color: var(--calcite-ui-text-1);
+}
diff --git a/eds/blocks/header/header.js b/eds/blocks/header/header.js
@@ -1,6 +1,24 @@
-import { loadCSS, loadScript } from '../../scripts/aem.js';
+import {
+  getMetadata,
+  loadCSS,
+  loadScript,
+} from '../../scripts/aem.js';
 import ffetch from '../../scripts/ffetch.js';
-import { link } from '../../scripts/dom-helpers.js';
+import { link, script } from '../../scripts/dom-helpers.js';
+
+/**
+  * Use getMetadata to get the locale of the page
+  * * Update the html lang attribute to the locale
+  * If the language is Arabic, Hebrew or Kuwaiti Arabic, set the direction to rtl
+  */
+function setLocaleAndDirection() {
+  const locale = getMetadata('og:locale') || 'en-us';
+  const dir = (locale === 'ar-sa' || locale === 'he-il' || locale === 'ar-kw') ? 'rtl' : 'ltr';
+  document.querySelector('html').setAttribute('dir', dir);
+
+  const lang = (locale === 'en-us') ? 'en' : locale;
+  document.querySelector('html').setAttribute('lang', lang);
+}
 
 /**
  * get all entries from the index
@@ -58,13 +76,130 @@ async function alternateHeaders() {
   head.appendChild(xDefaultLink);
 }
 
+async function createBreadcrumbs() {
+  const breadcrumbs = getMetadata('breadcrumbs')
+    .split(',')
+    .map((breadcrumb) => breadcrumb.trim());
+
+  const filteredBreadcrumbs = (await ffetch('/breadcrumbs.json').all()).filter((entry) => {
+    for (let i = 0; i < breadcrumbs.length && breadcrumbs[i] !== ''; i += 1) {
+      const level = entry[`level_${i + 1}`];
+      if (!level) {
+        return true;
+      }
+
+      if (level !== breadcrumbs[i]) {
+        return false;
+      }
+    }
+
+    return true;
+  });
+  const breadcrumbsPathByLength = filteredBreadcrumbs
+    .map((entry) => {
+      // count how many entries prefixed with level_ have a value !== ''
+      const { length } = Object.keys(entry).filter((key) => key.startsWith('level_') && entry[key] !== '');
+      const { path } = entry;
+
+      return { length, path };
+    })
+    .reduce((acc, { length, path }) => {
+      const position = length - 1;
+      if (acc.length >= position) {
+        // resize acc to be able to add the new entry
+        acc.length = position + 1;
+      }
+
+      acc[position] = path;
+
+      return acc;
+    }, []);
+
+  const urlSegments = window.location.pathname.split('/')
+    .slice(2);
+
+  const language = getMetadata('og:locale');
+
+  const urlPrefix = `/${language}`;
+  let accUrl = '';
+  const accBreadcrumbs = [];
+
+  let lastBreadcrumbsDictionaryElement;
+  const breadcrumbsSchema = breadcrumbs.map((breadcrumb, index) => {
+    accUrl += `/${urlSegments[index]}`;
+    accBreadcrumbs.push(breadcrumb);
+
+    const breadcrumbsDictionaryElement = breadcrumbsPathByLength[index];
+
+    let breadcrumbsSchemaUrl = accUrl;
+    if (breadcrumbsDictionaryElement) {
+      lastBreadcrumbsDictionaryElement = breadcrumbsDictionaryElement;
+      breadcrumbsSchemaUrl = breadcrumbsDictionaryElement;
+    } else if (lastBreadcrumbsDictionaryElement) {
+      breadcrumbsSchemaUrl = lastBreadcrumbsDictionaryElement;
+    }
+    const position = index + 1;
+    return {
+      '@type': 'ListItem',
+      position,
+      name: breadcrumb,
+      item: urlPrefix + breadcrumbsSchemaUrl,
+    };
+  });
+
+  document.head.appendChild(script(
+    {
+      type: 'application/ld+json',
+      id: 'breadcrumbs',
+    },
+    JSON.stringify({
+      '@context': 'https://schema.org',
+      '@type': 'BreadcrumbList',
+      itemListElement: breadcrumbsSchema,
+    }),
+  ));
+}
+
+function createSchema() {
+  const schema = {
+    '@context': 'http://schema.org',
+    '@type': 'WebPage',
+    name: document.title,
+    sourceOrganization: {
+      '@type': 'Organization',
+      name: 'Esri',
+    },
+    url: document.querySelector('link[rel="canonical"]').href,
+    image: getMetadata('og:image'),
+    inLanguage: {
+      '@type': 'Language',
+      name: getMetadata('og:locale'),
+    },
+    description: document.querySelector('meta[name="description"]').content,
+  };
+
+  const jsonElement = document.createElement('script');
+  jsonElement.type = 'application/ld+json';
+  jsonElement.classList.add('schema-graph');
+
+  jsonElement.innerHTML = JSON.stringify(schema);
+  document.head.appendChild(jsonElement);
+}
+
 /**
  * loads and decorates the header, mainly the nav
  * @param {Element} block The header block element
  */
 export default async function decorate() {
-  await alternateHeaders().then(async () => {
-    window.gnav_jsonPath = '/2022-nav-config.25.json';
-    await Promise.all([loadScript('https://webapps-cdn.esri.com/CDN/components/global-nav/js/gn.js'), loadCSS('https://webapps-cdn.esri.com/CDN/components/global-nav/css/gn.css')]);
-  });
+  createSchema();
+  await createBreadcrumbs();
+  setLocaleAndDirection();
+  await alternateHeaders()
+    .then(async () => {
+      window.gnav_jsonPath = '/2022-nav-config.25.json';
+      await Promise.all([
+        loadScript('https://webapps-cdn.esri.com/CDN/components/global-nav/js/gn.js'),
+        loadCSS('https://webapps-cdn.esri.com/CDN/components/global-nav/css/gn.css'),
+      ]);
+    });
 }
diff --git a/eds/scripts/delayed.js b/eds/scripts/delayed.js
@@ -10,7 +10,7 @@ sampleRUM('cwv');
  * Loads analytic attributes to all links inside a block.
  * @param {Element} doc The container element
  */
-function loadAnalytics() {
+function loadAnalytics(dataLayer) {
   document.querySelectorAll('.block').forEach((block) => {
     block.querySelectorAll('[href]').forEach((link) => {
       if ((link.tagName === 'A') || (link.tagName === 'CALCITE-BUTTON')) {
@@ -23,9 +23,28 @@ function loadAnalytics() {
       }
     });
   });
-}
 
-loadAnalytics();
+  if (typeof dataLayer !== 'undefined') {
+    document.querySelectorAll('.block').forEach((block) => {
+      block.querySelectorAll('[href]').forEach((link) => {
+        if ((link.tagName === 'A') || (link.tagName === 'CALCITE-BUTTON')) {
+          link.addEventListener('click', () => {
+            dataLayer.push({
+              event: 'onClick',
+              component: {
+                tagName: link.tagName.toLowerCase(),
+                name: block.getAttribute('data-block-name'),
+                url: link.href,
+                linkType: link.getAttribute('data-component-link-type'),
+                linkText: link.innerHTML,
+              },
+            });
+          });
+        }
+      });
+    });
+  }
+}
 
 // Launch script
 loadScript('https://assets.adobedtm.com/2d251f50426c/e52f833be42a/launch-bdb68bbb4cf5-development.min.js');
@@ -42,3 +61,5 @@ window.dataLayer.push({
     locale: document.documentElement.lang,
   },
 });
+
+loadAnalytics(window.dataLayer);
diff --git a/eds/scripts/dom-helpers.js b/eds/scripts/dom-helpers.js
@@ -162,6 +162,10 @@ export function horizontalRule(...items) {
   return domEl('hr', ...items);
 }
 
+export function script(...items) {
+  return domEl('script', ...items);
+}
+
 export function calciteButton(...items) {
   return domEl('calcite-button', ...items);
 }
diff --git a/eds/scripts/scripts.js b/eds/scripts/scripts.js
@@ -127,9 +127,21 @@ function buildAutoBlocks(main) {
   }
 }
 
+const calciteModes = ['light', 'dark', 'gray'];
+
+function decorateBodyMode() {
+  const { classList } = document.body;
+  const main = document.body.querySelector('main');
+
+  calciteModes.forEach((mode) => {
+    if (classList.contains(mode)) {
+      main.classList.add(`calcite-mode-${mode}`);
+    }
+  });
+}
+
 function decorateMode(element) {
   const { classList } = element;
-  const calciteModes = ['light', 'dark', 'gray'];
   calciteModes.forEach((mode) => {
     if (classList.contains(mode)) {
       classList.add(`calcite-mode-${mode}`);
@@ -163,7 +175,7 @@ export function decorateMain(main) {
 
 export function decorateTemplateAndTheme() {
   aemDecorateTemplateAndTheme();
-  decorateMode(document.body);
+  decorateBodyMode();
 }
 
 /**