Cavemanon/piratepoet
8
Fork 0
Code Pull Requests Actions Releases 16 Activity

Fix intro.js positioning bug on 'position: fixed' elements

Browse Source 
Intro.js has a bug causing tooltips appear in wrong places (or out of sceen)
when using 'position: fixed' on target element and not being scrolled to top.
This fixes the bug taking window scroll into account. The only place where
it can be seen is during the highlight animation when not scrolled to top,
which is not serious and not very likely to be seen.

[MAILPOET-1446]
This commit is contained in:
Jan Jakeš
2018-08-04 19:24:27 +02:00
committed by pavel-mailpoet
parent fe5b1b9683
commit c7af4af368
1 changed files with 9 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
assets/js/src/intro.jsx
View File

@@ -38,8 +38,16 @@ function Intro() {
tooltipPosition: 'auto',
});
intro.onafterchange(() => {
intro.onafterchange((targetElement) => {
document.body.classList.add('mailpoet-intro-active');
// fix for intro.js positioning bug on 'position: fixed' elements
if (getComputedStyle(targetElement).getPropertyValue('position') === 'fixed') {
const helperLayer = document.querySelector('.introjs-helperLayer');
const referenceLayer = document.querySelector('.introjs-tooltipReferenceLayer');
referenceLayer.style.top = `${parseInt(referenceLayer.style.top, 10) - pageYOffset}px`;
helperLayer.style.top = `${parseInt(helperLayer.style.top, 10) - pageYOffset}px`;
}
});
intro.onexit(() => {