Merge pull request #242 from adobecom/aexg5198

AEXG5198 | ENUS, UK, IN | (mWeb) Homepage Test : Scroll Fix

Author: JingleH

express/code/scripts/mep/aexg5198/mobile-fork-button/mobile-fork-button.css

@@ -14,9 +14,11 @@ main .mobile-fork-button.long-text {
 main .mobile-fork-button.mweb-mobile-fork::after {
     content: '';
     position: fixed;
-    width: 100vh;
-    height: 100vh;
+    pointer-events: initial;
     top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
     background-color: rgba(0, 0, 0, .44);
 }
 

express/code/scripts/mep/aexg5198/mobile-fork-button/mobile-fork-button.js

@@ -115,22 +115,13 @@ function collectFloatingButtonData() {
 }
 
 async function mWebStickyCTA() {
-  // const blockHTML = `
-  //   <div class="section" data-status="decorated" data-idx="8">
-  //     <div class="floating-button-wrapper">
-  //       <div class="floating-button meta-powered">
-  //         <div>mobile</div>
-  //       </div>
-  //     </div>
-  //   </div>`;
   const newBlock = createTag(
     'div',
     { class: 'floating-button-wrapper' },
     '<div class="floating-button meta-powered"><div>mobile</div></div>',
   );
   const oldBlock = document.querySelector('.mobile-fork-button');
   oldBlock.replaceWith(newBlock);
-  // block.outerHTML = blockHTML;
 
   const audience = 'mobile';
   const data = collectFloatingButtonData();
@@ -141,8 +132,11 @@ async function mWebStickyCTA() {
 }
 
 function mWebOverlayScroll() {
-  const mobileForkButton = document.querySelector('.mobile-fork-button');
-  if (mobileForkButton && mobileForkButton.classList.contains('mweb-mobile-fork')) {
+  // This is to make scroll work when switching between mobile and desktop.
+  // May need rewrite for RTP.
+  const mobileForkButton = document.querySelector('.mobile-fork-button.mweb-mobile-fork');
+  if (mobileForkButton
+    && window.getComputedStyle(mobileForkButton, null).display !== 'none') {
     document.body.style.overflow = 'hidden';
   } else {
     document.body.style.overflow = '';
@@ -152,13 +146,11 @@ function mWebOverlayScroll() {
 function mWebBuildElements() {
   const mobileForkButton = document.querySelector('.mobile-fork-button');
   mobileForkButton.classList.add('mweb-mobile-fork');
-
-  const closeElement = document.createElement('a');
-  closeElement.classList.add('mweb-close');
-  closeElement.innerHTML = `
+  const svg = `
     <svg width="13" height="12" viewBox="0 0 13 12" fill="none" xmlns="http://www.w3.org/2000/svg">
       <path d="M7.45455 5.99986L12.1404 1.31442C12.4041 1.05075 12.4041 0.623598 12.1404 0.359925C11.8767 0.0962522 11.4496 0.0962522 11.1859 0.359925L6.5 5.04537L1.81412 0.359925C1.55044 0.0962522 1.12329 0.0962522 0.85962 0.359925C0.595947 0.623598 0.595947 1.05075 0.85962 1.31442L5.54545 5.99986L0.85962 10.6853C0.595947 10.949 0.595947 11.3761 0.85962 11.6398C0.991452 11.7716 1.16416 11.8376 1.33686 11.8376C1.50956 11.8376 1.68227 11.7716 1.81411 11.6398L6.49999 6.95436L11.1859 11.6398C11.3177 11.7716 11.4904 11.8376 11.6631 11.8376C11.8358 11.8376 12.0085 11.7716 12.1404 11.6398C12.404 11.3761 12.404 10.949 12.1404 10.6853L7.45455 5.99986Z" fill="#292929"/>
     </svg>`;
+  const closeElement = createTag('a', { class: 'mweb-close' }, svg);
   mobileForkButton.querySelector('div:first-child').prepend(closeElement);
 }
 
@@ -167,8 +159,8 @@ function mWebCloseEvents() {
   closeElements.forEach((element) => {
     element.addEventListener('click', (event) => {
       event.preventDefault();
-      mWebOverlayScroll();
       mWebStickyCTA();
+      mWebOverlayScroll();
     });
   });
 }