|
| 1 | +# angular-bootstrap-tour |
| 2 | +[![Bower Version][bower-image]][bower-url] |
| 3 | + |
| 4 | +## No more jQuery!! |
| 5 | + |
| 6 | +This repo is a work in progress to replace [Angular Bootstrap Tour](http://github.com/benmarch/angular-bootstrap-tour). |
| 7 | + |
| 8 | +Stand by, full test suite to come, as well as implementing as many of Bootstrap Tour's features as possible. |
| 9 | +**Everything below was copied from other repo and needs to be reviewed** |
| 10 | + |
| 11 | +## About |
| 12 | + |
| 13 | +This is a simple Angular wrapper around [Bootstrap Tour](http://www.bootstraptour.com). |
| 14 | +Simply add the "tour" directive anywhere, and add the "tour-step" directive to any element within "tour" that needs a tip. |
| 15 | + |
| 16 | +All [options](http://bootstraptour.com/api/) are available by adding the corresponding attributes to the directive element. |
| 17 | + |
| 18 | +There is also a "skip" option that if evaluates to true, will skip over the step. |
| 19 | + |
| 20 | +This repository was scaffolded with [generator-microjs](https://github.com/daniellmb/generator-microjs). |
| 21 | + |
| 22 | +## Getting Started |
| 23 | +Get the package: |
| 24 | + |
| 25 | + bower install angular-bootstrap-tour |
| 26 | + |
| 27 | +Add the script tags: |
| 28 | + |
| 29 | + <script src="bower_components/jquery/dist/jquery.js"></script> |
| 30 | + <script src="bower_components/angular/angular.js"></script> |
| 31 | + <script src="bower_components/bootstrap/dist/js/bootstrap.js"></script> |
| 32 | + <script src="bower_components/bootstrap-tour/build/js/bootstrap-tour.js"></script> |
| 33 | + <script src="bower_components/angular-bootstrap-tour/dist/angular-bootstrap-tour.js"></script> |
| 34 | + |
| 35 | +And the Bootstrap Tour CSS (or create your own): |
| 36 | + |
| 37 | + <link rel="stylesheet" href="bower_components/bootstrap-tour/build/css/bootstrap-tour.css" /> |
| 38 | + |
| 39 | +Then add the module to your app: |
| 40 | + |
| 41 | + angular.module('myApp', ['bm.uiTour']); |
| 42 | + |
| 43 | +## Configuration |
| 44 | + |
| 45 | +The TourConfigProvider allows you to set a couple options: |
| 46 | +- `prefixOptions` {boolean, default: false} if set to true will require directive options to be prefixed to avoid conflicts |
| 47 | +- `prefix` {string, default: 'uiTour'} the prefix to use if `prefixOptions` is set to `true` |
| 48 | + |
| 49 | +Use `TourConfigProvider.set(<option>, <value>)` in your app's config block to change the settings |
| 50 | + |
| 51 | +You can use either `tour` and `tourStep` or `uiTour` and `uiTourStep` as directive names without changing config. |
| 52 | + |
| 53 | +## Examples |
| 54 | + |
| 55 | + <div tour placement="top" on-end="onTourEnd(tour)" after-get-state="afterGetStateFunction" template-url="tour_template.html"> |
| 56 | + <div id="mainMenu" tour-step title="Main Menu" content="{{mainMenuDescription}}" order="0" skip="pageName !== 'home'"> |
| 57 | + ... |
| 58 | + </div> |
| 59 | + |
| 60 | + ... |
| 61 | + |
| 62 | + </div> |
| 63 | + |
| 64 | + |
| 65 | +### Tour Directive |
| 66 | + |
| 67 | +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. |
| 68 | +Values of event handler options will be evaluated against the tour's scope. For the afterGetState, afterSetState, and afterRemoveState, the value should |
| 69 | +evaluate to a function that takes 2 arguments, key and value. The container option should be a CSS selector, and defaults to "body". |
| 70 | +You can also pass an object to the tour-options attribute that will override any other attribute options. |
| 71 | + |
| 72 | +### TourStep Directive |
| 73 | + |
| 74 | +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. |
| 75 | +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. |
| 76 | +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.) |
| 77 | +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. |
| 78 | +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. |
| 79 | +Steps that are on hidden elements will not be shown. (Hidden means truly hidden, not obscured.) |
| 80 | +The title and contents options are watched, so an interpolated value can be passed. |
| 81 | + |
| 82 | +## Compatibility |
| 83 | + |
| 84 | +I have tested it and found it working in the following browsers: |
| 85 | + |
| 86 | +- IE8, 9, 10, 11 |
| 87 | +- Firefox 32 |
| 88 | +- Chrome 37 |
| 89 | +- Safari 7 |
| 90 | + |
| 91 | + |
| 92 | +## TODO's |
| 93 | + |
| 94 | +- Write some tests!! (Come on Ben, stop being lazy ;p) |
| 95 | + |
| 96 | +## Build It Yourself |
| 97 | + |
| 98 | +Assuming you have Node, grunt, and bower installed: |
| 99 | + |
| 100 | + npm install |
| 101 | + |
| 102 | + bower install |
| 103 | + |
| 104 | + grunt |
| 105 | + |
| 106 | +## Demo |
| 107 | + |
| 108 | +I have set up a simple demo using the Bootswatch Cerulean demo page (one of my favorite themes.) To run the demo run `grunt demo` and open demo/index.html in the browser. |
| 109 | + |
| 110 | + |
| 111 | +## Notes |
| 112 | + |
| 113 | +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 |
| 114 | +due to the option values either not being passed correctly, or not being passed as interpolated values. |
| 115 | +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. |
| 116 | +You can now pass a template URL to either the tour or tour-step directives, and the template will be linked to whichever scope the template is specified on. |
| 117 | +(ie. if you add the template URL to the tour directive, it will always use the tour directive's scope, if you add it to a step, it will use the step's scope.) |
| 118 | +Alternatively, you can specify an expression that evaluates to a string that will be used as the template (using the "template" attribute.) |
| 119 | + |
| 120 | +Thanks and enjoy! |
| 121 | + |
| 122 | +## License |
| 123 | + |
| 124 | +(The MIT License) |
| 125 | + |
| 126 | +Copyright (c) 2014 |
| 127 | + |
| 128 | +Permission is hereby granted, free of charge, to any person obtaining |
| 129 | +a copy of this software and associated documentation files (the |
| 130 | +'Software'), to deal in the Software without restriction, including |
| 131 | +without limitation the rights to use, copy, modify, merge, publish, |
| 132 | +distribute, sublicense, and/or sell copies of the Software, and to |
| 133 | +permit persons to whom the Software is furnished to do so, subject to |
| 134 | +the following conditions: |
| 135 | + |
| 136 | +The above copyright notice and this permission notice shall be |
| 137 | +included in all copies or substantial portions of the Software. |
| 138 | + |
| 139 | +THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND, |
| 140 | +EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF |
| 141 | +MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. |
| 142 | +IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY |
| 143 | +CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, |
| 144 | +TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE |
| 145 | +SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. |
| 146 | + |
| 147 | + |
| 148 | + |
| 149 | +[build-url]: https://travis-ci.org/benmarch/angular-bootstrap-tour |
| 150 | +[build-image]: http://img.shields.io/travis/benmarch/angular-bootstrap-tour.png |
| 151 | + |
| 152 | +[gpa-url]: https://codeclimate.com/github/benmarch/angular-bootstrap-tour |
| 153 | +[gpa-image]: https://codeclimate.com/github/benmarch/angular-bootstrap-tour.png |
| 154 | + |
| 155 | +[coverage-url]: https://codeclimate.com/github/benmarch/angular-bootstrap-tour/code?sort=covered_percent&sort_direction=desc |
| 156 | +[coverage-image]: https://codeclimate.com/github/benmarch/angular-bootstrap-tour/coverage.png |
| 157 | + |
| 158 | +[depstat-url]: https://david-dm.org/benmarch/angular-bootstrap-tour |
| 159 | +[depstat-image]: https://david-dm.org/benmarch/angular-bootstrap-tour.png?theme=shields.io |
| 160 | + |
| 161 | +[issues-url]: https://github.com/benmarch/angular-bootstrap-tour/issues |
| 162 | +[issues-image]: http://img.shields.io/github/issues/benmarch/angular-bootstrap-tour.png |
| 163 | + |
| 164 | +[bower-url]: http://bower.io/search/?q=angular-bootstrap-tour |
| 165 | +[bower-image]: https://badge.fury.io/bo/angular-bootstrap-tour.png |
| 166 | + |
| 167 | +[downloads-url]: https://www.npmjs.org/package/angular-bootstrap-tour |
| 168 | +[downloads-image]: http://img.shields.io/npm/dm/angular-bootstrap-tour.png |
| 169 | + |
| 170 | +[npm-url]: https://www.npmjs.org/package/angular-bootstrap-tour |
| 171 | +[npm-image]: https://badge.fury.io/js/angular-bootstrap-tour.png |
| 172 | + |
| 173 | +[irc-url]: http://webchat.freenode.net/?channels=angular-bootstrap-tour |
| 174 | +[irc-image]: http://img.shields.io/badge/irc-%23angular-bootstrap-tour-brightgreen.png |
| 175 | + |
| 176 | +[gitter-url]: https://gitter.im/benmarch/angular-bootstrap-tour |
| 177 | +[gitter-image]: http://img.shields.io/badge/gitter-benmarch/angular-bootstrap-tour-brightgreen.png |
| 178 | + |
| 179 | +[tip-url]: https://www.gittip.com/benmarch |
| 180 | +[tip-image]: http://img.shields.io/gittip/benmarch.png |
0 commit comments