[MWPW-157116] - Add feature for pause animation on hover for PEP #3485
Conversation
|
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## stage #3485 +/- ##
==========================================
- Coverage 96.46% 96.07% -0.40%
==========================================
Files 255 179 -76
Lines 59430 50247 -9183
==========================================
- Hits 57329 48273 -9056
+ Misses 2101 1974 -127 ☔ View full report in Codecov by Sentry. |
Deva309
requested review from
salonijain3,
bandana147,
sharmrj,
nishantka and
sonawanesnehal3
| 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; |
There was a problem hiding this comment.
Use performance.now instead. Date depends on the user's system clock which may or may not be accurate.
There was a problem hiding this comment.
Done.
Using performance.now instead of Date.now.
| @@ -184,6 +184,10 @@ | |||
| transform-origin: top right; | |||
| } | |||
|
|
|||
| .appPrompt:hover .appPrompt-progress { | |||
| animation-play-state: paused; | |||
There was a problem hiding this comment.
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?
There was a problem hiding this comment.
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.
| @@ -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> | |||
There was a problem hiding this comment.
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?
There was a problem hiding this comment.
Same is handled with adding class and removed animation-play-state: running.
|
This PR has not been updated recently and will be closed in 7 days if no action is taken. Please ensure all checks are passing, https://github.com/orgs/adobecom/discussions/997 provides instructions. If the PR is ready to be merged, please mark it with the "Ready for Stage" label. |
|
Validation done on the pr in the below url |
spadmasa
added
verified
Implemented the 'Pause On Hover' feature for Feds PEP content, allowing it to adopt the same functionality available for Express PEP.
Authoring changes via section metadata in the PEP content to support the ability to author this feature:
Due deligence wiki: https://wiki.corp.adobe.com/display/WEBT/%5BDue+Diligence%5D+PEP+-+Federalizing+Express
Resolves: MWPW-157116
Test URLs:
QA: