Skip to content

Commit 0d40e91

Browse files
committed
Updated README
1 parent 5e0c789 commit 0d40e91

File tree

1 file changed

+70
-22
lines changed

1 file changed

+70
-22
lines changed

README.md

Lines changed: 70 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,88 @@
11
# angular-bootstrap-tour
2-
[![Build Status][build-image]][build-url]
3-
[![Code GPA][gpa-image]][gpa-url]
4-
[![Test Coverage][coverage-image]][coverage-url]
5-
[![Dependency Status][depstat-image]][depstat-url]
62
[![Bower Version][bower-image]][bower-url]
7-
[![NPM version][npm-image]][npm-url]
8-
[![IRC Channel][irc-image]][irc-url]
9-
[![Gitter][gitter-image]][gitter-url]
10-
[![GitTip][tip-image]][tip-url]
113

124
## About
135

14-
All about how amazing the angular-bootstrap-tour micro-library is.
6+
This is a simple Angular wrapper around [Bootstrap Tour](http://www.bootstraptour.com).
7+
Simply add the "tour" directive anywhere, and add the "tour-step" directive to any element within "tour" that needs a tip.
8+
9+
All [options](http://bootstraptour.com/api/) are available by adding the corresponding attributes to the directive element.
10+
11+
There is also a "skip" option that if evaluates to true, will skip over the step.
1512

1613
This repository was scaffolded with [generator-microjs](https://github.com/daniellmb/generator-microjs).
1714

15+
## Getting Started
16+
Get the package:
17+
18+
bower install angular-bootstrap-tour
19+
20+
Add the script tags:
21+
22+
<script src="bower_components/jquery/dist/jquery.js"></script>
23+
<script src="bower_components/angular/angular.js"></script>
24+
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
25+
<script src="bower_components/bootstrap-tour/build/js/bootstrap-tour.js"></script>
26+
<script src="bower_components/angular-bootstrap-tour/dist/angular-bootstrap-tour.js"></script>
27+
28+
And the Bootstrap Tour CSS (or create your own).
29+
30+
<link rel="stylesheet" href="bower_components/bootstrap-tour/build/css/bootstrap-tour.css" />
31+
32+
1833
## Examples
1934

20-
### JavaScript
35+
<div tour placement="top" on-end="onTourEnd(tour)" after-get-state="afterGetStateFunction">
36+
<div id="mainMenu" tour-step title="Main Menu" content="{{mainMenuDescription}}" order="0" skip="pageName !== 'home'">
37+
...
38+
</div>
39+
40+
...
41+
42+
</div>
43+
44+
45+
### Tour Directive
46+
47+
The tour directive creates a wrapper that contains all tour steps, and adds the tour object to the scope. If no options are specified, they all default to Bootstrap Tour's defaults.
48+
Values of event handler options will be evaluated against the tour's scope. For the afterGetState, afterSetState, and afterRemoveState, the value should
49+
evaluate to a function that takes 2 arguments, key and value. The container option should be a CSS selector, and defaults to "body".
50+
You can also pass an object to the tour-options attribute that will override any other attribute options.
51+
52+
### TourStep Directive
53+
54+
The tour-step directive takes all the options available in Bootstrap Tour, with a few alterations. Instead of next and prev options, just use the "order" option.
55+
Order is used as a weighting (0 is first) and the plugin will dynamically determine which ones come before and after. If order is ommitted, it will default to 0.
56+
Multiple steps can have the same order, and those will display in the order that they are linked (usually the order in which they appear in the DOM.)
57+
If order is omitted from all tour-steps, the order will be whatever order in which they are linked. Steps can be skipped by passing the "skip" option an expression that evaluates to a boolean.
58+
The expression is evaluated before each step, so it can be a dynamic expression. This is useful if you have steps in a global layout, but only want to show them on the home page.
59+
Steps that are on hidden elements will not be shown. (Hidden means truly hidden, not obscured.)
60+
The title and contents options are watched, so an interpolated value can be passed.
61+
62+
## TODO's
63+
64+
- Add template support (both string templates and template URLs)
65+
- Write some tests!! (Come on Ben, stop being lazy ;p)
66+
67+
## Build It Yourself
68+
69+
Assuming you have Node, grunt, and bower installed:
70+
71+
npm install
72+
73+
bower install
2174

22-
```JavaScript
23-
// TODO
24-
```
75+
grunt
2576

26-
## Install Choices
27-
- `bower install angular-bootstrap-tour`
28-
- [download the zip](https://github.com/benmarch/angular-bootstrap-tour/archive/master.zip)
2977

30-
## Tasks
78+
## Notes
3179

32-
All tasks can be run by simply running `grunt` or with the `npm test` command, or individually:
80+
I am using this in a personal project, but I haven't needed to use all the Bootstrap Tour options. This means that some of them might not be working
81+
due to the option values either not being passed correctly, or not being passed as interpolated values.
82+
If you run across any issues please report them with an example and I will fix them ASAP, or fork me and create a PR.
83+
I will have support for templates very soon, hopefully this week.
3384

34-
* `grunt lint` will lint source code for syntax errors and anti-patterns.
35-
* `grunt gpa` will analyze source code against complexity thresholds.
36-
* `grunt test` will run the jasmine unit tests against the source code.
37-
* `grunt test-min` will run the jasmine unit tests against the minified code.
85+
Thanks and enjoy!
3886

3987
## License
4088

0 commit comments

Comments
 (0)