fix(with-without): fix IE 11 not supporting transform w/in svg

boltdesignsystem · Sep 17, 2019 · 3973bfc · 3973bfc
1 parent ea5bb8a
commit 3973bfc
Show file tree

Hide file tree

Showing 11 changed files with 51 additions and 17 deletions.
diff --git a/packages/with-without/bolt-self-drawing-circle/self-drawing-circle.js b/packages/with-without/bolt-self-drawing-circle/self-drawing-circle.js
@@ -74,14 +74,16 @@ class SvgAnimations extends withLitHtml() {
         class="bolt-self-drawing-circle"
         is="shadow-root"
       >
-        <svg viewBox="-160 -160 320 320">
-          <circle
-            id="bolt-self-drawing-circle-outline"
-            class="bolt-self-drawing-circle-outline"
-            r="159"
-            stroke-dasharray="0 1000"
-          />
-        </svg>
+        <div class="bolt-self-drawing-circle-rotation">
+          <svg viewBox="-160 -160 320 320">
+            <circle
+              id="bolt-self-drawing-circle-outline"
+              class="bolt-self-drawing-circle-outline"
+              r="159"
+              stroke-dasharray="0 1000"
+            />
+          </svg>
+        </div>
       </div>
     `;
   }

diff --git a/packages/with-without/bolt-self-drawing-circle/self-drawing-circle.scss b/packages/with-without/bolt-self-drawing-circle/self-drawing-circle.scss
@@ -10,15 +10,20 @@
   }
 }
 
+.bolt-self-drawing-circle-rotation {
+  width: 100%;
+  height: 100%;
+  transform: rotate(70deg) scaleX(-1);
+}
+
 .bolt-self-drawing-circle-outline {
   fill: transparent;
   stroke: bolt-color(white);
   stroke-width: 1;
-  transform: rotate(70deg) scaleX(-1);
 }
 
 @keyframes spin {
  100% {
    transform: rotateZ(-360deg);
   }
-}
+}
diff --git a/.../with-without/img/BG_withPega_desktop.jpg → ...ages/with-without/img/BG_with_desktop.jpg b/.../with-without/img/BG_withPega_desktop.jpg → ...ages/with-without/img/BG_with_desktop.jpg
diff --git a/...s/with-without/img/BG_withPega_mobile.jpg → packages/with-without/img/BG_with_mobile.jpg b/...s/with-without/img/BG_withPega_mobile.jpg → packages/with-without/img/BG_with_mobile.jpg
diff --git a/...s/with-without/img/BG_withPega_tablet.jpg → packages/with-without/img/BG_with_tablet.jpg b/...s/with-without/img/BG_withPega_tablet.jpg → packages/with-without/img/BG_with_tablet.jpg
diff --git a/...ith-without/img/BG_withoutPega_mobile.jpg → ...es/with-without/img/BG_without_mobile.jpg b/...ith-without/img/BG_withoutPega_mobile.jpg → ...es/with-without/img/BG_without_mobile.jpg
diff --git a/packages/with-without/js/handleActiveRegionChange.js b/packages/with-without/js/handleActiveRegionChange.js
@@ -209,29 +209,40 @@ const triggerActiveRegionChange = async (checked, wwoSwiper, init = false) => {
   } else {
     // The event handler for swiper doesn't respect await, so trigger here directly.
 
+    console.error('before restoreContentBeforeSlideIn');
     await restoreContentBeforeSlideIn(inGroupAttrVal, mainWrapper);
+    console.error('before getCurriedAnimateContentOut');
+
     await getCurriedAnimateContentOut(
       outGroupAttrVal,
       inGroupAttrVal,
       mainWrapper,
     )();
 
+    console.error('before once slideChangeTransitionEnd', wwoSwiper);
+
     wwoSwiper.once(
       'slideChangeTransitionEnd',
       getCurriedAnimateContentIn(inGroupAttrVal, mainWrapper),
     );
+    console.error('before wwoSwiper.slideNext or slidePrev');
+
     if (withIsBecomingActive) {
       wwoSwiper.slideNext();
     } else {
       wwoSwiper.slidePrev();
     }
+
+    console.error('withIsBecomingActive', withIsBecomingActive);
+
   }
   return true;
 };
 
 const handleActiveRegionChangeRequest = (checked, wwoSwiper) => {
   const animControllerEl = document.querySelector('#c-pega-wwo__wrapper');
   const animIsInProgress = !!animControllerEl.getAttribute('anim-in-progress');
+  console.error('in handleActiveRegionChangeRequest', animIsInProgress);
 
   if (animIsInProgress) {
     return;

diff --git a/packages/with-without/js/handleResize.js b/packages/with-without/js/handleResize.js
@@ -1,6 +1,20 @@
 import { triggerAnimateInOnInOnlyContent } from './handleActiveRegionChange';
 
+let lastWindowHeight;
+let lastWindowWidth;
+
 const handleResize = () => {
+  // To fix Edge firing resize constantly.
+  const heightHasChanged =
+    window.innerHeight && window.innerHeight !== lastWindowHeight;
+  const widthHasChanged =
+    window.innerWidth && window.innerWidth !== lastWindowWidth;
+  if (!widthHasChanged || !heightHasChanged) {
+    return; // bail if no change.
+  }
+  lastWindowHeight = window.innerHeight;
+  lastWindowWidth = window.innerWidth;
+
   // @TODO replace with theme token.
   const isMobile = window.matchMedia('(max-width: 1200px)').matches;
   const slideContentInner = Array.from(
@@ -13,7 +27,6 @@ const handleResize = () => {
   )
     ? 'wo'
     : 'w';
-
   triggerAnimateInOnInOnlyContent(activeSlideString);
 
   if (isMobile) {

diff --git a/packages/with-without/js/with-without.js b/packages/with-without/js/with-without.js
@@ -18,7 +18,7 @@ const toggleInputClass = '.c-pega-www__toggle-input';
 const checkedValue = 'w';
 
 // Initialize the swiper for sliding between with and without.
-const wwoSwiper = new Swiper('.c-pega-wwo__swiper-container', {
+const wwoSwiper = new Swiper('#c-pega-wwo__swiper-container', {
   speed: 500,
   spaceBetween: 0,
   noSwiping: true,
@@ -45,10 +45,12 @@ Array.from(document.querySelectorAll(toggleInputClass)).forEach(el => {
 const animControllerEl = document.querySelector('#c-pega-wwo__wrapper');
 
 animControllerEl.addEventListener('animateStart', e => {
+  console.error('animateStart');
   e.target.setAttribute('anim-in-progress', 1);
 });
 
 animControllerEl.addEventListener('animateEnd', e => {
+  console.error('animateEnd');
   e.target.removeAttribute('anim-in-progress');
   // If the animation state doesn't match the state of the toggle, transition.
   const activeAttr = animControllerEl.getAttribute('active');
@@ -68,6 +70,7 @@ document.querySelectorAll('.c-pega-wwo__region-blocks').forEach(el => {
   el.addEventListener('click', handleBlockTitleMobileAccordionClick);
 });
 
+// Set up the modals.
 const learnMoreModal = document.querySelector('.c-pega-www__modal--learn-more');
 const learnMoreVideo = document.querySelector('.c-pega-www__video--learn-more');
 

diff --git a/packages/with-without/with-without.scss b/packages/with-without/with-without.scss
@@ -120,7 +120,7 @@ bolt-animate {
     overflow: hidden;
 
     @include bolt-mq(xlarge) {
-      min-height: unset;
+      min-height: 100%;
     }
   }
 
@@ -164,7 +164,7 @@ bolt-animate {
       top: 0;
       bottom: 0;
       width: 100%;
-      max-width: unset;
+      max-width: 100%;
       height: 100%;
     }
 
@@ -251,7 +251,7 @@ bolt-animate {
   }
 
   &__circles-wrapper {
-    $pega-wwo--circles-top-padding: 17%;
+    $pega-wwo--circles-top-padding: 18%;
     // For some reason, the calculation was off, and the circle wobbled.
     $pega-wwo--circles-top-padding--height-calculation: 17.98225%;
     display: none;
@@ -778,7 +778,7 @@ bolt-animate {
           }
 
           @include bolt-mq($from: xlarge) {
-            max-height: unset;
+            max-height: 100%;
             overflow: visible;
           }
         }

diff --git a/packages/with-without/with-without.twig b/packages/with-without/with-without.twig
@@ -25,7 +25,7 @@
         </div>
       </div>
       <div class="c-pega-wwo__swiper-container-wrapper">
-        <div class="c-pega-wwo__swiper-container">
+        <div class="c-pega-wwo__swiper-container" id="c-pega-wwo__swiper-container">
           <article class="c-pega-wwo__swiper-wrapper swiper-wrapper swiper-no-swiping">
             {# wo stands for "without" #}
             <div class="c-pega-wwo__swiper-slide c-pega-wwo__swiper-slide-wo swiper-no-swiping swiper-slide">