From 3973bfc572186953d8d2ae84d02aed8b75319448 Mon Sep 17 00:00:00 2001 From: Jeremy John Date: Tue, 17 Sep 2019 12:39:18 -0500 Subject: [PATCH] fix(with-without): fix IE 11 not supporting transform w/in svg --- .../self-drawing-circle.js | 18 ++++++++++-------- .../self-drawing-circle.scss | 9 +++++++-- ...thPega_desktop.jpg => BG_with_desktop.jpg} | Bin ...withPega_mobile.jpg => BG_with_mobile.jpg} | Bin ...withPega_tablet.jpg => BG_with_tablet.jpg} | Bin ...tPega_mobile.jpg => BG_without_mobile.jpg} | Bin .../js/handleActiveRegionChange.js | 11 +++++++++++ packages/with-without/js/handleResize.js | 15 ++++++++++++++- packages/with-without/js/with-without.js | 5 ++++- packages/with-without/with-without.scss | 8 ++++---- packages/with-without/with-without.twig | 2 +- 11 files changed, 51 insertions(+), 17 deletions(-) rename packages/with-without/img/{BG_withPega_desktop.jpg => BG_with_desktop.jpg} (100%) rename packages/with-without/img/{BG_withPega_mobile.jpg => BG_with_mobile.jpg} (100%) rename packages/with-without/img/{BG_withPega_tablet.jpg => BG_with_tablet.jpg} (100%) rename packages/with-without/img/{BG_withoutPega_mobile.jpg => BG_without_mobile.jpg} (100%) 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 index a5f9d74b1e..c60e7be62b 100644 --- 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" > - - - +
+ + + +
`; } 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 index 6900109545..4063eb27f6 100644 --- 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); } -} \ No newline at end of file +} diff --git a/packages/with-without/img/BG_withPega_desktop.jpg b/packages/with-without/img/BG_with_desktop.jpg similarity index 100% rename from packages/with-without/img/BG_withPega_desktop.jpg rename to packages/with-without/img/BG_with_desktop.jpg diff --git a/packages/with-without/img/BG_withPega_mobile.jpg b/packages/with-without/img/BG_with_mobile.jpg similarity index 100% rename from packages/with-without/img/BG_withPega_mobile.jpg rename to packages/with-without/img/BG_with_mobile.jpg diff --git a/packages/with-without/img/BG_withPega_tablet.jpg b/packages/with-without/img/BG_with_tablet.jpg similarity index 100% rename from packages/with-without/img/BG_withPega_tablet.jpg rename to packages/with-without/img/BG_with_tablet.jpg diff --git a/packages/with-without/img/BG_withoutPega_mobile.jpg b/packages/with-without/img/BG_without_mobile.jpg similarity index 100% rename from packages/with-without/img/BG_withoutPega_mobile.jpg rename to packages/with-without/img/BG_without_mobile.jpg diff --git a/packages/with-without/js/handleActiveRegionChange.js b/packages/with-without/js/handleActiveRegionChange.js index e6863e36de..27049bdd84 100644 --- a/packages/with-without/js/handleActiveRegionChange.js +++ b/packages/with-without/js/handleActiveRegionChange.js @@ -209,22 +209,32 @@ 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; }; @@ -232,6 +242,7 @@ const triggerActiveRegionChange = async (checked, wwoSwiper, init = false) => { 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 index 430d69dfa1..33793dbfc5 100644 --- 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 index 8be2a3f7c0..9f9f67b95b 100644 --- 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 index 87a797e185..ca6b1e9549 100644 --- 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 index e2a4d1fbaf..d35c60c794 100644 --- a/packages/with-without/with-without.twig +++ b/packages/with-without/with-without.twig @@ -25,7 +25,7 @@
-
+
{# wo stands for "without" #}