From a19f2cf6981cfd8fac7f3fd2dd9c76cdfd0f56e1 Mon Sep 17 00:00:00 2001 From: Robert Kang Date: Thu, 13 Feb 2014 21:11:51 -0400 Subject: [PATCH 01/35] fixes #96 --- introjs.css | 1 + 1 file changed, 1 insertion(+) diff --git a/introjs.css b/introjs.css index e3cda0c17..64d601da1 100644 --- a/introjs.css +++ b/introjs.css @@ -22,6 +22,7 @@ .introjs-fixParent { z-index: auto !important; opacity: 1.0 !important; + position: absolute; } .introjs-showElement { From 814a75ee1f4275afd5e79e642e67988119e9de35 Mon Sep 17 00:00:00 2001 From: April Barrett Date: Thu, 7 Nov 2013 18:53:00 -0800 Subject: [PATCH 02/35] adding component.json --- component.json | 13 +++++++++++++ 1 file changed, 13 insertions(+) create mode 100644 component.json diff --git a/component.json b/component.json new file mode 100644 index 000000000..de99a3c92 --- /dev/null +++ b/component.json @@ -0,0 +1,13 @@ +{ + "name": "intro", + "repo": "usablica/intro.js", + "description": "Better introductions for websites and features with a step-by-step guide for your projects", + "version": "0.7.0", + "main": "intro.js", + "scripts": [ + "intro.js" + ], + "styles": [ + "introjs.css" + ] +} From 04a1580cb7ad56941e53372ea4aa10bdca6988e6 Mon Sep 17 00:00:00 2001 From: Afshin Mehrabani Date: Tue, 11 Mar 2014 10:56:03 +0330 Subject: [PATCH 03/35] Update component.json --- component.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/component.json b/component.json index de99a3c92..6cc166828 100644 --- a/component.json +++ b/component.json @@ -1,5 +1,5 @@ { - "name": "intro", + "name": "intro.js", "repo": "usablica/intro.js", "description": "Better introductions for websites and features with a step-by-step guide for your projects", "version": "0.7.0", From 80bf24394bb537c05f58db92d34d7813059a873b Mon Sep 17 00:00:00 2001 From: Afshin Mehrabani Date: Tue, 11 Mar 2014 12:32:11 +0330 Subject: [PATCH 04/35] Fix recursion problem in _clone function, fixes #239 --- bower.json | 2 +- component.json | 2 +- intro.js | 8 ++++---- package.json | 2 +- 4 files changed, 7 insertions(+), 7 deletions(-) diff --git a/bower.json b/bower.json index 100164aa7..8b2b91812 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "intro.js", - "version": "0.7.0", + "version": "0.7.1", "description": "A better way for new feature introduction and step-by-step users guide for your website and project.", "keywords": ["demo", "intro", "introduction"], "homepage": "http://usablica.github.com/intro.js/", diff --git a/component.json b/component.json index 6cc166828..d1aee3afa 100644 --- a/component.json +++ b/component.json @@ -2,7 +2,7 @@ "name": "intro.js", "repo": "usablica/intro.js", "description": "Better introductions for websites and features with a step-by-step guide for your projects", - "version": "0.7.0", + "version": "0.7.1", "main": "intro.js", "scripts": [ "intro.js" diff --git a/intro.js b/intro.js index cffefaf40..aa74dd1da 100644 --- a/intro.js +++ b/intro.js @@ -1,5 +1,5 @@ /** - * Intro.js v0.7.0 + * Intro.js v0.7.1 * https://github.com/usablica/intro.js * MIT licensed * @@ -19,7 +19,7 @@ } } (this, function (exports) { //Default config/variables - var VERSION = '0.7.0'; + var VERSION = '0.7.1'; /** * IntroJs main class @@ -215,7 +215,7 @@ * @method _cloneObject */ function _cloneObject(object) { - if (object == null || typeof (object) != 'object' || object.hasOwnProperty("nodeName") === true) { + if (object == null || typeof (object) != 'object' || object.hasOwnProperty("nodeName") === true || typeof (object.nodeType) != 'undefined') { return object; } var temp = {}; @@ -646,7 +646,7 @@ if (/[0-9]+/.test(zIndex) || opacity < 1) { parentElm.className += ' introjs-fixParent'; } - + parentElm = parentElm.parentNode; } diff --git a/package.json b/package.json index 8bbcda848..c8eb9174c 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "Intro.js", "description": "Better introductions for websites and features with a step-by-step guide for your projects", - "version": "0.7.0", + "version": "0.7.1", "author": "Afshin Mehrabani ", "repository": { "type": "git", From 44852a19d5b5ff49b8903f507b7927cc121b3856 Mon Sep 17 00:00:00 2001 From: Afshin Mehrabani Date: Tue, 11 Mar 2014 12:39:38 +0330 Subject: [PATCH 05/35] Add minified version --- minified/intro.min.js | 46 +++++++++++++++++++++---------------------- 1 file changed, 23 insertions(+), 23 deletions(-) diff --git a/minified/intro.min.js b/minified/intro.min.js index 7c3d222c3..27dc1fd71 100644 --- a/minified/intro.min.js +++ b/minified/intro.min.js @@ -1,24 +1,24 @@ -(function(q,e){"object"===typeof exports?e(exports):"function"===typeof define&&define.amd?define(["exports"],e):e(q)})(this,function(q){function e(a){this._targetElement=a;this._options={nextLabel:"Next →",prevLabel:"← Back",skipLabel:"Skip",doneLabel:"Done",tooltipPosition:"bottom",tooltipClass:"",exitOnEsc:!0,exitOnOverlayClick:!0,showStepNumbers:!0,keyboardNavigation:!0,showButtons:!0,showBullets:!0,scrollToElement:!0}}function s(a){if(null==a||"object"!=typeof a||!0===a.hasOwnProperty("nodeName"))return a; -var b={},c;for(c in a)b[c]=s(a[c]);return b}function t(){"undefined"===typeof this._currentStep?this._currentStep=0:++this._currentStep;if(this._introItems.length<=this._currentStep)"function"===typeof this._introCompleteCallback&&this._introCompleteCallback.call(this),u.call(this,this._targetElement);else{var a=this._introItems[this._currentStep];"undefined"!==typeof this._introBeforeChangeCallback&&this._introBeforeChangeCallback.call(this,a.element);z.call(this,a)}}function x(){if(0===this._currentStep)return!1; -var a=this._introItems[--this._currentStep];"undefined"!==typeof this._introBeforeChangeCallback&&this._introBeforeChangeCallback.call(this,a.element);z.call(this,a)}function u(a){var b=a.querySelector(".introjs-overlay");if(null!=b){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.active").className="";d.querySelector('.introjs-bullets li > a[data-stepnumber="'+ -a.step+'"]').className="active";n.style.opacity=1},350)}else{var h=document.createElement("div"),l=document.createElement("div"),g=document.createElement("div"),m=document.createElement("div"),k=document.createElement("div"),e=document.createElement("div");h.className="introjs-helperLayer";w.call(c,h);this._targetElement.appendChild(h);l.className="introjs-arrow";m.className="introjs-tooltiptext";m.innerHTML=a.intro;k.className="introjs-bullets";!1===this._options.showBullets&&(k.style.display="none"); -var q=document.createElement("ul");b=0;for(var v=this._introItems.length;bg)b.className+=" introjs-fixParent";b=b.parentNode}b=a.element.getBoundingClientRect(); -!(0<=b.top&&0<=b.left&&b.bottom+80<=window.innerHeight&&b.right<=window.innerWidth)&&!0===this._options.scrollToElement&&(g=a.element.getBoundingClientRect(),b=void 0!=window.innerWidth?window.innerHeight:document.documentElement.clientHeight,l=g.bottom-(g.bottom-g.top),g=g.bottom-b,0>l||a.element.clientHeight>b?window.scrollBy(0,l-30):window.scrollBy(0,g+100));"undefined"!==typeof this._introAfterChangeCallback&&this._introAfterChangeCallback.call(this,a.element)}function y(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&&c.toLowerCase?c.toLowerCase():c}function C(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 f=p(a);f&&(c+="width: "+f.width+"px; height:"+f.height+"px; top:"+f.top+"px;left: "+f.left+ -"px;",b.setAttribute("style",c))}a.appendChild(b);b.onclick=function(){!0==d._options.exitOnOverlayClick&&(u.call(d,a),void 0!=d._introExitCallback&&d._introExitCallback.call(d))};setTimeout(function(){c+="opacity: .8;";b.setAttribute("style",c)},10);return!0}function p(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 v=function(a){if("object"===typeof a)return new e(a); -if("string"===typeof a){if(a=document.querySelector(a))return new e(a);throw Error("There is no element with given selector.");}return new e(document.body)};v.version="0.7.0";v.fn=e.prototype={clone:function(){return new e(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=[], -f=0,d=this._options.steps.length;fd.length)break a;f=0;for(e=d.length;f a.active").className= +"";d.querySelector('.introjs-bullets li > a[data-stepnumber="'+a.step+'"]').className="active";n.style.opacity=1},350)}else{var h=document.createElement("div"),l=document.createElement("div"),g=document.createElement("div"),m=document.createElement("div"),k=document.createElement("div"),e=document.createElement("div");h.className="introjs-helperLayer";w.call(c,h);this._targetElement.appendChild(h);l.className="introjs-arrow";m.className="introjs-tooltiptext";m.innerHTML=a.intro;k.className="introjs-bullets"; +!1===this._options.showBullets&&(k.style.display="none");var q=document.createElement("ul");b=0;for(var v=this._introItems.length;bg)b.className+= +" introjs-fixParent";b=b.parentNode}b=a.element.getBoundingClientRect();!(0<=b.top&&0<=b.left&&b.bottom+80<=window.innerHeight&&b.right<=window.innerWidth)&&!0===this._options.scrollToElement&&(g=a.element.getBoundingClientRect(),b=void 0!=window.innerWidth?window.innerHeight:document.documentElement.clientHeight,l=g.bottom-(g.bottom-g.top),g=g.bottom-b,0>l||a.element.clientHeight>b?window.scrollBy(0,l-30):window.scrollBy(0,g+100));"undefined"!==typeof this._introAfterChangeCallback&&this._introAfterChangeCallback.call(this, +a.element)}function y(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&&c.toLowerCase?c.toLowerCase():c}function C(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 f=p(a);f&&(c+="width: "+f.width+"px; height:"+ +f.height+"px; top:"+f.top+"px;left: "+f.left+"px;",b.setAttribute("style",c))}a.appendChild(b);b.onclick=function(){!0==d._options.exitOnOverlayClick&&(u.call(d,a),void 0!=d._introExitCallback&&d._introExitCallback.call(d))};setTimeout(function(){c+="opacity: .8;";b.setAttribute("style",c)},10);return!0}function p(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 v=function(a){if("object"===typeof a)return new e(a);if("string"===typeof a){if(a=document.querySelector(a))return new e(a);throw Error("There is no element with given selector.");}return new e(document.body)};v.version="0.7.1";v.fn=e.prototype={clone:function(){return new e(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=[],f=0,d=this._options.steps.length;fd.length)break a;f=0;for(e=d.length;f Date: Tue, 11 Mar 2014 13:12:17 +0330 Subject: [PATCH 06/35] add v0.7.1 changelog --- README.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/README.md b/README.md index 08027240c..35df6ca3d 100644 --- a/README.md +++ b/README.md @@ -381,6 +381,9 @@ Want to learn faster and easier? Here we have **Instant IntroJs**, Packt Publish ## Release History + * **v0.7.1** - 2014-03-11 + - Fix "Too much recursion" issue with Firefox and Internet Explorer. + * **v0.7.0** - 2014-02-07 - Add `onafterchange` event - Add scrolling to element option From be96db02967e9144695e7e9b99ceaa1a11718b4f Mon Sep 17 00:00:00 2001 From: Afshin Mehrabani Date: Tue, 25 Mar 2014 12:28:20 +0430 Subject: [PATCH 07/35] Add ability to define introductions without focusing on elements + fix IE8 issue in programmatic version --- example/index.html | 1 + example/programmatic/index.html | 3 + example/withoutElement/index.html | 113 ++++++++++++++++++++++++++++++ intro.js | 97 +++++++++++++++++++++---- introjs.css | 7 ++ minified/intro.min.js | 48 +++++++------ minified/introjs.min.css | 2 +- 7 files changed, 234 insertions(+), 37 deletions(-) create mode 100644 example/withoutElement/index.html diff --git a/example/index.html b/example/index.html index 63104255f..d42e90716 100644 --- a/example/index.html +++ b/example/index.html @@ -29,6 +29,7 @@

