get jp headers to have correct class

adobecom · Jul 29, 2024 · 53e711c · 53e711c
1 parent bd5c1cb
commit 53e711c
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 16 deletions.
diff --git a/express/blocks/ax-columns/ax-columns.js b/express/blocks/ax-columns/ax-columns.js
@@ -263,7 +263,7 @@ export default async function decorate(block) {
     });
   });
   addAnimationToggle(block);
-  addHeaderSizing(block, 'columns-heading');
+  addHeaderSizing(null, block, 'columns-heading');
 
   // decorate offer
   if (block.classList.contains('offer')) {

diff --git a/express/scripts/scripts.js b/express/scripts/scripts.js
@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import { setLibs, buildAutoBlocks, decorateArea } from './utils.js';
+import {setLibs, buildAutoBlocks, decorateArea, removeIrrelevantSections} from './utils.js';
 
 // Add project-wide style path here.
 const STYLES = ['/express/styles/styles.css'];
@@ -75,8 +75,13 @@ const urlParams = new URLSearchParams(window.location.search);
 
 const miloLibs = setLibs(LIBS);
 
-// Decorate the page with site specific needs.
-decorateArea();
+document.body.dataset.device = navigator.userAgent.includes('Mobile') ? 'mobile' : 'desktop';
+removeIrrelevantSections(document);
+// LCP image decoration
+(function decorateLCPImage() {
+  const lcpImg = document.querySelector('img');
+  lcpImg?.removeAttribute('loading');
+}());
 
 (function loadStyles() {
   const paths = [`${miloLibs}/styles/styles.css`];
@@ -98,6 +103,8 @@ decorateArea();
     (jarvisVisibleMeta === 'mobile' && !desktopViewport) || (jarvisVisibleMeta === 'desktop' && desktopViewport))) CONFIG.jarvis.onDemand = false;
 
   const config = setConfig({ ...CONFIG, miloLibs });
+  // Decorate the page with site specific needs.
+  decorateArea();
 
   if (getMetadata('hide-breadcrumbs') !== 'true' && !getMetadata('breadcrumbs') && !window.location.pathname.endsWith('/express/')) {
     // TODO only add this back once we're consuming the milo version of gnav
@@ -121,7 +128,7 @@ decorateArea();
 
   // listenMiloEvents();
   buildAutoBlocks();
-  if (urlParams.get('martech') !== 'off' || getMetadata('martech') === 'off') {
+  if (urlParams.get('martech') !== 'off' && getMetadata('martech') !== 'off') {
     import('./instrument.js').then((mod) => { mod.default(); });
   }
   if (getMetadata('sheet-powered') === 'Y') {

diff --git a/express/scripts/utils.js b/express/scripts/utils.js
@@ -440,7 +440,7 @@ function transpileMarquee(area) {
 }
 
 export function buildAutoBlocks() {
-  if (['yes', 'y', 'true', 'on'].includes(getMetadata('show-floating-cta')?.toLowerCase())) {
+  if (['yes', 'y', 'true', 'on'] .includes(getMetadata('show-floating-cta')?.toLowerCase())) {
     const lastDiv = document.querySelector('main > div:last-of-type');
     const validButtonVersion = ['floating-button', 'multifunction-button', 'bubble-ui-button', 'floating-panel'];
     const device = document.body.dataset?.device;
@@ -459,15 +459,30 @@ export function buildAutoBlocks() {
   }
 }
 
+/**
+ * Call `addHeaderSizing` on default content blocks in all section blocks
+ * in all Japanese pages except blog pages.
+ */
+function addJapaneseSectionHeaderSizing(area) {
+  import(`${getLibs()}/utils/utils.js`).then((mod) => {
+    if (mod.getConfig().locale.ietf === 'ja-JP' && mod.getMetadata('template') !== 'blog') {
+      const headings = area === document ? area.querySelectorAll('main > div > h1, main > div > h2') : area.querySelectorAll(':scope > div > h1, :scope > div > h2');
+      if(headings.length) import('./utils/location-utils.js').then((mod) => mod.addHeaderSizing(headings, null));
+    }
+  });
+}
+
 export function decorateArea(area = document) {
-  document.body.dataset.device = navigator.userAgent.includes('Mobile') ? 'mobile' : 'desktop';
-  removeIrrelevantSections(area);
-  // LCP image decoration
-  (function decorateLCPImage() {
-    const lcpImg = area.querySelector('img');
-    lcpImg?.removeAttribute('loading');
-  }());
-  const links = area === Document ? area.querySelectorAll('main a[href*="adobesparkpost.app.link"]') : area.querySelectorAll(':scope a[href*="adobesparkpost.app.link"]');
+  if (area !== document) {
+    removeIrrelevantSections(area);
+    // LCP image decoration
+    (function decorateLCPImage() {
+      const lcpImg = area.querySelector('img');
+      lcpImg?.removeAttribute('loading');
+    }());
+  }
+
+  const links = area === document ? area.querySelectorAll('main a[href*="adobesparkpost.app.link"]') : area.querySelectorAll(':scope a[href*="adobesparkpost.app.link"]');
   if (links.length) {
     // eslint-disable-next-line import/no-cycle
     import('./branchlinks.js').then((mod) => mod.default(links));
@@ -476,4 +491,5 @@ export function decorateArea(area = document) {
   // transpile conflicting blocks
   transpileMarquee(area);
   overrideMiloColumns(area);
+  addJapaneseSectionHeaderSizing(area);
 }
diff --git a/express/scripts/utils/location-utils.js b/express/scripts/utils/location-utils.js
@@ -100,8 +100,8 @@ function getJapaneseTextCharacterCount(text) {
  * Default is "heading".
  * @param {string} selector CSS selector to select the target heading tags. Default is "h1, h2".
  */
-export function addHeaderSizing($block, classPrefix = 'heading', selector = 'h1, h2') {
-  const headings = $block.querySelectorAll(selector);
+export function addHeaderSizing(passedHeadings, $block , classPrefix = 'heading', selector = 'h1, h2') {
+  const headings = passedHeadings || $block.querySelectorAll(selector);
   // Each threshold of JP should be smaller than other languages
   // because JP characters are larger and JP sentences are longer
   const sizes = getConfig().locale.region === 'jp'