Académique Documents
Professionnel Documents
Culture Documents
* 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("intro.js") directly, instead of the introJs
method of the function');
// introJs()
return f().apply(this, arguments);
};
} else if (typeof define === "function" && define.amd) {
define([], f);
} else {
var g;
if (typeof window !== "undefined") {
g = window;
} else if (typeof global !== "undefined") {
g = global;
} else if (typeof self !== "undefined") {
g = self;
} else {
g = this;
}
g.introJs = f();
}
})(function () {
//Default config/variables
var VERSION = '2.9.3';
/**
* IntroJs main class
*
* @class IntroJs
*/
function IntroJs(obj) {
this._targetElement = obj;
this._introItems = [];
this._options = {
/* Next button label in tooltip box */
nextLabel: 'Next →',
/* Previous button label in tooltip box */
prevLabel: '← Back',
/* Skip button label in tooltip box */
skipLabel: 'Skip',
/* Done button label in tooltip box */
doneLabel: 'Done',
/* Hide previous button in the first step? Otherwise, it will be disabled button. */
hidePrev: false,
/* Hide next button in the last step? Otherwise, it will be disabled button. */
hideNext: false,
/* Default tooltip box position */
tooltipPosition: 'bottom',
/* Next CSS class for tooltip boxes */
tooltipClass: '',
/* CSS class that is added to the helperLayer */
highlightClass: '',
/* Close introduction when pressing Escape button? */
exitOnEsc: true,
/* Close introduction when clicking on overlay layer? */
exitOnOverlayClick: true,
/* Show step numbers in introduction? */
showStepNumbers: true,
/* Let user use keyboard to navigate the tour? */
keyboardNavigation: true,
/* Show tour control buttons? */
showButtons: true,
/* Show tour bullets? */
showBullets: true,
/* Show tour progress? */
showProgress: false,
/* Scroll to highlighted element? */
scrollToElement: true,
/*
* Should we scroll the tooltip or target element?
*
* Options are: 'element' or 'tooltip'
*/
scrollTo: 'element',
/* Padding to add after scrolling when element is not in the viewport (in pixels) */
scrollPadding: 30,
/* Set the overlay opacity */
overlayOpacity: 0.8,
/* Precedence of positions, when auto is enabled */
positionPrecedence: ["bottom", "top", "right", "left"],
/* Disable an interaction with element? */
disableInteraction: false,
/* Set how much padding to be used around helper element */
helperElementPadding: 10,
/* Default hint position */
hintPosition: 'top-middle',
/* Hint button label */
hintButtonLabel: 'Got it',
/* Adding animation to hints? */
hintAnimation: true,
/* additional classes to put on the buttons */
buttonClass: "introjs-button"
};
}
/**
* Initiate a new introduction/guide from an element in the page
*
* @api private
* @method _introForElement
* @param {Object} targetElm
* @param {String} group
* @returns {Boolean} Success or not?
*/
function _introForElement(targetElm, group) {
var allIntroSteps = targetElm.querySelectorAll("*[data-intro]"),
introItems = [];
if (this._options.steps) {
//use steps passed programmatically
_forEach(this._options.steps, function (step) {
var currentItem = _cloneObject(step);
document.body.appendChild(floatingElementQuery);
}
currentItem.element = floatingElementQuery;
currentItem.position = 'floating';
}
} else {
//use steps from data-* annotations
var elmsLength = allIntroSteps.length;
var disableInteraction;
// PR #80
// start intro for groups of elements
if (group && (currentElement.getAttribute("data-intro-group") !== group)) {
return;
}
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));
// PR #80
// start intro for groups of elements
if (group && (currentElement.getAttribute("data-intro-group") !== group)) {
return;
}
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));
}
introItems = tempIntroItems;
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/e
vent.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';
_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;
_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;
//remove disableInteractionLayer
var disableInteractionLayer = targetElement.querySelector('.introjs-disableInteraction');
if (disableInteractionLayer) {
disableInteractionLayer.parentNode.removeChild(disableInteractionLayer);
}
_removeShowElement();
//clean listeners
DOMEvent.off(window, 'keydown', _onKeyDown, this, true);
DOMEvent.off(window, 'resize', _onResize, this, true);
/**
* 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;
currentTooltipPosition = this._introItems[this._currentStep].position;
var tooltipLayerStyleLeft;
targetOffset = _getOffset(targetElement);
tooltipOffset = _getOffset(tooltipLayer);
windowSize = _getWinSize();
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';
case 'top-left-aligned':
// top-left-aligned is the same as the default top
case 'top':
arrowLayer.className = 'introjs-arrow bottom';
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';
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';
// 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) {
// 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
*/
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];
}
}
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 = '';
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;
}
}
/**
* Add disableinteraction layer and adjust the size and position of the layer
*
* @api private
* @method _disableInteraction
*/
function _disableInteraction() {
var disableInteractionLayer = document.querySelector('.introjs-disableInteraction');
_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);
}
skipTooltipButton = oldReferenceLayer.querySelector('.introjs-skipbutton');
prevTooltipButton = oldReferenceLayer.querySelector('.introjs-prevbutton');
nextTooltipButton = oldReferenceLayer.querySelector('.introjs-nextbutton');
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 );
//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);
helperLayer.className = highlightClass;
referenceLayer.className = 'introjs-tooltipReferenceLayer';
// scroll to element
scrollParent = _getScrollParent( targetElement.element );
arrowLayer.className = 'introjs-arrow';
tooltipTextLayer.className = 'introjs-tooltiptext';
tooltipTextLayer.innerHTML = targetElement.intro;
bulletsLayer.className = 'introjs-bullets';
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';
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);
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);
}
_exitIntro.call(self, self._targetElement);
};
buttonsLayer.appendChild(skipTooltipButton);
tooltipLayer.appendChild(buttonsLayer);
//disable interaction
if (targetElement.disableInteraction) {
_disableInteraction.call(self);
}
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 (!_elementInViewport(targetElement.element)) {
var winHeight = _getWinSize().height;
var top = rect.bottom - (rect.bottom - rect.top);
//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');
/**
* 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;
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;
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) {
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);
}
/**
* 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;
};
}
/**
* 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') || '';
/**
* 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') || '';
/**
* 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;
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;
//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 (!hints || !hints.length) {
return false;
}
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;
}
/**
* 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');
}
/**
* Hide all hints
*
* @api private
* @method _hideHints
*/
function _hideHints() {
var hints = _hintQuerySelectorAll('.introjs-hint');
/**
* Show all hints
*
* @api private
* @method _showHints
*/
function _showHints() {
var hints = _hintQuerySelectorAll('.introjs-hint');
/**
* 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;
/**
* 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();
}
_showHintDialog.call(self, i);
};
};
_forEach(this._introItems, function(item, i) {
// avoid append a hint twice
if (document.querySelector('.introjs-hint[data-step="' + i + '"]')) {
return;
}
hint.onclick = getHintClick(i);
hint.className = 'introjs-hint';
if (!item.hintAnimation) {
_addClass(hint, 'introjs-hint-no-anim');
}
hint.appendChild(hintDot);
hint.appendChild(hintPulse);
hint.setAttribute('data-step', i);
hintsWrapper.appendChild(hint);
}.bind(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;
/**
* 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];
tooltipLayer.className = 'introjs-tooltip';
tooltipTextLayer.className = 'introjs-tooltiptext';
arrowLayer.className = 'introjs-arrow';
tooltipLayer.appendChild(arrowLayer);
tooltipLayer.appendChild(tooltipTextLayer);
referenceLayer.appendChild(tooltipLayer);
document.body.appendChild(referenceLayer);
/**
* 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)/;
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;
}
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;
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;
});