Examples

  • RTL version
  • HTML in tooltip
  • Custom CSS Class
    • +
  • Introduction without focusing on elements
    • diff --git a/example/programmatic/index.html b/example/programmatic/index.html index 0ce961054..d40e4b48a 100644 --- a/example/programmatic/index.html +++ b/example/programmatic/index.html @@ -74,6 +74,9 @@

    Section Six

    var intro = introJs(); intro.setOptions({ steps: [ + { + intro: "Hello world!" + }, { element: document.querySelector('#step1'), intro: "This is a tooltip." diff --git a/example/withoutElement/index.html b/example/withoutElement/index.html new file mode 100644 index 000000000..5a4c12e25 --- /dev/null +++ b/example/withoutElement/index.html @@ -0,0 +1,113 @@ + + + + + Intro without focusing on elements + + + + + + + + + + + + + + + + +
    + +
    + +

    Intro.js

    +
    + +
    + +
    +

    Without Element

    +

    This example shows the introductions without focusing on elements.

    + Show me how +
    + +
    + +
    +
    +

    Section One

    +

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.

    + +

    Section Two

    +

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.

    + +

    Section Three

    +

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.

    +
    + +
    +

    Section Four

    +

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.

    + + +

    Section Five

    +

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.

    + +

    Section Six

    +

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.

    +
    +
    + +
    + +
    + + + + diff --git a/intro.js b/intro.js index aa74dd1da..420dcbfbb 100644 --- a/intro.js +++ b/intro.js @@ -1,5 +1,5 @@ /** - * Intro.js v0.7.1 + * Intro.js v0.8.0 * https://github.com/usablica/intro.js * MIT licensed * @@ -19,7 +19,7 @@ } } (this, function (exports) { //Default config/variables - var VERSION = '0.7.1'; + var VERSION = '0.8.0'; /** * IntroJs main class @@ -85,6 +85,21 @@ currentItem.element = document.querySelector(currentItem.element); } + //intro without element + if (typeof(currentItem.element) === 'undefined' || currentItem.element == null) { + var floatingElementQuery = document.querySelector(".introjsFloatingElement"); + + if (floatingElementQuery == null) { + floatingElementQuery = document.createElement('div'); + floatingElementQuery.className = 'introjsFloatingElement'; + + document.body.appendChild(floatingElementQuery); + } + + currentItem.element = floatingElementQuery; + currentItem.position = 'floating'; + } + if (currentItem.element != null) { introItems.push(currentItem); } @@ -215,7 +230,7 @@ * @method _cloneObject */ function _cloneObject(object) { - if (object == null || typeof (object) != 'object' || object.hasOwnProperty("nodeName") === true || typeof (object.nodeType) != 'undefined') { + if (object == null || typeof (object) != 'object' || typeof (object.nodeType) != 'undefined') { return object; } var temp = {}; @@ -266,6 +281,7 @@ this._introBeforeChangeCallback.call(this, nextStep.element); } + this._direction = 'forward'; _showElement.call(this, nextStep); } @@ -285,6 +301,7 @@ this._introBeforeChangeCallback.call(this, nextStep.element); } + this._direction = 'backward'; _showElement.call(this, nextStep); } @@ -298,10 +315,12 @@ function _exitIntro(targetElement) { //remove overlay layer from the page var overlayLayer = targetElement.querySelector('.introjs-overlay'); + //return if intro already completed or skipped if (overlayLayer == null) { return; } + //for fade-out animation overlayLayer.style.opacity = 0; setTimeout(function () { @@ -309,11 +328,19 @@ overlayLayer.parentNode.removeChild(overlayLayer); } }, 500); + //remove all helper layers var helperLayer = targetElement.querySelector('.introjs-helperLayer'); if (helperLayer) { helperLayer.parentNode.removeChild(helperLayer); } + + //remove intro floating element + var floatingElement = document.querySelector('.introjsFloatingElement'); + if (floatingElement) { + floatingElement.parentNode.removeChild(floatingElement); + } + //remove `introjs-showElement` class from the element var showElement = document.querySelector('.introjs-showElement'); if (showElement) { @@ -327,12 +354,14 @@ 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; } @@ -346,12 +375,21 @@ * @param {Object} tooltipLayer * @param {Object} arrowLayer */ - function _placeTooltip(targetElement, tooltipLayer, arrowLayer) { + function _placeTooltip(targetElement, tooltipLayer, arrowLayer, helperNumberLayer) { //reset the old style - tooltipLayer.style.top = null; - tooltipLayer.style.right = null; - tooltipLayer.style.bottom = null; - tooltipLayer.style.left = null; + 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; @@ -388,6 +426,23 @@ } tooltipLayer.style.right = (_getOffset(targetElement).width + 20) + 'px'; arrowLayer.className = 'introjs-arrow right'; + break; + case 'floating': + arrowLayer.style.display = 'none'; + + //we have to adjust the top and left of layer manually for intro items without element{ + var tooltipOffset = _getOffset(tooltipLayer); + + tooltipLayer.style.left = '50%'; + tooltipLayer.style.top = '50%'; + tooltipLayer.style.marginLeft = '-' + (tooltipOffset.width / 2) + 'px'; + tooltipLayer.style.marginTop = '-' + (tooltipOffset.height / 2) + 'px'; + + if (typeof(helperNumberLayer) != 'undefined' && helperNumberLayer != null) { + helperNumberLayer.style.left = '-' + ((tooltipOffset.width / 2) + 18) + 'px'; + helperNumberLayer.style.top = '-' + ((tooltipOffset.height / 2) + 18) + 'px'; + } + break; case 'bottom': // Bottom going to follow the default behavior @@ -410,10 +465,17 @@ //prevent error when `this._currentStep` in undefined if (!this._introItems[this._currentStep]) return; - var elementPosition = _getOffset(this._introItems[this._currentStep].element); + var currentElement = this._introItems[this._currentStep]; + var elementPosition = _getOffset(currentElement.element); + + var widthHeightPadding = 10; + if (currentElement.position == 'floating') { + widthHeightPadding = 0; + } + //set new position to helper layer - helperLayer.setAttribute('style', 'width: ' + (elementPosition.width + 10) + 'px; ' + - 'height:' + (elementPosition.height + 10) + 'px; ' + + helperLayer.setAttribute('style', 'width: ' + (elementPosition.width + widthHeightPadding) + 'px; ' + + 'height:' + (elementPosition.height + widthHeightPadding) + 'px; ' + 'top:' + (elementPosition.top - 5) + 'px;' + 'left: ' + (elementPosition.left - 5) + 'px;'); } @@ -448,6 +510,14 @@ //hide the tooltip oldtooltipContainer.style.opacity = 0; + if (oldHelperNumberLayer != null) { + var lastIntroItem = this._introItems[(targetElement.step - 2 >= 0 ? targetElement.step - 2 : 0)]; + + if (lastIntroItem != null && (this._direction == 'forward' && lastIntroItem.position == 'floating') || (this._direction == 'backward' && targetElement.position == 'floating')) { + oldHelperNumberLayer.style.opacity = 0; + } + } + //set new position to helper layer _setHelperLayerPosition.call(self, oldHelperLayer); @@ -474,7 +544,7 @@ //set current tooltip text oldtooltipLayer.innerHTML = targetElement.intro; //set the tooltip position - _placeTooltip.call(self, targetElement.element, oldtooltipContainer, oldArrowLayer); + _placeTooltip.call(self, targetElement.element, oldtooltipContainer, oldArrowLayer, oldHelperNumberLayer); //change active bullet oldHelperLayer.querySelector('.introjs-bullets li > a.active').className = ''; @@ -482,6 +552,7 @@ //show the tooltip oldtooltipContainer.style.opacity = 1; + oldHelperNumberLayer.style.opacity = 1; }, 350); } else { @@ -605,7 +676,7 @@ tooltipLayer.appendChild(buttonsLayer); //set proper position - _placeTooltip.call(self, targetElement.element, tooltipLayer, arrowLayer); + _placeTooltip.call(self, targetElement.element, tooltipLayer, arrowLayer, helperNumberLayer); } if (this._currentStep == 0 && this._introItems.length > 1) { diff --git a/introjs.css b/introjs.css index e3cda0c17..760d7d15b 100644 --- a/introjs.css +++ b/introjs.css @@ -245,4 +245,11 @@ } .introjs-bullets ul li a.active { background: #999; +} +.introjsFloatingElement { + position: absolute; + height: 0; + width: 0; + left: 50%; + top: 50%; } \ No newline at end of file diff --git a/minified/intro.min.js b/minified/intro.min.js index 27dc1fd71..11719d5cf 100644 --- a/minified/intro.min.js +++ b/minified/intro.min.js @@ -1,24 +1,26 @@ -(function(q,e){"object"===typeof exports?e(exports):"function"===typeof define&&define.amd?define(["exports"],e):e(q)})(this,function(q){function e(a){this._targetElement=a;this._options={nextLabel:"Next →",prevLabel:"← Back",skipLabel:"Skip",doneLabel:"Done",tooltipPosition:"bottom",tooltipClass:"",exitOnEsc:!0,exitOnOverlayClick:!0,showStepNumbers:!0,keyboardNavigation:!0,showButtons:!0,showBullets:!0,scrollToElement:!0}}function s(a){if(null==a||"object"!=typeof a||!0===a.hasOwnProperty("nodeName")|| -"undefined"!=typeof a.nodeType)return a;var b={},c;for(c in a)b[c]=s(a[c]);return b}function t(){"undefined"===typeof this._currentStep?this._currentStep=0:++this._currentStep;if(this._introItems.length<=this._currentStep)"function"===typeof this._introCompleteCallback&&this._introCompleteCallback.call(this),u.call(this,this._targetElement);else{var a=this._introItems[this._currentStep];"undefined"!==typeof this._introBeforeChangeCallback&&this._introBeforeChangeCallback.call(this,a.element);z.call(this, -a)}}function x(){if(0===this._currentStep)return!1;var a=this._introItems[--this._currentStep];"undefined"!==typeof this._introBeforeChangeCallback&&this._introBeforeChangeCallback.call(this,a.element);z.call(this,a)}function u(a){var b=a.querySelector(".introjs-overlay");if(null!=b){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.active").className= -"";d.querySelector('.introjs-bullets li > a[data-stepnumber="'+a.step+'"]').className="active";n.style.opacity=1},350)}else{var h=document.createElement("div"),l=document.createElement("div"),g=document.createElement("div"),m=document.createElement("div"),k=document.createElement("div"),e=document.createElement("div");h.className="introjs-helperLayer";w.call(c,h);this._targetElement.appendChild(h);l.className="introjs-arrow";m.className="introjs-tooltiptext";m.innerHTML=a.intro;k.className="introjs-bullets"; -!1===this._options.showBullets&&(k.style.display="none");var q=document.createElement("ul");b=0;for(var v=this._introItems.length;bg)b.className+= -" introjs-fixParent";b=b.parentNode}b=a.element.getBoundingClientRect();!(0<=b.top&&0<=b.left&&b.bottom+80<=window.innerHeight&&b.right<=window.innerWidth)&&!0===this._options.scrollToElement&&(g=a.element.getBoundingClientRect(),b=void 0!=window.innerWidth?window.innerHeight:document.documentElement.clientHeight,l=g.bottom-(g.bottom-g.top),g=g.bottom-b,0>l||a.element.clientHeight>b?window.scrollBy(0,l-30):window.scrollBy(0,g+100));"undefined"!==typeof this._introAfterChangeCallback&&this._introAfterChangeCallback.call(this, -a.element)}function y(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&&c.toLowerCase?c.toLowerCase():c}function C(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 f=p(a);f&&(c+="width: "+f.width+"px; height:"+ -f.height+"px; top:"+f.top+"px;left: "+f.left+"px;",b.setAttribute("style",c))}a.appendChild(b);b.onclick=function(){!0==d._options.exitOnOverlayClick&&(u.call(d,a),void 0!=d._introExitCallback&&d._introExitCallback.call(d))};setTimeout(function(){c+="opacity: .8;";b.setAttribute("style",c)},10);return!0}function p(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 v=function(a){if("object"===typeof a)return new e(a);if("string"===typeof a){if(a=document.querySelector(a))return new e(a);throw Error("There is no element with given selector.");}return new e(document.body)};v.version="0.7.1";v.fn=e.prototype={clone:function(){return new e(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=[],f=0,d=this._options.steps.length;fd.length)break a;f=0;for(e=d.length;f a.active").className="";d.querySelector('.introjs-bullets li > a[data-stepnumber="'+a.step+'"]').className="active";n.style.opacity=1;e.style.opacity=1},350)}else{var j=document.createElement("div"),l=document.createElement("div"),h=document.createElement("div"),m=document.createElement("div"),k=document.createElement("div"),f=document.createElement("div"); +j.className="introjs-helperLayer";w.call(c,j);this._targetElement.appendChild(j);l.className="introjs-arrow";m.className="introjs-tooltiptext";m.innerHTML=a.intro;k.className="introjs-bullets";!1===this._options.showBullets&&(k.style.display="none");var q=document.createElement("ul");b=0;for(var v=this._introItems.length;bh)b.className+=" introjs-fixParent";b=b.parentNode}b=a.element.getBoundingClientRect();!(0<=b.top&&0<=b.left&&b.bottom+80<=window.innerHeight&&b.right<=window.innerWidth)&&!0===this._options.scrollToElement&&(h=a.element.getBoundingClientRect(),b=void 0!=window.innerWidth?window.innerHeight:document.documentElement.clientHeight,l=h.bottom-(h.bottom-h.top),h=h.bottom- +b,0>l||a.element.clientHeight>b?window.scrollBy(0,l-30):window.scrollBy(0,h+100));"undefined"!==typeof this._introAfterChangeCallback&&this._introAfterChangeCallback.call(this,a.element)}function z(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&&c.toLowerCase?c.toLowerCase():c}function D(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 e=p(a);e&&(c+="width: "+e.width+"px; height:"+e.height+"px; top:"+e.top+"px;left: "+e.left+"px;",b.setAttribute("style",c))}a.appendChild(b);b.onclick=function(){!0==d._options.exitOnOverlayClick&&(u.call(d,a),void 0!=d._introExitCallback&&d._introExitCallback.call(d))};setTimeout(function(){c+="opacity: .8;";b.setAttribute("style",c)},10);return!0}function p(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 v=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)};v.version="0.8.0";v.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=[],e=0,d=this._options.steps.length;ed.length)break a;e=0;for(f=d.length;e Date: Tue, 25 Mar 2014 13:46:58 +0430 Subject: [PATCH 08/35] Alter changelog + add v0.8.0 release note --- README.md | 6 +++++- bower.json | 2 +- component.json | 2 +- package.json | 2 +- 4 files changed, 8 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index 35df6ca3d..ae898c914 100644 --- a/README.md +++ b/README.md @@ -375,12 +375,16 @@ Want to learn faster and easier? Here we have **Instant IntroJs**, Packt Publish

    ## Roadmap -- Add introduction without focusing on elements - Fix problems with `position: fixed` and other positions - Provide more examples ## Release History + * **v0.8.0** - 2014-03-25 + - Ability to define introductions without focusing on elements + - Fix Internet Explorer 8.0 issue + - Add `_direction` property + * **v0.7.1** - 2014-03-11 - Fix "Too much recursion" issue with Firefox and Internet Explorer. diff --git a/bower.json b/bower.json index 8b2b91812..77c261b84 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "intro.js", - "version": "0.7.1", + "version": "0.8.0", "description": "A better way for new feature introduction and step-by-step users guide for your website and project.", "keywords": ["demo", "intro", "introduction"], "homepage": "http://usablica.github.com/intro.js/", diff --git a/component.json b/component.json index d1aee3afa..f407d23d6 100644 --- a/component.json +++ b/component.json @@ -2,7 +2,7 @@ "name": "intro.js", "repo": "usablica/intro.js", "description": "Better introductions for websites and features with a step-by-step guide for your projects", - "version": "0.7.1", + "version": "0.8.0", "main": "intro.js", "scripts": [ "intro.js" diff --git a/package.json b/package.json index c8eb9174c..05275bde5 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "Intro.js", "description": "Better introductions for websites and features with a step-by-step guide for your projects", - "version": "0.7.1", + "version": "0.8.0", "author": "Afshin Mehrabani ", "repository": { "type": "git", From 10fab7d91f0ea28e61f32812abb70112ffb3d624 Mon Sep 17 00:00:00 2001 From: Afshin Mehrabani Date: Tue, 25 Mar 2014 16:46:56 +0430 Subject: [PATCH 09/35] Change position of _direction propery --- intro.js | 6 ++++-- minified/intro.min.js | 8 ++++---- 2 files changed, 8 insertions(+), 6 deletions(-) diff --git a/intro.js b/intro.js index 420dcbfbb..505d8fd56 100644 --- a/intro.js +++ b/intro.js @@ -260,6 +260,8 @@ * @method _nextStep */ function _nextStep() { + this._direction = 'forward'; + if (typeof (this._currentStep) === 'undefined') { this._currentStep = 0; } else { @@ -281,7 +283,6 @@ this._introBeforeChangeCallback.call(this, nextStep.element); } - this._direction = 'forward'; _showElement.call(this, nextStep); } @@ -292,6 +293,8 @@ * @method _nextStep */ function _previousStep() { + this._direction = 'backward'; + if (this._currentStep === 0) { return false; } @@ -301,7 +304,6 @@ this._introBeforeChangeCallback.call(this, nextStep.element); } - this._direction = 'backward'; _showElement.call(this, nextStep); } diff --git a/minified/intro.min.js b/minified/intro.min.js index 11719d5cf..934d16cdf 100644 --- a/minified/intro.min.js +++ b/minified/intro.min.js @@ -1,8 +1,8 @@ (function(q,f){"object"===typeof exports?f(exports):"function"===typeof define&&define.amd?define(["exports"],f):f(q)})(this,function(q){function f(a){this._targetElement=a;this._options={nextLabel:"Next →",prevLabel:"← Back",skipLabel:"Skip",doneLabel:"Done",tooltipPosition:"bottom",tooltipClass:"",exitOnEsc:!0,exitOnOverlayClick:!0,showStepNumbers:!0,keyboardNavigation:!0,showButtons:!0,showBullets:!0,scrollToElement:!0}}function s(a){if(null==a||"object"!=typeof a||"undefined"!=typeof a.nodeType)return a; -var b={},c;for(c in a)b[c]=s(a[c]);return b}function t(){"undefined"===typeof this._currentStep?this._currentStep=0:++this._currentStep;if(this._introItems.length<=this._currentStep)"function"===typeof this._introCompleteCallback&&this._introCompleteCallback.call(this),u.call(this,this._targetElement);else{var a=this._introItems[this._currentStep];"undefined"!==typeof this._introBeforeChangeCallback&&this._introBeforeChangeCallback.call(this,a.element);this._direction="forward";A.call(this,a)}}function y(){if(0=== -this._currentStep)return!1;var a=this._introItems[--this._currentStep];"undefined"!==typeof this._introBeforeChangeCallback&&this._introBeforeChangeCallback.call(this,a.element);this._direction="backward";A.call(this,a)}function u(a){var b=a.querySelector(".introjs-overlay");if(null!=b){b.style.opacity=0;setTimeout(function(){b.parentNode&&b.parentNode.removeChild(b)},500);(a=a.querySelector(".introjs-helperLayer"))&&a.parentNode.removeChild(a);(a=document.querySelector(".introjsFloatingElement"))&& -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 Date: Thu, 3 Apr 2014 12:09:49 +0200 Subject: [PATCH 10/35] bugfix: Wrong bullet highlighted When starting introJs at a step != 0 the active bullet was not set correctly (always the first bullet gets active). --- intro.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/intro.js b/intro.js index 505d8fd56..e37dce804 100644 --- a/intro.js +++ b/intro.js @@ -594,7 +594,7 @@ self.goToStep(this.getAttribute('data-stepnumber')); }; - if (i === 0) anchorLink.className = "active"; + if (i === (targetElement.step-1)) anchorLink.className = "active"; anchorLink.href = 'javascript:void(0);'; anchorLink.innerHTML = " "; From 4bfeb1f871b99f562d5e31a15f0902e13b149ee9 Mon Sep 17 00:00:00 2001 From: Johan Persson Date: Fri, 4 Apr 2014 14:47:02 +0200 Subject: [PATCH 11/35] Added new bottom alignment options for the tooltip. --- README.md | 32 ++++++++++++++++---------------- intro.js | 48 +++++++++++++++++++++++++++++++++--------------- introjs.css | 27 ++++++++++++++++++++++----- 3 files changed, 71 insertions(+), 36 deletions(-) diff --git a/README.md b/README.md index ae898c914..005e89002 100644 --- a/README.md +++ b/README.md @@ -21,19 +21,19 @@ Intro.js can be added to your site in three simple steps: **2)** Add `data-intro` and `data-step` to your HTML elements. -For example: +For example: ```html ```` See all attributes [here](https://github.com/usablica/intro.js/#attributes). - + **3)** Call this JavaScript function: ```javascript introJs().start(); ```` - + Optionally, pass one parameter to `introJs` function to limit the presentation section. **For example** `introJs(".introduction-farm").start();` runs the introduction only for elements with `class='introduction-farm'`. @@ -314,7 +314,7 @@ introJs().onafterchange(function(targetElement) { - `data-intro`: The tooltip text of step - `data-step`: Optionally define the number (priority) of step - `data-tooltipClass`: Optionally define a CSS class for tooltip - - `data-position`: Optionally define the position of tooltip, `top`, `left`, `right` or `bottom`. Default is `bottom` + - `data-position`: Optionally define the position of tooltip, `top`, `left`, `right`, `bottom`, `bottom-left-aligned` (same as 'bottom'), 'bottom-middle-aligned' and 'bottom-right-aligned'. Default is `bottom` ###Options: @@ -458,10 +458,10 @@ Want to learn faster and easier? Here we have **Instant IntroJs**, Packt Publish - Fix show element for elements with position `absolute` or `relative` - Add `enter` key for navigating in steps - Code refactoring - - - * **v0.1.0** - 2013-03-16 - - First commit. + + + * **v0.1.0** - 2013-03-16 + - First commit. ## Author **Afshin Mehrabani** @@ -480,15 +480,15 @@ Want to learn faster and easier? Here we have **Instant IntroJs**, Packt Publish ## License > Copyright (C) 2012 Afshin Mehrabani (afshin.meh@gmail.com) -Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated -documentation files (the "Software"), to deal in the Software without restriction, including without limitation -the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, +Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated +documentation files (the "Software"), to deal in the Software without restriction, including without limitation +the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: -The above copyright notice and this permission notice shall be included in all copies or substantial portions +The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. -THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED -TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL -THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF -CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED +TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL +THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF +CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. diff --git a/intro.js b/intro.js index 505d8fd56..05ff0ad36 100644 --- a/intro.js +++ b/intro.js @@ -294,7 +294,7 @@ */ function _previousStep() { this._direction = 'backward'; - + if (this._currentStep === 0) { return false; } @@ -317,7 +317,7 @@ function _exitIntro(targetElement) { //remove overlay layer from the page var overlayLayer = targetElement.querySelector('.introjs-overlay'); - + //return if intro already completed or skipped if (overlayLayer == null) { return; @@ -363,7 +363,7 @@ } else if (document.detachEvent) { //IE document.detachEvent('onkeydown', this._onKeyDown); } - + //set the step to zero this._currentStep = undefined; } @@ -378,6 +378,11 @@ * @param {Object} arrowLayer */ function _placeTooltip(targetElement, tooltipLayer, arrowLayer, helperNumberLayer) { + var tooltipCssClass = '', + currentStepObj, + tooltipOffset, + targetElementOffset; + //reset the old style tooltipLayer.style.top = null; tooltipLayer.style.right = null; @@ -396,10 +401,8 @@ //prevent error when `this._currentStep` is undefined if (!this._introItems[this._currentStep]) return; - var tooltipCssClass = ''; - //if we have a custom css class for each step - var currentStepObj = this._introItems[this._currentStep]; + currentStepObj = this._introItems[this._currentStep]; if (typeof (currentStepObj.tooltipClass) === 'string') { tooltipCssClass = currentStepObj.tooltipClass; } else { @@ -411,7 +414,7 @@ //custom css class for tooltip boxes var tooltipCssClass = this._options.tooltipClass; - var currentTooltipPosition = this._introItems[this._currentStep].position; + currentTooltipPosition = this._introItems[this._currentStep].position; switch (currentTooltipPosition) { case 'top': tooltipLayer.style.left = '15px'; @@ -423,7 +426,7 @@ arrowLayer.className = 'introjs-arrow left'; break; case 'left': - if (this._options.showStepNumbers == true) { + if (this._options.showStepNumbers == true) { tooltipLayer.style.top = '15px'; } tooltipLayer.style.right = (_getOffset(targetElement).width + 20) + 'px'; @@ -433,7 +436,7 @@ arrowLayer.style.display = 'none'; //we have to adjust the top and left of layer manually for intro items without element{ - var tooltipOffset = _getOffset(tooltipLayer); + tooltipOffset = _getOffset(tooltipLayer); tooltipLayer.style.left = '50%'; tooltipLayer.style.top = '50%'; @@ -446,6 +449,21 @@ } break; + case 'bottom-right-aligned': + arrowLayer.className = 'introjs-arrow top-right'; + tooltipLayer.style.right = '0px'; + tooltipLayer.style.bottom = '-' + (_getOffset(tooltipLayer).height + 10) + 'px'; + break; + case 'bottom-middle-aligned': + targetElementOffset = _getOffset(targetElement); + tooltipOffset = _getOffset(tooltipLayer); + + arrowLayer.className = 'introjs-arrow top-middle'; + tooltipLayer.style.left = (targetElementOffset.width/2 - tooltipOffset.width/2) + 'px'; + tooltipLayer.style.bottom = '-' + (tooltipOffset.height + 10) + 'px'; + break; + case 'bottom-left-aligned': + // Bottom-left-aligned is the same as the default bottom case 'bottom': // Bottom going to follow the default behavior default: @@ -467,10 +485,10 @@ //prevent error when `this._currentStep` in undefined if (!this._introItems[this._currentStep]) return; - var currentElement = this._introItems[this._currentStep]; - var elementPosition = _getOffset(currentElement.element); + var currentElement = this._introItems[this._currentStep], + elementPosition = _getOffset(currentElement.element), + widthHeightPadding = 10; - var widthHeightPadding = 10; if (currentElement.position == 'floating') { widthHeightPadding = 0; } @@ -712,14 +730,14 @@ while (parentElm != null) { if (parentElm.tagName.toLowerCase() === 'body') break; - //fix The Stacking Contenxt problem. + //fix The Stacking Contenxt problem. //More detail: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context var zIndex = _getPropValue(parentElm, 'z-index'); var opacity = parseFloat(_getPropValue(parentElm, 'opacity')); if (/[0-9]+/.test(zIndex) || opacity < 1) { parentElm.className += ' introjs-fixParent'; } - + parentElm = parentElm.parentNode; } @@ -738,7 +756,7 @@ window.scrollBy(0, bottom + 100); // 70px + 30px padding from edge to look nice } } - + if (typeof (this._introAfterChangeCallback) !== 'undefined') { this._introAfterChangeCallback.call(this, targetElement.element); } diff --git a/introjs.css b/introjs.css index 760d7d15b..388b50d3d 100644 --- a/introjs.css +++ b/introjs.css @@ -72,7 +72,7 @@ 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.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); } @@ -89,6 +89,23 @@ border-bottom-color:white; border-left-color:transparent; } +.introjs-arrow.top-right { + top: -10px; + right: 10px; + border-top-color:transparent; + border-right-color:transparent; + border-bottom-color:white; + border-left-color:transparent; +} +.introjs-arrow.top-middle { + top: -10px; + left: 50%; + margin-left: -5px; + border-top-color:transparent; + border-right-color:transparent; + border-bottom-color:white; + border-left-color:transparent; +} .introjs-arrow.right { right: -10px; top: 10px; @@ -132,8 +149,8 @@ text-align: right; } -/* - Buttons style by http://nicolasgallagher.com/lab/css3-github-buttons/ +/* + Buttons style by http://nicolasgallagher.com/lab/css3-github-buttons/ Changed by Afshin Mehrabani */ .introjs-button { @@ -170,7 +187,7 @@ .introjs-button:hover { border-color: #bcbcbc; - text-decoration: none; + text-decoration: none; box-shadow: 0px 1px 1px #e3e3e3; } @@ -252,4 +269,4 @@ width: 0; left: 50%; top: 50%; -} \ No newline at end of file +} From 545b8e8c5e1b528187313b64900ba55a2be54063 Mon Sep 17 00:00:00 2001 From: raahede Date: Fri, 25 Apr 2014 13:52:09 +0200 Subject: [PATCH 12/35] Fixing issue where elements won't shine through overlay if their parents have transform applied --- intro.js | 17 +++++++++-------- introjs.css | 15 ++++++++++----- 2 files changed, 19 insertions(+), 13 deletions(-) diff --git a/intro.js b/intro.js index 505d8fd56..b5a949403 100644 --- a/intro.js +++ b/intro.js @@ -294,7 +294,7 @@ */ function _previousStep() { this._direction = 'backward'; - + if (this._currentStep === 0) { return false; } @@ -317,7 +317,7 @@ function _exitIntro(targetElement) { //remove overlay layer from the page var overlayLayer = targetElement.querySelector('.introjs-overlay'); - + //return if intro already completed or skipped if (overlayLayer == null) { return; @@ -363,7 +363,7 @@ } else if (document.detachEvent) { //IE document.detachEvent('onkeydown', this._onKeyDown); } - + //set the step to zero this._currentStep = undefined; } @@ -423,7 +423,7 @@ arrowLayer.className = 'introjs-arrow left'; break; case 'left': - if (this._options.showStepNumbers == true) { + if (this._options.showStepNumbers == true) { tooltipLayer.style.top = '15px'; } tooltipLayer.style.right = (_getOffset(targetElement).width + 20) + 'px'; @@ -712,14 +712,15 @@ while (parentElm != null) { if (parentElm.tagName.toLowerCase() === 'body') break; - //fix The Stacking Contenxt problem. + //fix The Stacking Contenxt problem. //More detail: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context var zIndex = _getPropValue(parentElm, 'z-index'); var opacity = parseFloat(_getPropValue(parentElm, 'opacity')); - if (/[0-9]+/.test(zIndex) || opacity < 1) { + var transform = _getPropValue(parentElm, 'transform') || _getPropValue(parentElm, '-webkit-transform') || _getPropValue(parentElm, '-moz-transform') || _getPropValue(parentElm, '-ms-transform') || _getPropValue(parentElm, '-o-transform'); + if (/[0-9]+/.test(zIndex) || opacity < 1 || transform !== 'none') { parentElm.className += ' introjs-fixParent'; } - + parentElm = parentElm.parentNode; } @@ -738,7 +739,7 @@ window.scrollBy(0, bottom + 100); // 70px + 30px padding from edge to look nice } } - + if (typeof (this._introAfterChangeCallback) !== 'undefined') { this._introAfterChangeCallback.call(this, targetElement.element); } diff --git a/introjs.css b/introjs.css index 760d7d15b..61831bade 100644 --- a/introjs.css +++ b/introjs.css @@ -22,6 +22,11 @@ .introjs-fixParent { z-index: auto !important; opacity: 1.0 !important; + -webkit-transform: none !important; + -moz-transform: none !important; + -ms-transform: none !important; + -o-transform: none !important; + transform: none !important; } .introjs-showElement { @@ -72,7 +77,7 @@ 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.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); } @@ -132,8 +137,8 @@ text-align: right; } -/* - Buttons style by http://nicolasgallagher.com/lab/css3-github-buttons/ +/* + Buttons style by http://nicolasgallagher.com/lab/css3-github-buttons/ Changed by Afshin Mehrabani */ .introjs-button { @@ -170,7 +175,7 @@ .introjs-button:hover { border-color: #bcbcbc; - text-decoration: none; + text-decoration: none; box-shadow: 0px 1px 1px #e3e3e3; } @@ -252,4 +257,4 @@ width: 0; left: 50%; top: 50%; -} \ No newline at end of file +} From 9bb7f196699834b72d357e07090b7c87f9414205 Mon Sep 17 00:00:00 2001 From: Jesse Piascik Date: Fri, 25 Apr 2014 11:54:25 -0500 Subject: [PATCH 13/35] Add opacity option --- intro.js | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/intro.js b/intro.js index 505d8fd56..6fccd5e2a 100644 --- a/intro.js +++ b/intro.js @@ -55,7 +55,9 @@ /* Show tour bullets? */ showBullets: true, /* Scroll to highlighted element? */ - scrollToElement: true + scrollToElement: true, + /* Set the overlay opacity */ + overlayOpacity: .8 }; } @@ -554,7 +556,7 @@ //show the tooltip oldtooltipContainer.style.opacity = 1; - oldHelperNumberLayer.style.opacity = 1; + if (oldHelperNumberLayer) oldHelperNumberLayer.style.opacity = 1; }, 350); } else { @@ -848,9 +850,10 @@ }; setTimeout(function() { - styleText += 'opacity: .8;'; + styleText += 'opacity: ' + self._options.overlayOpacity.toString() + ';'; overlayLayer.setAttribute('style', styleText); }, 10); + return true; } From 07bed11f25f605e63fe0b3700b4eb13fa7aff838 Mon Sep 17 00:00:00 2001 From: Jesse Piascik Date: Fri, 25 Apr 2014 12:12:22 -0500 Subject: [PATCH 14/35] Add minified js --- minified/intro.min.js | 52 +++++++++++++++++++++---------------------- 1 file changed, 26 insertions(+), 26 deletions(-) diff --git a/minified/intro.min.js b/minified/intro.min.js index 934d16cdf..a99c7930b 100644 --- a/minified/intro.min.js +++ b/minified/intro.min.js @@ -1,26 +1,26 @@ -(function(q,f){"object"===typeof exports?f(exports):"function"===typeof define&&define.amd?define(["exports"],f):f(q)})(this,function(q){function f(a){this._targetElement=a;this._options={nextLabel:"Next →",prevLabel:"← Back",skipLabel:"Skip",doneLabel:"Done",tooltipPosition:"bottom",tooltipClass:"",exitOnEsc:!0,exitOnOverlayClick:!0,showStepNumbers:!0,keyboardNavigation:!0,showButtons:!0,showBullets:!0,scrollToElement:!0}}function s(a){if(null==a||"object"!=typeof a||"undefined"!=typeof a.nodeType)return a; -var b={},c;for(c in a)b[c]=s(a[c]);return b}function t(){this._direction="forward";"undefined"===typeof this._currentStep?this._currentStep=0:++this._currentStep;if(this._introItems.length<=this._currentStep)"function"===typeof this._introCompleteCallback&&this._introCompleteCallback.call(this),u.call(this,this._targetElement);else{var a=this._introItems[this._currentStep];"undefined"!==typeof this._introBeforeChangeCallback&&this._introBeforeChangeCallback.call(this,a.element);A.call(this,a)}}function y(){this._direction= -"backward";if(0===this._currentStep)return!1;var a=this._introItems[--this._currentStep];"undefined"!==typeof this._introBeforeChangeCallback&&this._introBeforeChangeCallback.call(this,a.element);A.call(this,a)}function u(a){var b=a.querySelector(".introjs-overlay");if(null!=b){b.style.opacity=0;setTimeout(function(){b.parentNode&&b.parentNode.removeChild(b)},500);(a=a.querySelector(".introjs-helperLayer"))&&a.parentNode.removeChild(a);(a=document.querySelector(".introjsFloatingElement"))&&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.active").className="";d.querySelector('.introjs-bullets li > a[data-stepnumber="'+a.step+'"]').className="active";n.style.opacity=1;e.style.opacity=1},350)}else{var j=document.createElement("div"),l=document.createElement("div"),h=document.createElement("div"),m=document.createElement("div"),k=document.createElement("div"),f=document.createElement("div"); -j.className="introjs-helperLayer";w.call(c,j);this._targetElement.appendChild(j);l.className="introjs-arrow";m.className="introjs-tooltiptext";m.innerHTML=a.intro;k.className="introjs-bullets";!1===this._options.showBullets&&(k.style.display="none");var q=document.createElement("ul");b=0;for(var v=this._introItems.length;bh)b.className+=" introjs-fixParent";b=b.parentNode}b=a.element.getBoundingClientRect();!(0<=b.top&&0<=b.left&&b.bottom+80<=window.innerHeight&&b.right<=window.innerWidth)&&!0===this._options.scrollToElement&&(h=a.element.getBoundingClientRect(),b=void 0!=window.innerWidth?window.innerHeight:document.documentElement.clientHeight,l=h.bottom-(h.bottom-h.top),h=h.bottom- -b,0>l||a.element.clientHeight>b?window.scrollBy(0,l-30):window.scrollBy(0,h+100));"undefined"!==typeof this._introAfterChangeCallback&&this._introAfterChangeCallback.call(this,a.element)}function z(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&&c.toLowerCase?c.toLowerCase():c}function D(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 e=p(a);e&&(c+="width: "+e.width+"px; height:"+e.height+"px; top:"+e.top+"px;left: "+e.left+"px;",b.setAttribute("style",c))}a.appendChild(b);b.onclick=function(){!0==d._options.exitOnOverlayClick&&(u.call(d,a),void 0!=d._introExitCallback&&d._introExitCallback.call(d))};setTimeout(function(){c+="opacity: .8;";b.setAttribute("style",c)},10);return!0}function p(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 v=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)};v.version="0.8.0";v.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=[],e=0,d=this._options.steps.length;ed.length)break a;e=0;for(f=d.length;ed.length)return!1; +f=0;for(l=d.length;f a.active").className="";c.querySelector('.introjs-bullets li > a[data-stepnumber="'+a.step+'"]').className="active";h.style.opacity=1;d&&(d.style.opacity=1)},350)}else{var g=document.createElement("div"),p=document.createElement("div"),m=document.createElement("div"),q=document.createElement("div"),n=document.createElement("div"),k=document.createElement("div"); +g.className="introjs-helperLayer";y.call(b,g);this._targetElement.appendChild(g);p.className="introjs-arrow";q.className="introjs-tooltiptext";q.innerHTML=a.intro;n.className="introjs-bullets";!1===this._options.showBullets&&(n.style.display="none");for(var s=document.createElement("ul"),e=0,x=this._introItems.length;em)e.className+=" introjs-fixParent";e=e.parentNode}G(a.element)||!0!==this._options.scrollToElement||(m=a.element.getBoundingClientRect(),e=H().height,p=m.bottom-(m.bottom-m.top),m=m.bottom-e,0>p||a.element.clientHeight>e?window.scrollBy(0,p-30):window.scrollBy(0,m+100));"undefined"!==typeof this._introAfterChangeCallback&&this._introAfterChangeCallback.call(this,a.element)} +function B(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&&c.toLowerCase?c.toLowerCase():c}function H(){if(void 0!=window.innerWidth)return{width:window.innerWidth,height:window.innerHeight};var a=document.documentElement;return{width:a.clientWidth,height:a.clientHeight}}function G(a){a=a.getBoundingClientRect();return 0<=a.top&&0<=a.left&&a.bottom+80<=window.innerHeight&& +a.right<=window.innerWidth}function F(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 f=r(a);f&&(c+="width: "+f.width+"px; height:"+f.height+"px; top:"+f.top+"px;left: "+f.left+"px;",b.setAttribute("style",c))}a.appendChild(b);b.onclick=function(){!0==d._options.exitOnOverlayClick&&(w.call(d,a),void 0!=d._introExitCallback&&d._introExitCallback.call(d))}; +setTimeout(function(){c+="opacity: "+d._options.overlayOpacity.toString()+";";b.setAttribute("style",c)},10);return!0}function r(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 x=function(a){if("object"===typeof a)return new k(a);if("string"===typeof a){if(a=document.querySelector(a))return new k(a);throw Error("There is no element with given selector."); +}return new k(document.body)};x.version="0.8.0";x.fn=k.prototype={clone:function(){return new k(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(){E.call(this,this._targetElement);return this},goToStep:function(a){this._currentStep=a-2;"undefined"!==typeof this._introItems&&v.call(this);return this},nextStep:function(){v.call(this);return this},previousStep:function(){A.call(this); +return this},exit:function(){w.call(this,this._targetElement)},refresh:function(){y.call(this,document.querySelector(".introjs-helperLayer"));return this},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},onafterchange:function(a){if("function"=== +typeof a)this._introAfterChangeCallback=a;else throw Error("Provided callback for onafterchange 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 s.introJs=x}); From aa05cff700ade06655223e54d6bd38898ccf70bf Mon Sep 17 00:00:00 2001 From: Jesse Piascik Date: Fri, 25 Apr 2014 12:20:37 -0500 Subject: [PATCH 15/35] Add overlayOpacity option to readme --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index ae898c914..3ec64e26b 100644 --- a/README.md +++ b/README.md @@ -332,6 +332,7 @@ introJs().onafterchange(function(targetElement) { - `showButtons`: Show introduction navigation buttons or not, `true` or `false` - `showBullets`: Show introduction bullets or not, `true` or `false` - `scrollToElement`: Auto scroll to highlighted element if it's outside of viewport, `true` or `false` + - `overlayOpacity`: Adjust the overlay opacity, `Number` See [setOption](https://github.com/usablica/intro.js/#introjssetoptionoption-value) to see an example. From 37839d34fefaa04d0efe8d75a19f02296e9d1273 Mon Sep 17 00:00:00 2001 From: raahede Date: Fri, 9 May 2014 15:35:00 +0200 Subject: [PATCH 16/35] Adding z-index and position:relative to children of highlighted table row --- introjs.css | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/introjs.css b/introjs.css index 760d7d15b..ae67d1588 100644 --- a/introjs.css +++ b/introjs.css @@ -24,11 +24,15 @@ opacity: 1.0 !important; } -.introjs-showElement { +.introjs-showElement, +tr.introjs-showElement > td, +tr.introjs-showElement > th { z-index: 9999999 !important; } -.introjs-relativePosition { +.introjs-relativePosition, +tr.introjs-showElement > td, +tr.introjs-showElement > th { position: relative; } @@ -252,4 +256,4 @@ width: 0; left: 50%; top: 50%; -} \ No newline at end of file +} From 97dc52826d23bb8a45b683009be5eb7073b0328f Mon Sep 17 00:00:00 2001 From: afc163 Date: Mon, 19 May 2014 20:17:33 +0800 Subject: [PATCH 17/35] Add spm support --- .spmignore | 3 +++ package.json | 6 +++++- 2 files changed, 8 insertions(+), 1 deletion(-) create mode 100644 .spmignore diff --git a/.spmignore b/.spmignore new file mode 100644 index 000000000..a7ee03466 --- /dev/null +++ b/.spmignore @@ -0,0 +1,3 @@ +BUILD +example +minified diff --git a/package.json b/package.json index 05275bde5..4707fb739 100644 --- a/package.json +++ b/package.json @@ -13,5 +13,9 @@ "engine": [ "node >=0.1.90" ], - "main": "intro.js" + "main": "intro.js", + "spm": { + "main": "intro.js", + "output": ["introjs.css"] + } } From 00ff1dd16a741a427cd3b35c41cccfdb804cacd1 Mon Sep 17 00:00:00 2001 From: Afshin Mehrabani Date: Fri, 23 May 2014 19:01:09 +0430 Subject: [PATCH 18/35] Add using introjs templates manual --- README.md | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/README.md b/README.md index e4e48b755..623c8e517 100644 --- a/README.md +++ b/README.md @@ -40,6 +40,20 @@ Optionally, pass one parameter to `introJs` function to limit the presentation s

    +## Using templates + +IntroJS provides awesome templates and we are trying to update and add more templates for next versions. You can browse all templates here: https://github.com/usablica/intro.js/wiki/IntroJs-templates + +In order to use templates, all you need to do is appending the template stylesheet to your page, *after* IntroJS CSS file: + +```html + + + + + +``` + ## API ###introJs([targetElm]) From 6b4d419e11406019ddad9d0206af8cd5f888d900 Mon Sep 17 00:00:00 2001 From: Afshin Mehrabani Date: Fri, 23 May 2014 19:06:37 +0430 Subject: [PATCH 19/35] Add v0.9.0 changeset --- README.md | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/README.md b/README.md index 623c8e517..13523d062 100644 --- a/README.md +++ b/README.md @@ -392,9 +392,15 @@ Want to learn faster and easier? Here we have **Instant IntroJs**, Packt Publish ## Roadmap - Fix problems with `position: fixed` and other positions - Provide more examples +- Add more templates ## Release History + * **v0.9.0** - 2014-05-23 + - Add IntroJS templates + - Add more tooltip positions (bottom-right, bottom-middle, bottom-left) + - Fix table `tr` element's issue + * **v0.8.0** - 2014-03-25 - Ability to define introductions without focusing on elements - Fix Internet Explorer 8.0 issue From 0c1b941571b9e9648f4183ee9366dc570da200cc Mon Sep 17 00:00:00 2001 From: Afshin Mehrabani Date: Fri, 23 May 2014 19:12:02 +0430 Subject: [PATCH 20/35] Add introjs templates <3 --- intro.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/intro.js b/intro.js index f80c17a4c..dcbce5317 100644 --- a/intro.js +++ b/intro.js @@ -437,7 +437,7 @@ case 'floating': arrowLayer.style.display = 'none'; - //we have to adjust the top and left of layer manually for intro items without element{ + //we have to adjust the top and left of layer manually for intro items without element tooltipOffset = _getOffset(tooltipLayer); tooltipLayer.style.left = '50%'; @@ -452,16 +452,16 @@ break; case 'bottom-right-aligned': - arrowLayer.className = 'introjs-arrow top-right'; - tooltipLayer.style.right = '0px'; + arrowLayer.className = 'introjs-arrow top-right'; + tooltipLayer.style.right = '0px'; tooltipLayer.style.bottom = '-' + (_getOffset(tooltipLayer).height + 10) + 'px'; break; case 'bottom-middle-aligned': targetElementOffset = _getOffset(targetElement); - tooltipOffset = _getOffset(tooltipLayer); + tooltipOffset = _getOffset(tooltipLayer); - arrowLayer.className = 'introjs-arrow top-middle'; - tooltipLayer.style.left = (targetElementOffset.width/2 - tooltipOffset.width/2) + 'px'; + arrowLayer.className = 'introjs-arrow top-middle'; + tooltipLayer.style.left = (targetElementOffset.width / 2 - tooltipOffset.width / 2) + 'px'; tooltipLayer.style.bottom = '-' + (tooltipOffset.height + 10) + 'px'; break; case 'bottom-left-aligned': From f571aad7ddbe93e9cef5e8195548679250c340d6 Mon Sep 17 00:00:00 2001 From: Afshin Mehrabani Date: Fri, 23 May 2014 19:14:07 +0430 Subject: [PATCH 21/35] add template folder --- themes/introjs-nassim.css | 288 +++++++++++++++++++++++++++++++++++++ themes/introjs-nazanin.css | 257 +++++++++++++++++++++++++++++++++ themes/introjs-royal.css | 274 +++++++++++++++++++++++++++++++++++ 3 files changed, 819 insertions(+) create mode 100644 themes/introjs-nassim.css create mode 100644 themes/introjs-nazanin.css create mode 100644 themes/introjs-royal.css diff --git a/themes/introjs-nassim.css b/themes/introjs-nassim.css new file mode 100644 index 000000000..2045b78ed --- /dev/null +++ b/themes/introjs-nassim.css @@ -0,0 +1,288 @@ +.introjs-overlay { + position: absolute; + z-index: 999999; + background: #181818; + opacity: 0; + + -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; + opacity: 1.0 !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: 2px solid rgba(117, 117, 117, 1); + border-radius: 4px; + box-shadow: 0 5px 8px -3px rgba(0,0,0,.6); + -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: -9px; + z-index: 9999999999 !important; + padding: 2px; + font-family: Arial, verdana, tahoma; + font-size: 13px; + font-weight: bold; + color: #fff; /* Old browsers */ /* Chrome10+,Safari5.1+ */ + background: #DA4433; + width: 20px; + box-shadow: 0 1px 1px rgba(0,0,0,.35); + height:20px; + text-align: center; + line-height: 20px; + border: 2px solid #DA4433; + border-radius: 0; /* IE6-9 */ /* IE10 text shadows */ +} + +.introjs-helperNumberLayer:after { + content:""; + width:0; + height:0; + position:absolute; + content:0; + left:-3px; + bottom:-10px; + border:4px solid transparent; + border-right-color:#900; + border-top-color:#900; +} + +.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: #ecf0f1; + 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:#ecf0f1; +} +.introjs-arrow.bottom { + bottom: -10px; + border-top-color:#ecf0f1; + 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: #ecf0f1; + border-bottom-color:transparent; + border-left-color:transparent; +} + +.introjs-tooltip { + position: absolute; + padding: 10px 10px; + background-color: #ecf0f1; + min-width: 200px; + max-width: 300px; + border-radius: 3px; + /* border-radius: 3px; */ + /* box-shadow: 0 6px 7px -4px 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; + /* border: 5px double #0787AF; */ +} + +.introjs-tooltiptext { + margin-left: -10px; + + margin-right: -10px; + /* border-top: 1px solid #FFFFFF; */ + /* background: #FAFAFA; */ + color: #2c3e50; + padding: 25px 30px 15px; + /* border-bottom: 1px solid #FFFFFF; */ +} + +.introjs-tooltipbuttons { + text-align: center; + /* background: rgba(0, 0, 0, 0.06); */ + border-radius: 0 0 8px 8px; + padding-bottom: 10px; +} + +/* + 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.5em 0.8em; + /* box-shadow: 0 2px 0px -0px #306588; */ + margin: 0; + outline: none; + border: 2px solid; + background: transparent; + text-decoration: none; + font: 11px/normal sans-serif; + color: ##2980b9 !important; + white-space: nowrap; + cursor: pointer; + outline: none !important; + -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; + transition:all 0.25s ease; + -webkit-transition:all 0.25s ease; + -moz-transition:all 0.25s ease; + -ms-transition:all 0.25s ease; + -o-transition:all 0.25s ease; +} + +.introjs-button:hover { + color: #fff; + background: #2671A2; + text-decoration: none; + border-color: #235677; +} + +.introjs-button:focus, +.introjs-button:active { + background: #23587A; text-decoration: none; + color: #fff; + /* bottom: -1px; */ + box-shadow: none; + border-color: #173B53; +} + +/* overrides extra padding on button elements in Firefox */ +.introjs-button::-moz-focus-inner { + padding: 0; + border: 0; +} + +.introjs-skipbutton { + margin-right: 5px; + color: #c00; + background: transparent; +} + +.introjs-skipbutton:hover { + background: #EB1540; + border-color: #B91D0D; + +} + +.introjs-skipbutton:active, .introjs-skipbutton:focus { + background: #C02312; + /* box-shadow: 0 1px 0px -0px #6F1309; */ + +} + +.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: #C2C2C2 !important; + border-color: #d4d4d4; + cursor: default; + /* box-shadow: 0 2px 0px -0px #CACED1; */ + background-color: #E6E6E6; + background-image: none; + text-decoration: none; +} + +.introjs-bullets { + text-align: center; + position: absolute; + left: 0; + right: 0; + top: -5px; +} +.introjs-bullets ul { + clear: both; + margin: 15px auto 0; + padding: 0; + display: inline-block; +} +.introjs-bullets ul li { + list-style: none; + float: left; + margin: 0 2px; +} +.introjs-bullets ul li a { + display: block; + width: 6px; + height: 6px; + background: #ccc; + border-radius: 10px; + -moz-border-radius: 10px; + -webkit-border-radius: 10px; + text-decoration: none; +} +.introjs-bullets ul li a:hover { + background: #999; +} +.introjs-bullets ul li a.active { + background: #999; +} +.introjsFloatingElement { + position: absolute; + height: 0; + width: 0; + left: 50%; + top: 50%; +} \ No newline at end of file diff --git a/themes/introjs-nazanin.css b/themes/introjs-nazanin.css new file mode 100644 index 000000000..65f6b5356 --- /dev/null +++ b/themes/introjs-nazanin.css @@ -0,0 +1,257 @@ +.introjs-overlay { + position: absolute; + z-index: 999999; + background: #525252; + opacity: 0; + + -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; + opacity: 1.0 !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: 3px solid rgba(211, 214, 209, 1); + border-radius: 0; + box-shadow: 0 5px 8px -3px rgba(0,0,0,.6); + -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; /* Old browsers */ /* Chrome10+,Safari5.1+ */ + background:#ff3019 ; + width: 20px; + height:20px; + text-align: center; + line-height: 20px; + border: 3px solid #DA4433; + border-radius: 10px 10px 0; /* IE6-9 */ /* IE10 text shadows */ +} + +.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: #ecf0f1; + 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:#ecf0f1; +} +.introjs-arrow.bottom { + bottom: -10px; + border-top-color:#ecf0f1; + 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: #ecf0f1; + border-bottom-color:transparent; + border-left-color:transparent; +} + +.introjs-tooltip { + position: absolute; + padding: 10px; + background-color: #ecf0f1; + min-width: 200px; + max-width: 300px; + /* border-radius: 3px; */ + box-shadow: 0 6px 7px -4px 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-tooltiptext { + margin-left: -10px; + + margin-right: -10px; + border-top: 1px solid #FFFFFF; + background: #FAFAFA; + color: #2c3e50; + padding: 5px 10px; + border-bottom: 1px solid #FFFFFF; +} + +.introjs-tooltipbuttons { + text-align: center; +} + +/* + 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.5em 0.8em; + box-shadow: 0 2px 0px -0px #306588; + margin: 0; + outline: none; + background: #2980b9; + text-decoration: none; + font: 11px/normal sans-serif; + color: #fff !important; + white-space: nowrap; + cursor: pointer; + outline: none !important; + -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 { + color: #fff; + background: #2671A2; + text-decoration: none; + box-shadow: 0 2px 0px -0px #235677; +} + +.introjs-button:focus, +.introjs-button:active { + background: #23587A; text-decoration: none; + /* bottom: -1px; */ + box-shadow: 0 2px 0px 0px #173B53; +} + +/* overrides extra padding on button elements in Firefox */ +.introjs-button::-moz-focus-inner { + padding: 0; + border: 0; +} + +.introjs-skipbutton { + margin-right: 5px; + color: #fff; + background: #e74c3c; + box-shadow: 0 2px 0px -0px #B91D0D; +} + +.introjs-skipbutton:hover { + background: #EB1540; box-shadow: 0 2px 0px -0px #B91D0D; + +} + +.introjs-skipbutton:active, .introjs-skipbutton:focus { + background: #C02312; + box-shadow: 0 1px 0px -0px #6F1309; + +} + +.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: #C2C2C2 !important; + border-color: #d4d4d4; + cursor: default; + box-shadow: 0 2px 0px -0px #CACED1; + background-color: #E6E6E6; + background-image: none; + text-decoration: none; +} + +.introjs-bullets { + text-align: center; +} +.introjs-bullets ul { + clear: both; + margin: 15px auto 0; + padding: 0; + display: inline-block; +} +.introjs-bullets ul li { + list-style: none; + float: left; + margin: 0 2px; +} +.introjs-bullets ul li a { + display: block; + width: 6px; + height: 6px; + background: #ccc; + border-radius: 10px; + -moz-border-radius: 10px; + -webkit-border-radius: 10px; + text-decoration: none; +} +.introjs-bullets ul li a:hover { + background: #999; +} +.introjs-bullets ul li a.active { + background: #999; +} +.introjsFloatingElement { + position: absolute; + height: 0; + width: 0; + left: 50%; + top: 50%; +} \ No newline at end of file diff --git a/themes/introjs-royal.css b/themes/introjs-royal.css new file mode 100644 index 000000000..ee85d9d17 --- /dev/null +++ b/themes/introjs-royal.css @@ -0,0 +1,274 @@ +.introjs-overlay { + position: absolute; + z-index: 999999; + background: #525252; + opacity: 0; + + -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; + opacity: 1.0 !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: 3px solid rgba(255, 255, 255, 1); + border-radius: 0; + box-shadow: 0 8px 50px -10px rgba(0,0,0,.6); + -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: -29px; + left: -29px; + z-index: 9999999999 !important; + padding: 3px; + font-family: Arial, verdana, tahoma; + font-size: 13px; + font-weight: bold; + color: #DA4433; /* Old browsers */ /* Chrome10+,Safari5.1+ */ + background: #FFFFFF; + width: 20px; + height:20px; + text-align: center; + line-height: 20px; + border: 3px solid #DA4433; + border-right: none; + border-bottom: none; /* IE6-9 */ /* IE10 text shadows */ + border-radius: 10px 0 0 0; +} + +.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: #ecf0f1; + border-left-color:transparent; + display: none !important; +} +.introjs-arrow.right { + right: -10px; + top: 10px; + border-top-color:transparent; + border-right-color:transparent; + border-bottom-color:transparent; + border-left-color:#ecf0f1; +} +.introjs-arrow.bottom { + bottom: -10px; + border-top-color:#ecf0f1; + 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: #ecf0f1; + border-bottom-color:transparent; + border-left-color:transparent; +} + +.introjs-tooltip { + position: fixed; + padding: 10px 170px 30px 10px; + background-color: #ecf0f1; + min-width: 200px; + max-width: 300px; + /* border-radius: 3px; */ + border-top: 3px solid #236591; + box-shadow: 0 -6px 50px -4px 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; + bottom: 0 !important; + left: 0 !Important; + top: initial !important; + right: 0 !Important; + max-width: initial; + width: auto !important; +} + +.introjs-tooltiptext { + margin-left: -10px; + + margin-right: -10px; + /* border-top: 1px solid #FFFFFF; */ + /* background: #FAFAFA; */ + color: #2c3e50; + padding: 5px 10px; + /* border-bottom: 1px solid #FFFFFF; */ +} + +.introjs-tooltipbuttons { + text-align: center; + position: absolute; + right: 10px; + top: 0; +} + +/* + 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.5em 0.8em; + box-shadow: 0 2px 0px -0px #306588; + margin: 0; + outline: none; + background: #2980b9; + text-decoration: none; + font: 11px/normal sans-serif; + color: #fff !important; + white-space: nowrap; + cursor: pointer; + outline: none !important; + -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 { + color: #fff; + background: #2671A2; + text-decoration: none; + box-shadow: 0 2px 0px -0px #235677; +} + +.introjs-button:focus, +.introjs-button:active { + background: #23587A; text-decoration: none; + /* bottom: -1px; */ + box-shadow: 0 2px 0px 0px #173B53; +} + +/* overrides extra padding on button elements in Firefox */ +.introjs-button::-moz-focus-inner { + padding: 0; + border: 0; +} + +.introjs-skipbutton { + margin-right: 5px; + color: #fff; + background: #e74c3c; + box-shadow: 0 2px 0px -0px #B91D0D; +} + +.introjs-skipbutton:hover { + background: #EB1540; box-shadow: 0 2px 0px -0px #B91D0D; + +} + +.introjs-skipbutton:active, .introjs-skipbutton:focus { + background: #C02312; + box-shadow: 0 1px 0px -0px #6F1309; + +} + +.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: #C2C2C2 !important; + border-color: #d4d4d4; + cursor: default; + box-shadow: 0 2px 0px -0px #CACED1; + background-color: #E6E6E6; + background-image: none; + text-decoration: none; +} + +.introjs-bullets { + text-align: center; + float: right; + position: absolute; + right: 10px; + bottom: 10px; +} +.introjs-bullets ul { + clear: both; + margin: 15px auto 0; + padding: 0; + display: inline-block; +} +.introjs-bullets ul li { + list-style: none; + float: left; + margin: 0 2px; +} +.introjs-bullets ul li a { + display: block; + width: 6px; + height: 6px; + background: #ccc; + border-radius: 10px; + -moz-border-radius: 10px; + -webkit-border-radius: 10px; + text-decoration: none; +} +.introjs-bullets ul li a:hover { + background: #999; +} +.introjs-bullets ul li a.active { + background: #999; +} +.introjsFloatingElement { + position: absolute; + height: 0; + width: 0; + left: 50%; + top: 50%; +} \ No newline at end of file From 8e8356ac2d20f1785963b5570864c99fe1e1407a Mon Sep 17 00:00:00 2001 From: Afshin Mehrabani Date: Fri, 23 May 2014 19:16:16 +0430 Subject: [PATCH 22/35] change version to v0.9.0 :beers: --- bower.json | 2 +- component.json | 2 +- package.json | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/bower.json b/bower.json index 77c261b84..747ddbec0 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "intro.js", - "version": "0.8.0", + "version": "0.9.0", "description": "A better way for new feature introduction and step-by-step users guide for your website and project.", "keywords": ["demo", "intro", "introduction"], "homepage": "http://usablica.github.com/intro.js/", diff --git a/component.json b/component.json index f407d23d6..a52ec66b8 100644 --- a/component.json +++ b/component.json @@ -2,7 +2,7 @@ "name": "intro.js", "repo": "usablica/intro.js", "description": "Better introductions for websites and features with a step-by-step guide for your projects", - "version": "0.8.0", + "version": "0.9.0", "main": "intro.js", "scripts": [ "intro.js" diff --git a/package.json b/package.json index 4707fb739..6d7d4104b 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "Intro.js", "description": "Better introductions for websites and features with a step-by-step guide for your projects", - "version": "0.8.0", + "version": "0.9.0", "author": "Afshin Mehrabani ", "repository": { "type": "git", From e7ec9a237eb66cc2a4112b29012eb05f51533e2d Mon Sep 17 00:00:00 2001 From: Afshin Mehrabani Date: Fri, 23 May 2014 19:21:22 +0430 Subject: [PATCH 23/35] add latest minified versions --- minified/intro.min.js | 51 ++++++++++++++++++++-------------------- minified/introjs.min.css | 2 +- 2 files changed, 27 insertions(+), 26 deletions(-) diff --git a/minified/intro.min.js b/minified/intro.min.js index a99c7930b..75a371648 100644 --- a/minified/intro.min.js +++ b/minified/intro.min.js @@ -1,26 +1,27 @@ -(function(s,k){"object"===typeof exports?k(exports):"function"===typeof define&&define.amd?define(["exports"],k):k(s)})(this,function(s){function k(a){this._targetElement=a;this._options={nextLabel:"Next →",prevLabel:"← Back",skipLabel:"Skip",doneLabel:"Done",tooltipPosition:"bottom",tooltipClass:"",exitOnEsc:!0,exitOnOverlayClick:!0,showStepNumbers:!0,keyboardNavigation:!0,showButtons:!0,showBullets:!0,scrollToElement:!0,overlayOpacity:0.8}}function E(a){var b=[],c=this;if(this._options.steps)for(var d= -[],f=0,d=this._options.steps.length;fd.length)return!1; -f=0;for(l=d.length;f a.active").className="";c.querySelector('.introjs-bullets li > a[data-stepnumber="'+a.step+'"]').className="active";h.style.opacity=1;d&&(d.style.opacity=1)},350)}else{var g=document.createElement("div"),p=document.createElement("div"),m=document.createElement("div"),q=document.createElement("div"),n=document.createElement("div"),k=document.createElement("div"); -g.className="introjs-helperLayer";y.call(b,g);this._targetElement.appendChild(g);p.className="introjs-arrow";q.className="introjs-tooltiptext";q.innerHTML=a.intro;n.className="introjs-bullets";!1===this._options.showBullets&&(n.style.display="none");for(var s=document.createElement("ul"),e=0,x=this._introItems.length;em)e.className+=" introjs-fixParent";e=e.parentNode}G(a.element)||!0!==this._options.scrollToElement||(m=a.element.getBoundingClientRect(),e=H().height,p=m.bottom-(m.bottom-m.top),m=m.bottom-e,0>p||a.element.clientHeight>e?window.scrollBy(0,p-30):window.scrollBy(0,m+100));"undefined"!==typeof this._introAfterChangeCallback&&this._introAfterChangeCallback.call(this,a.element)} -function B(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&&c.toLowerCase?c.toLowerCase():c}function H(){if(void 0!=window.innerWidth)return{width:window.innerWidth,height:window.innerHeight};var a=document.documentElement;return{width:a.clientWidth,height:a.clientHeight}}function G(a){a=a.getBoundingClientRect();return 0<=a.top&&0<=a.left&&a.bottom+80<=window.innerHeight&& -a.right<=window.innerWidth}function F(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 f=r(a);f&&(c+="width: "+f.width+"px; height:"+f.height+"px; top:"+f.top+"px;left: "+f.left+"px;",b.setAttribute("style",c))}a.appendChild(b);b.onclick=function(){!0==d._options.exitOnOverlayClick&&(w.call(d,a),void 0!=d._introExitCallback&&d._introExitCallback.call(d))}; -setTimeout(function(){c+="opacity: "+d._options.overlayOpacity.toString()+";";b.setAttribute("style",c)},10);return!0}function r(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 x=function(a){if("object"===typeof a)return new k(a);if("string"===typeof a){if(a=document.querySelector(a))return new k(a);throw Error("There is no element with given selector."); -}return new k(document.body)};x.version="0.8.0";x.fn=k.prototype={clone:function(){return new k(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(){E.call(this,this._targetElement);return this},goToStep:function(a){this._currentStep=a-2;"undefined"!==typeof this._introItems&&v.call(this);return this},nextStep:function(){v.call(this);return this},previousStep:function(){A.call(this); -return this},exit:function(){w.call(this,this._targetElement)},refresh:function(){y.call(this,document.querySelector(".introjs-helperLayer"));return this},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},onafterchange:function(a){if("function"=== -typeof a)this._introAfterChangeCallback=a;else throw Error("Provided callback for onafterchange 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 s.introJs=x}); +this._currentStep=void 0}}function B(a,b,c,d){var e="";b.style.top=null;b.style.right=null;b.style.bottom=null;b.style.left=null;b.style.marginLeft=null;b.style.marginTop=null;c.style.display="inherit";"undefined"!=typeof d&&null!=d&&(d.style.top=null,d.style.left=null);if(this._introItems[this._currentStep])switch(e=this._introItems[this._currentStep],e="string"===typeof e.tooltipClass?e.tooltipClass:this._options.tooltipClass,b.className=("introjs-tooltip "+e).replace(/^\s+|\s+$/g,""),currentTooltipPosition= +this._introItems[this._currentStep].position,currentTooltipPosition){case "top":b.style.left="15px";b.style.top="-"+(h(b).height+10)+"px";c.className="introjs-arrow bottom";break;case "right":b.style.left=h(a).width+20+"px";c.className="introjs-arrow left";break;case "left":!0==this._options.showStepNumbers&&(b.style.top="15px");b.style.right=h(a).width+20+"px";c.className="introjs-arrow right";break;case "floating":c.style.display="none";a=h(b);b.style.left="50%";b.style.top="50%";b.style.marginLeft= +"-"+a.width/2+"px";b.style.marginTop="-"+a.height/2+"px";"undefined"!=typeof d&&null!=d&&(d.style.left="-"+(a.width/2+18)+"px",d.style.top="-"+(a.height/2+18)+"px");break;case "bottom-right-aligned":c.className="introjs-arrow top-right";b.style.right="0px";b.style.bottom="-"+(h(b).height+10)+"px";break;case "bottom-middle-aligned":d=h(a);a=h(b);c.className="introjs-arrow top-middle";b.style.left=d.width/2-a.width/2+"px";b.style.bottom="-"+(a.height+10)+"px";break;default:b.style.bottom="-"+(h(b).height+ +10)+"px",c.className="introjs-arrow top"}}function v(a){if(a&&this._introItems[this._currentStep]){var b=this._introItems[this._currentStep],c=h(b.element),d=10;"floating"==b.position&&(d=0);a.setAttribute("style","width: "+(c.width+d)+"px; height:"+(c.height+d)+"px; top:"+(c.top-5)+"px;left: "+(c.left-5)+"px;")}}function A(a){var b;"undefined"!==typeof this._introChangeCallback&&this._introChangeCallback.call(this,a.element);var c=this,d=document.querySelector(".introjs-helperLayer");h(a.element); +if(null!=d){var e=d.querySelector(".introjs-helperNumberLayer"),C=d.querySelector(".introjs-tooltiptext"),g=d.querySelector(".introjs-arrow"),y=d.querySelector(".introjs-tooltip"),k=d.querySelector(".introjs-skipbutton"),n=d.querySelector(".introjs-prevbutton"),l=d.querySelector(".introjs-nextbutton");y.style.opacity=0;if(null!=e&&(b=this._introItems[0<=a.step-2?a.step-2:0],null!=b&&"forward"==this._direction&&"floating"==b.position||"backward"==this._direction&&"floating"==a.position))e.style.opacity= +0;v.call(c,d);var m=document.querySelectorAll(".introjs-fixParent");if(m&&0 a.active").className="";d.querySelector('.introjs-bullets li > a[data-stepnumber="'+a.step+'"]').className="active";y.style.opacity=1;e&&(e.style.opacity=1)},350)}else{var k=document.createElement("div"),m=document.createElement("div"),j=document.createElement("div"),n=document.createElement("div"),l=document.createElement("div"),f=document.createElement("div");k.className="introjs-helperLayer";v.call(c,k);this._targetElement.appendChild(k);m.className= +"introjs-arrow";n.className="introjs-tooltiptext";n.innerHTML=a.intro;l.className="introjs-bullets";!1===this._options.showBullets&&(l.style.display="none");var p=document.createElement("ul");b=0;for(var u=this._introItems.length;bj)b.className+=" introjs-fixParent";b=b.parentNode}b=a.element.getBoundingClientRect();!(0<=b.top&&0<=b.left&&b.bottom+80<=window.innerHeight&&b.right<=window.innerWidth)&&!0===this._options.scrollToElement&&(j=a.element.getBoundingClientRect(),b=void 0!=window.innerWidth?window.innerHeight:document.documentElement.clientHeight,m=j.bottom-(j.bottom-j.top),j=j.bottom-b,0>m||a.element.clientHeight>b?window.scrollBy(0,m-30):window.scrollBy(0, +j+100));"undefined"!==typeof this._introAfterChangeCallback&&this._introAfterChangeCallback.call(this,a.element)}function z(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&&c.toLowerCase?c.toLowerCase():c}function D(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 e=h(a);e&&(c+="width: "+e.width+"px; height:"+e.height+"px; top:"+e.top+"px;left: "+e.left+"px;",b.setAttribute("style",c))}a.appendChild(b);b.onclick=function(){!0==d._options.exitOnOverlayClick&&(t.call(d,a),void 0!=d._introExitCallback&&d._introExitCallback.call(d))};setTimeout(function(){c+="opacity: "+d._options.overlayOpacity.toString()+";";b.setAttribute("style",c)},10);return!0}function h(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 u=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)};u.version="0.8.0";u.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=[],e=0,d=this._options.steps.length;ed.length)break a;e=0;for(f=d.length;etd,tr.introjs-showElement>th{z-index:9999999 !important}.introjs-relativePosition,tr.introjs-showElement>td,tr.introjs-showElement>th{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 .3s ease-out;-moz-transition:all .3s ease-out;-ms-transition:all .3s ease-out;-o-transition:all .3s ease-out;transition:all .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;background:-webkit-linear-gradient(top,#ff3019 0,#cf0404 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#ff3019),color-stop(100%,#cf0404));background:-moz-linear-gradient(top,#ff3019 0,#cf0404 100%);background:-ms-linear-gradient(top,#ff3019 0,#cf0404 100%);background:-o-linear-gradient(top,#ff3019 0,#cf0404 100%);background:linear-gradient(to bottom,#ff3019 0,#cf0404 100%);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);filter:progid:DXImageTransform.Microsoft.Shadow(direction=135,strength=2,color=ff0000);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.top-right{top:-10px;right:10px;border-top-color:transparent;border-right-color:transparent;border-bottom-color:white;border-left-color:transparent}.introjs-arrow.top-middle{top:-10px;left:50%;margin-left:-5px;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 .1s ease-out;-moz-transition:opacity .1s ease-out;-ms-transition:opacity .1s ease-out;-o-transition:opacity .1s ease-out;transition:opacity .1s ease-out}.introjs-tooltipbuttons{text-align:right}.introjs-button{position:relative;overflow:visible;display:inline-block;padding:.3em .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:0;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;-webkit-border-radius:.2em;-moz-border-radius:.2em;border-radius:.2em;zoom:1;*display:inline;margin-top:10px}.introjs-button:hover{border-color:#bcbcbc;text-decoration:none;box-shadow:0 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)}.introjs-button::-moz-focus-inner{padding:0;border:0}.introjs-skipbutton{margin-right:5px;color:#7a7a7a}.introjs-prevbutton{-webkit-border-radius:.2em 0 0 .2em;-moz-border-radius:.2em 0 0 .2em;border-radius:.2em 0 0 .2em;border-right:0}.introjs-nextbutton{-webkit-border-radius:0 .2em .2em 0;-moz-border-radius:0 .2em .2em 0;border-radius:0 .2em .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}.introjs-bullets{text-align:center}.introjs-bullets ul{clear:both;margin:15px auto 0;padding:0;display:inline-block}.introjs-bullets ul li{list-style:none;float:left;margin:0 2px}.introjs-bullets ul li a{display:block;width:6px;height:6px;background:#ccc;border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;text-decoration:none}.introjs-bullets ul li a:hover{background:#999}.introjs-bullets ul li a.active{background:#999}.introjsFloatingElement{position:absolute;height:0;width:0;left:50%;top:50%} \ No newline at end of file From 0eb38109bf9f1ad2f77cbadd3e6e193f309f0396 Mon Sep 17 00:00:00 2001 From: Afshin Mehrabani Date: Fri, 23 May 2014 19:27:51 +0430 Subject: [PATCH 24/35] alter intro.js version number to v0.9.0 + add minified version --- intro.js | 4 ++-- minified/intro.min.js | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/intro.js b/intro.js index dcbce5317..cb9a5103a 100644 --- a/intro.js +++ b/intro.js @@ -1,5 +1,5 @@ /** - * Intro.js v0.8.0 + * Intro.js v0.9.0 * https://github.com/usablica/intro.js * MIT licensed * @@ -19,7 +19,7 @@ } } (this, function (exports) { //Default config/variables - var VERSION = '0.8.0'; + var VERSION = '0.9.0'; /** * IntroJs main class diff --git a/minified/intro.min.js b/minified/intro.min.js index 75a371648..e152d5213 100644 --- a/minified/intro.min.js +++ b/minified/intro.min.js @@ -17,7 +17,7 @@ r.appendChild(q);p.appendChild(r)}l.appendChild(p);f.className="introjs-tooltipb z(b,"z-index");j=parseFloat(z(b,"opacity"));if(/[0-9]+/.test(m)||1>j)b.className+=" introjs-fixParent";b=b.parentNode}b=a.element.getBoundingClientRect();!(0<=b.top&&0<=b.left&&b.bottom+80<=window.innerHeight&&b.right<=window.innerWidth)&&!0===this._options.scrollToElement&&(j=a.element.getBoundingClientRect(),b=void 0!=window.innerWidth?window.innerHeight:document.documentElement.clientHeight,m=j.bottom-(j.bottom-j.top),j=j.bottom-b,0>m||a.element.clientHeight>b?window.scrollBy(0,m-30):window.scrollBy(0, j+100));"undefined"!==typeof this._introAfterChangeCallback&&this._introAfterChangeCallback.call(this,a.element)}function z(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&&c.toLowerCase?c.toLowerCase():c}function D(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 e=h(a);e&&(c+="width: "+e.width+"px; height:"+e.height+"px; top:"+e.top+"px;left: "+e.left+"px;",b.setAttribute("style",c))}a.appendChild(b);b.onclick=function(){!0==d._options.exitOnOverlayClick&&(t.call(d,a),void 0!=d._introExitCallback&&d._introExitCallback.call(d))};setTimeout(function(){c+="opacity: "+d._options.overlayOpacity.toString()+";";b.setAttribute("style",c)},10);return!0}function h(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 u=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)};u.version="0.8.0";u.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, +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 u=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)};u.version="0.9.0";u.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=[],e=0,d=this._options.steps.length;ed.length)break a;e=0;for(f=d.length;e Date: Fri, 23 May 2014 19:36:24 +0430 Subject: [PATCH 25/35] change floating number format --- intro.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/intro.js b/intro.js index cb9a5103a..2b5b179f5 100644 --- a/intro.js +++ b/intro.js @@ -57,7 +57,7 @@ /* Scroll to highlighted element? */ scrollToElement: true, /* Set the overlay opacity */ - overlayOpacity: .8 + overlayOpacity: 0.8 }; } From f8532f059d3be9aded5dfecee00c6904cc2631bc Mon Sep 17 00:00:00 2001 From: keatext Date: Fri, 4 Jul 2014 10:50:17 -0400 Subject: [PATCH 26/35] use only lower-case for package name (npm limitation) --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 6d7d4104b..d467b8995 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,5 @@ { - "name": "Intro.js", + "name": "intro.js", "description": "Better introductions for websites and features with a step-by-step guide for your projects", "version": "0.9.0", "author": "Afshin Mehrabani ", From 0c0395e1e92cc6bfb6a036d767915e42a64d227b Mon Sep 17 00:00:00 2001 From: keatext Date: Fri, 4 Jul 2014 10:51:39 -0400 Subject: [PATCH 27/35] add npm to the README --- README.md | 22 ++++++++++++---------- 1 file changed, 12 insertions(+), 10 deletions(-) diff --git a/README.md b/README.md index 13523d062..c0dc9ede5 100644 --- a/README.md +++ b/README.md @@ -9,7 +9,9 @@ You can obtain your local copy of Intro.js from: **2)** Using bower ```bower install intro.js --save``` -**3)** Download it from CDN ([1](http://www.jsdelivr.com/#!intro.js), [2](http://cdnjs.com/#introjs)) +**3)** Using npm ```npm install intro.js --save``` + +**4)** Download it from CDN ([1](http://www.jsdelivr.com/#!intro.js), [2](http://cdnjs.com/#introjs)) ## How to use @@ -19,7 +21,7 @@ Intro.js can be added to your site in three simple steps: > CDN hosted files are available at [jsDelivr](http://www.jsdelivr.com/#!intro.js) (click Show More) & [cdnjs](http://cdnjs.com/#introjs). -**2)** Add `data-intro` and `data-step` to your HTML elements. +**2)** Add `data-intro` and `data-step` to your HTML elements. For example: @@ -38,7 +40,7 @@ Optionally, pass one parameter to `introJs` function to limit the presentation s **For example** `introJs(".introduction-farm").start();` runs the introduction only for elements with `class='introduction-farm'`. -

    +

    ## Using templates @@ -242,7 +244,7 @@ introJs().oncomplete(function() { ###introJs.onexit(providedCallback) -Set callback to exit of introduction. Exit also means pressing `ESC` key and clicking on the overlay layer by the user. +Set callback to exit of introduction. Exit also means pressing `ESC` key and clicking on the overlay layer by the user. **Available since:** v0.2.0 @@ -276,7 +278,7 @@ The callback function receives the element of the new step as an argument. **Example:** ```javascript -introJs().onchange(function(targetElement) { +introJs().onchange(function(targetElement) { alert("new step"); }); ```` @@ -297,7 +299,7 @@ Given callback function will be called before starting a new step of introductio **Example:** ```javascript -introJs().onbeforechange(function(targetElement) { +introJs().onbeforechange(function(targetElement) { alert("before new step"); }); ```` @@ -318,7 +320,7 @@ Given callback function will be called after starting a new step of introduction **Example:** ```javascript -introJs().onafterchange(function(targetElement) { +introJs().onafterchange(function(targetElement) { alert("after new step"); }); ```` @@ -379,11 +381,11 @@ Now you can run this command to minify all static resources: ## Instant IntroJs -Want to learn faster and easier? Here we have **Instant IntroJs**, Packt Publishing. +Want to learn faster and easier? Here we have **Instant IntroJs**, Packt Publishing.

    -

    +

    Buy and Download @@ -489,7 +491,7 @@ Want to learn faster and easier? Here we have **Instant IntroJs**, Packt Publish - [Twitter](https://twitter.com/afshinmeh) - [Github](https://github.com/afshinm) -- [Personal page](http://afshinm.name/) +- [Personal page](http://afshinm.name/) [Other contributors](https://github.com/usablica/intro.js/graphs/contributors) From ef3de6009ab2fa7179e1b4cc1b98a788a40bff6e Mon Sep 17 00:00:00 2001 From: ZuTa Date: Mon, 31 Mar 2014 23:55:41 +0200 Subject: [PATCH 28/35] Add option for disable/enable interaction inside examining area --- intro.js | 22 +++++++++++++++++++++- introjs.css | 9 +++++++++ 2 files changed, 30 insertions(+), 1 deletion(-) diff --git a/intro.js b/intro.js index de33b71e0..8ffd715db 100644 --- a/intro.js +++ b/intro.js @@ -57,7 +57,9 @@ /* Scroll to highlighted element? */ scrollToElement: true, /* Set the overlay opacity */ - overlayOpacity: 0.8 + overlayOpacity: 0.8, + /* Disable an interaction with element? */ + disableInteraction: false }; } @@ -345,6 +347,11 @@ floatingElement.parentNode.removeChild(floatingElement); } + //remove element overlay + if (this._options.disableInteraction === true) { + document.querySelector('.introjs-elementOverlay').remove(); + } + //remove `introjs-showElement` class from the element var showElement = document.querySelector('.introjs-showElement'); if (showElement) { @@ -554,6 +561,12 @@ //remove old classes var oldShowElement = document.querySelector('.introjs-showElement'); oldShowElement.className = oldShowElement.className.replace(/introjs-[a-zA-Z]+/g, '').replace(/^\s+|\s+$/g, ''); + + //remove element overlay + if (this._options.disableInteraction === true) { + document.querySelector('.introjs-elementOverlay').remove(); + } + //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); @@ -718,6 +731,13 @@ //Set focus on "next" button, so that hitting Enter always moves you onto the next step nextTooltipButton.focus(); + //add inner div to prevent posibility interact with element (transparent overlay) + if (this._options.disableInteraction === true) { + var elementOverlay = document.createElement('div'); + elementOverlay.className = 'introjs-elementOverlay'; + targetElement.element.appendChild(elementOverlay); + } + //add target element position style targetElement.element.className += ' introjs-showElement'; diff --git a/introjs.css b/introjs.css index 2aba35e62..420b6aa57 100644 --- a/introjs.css +++ b/introjs.css @@ -30,6 +30,15 @@ tr.introjs-showElement > th { z-index: 9999999 !important; } +.introjs-elementOverlay { + z-index: 99999999 !important; + position: absolute; + width: 100%; + height: 100%; + top: 0; + left: 0; +} + .introjs-relativePosition, tr.introjs-showElement > td, tr.introjs-showElement > th { From bf1e065ff4dac371952c0a14180f405f177a418d Mon Sep 17 00:00:00 2001 From: Taras Zubyk Date: Tue, 1 Apr 2014 00:01:49 +0200 Subject: [PATCH 29/35] Update README.md add explanation for new option - disableInteraction --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index c0dc9ede5..b428f7ca7 100644 --- a/README.md +++ b/README.md @@ -349,6 +349,7 @@ introJs().onafterchange(function(targetElement) { - `showBullets`: Show introduction bullets or not, `true` or `false` - `scrollToElement`: Auto scroll to highlighted element if it's outside of viewport, `true` or `false` - `overlayOpacity`: Adjust the overlay opacity, `Number` + - `disableInteraction`: Disable an interaction inside element or not, `true` or `false` See [setOption](https://github.com/usablica/intro.js/#introjssetoptionoption-value) to see an example. From 1d40207c5ce4db0e69088c6c012c1c09ece80324 Mon Sep 17 00:00:00 2001 From: Bolutife Ogunsola Date: Fri, 25 Jul 2014 12:29:38 +0100 Subject: [PATCH 30/35] Change implementation of disable interaction Now uses a div that is child of the body element (not of the target element) --- intro.js | 39 ++++++++++++++++++++++----------------- introjs.css | 6 +----- 2 files changed, 23 insertions(+), 22 deletions(-) diff --git a/intro.js b/intro.js index 8ffd715db..8c1506f09 100644 --- a/intro.js +++ b/intro.js @@ -341,17 +341,18 @@ helperLayer.parentNode.removeChild(helperLayer); } + //remove disableInteractionLayer + var disableInteractionLayer = targetElement.querySelector('.introjs-disableInteraction'); + if(disableInteractionLayer){ + disableInteractionLayer.parentNode.removeChild(disableInteractionLayer); + } + //remove intro floating element var floatingElement = document.querySelector('.introjsFloatingElement'); if (floatingElement) { floatingElement.parentNode.removeChild(floatingElement); } - //remove element overlay - if (this._options.disableInteraction === true) { - document.querySelector('.introjs-elementOverlay').remove(); - } - //remove `introjs-showElement` class from the element var showElement = document.querySelector('.introjs-showElement'); if (showElement) { @@ -510,6 +511,16 @@ } } + function _disableInteraction(){ + disableInteractionLayer = document.querySelector('.introjs-disableInteraction'); + if (disableInteractionLayer === null){ + disableInteractionLayer = document.createElement('div'); + disableInteractionLayer.className = 'introjs-disableInteraction'; + this._targetElement.appendChild(disableInteractionLayer); + } + _setHelperLayerPosition.call(this, disableInteractionLayer); + + } /** * Show an element on the page * @@ -562,11 +573,6 @@ var oldShowElement = document.querySelector('.introjs-showElement'); oldShowElement.className = oldShowElement.className.replace(/introjs-[a-zA-Z]+/g, '').replace(/^\s+|\s+$/g, ''); - //remove element overlay - if (this._options.disableInteraction === true) { - document.querySelector('.introjs-elementOverlay').remove(); - } - //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); @@ -617,6 +623,7 @@ bulletsLayer.style.display = 'none'; } + var ulContainer = document.createElement('ul'); for (var i = 0, stepsLength = this._introItems.length; i < stepsLength; i++) { @@ -655,6 +662,7 @@ helperNumberLayer.innerHTML = targetElement.step; helperLayer.appendChild(helperNumberLayer); } + tooltipLayer.appendChild(arrowLayer); helperLayer.appendChild(tooltipLayer); @@ -714,6 +722,10 @@ _placeTooltip.call(self, targetElement.element, tooltipLayer, arrowLayer, helperNumberLayer); } + //disable interaction + if (this._options.disableInteraction === true){ + _disableInteraction.call(self); + } if (this._currentStep == 0 && this._introItems.length > 1) { prevTooltipButton.className = 'introjs-button introjs-prevbutton introjs-disabled'; nextTooltipButton.className = 'introjs-button introjs-nextbutton'; @@ -731,13 +743,6 @@ //Set focus on "next" button, so that hitting Enter always moves you onto the next step nextTooltipButton.focus(); - //add inner div to prevent posibility interact with element (transparent overlay) - if (this._options.disableInteraction === true) { - var elementOverlay = document.createElement('div'); - elementOverlay.className = 'introjs-elementOverlay'; - targetElement.element.appendChild(elementOverlay); - } - //add target element position style targetElement.element.className += ' introjs-showElement'; diff --git a/introjs.css b/introjs.css index 420b6aa57..b2100fa0b 100644 --- a/introjs.css +++ b/introjs.css @@ -30,13 +30,9 @@ tr.introjs-showElement > th { z-index: 9999999 !important; } -.introjs-elementOverlay { +.introjs-disableInteraction { z-index: 99999999 !important; position: absolute; - width: 100%; - height: 100%; - top: 0; - left: 0; } .introjs-relativePosition, From 54dfb5a59dd720028b320f7d7e1363296889b7d4 Mon Sep 17 00:00:00 2001 From: Guillaume AMAT Date: Fri, 15 Aug 2014 18:52:28 +0200 Subject: [PATCH 31/35] Bad sizing with Bootstrap 3 (second attempt) Bootstrap 3 resets the box-sizing CSS property so the Intro.js layout is broken. --- introjs.css | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/introjs.css b/introjs.css index a65052811..cc66a0a37 100644 --- a/introjs.css +++ b/introjs.css @@ -58,6 +58,16 @@ tr.introjs-showElement > th { transition: all 0.3s ease-out; } +.introjs-helperLayer *, +.introjs-helperLayer *:before, +.introjs-helperLayer *:after { + -webkit-box-sizing: content-box; + -moz-box-sizing: content-box; + -ms-box-sizing: content-box; + -o-box-sizing: content-box; + box-sizing: content-box; +} + .introjs-helperNumberLayer { position: absolute; top: -16px; From 08e73967a6836b1d2b9698aa8cb33d294f68acd2 Mon Sep 17 00:00:00 2001 From: Connor Hindley Date: Wed, 17 Sep 2014 15:09:43 -0400 Subject: [PATCH 32/35] return this from exit - fixes #245 --- intro.js | 1 + 1 file changed, 1 insertion(+) diff --git a/intro.js b/intro.js index f6f46601a..ca67fa9af 100644 --- a/intro.js +++ b/intro.js @@ -983,6 +983,7 @@ }, exit: function() { _exitIntro.call(this, this._targetElement); + return this; }, refresh: function() { _setHelperLayerPosition.call(this, document.querySelector('.introjs-helperLayer')); From 9261f10e2ad21abd466e8f841ba7bd12966caf3c Mon Sep 17 00:00:00 2001 From: Afshin Mehrabani Date: Mon, 22 Sep 2014 00:15:07 +0330 Subject: [PATCH 33/35] add dark theme --- themes/introjs-dark.css | 243 ++++++++++++++++++++++++++++++++++++++++ 1 file changed, 243 insertions(+) create mode 100644 themes/introjs-dark.css diff --git a/themes/introjs-dark.css b/themes/introjs-dark.css new file mode 100644 index 000000000..c834b5d91 --- /dev/null +++ b/themes/introjs-dark.css @@ -0,0 +1,243 @@ +/* +Dark theme for IntroJs +By: Khashayar Pourdeilami (http://kpourdeilami.github.io) +for: IntroJs (https://github.com/usablica/intro.js) +*/ +.introjs-overlay { + position: absolute; + z-index: 999999; + background:#fff; + -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; + opacity: 1.0 !important; +} + +.introjs-showElement, +tr.introjs-showElement > td, +tr.introjs-showElement > th { + z-index: 9999999 !important; +} + +.introjs-relativePosition, +tr.introjs-showElement > td, +tr.introjs-showElement > th { + position: relative; +} + +.introjs-helperLayer { + position: absolute; + z-index: 9999998; + background:#656D78; + -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; + + z-index: 9999999999 !important; + padding: 10px; + font-family: Arial, verdana, tahoma; + font-size: 13px; + top:-40px; + font-weight: bold; + color: white; + text-align: center; + background:#434A54; + width: 20px; + height:20px; + line-height: 20px; +} + +.introjs-arrow { + border: 5px solid #434A54; + content:''; + position: absolute; +} +.introjs-arrow.top { + top: -10px; + border-top-color:transparent; + border-right-color:transparent; + border-bottom-color:#434A54; + border-left-color:transparent; +} +.introjs-arrow.top-right { + top: -10px; + right: 10px; + border-top-color:transparent; + border-right-color:transparent; + border-bottom-color:#434A54; + border-left-color:transparent; +} +.introjs-arrow.top-middle { + top: -10px; + left: 50%; + margin-left: -5px; + border-top-color:transparent; + border-right-color:transparent; + border-bottom-color:#434A54; + 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:#434A54; +} +.introjs-arrow.bottom { + bottom: -10px; + border-top-color:#434A54; + 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:#434A54; + border-bottom-color:transparent; + border-left-color:transparent; +} + +.introjs-tooltip { + position: absolute; + padding: 10px; + background-color: #434A54; + min-width: 200px; + padding-top:30px; + + max-width: 300px; + color:#fff; + -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; + position:relative; + bottom:-44px; + margin-left:-10px; + margin-right:-10px; + padding:5px; + background:#656D78; +} + +/* + Buttons style by http://nicolasgallagher.com/lab/css3-github-buttons/ + Changed by Afshin Mehrabani + Further modified by: Khashayar P. +*/ +.introjs-button { + position: relative; + overflow: visible; + display: inline-block; + padding: 0.3em 0.8em; + border: 2px solid #fff; + margin: 0; + text-decoration: none; + font: 11px/normal sans-serif; + color: #fff !important; + white-space: nowrap; + cursor: pointer; + outline: none; + -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 */ + /* IE hacks */ + zoom: 1; + *display: inline; + margin-top: 10px; +} + +.introjs-button:hover { + text-decoration: none; + color:#434A54 !important; + background:#fff; +} + +.introjs-button:focus, +.introjs-button:active { + background:#fff !important; + color:#434A54 !important; +} + +/* overrides extra padding on button elements in Firefox */ +.introjs-button::-moz-focus-inner { + padding: 0; + border: 0; +} + +.introjs-skipbutton { + margin-right: 5px; + color: #fff; +} + +.introjs-prevbutton { + + border-right: none; +} + + +.introjs-disabled, .introjs-disabled:hover, .introjs-disabled:focus { + color: #fff; + box-shadow: none; + cursor: default; + background:transparent; + border-color:transparent; +} + +.introjs-bullets { + text-align: center; + display:none; +} +.introjs-bullets ul { + clear: both; + margin: 15px auto 0; + padding: 0; + display: inline-block; +} +.introjs-bullets ul li { + list-style: none; + float: left; + margin: 0 2px; +} +.introjs-bullets ul li a { + display: block; + width: 8px; + height: 8px; + background: rgba(255,255,255,0.1); + border-radius: 10px; + -moz-border-radius: 10px; + -webkit-border-radius: 10px; + text-decoration: none; +} +.introjs-bullets ul li a:hover { + background: rgba(255,255,255,0.2); +} +.introjs-bullets ul li a.active { + background: rgba(255,255,255,0.2); +} +.introjsFloatingElement { + position: absolute; + height: 0; + width: 0; + left: 50%; + top: 50%; +} From 9e226dea1eababc0704a033a246cd1ca76d4245c Mon Sep 17 00:00:00 2001 From: Afshin Mehrabani Date: Mon, 22 Sep 2014 00:48:00 +0330 Subject: [PATCH 34/35] change coding style issues + change version number to 1.0.0 --- intro.js | 32 ++++++++++++++++++++------------ 1 file changed, 20 insertions(+), 12 deletions(-) diff --git a/intro.js b/intro.js index 70fa02ba8..7c19662ae 100644 --- a/intro.js +++ b/intro.js @@ -1,5 +1,5 @@ /** - * Intro.js v0.9.0 + * Intro.js v1.0.0 * https://github.com/usablica/intro.js * MIT licensed * @@ -19,7 +19,7 @@ } } (this, function (exports) { //Default config/variables - var VERSION = '0.9.0'; + var VERSION = '1.0.0'; /** * IntroJs main class @@ -216,13 +216,13 @@ window.addEventListener('keydown', self._onKeyDown, true); } //for window resize - window.addEventListener("resize", self._onResize, true); + window.addEventListener('resize', self._onResize, true); } else if (document.attachEvent) { //IE if (this._options.keyboardNavigation) { document.attachEvent('onkeydown', self._onKeyDown); } //for window resize - document.attachEvent("onresize", self._onResize); + document.attachEvent('onresize', self._onResize); } } return false; @@ -343,10 +343,10 @@ //remove disableInteractionLayer var disableInteractionLayer = targetElement.querySelector('.introjs-disableInteraction'); - if(disableInteractionLayer){ + if (disableInteractionLayer) { disableInteractionLayer.parentNode.removeChild(disableInteractionLayer); } - + //remove intro floating element var floatingElement = document.querySelector('.introjsFloatingElement'); if (floatingElement) { @@ -511,16 +511,23 @@ } } - function _disableInteraction(){ - disableInteractionLayer = document.querySelector('.introjs-disableInteraction'); - if (disableInteractionLayer === null){ + /** + * 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); + _setHelperLayerPosition.call(this, disableInteractionLayer); } + /** * Show an element on the page * @@ -634,7 +641,7 @@ self.goToStep(this.getAttribute('data-stepnumber')); }; - if (i === (targetElement.step-1)) anchorLink.className = "active"; + if (i === (targetElement.step-1)) anchorLink.className = 'active'; anchorLink.href = 'javascript:void(0);'; anchorLink.innerHTML = " "; @@ -723,9 +730,10 @@ } //disable interaction - if (this._options.disableInteraction === true){ + if (this._options.disableInteraction === true) { _disableInteraction.call(self); } + if (this._currentStep == 0 && this._introItems.length > 1) { prevTooltipButton.className = 'introjs-button introjs-prevbutton introjs-disabled'; nextTooltipButton.className = 'introjs-button introjs-nextbutton'; From 3a2d855e8eacd116b70ad71a70c9b1513f3691e4 Mon Sep 17 00:00:00 2001 From: Afshin Mehrabani Date: Mon, 22 Sep 2014 00:55:40 +0330 Subject: [PATCH 35/35] add newer version of minified files --- minified/intro.min.js | 55 ++++++++++++++++++------------------ minified/introjs-rtl.min.css | 2 +- minified/introjs.min.css | 2 +- 3 files changed, 30 insertions(+), 29 deletions(-) diff --git a/minified/intro.min.js b/minified/intro.min.js index e152d5213..68aee78bd 100644 --- a/minified/intro.min.js +++ b/minified/intro.min.js @@ -1,27 +1,28 @@ -(function(p,f){"object"===typeof exports?f(exports):"function"===typeof define&&define.amd?define(["exports"],f):f(p)})(this,function(p){function f(a){this._targetElement=a;this._options={nextLabel:"Next →",prevLabel:"← Back",skipLabel:"Skip",doneLabel:"Done",tooltipPosition:"bottom",tooltipClass:"",exitOnEsc:!0,exitOnOverlayClick:!0,showStepNumbers:!0,keyboardNavigation:!0,showButtons:!0,showBullets:!0,scrollToElement:!0,overlayOpacity:0.8}}function r(a){if(null==a||"object"!=typeof a|| -"undefined"!=typeof a.nodeType)return a;var b={},c;for(c in a)b[c]=r(a[c]);return b}function s(){this._direction="forward";"undefined"===typeof this._currentStep?this._currentStep=0:++this._currentStep;if(this._introItems.length<=this._currentStep)"function"===typeof this._introCompleteCallback&&this._introCompleteCallback.call(this),t.call(this,this._targetElement);else{var a=this._introItems[this._currentStep];"undefined"!==typeof this._introBeforeChangeCallback&&this._introBeforeChangeCallback.call(this, -a.element);A.call(this,a)}}function x(){this._direction="backward";if(0===this._currentStep)return!1;var a=this._introItems[--this._currentStep];"undefined"!==typeof this._introBeforeChangeCallback&&this._introBeforeChangeCallback.call(this,a.element);A.call(this,a)}function t(a){var b=a.querySelector(".introjs-overlay");if(null!=b){b.style.opacity=0;setTimeout(function(){b.parentNode&&b.parentNode.removeChild(b)},500);(a=a.querySelector(".introjs-helperLayer"))&&a.parentNode.removeChild(a);(a=document.querySelector(".introjsFloatingElement"))&& -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.active").className="";d.querySelector('.introjs-bullets li > a[data-stepnumber="'+a.step+'"]').className="active";y.style.opacity=1;e&&(e.style.opacity=1)},350)}else{var k=document.createElement("div"),m=document.createElement("div"),j=document.createElement("div"),n=document.createElement("div"),l=document.createElement("div"),f=document.createElement("div");k.className="introjs-helperLayer";v.call(c,k);this._targetElement.appendChild(k);m.className= -"introjs-arrow";n.className="introjs-tooltiptext";n.innerHTML=a.intro;l.className="introjs-bullets";!1===this._options.showBullets&&(l.style.display="none");var p=document.createElement("ul");b=0;for(var u=this._introItems.length;bj)b.className+=" introjs-fixParent";b=b.parentNode}b=a.element.getBoundingClientRect();!(0<=b.top&&0<=b.left&&b.bottom+80<=window.innerHeight&&b.right<=window.innerWidth)&&!0===this._options.scrollToElement&&(j=a.element.getBoundingClientRect(),b=void 0!=window.innerWidth?window.innerHeight:document.documentElement.clientHeight,m=j.bottom-(j.bottom-j.top),j=j.bottom-b,0>m||a.element.clientHeight>b?window.scrollBy(0,m-30):window.scrollBy(0, -j+100));"undefined"!==typeof this._introAfterChangeCallback&&this._introAfterChangeCallback.call(this,a.element)}function z(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&&c.toLowerCase?c.toLowerCase():c}function D(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 e=h(a);e&&(c+="width: "+e.width+"px; height:"+e.height+"px; top:"+e.top+"px;left: "+e.left+"px;",b.setAttribute("style",c))}a.appendChild(b);b.onclick=function(){!0==d._options.exitOnOverlayClick&&(t.call(d,a),void 0!=d._introExitCallback&&d._introExitCallback.call(d))};setTimeout(function(){c+="opacity: "+d._options.overlayOpacity.toString()+";";b.setAttribute("style",c)},10);return!0}function h(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 u=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)};u.version="0.9.0";u.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=[],e=0,d=this._options.steps.length;ed.length)break a;e=0;for(f=d.length;ed.length)return!1;f=0;for(l=d.length;f a.active").className="";c.querySelector('.introjs-bullets li > a[data-stepnumber="'+a.step+'"]').className="active";h.style.opacity= +1;d&&(d.style.opacity=1)},350)}else{var g=document.createElement("div"),p=document.createElement("div"),m=document.createElement("div"),q=document.createElement("div"),n=document.createElement("div"),k=document.createElement("div");g.className="introjs-helperLayer";y.call(b,g);this._targetElement.appendChild(g);p.className="introjs-arrow";q.className="introjs-tooltiptext";q.innerHTML=a.intro;n.className="introjs-bullets";!1===this._options.showBullets&&(n.style.display="none");for(var t=document.createElement("ul"), +e=0,z=this._introItems.length;em||"none"!==k)e.className+=" introjs-fixParent";e=e.parentNode}H(a.element)||!0!==this._options.scrollToElement||(m=a.element.getBoundingClientRect(),e=I().height,p=m.bottom-(m.bottom-m.top),m=m.bottom-e,0>p||a.element.clientHeight>e?window.scrollBy(0,p-30):window.scrollBy(0,m+100));"undefined"!==typeof this._introAfterChangeCallback&&this._introAfterChangeCallback.call(this,a.element)}function s(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&&c.toLowerCase?c.toLowerCase():c}function I(){if(void 0!=window.innerWidth)return{width:window.innerWidth,height:window.innerHeight};var a=document.documentElement;return{width:a.clientWidth,height:a.clientHeight}}function H(a){a=a.getBoundingClientRect();return 0<=a.top&&0<=a.left&&a.bottom+80<=window.innerHeight&&a.right<=window.innerWidth}function F(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 f=r(a);f&&(c+="width: "+f.width+"px; height:"+f.height+"px; top:"+f.top+"px;left: "+f.left+"px;",b.setAttribute("style",c))}a.appendChild(b);b.onclick=function(){!0==d._options.exitOnOverlayClick&&(x.call(d,a),void 0!=d._introExitCallback&&d._introExitCallback.call(d))};setTimeout(function(){c+="opacity: "+d._options.overlayOpacity.toString()+ +";";b.setAttribute("style",c)},10);return!0}function r(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 z=function(a){if("object"===typeof a)return new k(a);if("string"===typeof a){if(a=document.querySelector(a))return new k(a);throw Error("There is no element with given selector.");}return new k(document.body)};z.version="1.0.0";z.fn=k.prototype={clone:function(){return new k(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(){E.call(this,this._targetElement);return this},goToStep:function(a){this._currentStep=a-2;"undefined"!==typeof this._introItems&&w.call(this);return this},nextStep:function(){w.call(this);return this},previousStep:function(){B.call(this);return this},exit:function(){x.call(this,this._targetElement);return this}, +refresh:function(){y.call(this,document.querySelector(".introjs-helperLayer"));return this},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},onafterchange:function(a){if("function"===typeof a)this._introAfterChangeCallback= +a;else throw Error("Provided callback for onafterchange 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 t.introJs=z}); diff --git a/minified/introjs-rtl.min.css b/minified/introjs-rtl.min.css index 78fd3a03f..3db7b2557 100644 --- a/minified/introjs-rtl.min.css +++ b/minified/introjs-rtl.min.css @@ -1 +1 @@ -.introjs-tooltipbuttons{text-align:left}.introjs-skipbutton{margin-left:5px}.introjs-tooltip{direction:rtl}.introjs-prevbutton{border:1px solid #d4d4d4;border-left:0;-webkit-border-radius:0 .2em .2em 0;-moz-border-radius:0 .2em .2em 0;border-radius:0 .2em .2em 0}.introjs-nextbutton{border:1px solid #d4d4d4;-webkit-border-radius:.2em 0 0 .2em;-moz-border-radius:.2em 0 0 .2em;border-radius:.2em 0 0 .2em} \ No newline at end of file +.introjs-tooltipbuttons{text-align:left}.introjs-skipbutton{margin-left:5px}.introjs-tooltip{direction:rtl}.introjs-prevbutton{border:1px solid #d4d4d4;border-left:none;-webkit-border-radius:0 .2em .2em 0;-moz-border-radius:0 .2em .2em 0;border-radius:0 .2em .2em 0}.introjs-nextbutton{border:1px solid #d4d4d4;-webkit-border-radius:.2em 0 0 .2em;-moz-border-radius:.2em 0 0 .2em;border-radius:.2em 0 0 .2em} \ No newline at end of file diff --git a/minified/introjs.min.css b/minified/introjs.min.css index 0e43a3706..bbb22250a 100644 --- a/minified/introjs.min.css +++ b/minified/introjs.min.css @@ -1 +1 @@ -.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:"alpha(opacity=50)";filter:alpha(opacity=50);-webkit-transition:all .3s ease-out;-moz-transition:all .3s ease-out;-ms-transition:all .3s ease-out;-o-transition:all .3s ease-out;transition:all .3s ease-out}.introjs-fixParent{z-index:auto !important;opacity:1.0 !important}.introjs-showElement,tr.introjs-showElement>td,tr.introjs-showElement>th{z-index:9999999 !important}.introjs-relativePosition,tr.introjs-showElement>td,tr.introjs-showElement>th{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 .3s ease-out;-moz-transition:all .3s ease-out;-ms-transition:all .3s ease-out;-o-transition:all .3s ease-out;transition:all .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;background:-webkit-linear-gradient(top,#ff3019 0,#cf0404 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#ff3019),color-stop(100%,#cf0404));background:-moz-linear-gradient(top,#ff3019 0,#cf0404 100%);background:-ms-linear-gradient(top,#ff3019 0,#cf0404 100%);background:-o-linear-gradient(top,#ff3019 0,#cf0404 100%);background:linear-gradient(to bottom,#ff3019 0,#cf0404 100%);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);filter:progid:DXImageTransform.Microsoft.Shadow(direction=135,strength=2,color=ff0000);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.top-right{top:-10px;right:10px;border-top-color:transparent;border-right-color:transparent;border-bottom-color:white;border-left-color:transparent}.introjs-arrow.top-middle{top:-10px;left:50%;margin-left:-5px;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 .1s ease-out;-moz-transition:opacity .1s ease-out;-ms-transition:opacity .1s ease-out;-o-transition:opacity .1s ease-out;transition:opacity .1s ease-out}.introjs-tooltipbuttons{text-align:right}.introjs-button{position:relative;overflow:visible;display:inline-block;padding:.3em .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:0;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;-webkit-border-radius:.2em;-moz-border-radius:.2em;border-radius:.2em;zoom:1;*display:inline;margin-top:10px}.introjs-button:hover{border-color:#bcbcbc;text-decoration:none;box-shadow:0 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)}.introjs-button::-moz-focus-inner{padding:0;border:0}.introjs-skipbutton{margin-right:5px;color:#7a7a7a}.introjs-prevbutton{-webkit-border-radius:.2em 0 0 .2em;-moz-border-radius:.2em 0 0 .2em;border-radius:.2em 0 0 .2em;border-right:0}.introjs-nextbutton{-webkit-border-radius:0 .2em .2em 0;-moz-border-radius:0 .2em .2em 0;border-radius:0 .2em .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}.introjs-bullets{text-align:center}.introjs-bullets ul{clear:both;margin:15px auto 0;padding:0;display:inline-block}.introjs-bullets ul li{list-style:none;float:left;margin:0 2px}.introjs-bullets ul li a{display:block;width:6px;height:6px;background:#ccc;border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;text-decoration:none}.introjs-bullets ul li a:hover{background:#999}.introjs-bullets ul li a.active{background:#999}.introjsFloatingElement{position:absolute;height:0;width:0;left:50%;top:50%} \ No newline at end of file +.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:"alpha(opacity=50)";filter:alpha(opacity=50);-webkit-transition:all .3s ease-out;-moz-transition:all .3s ease-out;-ms-transition:all .3s ease-out;-o-transition:all .3s ease-out;transition:all .3s ease-out}.introjs-fixParent{z-index:auto!important;opacity:1.0!important;position:absolute;-webkit-transform:none!important;-moz-transform:none!important;-ms-transform:none!important;-o-transform:none!important;transform:none!important}.introjs-showElement,tr.introjs-showElement>td,tr.introjs-showElement>th{z-index:9999999!important}.introjs-disableInteraction{z-index:99999999!important;position:absolute}.introjs-relativePosition,tr.introjs-showElement>td,tr.introjs-showElement>th{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 .3s ease-out;-moz-transition:all .3s ease-out;-ms-transition:all .3s ease-out;-o-transition:all .3s ease-out;transition:all .3s ease-out}.introjs-helperLayer *,.introjs-helperLayer *:before,.introjs-helperLayer *:after{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;-ms-box-sizing:content-box;-o-box-sizing:content-box;box-sizing:content-box}.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;background:-webkit-linear-gradient(top,#ff3019 0,#cf0404 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#ff3019),color-stop(100%,#cf0404));background:-moz-linear-gradient(top,#ff3019 0,#cf0404 100%);background:-ms-linear-gradient(top,#ff3019 0,#cf0404 100%);background:-o-linear-gradient(top,#ff3019 0,#cf0404 100%);background:linear-gradient(to bottom,#ff3019 0,#cf0404 100%);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);filter:progid:DXImageTransform.Microsoft.Shadow(direction=135,strength=2,color=ff0000);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.top-right{top:-10px;right:10px;border-top-color:transparent;border-right-color:transparent;border-bottom-color:white;border-left-color:transparent}.introjs-arrow.top-middle{top:-10px;left:50%;margin-left:-5px;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 .1s ease-out;-moz-transition:opacity .1s ease-out;-ms-transition:opacity .1s ease-out;-o-transition:opacity .1s ease-out;transition:opacity .1s ease-out}.introjs-tooltipbuttons{text-align:right}.introjs-button{position:relative;overflow:visible;display:inline-block;padding:.3em .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:0;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;-webkit-border-radius:.2em;-moz-border-radius:.2em;border-radius:.2em;zoom:1;*display:inline;margin-top:10px}.introjs-button:hover{border-color:#bcbcbc;text-decoration:none;box-shadow:0 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)}.introjs-button::-moz-focus-inner{padding:0;border:0}.introjs-skipbutton{margin-right:5px;color:#7a7a7a}.introjs-prevbutton{-webkit-border-radius:.2em 0 0 .2em;-moz-border-radius:.2em 0 0 .2em;border-radius:.2em 0 0 .2em;border-right:0}.introjs-nextbutton{-webkit-border-radius:0 .2em .2em 0;-moz-border-radius:0 .2em .2em 0;border-radius:0 .2em .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}.introjs-bullets{text-align:center}.introjs-bullets ul{clear:both;margin:15px auto 0;padding:0;display:inline-block}.introjs-bullets ul li{list-style:none;float:left;margin:0 2px}.introjs-bullets ul li a{display:block;width:6px;height:6px;background:#ccc;border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;text-decoration:none}.introjs-bullets ul li a:hover{background:#999}.introjs-bullets ul li a.active{background:#999}.introjsFloatingElement{position:absolute;height:0;width:0;left:50%;top:50%} \ No newline at end of file