/**
|
* Intro.js v2.9.3
|
* https://github.com/usablica/intro.js
|
*
|
* Copyright (C) 2017 Afshin Mehrabani (@afshinmeh)
|
*/
|
|
(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("introJs.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 if (window.layui && layui.define) { // layui加载
|
layui.define(function (exports) {
|
layui.link(layui.cache.base + 'introJs/introJs.css');
|
exports('introJs', 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();
|
}
|
})(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: '下一步 →',
|
/* Previous button label in tooltip box */
|
prevLabel: '← 上一步',
|
/* Skip button label in tooltip box */
|
skipLabel: '跳过',
|
/* Done button label in tooltip box */
|
doneLabel: '完成',
|
/* 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.2,
|
/* 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;
|
});
|
