camaleon_cms 2.8.1 → 2.8.3

data/app/assets/javascripts/camaleon_cms/admin/introjs/_intro.min.js

@@ -1,1317 +0,0 @@
-/**
- * Intro.js v1.1.1
- * https://github.com/usablica/intro.js
- * MIT licensed
- *
- * Copyright (C) 2013 usabli.ca - A weekend project by Afshin Mehrabani (@afshinmeh)
- */
-
-(function (root, factory) {
-    if (typeof exports === 'object') {
-        // CommonJS
-        factory(exports);
-    } else if (typeof define === 'function' && define.amd) {
-        // AMD. Register as an anonymous module.
-        define(['exports'], factory);
-    } else {
-        // Browser globals
-        factory(root);
-    }
-} (this, function (exports) {
-    //Default config/variables
-    var VERSION = '1.1.1';
-
-    /**
-     * IntroJs main class
-     *
-     * @class IntroJs
-     */
-    function IntroJs(obj) {
-        this._targetElement = obj;
-
-        this._options = {
-            /* Next button label in tooltip box */
-            nextLabel: 'Next →',
-            /* Previous button label in tooltip box */
-            prevLabel: '← Back',
-            /* Skip button label in tooltip box */
-            skipLabel: 'Skip',
-            /* Done button label in tooltip box */
-            doneLabel: 'Done',
-            /* 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,
-            /* 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
-        };
-    }
-
-    /**
-     * Initiate a new introduction/guide from an element in the page
-     *
-     * @api private
-     * @method _introForElement
-     * @param {Object} targetElm
-     * @returns {Boolean} Success or not?
-     */
-    function _introForElement(targetElm) {
-        var introItems = [],
-            self = this;
-
-        if (this._options.steps) {
-            //use steps passed programmatically
-            for (var i = 0, stepsLength = this._options.steps.length; i < stepsLength; i++) {
-                var currentItem = _cloneObject(this._options.steps[i]);
-                //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';
-                }
-
-                if (currentItem.element != null) {
-                    introItems.push(currentItem);
-                }
-            }
-
-        } else {
-            //use steps from data-* annotations
-            var allIntroSteps = targetElm.querySelectorAll('*[data-intro]');
-            //if there's no element to intro
-            if (allIntroSteps.length < 1) {
-                return false;
-            }
-
-            //first add intro items with data-step
-            for (var i = 0, elmsLength = allIntroSteps.length; i < elmsLength; i++) {
-                var currentElement = allIntroSteps[i];
-                var step = parseInt(currentElement.getAttribute('data-step'), 10);
-
-                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
-                    };
-                }
-            }
-
-            //next add intro items without data-step
-            //todo: we need a cleanup here, two loops are redundant
-            var nextStep = 0;
-            for (var i = 0, elmsLength = allIntroSteps.length; i < elmsLength; i++) {
-                var currentElement = allIntroSteps[i];
-
-                if (currentElement.getAttribute('data-step') == null) {
-
-                    while (true) {
-                        if (typeof introItems[nextStep] == 'undefined') {
-                            break;
-                        } else {
-                            nextStep++;
-                        }
-                    }
-
-                    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
-                    };
-                }
-            }
-        }
-
-        //removing undefined/null elements
-        var tempIntroItems = [];
-        for (var z = 0; z < introItems.length; z++) {
-            introItems[z] && tempIntroItems.push(introItems[z]);  // copy non-empty values to the end of the array
-        }
-
-        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
-        self._introItems = introItems;
-
-        //add overlay layer to the page
-        if(_addOverlayLayer.call(self, targetElm)) {
-            //then, start the show
-            _nextStep.call(self);
-
-            var skipButton     = targetElm.querySelector('.introjs-skipbutton'),
-                nextStepButton = targetElm.querySelector('.introjs-nextbutton');
-
-            self._onKeyDown = function(e) {
-                if (e.keyCode === 27 && self._options.exitOnEsc == true) {
-                    //escape key pressed, exit the intro
-                    //check if exit callback is defined
-                    if (self._introExitCallback != undefined) {
-                        self._introExitCallback.call(self);
-                    }
-                    _exitIntro.call(self, targetElm);
-                } else if(e.keyCode === 37) {
-                    //left arrow
-                    _previousStep.call(self);
-                } else if (e.keyCode === 39) {
-                    //right arrow
-                    _nextStep.call(self);
-                } else if (e.keyCode === 13) {
-                    //srcElement === ie
-                    var target = e.target || e.srcElement;
-                    if (target && target.className.indexOf('introjs-prevbutton') > 0) {
-                        //user hit enter while focusing on previous button
-                        _previousStep.call(self);
-                    } else if (target && target.className.indexOf('introjs-skipbutton') > 0) {
-                        //user hit enter while focusing on skip button
-                        if (self._introItems.length - 1 == self._currentStep && typeof (self._introCompleteCallback) === 'function') {
-                            self._introCompleteCallback.call(self);
-                        }
-                        //check if any callback is defined
-                        if (self._introExitCallback != undefined) {
-                            self._introExitCallback.call(self);
-                        }
-                        _exitIntro.call(self, targetElm);
-                    } else {
-                        //default behavior for responding to enter
-                        _nextStep.call(self);
-                    }
-
-                    //prevent default behaviour on hitting Enter, to prevent steps being skipped in some browsers
-                    if(e.preventDefault) {
-                        e.preventDefault();
-                    } else {
-                        e.returnValue = false;
-                    }
-                }
-            };
-
-            self._onResize = function(e) {
-                _setHelperLayerPosition.call(self, document.querySelector('.introjs-helperLayer'));
-                _setHelperLayerPosition.call(self, document.querySelector('.introjs-tooltipReferenceLayer'));
-            };
-
-            if (window.addEventListener) {
-                if (this._options.keyboardNavigation) {
-                    window.addEventListener('keydown', self._onKeyDown, true);
-                }
-                //for window resize
-                window.addEventListener('resize', self._onResize, true);
-            } else if (document.attachEvent) { //IE
-                if (this._options.keyboardNavigation) {
-                    document.attachEvent('onkeydown', self._onKeyDown);
-                }
-                //for window resize
-                document.attachEvent('onresize', self._onResize);
-            }
-        }
-        return 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 (jQuery) != 'undefined' && object[key] instanceof 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 next step on intro
-     *
-     * @api private
-     * @method _nextStep
-     */
-    function _nextStep() {
-        this._direction = 'forward';
-
-        if (typeof (this._currentStep) === 'undefined') {
-            this._currentStep = 0;
-        } else {
-            ++this._currentStep;
-        }
-
-        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;
-        }
-
-        var nextStep = this._introItems[this._currentStep];
-        if (typeof (this._introBeforeChangeCallback) !== 'undefined') {
-            this._introBeforeChangeCallback.call(this, nextStep.element);
-        }
-
-        //_showElement.call(this, nextStep);
-        var w = $(nextStep.element).attr("data-wait");
-        var thiss = this;
-        var _f = function(){ _showElement.call(thiss, nextStep); };
-        if(w) setTimeout(_f, w); else _f();
-    }
-
-    /**
-     * Go to previous step on intro
-     *
-     * @api private
-     * @method _nextStep
-     */
-    function _previousStep() {
-        this._direction = 'backward';
-
-        if (this._currentStep === 0) {
-            return false;
-        }
-
-        var nextStep = this._introItems[--this._currentStep];
-        if (typeof (this._introBeforeChangeCallback) !== 'undefined') {
-            this._introBeforeChangeCallback.call(this, nextStep.element);
-        }
-
-        //_showElement.call(this, nextStep);
-        var w = $(nextStep.element).attr("data-wait");
-        var thiss = this;
-        var _f = function(){ _showElement.call(thiss, nextStep); };
-        if(w) setTimeout(_f, w); else _f();
-    }
-
-    /**
-     * Exit from intro
-     *
-     * @api private
-     * @method _exitIntro
-     * @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);
-
-        //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);
-        }
-
-        //remove `introjs-showElement` class from the element
-        var showElement = document.querySelector('.introjs-showElement');
-        if (showElement) {
-            showElement.className = showElement.className.replace(/introjs-[a-zA-Z]+/g, '').replace(/^\s+|\s+$/g, ''); // This is a manual trim.
-        }
-
-        //remove `introjs-fixParent` class from the elements
-        var fixParents = document.querySelectorAll('.introjs-fixParent');
-        if (fixParents && fixParents.length > 0) {
-            for (var i = fixParents.length - 1; i >= 0; i--) {
-                fixParents[i].className = fixParents[i].className.replace(/introjs-fixParent/g, '').replace(/^\s+|\s+$/g, '');
-            }
-        }
-
-        //clean listeners
-        if (window.removeEventListener) {
-            window.removeEventListener('keydown', this._onKeyDown, true);
-        } else if (document.detachEvent) { //IE
-            document.detachEvent('onkeydown', this._onKeyDown);
-        }
-
-        //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
-     */
-    function _placeTooltip(targetElement, tooltipLayer, arrowLayer, helperNumberLayer) {
-        var tooltipCssClass = '',
-            currentStepObj,
-            tooltipOffset,
-            targetOffset,
-            windowSize,
-            currentTooltipPosition;
-
-        //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, '');
-
-        currentTooltipPosition = this._introItems[this._currentStep].position;
-        if ((currentTooltipPosition == "auto" || this._options.tooltipPosition == "auto")) {
-            if (currentTooltipPosition != "floating") { // Floating is always valid, no point in calculating
-                currentTooltipPosition = _determineAutoPosition.call(this, targetElement, tooltipLayer, currentTooltipPosition);
-            }
-        }
-        targetOffset  = _getOffset(targetElement);
-        tooltipOffset = _getOffset(tooltipLayer);
-        windowSize    = _getWinSize();
-        switch (currentTooltipPosition) {
-            case 'top':
-                arrowLayer.className = 'introjs-arrow bottom';
-
-                var tooltipLayerStyleLeft = 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 (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';
-
-                var 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';
-
-                var tooltipLayerStyleLeftRight = targetOffset.width / 2 - tooltipOffset.width / 2;
-                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';
-
-                var tooltipLayerStyleLeft = 0;
-                _checkRight(targetOffset, tooltipLayerStyleLeft, tooltipOffset, windowSize, tooltipLayer);
-                tooltipLayer.style.top    = (targetOffset.height +  20) + 'px';
-                break;
-        }
-    }
-
-    /**
-     * 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 {Object} desiredTooltipPosition
-     *
-     */
-    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 targetOffset = _getOffset(targetElement);
-
-        // 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";
-
-        // Check if the width of the tooltip + the starting point would spill off the right side of the screen
-        // If no, neither bottom or top are valid
-        if (targetOffset.left + tooltipWidth > windowSize.width || ((targetOffset.left + (targetOffset.width / 2)) - tooltipWidth) < 0) {
-            _removeEntry(possiblePositions, "bottom");
-            _removeEntry(possiblePositions, "top");
-        } else {
-            // Check for space below
-            if ((targetOffset.height + targetOffset.top + tooltipHeight) > windowSize.height) {
-                _removeEntry(possiblePositions, "bottom");
-            }
-
-            // Check for space above
-            if (targetOffset.top - tooltipHeight < 0) {
-                _removeEntry(possiblePositions, "top");
-            }
-        }
-
-        // Check for space to the right
-        if (targetOffset.width + targetOffset.left + tooltipWidth > windowSize.width) {
-            _removeEntry(possiblePositions, "right");
-        }
-
-        // Check for space to the left
-        if (targetOffset.left - tooltipWidth < 0) {
-            _removeEntry(possiblePositions, "left");
-        }
-
-        // At this point, our array only has positions that are valid. Pick the first one, as it remains in order
-        if (possiblePositions.length > 0) {
-            calculatedPosition = possiblePositions[0];
-        }
-
-        // If the requested position is in the list, replace our calculated choice with that
-        if (desiredTooltipPosition && desiredTooltipPosition != "auto") {
-            if (possiblePositions.indexOf(desiredTooltipPosition) > -1) {
-                calculatedPosition = desiredTooltipPosition;
-            }
-        }
-
-        return calculatedPosition;
-    }
-
-    /**
-     * 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 = 10;
-
-            if (currentElement.position == 'floating') {
-                widthHeightPadding = 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;');
-
-        }
-    }
-
-    /**
-     * 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);
-    }
-
-    /**
-     * 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',
-            elementPosition = _getOffset(targetElement.element);
-
-        //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;
-                }
-            }
-
-            //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');
-            if (fixParents && fixParents.length > 0) {
-                for (var i = fixParents.length - 1; i >= 0; i--) {
-                    fixParents[i].className = fixParents[i].className.replace(/introjs-fixParent/g, '').replace(/^\s+|\s+$/g, '');
-                };
-            }
-
-            //remove old classes
-            var oldShowElement = document.querySelector('.introjs-showElement');
-            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) {
-                clearTimeout(self._lastShowElementTimer);
-            }
-            self._lastShowElementTimer = 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
-                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').setAttribute('style', 'width:' + _getProgress.call(self) + '%;');
-
-                //show the tooltip
-                oldtooltipContainer.style.opacity = 1;
-                if (oldHelperNumberLayer) oldHelperNumberLayer.style.opacity = 1;
-
-                //reset button focus
-                if (nextTooltipButton.tabIndex === -1) {
-                    //tabindex of -1 means we are at the end of the tour - focus on skip / done
-                    skipTooltipButton.focus();
-                } else {
-                    //still in the tour, focus on next
-                    nextTooltipButton.focus();
-                }
-            }, 350);
-
-        } 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';
-
-            //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');
-
-            for (var i = 0, stepsLength = this._introItems.length; i < stepsLength; i++) {
-                var innerLi    = document.createElement('li');
-                var anchorLink = document.createElement('a');
-
-                anchorLink.onclick = function() {
-                    self.goToStep(this.getAttribute('data-stepnumber'));
-                };
-
-                if (i === (targetElement.step-1)) anchorLink.className = 'active';
-
-                anchorLink.href = 'javascript:void(0);';
-                anchorLink.innerHTML = "&nbsp;";
-                anchorLink.setAttribute('data-stepnumber', this._introItems[i].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('style', '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
-            if (this._options.showStepNumbers == true) {
-                var helperNumberLayer = document.createElement('span');
-                helperNumberLayer.className = 'introjs-helperNumberLayer';
-                helperNumberLayer.innerHTML = targetElement.step;
-                referenceLayer.appendChild(helperNumberLayer);
-            }
-
-            tooltipLayer.appendChild(arrowLayer);
-            referenceLayer.appendChild(tooltipLayer);
-
-            //next button
-            var nextTooltipButton = document.createElement('a');
-
-            nextTooltipButton.onclick = function() {
-                if (self._introItems.length - 1 != self._currentStep) {
-                    _nextStep.call(self);
-                }
-            };
-
-            nextTooltipButton.href = 'javascript:void(0);';
-            nextTooltipButton.innerHTML = this._options.nextLabel;
-
-            //previous button
-            var prevTooltipButton = document.createElement('a');
-
-            prevTooltipButton.onclick = function() {
-                if (self._currentStep != 0) {
-                    _previousStep.call(self);
-                }
-            };
-
-            prevTooltipButton.href = 'javascript:void(0);';
-            prevTooltipButton.innerHTML = this._options.prevLabel;
-
-            //skip button
-            var skipTooltipButton = document.createElement('a');
-            skipTooltipButton.className = 'introjs-button introjs-skipbutton btn';
-            skipTooltipButton.id = 'introjs_skipbutton';
-            skipTooltipButton.href = 'javascript:void(0);';
-            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);
-                }
-
-                _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);
-        }
-
-        //disable interaction
-        if (this._options.disableInteraction === true) {
-            _disableInteraction.call(self);
-        }
-
-        prevTooltipButton.removeAttribute('tabIndex');
-        nextTooltipButton.removeAttribute('tabIndex');
-
-        if (this._currentStep == 0 && this._introItems.length > 1) {
-            prevTooltipButton.className = 'introjs-button introjs-prevbutton introjs-disabled disabled btn btn-success';
-            prevTooltipButton.tabIndex = '-1';
-            nextTooltipButton.className = 'introjs-button introjs-nextbutton btn btn-primary';
-            skipTooltipButton.innerHTML = this._options.skipLabel;
-        } else if (this._introItems.length - 1 == this._currentStep || this._introItems.length == 1) {
-            skipTooltipButton.innerHTML = this._options.doneLabel;
-            prevTooltipButton.className = 'introjs-button introjs-prevbutton btn btn-success';
-            nextTooltipButton.className = 'introjs-button introjs-nextbutton introjs-disabled disabled btn btn-primary';
-            nextTooltipButton.tabIndex = '-1';
-        } else {
-            prevTooltipButton.className = 'introjs-button introjs-prevbutton btn btn-success';
-            nextTooltipButton.className = 'introjs-button introjs-nextbutton btn btn-primary';
-            skipTooltipButton.innerHTML = this._options.skipLabel;
-        }
-
-        //Set focus on "next" button, so that hitting Enter always moves you onto the next step
-        nextTooltipButton.focus();
-
-        //add target element position style
-        targetElement.element.className += ' introjs-showElement';
-
-        var currentElementPosition = _getPropValue(targetElement.element, 'position');
-        if (currentElementPosition !== 'absolute' &&
-            currentElementPosition !== 'relative') {
-            //change to new intro item
-            targetElement.element.className += ' introjs-relativePosition';
-        }
-
-        var parentElm = targetElement.element.parentNode;
-        while (parentElm != null) {
-            if (parentElm.tagName.toLowerCase() === 'body') break;
-
-            //fix The Stacking Contenxt 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)) {
-                parentElm.className += ' introjs-fixParent';
-            }
-
-            parentElm = parentElm.parentNode;
-        }
-
-        if (!_elementInViewport(targetElement.element) && this._options.scrollToElement === true) {
-            var rect = targetElement.element.getBoundingClientRect(),
-                winHeight = _getWinSize().height,
-                top = rect.bottom - (rect.bottom - rect.top),
-                bottom = rect.bottom - winHeight;
-
-            //Scroll up
-            if (top < 0 || targetElement.element.clientHeight > winHeight) {
-                window.scrollBy(0, top - 30); // 30px padding from edge to look nice
-
-                //Scroll down
-            } else {
-                window.scrollBy(0, bottom + 100); // 70px + 30px padding from edge to look nice
-            }
-        }
-
-        if (typeof (this._introAfterChangeCallback) !== 'undefined') {
-            this._introAfterChangeCallback.call(this, targetElement.element);
-        }
-    }
-
-    /**
-     * 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;
-        }
-    }
-
-    /**
-     * 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 };
-        }
-    }
-
-    /**
-     * Add overlay layer to the page
-     * 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.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);
-            }
-        }
-
-        targetElm.appendChild(overlayLayer);
-
-        overlayLayer.onclick = function() {
-            if (self._options.exitOnOverlayClick == true) {
-
-                //check if any callback is defined
-                if (self._introExitCallback != undefined) {
-                    self._introExitCallback.call(self);
-                }
-                _exitIntro.call(self, targetElm);
-            }
-        };
-
-        setTimeout(function() {
-            styleText += 'opacity: ' + self._options.overlayOpacity.toString() + ';';
-            overlayLayer.setAttribute('style', styleText);
-        }, 10);
-
-        return 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 elementPosition = {};
-
-        //set width
-        elementPosition.width = element.offsetWidth;
-
-        //set height
-        elementPosition.height = element.offsetHeight;
-
-        //calculate element top and left
-        var _x = 0;
-        var _y = 0;
-        while (element && !isNaN(element.offsetLeft) && !isNaN(element.offsetTop)) {
-            _x += element.offsetLeft;
-            _y += element.offsetTop;
-            element = element.offsetParent;
-        }
-        //set top
-        elementPosition.top = _y;
-        //set left
-        elementPosition.left = _x;
-
-        return elementPosition;
-    }
-
-    /**
-     * 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 = {};
-        for (var attrname in obj1) { obj3[attrname] = obj1[attrname]; }
-        for (var attrname in obj2) { obj3[attrname] = obj2[attrname]; }
-        return obj3;
-    }
-
-    var introJs = function (targetElm) {
-        if (typeof (targetElm) === 'object') {
-            //Ok, create a new instance
-            return new IntroJs(targetElm);
-
-        } else if (typeof (targetElm) === 'string') {
-            //select the target element with query selector
-            var targetElement = document.querySelector(targetElm);
-
-            if (targetElement) {
-                return new IntroJs(targetElement);
-            } else {
-                throw new Error('There is no element with given selector.');
-            }
-        } else {
-            return new IntroJs(document.body);
-        }
-    };
-
-    /**
-     * Current IntroJs version
-     *
-     * @property version
-     * @type String
-     */
-    introJs.version = VERSION;
-
-    //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 () {
-            _introForElement.call(this, this._targetElement);
-            return this;
-        },
-        goToStep: function(step) {
-            _goToStep.call(this, step);
-            return this;
-        },
-        nextStep: function() {
-            _nextStep.call(this);
-            return this;
-        },
-        previousStep: function() {
-            _previousStep.call(this);
-            return this;
-        },
-        exit: function() {
-            _exitIntro.call(this, this._targetElement);
-            return this;
-        },
-        refresh: function() {
-            _setHelperLayerPosition.call(this, document.querySelector('.introjs-helperLayer'));
-            _setHelperLayerPosition.call(this, document.querySelector('.introjs-tooltipReferenceLayer'));
-            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;
-        },
-        onexit: function(providedCallback) {
-            if (typeof (providedCallback) === 'function') {
-                this._introExitCallback = providedCallback;
-            } else {
-                throw new Error('Provided callback for onexit was not a function.');
-            }
-            return this;
-        }
-    };
-
-    exports.introJs = introJs;
-    return introJs;
-}));