From e00edc8b21ad6c8f5210e6d5cc9b116a977e01e2 Mon Sep 17 00:00:00 2001
From: Jonatan Lledo <jonatan.lledo@netcentric.biz>
Date: Tue, 7 Feb 2023 14:21:50 +0100
Subject: [PATCH] #281 improve some code smell & more

---
 scripts/lib-franklin.js | 271 ++++++++++++++++++++++------------------
 scripts/scripts.js      | 178 +++++++++++++++++---------
 templates/config.js     |   5 +
 3 files changed, 273 insertions(+), 181 deletions(-)
 create mode 100644 templates/config.js

diff --git a/scripts/lib-franklin.js b/scripts/lib-franklin.js
index 80744607..f038b227 100644
--- a/scripts/lib-franklin.js
+++ b/scripts/lib-franklin.js
@@ -99,7 +99,8 @@ export function loadCSS(href, callback) {
  */
 export function getMetadata(name) {
   const attr = name && name.includes(':') ? 'property' : 'name';
-  const meta = [...document.head.querySelectorAll(`meta[${attr}="${name}"]`)].map((m) => m.content).join(', ');
+  const meta = [...document.head.querySelectorAll(`meta[${attr}="${name}"]`)]
+    .map((m) => m.content).join(', ');
   return meta || '';
 }
 
@@ -114,7 +115,7 @@ export function toClassName(name) {
     : '';
 }
 
-/*
+/**
  * Sanitizes a name for use as a js property name.
  * @param {string} name The unsanitized name
  * @returns {string} The camelCased name
@@ -123,6 +124,46 @@ export function toCamelCase(name) {
   return toClassName(name).replace(/-([a-z])/g, (g) => g[1].toUpperCase());
 }
 
+/**
+ * Sanitize the svg text code
+ * @param {string} svg - raw svg code
+ * @param {string} iconName
+ * @returns {string} sanitized svg string
+ */
+function cleanSVG(svg, iconName) {
+  if (svg.match(/<style/i)) {
+    return svg
+      .replace(/<\?.*\?>\n/, '') // remove <?…?> xml header
+      .trim();
+  }
+  return svg
+    .replace(/<\?.*\?>\n/, '') // remove <?…?> xml header
+    .replace('<svg ', `<symbol id="${iconName}"`)
+    .replace('</svg>', '</symbol>')
+    .replace(/ xmlns=".*?"/, '') // remove redundant namespace definitions
+    .replace(/ xmlns:xlink=".*?"/, '')
+    .replace(/ width=".*?"/, '') // remove hard-coded size so wrapping .icon can override it
+    .replace(/ height=".*?"/, '')
+    .trim();
+}
+
+/**
+ * Get the title from the svg
+ * @param {string} svg - svg text
+ * @returns {string} title text
+ */
+function getTitle(svg) {
+  const splitted = svg.split('"');
+  const index = splitted.findIndex((el) => el.includes('title'));
+  return splitted[index + 1];
+}
+
+/**
+ * Prepare an Icon to be inserted in a span element
+ * @param {HTMLSpanElement} span - the parent element
+ * @param {Element} html - the icon element
+ * @param {string} alt - alt text to be added to a HTMLImageElement
+ */
 const decorateIcon = (span, html, alt = '') => {
   if (html.match(/<style/i)) {
     const img = document.createElement('img');
@@ -149,48 +190,32 @@ export async function decorateIcons(element = document) {
       return;
     }
     const iconName = span.classList.item(1).split('icon-')[1];
-    if (!symbols[iconName]) {
-      symbols[iconName] = true;
-      span.classList.add('icon-decorating');
-      try {
-        const response = await fetch(`${window.hlx.codeBasePath}/icons/${iconName}.svg`);
-        if (!response.ok) {
-          // eslint-disable-next-line no-console
-          console.warn('Icon not found:', iconName);
-          return;
-        }
-        const svg = await response.text();
-        if (svg.match(/<style/i)) {
-          symbols[iconName] = svg
-            .replace(/<\?.*\?>\n/, '') // remove <?…?> xml header
-            .trim();
-        } else {
-          symbols[iconName] = svg
-            .replace(/<\?.*\?>\n/, '') // remove <?…?> xml header
-            .replace('<svg ', `<symbol id="${iconName}"`)
-            .replace('</svg>', '</symbol>')
-            .replace(/ xmlns=".*?"/, '') // remove redundant namespace definitions
-            .replace(/ xmlns:xlink=".*?"/, '')
-            .replace(/ width=".*?"/, '') // remove hard-coded size so wrapping .icon can override it
-            .replace(/ height=".*?"/, '')
-            .trim();
-        }
-        if (symbols[iconName].includes('title')) {
-          const splitted = symbols[iconName].split('"');
-          const index = splitted.findIndex((el) => el.includes('title'));
-          title = splitted[index + 1];
-        }
-      } catch (err) {
+    if (symbols[iconName]) return;
+    symbols[iconName] = true;
+    span.classList.add('icon-decorating');
+
+    try {
+      const response = await fetch(`${window.hlx.codeBasePath}/icons/${iconName}.svg`);
+      if (!response.ok) {
         // eslint-disable-next-line no-console
-        console.error(err);
+        console.warn('Icon not found:', iconName);
+        return;
       }
+      const svg = await response.text();
+      symbols[iconName] = cleanSVG(svg, iconName);
+      title = symbols[iconName].includes('title') ? getTitle(symbols[iconName]) : title;
+    } catch (err) {
+      // eslint-disable-next-line no-console
+      console.error(err);
     }
   }));
 
   let svgSprite = document.getElementById('franklin-svg-sprite');
   if (!svgSprite) {
     const div = document.createElement('div');
-    div.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" id="franklin-svg-sprite" style="display: none">${Object.values(symbols).join('\n')}</svg>`;
+    div.innerHTML = `
+      <svg xmlns="http://www.w3.org/2000/svg" id="franklin-svg-sprite" style="display: none">
+      ${Object.values(symbols).join('\n')}</svg>`;
     svgSprite = div.firstElementChild;
     document.body.prepend(div.firstElementChild);
   } else {
@@ -200,15 +225,10 @@ export async function decorateIcons(element = document) {
   icons.forEach((span) => {
     span.classList.remove('icon-decorating');
     const iconName = span.classList.item(1).split('icon-')[1];
-    if (symbols[iconName].startsWith('<svg ')) {
-      decorateIcon(span, symbols[iconName], title);
-    } else {
-      decorateIcon(
-        span,
-        `<svg xmlns="http://www.w3.org/2000/svg"><use href="#${iconName}"/></svg>`,
-        title,
-      );
-    }
+    const symbol = symbols[iconName].startsWith('<svg ')
+      ? symbols[iconName]
+      : `<svg xmlns="http://www.w3.org/2000/svg"><use href="#${iconName}"/></svg>`;
+    decorateIcon(span, symbol, title);
   });
 }
 
@@ -216,7 +236,30 @@ export async function decorateIcons(element = document) {
  * @returns language path portion for the current URL to be used to build language specific URLs
  */
 export function getLanguagePath() {
-  return window.location.pathname === '/de' || window.location.pathname.startsWith('/de/') ? '/de' : '';
+  const { pathname } = window.location;
+  return pathname === '/de' || pathname.startsWith('/de/') ? '/de' : '';
+}
+
+/**
+ * Get the placeholders data from the docs to be used as translation
+ * @param {string} prefix
+ * @param {string} languagePath
+ */
+async function getPlaceholders(prefix, languagePath) {
+  const url = `${prefix === 'default' ? '' : prefix}${languagePath}/placeholders.json`;
+  window.placeholders[prefix] = {};
+  try {
+    const response = await fetch(url);
+    const json = await response.json();
+    const placeholders = {};
+    json.data.forEach((placeholder) => {
+      placeholders[toCamelCase(placeholder.Key)] = placeholder.Text;
+    });
+    window.placeholders[prefix] = placeholders;
+  } catch (error) {
+    // eslint-disable-next-line no-console
+    console.log('%cGet placeholders fail:', 'color:red', error);
+  }
 }
 
 /**
@@ -229,30 +272,8 @@ export async function fetchPlaceholders(prefix = 'default') {
   const languagePath = getLanguagePath();
 
   if (!loaded) {
-    window.placeholders[`${prefix}-loaded`] = new Promise((resolve, reject) => {
-      try {
-        fetch(`${prefix === 'default' ? '' : prefix}${languagePath}/placeholders.json`)
-          .then((resp) => resp.json())
-          .then((json) => {
-            const placeholders = {};
-            json.data.forEach((placeholder) => {
-              placeholders[toCamelCase(placeholder.Key)] = placeholder.Text;
-            });
-            window.placeholders[prefix] = placeholders;
-            resolve();
-          })
-          .catch(() => {
-            window.placeholders[prefix] = {};
-            resolve();
-          });
-      } catch (error) {
-        // error loading placeholders
-        window.placeholders[prefix] = {};
-        reject();
-      }
-    });
+    await getPlaceholders(prefix, languagePath);
   }
-  await window.placeholders[`${prefix}-loaded`];
   return window.placeholders[prefix];
 }
 
@@ -273,6 +294,28 @@ export function decorateBlock(block) {
   }
 }
 
+/**
+ * Get the value of a certain column in a Block row
+ * @param {Element} col column 1st Element
+ * @param {Element} row row div block
+ * @returns
+ */
+function getRowValue(col, row) {
+  if (col.querySelector('a')) {
+    const as = [...col.querySelectorAll('a')];
+    return as.length === 1 ? as[0].href : as.map((a) => a.href);
+  }
+  if (col.querySelector('img')) {
+    const imgs = [...col.querySelectorAll('img')];
+    return imgs.length === 1 ? imgs[0].src : imgs.map((img) => img.src);
+  }
+  if (col.querySelector('p')) {
+    const ps = [...col.querySelectorAll('p')];
+    return ps.length === 1 ? ps[0].textContent : ps.map((p) => p.textContent);
+  }
+  return row.children[1].textContent;
+}
+
 /**
  * Extracts the config from a block.
  * @param {Element} block The block element
@@ -281,76 +324,58 @@ export function decorateBlock(block) {
 export function readBlockConfig(block) {
   const config = {};
   block.querySelectorAll(':scope>div').forEach((row) => {
-    if (row.children) {
-      const cols = [...row.children];
-      if (cols[1]) {
-        const col = cols[1];
-        const name = toClassName(cols[0].textContent);
-        let value = '';
-        if (col.querySelector('a')) {
-          const as = [...col.querySelectorAll('a')];
-          if (as.length === 1) {
-            value = as[0].href;
-          } else {
-            value = as.map((a) => a.href);
-          }
-        } else if (col.querySelector('img')) {
-          const imgs = [...col.querySelectorAll('img')];
-          if (imgs.length === 1) {
-            value = imgs[0].src;
-          } else {
-            value = imgs.map((img) => img.src);
-          }
-        } else if (col.querySelector('p')) {
-          const ps = [...col.querySelectorAll('p')];
-          if (ps.length === 1) {
-            value = ps[0].textContent;
-          } else {
-            value = ps.map((p) => p.textContent);
-          }
-        } else value = row.children[1].textContent;
-        config[name] = value;
-      }
-    }
+    if (!row.children) return;
+    const cols = [...row.children];
+    if (!cols[1]) return;
+    const col = cols[1];
+    const name = toClassName(cols[0].textContent);
+    config[name] = getRowValue(col, row) || '';
   });
   return config;
 }
 
+function addWrappers(section) {
+  const wrappers = [];
+  let defaultContent = false;
+  [...section.children].forEach((e) => {
+    if (e.tagName === 'DIV' || !defaultContent) {
+      const wrapper = document.createElement('div');
+      wrappers.push(wrapper);
+      defaultContent = e.tagName !== 'DIV';
+      if (defaultContent) wrapper.classList.add('default-content-wrapper');
+    }
+    wrappers[wrappers.length - 1].append(e);
+  });
+  return wrappers;
+}
+
+function createMetaObject(meta, section) {
+  Object.keys(meta).forEach((key) => {
+    if (key === 'style') {
+      const styles = meta.style.split(',').map((style) => toClassName(style.trim()));
+      styles.forEach((style) => section.classList.add(style));
+    } else {
+      section.dataset[toCamelCase(key)] = meta[key];
+    }
+  });
+}
+
 /**
  * Decorates all sections in a container element.
  * @param {Element} $main The container element
  */
 export function decorateSections(main) {
   main.querySelectorAll(':scope > div').forEach((section) => {
-    const wrappers = [];
-    let defaultContent = false;
-    [...section.children].forEach((e) => {
-      if (e.tagName === 'DIV' || !defaultContent) {
-        const wrapper = document.createElement('div');
-        wrappers.push(wrapper);
-        defaultContent = e.tagName !== 'DIV';
-        if (defaultContent) wrapper.classList.add('default-content-wrapper');
-      }
-      wrappers[wrappers.length - 1].append(e);
-    });
+    const wrappers = addWrappers(section);
     wrappers.forEach((wrapper) => section.append(wrapper));
     section.classList.add('section');
     section.setAttribute('data-section-status', 'initialized');
 
     /* process section metadata */
     const sectionMeta = section.querySelector('div.section-metadata');
-    if (sectionMeta) {
-      const meta = readBlockConfig(sectionMeta);
-      Object.keys(meta).forEach((key) => {
-        if (key === 'style') {
-          const styles = meta.style.split(',').map((style) => toClassName(style.trim()));
-          styles.forEach((style) => section.classList.add(style));
-        } else {
-          section.dataset[toCamelCase(key)] = meta[key];
-        }
-      });
-      sectionMeta.parentNode.remove();
-    }
+    if (!sectionMeta) return;
+    const meta = readBlockConfig(sectionMeta);
+    createMetaObject(meta, section);
   });
 }
 
diff --git a/scripts/scripts.js b/scripts/scripts.js
index 79a67bbc..124a3f00 100644
--- a/scripts/scripts.js
+++ b/scripts/scripts.js
@@ -15,6 +15,7 @@ import {
   getMetadata,
   loadCSS,
 } from './lib-franklin.js';
+import TEMPLATE_LIST from '../templates/config.js';
 
 const LCP_BLOCKS = []; // add your LCP blocks to the list
 window.hlx.RUM_GENERATION = 'project-1'; // add your RUM generation information here
@@ -33,6 +34,41 @@ export function addChevronToButtons(element, selector = 'a.button') {
   });
 }
 
+/**
+ * Check button type and return the right classList to be added to the anchor tag, if needed
+ * @param {HTMLElement} up Anchor tag parent Element
+ * @returns {({string, HTMLElement} | null)} {string, HTMLElement} or null
+ */
+function setButtonClassName(up) {
+  const twoUp = up.parentElement;
+  const buttonTags = {
+    P: 'P',
+    DIV: 'DIV',
+    STRONG: 'STRONG',
+    EM: 'EM',
+  };
+  const upLength = up.childNodes.length;
+  const twoUpLength = twoUp.childNodes.length;
+  const isButton = upLength === 1 && buttonTags[up.tagName] !== undefined;
+  const isInPTag = twoUpLength === 1 && twoUp.tagName === buttonTags.P;
+  const isPrimary = isButton && up.tagName === buttonTags.STRONG && isInPTag;
+  const isSecondary = isButton && up.tagName === buttonTags.EM && isInPTag;
+
+  if (isPrimary) { // primary CTA button link
+    return { classList: 'button primary', el: twoUp };
+  }
+
+  if (isSecondary) { // secondary CTA button link
+    return { classList: 'button secondary', el: twoUp };
+  }
+
+  if (isButton) { // default navigational link
+    return { classList: 'button', el: up };
+  }
+
+  return null;
+}
+
 /**
  * decorates paragraphs containing a single link as buttons with classes and
  * chevron icon.
@@ -40,33 +76,26 @@ export function addChevronToButtons(element, selector = 'a.button') {
  */
 function decorateButtons(element) {
   element.querySelectorAll('a').forEach((a) => {
-    if (a.href !== a.textContent) {
-      const up = a.parentElement;
-      const twoup = up.parentElement;
-      const threeUp = twoup.parentElement;
-
-      if (!a.querySelector('img') && !threeUp.classList.contains('fixed-social-media')) {
-        a.title = a.title || a.textContent.trim();
-        if (up.childNodes.length === 1 && (up.tagName === 'P' || up.tagName === 'DIV')) {
-          a.className = 'button'; // default navigational link
-          up.classList.add('button-container');
-        }
-        if (up.childNodes.length === 1 && up.tagName === 'STRONG'
-          && twoup.childNodes.length === 1 && twoup.tagName === 'P') {
-          a.className = 'button primary'; // primary CTA button link
-          twoup.classList.add('button-container');
-        }
-        if (up.childNodes.length === 1 && up.tagName === 'EM'
-          && twoup.childNodes.length === 1 && twoup.tagName === 'P') {
-          a.className = 'button secondary'; // secondary CTA button link
-          twoup.classList.add('button-container');
-        }
-        addChevronToButtons(up);
-      }
+    if (a.href === a.textContent) return;
+    const up = a.parentElement;
+    const threeUp = up.parentElement.parentElement;
+
+    if (a.querySelector('img') || threeUp.classList.contains('fixed-social-media')) return;
+    a.title = a.title || a.textContent.trim();
+
+    if (setButtonClassName(up)) {
+      const { classList, el } = setButtonClassName(up);
+      a.className = classList;
+      el.classList.add('button-container');
+      addChevronToButtons(up);
     }
   });
 }
 
+/**
+ * Build the Hero block depends if the block is present or not in the document
+ * @param {HTMLElement} main
+ */
 function buildHeroBlock(main) {
   /* 1. If there is an explicit hero block, add it to its own section, so it can be full-width */
   const heroBlock = main.querySelector('.hero');
@@ -91,18 +120,14 @@ function buildHeroBlock(main) {
     subtitle = h1Sibling;
   }
 
-  if (h1 && picture) {
-    const section = document.createElement('div');
-    const hr = document.createElement('hr');
-    section.append(buildBlock('hero', { elems: [hr, h1, subtitle, picture] }));
-    main.prepend(section);
-    return;
-  }
-
-  /* 3. If there is only a h1, build a block out of the h1 */
   if (h1) {
     const section = document.createElement('div');
-    section.append(buildBlock('hero', { elems: [h1] }));
+    let elems = [h1]; /* 3. If there is only a h1, build a block out of the h1 */
+    if (picture) {
+      const hr = document.createElement('hr');
+      elems = [hr, h1, subtitle, picture];
+    }
+    section.append(buildBlock('hero', { elems }));
     main.prepend(section);
   }
 }
@@ -119,31 +144,38 @@ export function createIcon(name) {
   return icon;
 }
 
+/**
+ * Creates an Embed Media element in a iframe
+ * @param {HTMLAnchorElement} a
+ * @param {string} vendor
+ * @returns {HTMLDivElement} the embedded element
+ */
 function createEmbedIFrame(a, vendor) {
   const div = document.createElement('div');
   div.classList.add(`${vendor}-base`);
   const id = a.pathname.split('/').pop();
 
-  let source;
-  let className;
-  let allow;
-  if (vendor === 'youtube') {
-    source = `https://www.youtube.com/embed/${id}`;
-    className = 'youtube-player';
-    allow = 'encrypted-media; accelerometer; gyroscope; picture-in-picture';
-  } else if (vendor === 'spotify') {
-    source = `https://open.spotify.com/embed/episode/${id}`;
-    className = 'spotify-player';
-    allow = 'autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture';
-  } else if (vendor === 'wistia') {
-    source = `https://fast.wistia.net/embed/iframe/${id}`;
-    className = 'wistia-player';
-    allow = 'autoplay; clipboard-write; encrypted-media; fullscreen;';
-  }
-
-  div.innerHTML = `<iframe data-src="${source}" 
+  const vendors = {
+    youtube: {
+      source: `https://www.youtube.com/embed/${id}`,
+      className: 'youtube-player',
+      allow: 'encrypted-media; accelerometer; gyroscope; picture-in-picture',
+    },
+    spotify: {
+      source: `https://open.spotify.com/embed/episode/${id}`,
+      className: 'spotify-player',
+      allow: 'autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture',
+    },
+    wistia: {
+      source: `https://fast.wistia.net/embed/iframe/${id}`,
+      className: 'wistia-player',
+      allow: 'autoplay; clipboard-write; encrypted-media; fullscreen;',
+    },
+  };
+  const { source, className, allow } = vendors[vendor];
+
+  div.innerHTML = `<iframe data-src="${source}"
         class="${className}"
-        allowfullscreen  
         allow="${allow}"
         style="display: none"
         loading="auto">
@@ -153,13 +185,27 @@ function createEmbedIFrame(a, vendor) {
   return div;
 }
 
+/**
+ * Checks if the anchor element is a media-type link based on the string passed by parameter
+ * @param {HTMLAnchorElement} a HTMLAnchorElement
+ * @param {string} type vendor type
+ * @returns {boolean} true | false
+ */
+function isMediaLink(a, type) {
+  return a.href.includes(type) && encodeURI(a.textContent.trim()).indexOf(a.href) !== -1;
+}
+
+/**
+ * Prepare en Embed Element to be parsed by the decoration phase
+ * @param {HTMLElement} main Main Element tag
+ */
 function preDecorateEmbed(main) {
   const lazyEmbeds = [];
 
-  const anchors = main.getElementsByTagName('a');
-  const youTubeAnchors = Array.from(anchors).filter((a) => a.href.includes('youtu') && encodeURI(a.textContent.trim()).indexOf(a.href) !== -1);
-  const spotifyAnchors = Array.from(anchors).filter((a) => a.href.includes('spotify') && encodeURI(a.textContent.trim()).indexOf(a.href) !== -1);
-  const wistiaAnchors = Array.from(anchors).filter((a) => a.href.includes('wistia') && encodeURI(a.textContent.trim()).indexOf(a.href) !== -1);
+  const anchors = [...main.getElementsByTagName('a')];
+  const youTubeAnchors = anchors.filter((a) => isMediaLink(a, 'youtu'));
+  const spotifyAnchors = anchors.filter((a) => isMediaLink(a, 'spotify'));
+  const wistiaAnchors = anchors.filter((a) => isMediaLink(a, 'wistia'));
 
   youTubeAnchors.forEach((a) => {
     lazyEmbeds.push(createEmbedIFrame(a, 'youtube'));
@@ -196,10 +242,22 @@ function preDecorateEmbed(main) {
   }
 }
 
+/**
+ * Check if the url is a Marketo one
+ * @param {URL} url - url to check
+ * @returns {boolean} true | false
+ */
 export function isMarketoFormUrl(url) {
   return url.hostname === 'engage-lon.marketo.com';
 }
 
+/**
+ * Check if an HTMLElement has a parentElement or not and
+ * returns it from having it based on the callback
+ * @param {HTMLElement} element - the HTMLElement to check
+ * @param {Function} callback - recursive call to itself
+ * @returns {(HTMLElement | Function | null)} te parentElement, this function itself or null
+ */
 function findParent(element, callback) {
   if (!element.parentElement) {
     return null;
@@ -210,6 +268,10 @@ function findParent(element, callback) {
   return findParent(element.parentElement, callback);
 }
 
+/**
+ * Prepare the HTMLAnchorElement container to convert it to be a HTMLFormElement
+ * @param {HTMLElement} main
+ */
 function preDecorateMarketoForm(main) {
   [...main.getElementsByTagName('a')].filter((a) => {
     try {
@@ -236,7 +298,7 @@ async function buildAutoBlocks(main) {
   try {
     buildHeroBlock(main);
     const template = toClassName(getMetadata('template'));
-    const templates = ['blogpost', 'two-columns'];
+    const templates = TEMPLATE_LIST;
     if (templates.includes(template)) {
       const mod = await import(`../templates/${template}/${template}.js`);
       if (mod.default) {
@@ -251,7 +313,7 @@ async function buildAutoBlocks(main) {
 
 /**
  * Instruments the main element with document metadata for LiveUX tracking
- * @param {*} main The main element
+ * @param {HTMLElement} main The main element
  */
 function instrumentMain(main) {
   [...document.head.children]
diff --git a/templates/config.js b/templates/config.js
new file mode 100644
index 00000000..162acc4b
--- /dev/null
+++ b/templates/config.js
@@ -0,0 +1,5 @@
+/**
+ * to add/remove a template, just add/remove it in the list below
+ */
+const TEMPLATE_LIST = ['blogpost', 'two-columns'];
+export default TEMPLATE_LIST;