├── .bowerrc
├── .gitignore
├── .jsbeautifyrc
├── .jshintrc
├── .travis.yml
├── Gruntfile.js
├── LICENSE
├── README.md
├── bower.json
├── example
    ├── app.js
    ├── example-controller.js
    ├── example.html
    ├── index.html
    └── user
    │   ├── accounts.html
    │   └── settings
    │       ├── settings-controller.js
    │       └── settings.html
├── karma.conf.js
├── package.json
└── src
    ├── ui-router-tabs.js
    └── ui-router-tabs.spec.js


/.bowerrc:
--------------------------------------------------------------------------------
1 | {
2 |   "directory" : "bower_components"
3 | }


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | coverage
2 | bower_components
3 | node_modules
4 | .idea
5 | 


--------------------------------------------------------------------------------
/.jsbeautifyrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "indent_size":               2,
 3 |   "indent_char":               " ",
 4 |   "indent_level":              0,
 5 |   "indent_with_tabs":          false,
 6 |   "preserve_newlines":         true,
 7 |   "max_preserve_newlines":     2,
 8 |   "jslint_happy":              false,
 9 |   "brace_style":               "end-expand",
10 |   "indent_scripts":            "keep",
11 |   "keep_array_indentation":    true,
12 |   "keep_function_indentation": false,
13 |   "space_before_conditional":  true,
14 |   "break_chained_methods":     false,
15 |   "eval_code":                 false,
16 |   "unescape_strings":          false,
17 |   "wrap_line_length":          0
18 | }
19 | 


--------------------------------------------------------------------------------
/.jshintrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "globalstrict": true,
 3 |   "debug":        false,
 4 |   "node":         false,
 5 |   "devel":        true,
 6 |   "boss":         true,
 7 |   "curly":        false,
 8 |   "eqeqeq":       true,
 9 |   "eqnull":       true,
10 |   "expr":         true,
11 |   "immed":        true,
12 |   "loopfunc":     true,
13 |   "noarg":        true,
14 |   "onevar":       false,
15 |   "quotmark":     "single",
16 |   "smarttabs":    true,
17 |   "trailing":     true,
18 |   "undef":        true,
19 |   "unused":       true,
20 |   "globals":      {
21 |     "angular":  false,
22 |     "$":        false,
23 |     "jQuery":   false,
24 |     "Backbone": false,
25 |     "_":        false,
26 |     "document": false,
27 |     "module": false,
28 |     "exports": false
29 |   }
30 | }
31 | 


--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
1 | language: node_js
2 | node_js:
3 |   - "4.1"
4 | before_script:
5 |   - npm install -g bower
6 |   - bower install
7 | script: "grunt"
8 | 


--------------------------------------------------------------------------------
/Gruntfile.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | module.exports = function(grunt) {
 4 | 
 5 |   var beautifyFiles = ['!Gruntfile.js', '!npm-shrinkwrap.json', 'src/**/*.{html,js}', '!app/bower_components/**/*'];
 6 | 
 7 |   // Load grunt tasks automatically
 8 |   require('load-grunt-tasks')(grunt);
 9 | 
10 |   // Define the configuration for all the tasks
11 |   grunt.initConfig({
12 | 
13 |     connect: {
14 |              server: {
15 |                options: {
16 |                  port: 9000
17 |                }
18 |              }
19 |     },
20 | 
21 |     watch: {
22 |            scripts: {
23 |                     files: ['src/**/*'],
24 |                     tasks: ['jshint', 'karma'],
25 |                     options: {
26 |                              spawn: false
27 |                     }
28 |            }
29 | 
30 |     },
31 | 
32 |     // verifies we have formatted our js and HTML according to our style conventions
33 |     jsbeautifier: {
34 |       verify : {
35 |         src:   beautifyFiles,
36 |         options: {
37 |           config: '.jsbeautifyrc',
38 |           mode: 'VERIFY_ONLY'
39 |         }
40 |       },
41 |       update: {
42 |         src:   beautifyFiles,
43 |         options: {
44 |           config: '.jsbeautifyrc'
45 |         }
46 |       }
47 | 
48 |     },
49 | 
50 |     // Make sure code styles are up to par and there are no obvious mistakes
51 |     jshint: {
52 |       options: {
53 |         jshintrc: '.jshintrc',
54 |         reporter: require('jshint-stylish')
55 |       },
56 |       src:     ['src/!(*spec).js']
57 |     },
58 | 
59 |     // Test settings
60 |     karma: {
61 |       unit: {
62 |         options:    {
63 |           logLevel: 'DEBUG'
64 |         },
65 |         browsers:   ['PhantomJS'],
66 |         configFile: 'karma.conf.js',
67 |         singleRun:  true,
68 |         autoWatch:  false
69 |       }
70 |     },
71 |     coveralls: {
72 |       options: {
73 |         coverage_dir:'coverage',
74 |         directory:'coverage/lcov.info',
75 |         debug: true,
76 |         dryRun: false,
77 |         recursive: false
78 |       }
79 |     }
80 |   });
81 | 
82 |   grunt.registerTask('serve', ['connect', 'watch']);
83 |   grunt.registerTask('beautify', ['jsbeautifier:update']);
84 |   grunt.registerTask('default', [
85 |     'jsbeautifier:verify', 'jshint', 'karma', 'coveralls'
86 |   ]);
87 | };
88 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | Copyright 2015 Robert Pocklington
 2 | http://github.com/rpocklin/ui-router-tabs
 3 | 
 4 | Permission is hereby granted, free of charge, to any person obtaining
 5 | a copy of this software and associated documentation files (the
 6 | "Software"), to deal in the Software without restriction, including
 7 | without limitation the rights to use, copy, modify, merge, publish,
 8 | distribute, sublicense, and/or sell copies of the Software, and to
 9 | permit persons to whom the Software is furnished to do so, subject to
