MediaWiki:UserWalkthrough.js/intro.js

/** * Intro.js v2.9.3 * https://github.com/usablica/intro.js * * Copyright (C) 2017 Afshin Mehrabani (@afshinmeh) */ /* Changes by Luqgreg: commenting out AMD definition and firing an mw.hook */

(function(f) {   if (typeof exports === "object" && typeof module !== "undefined") {        module.exports = f;        // deprecated function        // @since 2.8.0        module.exports.introJs = function  {          console.warn('Deprecated: please use require("intro.js") directly, instead of the introJs method of the function');          // introJs          return f.apply(this, arguments);        };	}/* else if (typeof define === "function" && define.amd) {        define([], f);    }*/ else {        var g;        if (typeof window !== "undefined") {            g = window;        } else if (typeof global !== "undefined") {            g = global;        } else if (typeof self !== "undefined") {            g = self;        } else {            g = this;        }        g.introJs = f;        mw.hook( 'introjs.loaded' ).fire( g.introJs );    } })(function  {  //Default config/variables var VERSION = '2.9.3';

/**  * IntroJs main class *  * @class IntroJs */ function IntroJs(obj) { this._targetElement = obj; this._introItems = [];

this._options = { /* Next button label in tooltip box */ nextLabel: 'Next &rarr;', /* Previous button label in tooltip box */ prevLabel: '&larr; Back', /* Skip button label in tooltip box */ skipLabel: 'Skip', /* Done button label in tooltip box */ doneLabel: 'Done', /* Hide previous button in the first step? Otherwise, it will be disabled button. */     hidePrev: false, /* Hide next button in the last step? Otherwise, it will be disabled button. */     hideNext: false, /* Default tooltip box position */ tooltipPosition: 'bottom', /* Next CSS class for tooltip boxes */ tooltipClass: '', /* CSS class that is added to the helperLayer */ highlightClass: '', /* Close introduction when pressing Escape button? */     exitOnEsc: true, /* Close introduction when clicking on overlay layer? */     exitOnOverlayClick: true, /* Show step numbers in introduction? */     showStepNumbers: true, /* Let user use keyboard to navigate the tour? */     keyboardNavigation: true, /* Show tour control buttons? */     showButtons: true, /* Show tour bullets? */     showBullets: true, /* Show tour progress? */     showProgress: false, /* Scroll to highlighted element? */     scrollToElement: true, /*      * Should we scroll the tooltip or target element? *      * Options are: 'element' or 'tooltip' */     scrollTo: 'element', /* Padding to add after scrolling when element is not in the viewport (in pixels) */ scrollPadding: 30, /* Set the overlay opacity */ overlayOpacity: 0.8, /* Precedence of positions, when auto is enabled */ positionPrecedence: ["bottom", "top", "right", "left"], /* Disable an interaction with element? */     disableInteraction: false, /* Set how much padding to be used around helper element */ helperElementPadding: 10, /* Default hint position */ hintPosition: 'top-middle', /* Hint button label */ hintButtonLabel: 'Got it', /* Adding animation to hints? */     hintAnimation: true, /* additional classes to put on the buttons */ buttonClass: "introjs-button" }; }

/**  * Initiate a new introduction/guide from an element in the page *  * @api private * @method _introForElement * @param {Object} targetElm * @param {String} group * @returns {Boolean} Success or not? */ function _introForElement(targetElm, group) { var allIntroSteps = targetElm.querySelectorAll("*[data-intro]"), introItems = [];

if (this._options.steps) { //use steps passed programmatically _forEach(this._options.steps, function (step) {       var currentItem = _cloneObject(step);

//set the step currentItem.step = introItems.length + 1;

//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); }

//intro without element if (typeof (currentItem.element) === 'undefined' || currentItem.element === null) { var floatingElementQuery = document.querySelector(".introjsFloatingElement");

if (floatingElementQuery === null) { floatingElementQuery = document.createElement('div'); floatingElementQuery.className = 'introjsFloatingElement';

document.body.appendChild(floatingElementQuery); }

currentItem.element = floatingElementQuery; currentItem.position = 'floating'; }

currentItem.scrollTo = currentItem.scrollTo || this._options.scrollTo;

if (typeof (currentItem.disableInteraction) === 'undefined') { currentItem.disableInteraction = this._options.disableInteraction; }

if (currentItem.element !== null) { introItems.push(currentItem); }             }.bind(this));

} else { //use steps from data-* annotations var elmsLength = allIntroSteps.length; var disableInteraction; //if there's no element to intro if (elmsLength < 1) { return false; }

_forEach(allIntroSteps, function (currentElement) {       // PR #80        // start intro for groups of elements        if (group && (currentElement.getAttribute("data-intro-group") !== group)) {          return;        }

// skip hidden elements if (currentElement.style.display === 'none') { return; }

var step = parseInt(currentElement.getAttribute('data-step'), 10);

if (typeof (currentElement.getAttribute('data-disable-interaction')) !== 'undefined') { disableInteraction = !!currentElement.getAttribute('data-disable-interaction'); } else { disableInteraction = this._options.disableInteraction; }

if (step > 0) { introItems[step - 1] = { element: currentElement, intro: currentElement.getAttribute('data-intro'), 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, scrollTo: currentElement.getAttribute('data-scrollto') || this._options.scrollTo, disableInteraction: disableInteraction };       }      }.bind(this));

//next add intro items without data-step //todo: we need a cleanup here, two loops are redundant var nextStep = 0;

_forEach(allIntroSteps, function (currentElement) {       // PR #80        // start intro for groups of elements        if (group && (currentElement.getAttribute("data-intro-group") !== group)) {          return;        }        if (currentElement.getAttribute('data-step') === null) {

while (true) { if (typeof introItems[nextStep] === 'undefined') { break; } else { nextStep++; }         }

if (typeof (currentElement.getAttribute('data-disable-interaction')) !== 'undefined') { disableInteraction = !!currentElement.getAttribute('data-disable-interaction'); } else { disableInteraction = this._options.disableInteraction; }

introItems[nextStep] = { element: currentElement, intro: currentElement.getAttribute('data-intro'), step: nextStep + 1, tooltipClass: currentElement.getAttribute('data-tooltipclass'), highlightClass: currentElement.getAttribute('data-highlightclass'), position: currentElement.getAttribute('data-position') || this._options.tooltipPosition, scrollTo: currentElement.getAttribute('data-scrollto') || this._options.scrollTo, disableInteraction: disableInteraction };       }      }.bind(this));    }

//removing undefined/null elements var tempIntroItems = []; for (var z = 0; z < introItems.length; z++) { if (introItems[z]) { // copy non-falsy values to the end of the array tempIntroItems.push(introItems[z]); }    }

introItems = tempIntroItems;

//Ok, sort all items with given steps introItems.sort(function (a, b) {     return a.step - b.step;    });

//set it to the introJs object this._introItems = introItems;

//add overlay layer to the page if(_addOverlayLayer.call(this, targetElm)) { //then, start the show _nextStep.call(this);

if (this._options.keyboardNavigation) { DOMEvent.on(window, 'keydown', _onKeyDown, this, true); }     //for window resize DOMEvent.on(window, 'resize', _onResize, this, true); }   return false; }

function _onResize { this.refresh.call(this); }

