Merge pull request #626 from hlxsites/625-converter-update-product-menu

625 converter update product menu

paths.yaml

@@ -12,4 +12,5 @@ includes:
   - /content/danaher/ls/us/en
   - /content/experience-fragments/danaher/us/en/site/header
   - /content/experience-fragments/danaher/us/en/site/footer
-  - /content/dam/danaher/franklin
+  - /content/dam/danaher/franklin
+  - /content/experience-fragments/danaher/us/en/site/productdata

tools/actions/convert/test/fixtures/product1-converted.html

@@ -37,7 +37,7 @@ <h2>Next-generation fluorescent imaging solution for the assurance of monoclonal
             <p>The Monoclonality Report feature streamlines the creation of supporting documentation for regulatory agencies. Reports are automatically generated based on the parameters you select. The Monoclonality Report is an audit-ready document that supports filing for an Investigational New Drug (IND) Application with the FDA. (21 CFR Part 312)</p>
             <p>:dam-check-box:</p>
           </div>
-          <div></div>
+          <div><a href="https://play.vidyard.com/WwWUddqbVhBk8jtmGQ6dHF.html">Video Player</a></div>
         </div>
       </div>
       <h2>Highlights</h2>
@@ -92,6 +92,35 @@ <h2>CloneSelect Imager FL</h2>
         </div>
       </div>
       <h2>Streamlined Workflow</h2>
+      <div class="product-menu">
+        <div>
+          <div>
+            <p>
+              <img src="https://author-dummy.adobeaemcloud.com/content/dam/danaher/system/icons/product-menu-chevron.png" alt="">
+            </p>
+            <p>Image</p>
+          </div>
+          <div>/fragments/productdata/cloneselect-imager/master</div>
+        </div>
+        <div>
+          <div>
+            <p>
+              <img src="https://author-dummy.adobeaemcloud.com/content/dam/danaher/system/icons/product-menu-chevron.png" alt="">
+            </p>
+            <p>Analyze</p>
+          </div>
+          <div>/fragments/productdata/cloneselect-imager/master1</div>
+        </div>
+        <div>
+          <div>
+            <p>
+              <img src="https://author-dummy.adobeaemcloud.com/content/dam/danaher/system/icons/product-menu-chevron.png" alt="">
+            </p>
+            <p>Report</p>
+          </div>
+          <div>/fragments/productdata/cloneselect-imager/master11</div>
+        </div>
+      </div>
       <div class="section-metadata">
         <div>
           <div>tabIcon</div>

tools/actions/convert/test/fixtures/product3-converted.html

@@ -54,7 +54,7 @@ <h2>No constraints - 4x more data with 100% correlation</h2>
       <div class="columns">
         <div>
           <div>
-            <p><a href="https://player.vimeo.com/video/809017220?h=c59cdbdab2&#x26;badge=0&#x26;autopause=0&#x26;player_id=0&#x26;app_id=58479">lms-mica-spheroids-4_10</a></p>
+            <p><a href="https://player.vimeo.com/video/809017220?h=c59cdbdab2&#x26;badge=0&#x26;autopause=0&#x26;player_id=0&#x26;app_id=58479">Video Player</a></p>
             <p>3D Cell Culture, 7d spheroid formation of U343 cells. tfLC3 EGFP and mRFP + DAPI + WGA Alexa680. Objective: 20x NA 0.70 DRY</p>
           </div>
           <div>
@@ -82,7 +82,7 @@ <h1>No constraints - Achieve physiological-like conditions thoughout your experi
             </ul>
           </div>
           <div>
-            <p><a href="https://player.vimeo.com/video/809768643?h=0814b7152d&#x26;badge=0&#x26;autopause=0&#x26;player_id=0&#x26;app_id=58479">LMS Mica.mov</a></p>
+            <p><a href="https://player.vimeo.com/video/809768643?h=0814b7152d&#x26;badge=0&#x26;autopause=0&#x26;player_id=0&#x26;app_id=58479">Video Player</a></p>
             <p>Formation of 3D spheroids from 1000 stably transfected MDCK MX1-GFP cells per well (left half) and 1000 U2OS cells per well (right half). Time-lapse acquisition over 60 hours, with 30-minute intervals. Green, GFP. Gray, integrated modulation contrast.</p>
           </div>
         </div>

tools/importer/transformers/productMenu.js

@@ -1,5 +1,45 @@
-const createProductMenu = () => {
-  // const productMenu = main.querySelector('div.product-menu');
+/* global WebImporter */
+const createProductMenu = (main, document) => {
+  const productMenus = main.querySelectorAll('div.product-menu');
+  [...productMenus].forEach((productMenu) => {
+    const productMenuEl = productMenu.querySelector('product-menu');
+    // eslint-disable-next-line no-undef
+    const items = JSON.parse(decodeHtmlEntities(productMenuEl.getAttribute('menu-items')));
+    const rows = [];
+    items.forEach((item) => {
+      const divRight = document.createElement('div');
+      const divLeft = document.createElement('div');
+      if (item.image) {
+        const img = document.createElement('img');
+        img.src = item.image;
+        divLeft.append(img);
+      }
 
+      if (item.title) {
+        const pEl = document.createElement('p');
+        pEl.textContent = item.title;
+        divLeft.append(pEl);
+      }
+
+      if (item.fragmentPath) {
+        const pEL = document.createElement('p');
+        pEL.textContent = item.fragmentPath
+          .replace('content/experience-fragments/danaher/us/en/site', 'fragments')
+          .replace('/jcr:content', '');
+        divRight.append(pEL);
+      }
+      rows.push([divLeft, divRight]);
+    });
+
+    const cells = [
+      ['Product Menu'],
+      ...rows,
+    ];
+
+    if (rows.length > 0) {
+      const block = WebImporter.DOMUtils.createTable(cells, document);
+      productMenuEl.append(block);
+    }
+  });
 };
 export default createProductMenu;

tools/importer/transformers/util.js

@@ -170,10 +170,17 @@ export const pdfembed = (embedEl, document) => {
 
 export const videoembed = (embedEl, document) => {
   const videoEl = embedEl?.querySelector('iframe');
+  embedEl.innerHTML = '';
   const anc = document.createElement('a');
-  anc.href = videoEl.getAttribute('src');
+  let href = videoEl.getAttribute('src');
+  if (!href.startsWith('https:') && href.includes('vidyard')) {
+    if (href[href.length - 1] === '?') href = href.replace('?', '');
+    href = `https:${href}`;
+  }
+  anc.href = href;
   anc.textContent = 'Video Player';
-  embedEl.replaceWith(anc);
+  embedEl.append(anc);
+  return embedEl;
 };
 
 export const productcitations = (citations) => {
@@ -264,7 +271,6 @@ export const render = {
 
   video: (item, row, document) => {
     const videoEl = item.content ? item.content.querySelector('div.video') : item;
-    videoembed(videoEl, document);
-    row.push(videoEl);
+    row.push(videoembed(videoEl, document));
   },
 };