|
1 | 1 | /** |
2 | | - * Intro.js v2.4.0 |
| 2 | + * Intro.js v2.5.0 |
3 | 3 | * https://github.com/usablica/intro.js |
4 | 4 | * |
5 | 5 | * Copyright (C) 2016 Afshin Mehrabani (@afshinmeh) |
|
18 | 18 | } |
19 | 19 | } (this, function (exports) { |
20 | 20 | //Default config/variables |
21 | | - var VERSION = '2.4.0'; |
| 21 | + var VERSION = '2.5.0'; |
22 | 22 |
|
23 | 23 | /** |
24 | 24 | * IntroJs main class |
|
401 | 401 | floatingElement.parentNode.removeChild(floatingElement); |
402 | 402 | } |
403 | 403 |
|
404 | | - //remove `introjs-showElement` class from the element |
405 | | - var showElement = document.querySelector('.introjs-showElement'); |
406 | | - if (showElement) { |
407 | | - _removeClass(showElement, /introjs-[a-zA-Z]+/g); |
408 | | - //showElement.className = showElement.className.replace(/introjs-[a-zA-Z]+/g, '').replace(/^\s+|\s+$/g, ''); // This is a manual trim. |
409 | | - } |
| 404 | + _removeShowElement(); |
410 | 405 |
|
411 | 406 | //remove `introjs-fixParent` class from the elements |
412 | 407 | var fixParents = document.querySelectorAll('.introjs-fixParent'); |
|
491 | 486 | tooltipOffset = _getOffset(tooltipLayer); |
492 | 487 | windowSize = _getWinSize(); |
493 | 488 |
|
494 | | - console.log(targetElement) |
495 | | - console.log(targetOffset) |
496 | | - console.log(tooltipOffset) |
497 | | - |
498 | 489 | switch (currentTooltipPosition) { |
499 | 490 | case 'top': |
500 | 491 | arrowLayer.className = 'introjs-arrow bottom'; |
|
712 | 703 | elementPosition = _getOffset(currentElement.element), |
713 | 704 | widthHeightPadding = 10; |
714 | 705 |
|
715 | | - |
716 | | - console.log('go', currentElement) |
717 | | - |
718 | | - //add target element position style |
719 | | - if (currentElement instanceof SVGElement) { |
720 | | - console.log('boo') |
721 | | - var parentElm = currentElement.parentNode; |
722 | | - |
723 | | - while (currentElement.parentNode != null) { |
724 | | - if (!parentElm.tagName || parentElm.tagName.toLowerCase() === 'body') break; |
725 | | - |
726 | | - if (parentElm.tagName.toLowerCase() === 'svg') { |
727 | | - conosle.log( |
728 | | - 'found parent' |
729 | | - ) |
730 | | - currentElement = parentElm; |
731 | | - } |
732 | | - |
733 | | - parentElm = parentElm.parentNode; |
734 | | - } |
735 | | - } |
736 | | - |
737 | 706 | // If the target element is fixed, the tooltip should be fixed as well. |
738 | 707 | // Otherwise, remove a fixed class that may be left over from the previous |
739 | 708 | // step. |
|
847 | 816 | } |
848 | 817 |
|
849 | 818 | //remove old classes if the element still exist |
850 | | - var oldShowElement = document.querySelector('.introjs-showElement'); |
851 | | - if (oldShowElement) { |
852 | | - _removeClass(oldShowElement, /introjs-[a-zA-Z]+/g); |
853 | | - } |
| 819 | + _removeShowElement(); |
854 | 820 |
|
855 | 821 | //we should wait until the CSS3 transition is competed (it's 0.3 sec) to prevent incorrect `height` and `width` calculation |
856 | 822 | if (self._lastShowElementTimer) { |
|
888 | 854 | } |
889 | 855 | }, 350); |
890 | 856 |
|
| 857 | + // end of old element if-else condition |
891 | 858 | } else { |
892 | 859 | var helperLayer = document.createElement('div'), |
893 | 860 | referenceLayer = document.createElement('div'), |
|
1024 | 991 |
|
1025 | 992 | //set proper position |
1026 | 993 | _placeTooltip.call(self, targetElement.element, tooltipLayer, arrowLayer, helperNumberLayer); |
| 994 | + |
| 995 | + //end of new element if-else condition |
1027 | 996 | } |
1028 | 997 |
|
1029 | 998 | //disable interaction |
|
1067 | 1036 | //Set focus on "next" button, so that hitting Enter always moves you onto the next step |
1068 | 1037 | nextTooltipButton.focus(); |
1069 | 1038 |
|
1070 | | - //add target element position style |
| 1039 | + _setShowElement(targetElement); |
| 1040 | + |
| 1041 | + if (!_elementInViewport(targetElement.element) && this._options.scrollToElement === true) { |
| 1042 | + var rect = targetElement.element.getBoundingClientRect(), |
| 1043 | + winHeight = _getWinSize().height, |
| 1044 | + top = rect.bottom - (rect.bottom - rect.top), |
| 1045 | + bottom = rect.bottom - winHeight; |
| 1046 | + |
| 1047 | + //Scroll up |
| 1048 | + if (top < 0 || targetElement.element.clientHeight > winHeight) { |
| 1049 | + window.scrollBy(0, top - this._options.scrollPadding); // 30px padding from edge to look nice |
| 1050 | + |
| 1051 | + //Scroll down |
| 1052 | + } else { |
| 1053 | + window.scrollBy(0, bottom + 70 + this._options.scrollPadding); // 70px + 30px padding from edge to look nice |
| 1054 | + } |
| 1055 | + } |
| 1056 | + |
| 1057 | + if (typeof (this._introAfterChangeCallback) !== 'undefined') { |
| 1058 | + this._introAfterChangeCallback.call(this, targetElement.element); |
| 1059 | + } |
| 1060 | + } |
| 1061 | + |
| 1062 | + /** |
| 1063 | + * To remove all show element(s) |
| 1064 | + * |
| 1065 | + * @api private |
| 1066 | + * @method _removeShowElement |
| 1067 | + */ |
| 1068 | + function _removeShowElement() { |
| 1069 | + var elms = document.querySelectorAll('.introjs-showElement'); |
| 1070 | + |
| 1071 | + for (var i = 0, l = elms.length; i < l; i++) { |
| 1072 | + var elm = elms[i]; |
| 1073 | + _removeClass(elm, /introjs-[a-zA-Z]+/g); |
| 1074 | + } |
| 1075 | + } |
| 1076 | + |
| 1077 | + /** |
| 1078 | + * To set the show element |
| 1079 | + * This function set a relative (in most cases) position and changes the z-index |
| 1080 | + * |
| 1081 | + * @api private |
| 1082 | + * @method _setShowElement |
| 1083 | + * @param {Object} targetElement |
| 1084 | + */ |
| 1085 | + function _setShowElement(targetElement) { |
| 1086 | + // we need to add this show element class to the parent of SVG elements |
| 1087 | + // because the SVG elements can't have independent z-index |
1071 | 1088 | if (targetElement.element instanceof SVGElement) { |
1072 | 1089 | var parentElm = targetElement.element.parentNode; |
1073 | 1090 |
|
1074 | 1091 | while (targetElement.element.parentNode != null) { |
1075 | 1092 | if (!parentElm.tagName || parentElm.tagName.toLowerCase() === 'body') break; |
1076 | 1093 |
|
1077 | 1094 | if (parentElm.tagName.toLowerCase() === 'svg') { |
1078 | | - _setClass(parentElm, 'introjs-showElement introjs-relativePosition') |
| 1095 | + _setClass(parentElm, 'introjs-showElement introjs-relativePosition'); |
1079 | 1096 | } |
1080 | 1097 |
|
1081 | 1098 | parentElm = parentElm.parentNode; |
1082 | 1099 | } |
1083 | | - } else { |
1084 | | - //targetElement.element.node.className += ' introjs-showElement'; |
1085 | | - _setClass(targetElement.element, 'introjs-showElement') |
1086 | 1100 | } |
1087 | 1101 |
|
1088 | | - console.log(parentElm) |
| 1102 | + _setClass(targetElement.element, 'introjs-showElement'); |
1089 | 1103 |
|
1090 | 1104 | var currentElementPosition = _getPropValue(targetElement.element, 'position'); |
1091 | 1105 | if (currentElementPosition !== 'absolute' && |
|
1111 | 1125 |
|
1112 | 1126 | parentElm = parentElm.parentNode; |
1113 | 1127 | } |
1114 | | - |
1115 | | - if (!_elementInViewport(targetElement.element) && this._options.scrollToElement === true) { |
1116 | | - var rect = targetElement.element.getBoundingClientRect(), |
1117 | | - winHeight = _getWinSize().height, |
1118 | | - top = rect.bottom - (rect.bottom - rect.top), |
1119 | | - bottom = rect.bottom - winHeight; |
1120 | | - |
1121 | | - //Scroll up |
1122 | | - if (top < 0 || targetElement.element.clientHeight > winHeight) { |
1123 | | - window.scrollBy(0, top - this._options.scrollPadding); // 30px padding from edge to look nice |
1124 | | - |
1125 | | - //Scroll down |
1126 | | - } else { |
1127 | | - window.scrollBy(0, bottom + 70 + this._options.scrollPadding); // 70px + 30px padding from edge to look nice |
1128 | | - } |
1129 | | - } |
1130 | | - |
1131 | | - if (typeof (this._introAfterChangeCallback) !== 'undefined') { |
1132 | | - this._introAfterChangeCallback.call(this, targetElement.element); |
1133 | | - } |
1134 | 1128 | } |
1135 | 1129 |
|
1136 | 1130 | function _setClass(element, className) { |
|
1141 | 1135 | } else { |
1142 | 1136 | element.className += ' ' + className; |
1143 | 1137 | } |
1144 | | - }; |
| 1138 | + } |
1145 | 1139 |
|
1146 | 1140 | function _removeClass(element, classNameRegex) { |
1147 | 1141 | if (element instanceof SVGElement) { |
|
1660 | 1654 | function _getOffset(element) { |
1661 | 1655 | var elementPosition = {}; |
1662 | 1656 |
|
| 1657 | + var body = document.body; |
| 1658 | + var docEl = document.documentElement; |
| 1659 | + |
| 1660 | + var scrollTop = window.pageYOffset || docEl.scrollTop || body.scrollTop; |
| 1661 | + var scrollLeft = window.pageXOffset || docEl.scrollLeft || body.scrollLeft; |
| 1662 | + |
1663 | 1663 | if (element instanceof SVGElement) { |
1664 | 1664 | var x = element.getBoundingClientRect() |
1665 | | - elementPosition.top = x.top; |
| 1665 | + elementPosition.top = x.top + scrollTop; |
1666 | 1666 | elementPosition.width = x.width; |
1667 | 1667 | elementPosition.height = x.height; |
1668 | | - elementPosition.left = x.left; |
| 1668 | + elementPosition.left = x.left + scrollLeft; |
1669 | 1669 | } else { |
1670 | 1670 | //set width |
1671 | 1671 | elementPosition.width = element.offsetWidth; |
|
0 commit comments