/** * on keyCode: * https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode * This feature has been removed from the Web standards. * Though some browsers may still support it, it is in * the process of being dropped. * Instead, you should use KeyboardEvent.code, * if it's implemented. * * jQuery's approach is to test for *  (1) e.which, then *  (2) e.charCode, then *  (3) e.keyCode * https://github.com/jquery/jquery/blob/a6b0705294d336ae2f63f7276de0da1195495363/src/event.js#L638 * * @param type var * @return type */ function _onKeyDown (e) { var code = (e.code === null) ? e.which : e.code;

// if code/e.which is null if (code === null) { code = (e.charCode === null) ? e.keyCode : e.charCode; }   if ((code === 'Escape' || code === 27) && this._options.exitOnEsc === true) { //escape key pressed, exit the intro //check if exit callback is defined _exitIntro.call(this, this._targetElement); } else if (code === 'ArrowLeft' || code === 37) { //left arrow _previousStep.call(this); } else if (code === 'ArrowRight' || code === 39) { //right arrow _nextStep.call(this); } else if (code === 'Enter' || code === 13) { //srcElement === ie     var target = e.target || e.srcElement; if (target && target.className.match('introjs-prevbutton')) { //user hit enter while focusing on previous button _previousStep.call(this); } else if (target && target.className.match('introjs-skipbutton')) { //user hit enter while focusing on skip button if (this._introItems.length - 1 === this._currentStep && typeof (this._introCompleteCallback) === 'function') { this._introCompleteCallback.call(this); }

_exitIntro.call(this, this._targetElement); } else if (target && target.getAttribute('data-stepnumber')) { // user hit enter while focusing on step bullet target.click; } else { //default behavior for responding to enter _nextStep.call(this); }

//prevent default behaviour on hitting Enter, to prevent steps being skipped in some browsers if(e.preventDefault) { e.preventDefault; } else { e.returnValue = false; }   }  }

/*  * makes a copy of the object * @api private * @method _cloneObject */ function _cloneObject(object) { if (object === null || typeof (object) !== 'object' || typeof (object.nodeType) !== 'undefined') { return object; }     var temp = {}; for (var key in object) { if (typeof(window.jQuery) !== 'undefined' && object[key] instanceof window.jQuery) { temp[key] = object[key]; } else { temp[key] = _cloneObject(object[key]); }     }      return temp; } /**   * Go to specific step of introduction *  * @api private * @method _goToStep */ function _goToStep(step) { //because steps starts with zero this._currentStep = step - 2; if (typeof (this._introItems) !== 'undefined') { _nextStep.call(this); } }

/**  * Go to the specific step of introduction with the explicit [data-step] number *  * @api private * @method _goToStepNumber */ function _goToStepNumber(step) { this._currentStepNumber = step; if (typeof (this._introItems) !== 'undefined') { _nextStep.call(this); } }

/**  * Go to next step on intro *  * @api private * @method _nextStep */ function _nextStep { this._direction = 'forward';

if (typeof (this._currentStepNumber) !== 'undefined') { _forEach(this._introItems, function (item, i) {       if( item.step === this._currentStepNumber ) {          this._currentStep = i - 1;          this._currentStepNumber = undefined;        }      }.bind(this)); }

if (typeof (this._currentStep) === 'undefined') { this._currentStep = 0; } else { ++this._currentStep; }

var nextStep = this._introItems[this._currentStep]; var continueStep = true;

if (typeof (this._introBeforeChangeCallback) !== 'undefined') { continueStep = this._introBeforeChangeCallback.call(this, nextStep.element); }

// if `onbeforechange` returned `false`, stop displaying the element if (continueStep === false) { --this._currentStep; return false; }

if ((this._introItems.length) <= this._currentStep) { //end of the intro //check if any callback is defined if (typeof (this._introCompleteCallback) === 'function') { this._introCompleteCallback.call(this); }     _exitIntro.call(this, this._targetElement); return; }

_showElement.call(this, nextStep); }

/**  * Go to previous step on intro *  * @api private * @method _previousStep */ function _previousStep { this._direction = 'backward';

if (this._currentStep === 0) { return false; }

--this._currentStep;

var nextStep = this._introItems[this._currentStep]; var continueStep = true;

if (typeof (this._introBeforeChangeCallback) !== 'undefined') { continueStep = this._introBeforeChangeCallback.call(this, nextStep.element); }

// if `onbeforechange` returned `false`, stop displaying the element if (continueStep === false) { ++this._currentStep; return false; }

_showElement.call(this, nextStep); }

/**  * Update placement of the intro objects on the screen * @api private */ function _refresh { // re-align intros _setHelperLayerPosition.call(this, document.querySelector('.introjs-helperLayer')); _setHelperLayerPosition.call(this, document.querySelector('.introjs-tooltipReferenceLayer')); _setHelperLayerPosition.call(this, document.querySelector('.introjs-disableInteraction'));

// re-align tooltip if(this._currentStep !== undefined && this._currentStep !== null) { var oldHelperNumberLayer = document.querySelector('.introjs-helperNumberLayer'), oldArrowLayer       = document.querySelector('.introjs-arrow'), oldtooltipContainer = document.querySelector('.introjs-tooltip'); _placeTooltip.call(this, this._introItems[this._currentStep].element, oldtooltipContainer, oldArrowLayer, oldHelperNumberLayer); }

//re-align hints _reAlignHints.call(this); return this; }

/**  * Exit from intro *  * @api private * @method _exitIntro * @param {Object} targetElement * @param {Boolean} force - Setting to `true` will skip the result of beforeExit callback */ function _exitIntro(targetElement, force) { var continueExit = true;

// calling onbeforeexit callback //   // If this callback return `false`, it would halt the process if (this._introBeforeExitCallback !== undefined) { continueExit = this._introBeforeExitCallback.call(this); }

// skip this check if `force` parameter is `true` // otherwise, if `onbeforeexit` returned `false`, don't exit the intro if (!force && continueExit === false) return;

//remove overlay layers from the page var overlayLayers = targetElement.querySelectorAll('.introjs-overlay');

if (overlayLayers && overlayLayers.length) { _forEach(overlayLayers, function (overlayLayer) {       overlayLayer.style.opacity = 0;        window.setTimeout(function  { if (this.parentNode) { this.parentNode.removeChild(this); }       }.bind(overlayLayer), 500);      }.bind(this)); }

//remove all helper layers var helperLayer = targetElement.querySelector('.introjs-helperLayer'); if (helperLayer) { helperLayer.parentNode.removeChild(helperLayer); }

var referenceLayer = targetElement.querySelector('.introjs-tooltipReferenceLayer'); if (referenceLayer) { referenceLayer.parentNode.removeChild(referenceLayer); }

//remove disableInteractionLayer var disableInteractionLayer = targetElement.querySelector('.introjs-disableInteraction'); if (disableInteractionLayer) { disableInteractionLayer.parentNode.removeChild(disableInteractionLayer); }

//remove intro floating element var floatingElement = document.querySelector('.introjsFloatingElement'); if (floatingElement) { floatingElement.parentNode.removeChild(floatingElement); }

_removeShowElement;

//remove `introjs-fixParent` class from the elements var fixParents = document.querySelectorAll('.introjs-fixParent'); _forEach(fixParents, function (parent) {     _removeClass(parent, /introjs-fixParent/g);    });

//clean listeners DOMEvent.off(window, 'keydown', _onKeyDown, this, true); DOMEvent.off(window, 'resize', _onResize, this, true);

//check if any callback is defined if (this._introExitCallback !== undefined) { this._introExitCallback.call(this); }

//set the step to zero this._currentStep = undefined; }

/**  * Render tooltip box in the page *  * @api private * @method _placeTooltip * @param {HTMLElement} targetElement * @param {HTMLElement} tooltipLayer * @param {HTMLElement} arrowLayer * @param {HTMLElement} helperNumberLayer * @param {Boolean} hintMode */ function _placeTooltip(targetElement, tooltipLayer, arrowLayer, helperNumberLayer, hintMode) { var tooltipCssClass = '', currentStepObj, tooltipOffset, targetOffset, windowSize, currentTooltipPosition;

hintMode = hintMode || false;

//reset the old style tooltipLayer.style.top       = null; tooltipLayer.style.right     = null; tooltipLayer.style.bottom    = null; tooltipLayer.style.left      = null; tooltipLayer.style.marginLeft = null; tooltipLayer.style.marginTop = null;

arrowLayer.style.display = 'inherit';

if (typeof(helperNumberLayer) !== 'undefined' && helperNumberLayer !== null) { helperNumberLayer.style.top = null; helperNumberLayer.style.left = null; }

//prevent error when `this._currentStep` is undefined if (!this._introItems[this._currentStep]) return;

//if we have a custom css class for each step currentStepObj = this._introItems[this._currentStep]; if (typeof (currentStepObj.tooltipClass) === 'string') { tooltipCssClass = currentStepObj.tooltipClass; } else { tooltipCssClass = this._options.tooltipClass; }

tooltipLayer.className = ('introjs-tooltip ' + tooltipCssClass).replace(/^\s+|\s+$/g, ''); tooltipLayer.setAttribute('role', 'dialog');

currentTooltipPosition = this._introItems[this._currentStep].position;

// Floating is always valid, no point in calculating if (currentTooltipPosition !== "floating") { currentTooltipPosition = _determineAutoPosition.call(this, targetElement, tooltipLayer, currentTooltipPosition); }

var tooltipLayerStyleLeft; targetOffset = _getOffset(targetElement); tooltipOffset = _getOffset(tooltipLayer); windowSize   = _getWinSize;

_addClass(tooltipLayer, 'introjs-' + currentTooltipPosition);

switch (currentTooltipPosition) { case 'top-right-aligned': arrowLayer.className     = 'introjs-arrow bottom-right';

var tooltipLayerStyleRight = 0; _checkLeft(targetOffset, tooltipLayerStyleRight, tooltipOffset, tooltipLayer); tooltipLayer.style.bottom   = (targetOffset.height +  20) + 'px'; break;

case 'top-middle-aligned': arrowLayer.className     = 'introjs-arrow bottom-middle';

var tooltipLayerStyleLeftRight = targetOffset.width / 2 - tooltipOffset.width / 2;

// a fix for middle aligned hints if (hintMode) { tooltipLayerStyleLeftRight += 5; }

if (_checkLeft(targetOffset, tooltipLayerStyleLeftRight, tooltipOffset, tooltipLayer)) { tooltipLayer.style.right = null; _checkRight(targetOffset, tooltipLayerStyleLeftRight, tooltipOffset, windowSize, tooltipLayer); }       tooltipLayer.style.bottom = (targetOffset.height + 20) + 'px'; break;

case 'top-left-aligned': // top-left-aligned is the same as the default top case 'top': arrowLayer.className = 'introjs-arrow bottom';

tooltipLayerStyleLeft = (hintMode) ? 0 : 15;

_checkRight(targetOffset, tooltipLayerStyleLeft, tooltipOffset, windowSize, tooltipLayer); tooltipLayer.style.bottom = (targetOffset.height + 20) + 'px'; break; case 'right': tooltipLayer.style.left = (targetOffset.width + 20) + 'px'; if (targetOffset.top + tooltipOffset.height > 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 = "-" + (tooltipOffset.height - targetOffset.height - 20) + "px"; } else { arrowLayer.className = 'introjs-arrow left'; }       break; case 'left': if (!hintMode && this._options.showStepNumbers === true) { tooltipLayer.style.top = '15px'; }

if (targetOffset.top + tooltipOffset.height > 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 = "-" + (tooltipOffset.height - targetOffset.height - 20) + "px"; arrowLayer.className = 'introjs-arrow right-bottom'; } else { arrowLayer.className = 'introjs-arrow right'; }       tooltipLayer.style.right = (targetOffset.width + 20) + 'px';

break; case 'floating': arrowLayer.style.display = 'none';

//we have to adjust the top and left of layer manually for intro items without element tooltipLayer.style.left  = '50%'; tooltipLayer.style.top   = '50%'; tooltipLayer.style.marginLeft = '-' + (tooltipOffset.width / 2) + 'px'; tooltipLayer.style.marginTop = '-' + (tooltipOffset.height / 2) + 'px';

if (typeof(helperNumberLayer) !== 'undefined' && helperNumberLayer !== null) { helperNumberLayer.style.left = '-' + ((tooltipOffset.width / 2) + 18) + 'px'; helperNumberLayer.style.top = '-' + ((tooltipOffset.height / 2) + 18) + 'px'; }

break; case 'bottom-right-aligned': arrowLayer.className     = 'introjs-arrow top-right';

tooltipLayerStyleRight = 0; _checkLeft(targetOffset, tooltipLayerStyleRight, tooltipOffset, tooltipLayer); tooltipLayer.style.top   = (targetOffset.height +  20) + 'px'; break;

case 'bottom-middle-aligned': arrowLayer.className     = 'introjs-arrow top-middle';

tooltipLayerStyleLeftRight = targetOffset.width / 2 - tooltipOffset.width / 2;

// a fix for middle aligned hints if (hintMode) { tooltipLayerStyleLeftRight += 5; }

if (_checkLeft(targetOffset, tooltipLayerStyleLeftRight, tooltipOffset, tooltipLayer)) { tooltipLayer.style.right = null; _checkRight(targetOffset, tooltipLayerStyleLeftRight, tooltipOffset, windowSize, tooltipLayer); }       tooltipLayer.style.top = (targetOffset.height + 20) + 'px'; break;

// case 'bottom-left-aligned': // Bottom-left-aligned is the same as the default bottom // case 'bottom': // Bottom going to follow the default behavior default: arrowLayer.className = 'introjs-arrow top';

tooltipLayerStyleLeft = 0; _checkRight(targetOffset, tooltipLayerStyleLeft, tooltipOffset, windowSize, tooltipLayer); tooltipLayer.style.top   = (targetOffset.height +  20) + 'px'; } }

/**  * Set tooltip left so it doesn't go off the right side of the window *  * @return boolean true, if tooltipLayerStyleLeft is ok. false, otherwise. */ function _checkRight(targetOffset, tooltipLayerStyleLeft, tooltipOffset, windowSize, tooltipLayer) { if (targetOffset.left + tooltipLayerStyleLeft + tooltipOffset.width > windowSize.width) { // off the right side of the window tooltipLayer.style.left = (windowSize.width - tooltipOffset.width - targetOffset.left) + 'px'; return false; }   tooltipLayer.style.left = tooltipLayerStyleLeft + 'px'; return true; }

/**  * Set tooltip right so it doesn't go off the left side of the window *  * @return boolean true, if tooltipLayerStyleRight is ok. false, otherwise. */ function _checkLeft(targetOffset, tooltipLayerStyleRight, tooltipOffset, tooltipLayer) { if (targetOffset.left + targetOffset.width - tooltipLayerStyleRight - tooltipOffset.width < 0) { // off the left side of the window tooltipLayer.style.left = (-targetOffset.left) + 'px'; return false; }   tooltipLayer.style.right = tooltipLayerStyleRight + 'px'; return true; }

/**  * Determines the position of the tooltip based on the position precedence and availability * of screen space. *  * @param {Object}    targetElement * @param {Object}   tooltipLayer * @param {String}   desiredTooltipPosition * @return {String}  calculatedPosition */ function _determineAutoPosition(targetElement, tooltipLayer, desiredTooltipPosition) {

// Take a clone of position precedence. These will be the available var possiblePositions = this._options.positionPrecedence.slice;

var windowSize = _getWinSize; var tooltipHeight = _getOffset(tooltipLayer).height + 10; var tooltipWidth = _getOffset(tooltipLayer).width + 20; var targetElementRect = targetElement.getBoundingClientRect;

// If we check all the possible areas, and there are no valid places for the tooltip, the element // must take up most of the screen real estate. Show the tooltip floating in the middle of the screen. var calculatedPosition = "floating";

/*   * auto determine position */

// Check for space below if (targetElementRect.bottom + tooltipHeight + tooltipHeight > windowSize.height) { _removeEntry(possiblePositions, "bottom"); }

// Check for space above if (targetElementRect.top - tooltipHeight < 0) { _removeEntry(possiblePositions, "top"); }

// Check for space to the right if (targetElementRect.right + tooltipWidth > windowSize.width) { _removeEntry(possiblePositions, "right"); }

// Check for space to the left if (targetElementRect.left - tooltipWidth < 0) { _removeEntry(possiblePositions, "left"); }

// @var {String} ex: 'right-aligned' var desiredAlignment = (function (pos) {     var hyphenIndex = pos.indexOf('-');      if (hyphenIndex !== -1) {        // has alignment        return pos.substr(hyphenIndex);      }      return ;    })(desiredTooltipPosition || );

// strip alignment from position if (desiredTooltipPosition) { // ex: "bottom-right-aligned" // should return 'bottom' desiredTooltipPosition = desiredTooltipPosition.split('-')[0]; }

if (possiblePositions.length) { if (desiredTooltipPosition !== "auto" &&         possiblePositions.indexOf(desiredTooltipPosition) > -1) { // If the requested position is in the list, choose that calculatedPosition = desiredTooltipPosition; } else { // Pick the first valid position, in order calculatedPosition = possiblePositions[0]; }   }

// only top and bottom positions have optional alignments if (['top', 'bottom'].indexOf(calculatedPosition) !== -1) { calculatedPosition += _determineAutoAlignment(targetElementRect.left, tooltipWidth, windowSize, desiredAlignment); }

return calculatedPosition; }

/** * auto-determine alignment * @param {Integer} offsetLeft * @param {Integer} tooltipWidth * @param {Object}  windowSize * @param {String}  desiredAlignment * @return {String} calculatedAlignment */ function _determineAutoAlignment (offsetLeft, tooltipWidth, windowSize, desiredAlignment) { var halfTooltipWidth = tooltipWidth / 2, winWidth = Math.min(windowSize.width, window.screen.width), possibleAlignments = ['-left-aligned', '-middle-aligned', '-right-aligned'], calculatedAlignment = ''; // valid left must be at least a tooltipWidth // away from right side if (winWidth - offsetLeft < tooltipWidth) { _removeEntry(possibleAlignments, '-left-aligned'); }

// valid middle must be at least half // width away from both sides if (offsetLeft < halfTooltipWidth ||      winWidth - offsetLeft < halfTooltipWidth) { _removeEntry(possibleAlignments, '-middle-aligned'); }

// valid right must be at least a tooltipWidth // width away from left side if (offsetLeft < tooltipWidth) { _removeEntry(possibleAlignments, '-right-aligned'); }

if (possibleAlignments.length) { if (possibleAlignments.indexOf(desiredAlignment) !== -1) { // the desired alignment is valid calculatedAlignment = desiredAlignment; } else { // pick the first valid position, in order calculatedAlignment = possibleAlignments[0]; }   } else { // if screen width is too small // for ANY alignment, middle is      // probably the best for visibility calculatedAlignment = '-middle-aligned'; }

return calculatedAlignment; }

/**  * Remove an entry from a string array if it's there, does nothing if it isn't there. *  * @param {Array} stringArray * @param {String} stringToRemove */ function _removeEntry(stringArray, stringToRemove) { if (stringArray.indexOf(stringToRemove) > -1) { stringArray.splice(stringArray.indexOf(stringToRemove), 1); } }

/**  * Update the position of the helper layer on the screen *  * @api private * @method _setHelperLayerPosition * @param {Object} helperLayer */ function _setHelperLayerPosition(helperLayer) { if (helperLayer) { //prevent error when `this._currentStep` in undefined if (!this._introItems[this._currentStep]) return;

var currentElement = this._introItems[this._currentStep], elementPosition = _getOffset(currentElement.element), widthHeightPadding = this._options.helperElementPadding;

// If the target element is fixed, the tooltip should be fixed as well. // Otherwise, remove a fixed class that may be left over from the previous // step. if (_isFixed(currentElement.element)) { _addClass(helperLayer, 'introjs-fixedTooltip'); } else { _removeClass(helperLayer, 'introjs-fixedTooltip'); }

if (currentElement.position === 'floating') { widthHeightPadding = 0; }

//set new position to helper layer helperLayer.style.cssText = 'width: ' + (elementPosition.width + widthHeightPadding)  + 'px; ' + 'height:' + (elementPosition.height + widthHeightPadding) + 'px; ' + 'top:'   + (elementPosition.top    - widthHeightPadding / 2)   + 'px;' + 'left: ' + (elementPosition.left   - widthHeightPadding / 2)   + 'px;';

} }

/**  * Add disableinteraction layer and adjust the size and position of the layer *  * @api private * @method _disableInteraction */ function _disableInteraction { var disableInteractionLayer = document.querySelector('.introjs-disableInteraction');

if (disableInteractionLayer === null) { disableInteractionLayer = document.createElement('div'); disableInteractionLayer.className = 'introjs-disableInteraction'; this._targetElement.appendChild(disableInteractionLayer); }

_setHelperLayerPosition.call(this, disableInteractionLayer); }

/**  * Setting anchors to behave like buttons *  * @api private * @method _setAnchorAsButton */ function _setAnchorAsButton(anchor){ anchor.setAttribute('role', 'button'); anchor.tabIndex = 0; }

/**  * Show an element on the page *  * @api private * @method _showElement * @param {Object} targetElement */ function _showElement(targetElement) { if (typeof (this._introChangeCallback) !== 'undefined') { this._introChangeCallback.call(this, targetElement.element); }

var self = this, oldHelperLayer = document.querySelector('.introjs-helperLayer'), oldReferenceLayer = document.querySelector('.introjs-tooltipReferenceLayer'), highlightClass = 'introjs-helperLayer', nextTooltipButton, prevTooltipButton, skipTooltipButton, scrollParent;

//check for a current step highlight class if (typeof (targetElement.highlightClass) === 'string') { highlightClass += (' ' + targetElement.highlightClass); }   //check for options highlight class if (typeof (this._options.highlightClass) === 'string') { highlightClass += (' ' + this._options.highlightClass); }

if (oldHelperLayer !== null) { var oldHelperNumberLayer = oldReferenceLayer.querySelector('.introjs-helperNumberLayer'), oldtooltipLayer     = oldReferenceLayer.querySelector('.introjs-tooltiptext'), oldArrowLayer       = oldReferenceLayer.querySelector('.introjs-arrow'), oldtooltipContainer = oldReferenceLayer.querySelector('.introjs-tooltip'); skipTooltipButton   = oldReferenceLayer.querySelector('.introjs-skipbutton'); prevTooltipButton   = oldReferenceLayer.querySelector('.introjs-prevbutton'); nextTooltipButton   = oldReferenceLayer.querySelector('.introjs-nextbutton');

//update or reset the helper highlight class oldHelperLayer.className = highlightClass; //hide the tooltip oldtooltipContainer.style.opacity = 0; oldtooltipContainer.style.display = "none";

if (oldHelperNumberLayer !== null) { var lastIntroItem = this._introItems[(targetElement.step - 2 >= 0 ? targetElement.step - 2 : 0)];

if (lastIntroItem !== null && (this._direction === 'forward' && lastIntroItem.position === 'floating') || (this._direction === 'backward' && targetElement.position === 'floating')) { oldHelperNumberLayer.style.opacity = 0; }     }

// scroll to element scrollParent = _getScrollParent( targetElement.element );

if (scrollParent !== document.body) { // target is within a scrollable element _scrollParentToElement(scrollParent, targetElement.element); }

// set new position to helper layer _setHelperLayerPosition.call(self, oldHelperLayer); _setHelperLayerPosition.call(self, oldReferenceLayer);

//remove `introjs-fixParent` class from the elements var fixParents = document.querySelectorAll('.introjs-fixParent'); _forEach(fixParents, function (parent) {       _removeClass(parent, /introjs-fixParent/g);      }); //remove old classes if the element still exist _removeShowElement;

//we should wait until the CSS3 transition is competed (it's 0.3 sec) to prevent incorrect `height` and `width` calculation if (self._lastShowElementTimer) { window.clearTimeout(self._lastShowElementTimer); }

self._lastShowElementTimer = window.setTimeout(function {       //set current step to the label        if (oldHelperNumberLayer !== null) {          oldHelperNumberLayer.innerHTML = targetElement.step;        }        //set current tooltip text        oldtooltipLayer.innerHTML = targetElement.intro;        //set the tooltip position        oldtooltipContainer.style.display = "block";        _placeTooltip.call(self, targetElement.element, oldtooltipContainer, oldArrowLayer, oldHelperNumberLayer);

//change active bullet if (self._options.showBullets) { oldReferenceLayer.querySelector('.introjs-bullets li > a.active').className = ''; oldReferenceLayer.querySelector('.introjs-bullets li > a[data-stepnumber="' + targetElement.step + '"]').className = 'active'; }       oldReferenceLayer.querySelector('.introjs-progress .introjs-progressbar').style.cssText = 'width:' + _getProgress.call(self) + '%;'; oldReferenceLayer.querySelector('.introjs-progress .introjs-progressbar').setAttribute('aria-valuenow', _getProgress.call(self));

//show the tooltip oldtooltipContainer.style.opacity = 1; if (oldHelperNumberLayer) oldHelperNumberLayer.style.opacity = 1;

//reset button focus if (typeof skipTooltipButton !== "undefined" && skipTooltipButton !== null && /introjs-donebutton/gi.test(skipTooltipButton.className)) { // skip button is now "done" button skipTooltipButton.focus; } else if (typeof nextTooltipButton !== "undefined" && nextTooltipButton !== null) { //still in the tour, focus on next nextTooltipButton.focus; }

// change the scroll of the window, if needed _scrollTo.call(self, targetElement.scrollTo, targetElement, oldtooltipLayer); }, 350);

// end of old element if-else condition } else { var helperLayer      = document.createElement('div'), referenceLayer   = document.createElement('div'), arrowLayer       = document.createElement('div'), tooltipLayer     = document.createElement('div'), tooltipTextLayer = document.createElement('div'), bulletsLayer     = document.createElement('div'), progressLayer    = document.createElement('div'), buttonsLayer     = document.createElement('div');

helperLayer.className = highlightClass; referenceLayer.className = 'introjs-tooltipReferenceLayer';

// scroll to element scrollParent = _getScrollParent( targetElement.element );

if (scrollParent !== document.body) { // target is within a scrollable element _scrollParentToElement(scrollParent, targetElement.element); }

//set new position to helper layer _setHelperLayerPosition.call(self, helperLayer); _setHelperLayerPosition.call(self, referenceLayer);

//add helper layer to target element this._targetElement.appendChild(helperLayer); this._targetElement.appendChild(referenceLayer);

arrowLayer.className = 'introjs-arrow';

tooltipTextLayer.className = 'introjs-tooltiptext'; tooltipTextLayer.innerHTML = targetElement.intro;

bulletsLayer.className = 'introjs-bullets';

if (this._options.showBullets === false) { bulletsLayer.style.display = 'none'; }

var ulContainer = document.createElement('ul'); ulContainer.setAttribute('role', 'tablist');

var anchorClick = function { self.goToStep(this.getAttribute('data-stepnumber')); };

_forEach(this._introItems, function (item, i) {       var innerLi    = document.createElement('li');        var anchorLink = document.createElement('a');        innerLi.setAttribute('role', 'presentation');        anchorLink.setAttribute('role', 'tab');

anchorLink.onclick = anchorClick;

if (i === (targetElement.step-1)) { anchorLink.className = 'active'; }

_setAnchorAsButton(anchorLink); anchorLink.innerHTML = " "; anchorLink.setAttribute('data-stepnumber', item.step);

innerLi.appendChild(anchorLink); ulContainer.appendChild(innerLi); });

bulletsLayer.appendChild(ulContainer);

progressLayer.className = 'introjs-progress';

if (this._options.showProgress === false) { progressLayer.style.display = 'none'; }     var progressBar = document.createElement('div'); progressBar.className = 'introjs-progressbar'; progressBar.setAttribute('role', 'progress'); progressBar.setAttribute('aria-valuemin', 0); progressBar.setAttribute('aria-valuemax', 100); progressBar.setAttribute('aria-valuenow', _getProgress.call(this)); progressBar.style.cssText = 'width:' + _getProgress.call(this) + '%;';

progressLayer.appendChild(progressBar);

buttonsLayer.className = 'introjs-tooltipbuttons'; if (this._options.showButtons === false) { buttonsLayer.style.display = 'none'; }

tooltipLayer.className = 'introjs-tooltip'; tooltipLayer.appendChild(tooltipTextLayer); tooltipLayer.appendChild(bulletsLayer); tooltipLayer.appendChild(progressLayer);

//add helper layer number var helperNumberLayer = document.createElement('span'); if (this._options.showStepNumbers === true) { helperNumberLayer.className = 'introjs-helperNumberLayer'; helperNumberLayer.innerHTML = targetElement.step; referenceLayer.appendChild(helperNumberLayer); }

tooltipLayer.appendChild(arrowLayer); referenceLayer.appendChild(tooltipLayer);

//next button nextTooltipButton = document.createElement('a');

nextTooltipButton.onclick = function { if (self._introItems.length - 1 !== self._currentStep) { _nextStep.call(self); }     };

_setAnchorAsButton(nextTooltipButton); nextTooltipButton.innerHTML = this._options.nextLabel;

//previous button prevTooltipButton = document.createElement('a');

prevTooltipButton.onclick = function { if (self._currentStep !== 0) { _previousStep.call(self); }     };

_setAnchorAsButton(prevTooltipButton); prevTooltipButton.innerHTML = this._options.prevLabel;

//skip button skipTooltipButton = document.createElement('a'); skipTooltipButton.className = this._options.buttonClass + ' introjs-skipbutton '; _setAnchorAsButton(skipTooltipButton); skipTooltipButton.innerHTML = this._options.skipLabel;

skipTooltipButton.onclick = function { if (self._introItems.length - 1 === self._currentStep && typeof (self._introCompleteCallback) === 'function') { self._introCompleteCallback.call(self); }

if (self._introItems.length - 1 !== self._currentStep && typeof (self._introExitCallback) === 'function') { self._introExitCallback.call(self); }

if (typeof(self._introSkipCallback) === 'function') { self._introSkipCallback.call(self); }

_exitIntro.call(self, self._targetElement); };

buttonsLayer.appendChild(skipTooltipButton);

//in order to prevent displaying next/previous button always if (this._introItems.length > 1) { buttonsLayer.appendChild(prevTooltipButton); buttonsLayer.appendChild(nextTooltipButton); }

tooltipLayer.appendChild(buttonsLayer);

//set proper position _placeTooltip.call(self, targetElement.element, tooltipLayer, arrowLayer, helperNumberLayer);

// change the scroll of the window, if needed _scrollTo.call(this, targetElement.scrollTo, targetElement, tooltipLayer);

//end of new element if-else condition }

// removing previous disable interaction layer var disableInteractionLayer = self._targetElement.querySelector('.introjs-disableInteraction'); if (disableInteractionLayer) { disableInteractionLayer.parentNode.removeChild(disableInteractionLayer); }

//disable interaction if (targetElement.disableInteraction) { _disableInteraction.call(self); }

// when it's the first step of tour if (this._currentStep === 0 && this._introItems.length > 1) { if (typeof skipTooltipButton !== "undefined" && skipTooltipButton !== null) { skipTooltipButton.className = this._options.buttonClass + ' introjs-skipbutton'; }     if (typeof nextTooltipButton !== "undefined" && nextTooltipButton !== null) { nextTooltipButton.className = this._options.buttonClass + ' introjs-nextbutton'; }

if (this._options.hidePrev === true) { if (typeof prevTooltipButton !== "undefined" && prevTooltipButton !== null) { prevTooltipButton.className = this._options.buttonClass + ' introjs-prevbutton introjs-hidden'; }       if (typeof nextTooltipButton !== "undefined" && nextTooltipButton !== null) { _addClass(nextTooltipButton, 'introjs-fullbutton'); }     } else { if (typeof prevTooltipButton !== "undefined" && prevTooltipButton !== null) { prevTooltipButton.className = this._options.buttonClass + ' introjs-prevbutton introjs-disabled'; }     }

if (typeof skipTooltipButton !== "undefined" && skipTooltipButton !== null) { skipTooltipButton.innerHTML = this._options.skipLabel; }   } else if (this._introItems.length - 1 === this._currentStep || this._introItems.length === 1) { // last step of tour if (typeof skipTooltipButton !== "undefined" && skipTooltipButton !== null) { skipTooltipButton.innerHTML = this._options.doneLabel; // adding donebutton class in addition to skipbutton _addClass(skipTooltipButton, 'introjs-donebutton'); }     if (typeof prevTooltipButton !== "undefined" && prevTooltipButton !== null) { prevTooltipButton.className = this._options.buttonClass + ' introjs-prevbutton'; }

if (this._options.hideNext === true) { if (typeof nextTooltipButton !== "undefined" && nextTooltipButton !== null) { nextTooltipButton.className = this._options.buttonClass + ' introjs-nextbutton introjs-hidden'; }       if (typeof prevTooltipButton !== "undefined" && prevTooltipButton !== null) { _addClass(prevTooltipButton, 'introjs-fullbutton'); }     } else { if (typeof nextTooltipButton !== "undefined" && nextTooltipButton !== null) { nextTooltipButton.className = this._options.buttonClass + ' introjs-nextbutton introjs-disabled'; }     }    } else { // steps between start and end if (typeof skipTooltipButton !== "undefined" && skipTooltipButton !== null) { skipTooltipButton.className = this._options.buttonClass + ' introjs-skipbutton'; }     if (typeof prevTooltipButton !== "undefined" && prevTooltipButton !== null) { prevTooltipButton.className = this._options.buttonClass + ' introjs-prevbutton'; }     if (typeof nextTooltipButton !== "undefined" && nextTooltipButton !== null) { nextTooltipButton.className = this._options.buttonClass + ' introjs-nextbutton'; }     if (typeof skipTooltipButton !== "undefined" && skipTooltipButton !== null) { skipTooltipButton.innerHTML = this._options.skipLabel; }   }

prevTooltipButton.setAttribute('role', 'button'); nextTooltipButton.setAttribute('role', 'button'); skipTooltipButton.setAttribute('role', 'button');

//Set focus on "next" button, so that hitting Enter always moves you onto the next step if (typeof nextTooltipButton !== "undefined" && nextTooltipButton !== null) { nextTooltipButton.focus; }

_setShowElement(targetElement);

if (typeof (this._introAfterChangeCallback) !== 'undefined') { this._introAfterChangeCallback.call(this, targetElement.element); } }

/**  * To change the scroll of `window` after highlighting an element *  * @api private * @method _scrollTo * @param {String} scrollTo * @param {Object} targetElement * @param {Object} tooltipLayer */ function _scrollTo(scrollTo, targetElement, tooltipLayer) { if (scrollTo === 'off') return; var rect;

if (!this._options.scrollToElement) return;

if (scrollTo === 'tooltip') { rect = tooltipLayer.getBoundingClientRect; } else { rect = targetElement.element.getBoundingClientRect; }

if (!_elementInViewport(targetElement.element)) { var winHeight = _getWinSize.height; var top = rect.bottom - (rect.bottom - rect.top);

// TODO (afshinm): do we need scroll padding now? // I have changed the scroll option and now it scrolls the window to     // the center of the target element or tooltip.

if (top < 0 || targetElement.element.clientHeight > winHeight) { window.scrollBy(0, rect.top - ((winHeight / 2) - (rect.height / 2)) - this._options.scrollPadding); // 30px padding from edge to look nice

//Scroll down } else { window.scrollBy(0, rect.top - ((winHeight / 2) - (rect.height / 2)) + this._options.scrollPadding); // 30px padding from edge to look nice }   }  }

/**  * To remove all show element(s) *  * @api private * @method _removeShowElement */ function _removeShowElement { var elms = document.querySelectorAll('.introjs-showElement');

_forEach(elms, function (elm) {     _removeClass(elm, /introjs-[a-zA-Z]+/g);    }); }

/**  * To set the show element * This function set a relative (in most cases) position and changes the z-index *  * @api private * @method _setShowElement * @param {Object} targetElement */ function _setShowElement(targetElement) { var parentElm; // we need to add this show element class to the parent of SVG elements // because the SVG elements can't have independent z-index if (targetElement.element instanceof SVGElement) { parentElm = targetElement.element.parentNode;

while (targetElement.element.parentNode !== null) { if (!parentElm.tagName || parentElm.tagName.toLowerCase === 'body') break;

if (parentElm.tagName.toLowerCase === 'svg') { _addClass(parentElm, 'introjs-showElement introjs-relativePosition'); }

parentElm = parentElm.parentNode; }   }

_addClass(targetElement.element, 'introjs-showElement');

var currentElementPosition = _getPropValue(targetElement.element, 'position'); if (currentElementPosition !== 'absolute' &&       currentElementPosition !== 'relative' &&        currentElementPosition !== 'fixed') { //change to new intro item _addClass(targetElement.element, 'introjs-relativePosition'); }

parentElm = targetElement.element.parentNode; while (parentElm !== null) { if (!parentElm.tagName || parentElm.tagName.toLowerCase === 'body') break;

//fix The Stacking Context problem. //More detail: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context var zIndex = _getPropValue(parentElm, 'z-index'); 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' && transform !== undefined)) { _addClass(parentElm, 'introjs-fixParent'); }

parentElm = parentElm.parentNode; } }

/** * Iterates arrays * * @param {Array} arr * @param {Function} forEachFnc * @param {Function} completeFnc * @return {Null} */ function _forEach(arr, forEachFnc, completeFnc) { // in case arr is an empty query selector node list if (arr) { for (var i = 0, len = arr.length; i < len; i++) { forEachFnc(arr[i], i); }   }

if (typeof(completeFnc) === 'function') { completeFnc; } }

/** * Mark any object with an incrementing number * used for keeping track of objects * * @param Object obj   Any object or DOM Element * @param String key * @return Object */ var _stamp = (function  {    var keys = {};    return function stamp (obj, key) {      // get group key      key = key || 'introjs-stamp';

// each group increments from 0 keys[key] = keys[key] || 0;

// stamp only once per object if (obj[key] === undefined) { // increment key for each new object obj[key] = keys[key]++; }

return obj[key]; }; });

/** * DOMEvent Handles all DOM events * * methods: * * on - add event handler * off - remove event */ var DOMEvent = (function  {    function DOMEvent  {      var events_key = 'introjs_event';      /**      * Gets a unique ID for an event listener      *      * @param Object obj      * @param String type        event type      * @param Function listener      * @param Object context      * @return String      */      this._id = function (obj, type, listener, context) {        return type + _stamp(listener) + (context ? '_' + _stamp(context) : '');     };

/**     * Adds event listener *     * @param Object obj * @param String type       event type * @param Function listener * @param Object context * @param Boolean useCapture * @return null */     this.on = function (obj, type, listener, context, useCapture) { var id = this._id.apply(this, arguments), handler = function (e) { return listener.call(context || obj, e || window.event); };

if ('addEventListener' in obj) { obj.addEventListener(type, handler, useCapture); } else if ('attachEvent' in obj) { obj.attachEvent('on' + type, handler); }

obj[events_key] = obj[events_key] || {}; obj[events_key][id] = handler; };

/**     * Removes event listener *     * @param Object obj * @param String type       event type * @param Function listener * @param Object context * @param Boolean useCapture * @return null */     this.off = function (obj, type, listener, context, useCapture) { var id = this._id.apply(this, arguments), handler = obj[events_key] && obj[events_key][id];

if (!handler) { return; }

if ('removeEventListener' in obj) { obj.removeEventListener(type, handler, useCapture); } else if ('detachEvent' in obj) { obj.detachEvent('on' + type, handler); }

obj[events_key][id] = null; };   }

return new DOMEvent; });

/**  * Append a class to an element *  * @api private * @method _addClass * @param {Object} element * @param {String} className * @returns null */ function _addClass(element, className) { if (element instanceof SVGElement) { // svg var pre = element.getAttribute('class') || '';

element.setAttribute('class', pre + ' ' + className); } else { if (element.classList !== undefined) { // check for modern classList property var classes = className.split(' '); _forEach(classes, function (cls) {         element.classList.add( cls );        }); } else if (!element.className.match( className )) { // check if element doesn't already have className element.className += ' ' + className; }   }  }

/**  * Remove a class from an element *  * @api private * @method _removeClass * @param {Object} element * @param {RegExp|String} classNameRegex can be regex or string * @returns null */ function _removeClass(element, classNameRegex) { if (element instanceof SVGElement) { var pre = element.getAttribute('class') || '';

element.setAttribute('class', pre.replace(classNameRegex, ).replace(/^\s+|\s+$/g, )); } else { element.className = element.className.replace(classNameRegex, ).replace(/^\s+|\s+$/g, ); } }

/**  * Get an element CSS property on the page * Thanks to JavaScript Kit: http://www.javascriptkit.com/dhtmltutors/dhtmlcascade4.shtml *  * @api private * @method _getPropValue * @param {Object} element * @param {String} propName * @returns Element's property value */ function _getPropValue (element, propName) { var propValue = ''; if (element.currentStyle) { //IE propValue = element.currentStyle[propName]; } else if (document.defaultView && document.defaultView.getComputedStyle) { //Others propValue = document.defaultView.getComputedStyle(element, null).getPropertyValue(propName); }

//Prevent exception in IE   if (propValue && propValue.toLowerCase) { return propValue.toLowerCase; } else { return propValue; } }

/**  * Checks to see if target element (or parents) position is fixed or not *  * @api private * @method _isFixed * @param {Object} element * @returns Boolean */ function _isFixed (element) { var p = element.parentNode;

if (!p || p.nodeName === 'HTML') { return false; }

if (_getPropValue(element, 'position') === 'fixed') { return true; }

return _isFixed(p); }

/**  * Provides a cross-browser way to get the screen dimensions * via: http://stackoverflow.com/questions/5864467/internet-explorer-innerheight *  * @api private * @method _getWinSize * @returns {Object} width and height attributes */ function _getWinSize { if (window.innerWidth !== undefined) { return { width: window.innerWidth, height: window.innerHeight }; } else { var D = document.documentElement; return { width: D.clientWidth, height: D.clientHeight }; } }

/**  * Check to see if the element is in the viewport or not * http://stackoverflow.com/questions/123999/how-to-tell-if-a-dom-element-is-visible-in-the-current-viewport *  * @api private * @method _elementInViewport * @param {Object} el  */ function _elementInViewport(el) { var rect = el.getBoundingClientRect;

return (     rect.top >= 0 &&      rect.left >= 0 &&      (rect.bottom+80) <= window.innerHeight && // add 80 to get the text right      rect.right <= window.innerWidth    ); }

/**  * Add overlay layer to the page *  * @api private * @method _addOverlayLayer * @param {Object} targetElm */ function _addOverlayLayer(targetElm) { var overlayLayer = document.createElement('div'), styleText = '', self = this;

//set css class name overlayLayer.className = 'introjs-overlay';

//check if the target element is body, we should calculate the size of overlay layer in a better way if (!targetElm.tagName || targetElm.tagName.toLowerCase === 'body') { styleText += 'top: 0;bottom: 0; left: 0;right: 0;position: fixed;'; overlayLayer.style.cssText = 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.style.cssText = styleText; }   }

targetElm.appendChild(overlayLayer);

overlayLayer.onclick = function { if (self._options.exitOnOverlayClick === true) { _exitIntro.call(self, targetElm); }   };

window.setTimeout(function {     styleText += 'opacity: ' + self._options.overlayOpacity.toString + ';';      overlayLayer.style.cssText = styleText;    }, 10);

return true; }

/**  * Removes open hint (tooltip hint) *  * @api private * @method _removeHintTooltip */ function _removeHintTooltip { var tooltip = document.querySelector('.introjs-hintReference');

if (tooltip) { var step = tooltip.getAttribute('data-step'); tooltip.parentNode.removeChild(tooltip); return step; } }

/**  * Start parsing hint items *  * @api private * @param {Object} targetElm * @method _startHint */ function _populateHints(targetElm) {

this._introItems = [];

if (this._options.hints) { _forEach(this._options.hints, function (hint) {       var currentItem = _cloneObject(hint);

if (typeof(currentItem.element) === 'string') { //grab the element with given selector from the page currentItem.element = document.querySelector(currentItem.element); }

currentItem.hintPosition = currentItem.hintPosition || this._options.hintPosition; currentItem.hintAnimation = currentItem.hintAnimation || this._options.hintAnimation;

if (currentItem.element !== null) { this._introItems.push(currentItem); }     }.bind(this));    } else {      var hints = targetElm.querySelectorAll('*[data-hint]');

if (!hints || !hints.length) { return false; }

//first add intro items with data-step _forEach(hints, function (currentElement) {       // hint animation        var hintAnimation = currentElement.getAttribute('data-hintanimation');

if (hintAnimation) { hintAnimation = (hintAnimation === 'true'); } else { hintAnimation = this._options.hintAnimation; }

this._introItems.push({         element: currentElement,          hint: currentElement.getAttribute('data-hint'),          hintPosition: currentElement.getAttribute('data-hintposition') || this._options.hintPosition,          hintAnimation: hintAnimation,          tooltipClass: currentElement.getAttribute('data-tooltipclass'),          position: currentElement.getAttribute('data-position') || this._options.tooltipPosition        }); }.bind(this));   }

_addHints.call(this);

/*    todo: these events should be removed at some point */   DOMEvent.on(document, 'click', _removeHintTooltip, this, false); DOMEvent.on(window, 'resize', _reAlignHints, this, true); }

/**  * Re-aligns all hint elements *  * @api private * @method _reAlignHints */ function _reAlignHints { _forEach(this._introItems, function (item) {     if (typeof(item.targetElement) === 'undefined') {        return;      }

_alignHintPosition.call(this, item.hintPosition, item.element, item.targetElement); }.bind(this)); }

/** * Get a queryselector within the hint wrapper * * @param {String} selector * @return {NodeList|Array} */ function _hintQuerySelectorAll(selector) { var hintsWrapper = document.querySelector('.introjs-hints'); return (hintsWrapper) ? hintsWrapper.querySelectorAll(selector) : []; }

/**  * Hide a hint *  * @api private * @method _hideHint */ function _hideHint(stepId) { var hint = _hintQuerySelectorAll('.introjs-hint[data-step="' + stepId + '"]')[0]; _removeHintTooltip.call(this);

if (hint) { _addClass(hint, 'introjs-hidehint'); }

// call the callback function (if any) if (typeof (this._hintCloseCallback) !== 'undefined') { this._hintCloseCallback.call(this, stepId); } }

/**  * Hide all hints *  * @api private * @method _hideHints */ function _hideHints { var hints = _hintQuerySelectorAll('.introjs-hint');

_forEach(hints, function (hint) {     _hideHint.call(this, hint.getAttribute('data-step'));    }.bind(this)); }

/**  * Show all hints *  * @api private * @method _showHints */ function _showHints { var hints = _hintQuerySelectorAll('.introjs-hint');

if (hints && hints.length) { _forEach(hints, function (hint) {       _showHint.call(this, hint.getAttribute('data-step'));      }.bind(this)); } else { _populateHints.call(this, this._targetElement); } }

/**  * Show a hint *  * @api private * @method _showHint */ function _showHint(stepId) { var hint = _hintQuerySelectorAll('.introjs-hint[data-step="' + stepId + '"]')[0];

if (hint) { _removeClass(hint, /introjs-hidehint/g); } }

/**  * Removes all hint elements on the page * Useful when you want to destroy the elements and add them again (e.g. a modal or popup) *  * @api private * @method _removeHints */ function _removeHints { var hints = _hintQuerySelectorAll('.introjs-hint');

_forEach(hints, function (hint) {     _removeHint.call(this, hint.getAttribute('data-step'));    }.bind(this)); }

/**  * Remove one single hint element from the page * Useful when you want to destroy the element and add them again (e.g. a modal or popup) * Use removeHints if you want to remove all elements. *  * @api private * @method _removeHint */ function _removeHint(stepId) { var hint = _hintQuerySelectorAll('.introjs-hint[data-step="' + stepId + '"]')[0];

if (hint) { hint.parentNode.removeChild(hint); } }

/**  * Add all available hints to the page *  * @api private * @method _addHints */ function _addHints { var self = this;

var hintsWrapper = document.querySelector('.introjs-hints');

if (hintsWrapper === null) { hintsWrapper = document.createElement('div'); hintsWrapper.className = 'introjs-hints'; }

/**   * Returns an event handler unique to the hint iteration *    * @param {Integer} i    * @return {Function} */   var getHintClick = function (i) { return function(e) { var evt = e ? e : window.event; if (evt.stopPropagation) { evt.stopPropagation; }

if (evt.cancelBubble !== null) { evt.cancelBubble = true; }

_showHintDialog.call(self, i); };   };

_forEach(this._introItems, function(item, i) {     // avoid append a hint twice      if (document.querySelector('.introjs-hint[data-step="' + i + '"]')) {        return;      }

var hint = document.createElement('a'); _setAnchorAsButton(hint);

hint.onclick = getHintClick(i);

hint.className = 'introjs-hint';

if (!item.hintAnimation) { _addClass(hint, 'introjs-hint-no-anim'); }

// hint's position should be fixed if the target element's position is fixed if (_isFixed(item.element)) { _addClass(hint, 'introjs-fixedhint'); }

var hintDot = document.createElement('div'); hintDot.className = 'introjs-hint-dot'; var hintPulse = document.createElement('div'); hintPulse.className = 'introjs-hint-pulse';

hint.appendChild(hintDot); hint.appendChild(hintPulse); hint.setAttribute('data-step', i);

// we swap the hint element with target element // because _setHelperLayerPosition uses `element` property item.targetElement = item.element; item.element = hint;

// align the hint position _alignHintPosition.call(this, item.hintPosition, hint, item.targetElement);

hintsWrapper.appendChild(hint); }.bind(this));

// adding the hints wrapper document.body.appendChild(hintsWrapper);

// call the callback function (if any) if (typeof (this._hintsAddedCallback) !== 'undefined') { this._hintsAddedCallback.call(this); } }

/**  * Aligns hint position *  * @api private * @method _alignHintPosition * @param {String} position * @param {Object} hint * @param {Object} element */ function _alignHintPosition(position, hint, element) { // get/calculate offset of target element var offset = _getOffset.call(this, element); var iconWidth = 20; var iconHeight = 20;

// align the hint element switch (position) { default: case 'top-left': hint.style.left = offset.left + 'px'; hint.style.top = offset.top + 'px'; break; case 'top-right': hint.style.left = (offset.left + offset.width - iconWidth) + 'px'; hint.style.top = offset.top + 'px'; break; case 'bottom-left': hint.style.left = offset.left + 'px'; hint.style.top = (offset.top + offset.height - iconHeight) + 'px'; break; case 'bottom-right': hint.style.left = (offset.left + offset.width - iconWidth) + 'px'; hint.style.top = (offset.top + offset.height - iconHeight) + 'px'; break; case 'middle-left': hint.style.left = offset.left + 'px'; hint.style.top = (offset.top + (offset.height - iconHeight) / 2) + 'px'; break; case 'middle-right': hint.style.left = (offset.left + offset.width - iconWidth) + 'px'; hint.style.top = (offset.top + (offset.height - iconHeight) / 2) + 'px'; break; case 'middle-middle': hint.style.left = (offset.left + (offset.width - iconWidth) / 2) + 'px'; hint.style.top = (offset.top + (offset.height - iconHeight) / 2) + 'px'; break; case 'bottom-middle': hint.style.left = (offset.left + (offset.width - iconWidth) / 2) + 'px'; hint.style.top = (offset.top + offset.height - iconHeight) + 'px'; break; case 'top-middle': hint.style.left = (offset.left + (offset.width - iconWidth) / 2) + 'px'; hint.style.top = offset.top + 'px'; break; } }

/**  * Triggers when user clicks on the hint element *  * @api private * @method _showHintDialog * @param {Number} stepId */ function _showHintDialog(stepId) { var hintElement = document.querySelector('.introjs-hint[data-step="' + stepId + '"]'); var item = this._introItems[stepId];

// call the callback function (if any) if (typeof (this._hintClickCallback) !== 'undefined') { this._hintClickCallback.call(this, hintElement, item, stepId); }

// remove all open tooltips var removedStep = _removeHintTooltip.call(this);

// to toggle the tooltip if (parseInt(removedStep, 10) === stepId) { return; }

var tooltipLayer = document.createElement('div'); var tooltipTextLayer = document.createElement('div'); var arrowLayer = document.createElement('div'); var referenceLayer = document.createElement('div');

tooltipLayer.className = 'introjs-tooltip';

tooltipLayer.onclick = function (e) { //IE9 & Other Browsers if (e.stopPropagation) { e.stopPropagation; }     //IE8 and Lower else { e.cancelBubble = true; }   };

tooltipTextLayer.className = 'introjs-tooltiptext';

var tooltipWrapper = document.createElement('p'); tooltipWrapper.innerHTML = item.hint;

var closeButton = document.createElement('a'); closeButton.className = this._options.buttonClass; closeButton.setAttribute('role', 'button'); closeButton.innerHTML = this._options.hintButtonLabel; closeButton.onclick = _hideHint.bind(this, stepId);

tooltipTextLayer.appendChild(tooltipWrapper); tooltipTextLayer.appendChild(closeButton);

arrowLayer.className = 'introjs-arrow'; tooltipLayer.appendChild(arrowLayer);

tooltipLayer.appendChild(tooltipTextLayer);

// set current step for _placeTooltip function this._currentStep = hintElement.getAttribute('data-step');

// align reference layer position referenceLayer.className = 'introjs-tooltipReferenceLayer introjs-hintReference'; referenceLayer.setAttribute('data-step', hintElement.getAttribute('data-step')); _setHelperLayerPosition.call(this, referenceLayer);

referenceLayer.appendChild(tooltipLayer); document.body.appendChild(referenceLayer);

//set proper position _placeTooltip.call(this, hintElement, tooltipLayer, arrowLayer, null, true); }

/**  * Get an element position on the page * Thanks to `meouw`: http://stackoverflow.com/a/442474/375966 *  * @api private * @method _getOffset * @param {Object} element * @returns Element's position info */ function _getOffset(element) { var body = document.body; var docEl = document.documentElement; var scrollTop = window.pageYOffset || docEl.scrollTop || body.scrollTop; var scrollLeft = window.pageXOffset || docEl.scrollLeft || body.scrollLeft; var x = element.getBoundingClientRect; return { top: x.top + scrollTop, width: x.width, height: x.height, left: x.left + scrollLeft }; }

/** * Find the nearest scrollable parent * copied from https://stackoverflow.com/questions/35939886/find-first-scrollable-parent * * @param Element element * @return Element */ function _getScrollParent(element) { var style = window.getComputedStyle(element); var excludeStaticParent = (style.position === "absolute"); var overflowRegex = /(auto|scroll)/;

if (style.position === "fixed") return document.body; for (var parent = element; (parent = parent.parentElement);) { style = window.getComputedStyle(parent); if (excludeStaticParent && style.position === "static") { continue; }     if (overflowRegex.test(style.overflow + style.overflowY + style.overflowX)) return parent; }

return document.body; }

/** * scroll a scrollable element to a child element * * @param Element parent * @param Element element * @return Null */ function _scrollParentToElement (parent, element) { parent.scrollTop = element.offsetTop - parent.offsetTop; }

/**  * Gets the current progress percentage *  * @api private * @method _getProgress * @returns current progress percentage */ function _getProgress { // Steps are 0 indexed var currentStep = parseInt((this._currentStep + 1), 10); return ((currentStep / this._introItems.length) * 100); }

/**  * Overwrites obj1's values with obj2's and adds obj2's if non existent in obj1 * via: http://stackoverflow.com/questions/171251/how-can-i-merge-properties-of-two-javascript-objects-dynamically *  * @param obj1 * @param obj2 * @returns obj3 a new object based on obj1 and obj2 */ function _mergeOptions(obj1,obj2) { var obj3 = {}, attrname; for (attrname in obj1) { obj3[attrname] = obj1[attrname]; } for (attrname in obj2) { obj3[attrname] = obj2[attrname]; } return obj3; }

var introJs = function (targetElm) { var instance;

if (typeof (targetElm) === 'object') { //Ok, create a new instance instance = new IntroJs(targetElm);

} else if (typeof (targetElm) === 'string') { //select the target element with query selector var targetElement = document.querySelector(targetElm);

if (targetElement) { instance = new IntroJs(targetElement); } else { throw new Error('There is no element with given selector.'); }   } else { instance = new IntroJs(document.body); }   // add instance to list of _instances // passing group to _stamp to increment // from 0 onward somewhat reliably introJs.instances[ _stamp(instance, 'introjs-instance') ] = instance;

return instance; };

/**  * Current IntroJs version *  * @property version * @type String */ introJs.version = VERSION;

/** * key-val object helper for introJs instances * * @property instances * @type Object */ introJs.instances = {};

//Prototype introJs.fn = IntroJs.prototype = { clone: function { return new IntroJs(this); },   setOption: function(option, value) { this._options[option] = value; return this; },   setOptions: function(options) { this._options = _mergeOptions(this._options, options); return this; },   start: function (group) { _introForElement.call(this, this._targetElement, group); return this; },   goToStep: function(step) { _goToStep.call(this, step); return this; },   addStep: function(options) { if (!this._options.steps) { this._options.steps = []; }

this._options.steps.push(options);

return this; },   addSteps: function(steps) { if (!steps.length) return;

for(var index = 0; index < steps.length; index++) { this.addStep(steps[index]); }

return this; },   goToStepNumber: function(step) { _goToStepNumber.call(this, step);

return this; },   nextStep: function { _nextStep.call(this); return this; },   previousStep: function { _previousStep.call(this); return this; },   exit: function(force) { _exitIntro.call(this, this._targetElement, force); return this; },   refresh: function { _refresh.call(this); return this; },   onbeforechange: function(providedCallback) { if (typeof (providedCallback) === 'function') { this._introBeforeChangeCallback = providedCallback; } else { throw new Error('Provided callback for onbeforechange was not a function'); }     return this; },   onchange: function(providedCallback) { if (typeof (providedCallback) === 'function') { this._introChangeCallback = providedCallback; } else { throw new Error('Provided callback for onchange was not a function.'); }     return this; },   onafterchange: function(providedCallback) { if (typeof (providedCallback) === 'function') { this._introAfterChangeCallback = providedCallback; } else { throw new Error('Provided callback for onafterchange was not a function'); }     return this; },   oncomplete: function(providedCallback) { if (typeof (providedCallback) === 'function') { this._introCompleteCallback = providedCallback; } else { throw new Error('Provided callback for oncomplete was not a function.'); }     return this; },   onhintsadded: function(providedCallback) { if (typeof (providedCallback) === 'function') { this._hintsAddedCallback = providedCallback; } else { throw new Error('Provided callback for onhintsadded was not a function.'); }     return this; },   onhintclick: function(providedCallback) { if (typeof (providedCallback) === 'function') { this._hintClickCallback = providedCallback; } else { throw new Error('Provided callback for onhintclick was not a function.'); }     return this; },   onhintclose: function(providedCallback) { if (typeof (providedCallback) === 'function') { this._hintCloseCallback = providedCallback; } else { throw new Error('Provided callback for onhintclose was not a function.'); }     return this; },   onexit: function(providedCallback) { if (typeof (providedCallback) === 'function') { this._introExitCallback = providedCallback; } else { throw new Error('Provided callback for onexit was not a function.'); }     return this; },   onskip: function(providedCallback) { if (typeof (providedCallback) === 'function') { this._introSkipCallback = providedCallback; } else { throw new Error('Provided callback for onskip was not a function.'); }     return this; },   onbeforeexit: function(providedCallback) { if (typeof (providedCallback) === 'function') { this._introBeforeExitCallback = providedCallback; } else { throw new Error('Provided callback for onbeforeexit was not a function.'); }     return this; },   addHints: function { _populateHints.call(this, this._targetElement); return this; },   hideHint: function (stepId) { _hideHint.call(this, stepId); return this; },   hideHints: function  { _hideHints.call(this); return this; },   showHint: function (stepId) { _showHint.call(this, stepId); return this; },   showHints: function  { _showHints.call(this); return this; },   removeHints: function  { _removeHints.call(this); return this; },   removeHint: function (stepId) { _removeHint.call(this, stepId); return this; },   showHintDialog: function (stepId) { _showHintDialog.call(this, stepId); return this; } };

return introJs; });