mirror of
https://github.com/wahyd4/cdnjs.git
synced 2026-08-24 04:06:03 +10:00
Added 0.4.0, kept 0.2.1
Package.json: + "keywords": "tutorial", MIT Licence (stated in intro.js) intro.min.js: + comment line for file name, version, (c), licence
This commit is contained in:
tomByrer
@@ -0,0 +1,758 @@
|
||||
/**
|
||||
* Intro.js v0.4.0
|
||||
* https://github.com/usablica/intro.js
|
||||
* MIT licensed
|
||||
*
|
||||
* Copyright (C) 2013 usabli.ca - A weekend project by Afshin Mehrabani (@afshinmeh)
|
||||
*/
|
||||
|
||||
(function (root, factory) {
|
||||
if (typeof exports === 'object') {
|
||||
// CommonJS
|
||||
factory(exports);
|
||||
} else if (typeof define === 'function' && define.amd) {
|
||||
// AMD. Register as an anonymous module.
|
||||
define(['exports'], factory);
|
||||
} else {
|
||||
// Browser globals
|
||||
factory(root);
|
||||
}
|
||||
} (this, function (exports) {
|
||||
//Default config/variables
|
||||
var VERSION = '0.4.0';
|
||||
|
||||
/**
|
||||
* IntroJs main class
|
||||
*
|
||||
* @class IntroJs
|
||||
*/
|
||||
function IntroJs(obj) {
|
||||
this._targetElement = obj;
|
||||
|
||||
this._options = {
|
||||
nextLabel: 'Next →',
|
||||
prevLabel: '← Back',
|
||||
skipLabel: 'Skip',
|
||||
doneLabel: 'Done',
|
||||
tooltipPosition: 'bottom',
|
||||
exitOnEsc: true,
|
||||
exitOnOverlayClick: true,
|
||||
showStepNumbers: true
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Initiate a new introduction/guide from an element in the page
|
||||
*
|
||||
* @api private
|
||||
* @method _introForElement
|
||||
* @param {Object} targetElm
|
||||
* @returns {Boolean} Success or not?
|
||||
*/
|
||||
function _introForElement(targetElm) {
|
||||
var introItems = [],
|
||||
self = this;
|
||||
|
||||
if (this._options.steps) {
|
||||
//use steps passed programmatically
|
||||
var allIntroSteps = [];
|
||||
|
||||
for (var i = 0, stepsLength = this._options.steps.length; i < stepsLength; i++) {
|
||||
var currentItem = this._options.steps[i];
|
||||
//set the step
|
||||
currentItem.step = i + 1;
|
||||
//grab the element with given selector from the page
|
||||
currentItem.element = document.querySelector(currentItem.element);
|
||||
introItems.push(currentItem);
|
||||
}
|
||||
|
||||
} else {
|
||||
//use steps from data-* annotations
|
||||
|
||||
var allIntroSteps = targetElm.querySelectorAll('*[data-intro]');
|
||||
//if there's no element to intro
|
||||
if (allIntroSteps.length < 1) {
|
||||
return false;
|
||||
}
|
||||
|
||||
for (var i = 0, elmsLength = allIntroSteps.length; i < elmsLength; i++) {
|
||||
var currentElement = allIntroSteps[i];
|
||||
introItems.push({
|
||||
element: currentElement,
|
||||
intro: currentElement.getAttribute('data-intro'),
|
||||
step: parseInt(currentElement.getAttribute('data-step'), 10),
|
||||
position: currentElement.getAttribute('data-position') || this._options.tooltipPosition
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
//Ok, sort all items with given steps
|
||||
introItems.sort(function (a, b) {
|
||||
return a.step - b.step;
|
||||
});
|
||||
|
||||
//set it to the introJs object
|
||||
self._introItems = introItems;
|
||||
|
||||
//add overlay layer to the page
|
||||
if(_addOverlayLayer.call(self, targetElm)) {
|
||||
//then, start the show
|
||||
_nextStep.call(self);
|
||||
|
||||
var skipButton = targetElm.querySelector('.introjs-skipbutton'),
|
||||
nextStepButton = targetElm.querySelector('.introjs-nextbutton');
|
||||
|
||||
self._onKeyDown = function(e) {
|
||||
if (e.keyCode === 27 && self._options.exitOnEsc == true) {
|
||||
//escape key pressed, exit the intro
|
||||
_exitIntro.call(self, targetElm);
|
||||
//check if any callback is defined
|
||||
if (self._introExitCallback != undefined) {
|
||||
self._introExitCallback.call(self);
|
||||
}
|
||||
} else if(e.keyCode === 37) {
|
||||
//left arrow
|
||||
_previousStep.call(self);
|
||||
} else if (e.keyCode === 39 || e.keyCode === 13) {
|
||||
//right arrow or enter
|
||||
_nextStep.call(self);
|
||||
//prevent default behaviour on hitting Enter, to prevent steps being skipped in some browsers
|
||||
if(e.preventDefault) {
|
||||
e.preventDefault();
|
||||
} else {
|
||||
e.returnValue = false;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
self._onResize = function(e) {
|
||||
_setHelperLayerPosition.call(self, document.querySelector('.introjs-helperLayer'));
|
||||
};
|
||||
|
||||
if (window.addEventListener) {
|
||||
window.addEventListener('keydown', self._onKeyDown, true);
|
||||
//for window resize
|
||||
window.addEventListener("resize", self._onResize, true);
|
||||
} else if (document.attachEvent) { //IE
|
||||
document.attachEvent('onkeydown', self._onKeyDown);
|
||||
//for window resize
|
||||
document.attachEvent("onresize", self._onResize);
|
||||
}
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
/**
|
||||
* Go to specific step of introduction
|
||||
*
|
||||
* @api private
|
||||
* @method _goToStep
|
||||
*/
|
||||
function _goToStep(step) {
|
||||
//because steps starts with zero
|
||||
this._currentStep = step - 2;
|
||||
if(typeof (this._introItems) !== 'undefined') {
|
||||
_nextStep.call(this);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Go to next step on intro
|
||||
*
|
||||
* @api private
|
||||
* @method _nextStep
|
||||
*/
|
||||
function _nextStep() {
|
||||
if (typeof (this._introBeforeChangeCallback) !== 'undefined') {
|
||||
this._introBeforeChangeCallback.call(this, this._targetElement);
|
||||
}
|
||||
|
||||
if (typeof (this._currentStep) === 'undefined') {
|
||||
this._currentStep = 0;
|
||||
} else {
|
||||
++this._currentStep;
|
||||
}
|
||||
|
||||
if((this._introItems.length) <= this._currentStep) {
|
||||
//end of the intro
|
||||
//check if any callback is defined
|
||||
if (typeof (this._introCompleteCallback) === 'function') {
|
||||
this._introCompleteCallback.call(this);
|
||||
}
|
||||
_exitIntro.call(this, this._targetElement);
|
||||
return;
|
||||
}
|
||||
|
||||
_showElement.call(this, this._introItems[this._currentStep]);
|
||||
}
|
||||
|
||||
/**
|
||||
* Go to previous step on intro
|
||||
*
|
||||
* @api private
|
||||
* @method _nextStep
|
||||
*/
|
||||
function _previousStep() {
|
||||
if (this._currentStep === 0) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (typeof (this._introBeforeChangeCallback) !== 'undefined') {
|
||||
this._introBeforeChangeCallback.call(this, this._targetElement);
|
||||
}
|
||||
|
||||
_showElement.call(this, this._introItems[--this._currentStep]);
|
||||
}
|
||||
|
||||
/**
|
||||
* Exit from intro
|
||||
*
|
||||
* @api private
|
||||
* @method _exitIntro
|
||||
* @param {Object} targetElement
|
||||
*/
|
||||
function _exitIntro(targetElement) {
|
||||
//remove overlay layer from the page
|
||||
var overlayLayer = targetElement.querySelector('.introjs-overlay');
|
||||
//for fade-out animation
|
||||
overlayLayer.style.opacity = 0;
|
||||
setTimeout(function () {
|
||||
if (overlayLayer.parentNode) {
|
||||
overlayLayer.parentNode.removeChild(overlayLayer);
|
||||
}
|
||||
}, 500);
|
||||
//remove all helper layers
|
||||
var helperLayer = targetElement.querySelector('.introjs-helperLayer');
|
||||
if (helperLayer) {
|
||||
helperLayer.parentNode.removeChild(helperLayer);
|
||||
}
|
||||
//remove `introjs-showElement` class from the element
|
||||
var showElement = document.querySelector('.introjs-showElement');
|
||||
if (showElement) {
|
||||
showElement.className = showElement.className.replace(/introjs-[a-zA-Z]+/g, '').replace(/^\s+|\s+$/g, ''); // This is a manual trim.
|
||||
}
|
||||
|
||||
//remove `introjs-fixParent` class from the elements
|
||||
var fixParents = document.querySelectorAll('.introjs-fixParent');
|
||||
if (fixParents && fixParents.length > 0) {
|
||||
for (var i = fixParents.length - 1; i >= 0; i--) {
|
||||
fixParents[i].className = fixParents[i].className.replace(/introjs-fixParent/g, '').replace(/^\s+|\s+$/g, '');
|
||||
};
|
||||
}
|
||||
//clean listeners
|
||||
if (window.removeEventListener) {
|
||||
window.removeEventListener('keydown', this._onKeyDown, true);
|
||||
} else if (document.detachEvent) { //IE
|
||||
document.detachEvent('onkeydown', this._onKeyDown);
|
||||
}
|
||||
//set the step to zero
|
||||
this._currentStep = undefined;
|
||||
}
|
||||
|
||||
/**
|
||||
* Render tooltip box in the page
|
||||
*
|
||||
* @api private
|
||||
* @method _placeTooltip
|
||||
* @param {Object} targetElement
|
||||
* @param {Object} tooltipLayer
|
||||
* @param {Object} arrowLayer
|
||||
*/
|
||||
function _placeTooltip(targetElement, tooltipLayer, arrowLayer) {
|
||||
//reset the old style
|
||||
tooltipLayer.style.top = null;
|
||||
tooltipLayer.style.right = null;
|
||||
tooltipLayer.style.bottom = null;
|
||||
tooltipLayer.style.left = null;
|
||||
|
||||
//prevent error when `this._currentStep` is undefined
|
||||
if(!this._introItems[this._currentStep]) return;
|
||||
|
||||
var currentTooltipPosition = this._introItems[this._currentStep].position;
|
||||
switch (currentTooltipPosition) {
|
||||
case 'top':
|
||||
tooltipLayer.style.left = '15px';
|
||||
tooltipLayer.style.top = '-' + (_getOffset(tooltipLayer).height + 10) + 'px';
|
||||
arrowLayer.className = 'introjs-arrow bottom';
|
||||
break;
|
||||
case 'right':
|
||||
tooltipLayer.style.left = (_getOffset(targetElement).width + 20) + 'px';
|
||||
arrowLayer.className = 'introjs-arrow left';
|
||||
break;
|
||||
case 'left':
|
||||
tooltipLayer.style.top = '15px';
|
||||
tooltipLayer.style.right = (_getOffset(targetElement).width + 20) + 'px';
|
||||
arrowLayer.className = 'introjs-arrow right';
|
||||
break;
|
||||
case 'bottom':
|
||||
// Bottom going to follow the default behavior
|
||||
default:
|
||||
tooltipLayer.style.bottom = '-' + (_getOffset(tooltipLayer).height + 10) + 'px';
|
||||
arrowLayer.className = 'introjs-arrow top';
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Update the position of the helper layer on the screen
|
||||
*
|
||||
* @api private
|
||||
* @method _setHelperLayerPosition
|
||||
* @param {Object} helperLayer
|
||||
*/
|
||||
function _setHelperLayerPosition(helperLayer) {
|
||||
if(helperLayer) {
|
||||
//prevent error when `this._currentStep` in undefined
|
||||
if(!this._introItems[this._currentStep]) return;
|
||||
|
||||
var elementPosition = _getOffset(this._introItems[this._currentStep].element);
|
||||
//set new position to helper layer
|
||||
helperLayer.setAttribute('style', 'width: ' + (elementPosition.width + 10) + 'px; ' +
|
||||
'height:' + (elementPosition.height + 10) + 'px; ' +
|
||||
'top:' + (elementPosition.top - 5) + 'px;' +
|
||||
'left: ' + (elementPosition.left - 5) + 'px;');
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Show an element on the page
|
||||
*
|
||||
* @api private
|
||||
* @method _showElement
|
||||
* @param {Object} targetElement
|
||||
*/
|
||||
function _showElement(targetElement) {
|
||||
|
||||
if (typeof (this._introChangeCallback) !== 'undefined') {
|
||||
this._introChangeCallback.call(this, targetElement.element);
|
||||
}
|
||||
|
||||
var self = this,
|
||||
oldHelperLayer = document.querySelector('.introjs-helperLayer'),
|
||||
elementPosition = _getOffset(targetElement.element);
|
||||
|
||||
if(oldHelperLayer != null) {
|
||||
var oldHelperNumberLayer = oldHelperLayer.querySelector('.introjs-helperNumberLayer'),
|
||||
oldtooltipLayer = oldHelperLayer.querySelector('.introjs-tooltiptext'),
|
||||
oldArrowLayer = oldHelperLayer.querySelector('.introjs-arrow'),
|
||||
oldtooltipContainer = oldHelperLayer.querySelector('.introjs-tooltip'),
|
||||
skipTooltipButton = oldHelperLayer.querySelector('.introjs-skipbutton'),
|
||||
prevTooltipButton = oldHelperLayer.querySelector('.introjs-prevbutton'),
|
||||
nextTooltipButton = oldHelperLayer.querySelector('.introjs-nextbutton');
|
||||
|
||||
//hide the tooltip
|
||||
oldtooltipContainer.style.opacity = 0;
|
||||
|
||||
//set new position to helper layer
|
||||
_setHelperLayerPosition.call(self, oldHelperLayer);
|
||||
|
||||
//remove `introjs-fixParent` class from the elements
|
||||
var fixParents = document.querySelectorAll('.introjs-fixParent');
|
||||
if (fixParents && fixParents.length > 0) {
|
||||
for (var i = fixParents.length - 1; i >= 0; i--) {
|
||||
fixParents[i].className = fixParents[i].className.replace(/introjs-fixParent/g, '').replace(/^\s+|\s+$/g, '');
|
||||
};
|
||||
}
|
||||
|
||||
//remove old classes
|
||||
var oldShowElement = document.querySelector('.introjs-showElement');
|
||||
oldShowElement.className = oldShowElement.className.replace(/introjs-[a-zA-Z]+/g, '').replace(/^\s+|\s+$/g, '');
|
||||
//we should wait until the CSS3 transition is competed (it's 0.3 sec) to prevent incorrect `height` and `width` calculation
|
||||
if (self._lastShowElementTimer) {
|
||||
clearTimeout(self._lastShowElementTimer);
|
||||
}
|
||||
self._lastShowElementTimer = setTimeout(function() {
|
||||
//set current step to the label
|
||||
if(oldHelperNumberLayer != null) {
|
||||
oldHelperNumberLayer.innerHTML = targetElement.step;
|
||||
}
|
||||
//set current tooltip text
|
||||
oldtooltipLayer.innerHTML = targetElement.intro;
|
||||
//set the tooltip position
|
||||
_placeTooltip.call(self, targetElement.element, oldtooltipContainer, oldArrowLayer);
|
||||
//show the tooltip
|
||||
oldtooltipContainer.style.opacity = 1;
|
||||
}, 350);
|
||||
|
||||
} else {
|
||||
var helperLayer = document.createElement('div'),
|
||||
arrowLayer = document.createElement('div'),
|
||||
tooltipLayer = document.createElement('div');
|
||||
|
||||
helperLayer.className = 'introjs-helperLayer';
|
||||
|
||||
//set new position to helper layer
|
||||
_setHelperLayerPosition.call(self, helperLayer);
|
||||
|
||||
//add helper layer to target element
|
||||
this._targetElement.appendChild(helperLayer);
|
||||
|
||||
arrowLayer.className = 'introjs-arrow';
|
||||
tooltipLayer.className = 'introjs-tooltip';
|
||||
|
||||
|
||||
tooltipLayer.innerHTML = '<div class="introjs-tooltiptext">' +
|
||||
targetElement.intro +
|
||||
'</div><div class="introjs-tooltipbuttons"></div>';
|
||||
|
||||
//add helper layer number
|
||||
if (this._options.showStepNumbers) {
|
||||
var helperNumberLayer = document.createElement('span');
|
||||
helperNumberLayer.className = 'introjs-helperNumberLayer';
|
||||
helperNumberLayer.innerHTML = targetElement.step;
|
||||
helperLayer.appendChild(helperNumberLayer);
|
||||
}
|
||||
tooltipLayer.appendChild(arrowLayer);
|
||||
helperLayer.appendChild(tooltipLayer);
|
||||
|
||||
//next button
|
||||
var nextTooltipButton = document.createElement('a');
|
||||
|
||||
nextTooltipButton.onclick = function() {
|
||||
if(self._introItems.length - 1 != self._currentStep) {
|
||||
_nextStep.call(self);
|
||||
}
|
||||
};
|
||||
|
||||
nextTooltipButton.href = 'javascript:void(0);';
|
||||
nextTooltipButton.innerHTML = this._options.nextLabel;
|
||||
|
||||
//previous button
|
||||
var prevTooltipButton = document.createElement('a');
|
||||
|
||||
prevTooltipButton.onclick = function() {
|
||||
if(self._currentStep != 0) {
|
||||
_previousStep.call(self);
|
||||
}
|
||||
};
|
||||
|
||||
prevTooltipButton.href = 'javascript:void(0);';
|
||||
prevTooltipButton.innerHTML = this._options.prevLabel;
|
||||
|
||||
//skip button
|
||||
var skipTooltipButton = document.createElement('a');
|
||||
skipTooltipButton.className = 'introjs-button introjs-skipbutton';
|
||||
skipTooltipButton.href = 'javascript:void(0);';
|
||||
skipTooltipButton.innerHTML = this._options.skipLabel;
|
||||
|
||||
skipTooltipButton.onclick = function() {
|
||||
if (self._introItems.length - 1 == self._currentStep && typeof (self._introCompleteCallback) === 'function') {
|
||||
self._introCompleteCallback.call(self);
|
||||
}
|
||||
|
||||
if (self._introItems.length - 1 != self._currentStep && typeof (self._introExitCallback) === 'function') {
|
||||
self._introExitCallback.call(self);
|
||||
}
|
||||
|
||||
_exitIntro.call(self, self._targetElement);
|
||||
};
|
||||
|
||||
var tooltipButtonsLayer = tooltipLayer.querySelector('.introjs-tooltipbuttons');
|
||||
tooltipButtonsLayer.appendChild(skipTooltipButton);
|
||||
tooltipButtonsLayer.appendChild(prevTooltipButton);
|
||||
tooltipButtonsLayer.appendChild(nextTooltipButton);
|
||||
|
||||
//set proper position
|
||||
_placeTooltip.call(self, targetElement.element, tooltipLayer, arrowLayer);
|
||||
}
|
||||
|
||||
if (this._currentStep == 0) {
|
||||
prevTooltipButton.className = 'introjs-button introjs-prevbutton introjs-disabled';
|
||||
nextTooltipButton.className = 'introjs-button introjs-nextbutton';
|
||||
skipTooltipButton.innerHTML = this._options.skipLabel;
|
||||
} else if (this._introItems.length - 1 == this._currentStep) {
|
||||
skipTooltipButton.innerHTML = this._options.doneLabel;
|
||||
prevTooltipButton.className = 'introjs-button introjs-prevbutton';
|
||||
nextTooltipButton.className = 'introjs-button introjs-nextbutton introjs-disabled';
|
||||
} else {
|
||||
prevTooltipButton.className = 'introjs-button introjs-prevbutton';
|
||||
nextTooltipButton.className = 'introjs-button introjs-nextbutton';
|
||||
skipTooltipButton.innerHTML = this._options.skipLabel;
|
||||
}
|
||||
|
||||
//Set focus on "next" button, so that hitting Enter always moves you onto the next step
|
||||
nextTooltipButton.focus();
|
||||
|
||||
//add target element position style
|
||||
targetElement.element.className += ' introjs-showElement';
|
||||
|
||||
var currentElementPosition = _getPropValue(targetElement.element, 'position');
|
||||
if (currentElementPosition !== 'absolute' &&
|
||||
currentElementPosition !== 'relative') {
|
||||
//change to new intro item
|
||||
targetElement.element.className += ' introjs-relativePosition';
|
||||
}
|
||||
|
||||
var parentElm = targetElement.element.parentNode;
|
||||
while(parentElm != null) {
|
||||
if(parentElm.tagName.toLowerCase() === 'body') break;
|
||||
|
||||
var zIndex = _getPropValue(parentElm, 'z-index');
|
||||
if(/[0-9]+/.test(zIndex)) {
|
||||
parentElm.className += ' introjs-fixParent';
|
||||
}
|
||||
parentElm = parentElm.parentNode;
|
||||
}
|
||||
|
||||
if (!_elementInViewport(targetElement.element)) {
|
||||
var rect = targetElement.element.getBoundingClientRect(),
|
||||
top = rect.bottom - (rect.bottom - rect.top),
|
||||
bottom = rect.bottom - _getWinSize().height;
|
||||
|
||||
// Scroll up
|
||||
if (top < 0) {
|
||||
window.scrollBy(0, top - 30); // 30px padding from edge to look nice
|
||||
|
||||
// Scroll down
|
||||
} else {
|
||||
window.scrollBy(0, bottom + 100); // 70px + 30px padding from edge to look nice
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 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.toLowerCase) {
|
||||
return propValue.toLowerCase();
|
||||
} else {
|
||||
return propValue;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Provides a cross-browser way to get the screen dimensions
|
||||
* via: http://stackoverflow.com/questions/5864467/internet-explorer-innerheight
|
||||
*
|
||||
* @api private
|
||||
* @method _getWinSize
|
||||
* @returns {Object} width and height attributes
|
||||
*/
|
||||
function _getWinSize() {
|
||||
if (window.innerWidth != undefined) {
|
||||
return { width: window.innerWidth, height: window.innerHeight };
|
||||
} else {
|
||||
var D = document.documentElement;
|
||||
return { width: D.clientWidth, height: D.clientHeight };
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Add overlay layer to the page
|
||||
* http://stackoverflow.com/questions/123999/how-to-tell-if-a-dom-element-is-visible-in-the-current-viewport
|
||||
*
|
||||
* @api private
|
||||
* @method _elementInViewport
|
||||
* @param {Object} el
|
||||
*/
|
||||
function _elementInViewport(el) {
|
||||
var rect = el.getBoundingClientRect();
|
||||
|
||||
return (
|
||||
rect.top >= 0 &&
|
||||
rect.left >= 0 &&
|
||||
(rect.bottom+80) <= window.innerHeight && // add 80 to get the text right
|
||||
rect.right <= window.innerWidth
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Add overlay layer to the page
|
||||
*
|
||||
* @api private
|
||||
* @method _addOverlayLayer
|
||||
* @param {Object} targetElm
|
||||
*/
|
||||
function _addOverlayLayer(targetElm) {
|
||||
var overlayLayer = document.createElement('div'),
|
||||
styleText = '',
|
||||
self = this;
|
||||
|
||||
//set css class name
|
||||
overlayLayer.className = 'introjs-overlay';
|
||||
|
||||
//check if the target element is body, we should calculate the size of overlay layer in a better way
|
||||
if (targetElm.tagName.toLowerCase() === 'body') {
|
||||
styleText += 'top: 0;bottom: 0; left: 0;right: 0;position: fixed;';
|
||||
overlayLayer.setAttribute('style', styleText);
|
||||
} else {
|
||||
//set overlay layer position
|
||||
var elementPosition = _getOffset(targetElm);
|
||||
if(elementPosition) {
|
||||
styleText += 'width: ' + elementPosition.width + 'px; height:' + elementPosition.height + 'px; top:' + elementPosition.top + 'px;left: ' + elementPosition.left + 'px;';
|
||||
overlayLayer.setAttribute('style', styleText);
|
||||
}
|
||||
}
|
||||
|
||||
targetElm.appendChild(overlayLayer);
|
||||
|
||||
overlayLayer.onclick = function() {
|
||||
if(self._options.exitOnOverlayClick == true) {
|
||||
_exitIntro.call(self, targetElm);
|
||||
}
|
||||
//check if any callback is defined
|
||||
if (self._introExitCallback != undefined) {
|
||||
self._introExitCallback.call(self);
|
||||
}
|
||||
};
|
||||
|
||||
setTimeout(function() {
|
||||
styleText += 'opacity: .8;';
|
||||
overlayLayer.setAttribute('style', styleText);
|
||||
}, 10);
|
||||
return true;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get an element position on the page
|
||||
* Thanks to `meouw`: http://stackoverflow.com/a/442474/375966
|
||||
*
|
||||
* @api private
|
||||
* @method _getOffset
|
||||
* @param {Object} element
|
||||
* @returns Element's position info
|
||||
*/
|
||||
function _getOffset(element) {
|
||||
var elementPosition = {};
|
||||
|
||||
//set width
|
||||
elementPosition.width = element.offsetWidth;
|
||||
|
||||
//set height
|
||||
elementPosition.height = element.offsetHeight;
|
||||
|
||||
//calculate element top and left
|
||||
var _x = 0;
|
||||
var _y = 0;
|
||||
while(element && !isNaN(element.offsetLeft) && !isNaN(element.offsetTop)) {
|
||||
_x += element.offsetLeft;
|
||||
_y += element.offsetTop;
|
||||
element = element.offsetParent;
|
||||
}
|
||||
//set top
|
||||
elementPosition.top = _y;
|
||||
//set left
|
||||
elementPosition.left = _x;
|
||||
|
||||
return elementPosition;
|
||||
}
|
||||
|
||||
/**
|
||||
* Overwrites obj1's values with obj2's and adds obj2's if non existent in obj1
|
||||
* via: http://stackoverflow.com/questions/171251/how-can-i-merge-properties-of-two-javascript-objects-dynamically
|
||||
*
|
||||
* @param obj1
|
||||
* @param obj2
|
||||
* @returns obj3 a new object based on obj1 and obj2
|
||||
*/
|
||||
function _mergeOptions(obj1,obj2) {
|
||||
var obj3 = {};
|
||||
for (var attrname in obj1) { obj3[attrname] = obj1[attrname]; }
|
||||
for (var attrname in obj2) { obj3[attrname] = obj2[attrname]; }
|
||||
return obj3;
|
||||
}
|
||||
|
||||
var introJs = function (targetElm) {
|
||||
if (typeof (targetElm) === 'object') {
|
||||
//Ok, create a new instance
|
||||
return new IntroJs(targetElm);
|
||||
|
||||
} else if (typeof (targetElm) === 'string') {
|
||||
//select the target element with query selector
|
||||
var targetElement = document.querySelector(targetElm);
|
||||
|
||||
if (targetElement) {
|
||||
return new IntroJs(targetElement);
|
||||
} else {
|
||||
throw new Error('There is no element with given selector.');
|
||||
}
|
||||
} else {
|
||||
return new IntroJs(document.body);
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Current IntroJs version
|
||||
*
|
||||
* @property version
|
||||
* @type String
|
||||
*/
|
||||
introJs.version = VERSION;
|
||||
|
||||
//Prototype
|
||||
introJs.fn = IntroJs.prototype = {
|
||||
clone: function () {
|
||||
return new IntroJs(this);
|
||||
},
|
||||
setOption: function(option, value) {
|
||||
this._options[option] = value;
|
||||
return this;
|
||||
},
|
||||
setOptions: function(options) {
|
||||
this._options = _mergeOptions(this._options, options);
|
||||
return this;
|
||||
},
|
||||
start: function () {
|
||||
_introForElement.call(this, this._targetElement);
|
||||
return this;
|
||||
},
|
||||
goToStep: function(step) {
|
||||
_goToStep.call(this, step);
|
||||
return this;
|
||||
},
|
||||
exit: function() {
|
||||
_exitIntro.call(this, this._targetElement);
|
||||
},
|
||||
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;
|
||||
},
|
||||
oncomplete: function(providedCallback) {
|
||||
if (typeof (providedCallback) === 'function') {
|
||||
this._introCompleteCallback = providedCallback;
|
||||
} else {
|
||||
throw new Error('Provided callback for oncomplete was not a function.');
|
||||
}
|
||||
return this;
|
||||
},
|
||||
onexit: function(providedCallback) {
|
||||
if (typeof (providedCallback) === 'function') {
|
||||
this._introExitCallback = providedCallback;
|
||||
} else {
|
||||
throw new Error('Provided callback for onexit was not a function.');
|
||||
}
|
||||
return this;
|
||||
}
|
||||
};
|
||||
|
||||
exports.introJs = introJs;
|
||||
return introJs;
|
||||
}));
|
||||
+20
@@ -0,0 +1,20 @@
|
||||
/*! Intro.js v0.4.0 | (c)2013 usabli.ca MIT License */
|
||||
(function(h,f){"object"===typeof exports?f(exports):"function"===typeof define&&define.amd?define(["exports"],f):f(h)})(this,function(h){function f(a){this._targetElement=a;this._options={nextLabel:"Next →",prevLabel:"← Back",skipLabel:"Skip",doneLabel:"Done",tooltipPosition:"bottom",exitOnEsc:!0,exitOnOverlayClick:!0,showStepNumbers:!0}}function n(){"undefined"!==typeof this._introBeforeChangeCallback&&this._introBeforeChangeCallback.call(this,this._targetElement);"undefined"===typeof this._currentStep?
|
||||
this._currentStep=0:++this._currentStep;this._introItems.length<=this._currentStep?("function"===typeof this._introCompleteCallback&&this._introCompleteCallback.call(this),m.call(this,this._targetElement)):s.call(this,this._introItems[this._currentStep])}function t(){if(0===this._currentStep)return!1;"undefined"!==typeof this._introBeforeChangeCallback&&this._introBeforeChangeCallback.call(this,this._targetElement);s.call(this,this._introItems[--this._currentStep])}function m(a){var b=a.querySelector(".introjs-overlay");
|
||||
b.style.opacity=0;setTimeout(function(){b.parentNode&&b.parentNode.removeChild(b)},500);(a=a.querySelector(".introjs-helperLayer"))&&a.parentNode.removeChild(a);if(a=document.querySelector(".introjs-showElement"))a.className=a.className.replace(/introjs-[a-zA-Z]+/g,"").replace(/^\s+|\s+$/g,"");if((a=document.querySelectorAll(".introjs-fixParent"))&&0<a.length)for(var c=a.length-1;0<=c;c--)a[c].className=a[c].className.replace(/introjs-fixParent/g,"").replace(/^\s+|\s+$/g,"");window.removeEventListener?
|
||||
window.removeEventListener("keydown",this._onKeyDown,!0):document.detachEvent&&document.detachEvent("onkeydown",this._onKeyDown);this._currentStep=void 0}function u(a,b,c){b.style.top=null;b.style.right=null;b.style.bottom=null;b.style.left=null;if(this._introItems[this._currentStep])switch(this._introItems[this._currentStep].position){case "top":b.style.left="15px";b.style.top="-"+(l(b).height+10)+"px";c.className="introjs-arrow bottom";break;case "right":b.style.left=l(a).width+20+"px";c.className=
|
||||
"introjs-arrow left";break;case "left":b.style.top="15px";b.style.right=l(a).width+20+"px";c.className="introjs-arrow right";break;default:b.style.bottom="-"+(l(b).height+10)+"px",c.className="introjs-arrow top"}}function p(a){if(a&&this._introItems[this._currentStep]){var b=l(this._introItems[this._currentStep].element);a.setAttribute("style","width: "+(b.width+10)+"px; height:"+(b.height+10)+"px; top:"+(b.top-5)+"px;left: "+(b.left-5)+"px;")}}function s(a){var b;"undefined"!==typeof this._introChangeCallback&&
|
||||
this._introChangeCallback.call(this,a.element);var c=this,d=document.querySelector(".introjs-helperLayer");l(a.element);if(null!=d){var g=d.querySelector(".introjs-helperNumberLayer"),f=d.querySelector(".introjs-tooltiptext"),w=d.querySelector(".introjs-arrow"),q=d.querySelector(".introjs-tooltip"),e=d.querySelector(".introjs-skipbutton");b=d.querySelector(".introjs-prevbutton");var j=d.querySelector(".introjs-nextbutton");q.style.opacity=0;p.call(c,d);if((d=document.querySelectorAll(".introjs-fixParent"))&&
|
||||
0<d.length)for(var k=d.length-1;0<=k;k--)d[k].className=d[k].className.replace(/introjs-fixParent/g,"").replace(/^\s+|\s+$/g,"");d=document.querySelector(".introjs-showElement");d.className=d.className.replace(/introjs-[a-zA-Z]+/g,"").replace(/^\s+|\s+$/g,"");c._lastShowElementTimer&&clearTimeout(c._lastShowElementTimer);c._lastShowElementTimer=setTimeout(function(){null!=g&&(g.innerHTML=a.step);f.innerHTML=a.intro;u.call(c,a.element,q,w);q.style.opacity=1},350)}else{e=document.createElement("div");
|
||||
d=document.createElement("div");k=document.createElement("div");e.className="introjs-helperLayer";p.call(c,e);this._targetElement.appendChild(e);d.className="introjs-arrow";k.className="introjs-tooltip";k.innerHTML='<div class="introjs-tooltiptext">'+a.intro+'</div><div class="introjs-tooltipbuttons"></div>';this._options.showStepNumbers&&(b=document.createElement("span"),b.className="introjs-helperNumberLayer",b.innerHTML=a.step,e.appendChild(b));k.appendChild(d);e.appendChild(k);j=document.createElement("a");
|
||||
j.onclick=function(){c._introItems.length-1!=c._currentStep&&n.call(c)};j.href="javascript:void(0);";j.innerHTML=this._options.nextLabel;b=document.createElement("a");b.onclick=function(){0!=c._currentStep&&t.call(c)};b.href="javascript:void(0);";b.innerHTML=this._options.prevLabel;e=document.createElement("a");e.className="introjs-button introjs-skipbutton";e.href="javascript:void(0);";e.innerHTML=this._options.skipLabel;e.onclick=function(){c._introItems.length-1==c._currentStep&&"function"===typeof c._introCompleteCallback&&
|
||||
c._introCompleteCallback.call(c);c._introItems.length-1!=c._currentStep&&"function"===typeof c._introExitCallback&&c._introExitCallback.call(c);m.call(c,c._targetElement)};var h=k.querySelector(".introjs-tooltipbuttons");h.appendChild(e);h.appendChild(b);h.appendChild(j);u.call(c,a.element,k,d)}0==this._currentStep?(b.className="introjs-button introjs-prevbutton introjs-disabled",j.className="introjs-button introjs-nextbutton",e.innerHTML=this._options.skipLabel):this._introItems.length-1==this._currentStep?
|
||||
(e.innerHTML=this._options.doneLabel,b.className="introjs-button introjs-prevbutton",j.className="introjs-button introjs-nextbutton introjs-disabled"):(b.className="introjs-button introjs-prevbutton",j.className="introjs-button introjs-nextbutton",e.innerHTML=this._options.skipLabel);j.focus();a.element.className+=" introjs-showElement";e=v(a.element,"position");"absolute"!==e&&"relative"!==e&&(a.element.className+=" introjs-relativePosition");for(e=a.element.parentNode;null!=e&&"body"!==e.tagName.toLowerCase();)b=
|
||||
v(e,"z-index"),/[0-9]+/.test(b)&&(e.className+=" introjs-fixParent"),e=e.parentNode;e=a.element.getBoundingClientRect();0<=e.top&&0<=e.left&&e.bottom+80<=window.innerHeight&&e.right<=window.innerWidth||(b=a.element.getBoundingClientRect(),e=b.bottom-(b.bottom-b.top),j=b.bottom,b=void 0!=window.innerWidth?window.innerHeight:document.documentElement.clientHeight,b=j-b,0>e?window.scrollBy(0,e-30):window.scrollBy(0,b+100))}function v(a,b){var c="";a.currentStyle?c=a.currentStyle[b]:document.defaultView&&
|
||||
document.defaultView.getComputedStyle&&(c=document.defaultView.getComputedStyle(a,null).getPropertyValue(b));return c.toLowerCase?c.toLowerCase():c}function x(a){var b=document.createElement("div"),c="",d=this;b.className="introjs-overlay";if("body"===a.tagName.toLowerCase())c+="top: 0;bottom: 0; left: 0;right: 0;position: fixed;",b.setAttribute("style",c);else{var g=l(a);g&&(c+="width: "+g.width+"px; height:"+g.height+"px; top:"+g.top+"px;left: "+g.left+"px;",b.setAttribute("style",c))}a.appendChild(b);
|
||||
b.onclick=function(){!0==d._options.exitOnOverlayClick&&m.call(d,a);void 0!=d._introExitCallback&&d._introExitCallback.call(d)};setTimeout(function(){c+="opacity: .8;";b.setAttribute("style",c)},10);return!0}function l(a){var b={};b.width=a.offsetWidth;b.height=a.offsetHeight;for(var c=0,d=0;a&&!isNaN(a.offsetLeft)&&!isNaN(a.offsetTop);)c+=a.offsetLeft,d+=a.offsetTop,a=a.offsetParent;b.top=d;b.left=c;return b}var r=function(a){if("object"===typeof a)return new f(a);if("string"===typeof a){if(a=document.querySelector(a))return new f(a);
|
||||
throw Error("There is no element with given selector.");}return new f(document.body)};r.version="0.4.0";r.fn=f.prototype={clone:function(){return new f(this)},setOption:function(a,b){this._options[a]=b;return this},setOptions:function(a){var b=this._options,c={},d;for(d in b)c[d]=b[d];for(d in a)c[d]=a[d];this._options=c;return this},start:function(){a:{var a=this._targetElement,b=[],c=this;if(this._options.steps)for(var d=[],g=0,d=this._options.steps.length;g<d;g++){var f=this._options.steps[g];
|
||||
f.step=g+1;f.element=document.querySelector(f.element);b.push(f)}else{d=a.querySelectorAll("*[data-intro]");if(1>d.length)break a;g=0;for(f=d.length;g<f;g++){var h=d[g];b.push({element:h,intro:h.getAttribute("data-intro"),step:parseInt(h.getAttribute("data-step"),10),position:h.getAttribute("data-position")||this._options.tooltipPosition})}}b.sort(function(a,c){return a.step-c.step});c._introItems=b;x.call(c,a)&&(n.call(c),a.querySelector(".introjs-skipbutton"),a.querySelector(".introjs-nextbutton"),
|
||||
c._onKeyDown=function(b){if(27===b.keyCode&&!0==c._options.exitOnEsc)m.call(c,a),void 0!=c._introExitCallback&&c._introExitCallback.call(c);else if(37===b.keyCode)t.call(c);else if(39===b.keyCode||13===b.keyCode)n.call(c),b.preventDefault?b.preventDefault():b.returnValue=!1},c._onResize=function(){p.call(c,document.querySelector(".introjs-helperLayer"))},window.addEventListener?(window.addEventListener("keydown",c._onKeyDown,!0),window.addEventListener("resize",c._onResize,!0)):document.attachEvent&&
|
||||
(document.attachEvent("onkeydown",c._onKeyDown),document.attachEvent("onresize",c._onResize)))}return this},goToStep:function(a){this._currentStep=a-2;"undefined"!==typeof this._introItems&&n.call(this);return this},exit:function(){m.call(this,this._targetElement)},onbeforechange:function(a){if("function"===typeof a)this._introBeforeChangeCallback=a;else throw Error("Provided callback for onbeforechange was not a function");return this},onchange:function(a){if("function"===typeof a)this._introChangeCallback=
|
||||
a;else throw Error("Provided callback for onchange was not a function.");return this},oncomplete:function(a){if("function"===typeof a)this._introCompleteCallback=a;else throw Error("Provided callback for oncomplete was not a function.");return this},onexit:function(a){if("function"===typeof a)this._introExitCallback=a;else throw Error("Provided callback for onexit was not a function.");return this}};return h.introJs=r});
|
||||
@@ -0,0 +1,216 @@
|
||||
.introjs-overlay {
|
||||
position: absolute;
|
||||
z-index: 999999;
|
||||
background-color: #000;
|
||||
opacity: 0;
|
||||
background: -moz-radial-gradient(center,ellipse cover,rgba(0,0,0,0.4) 0,rgba(0,0,0,0.9) 100%);
|
||||
background: -webkit-gradient(radial,center center,0px,center center,100%,color-stop(0%,rgba(0,0,0,0.4)),color-stop(100%,rgba(0,0,0,0.9)));
|
||||
background: -webkit-radial-gradient(center,ellipse cover,rgba(0,0,0,0.4) 0,rgba(0,0,0,0.9) 100%);
|
||||
background: -o-radial-gradient(center,ellipse cover,rgba(0,0,0,0.4) 0,rgba(0,0,0,0.9) 100%);
|
||||
background: -ms-radial-gradient(center,ellipse cover,rgba(0,0,0,0.4) 0,rgba(0,0,0,0.9) 100%);
|
||||
background: radial-gradient(center,ellipse cover,rgba(0,0,0,0.4) 0,rgba(0,0,0,0.9) 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#66000000',endColorstr='#e6000000',GradientType=1);
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
|
||||
filter: alpha(opacity=50);
|
||||
-webkit-transition: all 0.3s ease-out;
|
||||
-moz-transition: all 0.3s ease-out;
|
||||
-ms-transition: all 0.3s ease-out;
|
||||
-o-transition: all 0.3s ease-out;
|
||||
transition: all 0.3s ease-out;
|
||||
}
|
||||
|
||||
.introjs-fixParent {
|
||||
z-index: auto !important;
|
||||
}
|
||||
|
||||
.introjs-showElement {
|
||||
z-index: 9999999 !important;
|
||||
}
|
||||
|
||||
.introjs-relativePosition {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.introjs-helperLayer {
|
||||
position: absolute;
|
||||
z-index: 9999998;
|
||||
background-color: #FFF;
|
||||
background-color: rgba(255,255,255,.9);
|
||||
border: 1px solid #777;
|
||||
border: 1px solid rgba(0,0,0,.5);
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 2px 15px rgba(0,0,0,.4);
|
||||
-webkit-transition: all 0.3s ease-out;
|
||||
-moz-transition: all 0.3s ease-out;
|
||||
-ms-transition: all 0.3s ease-out;
|
||||
-o-transition: all 0.3s ease-out;
|
||||
transition: all 0.3s ease-out;
|
||||
}
|
||||
|
||||
.introjs-helperNumberLayer {
|
||||
position: absolute;
|
||||
top: -16px;
|
||||
left: -16px;
|
||||
z-index: 9999999999 !important;
|
||||
padding: 2px;
|
||||
font-family: Arial, verdana, tahoma;
|
||||
font-size: 13px;
|
||||
font-weight: bold;
|
||||
color: white;
|
||||
text-align: center;
|
||||
text-shadow: 1px 1px 1px rgba(0,0,0,.3);
|
||||
background: #ff3019; /* Old browsers */
|
||||
background: -webkit-linear-gradient(top, #ff3019 0%, #cf0404 100%); /* Chrome10+,Safari5.1+ */
|
||||
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ff3019), color-stop(100%, #cf0404)); /* Chrome,Safari4+ */
|
||||
background: -moz-linear-gradient(top, #ff3019 0%, #cf0404 100%); /* FF3.6+ */
|
||||
background: -ms-linear-gradient(top, #ff3019 0%, #cf0404 100%); /* IE10+ */
|
||||
background: -o-linear-gradient(top, #ff3019 0%, #cf0404 100%); /* Opera 11.10+ */
|
||||
background: linear-gradient(to bottom, #ff3019 0%, #cf0404 100%); /* W3C */
|
||||
width: 20px;
|
||||
height:20px;
|
||||
line-height: 20px;
|
||||
border: 3px solid white;
|
||||
border-radius: 50%;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff3019', endColorstr='#cf0404', GradientType=0); /* IE6-9 */
|
||||
filter: progid:DXImageTransform.Microsoft.Shadow(direction=135, strength=2, color=ff0000); /* IE10 text shadows */
|
||||
box-shadow: 0 2px 5px rgba(0,0,0,.4);
|
||||
}
|
||||
|
||||
.introjs-arrow {
|
||||
border: 5px solid white;
|
||||
content:'';
|
||||
position: absolute;
|
||||
}
|
||||
.introjs-arrow.top {
|
||||
top: -10px;
|
||||
border-top-color:transparent;
|
||||
border-right-color:transparent;
|
||||
border-bottom-color:white;
|
||||
border-left-color:transparent;
|
||||
}
|
||||
.introjs-arrow.right {
|
||||
right: -10px;
|
||||
top: 10px;
|
||||
border-top-color:transparent;
|
||||
border-right-color:transparent;
|
||||
border-bottom-color:transparent;
|
||||
border-left-color:white;
|
||||
}
|
||||
.introjs-arrow.bottom {
|
||||
bottom: -10px;
|
||||
border-top-color:white;
|
||||
border-right-color:transparent;
|
||||
border-bottom-color:transparent;
|
||||
border-left-color:transparent;
|
||||
}
|
||||
.introjs-arrow.left {
|
||||
left: -10px;
|
||||
top: 10px;
|
||||
border-top-color:transparent;
|
||||
border-right-color:white;
|
||||
border-bottom-color:transparent;
|
||||
border-left-color:transparent;
|
||||
}
|
||||
|
||||
.introjs-tooltip {
|
||||
position: absolute;
|
||||
padding: 10px;
|
||||
background-color: white;
|
||||
min-width: 200px;
|
||||
max-width: 300px;
|
||||
border-radius: 3px;
|
||||
box-shadow: 0 1px 10px rgba(0,0,0,.4);
|
||||
-webkit-transition: opacity 0.1s ease-out;
|
||||
-moz-transition: opacity 0.1s ease-out;
|
||||
-ms-transition: opacity 0.1s ease-out;
|
||||
-o-transition: opacity 0.1s ease-out;
|
||||
transition: opacity 0.1s ease-out;
|
||||
}
|
||||
|
||||
.introjs-tooltipbuttons {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
/*
|
||||
Buttons style by http://nicolasgallagher.com/lab/css3-github-buttons/
|
||||
Changed by Afshin Mehrabani
|
||||
*/
|
||||
.introjs-button {
|
||||
position: relative;
|
||||
overflow: visible;
|
||||
display: inline-block;
|
||||
padding: 0.3em 0.8em;
|
||||
border: 1px solid #d4d4d4;
|
||||
margin: 0;
|
||||
text-decoration: none;
|
||||
text-shadow: 1px 1px 0 #fff;
|
||||
font: 11px/normal sans-serif;
|
||||
color: #333;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
background-color: #ececec;
|
||||
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f4f4f4), to(#ececec));
|
||||
background-image: -moz-linear-gradient(#f4f4f4, #ececec);
|
||||
background-image: -o-linear-gradient(#f4f4f4, #ececec);
|
||||
background-image: linear-gradient(#f4f4f4, #ececec);
|
||||
-webkit-background-clip: padding;
|
||||
-moz-background-clip: padding;
|
||||
-o-background-clip: padding-box;
|
||||
/*background-clip: padding-box;*/ /* commented out due to Opera 11.10 bug */
|
||||
-webkit-border-radius: 0.2em;
|
||||
-moz-border-radius: 0.2em;
|
||||
border-radius: 0.2em;
|
||||
/* IE hacks */
|
||||
zoom: 1;
|
||||
*display: inline;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.introjs-button:hover {
|
||||
border-color: #bcbcbc;
|
||||
text-decoration: none;
|
||||
box-shadow: 0px 1px 1px #e3e3e3;
|
||||
}
|
||||
|
||||
.introjs-button:focus,
|
||||
.introjs-button:active {
|
||||
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ececec), to(#f4f4f4));
|
||||
background-image: -moz-linear-gradient(#ececec, #f4f4f4);
|
||||
background-image: -o-linear-gradient(#ececec, #f4f4f4);
|
||||
background-image: linear-gradient(#ececec, #f4f4f4);
|
||||
}
|
||||
|
||||
/* overrides extra padding on button elements in Firefox */
|
||||
.introjs-button::-moz-focus-inner {
|
||||
padding: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.introjs-skipbutton {
|
||||
margin-right: 5px;
|
||||
color: #7a7a7a;
|
||||
}
|
||||
|
||||
.introjs-prevbutton {
|
||||
-webkit-border-radius: 0.2em 0 0 0.2em;
|
||||
-moz-border-radius: 0.2em 0 0 0.2em;
|
||||
border-radius: 0.2em 0 0 0.2em;
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.introjs-nextbutton {
|
||||
-webkit-border-radius: 0 0.2em 0.2em 0;
|
||||
-moz-border-radius: 0 0.2em 0.2em 0;
|
||||
border-radius: 0 0.2em 0.2em 0;
|
||||
}
|
||||
|
||||
.introjs-disabled, .introjs-disabled:hover, .introjs-disabled:focus {
|
||||
color: #9a9a9a;
|
||||
border-color: #d4d4d4;
|
||||
box-shadow: none;
|
||||
cursor: default;
|
||||
background-color: #f4f4f4;
|
||||
background-image: none;
|
||||
text-decoration: none;
|
||||
}
|
||||
+1
File diff suppressed because one or more lines are too long
@@ -2,9 +2,10 @@
|
||||
"name": "intro.js",
|
||||
"filename": "intro.min.js",
|
||||
"description": "A better way for new feature introduction and step-by-step users guide for your website and project.",
|
||||
"version": "0.2.1",
|
||||
"version": "0.4.0",
|
||||
"keywords": [
|
||||
"intro.js",
|
||||
"tutorial",
|
||||
"step-by-step guide",
|
||||
"introductions"
|
||||
],
|
||||
@@ -27,7 +28,7 @@
|
||||
],
|
||||
"licenses": [
|
||||
{
|
||||
"name": "Personal License",
|
||||
"name": "MIT",
|
||||
"url": "https://github.com/usablica/intro.js#license"
|
||||
}
|
||||
],
|
||||
|
||||
Reference in New Issue
Block a user