10 | the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be
13 | included in all copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
16 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
17 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
18 | NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
19 | LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
20 | OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
21 | WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # UI Router Tabs
  2 | 
  3 | Leverages [UI Bootstrap](http://angular-ui.github.io/bootstrap/) and [UI Router](https://github.com/angular-ui/ui-router) to give you full-strength route-driven tabs in Angular.js.
  4 | 
  5 | [![Build Status](https://secure.travis-ci.org/rpocklin/ui-router-tabs.svg)](http:/travis-ci.org/rpocklin/ui-router-tabs)
  6 | [![Coverage Status](https://coveralls.io/repos/rpocklin/ui-router-tabs/badge.svg)](https://coveralls.io/r/rpocklin/ui-router-tabs)
  7 |    
  8 | [![Gratipay](https://img.shields.io/gratipay/rpocklin.svg)](https://gratipay.com/rpocklin/)
  9 | 
 10 | 
 11 | ## Example / Demo
 12 | [Link](http://rpocklin.github.io/ui-router-tabs/example/index.html)
 13 | 
 14 | ## How to Install / Usage
 15 | 
 16 | 1. Install the plugin into your Angular.js project, manually or via `bower install angular-ui-router-tabs`
 17 | 1. Add `ui.router.tabs` as a new module dependency in your angular app.
 18 | 
 19 | 1. Define your routes in a hierarchy that makes sense for a tabbed layout, Eg:
 20 |   ```javascript
 21 |       $stateProvider.state('user', {
 22 |         url:         '',
 23 |         controller: 'UserCtrl',
 24 |         templateUrl: 'example.html'
 25 |       }).state('user.settings', {
 26 |         url:         '/user/settings',
 27 |         templateUrl: 'user/settings.html'
 28 |       }).state('user.accounts', {
 29 |         url:         '/user/accounts',
 30 |         templateUrl: 'user/accounts.html'
 31 |       });
 32 |   ```
 33 | 
 34 | 1. Define your `tabData` (or similiar variable) in the root view controller of your tabs (ie. `UserCtrl` in the case above) Eg:
 35 |   ```javascript
 36 |       $scope.tabData   = [
 37 |         {
 38 |           heading: 'Settings',
 39 |           route:   'user.settings'
 40 |         },
 41 |         {
 42 |           heading: 'Accounts',
 43 |           route:   'user.accounts',
 44 |           disable: true
 45 |         }
 46 |       ];
 47 |   ```
 48 | 
 49 |   NOTE: You can also specify `params` and `options` to pass special parameters or options for the target route to UI Router, Eg:
 50 |   ```javascript
 51 |       {
 52 |         heading: 'Accounts',
 53 |         route:   'user.accounts',
 54 |         params:  {
 55 |                    accountId: account.id
 56 |                  },
 57 |         options: {}
 58 |       }
 59 |   ```
 60 | 
 61 | 1. Declare the following in your the parent HTML view template `<tabs data="tabData" type="tabs"></tabs>`.
 62 | 
 63 |   Optional attributes for the `<tabs>` (which are passed on to the UI Bootstrap component) are:
 64 | 
 65 |   * `type: [ 'tabs' | 'pills' ]`
 66 |   * `vertical: boolean`
 67 |   * `justified: boolean`
 68 |   * `class: string`
 69 |   * `templateUrl: <template url name>`
 70 | 
 71 |   NOTE: If you use a custom template, you may need to define a `ui-view` placeholder for the child content panes in the same HTML view template eg. `<ui-view></ui-view>`.
 72 | 
 73 | ## Tips
 74 | 
 75 | * UI Bootstrap Tabs will not select a tab by default.  If you want it to, specify the target sub-route when you
 76 |   show the tabs (ie. link the `ui-view` containing the tabs with the default (first) element as the sub-route `example/#/user/settings` in the example.)
 77 | * You can override the default directive template by specifying `template-url="my_template.html"` on the `<tabs>` element.
 78 | * You can enable / disable tabs by specifying `disable: true` in the `tabData` (can be dynamically set).
 79 | * You can use `<tab-heading>` in a custom directive template to add any HTML into the tab title (eg. icons)
 80 | * You can update the `tabData` variable dynamically, if you want to.
 81 | * You can move the `<tabs>` tag around to wherever you want the tab listing to appear.  (left-positioned is the best spot to enable responsive design.).
 82 | * Each tab will have a default class of `tab`, an active tab will have the `active` class.
 83 | 
 84 | 
 85 | ## Running Locally
 86 | 
 87 | 1. Checkout git repository locally: `git clone git@github.com:rpocklin/ui-router-tabs.git`
 88 | 1. `npm install`
 89 | 1. `bower install`
 90 | 1. `grunt serve`
 91 | 1. View `http://localhost:9000/example/` in your browser to see the example.
 92 | 
 93 | 
 94 | ## Contributing
 95 | 
 96 | 1. Fork it
 97 | 2. Create your feature branch (`git checkout -b my-new-feature`)
 98 | 3. Commit your changes (`git commit -am 'Added some feature'`) - please consider adding tests!
 99 | 4. Push to the branch (`git push origin my-new-feature`)
100 | 5. Run `grunt` and ensure there are no errors.
101 | 6. Create a new Pull Request
102 | 
103 | 
104 | ## History
105 | * 2.0.2 Fixed invalid `<ui-view>` placement in default template.
106 | * 2.0.1 Fixed invalid html in default template (missing `<div>`).
107 | * 2.0.0 Added `class` and `template-url` attributes on `uib-tab` and began using `<uib-tab-heading>` tag.
108 | * 1.8.0 Added inline template by default (as requested) and allowed customer classes parameter.
109 | * 1.7.0 Added `uib` prefix for UI Bootstrap elements (as per v0.14.0).  See [#47](/../../pull/47).  <br/>Upgraded angular-bootstrap to v14.0.
110 | * 1.6.0 Renamed `disabled` attribute to `disable` in line with UI Bootstrap `<tab>`.  See [#39](/../../issues/39).
111 | * 1.5.1 Removed `bower_components` from repository.  See [#40](/../../pull/40).
112 | * 1.5.0 Bumped `angular-bootstrap` dependency to v0.13.0 (fixes default tab being auto-selected).
113 | * 1.4.3 Added handling of `$stateChangeCancel`, `$stateChangeError` and `$stateNotFound` to reset active tab.
114 | * 1.4.2 Added feature to update tabs if state change event is cancelled.  See [#19](/../../pull/19).
115 | * 1.4.1 Bumped angular-bootstrap dependency to v0.12.1.
116 | * 1.4.0 Removed default `$state.go(..)` route option, added `disabled` option and updated jsbeautifier.  See [#16](/../../pull/16).
117 | * 1.3.0 Improved state equality checking to include params and options.
118 | * 1.2.0 Prevented reload of current state again.  See [#11](/../../pull/11).
119 | * 1.1.4 Added support for `strict-di` mode.
120 | * 1.1.3 Fixed tab switching when using `ngTouch`.  See [#2](/../../issues/2).
121 | * 1.1.2 Added `$stateChangeSuccess` watcher to update parent tab(s) when using <br/>`ui-sref` or `$state.go()`.  See [#1](/../../issues/1).
122 | * 1.1.0 Added nested tab support (tabs within tabs)
123 | * 1.0.0 Initial release
124 | 
125 | ## License
126 | 
127 | Released under the MIT License. See the [LICENSE][license] file for further details.
128 | 
129 | [license]: https://github.com/rpocklin/ui-router-tabs/blob/master/LICENSE
130 | 


--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "angular-ui-router-tabs",
 3 |   "version": "2.0.2",
 4 |   "license": "MIT",
 5 |   "main": "src/ui-router-tabs.js",
 6 |   "keywords": [
 7 |     "angular, tabs, ui-router, bootstrap"
 8 |   ],
 9 |   "ignore": [
10 |     "**/.*",
11 |     "*.yml",
12 |     ".jshintrc",
13 |     "src/*.spec.js",
14 |     "node_modules",
15 |     "bower_components",
16 |     "example",
17 |     "Gruntfile.js",
18 |     "package.json",
19 |     "component.json",
20 |     "bower.json",
21 |     "karma.conf.js"
22 |   ],
23 |   "dependencies": {
24 |     "angular": "^1.4.0",
25 |     "angular-bootstrap": "^1.2.1",
26 |     "angular-ui-router": "^0.2.14",
27 |     "angular-sanitize": "^1.4.0"
28 |   },
29 |   "devDependencies": {
30 |     "angular-mocks": "^1.4.0",
31 |     "es5-shim": "^4.5.7",
32 |     "sinon": "1.9.0",
33 |     "jasmine-sinon": "0.3.1",
34 |     "underscore": "~1.7.0",
35 |     "jquery": "~2.1.1",
36 |     "bootstrap": "~3.2.0"
37 |   }
38 | }
39 | 


--------------------------------------------------------------------------------
/example/app.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | var app = angular.module('example', [
 4 |   'ui.router',
 5 |   'ui.bootstrap',
 6 |   'ui.router.tabs'
 7 | ]);
 8 | 
 9 | app.config(['$stateProvider', function($stateProvider) {
10 |   $stateProvider.state('user', {
11 |     url:         '',
12 |     controller: 'ExampleCtrl',
13 |     templateUrl: 'example.html'
14 |   }).state('user.accounts', {
15 |     url:         '/user/accounts',
16 |     templateUrl: 'user/accounts.html'
17 |   }).state('user.settings', {
18 |     url:         '/user/settings',
19 |     controller: 'SettingsCtrl',
20 |     templateUrl: 'user/settings/settings.html'
21 |   }).state('user.settings.one', {
22 |     url:         '/one',
23 |     template: '<div>Settings nested route 1</div>'
24 |   }).state('user.settings.two', {
25 |     url:         '/two',
26 |     template: '<div>Settings nested route 2</div>'
27 |   });
28 | }]);
29 | 


--------------------------------------------------------------------------------
/example/example-controller.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | var ExampleCtrl = ['$rootScope', '$state', '$scope', '$stateParams', function($rootScope, $state, $scope) {
 4 | 
 5 |   $scope.initialise = function() {
 6 | 
 7 |     $scope.go = function(state) {
 8 |       $state.go(state);
 9 |     };
10 | 
11 |     $scope.tabData   = [
12 |       {
13 |         heading: '<i>Settings</i>',
14 |         route:   'user.settings'
15 |       },
16 |       {
17 |         heading: '<i>Accounts</i>',
18 |         route:   'user.accounts'
19 |       }
20 |     ];
21 |   };
22 | 
23 |   $scope.initialise();
24 | }];
25 | 
26 | angular.module('example').controller('ExampleCtrl', ExampleCtrl);
27 | 


--------------------------------------------------------------------------------
/example/example.html:
--------------------------------------------------------------------------------
 1 | <h1>User Details</h1>
 2 | 
 3 | <div class="row">
 4 |   <div class="col-md-2">
 5 |     <tabs data="tabData" type="pills" template-url="ui-router-tabs-custom-ui-view-template.html"></tabs>
 6 |   </div>
 7 | 
 8 |   <!-- custom location of ui-view -->
 9 |   <div class="col-md-10">
10 |     <ui-view autoscroll></ui-view>
11 |   </div>
12 | </div>


--------------------------------------------------------------------------------
/example/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <head>
 3 |   <meta charset="utf-8">
 4 |   <meta http-equiv="X-UA-Compatible" content="IE=edge">
 5 |   <title>UI Router Example</title>
 6 |   <meta name="viewport" content="width=device-width">
 7 |   <link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.css" />
 8 | </head>
 9 | 
10 | <body ng-app="example" ng-strict-di>
11 | 
12 | <div class="container-fluid">
13 |   <div ui-view></div>
14 | </div>
15 | 
16 | <script src="../bower_components/jquery/dist/jquery.js"></script>
17 | <script src="../bower_components/angular/angular.js"></script>
18 | <script src="../bower_components/angular-sanitize/angular-sanitize.js"></script>
19 | <script src="../bower_components/bootstrap/dist/js/bootstrap.js"></script>
20 | <script src="../bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
21 | <script src="../bower_components/angular-ui-router/release/angular-ui-router.js"></script>
22 | <script src="../src/ui-router-tabs.js"></script>
23 | 
24 | <script src="app.js"></script>
25 | <script src="example-controller.js"></script>
26 | <script src="user/settings/settings-controller.js"></script>
27 | 
28 | </body>
29 | </html>
30 | 


--------------------------------------------------------------------------------
/example/user/accounts.html:
--------------------------------------------------------------------------------
1 | <h3>Accounts</h3>
2 | 
3 | <a ui-sref="user.settings.one">Settings > One</a>&nbsp;
4 | <button class="btn btn-default" ng-click="go('user.settings.one')">Settings > One</button>
5 | 


--------------------------------------------------------------------------------
/example/user/settings/settings-controller.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | var SettingsCtrl = ['$rootScope', '$scope', '$stateParams', function($rootScope, $scope) {
 4 | 
 5 |   $scope.initialise = function() {
 6 | 
 7 |     $scope.tabData   = [
 8 |       {
 9 |         heading: 'One',
10 |         route:   'user.settings.one',
11 |         url: 'user/settings/one/:test',
12 |         controller: 'ExampleCtrl',
13 |         class: 'first-tab'
14 |       },
15 |       {
16 |         heading: 'Two',
17 |         route:   'user.settings.two',
18 |         class: 'second-tab'
19 |       }
20 |     ];
21 |   };
22 | 
23 |   $scope.initialise();
24 | }];
25 | 
26 | angular.module('example').controller('SettingsCtrl', SettingsCtrl);
27 | 


--------------------------------------------------------------------------------
/example/user/settings/settings.html:
--------------------------------------------------------------------------------
1 | <h3>Settings</h3>
2 | 
3 | <div class="row">
4 |   <div class="col-md-2">
5 |     <!-- default location of ui-view (inside tabs element) -->
6 |     <tabs data="tabData" type="pills"></tabs>
7 |   </div>
8 | </div>


--------------------------------------------------------------------------------
/karma.conf.js:
--------------------------------------------------------------------------------
 1 | // Karma configuration
 2 | // http://karma-runner.github.io/0.10/config/configuration-file.html
 3 | 
 4 | module.exports = function(config) {
 5 |   config.set({
 6 |     // base path, that will be used to resolve files and exclude
 7 |     basePath: '',
 8 | 
 9 |     // testing framework to use (jasmine/mocha/q  unit/...)
10 |     frameworks: ['jasmine'],
11 | 
12 |     // list of files / patterns to load in the browser
13 |     files:      [
14 |       'bower_components/es5-shim/es5-shim.js',
15 |       'bower_components/jquery/dist/jquery.js',
16 |       'bower_components/angular/angular.js',
17 |       'bower_components/angular-sanitize/angular-sanitize.js',
18 |       'bower_components/angular-bootstrap/ui-bootstrap.js',
19 |       'bower_components/angular-bootstrap/ui-bootstrap-tpls.js',
20 |       'bower_components/underscore/underscore.js',
21 |       'bower_components/sinonjs/sinon.js',
22 |       'bower_components/jasmine-sinon/lib/jasmine-sinon.js',
23 |       'bower_components/angular-mocks/angular-mocks.js',
24 |       'bower_components/angular-ui-router/release/angular-ui-router.js',
25 |       'src/**/*.html',
26 |       'src/**/*.js'
27 |     ],
28 | 
29 |     exclude:   [],
30 |     port: 8080,
31 |     logLevel:  config.LOG_INFO,
32 |     singleRun: true,
33 |     autoWatch: false,
34 | 
35 |     // coverage reporter generates the coverage
36 |     reporters: ['progress', 'coverage'],
37 | 
38 |     preprocessors:    {
39 |       'src/!(*spec).js': ['coverage'],
40 |       'src/**/*.html': ['ng-html2js']
41 |     },
42 | 
43 |     ngHtml2JsPreprocessor: {
44 |       // you might need to strip the main directory prefix in the URL request
45 |       stripPrefix: 'src/',
46 |       moduleName: 'templates'
47 |     },
48 | 
49 |     // optionally, configure the reporter
50 |     coverageReporter: {
51 |       dir: 'coverage',
52 |       subdir: '.',
53 |       reporters: [
54 |         {type: 'text-summary'},
55 |         {type: 'lcov'},
56 |         {type: 'clover'}
57 |       ]
58 |     }
59 |   });
60 | };
61 | 
62 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "angular-ui-router-tabs",
 3 |   "description": "Idiot-proof tab panes with route support using Angular.js + Bootstrap 3 + UI Router.",
 4 |   "homepage": "http://github.com/rpocklin/ui-router-tabs",
 5 |   "author": "Robert Pocklington <rpocklin@gmail.com>",
 6 |   "main": "src/ui-router-tabs.js",
 7 |   "repository": {
 8 |     "type": "git",
 9 |     "url": "http://github.com/rpocklin/ui-router-tabs.git"
10 |   },
11 |   "keywords": [
12 |     "angular",
13 |     "tabs",
14 |     "navigation",
15 |     "ui-router",
16 |     "bootstrap"
17 |   ],
18 |   "version": "2.0.2",
19 |   "license": "MIT",
20 |   "devDependencies": {
21 |     "grunt": "~0.4.1",
22 |     "grunt-autoprefixer": "~0.7.3",
23 |     "grunt-cli": "~0.1.13",
24 |     "grunt-contrib-connect": "~0.8.0",
25 |     "grunt-contrib-jshint": "~0.7.1",
26 |     "grunt-contrib-watch": "~0.6.1",
27 |     "grunt-jsbeautifier": "^0.2.10",
28 |     "grunt-karma": "^0.12.2",
29 |     "grunt-karma-coveralls": "~2.3.0",
30 |     "jshint-stylish": "~0.1.3",
31 |     "karma": "^0.13.22",
32 |     "karma-coverage": "~0.2.4",
33 |     "karma-jasmine": "~0.1.5",
34 |     "karma-ng-html2js-preprocessor": "~0.1.0",
35 |     "karma-phantomjs-launcher": "^1.0.0",
36 |     "load-grunt-tasks": "~0.6.0",
37 |     "phantomjs-prebuilt": "^2.1.7",
38 |     "static-site-generator-webpack-plugin": "^2.0.1",
39 |     "time-grunt": "~0.2.1"
40 |   },
41 |   "engines": {
42 |     "node": ">=4.1.0"
43 |   },
44 |   "scripts": {
45 |     "test": "grunt karma"
46 |   }
47 | }
48 | 


--------------------------------------------------------------------------------
/src/ui-router-tabs.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | /**
  4 |  * Permits declarative (and dynamic) definitions of tab links with full routes.
  5 |  *
  6 |  * requires 'ui.router' and 'ui.bootstrap'
  7 |  * (uses tabset and tab directives in ui.bootstrap and route changes in ui.router)
  8 |  *
  9 |  * You can define (for styling) the attributes type="pills" and vertical="true | false" and justified="true | false"
 10 |  * You can also specify arbitrary CSS classes to be added to each tab by providing them as values with the "class" parameter
 11 |  * (for the 'tabs' or 'tab' elements, and the 'template-url' for custom tab rendering.
 12 |  *
 13 |  * Watches the $stateChangeXX events so it can update the parent tab(s) when using $state.go or ui-sref anchors.
 14 |  *
 15 |  * See ui-router-tabs.spec.js for tests.
 16 |  *
 17 |  * Author: Robert Pocklington (rpocklin@gmail.com)
 18 |  * License: MIT
 19 |  *
 20 |  */
 21 | 
 22 | /* Common.js package manager support (e.g. ComponentJS, WebPack) */
 23 | if (typeof module !== 'undefined' && typeof exports !== 'undefined' && module.exports === exports) {
 24 |   module.exports = 'ui.router.tabs';
 25 | }
 26 | 
 27 | angular.module('ui.router.tabs', ['ngSanitize']);
 28 | angular.module('ui.router.tabs').directive(
 29 |   'tabs', ['$rootScope', '$state', function($rootScope, $state) {
 30 | 
 31 |     return {
 32 |       restrict: 'E',
 33 |       scope: {
 34 |         tabs: '=data',
 35 |         type: '@',
 36 |         justified: '@',
 37 |         vertical: '@',
 38 |         class: '@'
 39 |       },
 40 |       link: function(scope) {
 41 | 
 42 |         var updateTabs = function() {
 43 |           scope.update_tabs();
 44 |         };
 45 | 
 46 |         var unbindStateChangeSuccess = $rootScope.$on('$stateChangeSuccess', updateTabs);
 47 |         var unbindStateChangeError = $rootScope.$on('$stateChangeError', updateTabs);
 48 |         var unbindStateChangeCancel = $rootScope.$on('$stateChangeCancel', updateTabs);
 49 |         var unbindStateNotFound = $rootScope.$on('$stateNotFound', updateTabs);
 50 | 
 51 |         scope.$on('$destroy', unbindStateChangeSuccess);
 52 |         scope.$on('$destroy', unbindStateChangeError);
 53 |         scope.$on('$destroy', unbindStateChangeCancel);
 54 |         scope.$on('$destroy', unbindStateNotFound);
 55 |       },
 56 |       controller: ['$scope', function($scope) {
 57 | 
 58 |         if (!$scope.tabs) {
 59 |           throw new Error('UI Router Tabs: \'data\' attribute not defined, please check documentation for how to use this directive.');
 60 |         }
 61 | 
 62 |         if (!angular.isArray($scope.tabs)) {
 63 |           throw new Error('UI Router Tabs: \'data\' attribute must be an array of tab data with at least one tab defined.');
 64 |         }
 65 | 
 66 |         var currentStateEqualTo = function(tab) {
 67 | 
 68 |           var isEqual = $state.is(tab.route, tab.params, tab.options);
 69 |           return isEqual;
 70 |         };
 71 | 
 72 |         $scope.go = function(tab) {
 73 | 
 74 |           if (!currentStateEqualTo(tab) && !tab.disable) {
 75 |             $state.go(tab.route, tab.params, tab.options);
 76 |           }
 77 |         };
 78 | 
 79 |         /* whether to highlight given route as part of the current state */
 80 |         $scope.is_active = function(tab) {
 81 | 
 82 |           var isAncestorOfCurrentRoute = $state.includes(tab.route, tab.params, tab.options);
 83 |           return isAncestorOfCurrentRoute;
 84 |         };
 85 | 
 86 |         $scope.update_tabs = function() {
 87 | 
 88 |           // sets which tab is active (used for highlighting)
 89 |           angular.forEach($scope.tabs, function(tab, index) {
 90 |             tab.params = tab.params || {};
 91 |             tab.options = tab.options || {};
 92 |             tab.class = tab.class || '';
 93 | 
 94 |             tab.active = $scope.is_active(tab);
 95 |             if (tab.active) {
 96 |               $scope.tabs.active = index;
 97 |             }
 98 |           });
 99 |         };
100 | 
101 |         $scope.update_tabs();
102 |     }],
103 |       templateUrl: function(element, attributes) {
104 |         return attributes.templateUrl || 'ui-router-tabs-default-template.html';
105 |       }
106 |     };
107 | }]
108 | ).run(
109 | ['$templateCache', function($templateCache) {
110 |     var CUSTOM_UI_VIEW_TEMPLATE = '<div>' +
111 |       '<uib-tabset active="tabs.active" class="tab-container" type="{{type}}" vertical="{{vertical}}" justified="{{justified}}" class="{{class}}">' +
112 |       '<uib-tab class="tab {{tab.class}}" ng-repeat="tab in tabs" ' +
113 |       'disable="tab.disable" ng-click="go(tab)">' +
114 |       '<uib-tab-heading ng-bind-html="tab.heading"></uib-tab-heading>' +
115 |       '</uib-tab>' +
116 |       '</uib-tabset>' +
117 |       '</div>';
118 | 
119 |     var INLINE_TEMPLATE = '<div>' +
120 |       '<uib-tabset active="tabs.active" class="tab-container" type="{{type}}" vertical="{{vertical}}" justified="{{justified}}" class="{{class}}">' +
121 |       '<uib-tab class="tab {{tab.class}}" ng-repeat="tab in tabs" ' +
122 |       'disable="tab.disable" ng-click="go(tab)">' +
123 |       '<uib-tab-heading ng-bind-html="tab.heading"></uib-tab-heading>' +
124 |       '</uib-tab>' +
125 |       '</uib-tabset>' +
126 |       '<ui-view></ui-view>' +
127 |       '</div>';
128 | 
129 |     $templateCache.put('ui-router-tabs-custom-ui-view-template.html', CUSTOM_UI_VIEW_TEMPLATE);
130 |     $templateCache.put('ui-router-tabs-default-template.html', INLINE_TEMPLATE);
131 | }]
132 | );
133 | 


--------------------------------------------------------------------------------
/src/ui-router-tabs.spec.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | var forceResolveFailure = false;
  4 | 
  5 | var loadData = function() {
  6 |   if (forceResolveFailure) {
  7 |     throw new Error();
  8 |   }
  9 | 
 10 |   return [];
 11 | };
 12 | 
 13 | beforeEach(function() {
 14 | 
 15 |   module('ui.router.tabs');
 16 |   module('ui.router');
 17 |   module('ui.bootstrap');
 18 | 
 19 |   module(function($stateProvider) {
 20 |     $stateProvider
 21 |       .state('menu', {
 22 |         url: '/menu',
 23 |         resolve: {
 24 |           data: loadData
 25 |         }
 26 |       })
 27 |       .state('menu.route1', {
 28 |         url: '/route1',
 29 |         resolve: {
 30 |           data: loadData
 31 |         }
 32 |       }).state('menu.route2', {
 33 |         url: '/route2',
 34 |         resolve: {
 35 |           data: loadData
 36 |         }
 37 |       })
 38 |       .state('notabs', {
 39 |         url: '/notabs',
 40 |         resolve: {
 41 |           data: loadData
 42 |         }
 43 |       });
 44 |   });
 45 | 
 46 |   this.sandbox = sinon.sandbox.create();
 47 |   forceResolveFailure = false;
 48 | });
 49 | 
 50 | afterEach(function() {
 51 |   this.sandbox.restore();
 52 | });
 53 | 
 54 | describe('Directive : UI Router : Tabs', function() {
 55 | 
 56 |   var root_scope, isolate_scope, scope, directive_scope, view, element, state, sandbox, spy;
 57 |   var createView, get_current_state, get_current_params;
 58 |   var $ngView;
 59 |   var params = {};
 60 | 
 61 |   beforeEach(inject(function($rootScope, $state, $templateCache) {
 62 | 
 63 |     createView = function(html, scope) {
 64 |       element = angular.element(view);
 65 | 
 66 |       inject(function($compile) {
 67 |         $ngView = $compile(html)(scope);
 68 |       });
 69 | 
 70 |       scope.$digest();
 71 |       directive_scope = $ngView.isolateScope();
 72 | 
 73 |       return $ngView;
 74 |     };
 75 | 
 76 |     scope = $rootScope.$new();
 77 |     state = $state;
 78 | 
 79 |     root_scope = $rootScope;
 80 | 
 81 |     get_current_state = function() {
 82 |       return state.current.name;
 83 |     };
 84 | 
 85 |     get_current_params = function() {
 86 |       return state.params;
 87 |     };
 88 | 
 89 |     scope.tabConfiguration = [{
 90 |       heading: 'Heading 1A',
 91 |       route: 'menu.route1'
 92 |     }, {
 93 |       heading: 'Heading 1B',
 94 |       route: 'menu.route1',
 95 |       params: {
 96 |         a: 5
 97 |       }
 98 |     }, {
 99 |       heading: 'Heading 2',
100 |       route: 'menu.route2',
101 |       params: params
102 |     }];
103 | 
104 |     view = '<tabs data="tabConfiguration" type="pills" class="someClass"></tabs>';
105 |     sandbox = this.sandbox;
106 |   }));
107 | 
108 |   var renderView = function() {
109 |     $ngView = createView(view, scope);
110 | 
111 |     isolate_scope = $ngView.isolateScope();
112 |     spy = sandbox.spy(state, 'go');
113 |   };
114 | 
115 |   it('should define the tabs directive with isolated scope', function() {
116 |     renderView();
117 |     expect(directive_scope).toBeDefined();
118 |   });
119 | 
120 |   it('should throw an error if no data attribute was specified', function() {
121 |     renderView();
122 | 
123 |     expect(function() {
124 |       createView('<tabs></tabs>', scope);
125 |     }).toThrow('UI Router Tabs: \'data\' attribute not defined, please check documentation for how to use this directive.');
126 |   });
127 | 
128 |   it('should throw an error if no data attributes is not an array', function() {
129 |     renderView();
130 | 
131 |     expect(function() {
132 |       scope.tabConfiguration = {};
133 |       createView('<tabs data="tabConfiguration"></tabs>', scope);
134 |     }).toThrow('UI Router Tabs: \'data\' attribute must be an array of tab data with at least one tab defined.');
135 |   });
136 | 
137 |   it('should initialise the tab configuration correctly when defined', function() {
138 |     renderView();
139 | 
140 |     expect(scope.tabConfiguration).toBeDefined();
141 |     expect(directive_scope.tabs).toBeDefined();
142 | 
143 |     expect(scope.tabConfiguration).toEqual(directive_scope.tabs);
144 |     expect(directive_scope.type).toEqual('pills');
145 |     expect(directive_scope.class).toEqual('someClass');
146 |   });
147 | 
148 |   it('should route to the correct entry in tabConfiguration array', function() {
149 |     view = '<tabs data="tabConfiguration"></tabs>';
150 |     renderView();
151 | 
152 |     var tabIndex = 2;
153 |     var route = scope.tabConfiguration[tabIndex].route;
154 |     state.go(route);
155 | 
156 |     scope.$apply();
157 | 
158 |     expect(get_current_state()).toEqual(route);
159 |     expect(scope.tabConfiguration[tabIndex].active).toBeTruthy();
160 |   });
161 | 
162 |   it('should change the route and update the tabs when selecting a different tab', function() {
163 |     renderView();
164 | 
165 |     var previous_state = get_current_state();
166 | 
167 |     $ngView.find('a').eq(2).click();
168 |     scope.$apply();
169 | 
170 |     expect(get_current_state()).not.toEqual(previous_state);
171 |   });
172 | 
173 |   it('should not change the route or active tab heading if a $stateChangeStart handler cancels the route change', function() {
174 | 
175 |     view = '<tabs data="tabConfiguration"></tabs>';
176 |     renderView();
177 | 
178 |     var initialTabIndex = 0;
179 |     var initialRoute = scope.tabConfiguration[initialTabIndex].route;
180 |     state.go(initialRoute);
181 | 
182 |     scope.$apply();
183 | 
184 |     root_scope.$on('$stateChangeStart', function(event) {
185 |       event.preventDefault();
186 |     });
187 | 
188 |     var targetTabIndex = 2;
189 |     var targetRoute = scope.tabConfiguration[targetTabIndex].route;
190 | 
191 |     state.go(targetRoute);
192 |     scope.$apply();
193 | 
194 |     expect(get_current_state()).toEqual(initialRoute);
195 |     expect(scope.tabConfiguration[initialTabIndex].active).toBeTruthy();
196 |   });
197 | 
198 |   it('should not change the route or active tab heading if a $stateChangeError event triggers during the route change', function() {
199 | 
200 |     view = '<tabs data="tabConfiguration"></tabs>';
201 |     renderView();
202 | 
203 |     var initialTabIndex = 0;
204 |     var initialRoute = scope.tabConfiguration[initialTabIndex].route;
205 |     state.go(initialRoute);
206 | 
207 |     scope.$apply();
208 | 
209 |     forceResolveFailure = true;
210 | 
211 |     var targetTabIndex = 2;
212 |     var targetRoute = scope.tabConfiguration[targetTabIndex].route;
213 | 
214 |     state.go(targetRoute);
215 |     scope.$apply();
216 | 
217 |     expect(get_current_state()).toEqual(initialRoute);
218 |     expect(scope.tabConfiguration[initialTabIndex].active).toBeTruthy();
219 |   });
220 | 
221 |   it('should not change the route or active tab heading if a $stateNotFound event triggers during the route change', function() {
222 | 
223 |     view = '<tabs data="tabConfiguration"></tabs>';
224 |     renderView();
225 | 
226 |     var initialTabIndex = 0;
227 |     var initialRoute = scope.tabConfiguration[initialTabIndex].route;
228 |     state.go(initialRoute);
229 | 
230 |     scope.$apply();
231 | 
232 |     forceResolveFailure = true;
233 | 
234 |     var targetTabIndex = 2;
235 |     var targetRoute = 'some.invalid.route';
236 | 
237 |     try {
238 |       state.go(targetRoute);
239 |     }
240 |     catch (error) { /* do nothing */ }
241 | 
242 |     scope.$apply();
243 | 
244 |     expect(get_current_state()).toEqual(initialRoute);
245 |     expect(scope.tabConfiguration[initialTabIndex].active).toBeTruthy();
246 |   });
247 | 
248 |   it('should not change the route when selecting the current tab', function() {
249 |     renderView();
250 | 
251 |     $ngView.find('a').eq(0).click();
252 | 
253 |     scope.$apply();
254 |     spy.reset();
255 | 
256 |     var previous_state = get_current_state();
257 | 
258 |     $ngView.find('a').eq(0).click();
259 |     scope.$apply();
260 | 
261 |     expect(get_current_state()).toEqual(previous_state);
262 |     expect(spy.notCalled).toBeTruthy();
263 |   });
264 | 
265 |   it('should not change the route when the clicked tab is disabled', function() {
266 | 
267 |     renderView();
268 | 
269 |     $ngView.find('a').eq(2).click();
270 | 
271 |     scope.$apply();
272 |     spy.reset();
273 | 
274 |     var previous_state = get_current_state();
275 | 
276 |     scope.tabConfiguration[0].disable = true;
277 |     $ngView.find('a').eq(0).click();
278 |     scope.$apply();
279 | 
280 |     expect(get_current_state()).toEqual(previous_state);
281 |     expect(spy.notCalled).toBeTruthy();
282 |   });
283 | });
284 | 


--------------------------------------------------------------------------------