|
1 | 1 | /** |
2 | | - * Intro.js v0.9.0 |
| 2 | + * Intro.js v1.0.0 |
3 | 3 | * https://github.com/usablica/intro.js |
4 | 4 | * MIT licensed |
5 | 5 | * |
|
19 | 19 | } |
20 | 20 | } (this, function (exports) { |
21 | 21 | //Default config/variables |
22 | | - var VERSION = '0.9.0'; |
| 22 | + var VERSION = '1.0.0'; |
23 | 23 |
|
24 | 24 | /** |
25 | 25 | * IntroJs main class |
|
59 | 59 | /* Set the overlay opacity */ |
60 | 60 | overlayOpacity: 0.8, |
61 | 61 | /* Precedence of positions, when auto is enabled */ |
62 | | - positionPrecedence: ["bottom", "top", "right", "left"] |
| 62 | + positionPrecedence: ["bottom", "top", "right", "left"], |
| 63 | + /* Disable an interaction with element? */ |
| 64 | + disableInteraction: false |
63 | 65 | }; |
64 | 66 | } |
65 | 67 |
|
|
217 | 219 | window.addEventListener('keydown', self._onKeyDown, true); |
218 | 220 | } |
219 | 221 | //for window resize |
220 | | - window.addEventListener("resize", self._onResize, true); |
| 222 | + window.addEventListener('resize', self._onResize, true); |
221 | 223 | } else if (document.attachEvent) { //IE |
222 | 224 | if (this._options.keyboardNavigation) { |
223 | 225 | document.attachEvent('onkeydown', self._onKeyDown); |
224 | 226 | } |
225 | 227 | //for window resize |
226 | | - document.attachEvent("onresize", self._onResize); |
| 228 | + document.attachEvent('onresize', self._onResize); |
227 | 229 | } |
228 | 230 | } |
229 | 231 | return false; |
|
345 | 347 | var referenceLayer = targetElement.querySelector('.introjs-tooltipReferenceLayer'); |
346 | 348 | if (referenceLayer) { |
347 | 349 | referenceLayer.parentNode.removeChild(referenceLayer); |
| 350 | + } |
| 351 | + //remove disableInteractionLayer |
| 352 | + var disableInteractionLayer = targetElement.querySelector('.introjs-disableInteraction'); |
| 353 | + if (disableInteractionLayer) { |
| 354 | + disableInteractionLayer.parentNode.removeChild(disableInteractionLayer); |
348 | 355 | } |
349 | 356 |
|
350 | 357 | //remove intro floating element |
|
615 | 622 | } |
616 | 623 | } |
617 | 624 |
|
| 625 | + /** |
| 626 | + * Add disableinteraction layer and adjust the size and position of the layer |
| 627 | + * |
| 628 | + * @api private |
| 629 | + * @method _disableInteraction |
| 630 | + */ |
| 631 | + function _disableInteraction () { |
| 632 | + var disableInteractionLayer = document.querySelector('.introjs-disableInteraction'); |
| 633 | + if (disableInteractionLayer === null) { |
| 634 | + disableInteractionLayer = document.createElement('div'); |
| 635 | + disableInteractionLayer.className = 'introjs-disableInteraction'; |
| 636 | + this._targetElement.appendChild(disableInteractionLayer); |
| 637 | + } |
| 638 | + |
| 639 | + _setHelperLayerPosition.call(this, disableInteractionLayer); |
| 640 | + } |
| 641 | + |
618 | 642 | /** |
619 | 643 | * Show an element on the page |
620 | 644 | * |
|
669 | 693 | //remove old classes |
670 | 694 | var oldShowElement = document.querySelector('.introjs-showElement'); |
671 | 695 | oldShowElement.className = oldShowElement.className.replace(/introjs-[a-zA-Z]+/g, '').replace(/^\s+|\s+$/g, ''); |
| 696 | + |
672 | 697 | //we should wait until the CSS3 transition is competed (it's 0.3 sec) to prevent incorrect `height` and `width` calculation |
673 | 698 | if (self._lastShowElementTimer) { |
674 | 699 | clearTimeout(self._lastShowElementTimer); |
|
724 | 749 | bulletsLayer.style.display = 'none'; |
725 | 750 | } |
726 | 751 |
|
| 752 | + |
727 | 753 | var ulContainer = document.createElement('ul'); |
728 | 754 |
|
729 | 755 | for (var i = 0, stepsLength = this._introItems.length; i < stepsLength; i++) { |
|
734 | 760 | self.goToStep(this.getAttribute('data-stepnumber')); |
735 | 761 | }; |
736 | 762 |
|
737 | | - if (i === 0) anchorLink.className = "active"; |
| 763 | + if (i === (targetElement.step-1)) anchorLink.className = 'active'; |
738 | 764 |
|
739 | 765 | anchorLink.href = 'javascript:void(0);'; |
740 | 766 | anchorLink.innerHTML = " "; |
|
762 | 788 | helperNumberLayer.innerHTML = targetElement.step; |
763 | 789 | referenceLayer.appendChild(helperNumberLayer); |
764 | 790 | } |
| 791 | + |
765 | 792 | tooltipLayer.appendChild(arrowLayer); |
766 | 793 | referenceLayer.appendChild(tooltipLayer); |
767 | 794 |
|
|
821 | 848 | _placeTooltip.call(self, targetElement.element, tooltipLayer, arrowLayer, helperNumberLayer); |
822 | 849 | } |
823 | 850 |
|
| 851 | + //disable interaction |
| 852 | + if (this._options.disableInteraction === true) { |
| 853 | + _disableInteraction.call(self); |
| 854 | + } |
| 855 | + |
824 | 856 | if (this._currentStep == 0 && this._introItems.length > 1) { |
825 | 857 | prevTooltipButton.className = 'introjs-button introjs-prevbutton introjs-disabled'; |
826 | 858 | nextTooltipButton.className = 'introjs-button introjs-nextbutton'; |
|
856 | 888 | //More detail: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context |
857 | 889 | var zIndex = _getPropValue(parentElm, 'z-index'); |
858 | 890 | var opacity = parseFloat(_getPropValue(parentElm, 'opacity')); |
859 | | - if (/[0-9]+/.test(zIndex) || opacity < 1) { |
| 891 | + var transform = _getPropValue(parentElm, 'transform') || _getPropValue(parentElm, '-webkit-transform') || _getPropValue(parentElm, '-moz-transform') || _getPropValue(parentElm, '-ms-transform') || _getPropValue(parentElm, '-o-transform'); |
| 892 | + if (/[0-9]+/.test(zIndex) || opacity < 1 || transform !== 'none') { |
860 | 893 | parentElm.className += ' introjs-fixParent'; |
861 | 894 | } |
862 | 895 |
|
|
1102 | 1135 | }, |
1103 | 1136 | exit: function() { |
1104 | 1137 | _exitIntro.call(this, this._targetElement); |
| 1138 | + return this; |
1105 | 1139 | }, |
1106 | 1140 | refresh: function() { |
1107 | 1141 | _setHelperLayerPosition.call(this, document.querySelector('.introjs-helperLayer')); |
|
0 commit comments