Updated to upstream

Author: MikeCBI

.spmignore

@@ -0,0 +1,3 @@
+BUILD
+example
+minified

README.md

@@ -21,25 +21,39 @@ 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
 <a href='http://google.com/' data-intro='Hello step one!'></a>
 ````
 
 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'`.
 
 <p align="center"><img src="http://usablica.github.com/intro.js/img/introjs-demo.png"></p>  
 
+## 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
+<!-- Add IntroJs styles -->
+<link href="../../introjs.css" rel="stylesheet">
+
+<!-- Add Nazanin template -->
+<link href="../../themes/introjs-nazanin.css" rel="stylesheet">
+```
+
 ## API
 
 ###introJs([targetElm])
@@ -314,7 +328,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:
 
@@ -332,6 +346,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.
 
@@ -377,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
@@ -458,10 +479,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 +501,15 @@ Want to learn faster and easier? Here we have **Instant IntroJs**, Packt Publish
 ## License
 > Copyright (C) 2012 Afshin Mehrabani ([email protected])
 
-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.

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/",

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"

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
@@ -56,6 +56,8 @@
       showBullets: true,
       /* Scroll to highlighted element? */
       scrollToElement: true,
+      /* Set the overlay opacity */
+      overlayOpacity: 0.8,
       /* Precedence of positions, when auto is enabled */
       positionPrecedence: ["bottom", "top", "right", "left"]
     };
@@ -297,7 +299,7 @@
    */
   function _previousStep() {
     this._direction = 'backward';
-    
+
     if (this._currentStep === 0) {
       return false;
     }
@@ -320,7 +322,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;
@@ -371,7 +373,7 @@
     } else if (document.detachEvent) { //IE
       document.detachEvent('onkeydown', this._onKeyDown);
     }
-    
+
     //set the step to zero
     this._currentStep = undefined;
   }
@@ -386,6 +388,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;
@@ -404,10 +411,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 {
@@ -419,7 +424,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;
     if ((currentTooltipPosition == "auto" || this._options.tooltipPosition == "auto")) {
       if (currentTooltipPosition != "floating") { // Floating is always valid, no point in calculating
         currentTooltipPosition = _determineAutoPosition.call(this, targetElement, tooltipLayer, currentTooltipPosition)
@@ -464,8 +469,8 @@
       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);
+        //we have to adjust the top and left of layer manually for intro items without element
+        tooltipOffset = _getOffset(tooltipLayer);
 
         tooltipLayer.style.left   = '50%';
         tooltipLayer.style.top    = '50%';
@@ -478,6 +483,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:
@@ -578,10 +598,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;
       }
@@ -670,9 +690,7 @@
 
         //show the tooltip
         oldtooltipContainer.style.opacity = 1;
-        if (oldHelperNumberLayer != null) {
-            oldHelperNumberLayer.style.opacity = 1;
-        }
+        if (oldHelperNumberLayer) oldHelperNumberLayer.style.opacity = 1;
       }, 350);
 
     } else {
@@ -834,14 +852,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;
     }
 
@@ -860,7 +878,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);
     }
@@ -970,9 +988,10 @@
     };
 
     setTimeout(function() {
-      styleText += 'opacity: .8;';
+      styleText += 'opacity: ' + self._options.overlayOpacity.toString() + ';';
       overlayLayer.setAttribute('style', styleText);
     }, 10);
+
     return true;
   }
 

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;
 }
 
@@ -78,7 +82,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);
 }
@@ -95,6 +99,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;
@@ -154,8 +175,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 {
@@ -192,7 +213,7 @@
 
 .introjs-button:hover {
   border-color: #bcbcbc;
-  text-decoration: none; 
+  text-decoration: none;
   box-shadow: 0px 1px 1px #e3e3e3;
 }
 
@@ -274,4 +295,4 @@
   width: 0;
   left: 50%;
   top: 50%;
-}
+}