|
1 | 1 | # 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] |
6 | 2 | [![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] |
11 | 3 |
|
12 | 4 | ## About
|
13 | 5 |
|
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. |
15 | 12 |
|
16 | 13 | This repository was scaffolded with [generator-microjs](https://github.com/daniellmb/generator-microjs).
|
17 | 14 |
|
| 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 | + |
18 | 33 | ## Examples
|
19 | 34 |
|
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 |
21 | 74 |
|
22 |
| -```JavaScript |
23 |
| - // TODO |
24 |
| -``` |
| 75 | + grunt |
25 | 76 |
|
26 |
| -## Install Choices |
27 |
| -- `bower install angular-bootstrap-tour` |
28 |
| -- [download the zip](https://github.com/benmarch/angular-bootstrap-tour/archive/master.zip) |
29 | 77 |
|
30 |
| -## Tasks |
| 78 | +## Notes |
31 | 79 |
|
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. |
33 | 84 |
|
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! |
38 | 86 |
|
39 | 87 | ## License
|
40 | 88 |
|
|
0 commit comments