Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[MWPW-157116] - Add feature for pause animation on hover for PEP #3485

Merged
merged 3 commits into from
Jan 27, 2025
Merged

[MWPW-157116] - Add feature for pause animation on hover for PEP #3485

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
0412450
[MWPW-157116] changes for pause animation on hover for PEP
Deva309 Jan 15, 2025
66461d1
Review comments fix
Deva309 Jan 15, 2025
0561e1f
Merge branch 'stage' of github.com:adobecom/milo into MWPW-157116
Deva309 Jan 15, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions libs/features/webapp-prompt/webapp-prompt.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -184,6 +184,10 @@
transform-origin: top right;
}

.appPrompt:hover .appPrompt-progress {
animation-play-state: paused;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I may be mistaken but, since this class is always on the prompt, the animation will pause even if pause on hover is turned off, right?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I have updated the implementation for this. Now, the class appPrompt-progressPauseOnHover is added when pause-on-hover is enabled. CSS has been applied specifically to this class, ensuring that the styles are applied only when pause-on-hover is enabled.

}

@keyframes appPrompt-animate {
100% {
transform: scaleX(1);
Expand Down
40 changes: 34 additions & 6 deletions libs/features/webapp-prompt/webapp-prompt.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ const CONFIG = {
selectors: { prompt: '.appPrompt' },
delay: 7000,
loaderColor: '#EB1000',
pauseOnHover: 'off',
...DISMISSAL_CONFIG,
};

Expand Down Expand Up @@ -155,7 +156,7 @@ export class AppPrompt {
this.parent.prepend(this.template);
this.elements.closeIcon.focus();

this.redirectFn = this.initRedirect();
this.redirectFn = this.initRedirect(this.options['pause-on-hover'] === 'on');
};

doesEntitlementMatch = async () => {
Expand Down Expand Up @@ -225,10 +226,12 @@ export class AppPrompt {
metadata['dismissal-animation-duration'] = parseInt(metadata['dismissal-animation-duration'] ?? CONFIG.animationDuration, 10);
metadata['dismissal-tooltip-message'] ??= CONFIG.tooltipMessage;
metadata['dismissal-tooltip-duration'] = parseInt(metadata['dismissal-tooltip-duration'] ?? CONFIG.tooltipDuration, 10);
metadata['pause-on-hover'] ??= CONFIG.pauseOnHover;
this.options = metadata;
};

decorate = () => {
const animationPlayState = this.options['pause-on-hover'] === 'on';
this.elements.closeIcon = toFragment`<button daa-ll="Close Modal" aria-label="${this.cancel}" class="appPrompt-close"></button>`;
this.elements.cta = toFragment`<button daa-ll="Stay on this page" class="appPrompt-cta appPrompt-cta--close">${this.cancel}</button>`;
this.elements.profile = this.profile
Expand Down Expand Up @@ -257,7 +260,7 @@ export class AppPrompt {
${this.elements.cta}
</div>
<div class="appPrompt-progressWrapper">
<div class="appPrompt-progress" style="background-color: ${this.options['loader-color']}; animation-duration: ${this.options['loader-duration']}ms;"></div>
<div class="appPrompt-progress" style="background-color: ${this.options['loader-color']}; animation-duration: ${this.options['loader-duration']}ms; ${!animationPlayState && 'animation-play-state: running;'}"></div>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Shouldn't it have animation-play-state: running by default? In that case shouldn't this be in the css stylesheet rather than inline here; since you also have the animation-play-state: paused rule there as well it makes sense for them to be colocated?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same is handled with adding class and removed animation-play-state: running.

</div>
</div>`;
};
Expand All @@ -278,10 +281,35 @@ export class AppPrompt {
window.location.assign(url);
}

initRedirect = () => setTimeout(() => {
this.close({ saveDismissal: false, dismissalActions: false });
AppPrompt.redirectTo(this.options['redirect-url']);
}, this.options['loader-duration']);
initRedirect = (withPause = false) => {
let timeoutId;
let remainingTime = this.options['loader-duration'];
let startTime;

const startTimeout = () => {
startTime = Date.now();
timeoutId = setTimeout(() => {
this.close({ saveDismissal: false, dismissalActions: false });
AppPrompt.redirectTo(this.options['redirect-url']);
}, remainingTime);
};

const stopTimeout = () => {
clearTimeout(timeoutId);
remainingTime -= Date.now() - startTime;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Use performance.now instead. Date depends on the user's system clock which may or may not be accurate.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done.
Using performance.now instead of Date.now.

};

if (withPause) {
const appPromptElem = document.querySelector(CONFIG.selectors.prompt);
if (appPromptElem) {
appPromptElem.addEventListener('mouseenter', stopTimeout);
appPromptElem.addEventListener('mouseleave', startTimeout);
}
}

// Start the timeout initially
startTimeout();
};

isDismissedPrompt = () => AppPrompt.getDismissedPrompts().includes(this.id);

Expand Down
4 changes: 4 additions & 0 deletions test/features/webapp-prompt/mocks/pep-prompt-content.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,5 +52,9 @@ export default ({
<div>dismissal-tooltip-duration</div>
<div>${tooltipDuration}</div>
</div>`}
<div>
<div>pause-on-hover</div>
<div>on</div>
</div>
</div>
</div>`;
9 changes: 9 additions & 0 deletions test/features/webapp-prompt/webapp-prompt.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -167,6 +167,15 @@ describe('PEP', () => {
expect(document.querySelector(allSelectors.pepWrapper)).to.not.exist;
});

it('stops the PEP timer when PEP content is hovered', async () => {
const clock = sinon.useFakeTimers();
await initPep({});
document.querySelector(allSelectors.pepWrapper).dispatchEvent(new Event('mouseenter'));
clock.tick(10000);
expect(window.location.hash).to.not.equal('#soup');
clock.uninstall();
});

it('redirects when the PEP timer runs out', async () => {
const clock = sinon.useFakeTimers();
await initPep({});
Expand Down
Loading