diff --git a/.gitignore b/.gitignore index b512c09d4..bc3df7151 100644 --- a/.gitignore +++ b/.gitignore @@ -1 +1,2 @@ -node_modules \ No newline at end of file +node_modules +.idea/* \ No newline at end of file diff --git a/bower.json b/bower.json index f38d3d907..baf02d9d7 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,5 @@ { "name": "intro.js", - "version": "1.0.0", "description": "A better way for new feature introduction and step-by-step users guide for your website and project.", "keywords": ["demo", "intro", "introduction"], "homepage": "http://usablica.github.com/intro.js/", diff --git a/intro.js b/intro.js index 817739bd1..06008c220 100644 --- a/intro.js +++ b/intro.js @@ -29,6 +29,8 @@ function IntroJs(obj) { this._targetElement = obj; + this._preventScroll = false; + this._options = { /* Next button label in tooltip box */ nextLabel: 'Next →', @@ -65,7 +67,9 @@ /* Precedence of positions, when auto is enabled */ positionPrecedence: ["bottom", "top", "right", "left"], /* Disable an interaction with element? */ - disableInteraction: false + disableInteraction: false, + /* Show a "X" at the top right of the helplayer */ + showCloseX: true }; } @@ -89,12 +93,21 @@ var currentItem = _cloneObject(this._options.steps[i]); //set the step currentItem.step = introItems.length + 1; + var givenElementNotFound = false; //use querySelector function only when developer used CSS selector if (typeof(currentItem.element) === 'string') { //grab the element with given selector from the page currentItem.element = document.querySelector(currentItem.element); + + //element given cannot be found, so we mark it + if (!currentItem.element || !currentItem.element.getAttribute('id')) { + givenElementNotFound = true; + } } + //if the given element does not exist, exclude it from the steps + if (givenElementNotFound) continue; + //intro without element if (typeof(currentItem.element) === 'undefined' || currentItem.element == null) { var floatingElementQuery = document.querySelector(".introjsFloatingElement"); @@ -135,7 +148,9 @@ step: parseInt(currentElement.getAttribute('data-step'), 10), tooltipClass: currentElement.getAttribute('data-tooltipClass'), highlightClass: currentElement.getAttribute('data-highlightClass'), - position: currentElement.getAttribute('data-position') || this._options.tooltipPosition + position: currentElement.getAttribute('data-position') || this._options.tooltipPosition, + padding: currentElement.getAttribute('data-padding'), + hideTextBackground: currentElement.getAttribute('data-hideTextBackground') }; } } @@ -162,7 +177,9 @@ step: nextStep + 1, tooltipClass: currentElement.getAttribute('data-tooltipClass'), highlightClass: currentElement.getAttribute('data-highlightClass'), - position: currentElement.getAttribute('data-position') || this._options.tooltipPosition + position: currentElement.getAttribute('data-position') || this._options.tooltipPosition, + padding: currentElement.getAttribute('data-padding'), + hideTextBackground: currentElement.getAttribute('data-hideTextBackground') }; } } @@ -334,6 +351,24 @@ _showElement.call(this, nextStep); } + function removeOverlayLayer(targetElement) { + //remove overlay layer from the page + var overlayLayer = targetElement.querySelectorAll('.introjs-overlay'); + + //return if intro already completed or skipped + if (!overlayLayer.length) { + return; + } + + [].forEach.call(overlayLayer, function (o) { + //for fade-out animation + o.style.opacity = 0; + if (o.parentNode) { + o.parentNode.removeChild(o); + } + }); + } + /** * Exit from intro * @@ -342,21 +377,7 @@ * @param {Object} targetElement */ function _exitIntro(targetElement) { - //remove overlay layer from the page - var overlayLayer = targetElement.querySelector('.introjs-overlay'); - - //return if intro already completed or skipped - if (overlayLayer == null) { - return; - } - - //for fade-out animation - overlayLayer.style.opacity = 0; - setTimeout(function () { - if (overlayLayer.parentNode) { - overlayLayer.parentNode.removeChild(overlayLayer); - } - }, 500); + removeOverlayLayer.call(this, targetElement); //remove all helper layers var helperLayer = targetElement.querySelector('.introjs-helperLayer'); @@ -367,7 +388,7 @@ var referenceLayer = targetElement.querySelector('.introjs-tooltipReferenceLayer'); if (referenceLayer) { referenceLayer.parentNode.removeChild(referenceLayer); - } + } //remove disableInteractionLayer var disableInteractionLayer = targetElement.querySelector('.introjs-disableInteraction'); if (disableInteractionLayer) { @@ -460,19 +481,27 @@ var targetOffset = _getOffset(targetElement) var tooltipHeight = _getOffset(tooltipLayer).height var windowSize = _getWinSize() + var top = this._introItems[this._currentStep].top || 0; + tooltipLayer.style.position = 'absolute'; + switch (currentTooltipPosition) { case 'top': tooltipLayer.style.left = '15px'; - tooltipLayer.style.top = '-' + (tooltipHeight + 10) + 'px'; + tooltipLayer.style.top = '-' + (tooltipHeight + top + 10) + 'px'; arrowLayer.className = 'introjs-arrow bottom'; break; case 'right': - tooltipLayer.style.left = (_getOffset(targetElement).width + 20) + 'px'; + if (this._introItems[this._currentStep].padding) { + tooltipLayer.style.left = (_getOffset(targetElement).width + 2*(this._introItems[this._currentStep].padding + 5)) + 'px'; + } + else { + tooltipLayer.style.left = (_getOffset(targetElement).width + 20) + 'px'; + } if (targetOffset.top + tooltipHeight > windowSize.height) { // In this case, right would have fallen below the bottom of the screen. // Modify so that the bottom of the tooltip connects with the target arrowLayer.className = "introjs-arrow left-bottom"; - tooltipLayer.style.top = "-" + (tooltipHeight - targetOffset.height - 20) + "px" + tooltipLayer.style.top = "-" + (tooltipHeight - targetOffset.height - top - 20) + "px" } arrowLayer.className = 'introjs-arrow left'; break; @@ -484,12 +513,17 @@ if (targetOffset.top + tooltipHeight > windowSize.height) { // In this case, left would have fallen below the bottom of the screen. // Modify so that the bottom of the tooltip connects with the target - tooltipLayer.style.top = "-" + (tooltipHeight - targetOffset.height - 20) + "px" + tooltipLayer.style.top = "-" + (tooltipHeight - targetOffset.height - top - 20) + "px" arrowLayer.className = 'introjs-arrow right-bottom'; } else { arrowLayer.className = 'introjs-arrow right'; } - tooltipLayer.style.right = (targetOffset.width + 20) + 'px'; + if (this._introItems[this._currentStep].padding) { + tooltipLayer.style.right = (targetOffset.width + 2*(this._introItems[this._currentStep].padding + 5)) + 'px'; + } + else { + tooltipLayer.style.right = (targetOffset.width + 20 )+ 'px'; + } break; @@ -501,6 +535,7 @@ tooltipLayer.style.left = '50%'; tooltipLayer.style.top = '50%'; + tooltipLayer.style.position = 'fixed'; tooltipLayer.style.marginLeft = '-' + (tooltipOffset.width / 2) + 'px'; tooltipLayer.style.marginTop = '-' + (tooltipOffset.height / 2) + 'px'; @@ -625,19 +660,47 @@ //prevent error when `this._currentStep` in undefined if (!this._introItems[this._currentStep]) return; + var definedPadding = this._introItems[this._currentStep].padding; + if(definedPadding === undefined){ + definedPadding = 5; + } + var currentElement = this._introItems[this._currentStep], elementPosition = _getOffset(currentElement.element), - widthHeightPadding = 10; + widthHeightPadding = 2*definedPadding; if (currentElement.position == 'floating') { widthHeightPadding = 0; } + var toolTipPadding = this._introItems[this._currentStep].toolTipPadding; + + if (toolTipPadding && Object.keys(toolTipPadding).length !== 0) { + toolTipPadding.top = toolTipPadding.top || 0; + toolTipPadding.left = toolTipPadding.left || 0; + } else { + toolTipPadding = { + top: 0, + left: 0 + }; + } + + + var safariWidth = 0; + + var userAgent = navigator.userAgent && + navigator.userAgent.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i); + + if (userAgent && userAgent.length && userAgent[1] && userAgent[1].toLowerCase() === 'safari') { + safariWidth = this._introItems[this._currentStep].sWidth || 0; + } + + //set new position to helper layer - helperLayer.setAttribute('style', 'width: ' + (elementPosition.width + widthHeightPadding) + 'px; ' + - 'height:' + (elementPosition.height + widthHeightPadding) + 'px; ' + - 'top:' + (elementPosition.top - 5) + 'px;' + - 'left: ' + (elementPosition.left - 5) + 'px;'); + helperLayer.setAttribute('style', 'width: ' + (elementPosition.width + widthHeightPadding + safariWidth) + 'px; ' + + 'height:' + (elementPosition.height + widthHeightPadding) + 'px; ' + + 'top:' + (elementPosition.top - definedPadding + toolTipPadding.top) + 'px;' + + 'left: ' + (elementPosition.left - definedPadding + toolTipPadding.left) + 'px;'); } } @@ -667,7 +730,7 @@ * @param {Object} targetElement */ function _showElement(targetElement) { - + _addOverlayLayer.call(this, this._targetElement) if (typeof (this._introChangeCallback) !== 'undefined') { this._introChangeCallback.call(this, targetElement.element); } @@ -724,7 +787,9 @@ //remove old classes var oldShowElement = document.querySelector('.introjs-showElement'); - oldShowElement.className = oldShowElement.className.replace(/introjs-[a-zA-Z]+/g, '').replace(/^\s+|\s+$/g, ''); + if (oldShowElement) { + oldShowElement.className = oldShowElement.className.replace(/introjs-[a-zA-Z]+/g, '').replace(/^\s+|\s+$/g, ''); + } //we should wait until the CSS3 transition is competed (it's 0.3 sec) to prevent incorrect `height` and `width` calculation if (self._lastShowElementTimer) { @@ -735,8 +800,9 @@ if (oldHelperNumberLayer != null) { oldHelperNumberLayer.innerHTML = targetElement.step; } - //set current tooltip text - oldtooltipLayer.innerHTML = targetElement.intro; + + oldtooltipLayer.innerHTML = $(targetElement.intro).html(); + //set the tooltip position oldtooltipContainer.style.display = "block"; _placeTooltip.call(self, targetElement.element, oldtooltipContainer, oldArrowLayer, oldHelperNumberLayer); @@ -784,8 +850,11 @@ arrowLayer.className = 'introjs-arrow'; - tooltipTextLayer.className = 'introjs-tooltiptext'; - tooltipTextLayer.innerHTML = targetElement.intro; + if (!this._introItems[this._currentStep].hideTextBackground) { + tooltipTextLayer.className = 'introjs-tooltiptext'; + } + + tooltipTextLayer.innerHTML = $(targetElement.intro).html(); bulletsLayer.className = 'introjs-bullets'; @@ -832,7 +901,21 @@ buttonsLayer.style.display = 'none'; } + if (this._options.showCloseX) { + var closeXLink = document.createElement('a'); + closeXLink.className = 'modal-box__close-btn icon icon--16 icon--cross-round'; + closeXLink.style.top = '4px'; + closeXLink.style.right = '4px'; + closeXLink.href = 'javascript:void(0);'; + closeXLink.onclick = function () { + _exitIntro.call(self, self._targetElement); + }; + } + tooltipLayer.className = 'introjs-tooltip'; + if (this._options.showCloseX) { + tooltipLayer.appendChild(closeXLink); + } tooltipLayer.appendChild(tooltipTextLayer); tooltipLayer.appendChild(bulletsLayer); tooltipLayer.appendChild(progressLayer); @@ -852,9 +935,9 @@ var nextTooltipButton = document.createElement('a'); nextTooltipButton.onclick = function() { - if (self._introItems.length - 1 != self._currentStep) { + //if (self._introItems.length - 1 != self._currentStep) { _nextStep.call(self); - } + //} }; nextTooltipButton.href = 'javascript:void(0);'; @@ -887,15 +970,19 @@ self._introExitCallback.call(self); } + if (typeof self._introCloseForeverCallback === 'function') { + self._introCloseForeverCallback.call(self); + } + _exitIntro.call(self, self._targetElement); }; buttonsLayer.appendChild(skipTooltipButton); - //in order to prevent displaying next/previous button always + buttonsLayer.appendChild(nextTooltipButton); + //in order to prevent displaying previous button always if (this._introItems.length > 1) { buttonsLayer.appendChild(prevTooltipButton); - buttonsLayer.appendChild(nextTooltipButton); } tooltipLayer.appendChild(buttonsLayer); @@ -912,15 +999,21 @@ prevTooltipButton.removeAttribute('tabIndex'); nextTooltipButton.removeAttribute('tabIndex'); + skipTooltipButton.style.display = 'initial'; + nextTooltipButton.innerHTML = this._options.nextLabel; + if (this._currentStep == 0 && this._introItems.length > 1) { - prevTooltipButton.className = 'introjs-button introjs-prevbutton introjs-disabled'; + prevTooltipButton.className = 'introjs-button introjs-prevbutton introjs-disabled hidden'; prevTooltipButton.tabIndex = '-1'; nextTooltipButton.className = 'introjs-button introjs-nextbutton'; skipTooltipButton.innerHTML = this._options.skipLabel; } else if (this._introItems.length - 1 == this._currentStep || this._introItems.length == 1) { - skipTooltipButton.innerHTML = this._options.doneLabel; + //skipTooltipButton.innerHTML = this._options.doneLabel; prevTooltipButton.className = 'introjs-button introjs-prevbutton'; - nextTooltipButton.className = 'introjs-button introjs-nextbutton introjs-disabled'; + nextTooltipButton.className = 'introjs-button introjs-nextbutton'; + nextTooltipButton.innerHTML = this._options.doneLabel; + + //skipTooltipButton.style.display = 'none'; nextTooltipButton.tabIndex = '-1'; } else { prevTooltipButton.className = 'introjs-button introjs-prevbutton'; @@ -951,7 +1044,7 @@ var opacity = parseFloat(_getPropValue(parentElm, 'opacity')); var transform = _getPropValue(parentElm, 'transform') || _getPropValue(parentElm, '-webkit-transform') || _getPropValue(parentElm, '-moz-transform') || _getPropValue(parentElm, '-ms-transform') || _getPropValue(parentElm, '-o-transform'); if (/[0-9]+/.test(zIndex) || opacity < 1 || transform !== 'none') { - parentElm.className += ' introjs-fixParent'; + //parentElm.className += ' introjs-fixParent'; } parentElm = parentElm.parentNode; @@ -969,7 +1062,9 @@ //Scroll down } else { - window.scrollBy(0, bottom + 100); // 70px + 30px padding from edge to look nice + if (!this._preventScroll) { + window.scrollBy(0, bottom + 100); // 70px + 30px padding from edge to look nice + } } } @@ -1012,7 +1107,8 @@ * @method _getWinSize * @returns {Object} width and height attributes */ - function _getWinSize() { + +function _getWinSize() { if (window.innerWidth != undefined) { return { width: window.innerWidth, height: window.innerHeight }; } else { @@ -1020,7 +1116,6 @@ return { width: D.clientWidth, height: D.clientHeight }; } } - /** * Add overlay layer to the page * http://stackoverflow.com/questions/123999/how-to-tell-if-a-dom-element-is-visible-in-the-current-viewport @@ -1048,43 +1143,56 @@ * @param {Object} targetElm */ function _addOverlayLayer(targetElm) { - var overlayLayer = document.createElement('div'), - styleText = '', - self = this; + var self = this; + removeOverlayLayer.call(this, targetElm); + var overlayLeftToElement = document.createElement('div'), + overlayAboveElement = document.createElement('div'), + overlayRightToElement = document.createElement('div'), + overlayBelowElement = document.createElement('div'); + + var currentStep = this._currentStep; + if (!currentStep || currentStep < 0 || !/^\d+$/.test(currentStep)) { + currentStep = 0; + } - //set css class name - overlayLayer.className = 'introjs-overlay'; + var padding = this._introItems[currentStep] && this._introItems[currentStep].padding || 0; + var fLeft = this._introItems[currentStep] && this._introItems[currentStep].fLeft || 0; + var fPadding = this._introItems[currentStep] && this._introItems[currentStep].fPadding || 0; + self._preventScroll = this._introItems[currentStep] && this._introItems[currentStep].preventScroll || false; - //check if the target element is body, we should calculate the size of overlay layer in a better way - if (targetElm.tagName.toLowerCase() === 'body') { - styleText += 'top: 0;bottom: 0; left: 0;right: 0;position: fixed;'; - overlayLayer.setAttribute('style', styleText); - } else { - //set overlay layer position - var elementPosition = _getOffset(targetElm); - if (elementPosition) { - styleText += 'width: ' + elementPosition.width + 'px; height:' + elementPosition.height + 'px; top:' + elementPosition.top + 'px;left: ' + elementPosition.left + 'px;'; - overlayLayer.setAttribute('style', styleText); - } - } + var nextStep = this._introItems[currentStep]; - targetElm.appendChild(overlayLayer); + var rect = nextStep.element.getBoundingClientRect(); - overlayLayer.onclick = function() { - if (self._options.exitOnOverlayClick == true) { - _exitIntro.call(self, targetElm); + overlayLeftToElement.style.left = '0'; + overlayLeftToElement.style.top = '0'; + overlayLeftToElement.style.height = document.body.scrollHeight + 'px'; + overlayLeftToElement.style.width = (rect.left - padding) + 'px'; - //check if any callback is defined - if (self._introExitCallback != undefined) { - self._introExitCallback.call(self); - } - } - }; + overlayAboveElement.style.left = (rect.left - padding) + 'px'; + overlayAboveElement.style.top = '0'; + overlayAboveElement.style.height = (rect.top + document.body.scrollTop - padding) + 'px'; + overlayAboveElement.style.width = (rect.width + 2*padding) + 'px'; + + overlayRightToElement.style.left = (rect.left + rect.width + padding + fLeft) + 'px'; + overlayRightToElement.style.top = '0'; + overlayRightToElement.style.height = document.body.scrollHeight + 'px'; + overlayRightToElement.style.width = (window.innerWidth - (rect.left + rect.width - 10) + padding + fPadding) + 'px'; + + overlayBelowElement.style.left = (rect.left - padding) + 'px'; + overlayBelowElement.style.top = (rect.top + rect.height + document.body.scrollTop - padding + 5) + 'px'; + overlayBelowElement.style.height = (document.body.scrollHeight - (rect.top + rect.height + document.body.scrollTop)) + 'px'; + overlayBelowElement.style.width = (rect.width + 2*padding) + 'px'; - setTimeout(function() { - styleText += 'opacity: ' + self._options.overlayOpacity.toString() + ';'; - overlayLayer.setAttribute('style', styleText); - }, 10); + overlayLeftToElement.className = 'introjs-overlay'; + overlayAboveElement.className = 'introjs-overlay'; + overlayRightToElement.className = 'introjs-overlay'; + overlayBelowElement.className = 'introjs-overlay'; + + document.body.appendChild(overlayLeftToElement); + document.body.appendChild(overlayAboveElement); + document.body.appendChild(overlayRightToElement); + document.body.appendChild(overlayBelowElement); return true; } @@ -1255,6 +1363,14 @@ throw new Error('Provided callback for onexit was not a function.'); } return this; + }, + oncloseforever: function(providedCallback) { + if (typeof (providedCallback) === 'function') { + this._introCloseForeverCallback = providedCallback; + } else { + throw new Error('Provided callback for oncloseforever was not a function.'); + } + return this; } }; diff --git a/minified/intro.min.js b/minified/intro.min.js index d95cd0f31..f642fda1b 100644 --- a/minified/intro.min.js +++ b/minified/intro.min.js @@ -1,33 +1,38 @@ -(function(w,p){"object"===typeof exports?p(exports):"function"===typeof define&&define.amd?define(["exports"],p):p(w)})(this,function(w){function p(a){this._targetElement=a;this._options={nextLabel:"Next →",prevLabel:"← Back",skipLabel:"Skip",doneLabel:"Done",tooltipPosition:"bottom",tooltipClass:"",highlightClass:"",exitOnEsc:!0,exitOnOverlayClick:!0,showStepNumbers:!0,keyboardNavigation:!0,showButtons:!0,showBullets:!0,showProgress:!1,scrollToElement:!0,overlayOpacity:0.8,positionPrecedence:["bottom", -"top","right","left"],disableInteraction:!1}}function J(a){var b=[],c=this;if(this._options.steps)for(var d=[],e=0,d=this._options.steps.length;ed.length)return!1;e=0;for(f=d.length;eh.width||0>l.left+l.width/2-s?(q(f,"bottom"),q(f,"top")):(l.height+l.top+p>h.height&& -q(f,"bottom"),0>l.top-p&&q(f,"top"));l.width+l.left+s>h.width&&q(f,"right");0>l.left-s&&q(f,"left");0h.height&&(c.className="introjs-arrow left-bottom",b.style.top="-"+(f-e.height-20)+"px");c.className="introjs-arrow left"; -break;case "left":!0==this._options.showStepNumbers&&(b.style.top="15px");e.top+f>h.height?(b.style.top="-"+(f-e.height-20)+"px",c.className="introjs-arrow right-bottom"):c.className="introjs-arrow right";b.style.right=e.width+20+"px";break;case "floating":c.style.display="none";a=k(b);b.style.left="50%";b.style.top="50%";b.style.marginLeft="-"+a.width/2+"px";b.style.marginTop="-"+a.height/2+"px";"undefined"!=typeof d&&null!=d&&(d.style.left="-"+(a.width/2+18)+"px",d.style.top="-"+(a.height/2+18)+ -"px");break;case "bottom-right-aligned":c.className="introjs-arrow top-right";b.style.right="0px";b.style.bottom="-"+(k(b).height+10)+"px";break;case "bottom-middle-aligned":d=k(a);a=k(b);c.className="introjs-arrow top-middle";b.style.left=d.width/2-a.width/2+"px";b.style.bottom="-"+(a.height+10)+"px";break;default:b.style.bottom="-"+(k(b).height+10)+"px",b.style.left=k(a).width/2-k(b).width/2+"px",c.className="introjs-arrow top"}}}function q(a,b){-1 a.active").className="";d.querySelector('.introjs-bullets li > a[data-stepnumber="'+ -a.step+'"]').className="active";d.querySelector(".introjs-progress .introjs-progressbar").setAttribute("style","width:"+I.call(b)+"%;");s.style.opacity=1;f&&(f.style.opacity=1);-1===r.tabIndex?l.focus():r.focus()},350)}else{var q=document.createElement("div"),m=document.createElement("div"),c=document.createElement("div"),n=document.createElement("div"),w=document.createElement("div"),D=document.createElement("div"),E=document.createElement("div"),u=document.createElement("div");q.className=e;m.className= -"introjs-tooltipReferenceLayer";t.call(b,q);t.call(b,m);this._targetElement.appendChild(q);this._targetElement.appendChild(m);c.className="introjs-arrow";w.className="introjs-tooltiptext";w.innerHTML=a.intro;D.className="introjs-bullets";!1===this._options.showBullets&&(D.style.display="none");for(var q=document.createElement("ul"),e=0,B=this._introItems.length;en||"none"!==u)g.className+=" introjs-fixParent";g=g.parentNode}M(a.element)||!0!==this._options.scrollToElement||(n=a.element.getBoundingClientRect(),g=F().height,c=n.bottom-(n.bottom-n.top),n=n.bottom-g,0>c||a.element.clientHeight>g?window.scrollBy(0,c-30):window.scrollBy(0,n+100));"undefined"!== -typeof this._introAfterChangeCallback&&this._introAfterChangeCallback.call(this,a.element)}function v(a,b){var c="";a.currentStyle?c=a.currentStyle[b]:document.defaultView&&document.defaultView.getComputedStyle&&(c=document.defaultView.getComputedStyle(a,null).getPropertyValue(b));return c&&c.toLowerCase?c.toLowerCase():c}function F(){if(void 0!=window.innerWidth)return{width:window.innerWidth,height:window.innerHeight};var a=document.documentElement;return{width:a.clientWidth,height:a.clientHeight}} -function M(a){a=a.getBoundingClientRect();return 0<=a.top&&0<=a.left&&a.bottom+80<=window.innerHeight&&a.right<=window.innerWidth}function K(a){var b=document.createElement("div"),c="",d=this;b.className="introjs-overlay";if("body"===a.tagName.toLowerCase())c+="top: 0;bottom: 0; left: 0;right: 0;position: fixed;",b.setAttribute("style",c);else{var e=k(a);e&&(c+="width: "+e.width+"px; height:"+e.height+"px; top:"+e.top+"px;left: "+e.left+"px;",b.setAttribute("style",c))}a.appendChild(b);b.onclick= -function(){!0==d._options.exitOnOverlayClick&&(y.call(d,a),void 0!=d._introExitCallback&&d._introExitCallback.call(d))};setTimeout(function(){c+="opacity: "+d._options.overlayOpacity.toString()+";";b.setAttribute("style",c)},10);return!0}function k(a){var b={};b.width=a.offsetWidth;b.height=a.offsetHeight;for(var c=0,d=0;a&&!isNaN(a.offsetLeft)&&!isNaN(a.offsetTop);)c+=a.offsetLeft,d+=a.offsetTop,a=a.offsetParent;b.top=d;b.left=c;return b}function I(){return 100*(parseInt(this._currentStep+1,10)/ -this._introItems.length)}var B=function(a){if("object"===typeof a)return new p(a);if("string"===typeof a){if(a=document.querySelector(a))return new p(a);throw Error("There is no element with given selector.");}return new p(document.body)};B.version="1.0.0";B.fn=p.prototype={clone:function(){return new p(this)},setOption:function(a,b){this._options[a]=b;return this},setOptions:function(a){var b=this._options,c={},d;for(d in b)c[d]=b[d];for(d in a)c[d]=a[d];this._options=c;return this},start:function(){J.call(this, -this._targetElement);return this},goToStep:function(a){this._currentStep=a-2;"undefined"!==typeof this._introItems&&x.call(this);return this},nextStep:function(){x.call(this);return this},previousStep:function(){C.call(this);return this},exit:function(){y.call(this,this._targetElement);return this},refresh:function(){t.call(this,document.querySelector(".introjs-helperLayer"));t.call(this,document.querySelector(".introjs-tooltipReferenceLayer"));return this},onbeforechange:function(a){if("function"=== -typeof a)this._introBeforeChangeCallback=a;else throw Error("Provided callback for onbeforechange was not a function");return this},onchange:function(a){if("function"===typeof a)this._introChangeCallback=a;else throw Error("Provided callback for onchange was not a function.");return this},onafterchange:function(a){if("function"===typeof a)this._introAfterChangeCallback=a;else throw Error("Provided callback for onafterchange was not a function");return this},oncomplete:function(a){if("function"=== -typeof a)this._introCompleteCallback=a;else throw Error("Provided callback for oncomplete was not a function.");return this},onexit:function(a){if("function"===typeof a)this._introExitCallback=a;else throw Error("Provided callback for onexit was not a function.");return this}};return w.introJs=B}); +(function(w,n){"object"===typeof exports?n(exports):"function"===typeof define&&define.amd?define(["exports"],n):n(w)})(this,function(w){function n(a){this._targetElement=a;this._preventScroll=!1;this._options={nextLabel:"Next →",prevLabel:"← Back",skipLabel:"Skip",doneLabel:"Done",tooltipPosition:"bottom",tooltipClass:"",highlightClass:"",exitOnEsc:!0,exitOnOverlayClick:!0,showStepNumbers:!0,keyboardNavigation:!0,showButtons:!0,showBullets:!0,showProgress:!1,scrollToElement:!0,overlayOpacity:0.8, +positionPrecedence:["bottom","top","right","left"],disableInteraction:!1,showCloseX:!0}}function M(a){var b=[],d=this;if(this._options.steps)for(var e=[],c=0,e=this._options.steps.length;ce.length)return!1;c=0;for(f=e.length;cg.width||0>l.left+l.width/2-t?(s(f,"bottom"),s(f,"top")):(l.height+l.top+m>g.height&&s(f,"bottom"),0>l.top-m&&s(f,"top"));l.width+l.left+t>g.width&&s(f,"right");0>l.left-t&&s(f,"left");0g.height&&(d.className="introjs-arrow left-bottom",b.style.top="-"+(f-c.height-m-20)+"px");d.className="introjs-arrow left";break;case "left":!0==this._options.showStepNumbers&& +(b.style.top="15px");c.top+f>g.height?(b.style.top="-"+(f-c.height-m-20)+"px",d.className="introjs-arrow right-bottom"):d.className="introjs-arrow right";b.style.right=this._introItems[this._currentStep].padding?c.width+2*(this._introItems[this._currentStep].padding+5)+"px":c.width+20+"px";break;case "floating":d.style.display="none";a=p(b);b.style.left="50%";b.style.top="50%";b.style.position="fixed";b.style.marginLeft="-"+a.width/2+"px";b.style.marginTop="-"+a.height/2+"px";"undefined"!=typeof e&& +null!=e&&(e.style.left="-"+(a.width/2+18)+"px",e.style.top="-"+(a.height/2+18)+"px");break;case "bottom-right-aligned":d.className="introjs-arrow top-right";b.style.right="0px";b.style.bottom="-"+(p(b).height+10)+"px";break;case "bottom-middle-aligned":e=p(a);a=p(b);d.className="introjs-arrow top-middle";b.style.left=e.width/2-a.width/2+"px";b.style.bottom="-"+(a.height+10)+"px";break;default:b.style.bottom="-"+(p(b).height+10)+"px",b.style.left=p(a).width/2-p(b).width/2+"px",d.className="introjs-arrow top"}}} +function s(a,b){-1 a.active").className= +"";e.querySelector('.introjs-bullets li > a[data-stepnumber="'+a.step+'"]').className="active";e.querySelector(".introjs-progress .introjs-progressbar").setAttribute("style","width:"+L.call(b)+"%;");t.style.opacity=1;f&&(f.style.opacity=1);-1===r.tabIndex?l.focus():r.focus()},350)}else{var n=document.createElement("div"),s=document.createElement("div"),d=document.createElement("div"),q=document.createElement("div"),w=document.createElement("div"),E=document.createElement("div"),F=document.createElement("div"), +z=document.createElement("div");n.className=c;s.className="introjs-tooltipReferenceLayer";u.call(b,n);u.call(b,s);this._targetElement.appendChild(n);this._targetElement.appendChild(s);d.className="introjs-arrow";this._introItems[this._currentStep].hideTextBackground||(w.className="introjs-tooltiptext");w.innerHTML=$(a.intro).html();E.className="introjs-bullets";!1===this._options.showBullets&&(E.style.display="none");for(var n=document.createElement("ul"),c=0,C=this._introItems.length;cd||a.element.clientHeight>h?window.scrollBy(0,d-30):this._preventScroll||window.scrollBy(0,q+100));"undefined"!==typeof this._introAfterChangeCallback&&this._introAfterChangeCallback.call(this, +a.element)}function v(a,b){var d="";a.currentStyle?d=a.currentStyle[b]:document.defaultView&&document.defaultView.getComputedStyle&&(d=document.defaultView.getComputedStyle(a,null).getPropertyValue(b));return d&&d.toLowerCase?d.toLowerCase():d}function G(){if(void 0!=window.innerWidth)return{width:window.innerWidth,height:window.innerHeight};var a=document.documentElement;return{width:a.clientWidth,height:a.clientHeight}}function O(a){a=a.getBoundingClientRect();return 0<=a.top&&0<=a.left&&a.bottom+ +80<=window.innerHeight&&a.right<=window.innerWidth}function H(a){J.call(this,a);a=document.createElement("div");var b=document.createElement("div"),d=document.createElement("div"),e=document.createElement("div"),c=this._currentStep;if(!c||0>c||!/^\d+$/.test(c))c=0;var f=this._introItems[c]&&this._introItems[c].padding||0,g=this._introItems[c]&&this._introItems[c].fLeft||0,m=this._introItems[c]&&this._introItems[c].fPadding||0;this._preventScroll=this._introItems[c]&&this._introItems[c].preventScroll|| +!1;c=this._introItems[c].element.getBoundingClientRect();a.style.left="0";a.style.top="0";a.style.height=document.body.scrollHeight+"px";a.style.width=c.left-f+"px";b.style.left=c.left-f+"px";b.style.top="0";b.style.height=c.top+document.body.scrollTop-f+"px";b.style.width=c.width+2*f+"px";d.style.left=c.left+c.width+f+g+"px";d.style.top="0";d.style.height=document.body.scrollHeight+"px";d.style.width=window.innerWidth-(c.left+c.width-10)+f+m+"px";e.style.left=c.left-f+"px";e.style.top=c.top+c.height+ +document.body.scrollTop-f+5+"px";e.style.height=document.body.scrollHeight-(c.top+c.height+document.body.scrollTop)+"px";e.style.width=c.width+2*f+"px";a.className="introjs-overlay";b.className="introjs-overlay";d.className="introjs-overlay";e.className="introjs-overlay";document.body.appendChild(a);document.body.appendChild(b);document.body.appendChild(d);document.body.appendChild(e);return!0}function p(a){var b={};b.width=a.offsetWidth;b.height=a.offsetHeight;for(var d=0,e=0;a&&!isNaN(a.offsetLeft)&& +!isNaN(a.offsetTop);)d+=a.offsetLeft,e+=a.offsetTop,a=a.offsetParent;b.top=e;b.left=d;return b}function L(){return 100*(parseInt(this._currentStep+1,10)/this._introItems.length)}var C=function(a){if("object"===typeof a)return new n(a);if("string"===typeof a){if(a=document.querySelector(a))return new n(a);throw Error("There is no element with given selector.");}return new n(document.body)};C.version="1.0.0";C.fn=n.prototype={clone:function(){return new n(this)},setOption:function(a,b){this._options[a]= +b;return this},setOptions:function(a){var b=this._options,d={},e;for(e in b)d[e]=b[e];for(e in a)d[e]=a[e];this._options=d;return this},start:function(){M.call(this,this._targetElement);return this},goToStep:function(a){this._currentStep=a-2;"undefined"!==typeof this._introItems&&x.call(this);return this},nextStep:function(){x.call(this);return this},previousStep:function(){D.call(this);return this},exit:function(){y.call(this,this._targetElement);return this},refresh:function(){u.call(this,document.querySelector(".introjs-helperLayer")); +u.call(this,document.querySelector(".introjs-tooltipReferenceLayer"));return this},onbeforechange:function(a){if("function"===typeof a)this._introBeforeChangeCallback=a;else throw Error("Provided callback for onbeforechange was not a function");return this},onchange:function(a){if("function"===typeof a)this._introChangeCallback=a;else throw Error("Provided callback for onchange was not a function.");return this},onafterchange:function(a){if("function"===typeof a)this._introAfterChangeCallback=a;else throw Error("Provided callback for onafterchange was not a function"); +return this},oncomplete:function(a){if("function"===typeof a)this._introCompleteCallback=a;else throw Error("Provided callback for oncomplete was not a function.");return this},onexit:function(a){if("function"===typeof a)this._introExitCallback=a;else throw Error("Provided callback for onexit was not a function.");return this},oncloseforever:function(a){if("function"===typeof a)this._introCloseForeverCallback=a;else throw Error("Provided callback for oncloseforever was not a function.");return this}}; +return w.introJs=C});