1070 lines
35 KiB
JavaScript
1070 lines
35 KiB
JavaScript
/**
|
|
* Intro.js v0.9.0
|
|
* 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 = '0.9.0';
|
|
|
|
/**
|
|
* 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: '',
|
|
/* 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,
|
|
/* Scroll to highlighted element? */
|
|
scrollToElement: true,
|
|
/* Set the overlay opacity */
|
|
overlayOpacity: 0.8,
|
|
/* Set the flag of status of intro js*/
|
|
flag_started: 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
|
|
var allIntroSteps = [];
|
|
|
|
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'),
|
|
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'),
|
|
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) {
|
|
propagate_exit = true;
|
|
|
|
//check if any callback is defined
|
|
if (self._introExitCallback != undefined) {
|
|
propagate_exit = self._introExitCallback.call(self);
|
|
if (typeof(propagate_exit) == "undefined")
|
|
propagate_exit = true;
|
|
}
|
|
|
|
//escape key pressed, exit the intro
|
|
if (propagate_exit)
|
|
_exitIntro.call(self, targetElm);
|
|
|
|
} else if(e.keyCode === 37) {
|
|
//left arrow
|
|
_previousStep.call(self);
|
|
} else if (e.keyCode === 39 || e.keyCode === 13) {
|
|
//right arrow or 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'));
|
|
};
|
|
|
|
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) {
|
|
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);
|
|
}
|
|
|
|
/**
|
|
* 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);
|
|
}
|
|
|
|
/**
|
|
* 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);
|
|
}
|
|
|
|
//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);
|
|
}
|
|
|
|
this._options['flag_started'] = false;
|
|
|
|
//set the step to zero
|
|
this._currentStep = undefined;
|
|
}
|
|
|
|
/**
|
|
* Render tooltip box in the page
|
|
*
|
|
* @api private
|
|
* @method _placeTooltip
|
|
* @param {Object} targetElement
|
|
* @param {Object} tooltipLayer
|
|
* @param {Object} arrowLayer
|
|
*/
|
|
function _placeTooltip(targetElement, tooltipLayer, arrowLayer, helperNumberLayer) {
|
|
var tooltipCssClass = '',
|
|
currentStepObj,
|
|
tooltipOffset,
|
|
targetElementOffset;
|
|
|
|
//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, '');
|
|
|
|
//custom css class for tooltip boxes
|
|
var tooltipCssClass = this._options.tooltipClass;
|
|
|
|
currentTooltipPosition = this._introItems[this._currentStep].position;
|
|
switch (currentTooltipPosition) {
|
|
case 'top':
|
|
tooltipLayer.style.left = '15px';
|
|
tooltipLayer.style.top = '-' + (_getOffset(tooltipLayer).height + 10) + 'px';
|
|
arrowLayer.className = 'introjs-arrow bottom';
|
|
break;
|
|
case 'right':
|
|
tooltipLayer.style.left = (_getOffset(targetElement).width + 20) + 'px';
|
|
arrowLayer.className = 'introjs-arrow left';
|
|
break;
|
|
case 'left':
|
|
if (this._options.showStepNumbers == true) {
|
|
tooltipLayer.style.top = '15px';
|
|
}
|
|
tooltipLayer.style.right = (_getOffset(targetElement).width + 20) + 'px';
|
|
arrowLayer.className = 'introjs-arrow right';
|
|
break;
|
|
case 'floating':
|
|
arrowLayer.style.display = 'none';
|
|
|
|
//we have to adjust the top and left of layer manually for intro items without element
|
|
tooltipOffset = _getOffset(tooltipLayer);
|
|
|
|
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';
|
|
tooltipLayer.style.right = '0px';
|
|
tooltipLayer.style.bottom = '-' + (_getOffset(tooltipLayer).height + 10) + 'px';
|
|
break;
|
|
case 'bottom-middle-aligned':
|
|
targetElementOffset = _getOffset(targetElement);
|
|
tooltipOffset = _getOffset(tooltipLayer);
|
|
|
|
arrowLayer.className = 'introjs-arrow top-middle';
|
|
tooltipLayer.style.left = (targetElementOffset.width / 2 - tooltipOffset.width / 2) + 'px';
|
|
tooltipLayer.style.bottom = '-' + (tooltipOffset.height + 10) + '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:
|
|
tooltipLayer.style.bottom = '-' + (_getOffset(tooltipLayer).height + 10) + 'px';
|
|
arrowLayer.className = 'introjs-arrow top';
|
|
break;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 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;');
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 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'),
|
|
elementPosition = _getOffset(targetElement.element);
|
|
|
|
if (oldHelperLayer != null) {
|
|
var oldHelperNumberLayer = oldHelperLayer.querySelector('.introjs-helperNumberLayer'),
|
|
oldtooltipLayer = oldHelperLayer.querySelector('.introjs-tooltiptext'),
|
|
oldArrowLayer = oldHelperLayer.querySelector('.introjs-arrow'),
|
|
oldtooltipContainer = oldHelperLayer.querySelector('.introjs-tooltip'),
|
|
skipTooltipButton = oldHelperLayer.querySelector('.introjs-skipbutton'),
|
|
prevTooltipButton = oldHelperLayer.querySelector('.introjs-prevbutton'),
|
|
nextTooltipButton = oldHelperLayer.querySelector('.introjs-nextbutton');
|
|
|
|
//hide the tooltip
|
|
oldtooltipContainer.style.opacity = 0;
|
|
|
|
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);
|
|
|
|
//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
|
|
_placeTooltip.call(self, targetElement.element, oldtooltipContainer, oldArrowLayer, oldHelperNumberLayer);
|
|
|
|
//change active bullet
|
|
oldHelperLayer.querySelector('.introjs-bullets li > a.active').className = '';
|
|
oldHelperLayer.querySelector('.introjs-bullets li > a[data-stepnumber="' + targetElement.step + '"]').className = 'active';
|
|
|
|
//show the tooltip
|
|
oldtooltipContainer.style.opacity = 1;
|
|
if (oldHelperNumberLayer) oldHelperNumberLayer.style.opacity = 1;
|
|
}, 350);
|
|
|
|
} else {
|
|
var helperLayer = document.createElement('div'),
|
|
arrowLayer = document.createElement('div'),
|
|
tooltipLayer = document.createElement('div'),
|
|
tooltipTextLayer = document.createElement('div'),
|
|
bulletsLayer = document.createElement('div'),
|
|
buttonsLayer = document.createElement('div');
|
|
|
|
helperLayer.className = 'introjs-helperLayer';
|
|
|
|
//set new position to helper layer
|
|
_setHelperLayerPosition.call(self, helperLayer);
|
|
|
|
//add helper layer to target element
|
|
this._targetElement.appendChild(helperLayer);
|
|
|
|
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 = " ";
|
|
anchorLink.setAttribute('data-stepnumber', this._introItems[i].step);
|
|
|
|
innerLi.appendChild(anchorLink);
|
|
ulContainer.appendChild(innerLi);
|
|
}
|
|
|
|
bulletsLayer.appendChild(ulContainer);
|
|
|
|
buttonsLayer.className = 'introjs-tooltipbuttons';
|
|
if (this._options.showButtons === false) {
|
|
buttonsLayer.style.display = 'none';
|
|
}
|
|
|
|
tooltipLayer.className = 'introjs-tooltip';
|
|
tooltipLayer.appendChild(tooltipTextLayer);
|
|
tooltipLayer.appendChild(bulletsLayer);
|
|
|
|
//add helper layer number
|
|
if (this._options.showStepNumbers == true) {
|
|
var helperNumberLayer = document.createElement('span');
|
|
helperNumberLayer.className = 'introjs-helperNumberLayer';
|
|
helperNumberLayer.innerHTML = targetElement.step;
|
|
helperLayer.appendChild(helperNumberLayer);
|
|
}
|
|
tooltipLayer.appendChild(arrowLayer);
|
|
helperLayer.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';
|
|
skipTooltipButton.href = 'javascript:void(0);';
|
|
skipTooltipButton.innerHTML = this._options.skipLabel;
|
|
|
|
skipTooltipButton.onclick = function() {
|
|
propagate_exit = true;
|
|
|
|
if (self._introItems.length - 1 == self._currentStep && typeof (self._introCompleteCallback) === 'function') {
|
|
propagate_exit = self._introCompleteCallback.call(self);
|
|
if (typeof(propagate_exit) == "undefined")
|
|
propagate_exit = true;
|
|
}
|
|
|
|
if (self._introItems.length - 1 != self._currentStep && typeof (self._introExitCallback) === 'function') {
|
|
propagate_exit = self._introExitCallback.call(self);
|
|
if (typeof(propagate_exit) == "undefined")
|
|
propagate_exit = true;
|
|
}
|
|
|
|
if (propagate_exit)
|
|
_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);
|
|
}
|
|
|
|
if (this._currentStep == 0 && this._introItems.length > 1) {
|
|
prevTooltipButton.className = 'introjs-button introjs-prevbutton introjs-disabled';
|
|
nextTooltipButton.className = 'introjs-button introjs-nextbutton';
|
|
skipTooltipButton.innerHTML = this._options.skipLabel;
|
|
} else if (this._introItems.length - 1 == this._currentStep || this._introItems.length == 1) {
|
|
skipTooltipButton.innerHTML = this._options.doneLabel;
|
|
prevTooltipButton.className = 'introjs-button introjs-prevbutton';
|
|
nextTooltipButton.className = 'introjs-button introjs-nextbutton introjs-disabled';
|
|
} else {
|
|
prevTooltipButton.className = 'introjs-button introjs-prevbutton';
|
|
nextTooltipButton.className = 'introjs-button introjs-nextbutton';
|
|
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') {
|
|
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) {
|
|
_exitIntro.call(self, targetElm);
|
|
|
|
//check if any callback is defined
|
|
if (self._introExitCallback != undefined) {
|
|
self._introExitCallback.call(self);
|
|
}
|
|
}
|
|
};
|
|
|
|
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;
|
|
}
|
|
|
|
/**
|
|
* 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 () {
|
|
this._options['flag_started'] = true;
|
|
|
|
if (this._introStartCallback != undefined)
|
|
this._introStartCallback.call(this);
|
|
|
|
_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);
|
|
},
|
|
refresh: function() {
|
|
_setHelperLayerPosition.call(this, document.querySelector('.introjs-helperLayer'));
|
|
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;
|
|
},
|
|
onstart: function(providedCallback) {
|
|
if (typeof (providedCallback) === 'function') {
|
|
this._introStartCallback = providedCallback;
|
|
} else {
|
|
throw new Error('Provided callback for onstart 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;
|
|
},
|
|
started: function() {
|
|
return this._options['flag_started'];
|
|
}
|
|
};
|
|
|
|
exports.introJs = introJs;
|
|
return introJs;
|
|
}));
|