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" #}