Merge branch 'master' of https://github.com/usablica/intro.js into pa…

…tch-1

Conflicts:
	introjs.css

.spmignore

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

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,26 +21,40 @@ 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: 
+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>  
+<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
 
@@ -228,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
 
@@ -262,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");
 });
 ````
@@ -283,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");
 });
 ````
@@ -304,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");
 });
 ````
@@ -314,7 +330,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 +348,8 @@ 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`
+ - `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.
 
@@ -364,23 +382,36 @@ 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.
 
 <p align="center">
   <a target='_blank' href="http://www.packtpub.com/create-useful-introductions-for-websites-and-applications-with-introjs-library/book"><img src='http://dgdsbygo8mp3h.cloudfront.net/sites/default/files/imagecache/productview_larger/2517OS_Instant%20IntroJS%20Starter.jpg' /></a>
-</p>  
+</p>
 
 <p align="center">
   <a target='_blank' href="http://www.packtpub.com/create-useful-introductions-for-websites-and-applications-with-introjs-library/book">Buy and Download</a>
 </p>
 
 ## Roadmap
-- Add introduction without focusing on elements
 - 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
+   - Add `_direction` property
+
+ * **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
@@ -451,17 +482,17 @@ 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**
 
 - [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)
 
@@ -473,15 +504,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.7.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

@@ -0,0 +1,13 @@
+{
+  "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.9.0",
+  "main": "intro.js",
+  "scripts": [
+    "intro.js"
+  ],
+  "styles": [
+    "introjs.css"
+  ]
+}

example/index.html

@@ -29,6 +29,7 @@ <h3 class="muted">Examples</h3>
         <li><a href="RTL/index.html" title='RTL version'>RTL version</a></li>
         <li><a href="html-tooltip/index.html" title='HTML in tooltip'>HTML in tooltip</a></li>
         <li><a href="custom-class/index.html" title='Custom CSS Class'>Custom CSS Class</a></li>
+        <li><a href="withoutElement/index.html" title='Introduction without focusing on elements'>Introduction without focusing on elements</a></li>
       </ul>
     </div>
   </body>

example/programmatic/index.html

@@ -74,6 +74,9 @@ <h4>Section Six</h4>
         var intro = introJs();
           intro.setOptions({
             steps: [
+              { 
+                intro: "Hello world!"
+              },
               {
                 element: document.querySelector('#step1'),
                 intro: "This is a tooltip."

example/withoutElement/index.html

@@ -0,0 +1,113 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Intro without focusing on elements</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="Intro.js - Better introductions for websites and features with a step-by-step guide for your projects.">
+    <meta name="author" content="Afshin Mehrabani (@afshinmeh) in usabli.ca group">
+
+    <!-- styles -->
+    <link href="../assets/css/bootstrap.min.css" rel="stylesheet">
+    <link href="../assets/css/demo.css" rel="stylesheet">
+
+    <!-- Add IntroJs styles -->
+    <link href="../../introjs.css" rel="stylesheet">
+
+    <link href="../assets/css/bootstrap-responsive.min.css" rel="stylesheet">
+  </head>
+
+  <body>
+
+    <div class="container-narrow">
+
+      <div class="masthead">
+        <ul id="step5" class="nav nav-pills pull-right">
+          <li><a href="https://github.com/usablica/intro.js/tags"><i class='icon-black icon-download-alt'></i> Download</a></li>
+          <li><a href="https://github.com/usablica/intro.js">Github</a></li>
+          <li><a href="https://twitter.com/usablica">@usablica</a></li>
+        </ul>
+        <h3 class="muted">Intro.js</h3>
+      </div>
+
+      <hr>
+
+      <div class="jumbotron">
+        <h1 id="step1">Without Element</h1>
+        <p id="step4" class="lead">This example shows the introductions without focusing on elements.</p>
+        <a class="btn btn-large btn-success" href="javascript:void(0);" onclick="startIntro();">Show me how</a>
+      </div>
+
+      <hr>
+
+      <div class="row-fluid marketing">
+        <div id="step2" class="span6">
+          <h4>Section One</h4>
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
+
+          <h4>Section Two</h4>
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
+
+          <h4>Section Three</h4>
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
+        </div>
+
+        <div id="step3" class="span6">
+          <h4>Section Four</h4>
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
+
+
+          <h4>Section Five</h4>
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
+
+          <h4>Section Six</h4>
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis augue a neque cursus ac blandit orci faucibus. Phasellus nec metus purus.</p>
+        </div>
+      </div>
+
+      <hr>
+
+    </div>
+    <script type="text/javascript" src="../../intro.js"></script>
+    <script type="text/javascript">
+      function startIntro(){
+        var intro = introJs();
+          intro.setOptions({
+            steps: [
+              { 
+                intro: "Hello world!"
+              },
+              { 
+                intro: "You <b>don't need</b> to define element to focus, this is a floating tooltip."
+              },
+              {
+                element: document.querySelector('#step1'),
+                intro: "This is a tooltip."
+              },
+              {
+                element: document.querySelectorAll('#step2')[0],
+                intro: "Ok, wasn't that fun?",
+                position: 'right'
+              },
+              {
+                element: '#step3',
+                intro: 'More features, more fun.',
+                position: 'left'
+              },
+              {
+                element: '#step4',
+                intro: "Another step.",
+                position: 'bottom'
+              },
+              {
+                element: '#step5',
+                intro: 'Get it, use it.'
+              }
+            ]
+          });
+
+          intro.start();
+      }
+    </script>
+  </body>
+</html>