├── .editorconfig
├── .gitattributes
├── .gitignore
├── CHANGELOG.md
├── CONTRIBUTING.md
├── Gruntfile.js
├── LICENSE
├── README.md
├── bower.json
├── docs
    ├── css
    │   └── style.css
    └── nav.html
├── karma.conf.js
├── misc
    ├── changelog.tpl.md
    ├── demo
    │   ├── assets
    │   │   ├── app.js
    │   │   ├── demo.css
    │   │   ├── github-16px.png
    │   │   ├── header.png
    │   │   ├── img
    │   │   │   ├── glyphicons-halflings-white.png
    │   │   │   ├── glyphicons-halflings.png
    │   │   │   ├── space-large.jpg
    │   │   │   ├── space-medium.jpg
    │   │   │   └── space-small.jpg
    │   │   ├── logo.png
    │   │   ├── plunker.js
    │   │   ├── rainbow-generic.js
    │   │   ├── rainbow-html.js
    │   │   ├── rainbow-javascript.js
    │   │   ├── rainbow.css
    │   │   ├── rainbow.js
    │   │   └── smoothscroll-angular-custom.js
    │   └── index.html
    ├── test-lib
    │   └── helpers.js
    └── validate-commit-msg.js
├── package.json
├── src
    ├── accordion
    │   ├── accordion.js
    │   ├── docs
    │   │   ├── demo.html
    │   │   ├── demo.js
    │   │   └── readme.md
    │   └── test
    │   │   └── accordion.spec.js
    ├── alert
    │   ├── alert.js
    │   ├── docs
    │   │   ├── demo.html
    │   │   ├── demo.js
    │   │   └── readme.md
    │   └── test
    │   │   └── alert.spec.js
    ├── bindHtml
    │   └── bindHtml.js
    ├── buttons
    │   ├── buttons.js
    │   ├── docs
    │   │   ├── demo.html
    │   │   ├── demo.js
    │   │   └── readme.md
    │   └── test
    │   │   └── buttons.spec.js
    ├── dropdownToggle
    │   ├── docs
    │   │   ├── demo.html
    │   │   ├── demo.js
    │   │   └── readme.md
    │   ├── dropdownToggle.js
    │   └── test
    │   │   └── dropdownToggle.spec.js
    ├── interchange
    │   ├── docs
    │   │   ├── demo.html
    │   │   ├── demo.js
    │   │   └── readme.md
    │   ├── interchange.js
    │   └── test
    │   │   └── interchange.spec.js
    ├── mediaQueries
    │   ├── docs
    │   │   └── readme.md
    │   └── mediaQueries.js
    ├── modal
    │   ├── docs
    │   │   ├── demo.html
    │   │   ├── demo.js
    │   │   └── readme.md
    │   ├── modal.js
    │   └── test
    │   │   ├── modal.spec.js
    │   │   ├── modalWindow.spec.js
    │   │   └── stackedMap.spec.js
    ├── offcanvas
    │   ├── docs
    │   │   ├── demo.html
    │   │   ├── demo.js
    │   │   └── readme.md
    │   ├── offcanvas.js
    │   └── test
    │   │   └── offcanvas.spec.js
    ├── pagination
    │   ├── docs
    │   │   ├── demo.html
    │   │   ├── demo.js
    │   │   └── readme.md
    │   ├── pagination.js
    │   └── test
    │   │   ├── pager.spec.js
    │   │   └── pagination.spec.js
    ├── popover
    │   ├── docs
    │   │   ├── demo.html
    │   │   ├── demo.js
    │   │   └── readme.md
    │   ├── popover.js
    │   └── test
    │   │   └── popover.spec.js
    ├── position
    │   ├── position.js
    │   └── test
    │   │   └── test.html
    ├── progressbar
    │   ├── docs
    │   │   ├── demo.html
    │   │   ├── demo.js
    │   │   └── readme.md
    │   ├── progressbar.js
    │   └── test
    │   │   └── progressbar.spec.js
    ├── rating
    │   ├── docs
    │   │   ├── demo.html
    │   │   ├── demo.js
    │   │   └── readme.md
    │   ├── rating.js
    │   └── test
    │   │   └── rating.spec.js
    ├── tabs
    │   ├── docs
    │   │   ├── demo.html
    │   │   ├── demo.js
    │   │   └── readme.md
    │   ├── tabs.js
    │   └── test
    │   │   └── tabs.spec.js
    ├── tooltip
    │   ├── docs
    │   │   ├── demo.html
    │   │   ├── demo.js
    │   │   └── readme.md
    │   ├── test
    │   │   ├── tooltip.spec.js
    │   │   └── tooltip2.spec.js
    │   └── tooltip.js
    ├── topbar
    │   ├── docs
    │   │   ├── demo.html
    │   │   ├── demo.js
    │   │   └── readme.md
    │   ├── test
    │   │   └── topbar.spec.js
    │   └── topbar.js
    ├── tour
    │   ├── docs
    │   │   ├── demo.html
    │   │   ├── demo.js
    │   │   └── readme.md
    │   ├── test
    │   │   └── tour.spec.js
    │   └── tour.js
    ├── transition
    │   ├── test
    │   │   └── transition.spec.js
    │   └── transition.js
    └── typeahead
    │   ├── docs
    │       ├── demo.html
    │       ├── demo.js
    │       └── readme.md
    │   ├── test
    │       ├── typeahead-highlight.spec.js
    │       ├── typeahead-parser.spec.js
    │       ├── typeahead-popup.spec.js
    │       └── typeahead.spec.js
    │   └── typeahead.js
└── template
    ├── accordion
        ├── accordion-group.html
        └── accordion.html
    ├── alert
        └── alert.html
    ├── modal
        ├── backdrop.html
        └── window.html
    ├── pagination
        ├── pager.html
        └── pagination.html
    ├── popover
        └── popover.html
    ├── progressbar
        ├── bar.html
        ├── progress.html
        └── progressbar.html
    ├── rating
        └── rating.html
    ├── tabs
        ├── tab.html
        └── tabset.html
    ├── tooltip
        ├── tooltip-html-unsafe-popup.html
        └── tooltip-popup.html
    ├── topbar
        ├── has-dropdown.html
        ├── toggle-top-bar.html
        ├── top-bar-dropdown.html
        ├── top-bar-section.html
        └── top-bar.html
    ├── tour
        └── tour.html
    └── typeahead
        ├── typeahead-match.html
        └── typeahead-popup.html


/.editorconfig:
--------------------------------------------------------------------------------
 1 | # This file is for unifying the coding style for different editors and IDEs
 2 | # editorconfig.org
 3 | 
 4 | root = true
 5 | 
 6 | [*]
 7 | end_of_line = lf
 8 | charset = utf-8
 9 | trim_trailing_whitespace = true
10 | insert_final_newline = true
11 | 
12 | # Tabs in JS unless otherwise specified
13 | [**.js]
14 | indent_style = space
15 | indent_size = 2
16 | 
17 | [*.md]
18 | trim_trailing_whitespace = false


--------------------------------------------------------------------------------
/.gitattributes:
--------------------------------------------------------------------------------
1 | *.html  eol=lf
2 | *.css   eol=lf
3 | *.js    eol=lf
4 | *.md    eol=lf
5 | *.json  eol=lf
6 | *.yml   eol=lf
7 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | lib-cov
 2 | *.seed
 3 | *.log
 4 | *.csv
 5 | *.dat
 6 | *.out
 7 | *.pid
 8 | *.gz
 9 | *.swp
10 | *.swo
11 | .DS_Store
12 | 
13 | pids
14 | logs
15 | results
16 | dist
17 | # test coverage files
18 | coverage/
19 | 
20 | node_modules
21 | bower_components
22 | npm-debug.log
23 | 
24 | template/**/*.js
25 | 


--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
 1 | This project would not be possible without your help and support and we appreciate your willingness to contribute!
 2 | 
 3 | ## Issues
 4 | 
 5 | When reporting an issue, please create a demonstration of your issue using [plunker](http://plnkr.co/) or a similar service. We prefer to reserve issue reporting for actual issues. Instead of simply asking for a new feature, why not create it yourself and open a pull request? :wink:
 6 | 
 7 | ## Pull Requests
 8 | 
 9 | Please make sure that your contribution fits according to the project's goals:
10 | 
11 |   * we are aiming at rebuilding Foundation directives in pure AngularJS, without any dependencies on any external JavaScript library
12 |   * the only dependency should be Foundation CSS and its markup structure
13 |   * behavior should be properly tested
14 |   * directives should be html-agnostic as much as possible which in practice means:
15 |     * templates should be referred to using the `templateUrl` property
16 |     * it should be easy to change a default template to a custom one
17 |     * directives shouldn't manipulate DOM structure directly (when possible)
18 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | Any new directives or rewrites of existing directives are subject to the following license:
 2 | 
 3 | The MIT License
 4 | 
 5 | Copyright (c) 2015 Pinecone, LLC
 6 | 
 7 | Permission is hereby granted, free of charge, to any person obtaining a copy
 8 | of this software and associated documentation files (the "Software"), to deal
 9 | in the Software without restriction, including without limitation the rights
10 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
11 | copies of the Software, and to permit persons to whom the Software is
12 | furnished to do so, subject to the following conditions:
13 | 
14 | The above copyright notice and this permission notice shall be included in
15 | all copies or substantial portions of the Software.
16 | 
17 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
18 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
19 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
20 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
21 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
22 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
23 | THE SOFTWARE.
24 | 
25 | 
26 | Shared angular-bootstrap code is subject to the following license:
27 | 
28 | The MIT License
29 | 
30 | Copyright (c) 2012-2013 the AngularUI Team, https://github.com/organizations/angular-ui/teams/291112
31 | 
32 | Permission is hereby granted, free of charge, to any person obtaining a copy
33 | of this software and associated documentation files (the "Software"), to deal
34 | in the Software without restriction, including without limitation the rights
35 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
36 | copies of the Software, and to permit persons to whom the Software is
37 | furnished to do so, subject to the following conditions:
38 | 
39 | The above copyright notice and this permission notice shall be included in
40 | all copies or substantial portions of the Software.
41 | 
42 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
43 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
44 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
45 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
46 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
47 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
48 | THE SOFTWARE.
49 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | ### Please see [this issue](https://github.com/pineconellc/angular-foundation/issues/311) for an important update regarding this project.
  2 | 
  3 | # Angular Components for [Foundation](http://foundation.zurb.com/)
  4 | [![Build Status](https://semaphoreapp.com/api/v1/projects/670cabb5-3c50-4197-9df5-e75cf62c9d20/237671/badge.png)](https://semaphoreapp.com/pinecone/angular-foundation)
  5 | [![Latest Version](https://badge.fury.io/bo/angular-foundation.svg)](https://github.com/pineconellc/angular-foundation-bower)
  6 | ***
  7 | 
  8 | This project is a port of the AngularUI team's excellent [angular-bootstrap](https://github.com/angular-ui/bootstrap) project for use in the [Foundation](http://foundation.zurb.com/) framework.
  9 | 
 10 | ## Demo
 11 | 
 12 | Do you want to see this in action? Visit http://pineconellc.github.io/angular-foundation/
 13 | 
 14 | ## Installation
 15 | 
 16 | Installation is easy as angular-mm-foundation has minimal dependencies - only the AngularJS and Foundation's CSS are required.
 17 | After downloading dependencies (or better yet, referencing them from your favourite CDN) you need to download build version of this project. All the files and their purposes are described here:
 18 | https://github.com/pineconellc/angular-foundation/tree/gh-pages
 19 | Don't worry, if you are not sure which file to take, opt for `mm-foundation-tpls-[version].min.js`.
 20 | 
 21 | When you are done downloading all the dependencies and project files the only remaining part is to add dependencies on the `mm.foundation` AngularJS module:
 22 | 
 23 | ```javascript
 24 | angular.module('myModule', ['mm.foundation']);
 25 | ```
 26 | 
 27 | ## Supported Foundation components
 28 | 
 29 | * Split Buttons
 30 | * Reveal Modal
 31 | * Alerts
 32 | * Joyride
 33 | * Dropdowns
 34 | * Tabs
 35 | * Offcanvas
 36 | * Interchange
 37 | 
 38 | We'd gladly accept contributions for any remaining components.
 39 | 
 40 | ## Supported Browsers
 41 | 
 42 | Directives **should** work with the following browsers:
 43 | 
 44 | * Chrome (stable and canary channel)
 45 | * Firefox
 46 | * IE 10 and Edge
 47 | * Opera
 48 | * Safari
 49 | 
 50 | Modern mobile browsers should work without problems.
 51 | 
 52 | **IE 8 and 9 are not officially supported.**
 53 | 
 54 | ## Project philosophy
 55 | 
 56 | ### Native, lightweight directives
 57 | 
 58 | We are aiming at providing a set of AngularJS directives based on Foundation's markup and CSS. The goal is to provide **native AngularJS directives** without any dependency on jQuery or Foundation's JavaScript.
 59 | It is often better to rewrite an existing JavaScript code and create a new, pure AngularJS directive. Most of the time the resulting directive is smaller as compared to the orginal JavaScript code size and better integrated into the AngularJS ecosystem.
 60 | 
 61 | ### Customizability
 62 | 
 63 | All the directives in this repository should have their markup externalized as templates (loaded via `templateUrl`). In practice it means that you can **customize directive's markup at will**. One could even imagine providing a non-Foundation version of the templates!
 64 | 
 65 | ### Take what you need and not more
 66 | 
 67 | Each directive has its own AngularJS module without any dependencies on other modules or third-pary JavaScript code. In practice it means that you can **just grab the code for the directives you need** and you are not obliged to drag the whole repository.
 68 | 
 69 | ### Quality and stability
 70 | 
 71 | **Note:** Full test coverage is pending
 72 | 
 73 | Directives should work. All the time and in all browsers. This is why all the directives have a comprehensive suite of unit tests. All the automated tests are executed on each checkin in several browsers: Chrome, ChromeCanary, Firefox, Opera, Safari, IE9.
 74 | In fact we are fortunate enough to **benefit from the same testing infrastructure as AngularJS**!
 75 | 
 76 | ## Contributing to the project
 77 | 
 78 | We are always looking for the quality contributions! Please check the [CONTRIBUTING.md](CONTRIBUTING.md) for the contribution guidelines.
 79 | 
 80 | ### Development
 81 | #### Prepare your environment
 82 | * Install [Node.js](http://nodejs.org/) which should include `npm`
 83 | * Install global dev dependencies: `npm install -g grunt-cli karma bower`
 84 | * Instal local dev dependencies: `npm install` while current directory is foundation repo
 85 | * Install test dependencies: `bower install`
 86 | 
 87 | #### Build
 88 | * Build the whole project: `grunt` - this will run `lint`, `test`, and `concat` targets
 89 | * To build modules, first run `grunt html2js` then `grunt build:module1:module2...:moduleN`
 90 | 
 91 | You can generate a custom build, containing only needed modules, from the project's homepage.
 92 | Alternativelly you can run local Grunt build from the command line and list needed modules as shown below:
 93 | 
 94 | ```
 95 | grunt build:modal:tabs:alert:popover:dropdownToggle:buttons:progressbar
 96 | ```
 97 | 
 98 | Check the Grunt build file for other tasks that are defined for this project.
 99 | 
100 | #### TDD
101 | * Run test: `grunt watch`
102 | 
103 | This will start Karma server and will continously watch files in the project, executing tests upon every change.
104 | 
105 | #### Test coverage
106 | Add the `--coverage` option (e.g. `grunt test --coverage`, `grunt watch --coverage`) to see reports on the test coverage. These coverage reports are found in the coverage folder.
107 | 
108 | ### Customize templates
109 | 
110 | As mentioned directives from this repository have all the markup externalized in templates. You might want to customize default
111 | templates to match your desired look & feel, add new functionality etc.
112 | 
113 | The easiest way to override an individual template is to use the `<script>` directive:
114 | 
115 | ```javascript
116 | <script id="template/alert/alert.html" type="text/ng-template">
117 |     <div class='alert' ng-class='type && "alert-" + type'>
118 |         <button ng-show='closeable' type='button' class='close' ng-click='close()'>Close</button>
119 |         <div ng-transclude></div>
120 |     </div>
121 | </script>
122 | ```
123 | 
124 | If you want to override more templates it makes sense to store them as individual files and feed the `$templateCache` from those partials.
125 | For people using Grunt as the build tool it can be easily done using the `grunt-html2js` plugin. You can also configure your own template url.
126 | Let's have a look:
127 | 
128 | Your own template url is `views/partials/mm-foundation-tpls/alert/alert.html`.
129 | 
130 | Add "html2js" task to your Gruntfile
131 | ```
132 | html2js: {
133 |   options: {
134 |     base: '.',
135 |     module: 'ui-templates',
136 |     rename: function (modulePath) {
137 |       var moduleName = modulePath.replace('app/views/partials/mm-foundation-tpls/', '').replace('.html', '');
138 |       return 'template' + '/' + moduleName + '.html';
139 |     }
140 |   },
141 |   main: {
142 |     src: ['app/views/partials/mm-foundation-tpls/**/*.html'],
143 |     dest: '.tmp/ui-templates.js'
144 |   }
145 | }
146 | ```
147 | 
148 | Make sure to load your template.js file
149 | `<script src="/ui-templates.js"></script>`
150 | 
151 | Inject the `ui-templates` module in your `app.js`
152 | ```
153 | angular.module('myApp', [
154 |   'mm.foundation',
155 |   'ui-templates'
156 | ]);
157 | ```
158 | 
159 | Then it will work fine!
160 | 
161 | For more information visit: https://github.com/karlgoldstein/grunt-html2js
162 | 
163 | ### Release
164 | * Bump up version number in `package.json`
165 | * Commit the version change with the following message: `chore(release): [version number]`
166 | * tag
167 | * push changes and a tag (`git push --tags`)
168 | * switch to the `gh-pages` branch: `git checkout gh-pages`
169 | * copy content of the dist folder to the main folder
170 | * Commit the version change with the following message: `chore(release): [version number]`
171 | * push changes
172 | * switch back to the `main branch` and modify `package.json` to bump up version for the next iteration
173 | * commit (`chore(release): starting [version number]`) and push
174 | * publish Bower and NuGet packages
175 | 
176 | Well done! (If you don't like repeating yourself open a PR with a grunt task taking care of the above!)
177 | 
178 | ## Credits
179 | 
180 | Again, many thanks to the AngularUI team for the angular-bootstrap project.
181 | 


--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "angular-foundation",
 3 |   "homepage": "http://pineconellc.github.io/angular-foundation/",
 4 |   "authors": [
 5 |     "Pinecone, LLC"
 6 |   ],
 7 |   "license": "MIT",
 8 |   "private": true,
 9 |   "ignore": [
10 |     "**/.*",
11 |     "node_modules",
12 |     "bower_components",
13 |     "test",
14 |     "tests"
15 |   ],
16 |   "dependencies": {
17 |     "angular": ">=1.3.0"
18 |   },
19 |   "devDependencies": {
20 |     "angular": "=1.4.6",
21 |     "angular-legacy": "angular#1.3.19",
22 |     "angular-mocks": "=1.4.6",
23 |     "angular-mocks-legacy": "angular-mocks#1.3.19",
24 |     "jquery": "=1.8.2"
25 |   },
26 |   "resolutions": {
27 |     "angular": "=1.4.6"
28 |   }
29 | }
30 | 


--------------------------------------------------------------------------------
/docs/css/style.css:
--------------------------------------------------------------------------------
 1 | .bs-docs-social {
 2 |     margin-top: 1em;
 3 |     padding: 15px 0;
 4 |     text-align: center;
 5 |     background-color: rgba(245,245,245,0.3);
 6 |     border-top: 1px solid rgba(255,255,255,0.3);
 7 |     border-bottom: 1px solid rgba(221,221,221,0.3);
 8 | }
 9 | .bs-docs-social-buttons {
10 |   position: absolute;
11 |   top: 8px;
12 |     margin-left: 0;
13 |     margin-bottom: 0;
14 |     padding-left: 0;
15 |     list-style: none;
16 | }
17 | .bs-docs-social-buttons li {
18 |     list-style: none;
19 |     display: inline-block;
20 |     line-height: 1;
21 | }
22 | 


--------------------------------------------------------------------------------
/docs/nav.html:
--------------------------------------------------------------------------------
 1 | <div class="button-group right">
 2 |   <a class="button small" href="https://github.com/pineconellc/angular-foundation/tree/gh-pages">
 3 |     <i class="fa fa-download"></i> Download <small>(<%= pkg.version%>)</small>
 4 |   </a>
 5 | </div>
 6 | <div class="margin: 10px;"></div>
 7 | <ul class="nav right bs-docs-social-buttons">
 8 |   <li>
 9 |   <iframe src="http://ghbtns.com/github-btn.html?user=angular-ui&repo=bootstrap&type=watch&count=true"
10 |     allowtransparency="true" frameborder="0" scrolling="0" width="110" height="20"></iframe>
11 |   </li>
12 | </ul>
13 | 


--------------------------------------------------------------------------------
/karma.conf.js:
--------------------------------------------------------------------------------
 1 | module.exports = function(config) {
 2 |  config.set({
 3 |     // base path, that will be used to resolve files and exclude
 4 |     basePath: '.',
 5 | 
 6 |     frameworks: ['jasmine'],
 7 |     // list of files / patterns to load in the browser
 8 |     files: [
 9 |       'bower_components/jquery/jquery.js',
10 |       'bower_components/angular/angular.js',
11 |       'bower_components/angular-mocks/angular-mocks.js',
12 |       'misc/test-lib/helpers.js',
13 |       'src/**/*.js',
14 |       'template/**/*.js'
15 |     ],
16 | 
17 |     // list of files to exclude
18 |     exclude: [
19 |       'src/**/demo.js'
20 |     ],
21 | 
22 |     browsers: [
23 |       'Chrome'
24 |     ],
25 | 
26 |     // test results reporter to use
27 |     // possible values: dots || progress
28 |     reporters: ['progress'],
29 | 
30 |     // web server port
31 |     port: 9018,
32 | 
33 |     // cli runner port
34 |     runnerPort: 9100,
35 | 
36 |     // enable / disable colors in the output (reporters and logs)
37 |     colors: true,
38 | 
39 |     // level of logging
40 |     // possible values: LOG_DISABLE || LOG_ERROR || LOG_WARN || LOG_INFO || LOG_DEBUG
41 |     logLevel: config.LOG_INFO,
42 | 
43 |     // enable / disable watching file and executing tests whenever any file changes
44 |     autoWatch: false,
45 | 
46 |     // Continuous Integration mode
47 |     // if true, it capture browsers, run tests and exit
48 |     singleRun: false
49 |  });
50 | };
51 | 


--------------------------------------------------------------------------------
/misc/changelog.tpl.md:
--------------------------------------------------------------------------------
 1 | # <%= version%> (<%= today%>)
 2 | <% if (_(changelog.feat).size() > 0) { %>
 3 | ## Features
 4 | <% _(changelog.feat).keys().sort().forEach(function(scope) { %>
 5 | - **<%= scope%>:** <% changelog.feat[scope].forEach(function(change) { %>
 6 |   - <%= change.msg%> (<%= helpers.commitLink(change.sha1) %>)  <% }); %><% }); %> <% } %>
 7 | <% if (_(changelog.fix).size() > 0) { %>
 8 | ## Bug Fixes
 9 | <% _(changelog.fix).keys().sort().forEach(function(scope) { %>
10 | - **<%= scope%>:** <% changelog.fix[scope].forEach(function(change) { %>
11 |   - <%= change.msg%> (<%= helpers.commitLink(change.sha1) %>)  <% }); %><% }); %> <% } %>
12 | <% if (_(changelog.breaking).size() > 0) { %>
13 | ## Breaking Changes
14 | <% _(changelog.breaking).keys().sort().forEach(function(scope) { %>
15 | - **<%= scope%>:** <% changelog.breaking[scope].forEach(function(change) { %>
16 | <%= change.msg%><% }); %><% }); %> <% } %>
17 | 


--------------------------------------------------------------------------------
/misc/demo/assets/app.js:
--------------------------------------------------------------------------------
 1 | var app = angular.module('foundationDemoApp', ['mm.foundation', 'plunker'], function($httpProvider){
 2 |   FastClick.attach(document.body);
 3 |   delete $httpProvider.defaults.headers.common['X-Requested-With'];
 4 | });
 5 | 
 6 | app.controller('MainCtrl', function($scope, $http, $document, $modal, orderByFilter) {
 7 |   var url = "http://50.116.42.77:3001";
 8 |   //iFrame for downloading
 9 |   var $iframe = angular.element('<iframe>').css('display','none');
10 |   $document.find('body').append($iframe);
11 | 
12 |   var downloadFileFromUrl = function(downloadUrl) {
13 |     $iframe.attr('src', '');
14 |     $iframe.attr('src', downloadUrl);
15 |   };
16 |   
17 |   $scope.showBuildModal = function() {
18 |     var modalInstance = $modal.open({
19 |       templateUrl: 'buildModal.html',
20 |       controller: 'SelectModulesCtrl',
21 |       resolve: {
22 |         modules: function() {
23 |           return $http.get(url + "/api/bootstrap").then(function(response) {
24 |             return response.data.modules;
25 |           });
26 |         }
27 |       }
28 |     });
29 | 
30 |     modalInstance.result.then(function(selectedModules) {
31 |       var downloadUrl = url + "/api/bootstrap/download?";
32 |       angular.forEach(selectedModules, function(module) {
33 |         downloadUrl += "modules=" + module + "&";
34 |       });
35 |       downloadFileFromUrl(downloadUrl);
36 |     });
37 |   };
38 |   
39 |   $scope.showDownloadModal = function() {
40 |     var modalInstance = $modal.open({
41 |       templateUrl: 'downloadModal.html',
42 |       controller: 'DownloadCtrl'
43 |     });
44 | 
45 |     modalInstance.result.then(function(options) {
46 |       var downloadUrl = ['http://pineconellc.github.io/angular-foundation/mm-foundation-'];
47 |       if (options.tpls) {
48 |         downloadUrl.push('tpls-');
49 |       }
50 |       downloadUrl.push(options.version);
51 |       if (options.minified) {
52 |         downloadUrl.push('.min');
53 |       }
54 |       downloadUrl.push('.js');
55 | 
56 |       downloadFileFromUrl(downloadUrl.join(''));
57 |     });
58 |   };
59 | });
60 | 
61 | app.controller('SelectModulesCtrl', function($scope, $modalInstance, modules) {
62 | 
63 |   $scope.selectedModules = [];
64 |   $scope.modules = modules;
65 | 
66 |   $scope.selectedChanged = function(module, selected) {
67 |     if (selected) {
68 |       $scope.selectedModules.push(module);
69 |     } else {
70 |       $scope.selectedModules.splice($scope.selectedModules.indexOf(module), 1);
71 |     }
72 |   };
73 | 
74 |   $scope.downloadBuild = function () {
75 |     $modalInstance.close($scope.selectedModules);
76 |   };
77 | 
78 |   $scope.cancel = function () {
79 |     $modalInstance.dismiss();
80 |   };
81 | });
82 | 
83 | app.controller('DownloadCtrl', function($scope, $modalInstance) {
84 |   $scope.options = {
85 |     minified: true,
86 |     tpls: true
87 |   };
88 |   
89 |   $scope.download = function (version) {
90 |     $scope.options.version = version;
91 |     $modalInstance.close($scope.options);
92 |   };
93 |   
94 |   $scope.cancel = function () {
95 |     $modalInstance.dismiss();
96 |   };
97 | });
98 | 


--------------------------------------------------------------------------------
/misc/demo/assets/demo.css:
--------------------------------------------------------------------------------
  1 | body {
  2 |   opacity: 1;
  3 |   -webkit-transition: opacity 1s ease;
  4 |   -moz-transition: opacity 1s ease;
  5 |   transition: opacity 1s;
  6 |   background-color: #E1E9F1;
  7 |   font-family: "Open Sans","Helvetica",Helvetica,Arial,sans-serif;
  8 | }
  9 | 
 10 | .columns.small-centered {
 11 |   background-color: white;
 12 |   padding: 50px;
 13 | }
 14 | 
 15 | .container { padding-bottom: 50px;}
 16 | 
 17 | header {
 18 |   background-color: #E1E9F1;
 19 | }
 20 | 
 21 | header .columns, .columns.border  {
 22 |           background-color: #fff;
 23 |           border: 2px solid #B7C3D0;
 24 |           border-radius: 8px;
 25 |             }
 26 | 
 27 | 
 28 | header .container > :last-child { margin-bottom: 0 !important; }
 29 | header .container > :first-child { margin-top: 0 !important; }
 30 | header > .columns { background-color: #FFF; }
 31 | 
 32 | .title-area .name h1 {
 33 | }
 34 | 
 35 | figure {margin-top: 0 }
 36 | 
 37 | img.logo {
 38 |   margin: 50px auto 50px auto;
 39 |   width: 275px;
 40 | }
 41 | 
 42 | /* Some Foundation color overrides */
 43 | 
 44 | .top-bar {
 45 |   box-shadow: 0 1px #266784, 0 4px #A9C2D0
 46 | }
 47 | 
 48 | .top-bar, .top-bar-section li a:not(.button) {
 49 |   background-color: #5592BB;
 50 | }
 51 | 
 52 | .top-bar-section li a:not(.button):hover {
 53 | background-color: #4783A9;
 54 | }
 55 | 
 56 | .top-bar-section ul li:hover>a {
 57 |   background-color: #5592BB;
 58 | }
 59 | 
 60 | .top-bar-section li:not(.has-form) a:not(.button){
 61 |   background-color: #5592BB!important;
 62 | }
 63 | 
 64 | .top-bar-section li.has-dropdown.not-click>a:not(.button){
 65 |   background-color: #4783A9;
 66 | }
 67 | 
 68 | .top-bar-section li:not(.has-form) a:not(.button):hover {
 69 |   background-color: #4783A9!important;
 70 | }
 71 | 
 72 | .top-bar-section ul li>a {
 73 |   font-size: 16px;
 74 |   font-family: "Open Sans","Helvetica",Helvetica,Arial,sans-serif;;
 75 | }
 76 | 
 77 | .top-bar-section ul {
 78 |   background: #5592BB;
 79 | }
 80 | 
 81 | .top-bar-section ul li:hover:not(.has-form)>a {
 82 |   background: #5592BB;
 83 | }
 84 | 
 85 | .top-bar-section {
 86 |   padding-top: 0 !important;
 87 | }
 88 | 
 89 | .off-canvas-wrap section {
 90 |   padding-top: 0 !important;
 91 | }
 92 | 
 93 | .top-bar.expanded .title-area {
 94 |   background: #4783A9;
 95 | }
 96 | 
 97 | .top-bar.expanded .toggle-topbar a {
 98 |   color: #FFF;
 99 | }
100 | 
101 | .top-bar.expanded .toggle-topbar a::after {
102 | -webkit-box-shadow: 1px 10px 1px 1px #FFF,1px 16px 1px 1px #FFF,1px 22px 1px 1px #FFF;
103 | box-shadow: 0 10px 0 1px #FFF,0 16px 0 1px #FFF,0 22px 0 1px #FFF;
104 | }
105 | 
106 | .ng-cloak {
107 |   opacity: 0;
108 | }
109 | 
110 | .ng-invalid {
111 |   border: 1px solid red !important;
112 | }
113 | 
114 | div[role=main] section.demo {
115 |   padding-top: 30px;
116 | }
117 | 
118 | .page-header h1, .page-header h1 > small > a {
119 |   color: #266784;
120 | }
121 | .page-header h1 > small > a:hover {
122 |   text-decoration: none;
123 | }
124 | 
125 | .footer {
126 |   text-align: center;
127 |   padding: 30px 0;
128 |   margin-top: 70px;
129 |   border-top: 1px solid #e5e5e5;
130 |   background-color: #f5f5f5;
131 | }
132 | 
133 | .bs-social {
134 |   margin-top: 20px;
135 |   margin-bottom: 20px;
136 |   text-align: center;
137 | }
138 | 
139 | @media (min-width: 768px) {
140 | 
141 |   .bs-social {
142 |     text-align: left;
143 |   }
144 | 
145 | }
146 | 
147 | .nav, .pagination, .carousel, .panel-title a {
148 |   cursor: pointer;
149 | }
150 | 
151 | .bs-social-buttons {
152 |   display: inline-block;
153 |   margin-bottom: 0;
154 |   padding-left: 0;
155 |   list-style: none;
156 | }
157 | .bs-social-buttons li {
158 |   display: inline-block;
159 |   padding: 5px 8px;
160 |   line-height: 1;
161 | }
162 | 
163 | @media (max-width: 767px) {
164 | 
165 |   .visible-xs.collapse.in {
166 |     display: block!important;
167 |   }
168 |   .visible-xs.collapse {
169 |     display: none!important;
170 |   }
171 | 
172 | }
173 | 
174 | .navbar .collapse {
175 |   border-top: 1px solid #e7e7e7;
176 |   margin-left: -15px;
177 |   margin-right: -15px;
178 |   padding-right: 15px;
179 |   padding-left: 15px;
180 | }
181 | 
182 | .show-grid {
183 |   margin-bottom: 15px;
184 | }
185 | 
186 | /*
187 |  * Container
188 |  *
189 |  * Tweak to width of container.
190 |  */
191 | 
192 | /*@media (min-width: 1200px) {
193 |   .container{
194 |     max-width: 970px;
195 |   }
196 | }*/
197 | 
198 | /*
199 |  * Tabs
200 |  *
201 |  * Tweaks to the Tabs.
202 |  */
203 | 
204 | 
205 | .code pre, .code code {
206 |   border: none;
207 |   border-top-left-radius: 0;
208 |   border-top-right-radius: 0;
209 | }
210 | 
211 | .tabs dd.active a {
212 |   background-color: #FFF;
213 | }
214 | 
215 | .code .tabs-content>.content {
216 |   padding: 0;
217 |   width: 100%;
218 | }
219 | 
220 | /*
221 |  * Buttons
222 | */
223 | 
224 | .button, button{
225 |   background-color: #4882AC;
226 |   font-family: "Open Sans","Helvetica",Helvetica,Arial,sans-serif;
227 | }
228 | 
229 | /* tabs */
230 | 
231 | 
232 | 
233 |  /*
234 |  * Buttons in the masthead.
235 |  */
236 | 
237 | .btn-outline-inverse {
238 |   color: #fff;
239 |   background-color: transparent;
240 |   border-color: #cdbfe3;
241 |   margin: 10px;
242 | }
243 | 
244 | @media (min-width: 768px) {
245 | 
246 |   .btn-outline-inverse {
247 |     width: auto;
248 |     margin: 20px 5px 20px 0;
249 |     padding: 18px 24px;
250 |     font-size: 21px;
251 |   }
252 | 
253 | }
254 | 
255 | .btn-outline-inverse:hover, .btn-outline-inverse:focus, .btn-outline-inverse:active {
256 |   color: #563d7c;
257 |   text-shadow: none;
258 |   background-color: #fff;
259 |   border-color: #fff;
260 | }
261 | 
262 | 
263 | /* Not enough room on mobile for markup tab, js tab, and plunk btn.
264 | And no one cares about plunk button on a phone anyway */
265 | @media only screen and (max-device-width: 480px) {
266 |   #plunk-btn {
267 |     display: none;
268 |   }
269 | }
270 | 
271 | .navbar-nav .dropdown .navbar-brand {
272 |   max-width: 100%;
273 |   margin-right: inherit;
274 |   margin-left: inherit;
275 | }
276 | 
277 | .header-placeholder {
278 |   height: 45px;
279 | }
280 | 
281 | @media screen and (min-width: 768px) {
282 | 
283 |   .dropdown.open > .navbar-brand + .dropdown-menu {
284 |     left: 10px;
285 |   }
286 | 
287 |   .header-placeholder {
288 |     height: 45px;
289 |   }
290 | 
291 |   .navbar-nav .dropdown .navbar-brand {
292 |     max-width: 200px;
293 |     margin-right: 5px;
294 |     margin-left: 10px;
295 |   }
296 | 
297 | }
298 | 
299 | #tabs div[ng-controller=TabsDemoCtrl] .tabs:not(.vertical) dd>a {
300 |   padding: 0.5em 1em;
301 | }
302 | 
303 | #tabs div[ng-controller=TabsDemoCtrl] .tabs.vertical {
304 |   width: 30%;
305 | }
306 | 
307 | .reveal-modal {
308 |   outline: 0;
309 | }
310 | 
311 | /**
312 |  * Animations
313 |  */
314 | .fade {
315 |   opacity: 0;
316 |   -webkit-transition: opacity .15s linear;
317 |           transition: opacity .15s linear;
318 | }
319 | .fade.in {
320 |   opacity: 1;
321 | }
322 | 
323 | .reveal-modal.fade {
324 |   -webkit-transition: -webkit-transform .3s ease-out;
325 |      -moz-transition:    -moz-transform .3s ease-out;
326 |        -o-transition:      -o-transform .3s ease-out;
327 |           transition:         transform .3s ease-out;
328 |   -webkit-transform: translate(0, -25%);
329 |       -ms-transform: translate(0, -25%);
330 |           transform: translate(0, -25%);
331 | }
332 | .reveal-modal.in {
333 |   -webkit-transform: translate(0, 0);
334 |       -ms-transform: translate(0, 0);
335 |           transform: translate(0, 0);
336 | }
337 | 
338 | .reveal-modal-bg.fade {
339 |   filter: alpha(opacity=0);
340 |   opacity: 0;
341 | }
342 | .reveal-modal-bg.in {
343 |   filter: alpha(opacity=50);
344 |   opacity: .5;
345 | }
346 | 
347 | .alert-box {
348 |   background-color: #5592BB;
349 | }
350 | 


--------------------------------------------------------------------------------
/misc/demo/assets/github-16px.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yalabot/angular-foundation/232f0b916410be08f69a2d6669262a3b97336b05/misc/demo/assets/github-16px.png


--------------------------------------------------------------------------------
/misc/demo/assets/header.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yalabot/angular-foundation/232f0b916410be08f69a2d6669262a3b97336b05/misc/demo/assets/header.png


--------------------------------------------------------------------------------
/misc/demo/assets/img/glyphicons-halflings-white.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yalabot/angular-foundation/232f0b916410be08f69a2d6669262a3b97336b05/misc/demo/assets/img/glyphicons-halflings-white.png


--------------------------------------------------------------------------------
/misc/demo/assets/img/glyphicons-halflings.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yalabot/angular-foundation/232f0b916410be08f69a2d6669262a3b97336b05/misc/demo/assets/img/glyphicons-halflings.png


--------------------------------------------------------------------------------
/misc/demo/assets/img/space-large.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yalabot/angular-foundation/232f0b916410be08f69a2d6669262a3b97336b05/misc/demo/assets/img/space-large.jpg


--------------------------------------------------------------------------------
/misc/demo/assets/img/space-medium.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yalabot/angular-foundation/232f0b916410be08f69a2d6669262a3b97336b05/misc/demo/assets/img/space-medium.jpg


--------------------------------------------------------------------------------
/misc/demo/assets/img/space-small.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yalabot/angular-foundation/232f0b916410be08f69a2d6669262a3b97336b05/misc/demo/assets/img/space-small.jpg


--------------------------------------------------------------------------------
/misc/demo/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yalabot/angular-foundation/232f0b916410be08f69a2d6669262a3b97336b05/misc/demo/assets/logo.png


--------------------------------------------------------------------------------
/misc/demo/assets/plunker.js:
--------------------------------------------------------------------------------
 1 | angular.module('plunker', [])
 2 | 
 3 |   .factory('plunkGenerator', function ($document) {
 4 | 
 5 |     return function (ngVersion, fdVersion, version, module, content) {
 6 | 
 7 |       var form = angular.element('<form style="display: none;" method="post" action="http://plnkr.co/edit/?p=preview" target="_blank"></form>');
 8 |       var addField = function (name, value) {
 9 |         var input = angular.element('<input type="hidden" name="' + name + '">');
10 |         input.attr('value', value);
11 |         form.append(input);
12 |       };
13 | 
14 |       var indexContent = function (content, version) {
15 |         return '<!doctype html>\n' +
16 |           '<html ng-app="foundationDemoApp">\n' +
17 |           '  <head>\n' +
18 |           '    <script src="//ajax.googleapis.com/ajax/libs/angularjs/'+ngVersion+'/angular.js"></script>\n' +
19 |           '    <script src="//pineconellc.github.io/angular-foundation/mm-foundation-tpls-'+version+'.js"></script>\n' +
20 |           '    <script src="example.js"></script>\n' +
21 |           '    <link href="//cdnjs.cloudflare.com/ajax/libs/foundation/'+fdVersion+'/css/foundation.css" rel="stylesheet">\n' +
22 |           '  </head>\n' +
23 |           '  <body>\n\n' +
24 |           '    <div class="row">\n' +
25 |           '      <div class="small-12.columns">\n' +
26 |                    content + '\n' +
27 |           '      </div>\n' +
28 |           '    </div>\n' +
29 |           '  </body>\n' +
30 |           '</html>\n';
31 |       };
32 | 
33 |       var scriptContent = function(content) {
34 |         return "angular.module('foundationDemoApp', ['mm.foundation']);" + "\n" + content;
35 |       };
36 | 
37 |       addField('description', 'http://pineconellc.github.io/angular-foundation/');
38 |       addField('files[index.html]', indexContent(content.markup, version));
39 |       addField('files[example.js]', scriptContent(content.javascript));
40 | 
41 |       $document.find('body').append(form);
42 |       form[0].submit();
43 |       form.remove();
44 |     };
45 |   })
46 | 
47 |   .controller('PlunkerCtrl', function ($scope, plunkGenerator) {
48 | 
49 |     $scope.content = {};
50 | 
51 |     $scope.edit = function (ngVersion, fdVersion, version, module) {
52 |       plunkGenerator(ngVersion, fdVersion, version, module, $scope.content);
53 |     };
54 |   })
55 | 
56 |   .directive('plunkerContent', function () {
57 |     return {
58 |       link:function (scope, element, attrs) {
59 |         scope.content[attrs.plunkerContent] = element.text().trim();
60 |       }
61 |     }
62 |   });
63 | 


--------------------------------------------------------------------------------
/misc/demo/assets/rainbow-generic.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Generic language patterns
 3 |  *
 4 |  * @author Craig Campbell
 5 |  * @version 1.0.9
 6 |  */
 7 | Rainbow.extend([
 8 |     {
 9 |         'matches': {
10 |             1: {
11 |                 'name': 'keyword.operator',
12 |                 'pattern': /\=/g
13 |             },
14 |             2: {
15 |                 'name': 'string',
16 |                 'matches': {
17 |                     'name': 'constant.character.escape',
18 |                     'pattern': /\\('|"){1}/g
19 |                 }
20 |             }
21 |         },
22 |         'pattern': /(\(|\s|\[|\=|:)(('|")([^\\\1]|\\.)*?(\3))/gm
23 |     },
24 |     {
25 |         'name': 'comment',
26 |         'pattern': /\/\*[\s\S]*?\*\/|(\/\/|\#)[\s\S]*?$/gm
27 |     },
28 |     {
29 |         'name': 'constant.numeric',
30 |         'pattern': /\b(\d+(\.\d+)?(e(\+|\-)?\d+)?(f|d)?|0x[\da-f]+)\b/gi
31 |     },
32 |     {
33 |         'matches': {
34 |             1: 'keyword'
35 |         },
36 |         'pattern': /\b(and|array|as|bool(ean)?|c(atch|har|lass|onst)|d(ef|elete|o(uble)?)|e(cho|lse(if)?|xit|xtends|xcept)|f(inally|loat|or(each)?|unction)|global|if|import|int(eger)?|long|new|object|or|pr(int|ivate|otected)|public|return|self|st(ring|ruct|atic)|switch|th(en|is|row)|try|(un)?signed|var|void|while)(?=\(|\b)/gi
37 |     },
38 |     {
39 |         'name': 'constant.language',
40 |         'pattern': /true|false|null/g
41 |     },
42 |     {
43 |         'name': 'keyword.operator',
44 |         'pattern': /\+|\!|\-|&(gt|lt|amp);|\||\*|\=/g
45 |     },
46 |     {
47 |         'matches': {
48 |             1: 'function.call'
49 |         },
50 |         'pattern': /(\w+?)(?=\()/g
51 |     },
52 |     {
53 |         'matches': {
54 |             1: 'storage.function',
55 |             2: 'entity.name.function'
56 |         },
57 |         'pattern': /(function)\s(.*?)(?=\()/g
58 |     }
59 | ]);
60 | 


--------------------------------------------------------------------------------
/misc/demo/assets/rainbow-html.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * HTML patterns
 3 |  *
 4 |  * @author Craig Campbell
 5 |  * @version 1.0.7
 6 |  */
 7 | Rainbow.extend('html', [
 8 |     {
 9 |         'name': 'source.php.embedded',
10 |         'matches': {
11 |             2: {
12 |                 'language': 'php'
13 |             }
14 |         },
15 |         'pattern': /&lt;\?=?(?!xml)(php)?([\s\S]*?)(\?&gt;)/gm
16 |     },
17 |     {
18 |         'name': 'source.css.embedded',
19 |         'matches': {
20 |             0: {
21 |                 'language': 'css'
22 |             }
23 |         },
24 |         'pattern': /&lt;style(.*?)&gt;([\s\S]*?)&lt;\/style&gt;/gm
25 |     },
26 |     {
27 |         'name': 'source.js.embedded',
28 |         'matches': {
29 |             0: {
30 |                 'language': 'javascript'
31 |             }
32 |         },
33 |         'pattern': /&lt;script(?! src)(.*?)&gt;([\s\S]*?)&lt;\/script&gt;/gm
34 |     },
35 |     {
36 |         'name': 'comment.html',
37 |         'pattern': /&lt;\!--[\S\s]*?--&gt;/g
38 |     },
39 |     {
40 |         'matches': {
41 |             1: 'support.tag.open',
42 |             2: 'support.tag.cclose'
43 |         },
44 |         'pattern': /(&lt;)|(\/?\??&gt;)/g
45 |     },
46 |     {
47 |         'name': 'support.tag',
48 |         'matches': {
49 |             1: 'support.tag',
50 |             2: 'support.tag.special',
51 |             3: 'support.tag-name'
52 |         },
53 |         'pattern': /(&lt;\??)(\/|\!?)(\w+)/g
54 |     },
55 |     {
56 |         'matches': {
57 |             1: 'support.attribute'
58 |         },
59 |         'pattern': /([a-z-]+)(?=\=)/gi
60 |     },
61 |     {
62 |         'matches': {
63 |             1: 'support.operator',
64 |             2: 'string.quote',
65 |             3: 'string.value',
66 |             4: 'string.quote'
67 |         },
68 |         'pattern': /(=)('|")(.*?)(\2)/g
69 |     },
70 |     {
71 |         'matches': {
72 |             1: 'support.operator',
73 |             2: 'support.value'
74 |         },
75 |         'pattern': /(=)([a-zA-Z\-0-9]*)\b/g
76 |     },
77 |     {
78 |         'matches': {
79 |             1: 'support.attribute'
80 |         },
81 |         'pattern': /\s(\w+)(?=\s|&gt;)(?![\s\S]*&lt;)/g
82 |     }
83 | ], true);
84 | 


--------------------------------------------------------------------------------
/misc/demo/assets/rainbow-javascript.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * Javascript patterns
  3 |  *
  4 |  * @author Craig Campbell
  5 |  * @version 1.0.7
  6 |  */
  7 | Rainbow.extend('javascript', [
  8 | 
  9 |     /**
 10 |      * matches $. or $(
 11 |      */
 12 |     {
 13 |         'name': 'selector',
 14 |         'pattern': /(\s|^)\$(?=\.|\()/g
 15 |     },
 16 |     {
 17 |         'name': 'support',
 18 |         'pattern': /\b(window|document)\b/g
 19 |     },
 20 |     {
 21 |         'matches': {
 22 |             1: 'support.property'
 23 |         },
 24 |         'pattern': /\.(length|node(Name|Value))\b/g
 25 |     },
 26 |     {
 27 |         'matches': {
 28 |             1: 'support.function'
 29 |         },
 30 |         'pattern': /(setTimeout|setInterval)(?=\()/g
 31 | 
 32 |     },
 33 |     {
 34 |         'matches': {
 35 |             1: 'support.method'
 36 |         },
 37 |         'pattern': /\.(getAttribute|push|getElementById|getElementsByClassName|log|setTimeout|setInterval)(?=\()/g
 38 |     },
 39 |     {
 40 |         'matches': {
 41 |             1: 'support.tag.script',
 42 |             2: [
 43 |                 {
 44 |                     'name': 'string',
 45 |                     'pattern': /('|")(.*?)(\1)/g
 46 |                 },
 47 |                 {
 48 |                     'name': 'entity.tag.script',
 49 |                     'pattern': /(\w+)/g
 50 |                 }
 51 |             ],
 52 |             3: 'support.tag.script'
 53 |         },
 54 |         'pattern': /(&lt;\/?)(script.*?)(&gt;)/g
 55 |     },
 56 | 
 57 |     /**
 58 |      * matches any escaped characters inside of a js regex pattern
 59 |      *
 60 |      * @see https://github.com/ccampbell/rainbow/issues/22
 61 |      *
 62 |      * this was causing single line comments to fail so it now makes sure
 63 |      * the opening / is not directly followed by a *
 64 |      *
 65 |      * @todo check that there is valid regex in match group 1
 66 |      */
 67 |     {
 68 |         'name': 'string.regexp',
 69 |         'matches': {
 70 |             1: 'string.regexp.open',
 71 |             2: {
 72 |                 'name': 'constant.regexp.escape',
 73 |                 'pattern': /\\(.){1}/g
 74 |             },
 75 |             3: 'string.regexp.cclose',
 76 |             4: 'string.regexp.modifier'
 77 |         },
 78 |         'pattern': /(\/)(?!\*)(.+)(\/)([igm]{0,3})/g
 79 |     },
 80 | 
 81 |     /**
 82 |      * matches runtime function declarations
 83 |      */
 84 |     {
 85 |         'matches': {
 86 |             1: 'storage',
 87 |             3: 'entity.function'
 88 |         },
 89 |         'pattern': /(var)?(\s|^)(.*)(?=\s?=\s?function\()/g
 90 |     },
 91 | 
 92 |     /**
 93 |      * matches constructor call
 94 |      */
 95 |     {
 96 |         'matches': {
 97 |             1: 'keyword',
 98 |             2: 'entity.function'
 99 |         },
100 |         'pattern': /(new)\s+(.*)(?=\()/g
101 |     },
102 | 
103 |     /**
104 |      * matches any function call in the style functionName: function()
105 |      */
106 |     {
107 |         'name': 'entity.function',
108 |         'pattern': /(\w+)(?=:\s{0,}function)/g
109 |     }
110 | ]);
111 | 


--------------------------------------------------------------------------------
/misc/demo/assets/rainbow.css:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * GitHub theme
 3 |  *
 4 |  * @author Craig Campbell
 5 |  * @version 1.0.4
 6 |  */
 7 | pre {
 8 |     border: 1px solid #ccc;
 9 |     word-wrap: break-word;
10 |     padding: 6px 10px;
11 |     line-height: 19px;
12 |     margin-bottom: 20px;
13 | }
14 | 
15 | code {
16 |     border: 1px solid #eaeaea;
17 |     margin: 0 2px;
18 |     padding: 0 5px;
19 |     font-size: 12px;
20 | }
21 | 
22 | pre code {
23 |     border: 0;
24 |     padding: 0;
25 |     margin: 0;
26 |     -moz-border-radius: 0;
27 |     -webkit-border-radius: 0;
28 |     border-radius: 0;
29 | }
30 | 
31 | pre, code {
32 |     font-family: Consolas, 'Liberation Mono', Courier, monospace;
33 |     color: #333;
34 |     background: #f8f8f8;
35 |     -moz-border-radius: 3px;
36 |     -webkit-border-radius: 3px;
37 |     border-radius: 3px;
38 | }
39 | 
40 | pre, pre code {
41 |     font-size: 13px;
42 | }
43 | 
44 | pre .comment {
45 |     color: #998;
46 | }
47 | 
48 | pre .support {
49 |     color: #0086B3;
50 | }
51 | 
52 | pre .tag, pre .tag-name {
53 |     color: navy;
54 | }
55 | 
56 | pre .keyword, pre .css-property, pre .vendor-prefix, pre .sass, pre .class, pre .id, pre .css-value, pre .entity.function, pre .storage.function {
57 |     font-weight: bold;
58 | }
59 | 
60 | pre .css-property, pre .css-value, pre .vendor-prefix, pre .support.namespace {
61 |     color: #333;
62 | }
63 | 
64 | pre .constant.numeric, pre .keyword.unit, pre .hex-color {
65 |     font-weight: normal;
66 |     color: #099;
67 | }
68 | 
69 | pre .entity.class {
70 |     color: #458;
71 | }
72 | 
73 | pre .entity.id, pre .entity.function {
74 |     color: #900;
75 | }
76 | 
77 | pre .attribute, pre .variable {
78 |     color: teal;
79 | }
80 | 
81 | pre .string, pre .support.value  {
82 |     font-weight: normal;
83 |     color: #d14;
84 | }
85 | 
86 | pre .regexp {
87 |     color: #009926;
88 | }
89 | 


--------------------------------------------------------------------------------
/misc/demo/assets/smoothscroll-angular-custom.js:
--------------------------------------------------------------------------------
 1 | /*
 2 |  * https://github.com/alicelieutier/smoothScroll/
 3 |  * A teeny tiny, standard compliant, smooth scroll script with ease-in-out effect and no jQuery (or any other dependancy, FWIW).
 4 |  * MIT License
 5 |  */
 6 | window.smoothScroll = (function(){
 7 | // We do not want this script to be applied in browsers that do not support those
 8 | // That means no smoothscroll on IE9 and below.
 9 | if(document.querySelectorAll === void 0 || window.pageYOffset === void 0 || history.pushState === void 0) { return; }
10 | 
11 | // Get the top position of an element in the document
12 | var getTop = function(element) {
13 |     // return value of html.getBoundingClientRect().top ... IE : 0, other browsers : -pageYOffset
14 |     if(element.nodeName === 'HTML') return -window.pageYOffset
15 |     return element.getBoundingClientRect().top + window.pageYOffset;
16 | }
17 | // ease in out function thanks to:
18 | // http://blog.greweb.fr/2012/02/bezier-curve-based-easing-functions-from-concept-to-implementation/
19 | var easeInOutCubic = function (t) { return t<.5 ? 4*t*t*t : (t-1)*(2*t-2)*(2*t-2)+1 }
20 | 
21 | // calculate the scroll position we should be in
22 | // given the start and end point of the scroll
23 | // the time elapsed from the beginning of the scroll
24 | // and the total duration of the scroll (default 500ms)
25 | var position = function(start, end, elapsed, duration) {
26 |     if (elapsed > duration) return end;
27 |     return start + (end - start) * easeInOutCubic(elapsed / duration); // <-- you can change the easing funtion there
28 |     // return start + (end - start) * (elapsed / duration); // <-- this would give a linear scroll
29 | }
30 | 
31 | // we use requestAnimationFrame to be called by the browser before every repaint
32 | // if the first argument is an element then scroll to the top of this element
33 | // if the first argument is numeric then scroll to this location
34 | // if the callback exist, it is called when the scrolling is finished
35 | var smoothScroll = function(el, duration, callback){
36 |     duration = duration || 500;
37 |     var start = window.pageYOffset;
38 | 
39 |     if (typeof el === 'number') {
40 |       var end = parseInt(el);
41 |     } else {
42 |       var end = getTop(el);
43 |     }
44 | 
45 |     var clock = Date.now();
46 |     var requestAnimationFrame = window.requestAnimationFrame ||
47 |         window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame ||
48 |         function(fn){window.setTimeout(fn, 15);};
49 | 
50 |     var step = function(){
51 |         var elapsed = Date.now() - clock;
52 |         window.scroll(0, position(start, end, elapsed, duration));
53 |         if (elapsed > duration) {
54 |             if (typeof callback === 'function') {
55 |                 callback(el);
56 |             }
57 |         } else {
58 |             requestAnimationFrame(step);
59 |         }
60 |     }
61 |     step();
62 | }
63 | 
64 | var linkHandler = function(ev) {
65 |     ev.preventDefault();
66 | 
67 |     if (location.hash !== this.hash) {
68 |       //NOTE(@ajoslin): Changed this line to stop $digest errors
69 |       //window.history.pushState(null, null, this.hash)
70 |       angular.element(document).injector().get('$location').hash(this.hash);
71 |     }
72 |     // using the history api to solve issue #1 - back doesn't work
73 |     // most browser don't update :target when the history api is used:
74 |     // THIS IS A BUG FROM THE BROWSERS.
75 |     // change the scrolling duration in this call
76 |     var hashname = this.hash.substring(1);
77 |     if(!hashname){
78 |         return;
79 |     }
80 |     smoothScroll(document.getElementById(hashname), 500, function(el) {
81 |         location.replace('#' + el.id);
82 |         // this will cause the :target to be activated.
83 |     });
84 | }
85 | 
86 | // We look for all the internal links in the documents and attach the smoothscroll function
87 | document.addEventListener("DOMContentLoaded", function () {
88 |     var internal = document.querySelectorAll('a[href^="#"]'), a;
89 |     for(var i=internal.length; a=internal[--i];){
90 |         a.addEventListener("click", linkHandler, false);
91 |     }
92 | });
93 | 
94 | // return smoothscroll API
95 | return smoothScroll;
96 | 
97 | })();
98 | 
99 | 


--------------------------------------------------------------------------------
/misc/test-lib/helpers.js:
--------------------------------------------------------------------------------
 1 | // jasmine matcher for expecting an element to have a css class
 2 | // https://github.com/angular/angular.js/blob/master/test/matchers.js
 3 | beforeEach(function() {
 4 |   this.addMatchers({
 5 |     toHaveClass: function(cls) {
 6 |       this.message = function() {
 7 |         return "Expected '" + this.actual + "'" + (this.isNot ? ' not ' : ' ') + "to have class '" + cls + "'.";
 8 |       };
 9 | 
10 |       return this.actual.hasClass(cls);
11 |     },
12 |     toBeHidden: function () {
13 |       var element = angular.element(this.actual);
14 |       return element.hasClass('ng-hide') ||
15 |         element.css('display') == 'none';
16 |     }
17 |   });
18 | });
19 | 


--------------------------------------------------------------------------------
/misc/validate-commit-msg.js:
--------------------------------------------------------------------------------
  1 | #!/usr/bin/env node
  2 | 
  3 | /**
  4 |  * Git COMMIT-MSG hook for validating commit message
  5 |  * See https://docs.google.com/document/d/1rk04jEuGfk9kYzfqCuOlPTSJw3hEDZJTBN5E5f1SALo/edit
  6 |  *
  7 |  * Installation:
  8 |  * >> cd <angular-repo>
  9 |  * >> ln -s validate-commit-msg.js .git/hooks/commit-msg
 10 |  */
 11 | var fs = require('fs');
 12 | var util = require('util');
 13 | 
 14 | 
 15 | var MAX_LENGTH = 70;
 16 | var PATTERN = /^(?:fixup!\s*)?(\w*)(\((\w+)\))?\: (.*)$/;
 17 | var IGNORED = /^WIP\:/;
 18 | var TYPES = {
 19 |   chore: true,
 20 |   demo: true,
 21 |   docs: true,
 22 |   feat: true,
 23 |   fix: true,
 24 |   refactor: true,
 25 |   revert: true,
 26 |   style: true,
 27 |   test: true
 28 | };
 29 | 
 30 | 
 31 | var error = function() {
 32 |   // gitx does not display it
 33 |   // http://gitx.lighthouseapp.com/projects/17830/tickets/294-feature-display-hook-error-message-when-hook-fails
 34 |   // https://groups.google.com/group/gitx/browse_thread/thread/a03bcab60844b812
 35 |   console.error('INVALID COMMIT MSG: ' + util.format.apply(null, arguments));
 36 | };
 37 | 
 38 | 
 39 | var validateMessage = function(message) {
 40 |   var isValid = true;
 41 | 
 42 |   if (IGNORED.test(message)) {
 43 |     console.log('Commit message validation ignored.');
 44 |     return true;
 45 |   }
 46 | 
 47 |   if (message.length > MAX_LENGTH) {
 48 |     error('is longer than %d characters !', MAX_LENGTH);
 49 |     isValid = false;
 50 |   }
 51 | 
 52 |   var match = PATTERN.exec(message);
 53 | 
 54 |   if (!match) {
 55 |     error('does not match "<type>(<scope>): <subject>" ! was: "' + message + '"\nNote: <scope> must be only letters.');
 56 |     return false;
 57 |   }
 58 | 
 59 |   var type = match[1];
 60 |   var scope = match[3];
 61 |   var subject = match[4];
 62 | 
 63 |   if (!TYPES.hasOwnProperty(type)) {
 64 |     error('"%s" is not allowed type !', type);
 65 |     return false;
 66 |   }
 67 | 
 68 |   // Some more ideas, do want anything like this ?
 69 |   // - allow only specific scopes (eg. fix(docs) should not be allowed ?
 70 |   // - auto correct the type to lower case ?
 71 |   // - auto correct first letter of the subject to lower case ?
 72 |   // - auto add empty line after subject ?
 73 |   // - auto remove empty () ?
 74 |   // - auto correct typos in type ?
 75 |   // - store incorrect messages, so that we can learn
 76 | 
 77 |   return isValid;
 78 | };
 79 | 
 80 | 
 81 | var firstLineFromBuffer = function(buffer) {
 82 |   return buffer.toString().split('\n').shift();
 83 | };
 84 | 
 85 | 
 86 | 
 87 | // publish for testing
 88 | exports.validateMessage = validateMessage;
 89 | 
 90 | // hacky start if not run by jasmine :-D
 91 | if (process.argv.join('').indexOf('jasmine-node') === -1) {
 92 |   var commitMsgFile = process.argv[2];
 93 |   var incorrectLogFile = commitMsgFile.replace('COMMIT_EDITMSG', 'logs/incorrect-commit-msgs');
 94 | 
 95 |   fs.readFile(commitMsgFile, function(err, buffer) {
 96 |     var msg = firstLineFromBuffer(buffer);
 97 | 
 98 |     if (!validateMessage(msg)) {
 99 |       fs.appendFile(incorrectLogFile, msg + '\n', function() {
100 |         process.exit(1);
101 |       });
102 |     } else {
103 |       process.exit(0);
104 |     }
105 |   });
106 | }
107 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "author": "Pinecone, LLC",
 3 |   "name": "angular-mm-foundation",
 4 |   "version": "0.9.0-SNAPSHOT",
 5 |   "homepage": "http://pineconellc.github.io/angular-foundation/",
 6 |   "repository": {
 7 |     "type": "git",
 8 |     "url": "git://github.com/pineconellc/angular-foundation.git"
 9 |   },
10 |   "devDependencies": {
11 |     "karma": "~0.12.0",
12 |     "karma-jasmine": "~0.1.0",
13 |     "karma-chrome-launcher": "~0.1",
14 |     "grunt": "~0.4.1",
15 |     "grunt-ngdocs": "~0.1.1",
16 |     "grunt-conventional-changelog": "~1.0.0",
17 |     "grunt-contrib-concat": "~0.3.0",
18 |     "grunt-contrib-connect": "~0.6.0",
19 |     "grunt-contrib-copy": "~0.5.0",
20 |     "grunt-contrib-uglify": "~0.3.0",
21 |     "grunt-contrib-watch": "~0.5.0",
22 |     "grunt-contrib-jshint": "~0.8.0",
23 |     "grunt-html2js": "~0.2.0",
24 |     "grunt-karma": "~0.9.0",
25 |     "grunt-open": "~0.2.3",
26 |     "load-grunt-tasks": "~0.3.0",
27 |     "node-markdown": "0.1.1",
28 |     "semver": "~4.3.2",
29 |     "shelljs": "~0.2.0"
30 |   },
31 |   "license": "MIT"
32 | }
33 | 


--------------------------------------------------------------------------------
/src/accordion/accordion.js:
--------------------------------------------------------------------------------
  1 | angular.module('mm.foundation.accordion', [])
  2 | 
  3 | .constant('accordionConfig', {
  4 |   closeOthers: true
  5 | })
  6 | 
  7 | .controller('AccordionController', ['$scope', '$attrs', 'accordionConfig', function ($scope, $attrs, accordionConfig) {
  8 | 
  9 |   // This array keeps track of the accordion groups
 10 |   this.groups = [];
 11 | 
 12 |   // Ensure that all the groups in this accordion are closed, unless close-others explicitly says not to
 13 |   this.closeOthers = function(openGroup) {
 14 |     var closeOthers = angular.isDefined($attrs.closeOthers) ? $scope.$eval($attrs.closeOthers) : accordionConfig.closeOthers;
 15 |     if ( closeOthers ) {
 16 |       angular.forEach(this.groups, function (group) {
 17 |         if ( group !== openGroup ) {
 18 |           group.isOpen = false;
 19 |         }
 20 |       });
 21 |     }
 22 |   };
 23 |   
 24 |   // This is called from the accordion-group directive to add itself to the accordion
 25 |   this.addGroup = function(groupScope) {
 26 |     var that = this;
 27 |     this.groups.push(groupScope);
 28 | 
 29 |     groupScope.$on('$destroy', function (event) {
 30 |       that.removeGroup(groupScope);
 31 |     });
 32 |   };
 33 | 
 34 |   // This is called from the accordion-group directive when to remove itself
 35 |   this.removeGroup = function(group) {
 36 |     var index = this.groups.indexOf(group);
 37 |     if ( index !== -1 ) {
 38 |       this.groups.splice(index, 1);
 39 |     }
 40 |   };
 41 | 
 42 | }])
 43 | 
 44 | // The accordion directive simply sets up the directive controller
 45 | // and adds an accordion CSS class to itself element.
 46 | .directive('accordion', function () {
 47 |   return {
 48 |     restrict:'EA',
 49 |     controller:'AccordionController',
 50 |     transclude: true,
 51 |     replace: false,
 52 |     templateUrl: 'template/accordion/accordion.html'
 53 |   };
 54 | })
 55 | 
 56 | // The accordion-group directive indicates a block of html that will expand and collapse in an accordion
 57 | .directive('accordionGroup', ['$parse', function($parse) {
 58 |   return {
 59 |     require:'^accordion',         // We need this directive to be inside an accordion
 60 |     restrict:'EA',
 61 |     transclude:true,              // It transcludes the contents of the directive into the template
 62 |     replace: true,                // The element containing the directive will be replaced with the template
 63 |     templateUrl:'template/accordion/accordion-group.html',
 64 |     scope:{ heading:'@' },        // Create an isolated scope and interpolate the heading attribute onto this scope
 65 |     controller: function() {
 66 |       this.setHeading = function(element) {
 67 |         this.heading = element;
 68 |       };
 69 |     },
 70 |     link: function(scope, element, attrs, accordionCtrl) {
 71 |       var getIsOpen, setIsOpen;
 72 | 
 73 |       accordionCtrl.addGroup(scope);
 74 | 
 75 |       scope.isOpen = false;
 76 |       
 77 |       if ( attrs.isOpen ) {
 78 |         getIsOpen = $parse(attrs.isOpen);
 79 |         setIsOpen = getIsOpen.assign;
 80 | 
 81 |         scope.$parent.$watch(getIsOpen, function(value) {
 82 |           scope.isOpen = !!value;
 83 |         });
 84 |       }
 85 | 
 86 |       scope.$watch('isOpen', function(value) {
 87 |         if ( value ) {
 88 |           accordionCtrl.closeOthers(scope);
 89 |         }
 90 |         if ( setIsOpen ) {
 91 |           setIsOpen(scope.$parent, value);
 92 |         }
 93 |       });
 94 |     }
 95 |   };
 96 | }])
 97 | 
 98 | // Use accordion-heading below an accordion-group to provide a heading containing HTML
 99 | // <accordion-group>
100 | //   <accordion-heading>Heading containing HTML - <img src="..."></accordion-heading>
101 | // </accordion-group>
102 | .directive('accordionHeading', function() {
103 |   return {
104 |     restrict: 'EA',
105 |     transclude: true,   // Grab the contents to be used as the heading
106 |     template: '',       // In effect remove this element!
107 |     replace: true,
108 |     require: '^accordionGroup',
109 |     compile: function(element, attr, transclude) {
110 |       return function link(scope, element, attr, accordionGroupCtrl) {
111 |         // Pass the heading to the accordion-group controller
112 |         // so that it can be transcluded into the right place in the template
113 |         // [The second parameter to transclude causes the elements to be cloned so that they work in ng-repeat]
114 |         accordionGroupCtrl.setHeading(transclude(scope, function() {}));
115 |       };
116 |     }
117 |   };
118 | })
119 | 
120 | // Use in the accordion-group template to indicate where you want the heading to be transcluded
121 | // You must provide the property on the accordion-group controller that will hold the transcluded element
122 | // <div class="accordion-group">
123 | //   <div class="accordion-heading" ><a ... accordion-transclude="heading">...</a></div>
124 | //   ...
125 | // </div>
126 | .directive('accordionTransclude', function() {
127 |   return {
128 |     require: '^accordionGroup',
129 |     link: function(scope, element, attr, controller) {
130 |       scope.$watch(function() { return controller[attr.accordionTransclude]; }, function(heading) {
131 |         if ( heading ) {
132 |           element.html('');
133 |           element.append(heading);
134 |         }
135 |       });
136 |     }
137 |   };
138 | });
139 | 


--------------------------------------------------------------------------------
/src/accordion/docs/demo.html:
--------------------------------------------------------------------------------
 1 | <div ng-controller="AccordionDemoCtrl">
 2 |   <label class="checkbox">
 3 |     <input type="checkbox" ng-model="oneAtATime">
 4 |     Open only one at a time
 5 |   </label>
 6 | 
 7 |   <accordion close-others="oneAtATime">
 8 |     <accordion-group heading="Static Header, initially expanded" is-open="true">
 9 |       This content is straight in the template.
10 |     </accordion-group>
11 |     <accordion-group heading="{{group.title}}" ng-repeat="group in groups">
12 |       {{group.content}}
13 |     </accordion-group>
14 |     <accordion-group heading="Dynamic Body Content">
15 |       <p>The body of the accordion group grows to fit the contents</p>
16 |         <button class="button small" ng-click="addItem()">Add Item</button>
17 |         <div ng-repeat="item in items">{{item}}</div>
18 |     </accordion-group>
19 |     <accordion-group is-open="isopen">
20 |         <accordion-heading>
21 |             I can have markup, too! <i class="right" ng-class="{'fa fa-chevron-down': isopen, 'fa fa-chevron-right': !isopen}"></i>
22 |         </accordion-heading>
23 |         This is just some content to illustrate fancy headings.
24 |     </accordion-group>
25 |   </accordion>
26 | </div>
27 | 


--------------------------------------------------------------------------------
/src/accordion/docs/demo.js:
--------------------------------------------------------------------------------
 1 | angular.module('foundationDemoApp').controller('AccordionDemoCtrl', function($scope) {
 2 |   $scope.oneAtATime = true;
 3 | 
 4 |   $scope.groups = [
 5 |     {
 6 |       title: "Dynamic Group Header - 1",
 7 |       content: "Dynamic Group Body - 1"
 8 |     },
 9 |     {
10 |       title: "Dynamic Group Header - 2",
11 |       content: "Dynamic Group Body - 2"
12 |     }
13 |   ];
14 | 
15 |   $scope.items = ['Item 1', 'Item 2', 'Item 3'];
16 | 
17 |   $scope.addItem = function() {
18 |     var newItemNo = $scope.items.length + 1;
19 |     $scope.items.push('Item ' + newItemNo);
20 |   };
21 | });
22 | 


--------------------------------------------------------------------------------
/src/accordion/docs/readme.md:
--------------------------------------------------------------------------------
1 | The **accordion directive** builds on top of the collapse directive to provide a list of items, with collapsible bodies that are collapsed or expanded by clicking on the item's header.
2 | 
3 | We can control whether expanding an item will cause the other items to close, using the `close-others` attribute on accordion.
4 | 
5 | The body of each accordion group is transcluded in to the body of the collapsible element.


--------------------------------------------------------------------------------
/src/alert/alert.js:
--------------------------------------------------------------------------------
 1 | angular.module("mm.foundation.alert", [])
 2 | 
 3 | .controller('AlertController', ['$scope', '$attrs', function ($scope, $attrs) {
 4 |   $scope.closeable = 'close' in $attrs && typeof $attrs.close !== "undefined";
 5 | }])
 6 | 
 7 | .directive('alert', function () {
 8 |   return {
 9 |     restrict:'EA',
10 |     controller:'AlertController',
11 |     templateUrl:'template/alert/alert.html',
12 |     transclude:true,
13 |     replace:true,
14 |     scope: {
15 |       type: '=',
16 |       close: '&'
17 |     }
18 |   };
19 | });
20 | 


--------------------------------------------------------------------------------
/src/alert/docs/demo.html:
--------------------------------------------------------------------------------
1 | <div ng-controller="AlertDemoCtrl">
2 |   <alert ng-repeat="alert in alerts" type="alert.type" close="closeAlert($index)">{{alert.msg}}</alert>
3 |   <button class='button' ng-click="addAlert()">Add Alert</button>
4 | </div>
5 | 


--------------------------------------------------------------------------------
/src/alert/docs/demo.js:
--------------------------------------------------------------------------------
 1 | angular.module('foundationDemoApp').controller('AlertDemoCtrl', function($scope) {
 2 |   $scope.alerts = [
 3 |     { type: 'danger', msg: 'Oh snap! Change a few things up and try submitting again.' },
 4 |     { type: 'success round', msg: 'Well done! You successfully read this important alert message.' }
 5 |   ];
 6 | 
 7 |   $scope.addAlert = function() {
 8 |     $scope.alerts.push({msg: "Another alert!"});
 9 |   };
10 | 
11 |   $scope.closeAlert = function(index) {
12 |     $scope.alerts.splice(index, 1);
13 |   };
14 | 
15 | });
16 | 


--------------------------------------------------------------------------------
/src/alert/docs/readme.md:
--------------------------------------------------------------------------------
1 | Alert is an AngularJS-version of Foundation's alert.
2 | 
3 | This directive can be used to generate alerts from the dynamic model data (using the ng-repeat directive);
4 | 
5 | The presence of the "close" attribute determines if a close button is displayed
6 | 


--------------------------------------------------------------------------------
/src/alert/test/alert.spec.js:
--------------------------------------------------------------------------------
  1 | describe("alert", function () {
  2 | 
  3 |   var scope, $compile;
  4 |   var element;
  5 | 
  6 |   beforeEach(module('mm.foundation.alert'));
  7 |   beforeEach(module('template/alert/alert.html'));
  8 | 
  9 |   beforeEach(inject(function ($rootScope, _$compile_, $controller) {
 10 | 
 11 |     scope = $rootScope;
 12 |     $compile = _$compile_;
 13 | 
 14 |     element = angular.element(
 15 |         "<div>" + 
 16 |           "<alert ng-repeat='alert in alerts' type='alert.type'" +
 17 |             "close='removeAlert($index)'>{{alert.msg}}" +
 18 |           "</alert>" +
 19 |         "</div>");
 20 | 
 21 |     scope.alerts = [
 22 |       { msg:'foo', type:'success'},
 23 |       { msg:'bar', type:'warning round'},
 24 |       { msg:'baz', type:'info radius'},
 25 |       { msg:'qux'}
 26 |     ];
 27 |   }));
 28 | 
 29 |   function createAlerts() {
 30 |     $compile(element)(scope);
 31 |     scope.$digest();
 32 |     return element.find('.alert-box');
 33 |   }
 34 | 
 35 |   function findCloseButton(index) {
 36 |     return element.find('.close').eq(index);
 37 |   }
 38 | 
 39 |   function findContent(index) {
 40 |     return element.find('div > span').eq(index);
 41 |   }
 42 | 
 43 |   it("should generate alerts using ng-repeat", function () {
 44 |     var alerts = createAlerts();
 45 |     expect(alerts.length).toEqual(4);
 46 |   });
 47 | 
 48 |   it("should use correct classes for different alert types", function () {
 49 |     var alerts = createAlerts();
 50 |     expect(alerts.eq(0).is('.alert-box.success')).toBe(true);
 51 |     expect(alerts.eq(1).is('.alert-box.warning.round')).toBe(true);
 52 |     expect(alerts.eq(2).is('.alert-box.info.radius')).toBe(true);
 53 |     expect(alerts.eq(3).is('.alert-box')).toBe(true);
 54 |   });
 55 | 
 56 |   it('should show the alert content', function() {
 57 |     var alerts = createAlerts();
 58 | 
 59 |     for (var i = 0, n = alerts.length; i < n; i++) {
 60 |       expect(findContent(i).text()).toBe(scope.alerts[i].msg);
 61 |     }
 62 |   });
 63 | 
 64 |   it("should show close buttons", function () {
 65 |     var alerts = createAlerts();
 66 | 
 67 |     for (var i = 0, n = alerts.length; i < n; i++) {
 68 |       expect(findCloseButton(i).css('display')).not.toBe('none');
 69 |     }
 70 |   });
 71 | 
 72 |   it("should fire callback when closed", function () {
 73 | 
 74 |     var alerts = createAlerts();
 75 | 
 76 |     scope.$apply(function () {
 77 |       scope.removeAlert = jasmine.createSpy();
 78 |     });
 79 | 
 80 |     expect(findCloseButton(0).css('display')).not.toBe('none');
 81 |     findCloseButton(1).click();
 82 | 
 83 |     expect(scope.removeAlert).toHaveBeenCalledWith(1);
 84 |   });
 85 | 
 86 |   it('should not show close buttons if no close callback specified', function () {
 87 |     element = $compile('<alert>No close</alert>')(scope);
 88 |     scope.$digest();
 89 |     expect(findCloseButton(0)).toBeHidden();
 90 |   });
 91 | 
 92 |   it('should be possible to add additional classes for alert', function () {
 93 |     var element = $compile('<alert class="alert-block" type="\'info\'">Default alert!</alert>')(scope);
 94 |     scope.$digest();
 95 |     expect(element).toHaveClass('alert-block');
 96 |     expect(element).toHaveClass('info');
 97 |   });
 98 | 
 99 | });
100 | 


--------------------------------------------------------------------------------
/src/bindHtml/bindHtml.js:
--------------------------------------------------------------------------------
 1 | angular.module('mm.foundation.bindHtml', [])
 2 | 
 3 |   .directive('bindHtmlUnsafe', function () {
 4 |     return function (scope, element, attr) {
 5 |       element.addClass('ng-binding').data('$binding', attr.bindHtmlUnsafe);
 6 |       scope.$watch(attr.bindHtmlUnsafe, function bindHtmlUnsafeWatchAction(value) {
 7 |         element.html(value || '');
 8 |       });
 9 |     };
10 |   });
11 | 


--------------------------------------------------------------------------------
/src/buttons/buttons.js:
--------------------------------------------------------------------------------
 1 | angular.module('mm.foundation.buttons', [])
 2 | 
 3 | .constant('buttonConfig', {
 4 |   activeClass: 'active',
 5 |   toggleEvent: 'click'
 6 | })
 7 | 
 8 | .controller('ButtonsController', ['buttonConfig', function(buttonConfig) {
 9 |   this.activeClass = buttonConfig.activeClass;
10 |   this.toggleEvent = buttonConfig.toggleEvent;
11 | }])
12 | 
13 | .directive('btnRadio', function () {
14 |   return {
15 |     require: ['btnRadio', 'ngModel'],
16 |     controller: 'ButtonsController',
17 |     link: function (scope, element, attrs, ctrls) {
18 |       var buttonsCtrl = ctrls[0], ngModelCtrl = ctrls[1];
19 | 
20 |       //model -> UI
21 |       ngModelCtrl.$render = function () {
22 |         element.toggleClass(buttonsCtrl.activeClass, angular.equals(ngModelCtrl.$modelValue, scope.$eval(attrs.btnRadio)));
23 |       };
24 | 
25 |       //ui->model
26 |       element.bind(buttonsCtrl.toggleEvent, function () {
27 |         if (!element.hasClass(buttonsCtrl.activeClass)) {
28 |           scope.$apply(function () {
29 |             ngModelCtrl.$setViewValue(scope.$eval(attrs.btnRadio));
30 |             ngModelCtrl.$render();
31 |           });
32 |         }
33 |       });
34 |     }
35 |   };
36 | })
37 | 
38 | .directive('btnCheckbox', function () {
39 |   return {
40 |     require: ['btnCheckbox', 'ngModel'],
41 |     controller: 'ButtonsController',
42 |     link: function (scope, element, attrs, ctrls) {
43 |       var buttonsCtrl = ctrls[0], ngModelCtrl = ctrls[1];
44 | 
45 |       function getTrueValue() {
46 |         return getCheckboxValue(attrs.btnCheckboxTrue, true);
47 |       }
48 | 
49 |       function getFalseValue() {
50 |         return getCheckboxValue(attrs.btnCheckboxFalse, false);
51 |       }
52 |       
53 |       function getCheckboxValue(attributeValue, defaultValue) {
54 |         var val = scope.$eval(attributeValue);
55 |         return angular.isDefined(val) ? val : defaultValue;
56 |       }
57 | 
58 |       //model -> UI
59 |       ngModelCtrl.$render = function () {
60 |         element.toggleClass(buttonsCtrl.activeClass, angular.equals(ngModelCtrl.$modelValue, getTrueValue()));
61 |       };
62 | 
63 |       //ui->model
64 |       element.bind(buttonsCtrl.toggleEvent, function () {
65 |         scope.$apply(function () {
66 |           ngModelCtrl.$setViewValue(element.hasClass(buttonsCtrl.activeClass) ? getFalseValue() : getTrueValue());
67 |           ngModelCtrl.$render();
68 |         });
69 |       });
70 |     }
71 |   };
72 | });
73 | 


--------------------------------------------------------------------------------
/src/buttons/docs/demo.html:
--------------------------------------------------------------------------------
 1 | <div ng-controller="ButtonsCtrl">
 2 |     <h4>Single toggle</h4>
 3 |     <pre>{{singleModel}}</pre>
 4 |     <button type="button" class="button" ng-model="singleModel" btn-checkbox btn-checkbox-true="1" btn-checkbox-false="0">
 5 |         Single Toggle
 6 |     </button>
 7 |     <h4>Checkbox</h4>
 8 |     <pre>{{checkModel}}</pre>
 9 |     <div class="button-group">
10 |         <button type="button" class="button" ng-model="checkModel.left" btn-checkbox>Left</button>
11 |         <button type="button" class="button" ng-model="checkModel.middle" btn-checkbox>Middle</button>
12 |         <button type="button" class="button" ng-model="checkModel.right" btn-checkbox>Right</button>
13 |     </div>
14 |     <h4>Radio</h4>
15 |     <pre>{{radioModel}}</pre>
16 |     <div class="button-group">
17 |         <button type="button" class="button" ng-model="radioModel" btn-radio="'Left'">Left</button>
18 |         <button type="button" class="button" ng-model="radioModel" btn-radio="'Middle'">Middle</button>
19 |         <button type="button" class="button" ng-model="radioModel" btn-radio="'Right'">Right</button>
20 |     </div>
21 | </div>
22 | 


--------------------------------------------------------------------------------
/src/buttons/docs/demo.js:
--------------------------------------------------------------------------------
 1 | angular.module('foundationDemoApp').controller('ButtonsCtrl', function ($scope) {
 2 | 
 3 |   $scope.singleModel = 1;
 4 | 
 5 |   $scope.radioModel = 'Middle';
 6 | 
 7 |   $scope.checkModel = {
 8 |     left: false,
 9 |     middle: true,
10 |     right: false
11 |   };
12 | });


--------------------------------------------------------------------------------
/src/buttons/docs/readme.md:
--------------------------------------------------------------------------------
1 | There are 2 directives that can make a group of buttons to behave like a set of checkboxes or radio buttons.
2 | 
3 | 


--------------------------------------------------------------------------------
/src/buttons/test/buttons.spec.js:
--------------------------------------------------------------------------------
  1 | describe('buttons', function () {
  2 | 
  3 |   var $scope, $compile;
  4 | 
  5 |   beforeEach(module('mm.foundation.buttons'));
  6 |   beforeEach(inject(function (_$rootScope_, _$compile_) {
  7 |     $scope = _$rootScope_;
  8 |     $compile = _$compile_;
  9 |   }));
 10 | 
 11 |   describe('checkbox', function () {
 12 | 
 13 |     var compileButton = function (markup, scope) {
 14 |       var el = $compile(markup)(scope);
 15 |       scope.$digest();
 16 |       return el;
 17 |     };
 18 | 
 19 |     //model -> UI
 20 |     it('should work correctly with default model values', function () {
 21 |       $scope.model = false;
 22 |       var btn = compileButton('<button ng-model="model" btn-checkbox>click</button>', $scope);
 23 |       expect(btn).not.toHaveClass('active');
 24 | 
 25 |       $scope.model = true;
 26 |       $scope.$digest();
 27 |       expect(btn).toHaveClass('active');
 28 |     });
 29 | 
 30 |     it('should bind custom model values', function () {
 31 |       $scope.model = 1;
 32 |       var btn = compileButton('<button ng-model="model" btn-checkbox btn-checkbox-true="1" btn-checkbox-false="0">click</button>', $scope);
 33 |       expect(btn).toHaveClass('active');
 34 | 
 35 |       $scope.model = 0;
 36 |       $scope.$digest();
 37 |       expect(btn).not.toHaveClass('active');
 38 |     });
 39 | 
 40 |     //UI-> model
 41 |     it('should toggle default model values on click', function () {
 42 |       $scope.model = false;
 43 |       var btn = compileButton('<button ng-model="model" btn-checkbox>click</button>', $scope);
 44 | 
 45 |       btn.click();
 46 |       expect($scope.model).toEqual(true);
 47 |       expect(btn).toHaveClass('active');
 48 | 
 49 |       btn.click();
 50 |       expect($scope.model).toEqual(false);
 51 |       expect(btn).not.toHaveClass('active');
 52 |     });
 53 | 
 54 |     it('should toggle custom model values on click', function () {
 55 |       $scope.model = 0;
 56 |       var btn = compileButton('<button ng-model="model" btn-checkbox btn-checkbox-true="1" btn-checkbox-false="0">click</button>', $scope);
 57 | 
 58 |       btn.click();
 59 |       expect($scope.model).toEqual(1);
 60 |       expect(btn).toHaveClass('active');
 61 | 
 62 |       btn.click();
 63 |       expect($scope.model).toEqual(0);
 64 |       expect(btn).not.toHaveClass('active');
 65 |     });
 66 | 
 67 |     it('should monitor true / false value changes - issue 666', function () {
 68 | 
 69 |       $scope.model = 1;
 70 |       $scope.trueVal = 1;
 71 |       var btn = compileButton('<button ng-model="model" btn-checkbox btn-checkbox-true="trueVal">click</button>', $scope);
 72 | 
 73 |       expect(btn).toHaveClass('active');
 74 |       expect($scope.model).toEqual(1);
 75 | 
 76 |       $scope.model = 2;
 77 |       $scope.trueVal = 2;
 78 |       $scope.$digest();
 79 | 
 80 |       expect(btn).toHaveClass('active');
 81 |       expect($scope.model).toEqual(2);
 82 |     });
 83 |   });
 84 | 
 85 |   describe('radio', function () {
 86 | 
 87 |     var compileButtons = function (markup, scope) {
 88 |       var el = $compile('<div>'+markup+'</div>')(scope);
 89 |       scope.$digest();
 90 |       return el.find('button');
 91 |     };
 92 | 
 93 |     //model -> UI
 94 |     it('should work correctly set active class based on model', function () {
 95 |       var btns = compileButtons('<button ng-model="model" btn-radio="1">click1</button><button ng-model="model" btn-radio="2">click2</button>', $scope);
 96 |       expect(btns.eq(0)).not.toHaveClass('active');
 97 |       expect(btns.eq(1)).not.toHaveClass('active');
 98 | 
 99 |       $scope.model = 2;
100 |       $scope.$digest();
101 |       expect(btns.eq(0)).not.toHaveClass('active');
102 |       expect(btns.eq(1)).toHaveClass('active');
103 |     });
104 | 
105 |     //UI->model
106 |     it('should work correctly set active class based on model', function () {
107 |       var btns = compileButtons('<button ng-model="model" btn-radio="1">click1</button><button ng-model="model" btn-radio="2">click2</button>', $scope);
108 |       expect($scope.model).toBeUndefined();
109 | 
110 |       btns.eq(0).click();
111 |       expect($scope.model).toEqual(1);
112 |       expect(btns.eq(0)).toHaveClass('active');
113 |       expect(btns.eq(1)).not.toHaveClass('active');
114 | 
115 |       btns.eq(1).click();
116 |       expect($scope.model).toEqual(2);
117 |       expect(btns.eq(1)).toHaveClass('active');
118 |       expect(btns.eq(0)).not.toHaveClass('active');
119 |     });
120 | 
121 |     it('should work correctly when clicking the active button', function () {
122 |       var btns = compileButtons('<button ng-model="model" btn-radio="1">click1</button><button ng-model="model" btn-radio="2">click2</button>', $scope);
123 |       expect($scope.model).toBeUndefined();
124 | 
125 |       btns.eq(0).click();
126 |       expect($scope.model).toEqual(1);
127 |       expect(btns.eq(0)).toHaveClass('active');
128 |       expect(btns.eq(1)).not.toHaveClass('active');
129 | 
130 |       btns.eq(0).click();
131 |       expect($scope.model).toEqual(1);
132 |       expect(btns.eq(0)).toHaveClass('active');
133 |       expect(btns.eq(1)).not.toHaveClass('active');
134 |     });
135 | 
136 |     it('should watch btn-radio values and update state accordingly', function () {
137 |       $scope.values = ["value1", "value2"];
138 | 
139 |       var btns = compileButtons('<button ng-model="model" btn-radio="values[0]">click1</button><button ng-model="model" btn-radio="values[1]">click2</button>', $scope);
140 |       expect(btns.eq(0)).not.toHaveClass('active');
141 |       expect(btns.eq(1)).not.toHaveClass('active');
142 | 
143 |       $scope.model = "value2";
144 |       $scope.$digest();
145 |       expect(btns.eq(0)).not.toHaveClass('active');
146 |       expect(btns.eq(1)).toHaveClass('active');
147 | 
148 |       $scope.values[1] = "value3";
149 |       $scope.model = "value3";
150 |       $scope.$digest();
151 |       expect(btns.eq(0)).not.toHaveClass('active');
152 |       expect(btns.eq(1)).toHaveClass('active');
153 |     });
154 |   });
155 | });
156 | 


--------------------------------------------------------------------------------
/src/dropdownToggle/docs/demo.html:
--------------------------------------------------------------------------------
 1 | <div ng-controller="DropdownCtrl">
 2 |   <p>
 3 |     <a dropdown-toggle="#dropdown-example-1">Click me for a dropdown, yo!</a>
 4 |   </p>
 5 |   <ul id="dropdown-example-1" class="f-dropdown">
 6 |     <li ng-repeat="choice in items">
 7 |       <a>{{choice}}</a>
 8 |     </li>
 9 |   </ul>
10 | 
11 |   <a class="button dropdown" dropdown-toggle="#dropdown-example-2">Dropdowns can also have links!</a>
12 |   <ul id="dropdown-example-2" class="f-dropdown">
13 |     <li ng-repeat="(label, url) in linkItems">
14 |       <a href="{{url}}" target="_blank">{{label}}</a>
15 |     </li>
16 |   </ul>
17 | 
18 |   <a class="button split">
19 |     Split Button
20 |     <span dropdown-toggle="#dropdown-example-3"></span>
21 |   </a>
22 |   <ul id="dropdown-example-3" class="f-dropdown">
23 |     <li ng-repeat="choice in items">
24 |       <a>{{choice}}</a>
25 |     </li>
26 |   </ul>
27 | </div>
28 | 


--------------------------------------------------------------------------------
/src/dropdownToggle/docs/demo.js:
--------------------------------------------------------------------------------
 1 | angular.module('foundationDemoApp').controller('DropdownCtrl', function($scope) {
 2 |   $scope.items = [
 3 |     "The first choice!",
 4 |     "And another choice for you.",
 5 |     "but wait! A third!"
 6 |   ];
 7 |   $scope.linkItems = {
 8 |     "Google": "http://google.com",
 9 |     "AltaVista": "http://altavista.com"
10 |   };
11 | });
12 | 


--------------------------------------------------------------------------------
/src/dropdownToggle/docs/readme.md:
--------------------------------------------------------------------------------
1 | 
2 | DropdownToggle is a simple directive which will toggle a dropdown link on click.  Simply put it on the toggler-element, and it will find the target element and toggle it when the element matching the value of the `dropdown-toggle` attribute is clicked.
3 | 


--------------------------------------------------------------------------------
/src/dropdownToggle/dropdownToggle.js:
--------------------------------------------------------------------------------
  1 | /*
  2 |  * dropdownToggle - Provides dropdown menu functionality
  3 |  * @restrict class or attribute
  4 |  * @example:
  5 | 
  6 |    <a dropdown-toggle="#dropdown-menu">My Dropdown Menu</a>
  7 |    <ul id="dropdown-menu" class="f-dropdown">
  8 |      <li ng-repeat="choice in dropChoices">
  9 |        <a ng-href="{{choice.href}}">{{choice.text}}</a>
 10 |      </li>
 11 |    </ul>
 12 |  */
 13 | angular.module('mm.foundation.dropdownToggle', [ 'mm.foundation.position', 'mm.foundation.mediaQueries' ])
 14 | 
 15 | .controller('DropdownToggleController', ['$scope', '$attrs', 'mediaQueries', function($scope, $attrs, mediaQueries) {
 16 |   this.small = function() {
 17 |     return mediaQueries.small() && !mediaQueries.medium();
 18 |   };
 19 | }])
 20 | 
 21 | .directive('dropdownToggle', ['$document', '$window', '$location', '$position', function ($document, $window, $location, $position) {
 22 |   var openElement = null,
 23 |       closeMenu   = angular.noop;
 24 |   return {
 25 |     restrict: 'CA',
 26 |     controller: 'DropdownToggleController',
 27 |     link: function(scope, element, attrs, controller) {
 28 |       var parent = element.parent(),
 29 |           dropdown = angular.element($document[0].querySelector(attrs.dropdownToggle));
 30 | 
 31 |       var parentHasDropdown = function() {
 32 |         return parent.hasClass('has-dropdown');
 33 |       };
 34 | 
 35 |       var onClick = function (event) {
 36 |         dropdown = angular.element($document[0].querySelector(attrs.dropdownToggle));
 37 |         var elementWasOpen = (element === openElement);
 38 | 
 39 |         event.preventDefault();
 40 |         event.stopPropagation();
 41 | 
 42 |         if (!!openElement) {
 43 |           closeMenu();
 44 |         }
 45 | 
 46 |         if (!elementWasOpen && !element.hasClass('disabled') && !element.prop('disabled')) {
 47 |           dropdown.css('display', 'block'); // We display the element so that offsetParent is populated
 48 |           dropdown.addClass('f-open-dropdown');
 49 |           
 50 |           var offset = $position.offset(element);
 51 |           var parentOffset = $position.offset(angular.element(dropdown[0].offsetParent));
 52 |           var dropdownWidth = dropdown.prop('offsetWidth');
 53 |           var css = {
 54 |             top: offset.top - parentOffset.top + offset.height + 'px'
 55 |           };
 56 | 
 57 |           if (controller.small()) {
 58 |             css.left = Math.max((parentOffset.width - dropdownWidth) / 2, 8) + 'px';
 59 |             css.position = 'absolute';
 60 |             css.width = '95%';
 61 |             css['max-width'] = 'none';
 62 |           }
 63 |           else {
 64 |             var left = Math.round(offset.left - parentOffset.left);
 65 |             var rightThreshold = $window.innerWidth - dropdownWidth - 8;
 66 |             if (left > rightThreshold) {
 67 |                 left = rightThreshold;
 68 |                 dropdown.removeClass('left').addClass('right');
 69 |             }
 70 |             css.left = left + 'px';
 71 |             css.position = null;
 72 |             css['max-width'] = null;
 73 |           }
 74 | 
 75 |           dropdown.css(css);
 76 |           element.addClass('expanded');
 77 | 
 78 |           if (parentHasDropdown()) {
 79 |             parent.addClass('hover');
 80 |           }
 81 | 
 82 |           openElement = element;
 83 | 
 84 |           closeMenu = function (event) {
 85 |             $document.off('click', closeMenu);
 86 |             dropdown.css('display', 'none');
 87 |             dropdown.removeClass('f-open-dropdown');
 88 |             element.removeClass('expanded');
 89 |             closeMenu = angular.noop;
 90 |             openElement = null;
 91 |             if (parent.hasClass('hover')) {
 92 |               parent.removeClass('hover');
 93 |             }
 94 |           };
 95 |           $document.on('click', closeMenu);
 96 |         }
 97 |       };
 98 | 
 99 |       if (dropdown) {
100 |         dropdown.css('display', 'none');
101 |       }
102 | 
103 |       scope.$watch('$location.path', function() { closeMenu(); });
104 | 
105 |       element.on('click', onClick);
106 |       element.on('$destroy', function() {
107 |         element.off('click', onClick);
108 |       });
109 |     }
110 |   };
111 | }]);
112 | 


--------------------------------------------------------------------------------
/src/dropdownToggle/test/dropdownToggle.spec.js:
--------------------------------------------------------------------------------
  1 | describe('dropdownToggle', function() {
  2 |   var $compile, $rootScope, $document, $location, $window, elm, toggleElm, targetElm;
  3 | 
  4 |   function dropdown(id) {
  5 |     if (!id) {
  6 |       id = 'target';
  7 |     }
  8 |     var element = angular.element(
  9 |       '<div><a dropdown-toggle="#' + id + '">Trigger</a>' +
 10 |       '<ul id="' + id + '"><li>Hello</li></ul></div>'
 11 |     ).appendTo('body');
 12 |     return $compile(element)($scope);
 13 |   }
 14 | 
 15 |   afterEach(function() {
 16 |     if (elm) {
 17 |       elm.remove();
 18 |     }
 19 |   });
 20 | 
 21 |   beforeEach(module('mm.foundation.dropdownToggle'));
 22 | 
 23 |   beforeEach(inject(function(_$compile_, _$rootScope_, _$document_, _$location_, _$window_) {
 24 |     $compile = _$compile_;
 25 |     $rootScope = _$rootScope_;
 26 |     $document = _$document_;
 27 |     $window = _$window_;
 28 |     $location = _$location_;
 29 |     $scope = $rootScope.$new();
 30 |   }));
 31 | 
 32 |   describe('with a single dropdown', function() {
 33 |     beforeEach(function() {
 34 |       elm = dropdown();
 35 |       toggleElm = elm.find('a');
 36 |       targetElm = elm.find('ul');
 37 |     });
 38 | 
 39 |     it('should initially hide the target element', function() {
 40 |       expect(targetElm.css('display')).toBe('none');
 41 |     });
 42 | 
 43 |     it('should toggle on `a` click', function() {
 44 |       expect(targetElm.css('display')).toBe('none');
 45 |       expect(targetElm.hasClass('f-open-dropdown')).toBe(false);
 46 |       toggleElm.click();
 47 |       expect(targetElm.css('display')).toBe('block');
 48 |       expect(targetElm.hasClass('f-open-dropdown')).toBe(true);
 49 |       toggleElm.click();
 50 |       expect(targetElm.css('display')).toBe('none');
 51 |       expect(targetElm.hasClass('f-open-dropdown')).toBe(false);
 52 |     });
 53 | 
 54 |     it('should close on elm click', function() {
 55 |       toggleElm.click();
 56 |       elm.click();
 57 |       expect(targetElm.css('display')).toBe('none');
 58 |     });
 59 | 
 60 |     it('should close on document click', function() {
 61 |       toggleElm.click();
 62 |       expect(targetElm.css('display')).toBe('block');
 63 |       $document.click();
 64 |       expect(targetElm.css('display')).toBe('none');
 65 |     });
 66 | 
 67 |     it('should close on $location change', function() {
 68 |       toggleElm.click();
 69 |       $location.path('/foo');
 70 |       $rootScope.$apply();
 71 |       expect(targetElm.css('display')).toBe('none');
 72 |     });
 73 | 
 74 |     it("should add/remove the 'expanded' class on toggle", function() {
 75 |       toggleElm.click();
 76 |       expect(toggleElm.hasClass('expanded')).toBe(true);
 77 |       toggleElm.click();
 78 |       expect(toggleElm.hasClass('expanded')).toBe(false);
 79 |     });
 80 |   });
 81 | 
 82 |   describe('with multiple dropdowns', function() {
 83 |     it('should only allow one dropdown to be open at once', function() {
 84 |       var elm1 = dropdown('target1');
 85 |       var elm2 = dropdown('target2');
 86 |       elm1.find('a').click();
 87 |       elm2.find('a').click();
 88 |       expect(elm1.find('ul').css('display')).toBe('none');
 89 |       expect(elm2.find('ul').css('display')).toBe('block');
 90 |       elm1.remove();
 91 |       elm2.remove();
 92 |     });
 93 |   });
 94 | 
 95 |   describe('on a mobile device', function() {
 96 |     var trueFn = Boolean.bind(null, true);
 97 |     var falseFn = Boolean.bind(null, false);
 98 | 
 99 |     angular.module('mm.foundation.dropdownToggle')
100 |       .factory('mediaQueries', function() {
101 |         return {small: trueFn, medium: falseFn, large: falseFn };
102 |       });
103 | 
104 |     it('should be full-width', function() {
105 |       elm = dropdown('responsive');
106 |       toggleElm = elm.find('a');
107 |       targetElm = elm.find('ul');
108 | 
109 |       toggleElm.click();
110 | 
111 |       expect(targetElm.css('position')).toBe('absolute');
112 |       expect(targetElm.css('max-width')).toBe('none');
113 | 
114 |       var expectedWidth = Math.round($window.innerWidth * 0.95);
115 |       expect(targetElm.css('width')).toBe(expectedWidth + 'px');
116 |     });
117 |   });
118 | 
119 |   describe('when the parent element has a "has-dropdown" class', function() {
120 |     beforeEach(function() {
121 |       element = angular.element(
122 |         '<div class="has-dropdown"><a dropdown-toggle="#target">Trigger</a>' +
123 |           '<ul id="target"><li>hello</li></ul>' +
124 |         '</div>'
125 |       ).appendTo('body');
126 |       elm = $compile(element)($scope);
127 |       $scope.$digest();
128 |       toggleElm = elm.find('a');
129 |       targetElm = elm.find('ul');
130 |     });
131 | 
132 |     it('adds the "hover" class to the containing has-dropdown element', function() {
133 |       toggleElm.click();
134 |       $scope.$digest();
135 |       expect(elm.hasClass('hover')).toBe(true);
136 |     });
137 |   });
138 | });
139 | 


--------------------------------------------------------------------------------
/src/interchange/docs/demo.html:
--------------------------------------------------------------------------------
1 | <img interchange="[assets/img/space-small.jpg, (small)],
2 |                   [assets/img/space-medium.jpg, (medium)],
3 |                   [assets/img/space-large.jpg, (large)]"
4 |      src="assets/img/space-small.jpg">
5 | 
6 | <p class="panel">Resize the window to update the content</p>
7 | 


--------------------------------------------------------------------------------
/src/interchange/docs/demo.js:
--------------------------------------------------------------------------------
1 | // No controller required


--------------------------------------------------------------------------------
/src/interchange/docs/readme.md:
--------------------------------------------------------------------------------
 1 | Interchange uses media queries to dynamically load responsive content that is appropriate for different screen sizes.
 2 | 
 3 | You can use Interchange with different content types:
 4 | 
 5 |  - *HTML templates:* by linking a rule with html files to a `div` tag
 6 |  - *Images:* through an interchange rule to an `img` tag
 7 |  - *Background-images* through linking a rule with picture files to a `div` tag
 8 | 
 9 | Custom named queries are available via the method `add` of the `interchangeQueriesManager` factory. You just need to provide the name and media type desired.
10 | 
11 | Like the original, `replace` events are available when an Interchange element switch to another media query.
12 | 
13 | For more information, check out [the docs for the original Interchange component](http://foundation.zurb.com/docs/components/interchange.html).
14 | 
15 | *Images courtesy of the official ZURB Foundation documentation.*


--------------------------------------------------------------------------------
/src/mediaQueries/docs/readme.md:
--------------------------------------------------------------------------------
1 | A module providing factories to aid in building responsive components.
2 | 
3 | The `matchMedia` factory provides either a shim for browsers without `window.matchMedia`, or `windows.matchMedia` itself.
4 | 
5 | The `mediaQueries` factory provides methods to detect if screen falls under the **small**, **medium** or **large** breakpoint.
6 | 


--------------------------------------------------------------------------------
/src/mediaQueries/mediaQueries.js:
--------------------------------------------------------------------------------
 1 | angular.module("mm.foundation.mediaQueries", [])
 2 |     .factory('matchMedia', ['$document', '$window', function($document, $window) {
 3 |         // MatchMedia for IE <= 9
 4 |         return $window.matchMedia || (function matchMedia(doc, undefined){
 5 |             var bool,
 6 |                 docElem = doc.documentElement,
 7 |                 refNode = docElem.firstElementChild || docElem.firstChild,
 8 |                 // fakeBody required for <FF4 when executed in <head>
 9 |                 fakeBody = doc.createElement("body"),
10 |                 div = doc.createElement("div");
11 | 
12 |             div.id = "mq-test-1";
13 |             div.style.cssText = "position:absolute;top:-100em";
14 |             fakeBody.style.background = "none";
15 |             fakeBody.appendChild(div);
16 | 
17 |             return function (q) {
18 |                 div.innerHTML = "&shy;<style media=\"" + q + "\"> #mq-test-1 { width: 42px; }</style>";
19 |                 docElem.insertBefore(fakeBody, refNode);
20 |                 bool = div.offsetWidth === 42;
21 |                 docElem.removeChild(fakeBody);
22 |                 return {
23 |                     matches: bool,
24 |                     media: q
25 |                 };
26 |             };
27 | 
28 |         }($document[0]));
29 |     }])
30 |     .factory('mediaQueries', ['$document', 'matchMedia', function($document, matchMedia) {
31 |         var head = angular.element($document[0].querySelector('head'));
32 |         head.append('<meta class="foundation-mq-topbar" />');
33 |         head.append('<meta class="foundation-mq-small" />');
34 |         head.append('<meta class="foundation-mq-medium" />');
35 |         head.append('<meta class="foundation-mq-large" />');
36 | 
37 |         var regex = /^[\/\\'"]+|(;\s?})+|[\/\\'"]+$/g;
38 |         var queries = {
39 |             topbar: getComputedStyle(head[0].querySelector('meta.foundation-mq-topbar')).fontFamily.replace(regex, ''),
40 |             small : getComputedStyle(head[0].querySelector('meta.foundation-mq-small')).fontFamily.replace(regex, ''),
41 |             medium : getComputedStyle(head[0].querySelector('meta.foundation-mq-medium')).fontFamily.replace(regex, ''),
42 |             large : getComputedStyle(head[0].querySelector('meta.foundation-mq-large')).fontFamily.replace(regex, '')
43 |         };
44 | 
45 |         return {
46 |             topbarBreakpoint: function () {
47 |                 return !matchMedia(queries.topbar).matches;
48 |             },
49 |             small: function () {
50 |                 return matchMedia(queries.small).matches;
51 |             },
52 |             medium: function () {
53 |                 return matchMedia(queries.medium).matches;
54 |             },
55 |             large: function () {
56 |                 return matchMedia(queries.large).matches;
57 |             }
58 |         };
59 |     }]);
60 | 


--------------------------------------------------------------------------------
/src/modal/docs/demo.html:
--------------------------------------------------------------------------------
 1 | <div ng-controller="ModalDemoCtrl">
 2 |   <script type="text/ng-template" id="myModalContent.html">
 3 |     <h3>I'm a modal!</h3>
 4 |     <ul>
 5 |       <li ng-repeat="item in items">
 6 |         <a ng-click="selected.item = item">{{ item }}</a>
 7 |       </li>
 8 |     </ul>
 9 |     <p>Selected: <b>{{ selected.item }}</b></p>
10 |     <button class="button secondary" ng-click="reposition()">Reset top position</button>
11 |     <button class="button" ng-click="ok()">OK</button>
12 |     <a class="close-reveal-modal" ng-click="cancel()">&#215;</a>
13 |   </script>
14 | 
15 |   <button class="button" ng-click="open()">Open me!</button>
16 |   <div ng-show="selected">Selection from a modal: {{ selected }}</div>
17 | </div>
18 | 


--------------------------------------------------------------------------------
/src/modal/docs/demo.js:
--------------------------------------------------------------------------------
 1 | angular.module('foundationDemoApp').controller('ModalDemoCtrl', function ($scope, $modal, $log) {
 2 | 
 3 |   $scope.items = ['item1', 'item2', 'item3'];
 4 | 
 5 |   $scope.open = function () {
 6 | 
 7 |     var modalInstance = $modal.open({
 8 |       templateUrl: 'myModalContent.html',
 9 |       controller: 'ModalInstanceCtrl',
10 |       resolve: {
11 |         items: function () {
12 |           return $scope.items;
13 |         }
14 |       }
15 |     });
16 | 
17 |     modalInstance.result.then(function (selectedItem) {
18 |       $scope.selected = selectedItem;
19 |     }, function () {
20 |       $log.info('Modal dismissed at: ' + new Date());
21 |     });
22 |   };
23 | });
24 | 
25 | // Please note that $modalInstance represents a modal window (instance) dependency.
26 | // It is not the same as the $modal service used above.
27 | 
28 | angular.module('foundationDemoApp').controller('ModalInstanceCtrl', function ($scope, $modalInstance, items) {
29 | 
30 |   $scope.items = items;
31 |   $scope.selected = {
32 |     item: $scope.items[0]
33 |   };
34 | 
35 |   $scope.reposition = function () {
36 |     $modalInstance.reposition();
37 |   };
38 | 
39 |   $scope.ok = function () {
40 |     $modalInstance.close($scope.selected.item);
41 |   };
42 | 
43 |   $scope.cancel = function () {
44 |     $modalInstance.dismiss('cancel');
45 |   };
46 | });
47 | 


--------------------------------------------------------------------------------
/src/modal/docs/readme.md:
--------------------------------------------------------------------------------
 1 | `$modal` is a service to quickly create AngularJS-powered modal windows. It is the equivalent of the [Foundation Reveal](http://foundation.zurb.com/docs/components/reveal.html) component.
 2 | Creating custom modals is straightforward: create a partial view, its controller and reference them when using the service.
 3 | 
 4 | The `$modal` service has only one method: `open(options)` where available options are like follows:
 5 | 
 6 | * `templateUrl` - a path to a template representing modal's content
 7 | * `template` - inline template representing the modal's content
 8 | * `scope` - a scope instance to be used for the modal's content (actually the `$modal` service is going to create a child scope of a provided scope). Defaults to `$rootScope`
 9 | * `controller` - a controller for a modal instance - it can initialize scope used by modal. Accepts the "controller-as" syntax, and can be injected with `$modalInstance`
10 | * `controllerAs` - an alternative to the aforementioned "controller-as" syntax. This is intended for the case of when the `controller` option is assigned an anonymous or local function and thus the "controller-as" syntax couldn't be applied.
11 | * `resolve` - members that will be resolved and passed to the controller as locals; it is equivalent of the `resolve` property for AngularJS routes
12 | * `backdrop` - controls presence of a backdrop. Allowed values: true (default), false (no backdrop), `'static'` - backdrop is present but modal window is not closed when clicking outside of the modal window.
13 | * `keyboard` - indicates whether the dialog should be closable by hitting the ESC key, defaults to true
14 | * `windowClass` - additional CSS class(es) to be added to a modal window template
15 | * `parent` - specify the container element where the modal HTML will be injected. This should be a valid `angular.element()` selector and defaults to 'body'.
16 | 
17 | The `open` method returns a modal instance, an object with the following properties:
18 | 
19 | * `close(result)` - a method that can be used to close a modal, passing a result
20 | * `dismiss(reason)` - a method that can be used to dismiss a modal, passing a reason
21 | * `reposition()` - recalculates and positions the top position of the modal
22 | * `result` - a promise that is resolved when a modal is closed and rejected when a modal is dismissed
23 | * `opened` - a promise that is resolved when a modal gets opened after downloading content's template and resolving all variables
24 | 
25 | In addition the scope associated with modal's content is augmented with 2 methods:
26 | 
27 | * `$close(result)` - an alias for `$modalInstance.close()`
28 | * `$dismiss(reason)` - an alias for `$modalInstance.dismiss()`
29 | 
30 | Those methods make it easy to close a modal window without a need to create a dedicated controller
31 | 


--------------------------------------------------------------------------------
/src/modal/test/modalWindow.spec.js:
--------------------------------------------------------------------------------
 1 | describe('modal window', function () {
 2 | 
 3 |   var $rootScope, $compile;
 4 | 
 5 |   beforeEach(module('mm.foundation.modal'));
 6 |   beforeEach(module('template/modal/window.html'));
 7 |   beforeEach(inject(function (_$rootScope_, _$compile_) {
 8 |     $rootScope = _$rootScope_;
 9 |     $compile = _$compile_;
10 |   }));
11 | 
12 |   it('should support custom CSS classes as string', function () {
13 |     var windowEl = $compile('<div modal-window window-class="test">content</div>')($rootScope);
14 |     $rootScope.$digest();
15 | 
16 |     expect(windowEl).toHaveClass('test');
17 |   });
18 | });
19 | 


--------------------------------------------------------------------------------
/src/modal/test/stackedMap.spec.js:
--------------------------------------------------------------------------------
 1 | describe('stacked map', function () {
 2 | 
 3 |   var stackedMap;
 4 | 
 5 |   beforeEach(module('mm.foundation.modal'));
 6 |   beforeEach(inject(function ($$stackedMap) {
 7 |     stackedMap = $$stackedMap.createNew();
 8 |   }));
 9 | 
10 |   it('should add and remove objects by key', function () {
11 | 
12 |     stackedMap.add('foo', 'foo_value');
13 |     expect(stackedMap.length()).toEqual(1);
14 |     expect(stackedMap.get('foo').key).toEqual('foo');
15 |     expect(stackedMap.get('foo').value).toEqual('foo_value');
16 | 
17 |     stackedMap.remove('foo');
18 |     expect(stackedMap.length()).toEqual(0);
19 |     expect(stackedMap.get('foo')).toBeUndefined();
20 |   });
21 | 
22 |   it('should support listing keys', function () {
23 |     stackedMap.add('foo', 'foo_value');
24 |     stackedMap.add('bar', 'bar_value');
25 | 
26 |     expect(stackedMap.keys()).toEqual(['foo', 'bar']);
27 |   });
28 | 
29 |   it('should get topmost element', function () {
30 | 
31 |     stackedMap.add('foo', 'foo_value');
32 |     stackedMap.add('bar', 'bar_value');
33 |     expect(stackedMap.length()).toEqual(2);
34 | 
35 |     expect(stackedMap.top().key).toEqual('bar');
36 |     expect(stackedMap.length()).toEqual(2);
37 |   });
38 | 
39 |   it('should remove topmost element', function () {
40 | 
41 |     stackedMap.add('foo', 'foo_value');
42 |     stackedMap.add('bar', 'bar_value');
43 | 
44 |     expect(stackedMap.removeTop().key).toEqual('bar');
45 |     expect(stackedMap.removeTop().key).toEqual('foo');
46 |   });
47 | 
48 |   it('should preserve semantic of an empty stackedMap', function () {
49 | 
50 |     expect(stackedMap.length()).toEqual(0);
51 |     expect(stackedMap.top()).toBeUndefined();
52 |   });
53 | 
54 |   it('should ignore removal of non-existing elements', function () {
55 |     expect(stackedMap.remove('non-existing')).toBeUndefined();
56 |   });
57 | });
58 | 


--------------------------------------------------------------------------------
/src/offcanvas/docs/demo.html:
--------------------------------------------------------------------------------
 1 | <div ng-controller="OffCanvasDemoCtrl">
 2 |     <div class="off-canvas-wrap">
 3 |         <div class="inner-wrap">
 4 |             <nav class="tab-bar">
 5 |                 <section class="left-small">
 6 |                     <a class="left-off-canvas-toggle menu-icon" ><span></span></a>
 7 |                 </section>
 8 | 
 9 |                 <section class="middle tab-bar-section">
10 |                     <h1 class="title">OffCanvas</h1>
11 |                 </section>
12 | 
13 |                 <section class="right-small">
14 |                     <a class="right-off-canvas-toggle menu-icon" ><span></span></a>
15 |                 </section>
16 | 
17 |             </nav>
18 | 
19 |             <aside class="left-off-canvas-menu">
20 |                 <ul class="off-canvas-list">
21 |                     <li><a href="#">Left Sidebar</a></li>
22 |                 </ul>
23 |             </aside>
24 |             <aside class="right-off-canvas-menu">
25 |                 <ul class="off-canvas-list">
26 |                     <li><a href="#">Right Sidebar</a></li>
27 |                 </ul>
28 |             </aside>
29 |             <section class="main-section">
30 |                 <div class="small-12 columns">
31 |                     <h1>How to use</h1>
32 |                     <p>Just use the standard layout for an offcanvas page as documented in the <a href="http://foundation.zurb.com/docs/components/offcanvas.html">foundation docs</a></p>
33 |                     <p>As long as you include mm.foundation.offcanvas it should simply work</p>
34 |                 </div>
35 |             </section>
36 | 
37 |             <a class="exit-off-canvas"></a>
38 |         </div>
39 |     </div>
40 | </div>


--------------------------------------------------------------------------------
/src/offcanvas/docs/demo.js:
--------------------------------------------------------------------------------
1 | angular.module('foundationDemoApp').controller('OffCanvasDemoCtrl', function ($scope) {
2 | 
3 | });
4 | 


--------------------------------------------------------------------------------
/src/offcanvas/docs/readme.md:
--------------------------------------------------------------------------------
 1 | A lightweight directive that provides the [Foundation Offcanvas](http://foundation.zurb.com/docs/components/offcanvas.html) component.
 2 | 
 3 | There are no settings. You simply need to include the foundation off canvas CSS component in your page.
 4 | 
 5 | The off canvas module expects the use of several nested elements with the following classes:
 6 | 
 7 | - `off-canvas-wrap`: The most outter page wrapper.
 8 | - `inner-wrap`: Second page wrapper nested directly inside off-canvas-wrap.
 9 | - `left-off-canvas-toggle`: Wraps the left off canvas menu.
10 | - `right-off-canvas-toggle`: Wraps the right off canvas menu.
11 | - `exit-off-canvas`: Occludes the main page content when an off canvas menu is visible. Hides the menu when clicked.
12 | - `off-canvas-list`: Contains off canvas menu items. Hides the menu after a nested link is clicked.
13 | 
14 | See the demo page for example on how to use this and see the [Foundation docs](http://foundation.zurb.com/docs/components/offcanvas.html) for more details.
15 | 


--------------------------------------------------------------------------------
/src/offcanvas/offcanvas.js:
--------------------------------------------------------------------------------
 1 | angular.module("mm.foundation.offcanvas", [])
 2 |     .directive('offCanvasWrap', ['$window', function ($window) {
 3 |         return {
 4 |             scope: {},
 5 |             restrict: 'C',
 6 |             link: function ($scope, element, attrs) {
 7 |                 var win = angular.element($window);
 8 |                 var sidebar = $scope.sidebar = element;
 9 | 
10 |                 $scope.hide = function () {
11 |                     sidebar.removeClass('move-left');
12 |                     sidebar.removeClass('move-right');
13 |                 };
14 | 
15 |                 win.bind("resize.body", $scope.hide);
16 | 
17 |                 $scope.$on('$destroy', function() {
18 |                     win.unbind("resize.body", $scope.hide);
19 |                 });
20 | 
21 |             },
22 |             controller: ['$scope', function($scope) {
23 | 
24 |                 this.leftToggle = function() {
25 |                     $scope.sidebar.toggleClass("move-right");
26 |                 };
27 | 
28 |                 this.rightToggle = function() {
29 |                     $scope.sidebar.toggleClass("move-left");
30 |                 };
31 | 
32 |                 this.hide = function() {
33 |                     $scope.hide();
34 |                 };
35 |             }]
36 |         };
37 |     }])
38 |     .directive('leftOffCanvasToggle', [function () {
39 |         return {
40 |             require: '^offCanvasWrap',
41 |             restrict: 'C',
42 |             link: function ($scope, element, attrs, offCanvasWrap) {
43 |                 element.on('click', function () {
44 |                     offCanvasWrap.leftToggle();
45 |                 });
46 |             }
47 |         };
48 |     }])
49 |     .directive('rightOffCanvasToggle', [function () {
50 |         return {
51 |             require: '^offCanvasWrap',
52 |             restrict: 'C',
53 |             link: function ($scope, element, attrs, offCanvasWrap) {
54 |                 element.on('click', function () {
55 |                     offCanvasWrap.rightToggle();
56 |                 });
57 |             }
58 |         };
59 |     }])
60 |        .directive('exitOffCanvas', [function () {
61 |         return {
62 |             require: '^offCanvasWrap',
63 |             restrict: 'C',
64 |             link: function ($scope, element, attrs, offCanvasWrap) {
65 |                 element.on('click', function () {
66 |                     offCanvasWrap.hide();
67 |                 });
68 |             }
69 |         };
70 |     }])
71 |     .directive('offCanvasList', [function () {
72 |         return {
73 |             require: '^offCanvasWrap',
74 |             restrict: 'C',
75 |             link: function ($scope, element, attrs, offCanvasWrap) {
76 |                 element.on('click', function () {
77 |                     offCanvasWrap.hide();
78 |                 });
79 |             }
80 |         };
81 |     }]);
82 | 


--------------------------------------------------------------------------------
/src/offcanvas/test/offcanvas.spec.js:
--------------------------------------------------------------------------------
 1 | describe('offcanvas directive', function () {
 2 |   var $rootScope, element;
 3 |   beforeEach(module('mm.foundation.offcanvas'));
 4 |   beforeEach(inject(function(_$compile_, _$rootScope_) {
 5 |     $compile = _$compile_;
 6 |     $rootScope = _$rootScope_;
 7 |     $rootScope.value = 22;
 8 |     element = $compile(
 9 |       '<div class="off-canvas-wrap">' +
10 |         '<div class="inner-wrap">' +
11 |           '<nav class="tab-bar">' +
12 |             '<section class="left-small">' +
13 |               '<a class="left-off-canvas-toggle menu-icon"><span></span></a>' +
14 |             '</section>' +
15 |             '<section class="middle tab-bar-section">' +
16 |               '<h1 class="title">OffCanvas</h1>' +
17 |             '</section>' +
18 |             '<section class="right-small">' +
19 |               '<a class="right-off-canvas-toggle menu-icon"><span></span></a>' +
20 |             '</section>' +
21 |           '</nav>' +
22 |           '<aside class="left-off-canvas-menu">' +
23 |             '<ul class="off-canvas-list">' +
24 |               '<li><a href="#">Left Sidebar</a></li>' +
25 |             '</ul>' +
26 |           '</aside>' +
27 |           '<aside class="right-off-canvas-menu">' +
28 |             '<ul class="off-canvas-list">' +
29 |               '<li><a href="#">Right Sidebar</a></li>' +
30 |             '</ul>' +
31 |           '</aside>' +
32 |           '<section class="main-section">' +
33 |             '<div>The quick brown fox.</div>' +
34 |           '</section>' +
35 |           '<a class="exit-off-canvas"></a>' +
36 |         '</div>' +
37 |       '</div>')($rootScope);
38 |     $rootScope.$digest();
39 |   }));
40 | 
41 |   beforeEach(inject(function ($rootScope) {
42 |     this.addMatchers({
43 |       leftOpen: function() {
44 |         return  this.actual.hasClass('move-right');
45 |       },
46 |       rightOpen: function() {
47 |         return this.actual.hasClass('move-left');
48 |       },
49 |       isClosed: function() {
50 |         return !this.actual.hasClass('move-left') &&
51 |             !this.actual.hasClass('move-right');
52 |       }
53 |     });
54 |   }));
55 | 
56 | 
57 |   it('has left aside open on click', function() {
58 |     $('.left-off-canvas-toggle', element).trigger('click');
59 |     expect(element).leftOpen();
60 |   });
61 | 
62 |   it('has right aside open on click', function() {
63 |     $('.right-off-canvas-toggle', element).trigger('click');
64 |     expect(element).rightOpen();
65 |   });
66 | 
67 |   it('is closes after clicking on the overlay', function() {
68 |     $('.right-off-canvas-toggle', element).trigger('click');
69 |     expect(element).rightOpen();
70 |     $('.exit-off-canvas', element).trigger('click');
71 |     expect(element).isClosed();
72 |   });
73 | 
74 |   it('is closes after clicking on a list item', function() {
75 |     $('.right-off-canvas-toggle', element).trigger('click');
76 |     expect(element).rightOpen();
77 |     $('.off-canvas-list', element).trigger('click');
78 |     expect(element).isClosed();
79 |   });
80 | 
81 | });
82 | 


--------------------------------------------------------------------------------
/src/pagination/docs/demo.html:
--------------------------------------------------------------------------------
 1 | <div ng-controller="PaginationDemoCtrl">
 2 |     <h4>Default</h4>
 3 |     <pagination total-items="totalItems" page="currentPage"></pagination>
 4 |     <pagination boundary-links="true" total-items="totalItems" page="currentPage" class="pagination-sm" previous-text="&lsaquo;" next-text="&rsaquo;" first-text="&laquo;" last-text="&raquo;"></pagination>
 5 |     <pagination direction-links="false" boundary-links="true" total-items="totalItems" page="currentPage"></pagination>
 6 |     <pagination direction-links="false" total-items="totalItems" page="currentPage" num-pages="smallnumPages"></pagination>
 7 |     <pre>The selected page no: {{currentPage}}</pre>
 8 |     <button class="button secondary" ng-click="setPage(3)">Set current page to: 3</button>
 9 | 
10 |     <hr />
11 |     <h4>Pager</h4>
12 |     <pager total-items="totalItems" page="currentPage"></pager>
13 | 
14 |     <hr />
15 |     <h4>Limit the maximum visible buttons</h4>
16 |     <pagination total-items="bigTotalItems" page="bigCurrentPage" max-size="maxSize" class="pagination-sm" boundary-links="true"></pagination>
17 |     <pagination total-items="bigTotalItems" page="bigCurrentPage" max-size="maxSize" class="pagination-sm" boundary-links="true" rotate="false" num-pages="numPages"></pagination>
18 |     <pre>Page: {{bigCurrentPage}} / {{numPages}}</pre>
19 | </div>
20 | 


--------------------------------------------------------------------------------
/src/pagination/docs/demo.js:
--------------------------------------------------------------------------------
 1 | angular.module('foundationDemoApp').controller('PaginationDemoCtrl', function ($scope) {
 2 |   $scope.totalItems = 64;
 3 |   $scope.currentPage = 4;
 4 |   $scope.maxSize = 5;
 5 |   
 6 |   $scope.setPage = function (pageNo) {
 7 |     $scope.currentPage = pageNo;
 8 |   };
 9 | 
10 |   $scope.bigTotalItems = 175;
11 |   $scope.bigCurrentPage = 1;
12 | });
13 | 


--------------------------------------------------------------------------------
/src/pagination/docs/readme.md:
--------------------------------------------------------------------------------
 1 | 
 2 | A lightweight pagination directive that is focused on ... providing pagination & will take care of visualising a pagination bar and enable / disable buttons correctly!
 3 | 
 4 | ### Pagination Settings ###
 5 | 
 6 | Settings can be provided as attributes in the `<pagination>` or globally configured through the `paginationConfig`.
 7 | 
 8 |  * `page` <i class="fa fa-eye"></i>
 9 |  	:
10 |  	Current page number. First page is 1.
11 | 
12 |  * `total-items` <i class="fa fa-eye"></i>
13 |  	:
14 |  	Total number of items in all pages.
15 | 
16 |  * `items-per-page` <i class="fa fa-eye"></i>
17 |  	_(Defaults: 10)_ :
18 |  	Maximum number of items per page. A value less than one indicates all items on one page.
19 | 
20 |  * `max-size` <i class="fa fa-eye"></i>
21 |  	_(Defaults: null)_ :
22 |  	Limit number for pagination size.
23 | 
24 |  * `num-pages` <small class="badge">readonly</small>
25 |  	_(Defaults: angular.noop)_ :
26 |  	An optional expression assigned the total number of pages to display.
27 | 
28 |  * `rotate`
29 |  	_(Defaults: true)_ :
30 |  	Whether to keep current page in the middle of the visible ones.
31 | 
32 |  * `on-select-page (page)`
33 |  	_(Default: null)_ :
34 |  	An optional expression called when a page is selected having the page number as argument.
35 | 
36 |  * `direction-links`
37 |  	_(Default: true)_ :
38 |  	Whether to display Previous / Next buttons.
39 | 
40 |  * `previous-text`
41 |  	_(Default: 'Previous')_ :
42 |  	Text for Previous button.
43 | 
44 |  * `next-text`
45 |  	_(Default: 'Next')_ :
46 |  	Text for Next button.
47 | 
48 |  * `boundary-links`
49 |  	_(Default: false)_ :
50 |  	Whether to display First / Last buttons.
51 | 
52 |  * `first-text`
53 |  	_(Default: 'First')_ :
54 |  	Text for First button.
55 | 
56 |  * `last-text`
57 |  	_(Default: 'Last')_ :
58 |  	Text for Last button.
59 | 
60 | ### Pager Settings ###
61 | 
62 | Settings can be provided as attributes in the `<pager>` or globally configured through the `pagerConfig`.  
63 | For `page`, `total-items`, `items-per-page`, `num-pages` and `on-select-page (page)` see pagination settings. Other settings are:
64 | 
65 |  * `align`
66 |  	_(Default: true)_ :
67 |  	Whether to align each link to the sides.
68 | 
69 |  * `previous-text`
70 |  	_(Default: '« Previous')_ :
71 |  	Text for Previous button.
72 | 
73 |  * `next-text`
74 |  	_(Default: 'Next »')_ :
75 |  	Text for Next button.
76 | 


--------------------------------------------------------------------------------
/src/pagination/test/pager.spec.js:
--------------------------------------------------------------------------------
  1 | describe('pager directive', function () {
  2 |   var $compile, $rootScope, element;
  3 |   beforeEach(module('mm.foundation.pagination'));
  4 |   beforeEach(module('template/pagination/pager.html'));
  5 |   beforeEach(inject(function(_$compile_, _$rootScope_) {
  6 |     $compile = _$compile_;
  7 |     $rootScope = _$rootScope_;
  8 |     $rootScope.total = 47; // 5 pages
  9 |     $rootScope.currentPage = 3;
 10 |     element = $compile('<pager total-items="total" page="currentPage"></pager>')($rootScope);
 11 |     $rootScope.$digest();
 12 |   }));
 13 | 
 14 |   function getPaginationBarSize() {
 15 |     return element.find('li').length;
 16 |   }
 17 | 
 18 |   function getPaginationEl(index) {
 19 |     return element.find('li').eq(index);
 20 |   }
 21 | 
 22 |   function clickPaginationEl(index) {
 23 |     getPaginationEl(index).find('a').click();
 24 |   }
 25 | 
 26 |   function updateCurrentPage(value) {
 27 |     $rootScope.currentPage = value;
 28 |     $rootScope.$digest();
 29 |   }
 30 | 
 31 |   it('has a "pager" css class', function() {
 32 |     expect(element.hasClass('pagination')).toBe(true);
 33 |   });
 34 | 
 35 |   it('contains 2 li elements', function() {
 36 |     expect(getPaginationBarSize()).toBe(2);
 37 |     expect(getPaginationEl(0).text()).toBe('« Previous');
 38 |     expect(getPaginationEl(-1).text()).toBe('Next »');
 39 |   });
 40 | 
 41 |   it('aligns previous & next page', function() {
 42 |     expect(getPaginationEl(0)).toHaveClass('left');
 43 |     expect(getPaginationEl(0)).not.toHaveClass('right');
 44 | 
 45 |     expect(getPaginationEl(-1)).not.toHaveClass('left');
 46 |     expect(getPaginationEl(-1)).toHaveClass('right');
 47 |   });
 48 | 
 49 |   it('disables the "previous" link if current page is 1', function() {
 50 |     updateCurrentPage(1);
 51 |     expect(getPaginationEl(0)).toHaveClass('unavailable');
 52 |   });
 53 | 
 54 |   it('disables the "next" link if current page is num-pages', function() {
 55 |     updateCurrentPage(5);
 56 |     expect(getPaginationEl(-1)).toHaveClass('unavailable');
 57 |   });
 58 | 
 59 |   it('changes currentPage if the "previous" link is clicked', function() {
 60 |     clickPaginationEl(0);
 61 |     expect($rootScope.currentPage).toBe(2);
 62 |   });
 63 | 
 64 |   it('changes currentPage if the "next" link is clicked', function() {
 65 |     clickPaginationEl(-1);
 66 |     expect($rootScope.currentPage).toBe(4);
 67 |   });
 68 | 
 69 |   it('does not change the current page on "previous" click if already at first page', function() {
 70 |     updateCurrentPage(1);
 71 |     clickPaginationEl(0);
 72 |     expect($rootScope.currentPage).toBe(1);
 73 |   });
 74 | 
 75 |   it('does not change the current page on "next" click if already at last page', function() {
 76 |     updateCurrentPage(5);
 77 |     clickPaginationEl(-1);
 78 |     expect($rootScope.currentPage).toBe(5);
 79 |   });
 80 | 
 81 |   it('executes the `on-select-page` expression when an element is clicked', function() {
 82 |     $rootScope.selectPageHandler = jasmine.createSpy('selectPageHandler');
 83 |     element = $compile('<pager total-items="total" page="currentPage" on-select-page="selectPageHandler(page)"></pager>')($rootScope);
 84 |     $rootScope.$digest();
 85 | 
 86 |     clickPaginationEl(-1);
 87 |     expect($rootScope.selectPageHandler).toHaveBeenCalledWith(4);
 88 |   });
 89 | 
 90 |   it('does not changes the number of pages when `total-items` changes', function() {
 91 |     $rootScope.total = 73; // 8 pages
 92 |     $rootScope.$digest();
 93 | 
 94 |     expect(getPaginationBarSize()).toBe(2);
 95 |     expect(getPaginationEl(0).text()).toBe('« Previous');
 96 |     expect(getPaginationEl(-1).text()).toBe('Next »');
 97 |   });
 98 | 
 99 |   describe('`items-per-page`', function () {
100 |     beforeEach(inject(function() {
101 |       $rootScope.perpage = 5;
102 |       element = $compile('<pager total-items="total" items-per-page="perpage" page="currentPage"></pagination>')($rootScope);
103 |       $rootScope.$digest();
104 |     }));
105 | 
106 |     it('does not change the number of pages', function() {
107 |       expect(getPaginationBarSize()).toBe(2);
108 |       expect(getPaginationEl(0).text()).toBe('« Previous');
109 |       expect(getPaginationEl(-1).text()).toBe('Next »');
110 |     });
111 | 
112 |     it('selects the last page when it is too big', function() {
113 |       $rootScope.perpage = 30;
114 |       $rootScope.$digest();
115 | 
116 |       expect($rootScope.currentPage).toBe(2);
117 |       expect(getPaginationBarSize()).toBe(2);
118 |       expect(getPaginationEl(0)).not.toHaveClass('unavailable');
119 |       expect(getPaginationEl(1)).toHaveClass('unavailable');
120 |     });
121 |   });
122 | 
123 |   describe('when `page` is not a number', function () {
124 |     it('handles string', function() {
125 |       updateCurrentPage('1');
126 |       expect(getPaginationEl(0)).toHaveClass('unavailable');
127 | 
128 |       updateCurrentPage('05');
129 |       expect(getPaginationEl(-1)).toHaveClass('unavailable');
130 |     });
131 |   });
132 | 
133 |   describe('`num-pages`', function () {
134 |     beforeEach(inject(function() {
135 |       $rootScope.numpg = null;
136 |       element = $compile('<pager total-items="total" page="currentPage" num-pages="numpg"></pager>')($rootScope);
137 |       $rootScope.$digest();
138 |     }));
139 | 
140 |     it('equals to total number of pages', function() {
141 |       expect($rootScope.numpg).toBe(5);
142 |     });
143 |   });
144 | 
145 |   describe('setting `pagerConfig`', function() {
146 |     var originalConfig = {};
147 |     beforeEach(inject(function(pagerConfig) {
148 |       angular.extend(originalConfig, pagerConfig);
149 |       pagerConfig.previousText = 'PR';
150 |       pagerConfig.nextText = 'NE';
151 |       pagerConfig.align = false;
152 |       element = $compile('<pager total-items="total" page="currentPage"></pager>')($rootScope);
153 |       $rootScope.$digest();
154 |     }));
155 |     afterEach(inject(function(pagerConfig) {
156 |       // return it to the original state
157 |       angular.extend(pagerConfig, originalConfig);
158 |     }));
159 | 
160 |     it('should change paging text', function () {
161 |       expect(getPaginationEl(0).text()).toBe('PR');
162 |       expect(getPaginationEl(-1).text()).toBe('NE');
163 |     });
164 | 
165 |     it('should not align previous & next page link', function () {
166 |       expect(getPaginationEl(0)).not.toHaveClass('previous');
167 |       expect(getPaginationEl(-1)).not.toHaveClass('next');
168 |     });
169 |   });
170 | 
171 |   describe('override configuration from attributes', function () {
172 |     beforeEach(inject(function() {
173 |       element = $compile('<pager align="false" previous-text="<" next-text=">" total-items="total" page="currentPage"></pager>')($rootScope);
174 |       $rootScope.$digest();
175 |     }));
176 | 
177 |     it('contains 2 li elements', function() {
178 |       expect(getPaginationBarSize()).toBe(2);
179 |     });
180 | 
181 |     it('should change paging text from attributes', function () {
182 |       expect(getPaginationEl(0).text()).toBe('<');
183 |       expect(getPaginationEl(-1).text()).toBe('>');
184 |     });
185 | 
186 |     it('should not align previous & next page link', function () {
187 |       expect(getPaginationEl(0)).not.toHaveClass('previous');
188 |       expect(getPaginationEl(-1)).not.toHaveClass('next');
189 |     });
190 | 
191 |     it('changes "previous" & "next" text from interpolated attributes', function() {
192 |       $rootScope.previousText = '<<';
193 |       $rootScope.nextText = '>>';
194 |       element = $compile('<pager align="false" previous-text="{{previousText}}" next-text="{{nextText}}" total-items="total" page="currentPage"></pager>')($rootScope);
195 |       $rootScope.$digest();
196 | 
197 |       expect(getPaginationEl(0).text()).toBe('<<');
198 |       expect(getPaginationEl(-1).text()).toBe('>>');
199 |     });
200 |   });
201 | 
202 | });
203 | 


--------------------------------------------------------------------------------
/src/popover/docs/demo.html:
--------------------------------------------------------------------------------
 1 | <div ng-controller="PopoverDemoCtrl">
 2 |     <h4>Dynamic</h4>
 3 |     <div class="form-group">
 4 |       <label>Popup Text:</label>
 5 |       <input type="text" ng-model="dynamicPopover" class="form-control">
 6 |     </div>
 7 |     <div class="form-group">
 8 |       <label>Popup Title:</label>
 9 |       <input type="text" ng-model="dynamicPopoverTitle" class="form-control">
10 |     </div>
11 |     <button popover="{{dynamicPopover}}"
12 |       popover-title="{{dynamicPopoverTitle}}" class="button">Dynamic Popover</button>
13 |     
14 |     <hr />
15 |     <h4>Positional</h4>
16 |     <button popover-placement="top" popover="On the Top!" class="button">Top</button>
17 |     <button popover-placement="left" popover="On the Left!" class="button">Left</button>
18 |     <button popover-placement="right" popover="On the Right!" class="button">Right</button>
19 |     <button popover-placement="bottom" popover="On the Bottom!" class="button">Bottom</button>
20 |     
21 |     <hr />
22 |     <h4>Triggers</h4>
23 |     <p>
24 |       <button popover="I appeared on mouse enter!" popover-trigger="mouseenter" class="button">Mouseenter</button>
25 |     </p>
26 |     <input type="text" value="Click me!" popover="I appeared on focus! Click away and I'll vanish..."  popover-trigger="focus" class="form-control">
27 | 
28 |     <hr />
29 |     <h4>Other</h4>
30 |     <button Popover-animation="true" popover="I fade in and out!" class="button">fading</button>
31 |     <button popover="I have a title!" popover-title="The title." class="button">title</button>
32 | </div>
33 | 


--------------------------------------------------------------------------------
/src/popover/docs/demo.js:
--------------------------------------------------------------------------------
1 | angular.module('foundationDemoApp').controller('PopoverDemoCtrl', function ($scope) {
2 |   $scope.dynamicPopover = "Hello, World!";
3 |   $scope.dynamicPopoverTitle = "Title";
4 | });
5 | 


--------------------------------------------------------------------------------
/src/popover/docs/readme.md:
--------------------------------------------------------------------------------
 1 | A lightweight, extensible directive for fancy popover creation. The popover
 2 | directive supports multiple placements, optional transition animation, and more.
 3 | 
 4 | Like the Bootstrap jQuery plugin, the popover **requires** the tooltip
 5 | module.
 6 | 
 7 | The popover directives provides several optional attributes to control how it
 8 | will display:
 9 | 
10 | - `popover-title`: A string to display as a fancy title.
11 | - `popover-placement`: Where to place it? Defaults to "top", but also accepts
12 |   "bottom", "left", "right".
13 | - `popover-animation`: Should it fade in and out? Defaults to "true".
14 | - `popover-popup-delay`: For how long should the user have to have the mouse
15 |   over the element before the popover shows (in milliseconds)? Defaults to 0.
16 | - `popover-trigger`: What should trigger the show of the popover? See the
17 |   `tooltip` directive for supported values.
18 | - `popover-append-to-body`: Should the tooltip be appended to `$body` instead of
19 |   the parent element?
20 | 
21 | The popover directives require the `$position` service.
22 | 
23 | The popover directive also supports various default configurations through the
24 | $tooltipProvider. See the [tooltip](#tooltip) section for more information.
25 | 
26 | 


--------------------------------------------------------------------------------
/src/popover/popover.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * The following features are still outstanding: popup delay, animation as a
 3 |  * function, placement as a function, inside, support for more triggers than
 4 |  * just mouse enter/leave, html popovers, and selector delegatation.
 5 |  */
 6 | angular.module( 'mm.foundation.popover', [ 'mm.foundation.tooltip' ] )
 7 | 
 8 | .directive( 'popoverPopup', function () {
 9 |   return {
10 |     restrict: 'EA',
11 |     replace: true,
12 |     scope: { title: '@', content: '@', placement: '@', animation: '&', isOpen: '&' },
13 |     templateUrl: 'template/popover/popover.html'
14 |   };
15 | })
16 | 
17 | .directive( 'popover', [ '$tooltip', function ( $tooltip ) {
18 |   return $tooltip( 'popover', 'popover', 'click' );
19 | }]);
20 | 


--------------------------------------------------------------------------------
/src/popover/test/popover.spec.js:
--------------------------------------------------------------------------------
 1 | describe('popover', function() {
 2 |   var elm,
 3 |       elmBody,
 4 |       scope,
 5 |       elmScope;
 6 | 
 7 |   // load the popover code
 8 |   beforeEach(module('mm.foundation.popover'));
 9 | 
10 |   // load the template
11 |   beforeEach(module('template/popover/popover.html'));
12 | 
13 |   beforeEach(inject(function($rootScope, $compile) {
14 |     elmBody = angular.element(
15 |       '<div><span popover="popover text">Selector Text</span></div>'
16 |     );
17 | 
18 |     scope = $rootScope;
19 |     $compile(elmBody)(scope);
20 |     scope.$digest();
21 |     elm = elmBody.find('span');
22 |     elmScope = elm.scope();
23 |   }));
24 | 
25 |   it('should not be open initially', inject(function() {
26 |     expect( elmScope.tt_isOpen ).toBe( false );
27 | 
28 |     // We can only test *that* the popover-popup element wasn't created as the
29 |     // implementation is templated and replaced.
30 |     expect( elmBody.children().length ).toBe( 1 );
31 |   }));
32 | 
33 |   it('should open on click', inject(function() {
34 |     elm.trigger( 'click' );
35 |     expect( elmScope.tt_isOpen ).toBe( true );
36 | 
37 |     // We can only test *that* the popover-popup element was created as the
38 |     // implementation is templated and replaced.
39 |     expect( elmBody.children().length ).toBe( 2 );
40 |   }));
41 | 
42 |   it('should close on second click', inject(function() {
43 |     elm.trigger( 'click' );
44 |     elm.trigger( 'click' );
45 |     expect( elmScope.tt_isOpen ).toBe( false );
46 |   }));
47 | 
48 |   it('should not unbind event handlers created by other directives - issue 456', inject( function( $compile ) {
49 | 
50 |     scope.click = function() {
51 |       scope.clicked = !scope.clicked;
52 |     };
53 | 
54 |     elmBody = angular.element(
55 |       '<div><input popover="Hello!" ng-click="click()" popover-trigger="mouseenter"/></div>'
56 |     );
57 |     $compile(elmBody)(scope);
58 |     scope.$digest();
59 | 
60 |     elm = elmBody.find('input');
61 | 
62 |     elm.trigger( 'mouseenter' );
63 |     elm.trigger( 'mouseleave' );
64 |     expect(scope.clicked).toBeFalsy();
65 | 
66 |     elm.click();
67 |     expect(scope.clicked).toBeTruthy();
68 |   }));
69 | });
70 | 
71 |     
72 | 


--------------------------------------------------------------------------------
/src/position/position.js:
--------------------------------------------------------------------------------
 1 | angular.module('mm.foundation.position', [])
 2 | 
 3 | /**
 4 |  * A set of utility methods that can be use to retrieve position of DOM elements.
 5 |  * It is meant to be used where we need to absolute-position DOM elements in
 6 |  * relation to other, existing elements (this is the case for tooltips, popovers,
 7 |  * typeahead suggestions etc.).
 8 |  */
 9 |   .factory('$position', ['$document', '$window', function ($document, $window) {
10 | 
11 |     function getStyle(el, cssprop) {
12 |       if (el.currentStyle) { //IE
13 |         return el.currentStyle[cssprop];
14 |       } else if ($window.getComputedStyle) {
15 |         return $window.getComputedStyle(el)[cssprop];
16 |       }
17 |       // finally try and get inline style
18 |       return el.style[cssprop];
19 |     }
20 | 
21 |     /**
22 |      * Checks if a given element is statically positioned
23 |      * @param element - raw DOM element
24 |      */
25 |     function isStaticPositioned(element) {
26 |       return (getStyle(element, "position") || 'static' ) === 'static';
27 |     }
28 | 
29 |     /**
30 |      * returns the closest, non-statically positioned parentOffset of a given element
31 |      * @param element
32 |      */
33 |     var parentOffsetEl = function (element) {
34 |       var docDomEl = $document[0];
35 |       var offsetParent = element.offsetParent || docDomEl;
36 |       while (offsetParent && offsetParent !== docDomEl && isStaticPositioned(offsetParent) ) {
37 |         offsetParent = offsetParent.offsetParent;
38 |       }
39 |       return offsetParent || docDomEl;
40 |     };
41 | 
42 |     return {
43 |       /**
44 |        * Provides read-only equivalent of jQuery's position function:
45 |        * http://api.jquery.com/position/
46 |        */
47 |       position: function (element) {
48 |         var elBCR = this.offset(element);
49 |         var offsetParentBCR = { top: 0, left: 0 };
50 |         var offsetParentEl = parentOffsetEl(element[0]);
51 |         if (offsetParentEl != $document[0]) {
52 |           offsetParentBCR = this.offset(angular.element(offsetParentEl));
53 |           offsetParentBCR.top += offsetParentEl.clientTop - offsetParentEl.scrollTop;
54 |           offsetParentBCR.left += offsetParentEl.clientLeft - offsetParentEl.scrollLeft;
55 |         }
56 | 
57 |         var boundingClientRect = element[0].getBoundingClientRect();
58 |         return {
59 |           width: boundingClientRect.width || element.prop('offsetWidth'),
60 |           height: boundingClientRect.height || element.prop('offsetHeight'),
61 |           top: elBCR.top - offsetParentBCR.top,
62 |           left: elBCR.left - offsetParentBCR.left
63 |         };
64 |       },
65 | 
66 |       /**
67 |        * Provides read-only equivalent of jQuery's offset function:
68 |        * http://api.jquery.com/offset/
69 |        */
70 |       offset: function (element) {
71 |         var boundingClientRect = element[0].getBoundingClientRect();
72 |         return {
73 |           width: boundingClientRect.width || element.prop('offsetWidth'),
74 |           height: boundingClientRect.height || element.prop('offsetHeight'),
75 |           top: boundingClientRect.top + ($window.pageYOffset || $document[0].body.scrollTop || $document[0].documentElement.scrollTop),
76 |           left: boundingClientRect.left + ($window.pageXOffset || $document[0].body.scrollLeft  || $document[0].documentElement.scrollLeft)
77 |         };
78 |       }
79 |     };
80 |   }]);
81 | 


--------------------------------------------------------------------------------
/src/position/test/test.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en" ng-app="position">
  3 | <head>
  4 |     <meta charset="utf-8">
  5 |     <script src="../../../misc/test-lib/angular.js"></script>
  6 |     <script src="../position.js"></script>
  7 |     <style type="text/css">
  8 |         .container {
  9 |             border: 1px solid red;
 10 |         }
 11 | 
 12 |         .container-relative {
 13 |             border: 1px solid red;
 14 |             position: relative;
 15 |         }
 16 | 
 17 |         .content {
 18 |             border: 5px solid #808080;
 19 |             background-color: dodgerblue;
 20 |             width: 200px;
 21 |         }
 22 | 
 23 |         .positioned {
 24 |             border: 5px solid #808080;
 25 |             background-color: green;
 26 |             position: absolute;
 27 |         }
 28 |     </style>
 29 |     <script type="text/javascript">
 30 |         angular.module('position', ['mm.foundation.position']).directive('position', function ($compile, $position) {
 31 |             return {
 32 |                 link: function (scope, element, attrs) {
 33 | 
 34 |                     var positionedEl = angular.element('<div class="positioned">Positioned</div>');
 35 |                     var elPosition = $position.position(element);
 36 |                     elPosition.left += elPosition.width;
 37 | 
 38 |                     positionedEl.css({left: elPosition.left + 'px', top: elPosition.top + 'px'});
 39 | 
 40 |                     if (attrs['position'] === 'body') {
 41 |                         angular.element(document.getElementsByTagName('body')[0]).after($compile(positionedEl)(scope));
 42 |                     } else {
 43 |                         element.after($compile(positionedEl)(scope));
 44 |                     }
 45 |                 }
 46 |             };
 47 |         });
 48 |     </script>
 49 | </head>
 50 | <body class="container">
 51 | <h3>Within body</h3>
 52 | 
 53 | <div class="content" position>Content</div>
 54 | 
 55 | <h3>Within statically positioned DIV</h3>
 56 | 
 57 | <div class="container">
 58 |     <div class="content" position>Content</div>
 59 | </div>
 60 | 
 61 | <h3>Within relative-positioned DIV - position specified in CSS</h3>
 62 | 
 63 | <div class="container-relative">
 64 |     <div class="content" position>Content</div>
 65 | </div>
 66 | 
 67 | <h3>Within relative-positioned DIV</h3>
 68 | 
 69 | <div style="position: relative; left: 200px" class="container">
 70 |     <div class="content" position>Content</div>
 71 | </div>
 72 | 
 73 | <h3>Within absolute-positioned DIV</h3>
 74 | 
 75 | <div style="position: absolute; left: 400px; top: 400px" class="container">
 76 |     <div class="content" position>Content - absolute</div>
 77 | </div>
 78 | 
 79 | <h3>Within overflowing absolute-positioned DIV</h3>
 80 | <div class="container" style="height: 50px; overflow: scroll;overflow-x: hidden; position: absolute;">
 81 |     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur non velit nulla. Suspendisse sit amet tempus diam. Sed at ultricies neque. Suspendisse id felis a sem placerat ornare. Donec auctor, purus at molestie tempor, arcu enim molestie lacus, ac imperdiet massa urna eu massa. Praesent velit tellus, scelerisque a fermentum ut, ornare in diam. Phasellus egestas molestie feugiat. Vivamus sit amet viverra metus.
 82 |     <div class="content" position>Content absolute overflow</div>
 83 | </div>
 84 | 
 85 | <br>
 86 | <br>
 87 | <br>
 88 | 
 89 | <h3>Next to a float element</h3>
 90 | 
 91 | <div class="container">
 92 |     <div class="content" style="float: right" position>Content</div>
 93 | </div>
 94 | 
 95 | <h3>Within a table</h3>
 96 | <table class="container">
 97 |     <tr>
 98 |         <td>Some other content</td>
 99 |         <td>
100 |             <div class="content" position>Content</div>
101 |         </td>
102 |     </tr>
103 | </table>
104 | 
105 | <h3>Within a table that is inside a relative-positioned DIV</h3>
106 | 
107 | <div style="position: relative; left: 200px" class="container">
108 |     <table class="container">
109 |         <tr>
110 |             <td>Some other content</td>
111 |             <td>
112 |                 <div class="content" position>Content</div>
113 |             </td>
114 |         </tr>
115 |     </table>
116 | </div>
117 | 
118 | <h3>Inside svg</h3>
119 | 
120 | <svg height="300px" width="300px">
121 |   <rect x="0" y="0" height="300" width="300" fill="aliceblue"></rect>
122 |   <rect x="50" y="50" height="200" width="200" position="body" fill="white" stroke="red">
123 |   </rect>
124 | </svg>
125 | 
126 | 
127 | <h3>Inside looong text</h3>
128 | <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur non velit nulla. Suspendisse sit amet tempus diam. Sed at ultricies neque. Suspendisse id felis a sem placerat ornare. Donec auctor, purus at molestie tempor, arcu enim molestie lacus, ac imperdiet massa urna eu massa. Praesent velit tellus, scelerisque a fermentum ut, ornare in diam. Phasellus egestas molestie feugiat. Vivamus sit amet viverra metus.</p>
129 | <p>Etiam ultricies odio commodo erat ullamcorper sodales. Nullam ac dui ac libero dictum mollis. Quisque convallis adipiscing facilisis. In nec nisi velit, id auctor lectus. Cras interdum urna non felis lacinia vulputate. Integer dignissim, mi aliquam gravida auctor, massa odio cursus lorem, eu ultrices eros nisl tempus diam. Maecenas tristique pellentesque nisi sed adipiscing. Aenean hendrerit sapien quis arcu lobortis vitae pulvinar ante volutpat. Morbi consectetur erat eu lacus facilisis eu ullamcorper orci euismod. Quisque diam dui, interdum in suscipit et, fringilla non justo. Pellentesque non nibh odio. Proin sit amet massa sem.</p>
130 | <p>Nam in urna erat, at congue nisi. Donec eu tellus lorem, sed facilisis tellus. Aliquam suscipit faucibus ipsum, at hendrerit metus interdum at. Integer et eros ac lacus vulputate sagittis quis quis erat. Suspendisse consectetur vehicula purus vitae imperdiet. Suspendisse in augue magna, quis imperdiet enim. Nullam non diam ac erat auctor bibendum. Praesent ante mauris, egestas sit amet molestie sed, tristique at lorem. Nam at mi ac nisl venenatis semper nec eget mi. Pellentesque a lectus ac leo feugiat suscipit. Quisque tristique dui nec urna placerat a viverra mi iaculis. Ut et tellus et turpis sagittis iaculis nec eu magna. Sed quis nunc non arcu tincidunt ultricies viverra id mauris.</p>
131 | <p>Curabitur luctus rutrum ultricies. Aenean ut rutrum orci. Sed molestie lorem in leo cursus id feugiat nisi scelerisque. Maecenas pulvinar neque nec lacus feugiat dictum. Donec viverra felis nec nisi mollis feugiat. Phasellus vehicula, ligula at mattis porttitor, sapien urna hendrerit quam, at fringilla nisl quam vel elit. In eu lacus ligula. Praesent eget gravida nisl. Suspendisse velit diam, pellentesque a tempus quis, vestibulum vel leo.</p>
132 | <p>Maecenas feugiat ultrices laoreet. Sed congue posuere diam ac faucibus. Pellentesque eget leo ligula. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed nec quam eu tellus sagittis cursus a sit amet eros. Mauris sit amet orci at orci vulputate commodo ut ut nunc. Etiam sagittis erat ut nisi ultricies feugiat. Morbi sed eros nisi. Cras vitae augue in risus aliquet commodo non id est.</p>
133 | <div class="content" position>HERE</div>
134 | <p>Maecenas laoreet nisi pretium elit bibendum eget tempor nunc aliquet. Vivamus interdum nisi sit amet tortor fermentum congue. Suspendisse at posuere erat. Aliquam hendrerit ultricies nunc non adipiscing. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis molestie viverra nulla a aliquet. Nullam non eros vel sem vehicula suscipit. Ut sit amet arcu ac tortor dignissim viverra in a ligula.</p>
135 | 
136 | 
137 | <div style="position: fixed; bottom: 0" class="container">
138 |     <h3>Within fixed div</h3>
139 |     <div class="content" position>Content</div>
140 | </div>
141 | 
142 | 
143 | </body>
144 | </html>
145 | 


--------------------------------------------------------------------------------
/src/progressbar/docs/demo.html:
--------------------------------------------------------------------------------
 1 | <div ng-controller="ProgressDemoCtrl">
 2 |     <style>
 3 |       .progress .meter {
 4 |         -webkit-transition: width 1s ease-out;
 5 |         transition: width 1s ease-out;
 6 |       }
 7 |     </style>
 8 | 
 9 |     <h3>Static</h3>
10 |     <div class="row">
11 |         <div class="col-sm-4"><progressbar value="55"></progressbar></div>
12 |         <div class="col-sm-4"><progressbar value="22" type="warning">22%</progressbar></div>
13 |         <div class="col-sm-4"><progressbar max="200" value="166" type="alert"><i>166 / 200</i></progressbar></div>
14 |     </div>
15 | 
16 |     <hr />
17 |     <h3>Dynamic <button class="button small" type="button" ng-click="random()">Randomize</button></h3>
18 |     <progressbar max="max" value="dynamic"><span style="color:black; white-space:nowrap;">{{dynamic}} / {{max}}</span></progressbar>
19 | 
20 |     <small><em>No animation</em></small>
21 |     <progressbar animate="false" value="dynamic" type="success"><b>{{dynamic}}%</b></progressbar>
22 | 
23 |     <small><em>Object (changes type based on value)</em></small>
24 |     <progressbar class="progress-striped active" value="dynamic" type="{{type}}">{{type}} <i ng-show="showWarning">!!! Watch out !!!</i></progressbar>
25 | 
26 | </div>
27 | 


--------------------------------------------------------------------------------
/src/progressbar/docs/demo.js:
--------------------------------------------------------------------------------
 1 | angular.module('foundationDemoApp').controller('ProgressDemoCtrl', function ($scope) {
 2 |   
 3 |   $scope.max = 200;
 4 | 
 5 |   $scope.random = function() {
 6 |     var value = Math.floor((Math.random() * 100) + 1);
 7 |     var type;
 8 | 
 9 |     if (value < 25) {
10 |       type = 'success';
11 |     } else if (value < 50) {
12 |       type = 'info';
13 |     } else if (value < 75) {
14 |       type = 'warning';
15 |     } else {
16 |       type = 'alert';
17 |     }
18 | 
19 |     $scope.showWarning = (type === 'alert' || type === 'warning');
20 | 
21 |     $scope.dynamic = value;
22 |     $scope.type = type;
23 |   };
24 |   $scope.random();
25 | });
26 | 


--------------------------------------------------------------------------------
/src/progressbar/docs/readme.md:
--------------------------------------------------------------------------------
 1 | A progress bar directive that is focused on providing feedback on the progress of a workflow or action.
 2 | 
 3 | It supports multiple (stacked) bars into the same `<progress>` element or a single `<progressbar>` element with optional `max` attribute and transition animations.
 4 | 
 5 | ### Settings ###
 6 | 
 7 | #### `<progressbar>` ####
 8 | 
 9 |  * `value` <i class="fa-eye"></i>
10 |  	:
11 |  	The current value of progress completed.
12 | 
13 |  * `type`
14 |  	_(Default: null)_ :
15 |  	Style type. Possible values are 'success', 'warning' etc.
16 | 
17 |  * `max`
18 |  	_(Default: 100)_ :
19 |  	A number that specifies the total value of bars that is required.
20 | 
21 |  * `animate`
22 |  	_(Default: true)_ :
23 |  	Whether bars use transitions to achieve the width change. **IMPORTANT:** Foundation's CSS does not not apply a `transition` to progress bars. In order for animations to work, you'll need to apply a `transition` in your own CSS. See the demo for an example.
24 | 


--------------------------------------------------------------------------------
/src/progressbar/progressbar.js:
--------------------------------------------------------------------------------
  1 | angular.module('mm.foundation.progressbar', ['mm.foundation.transition'])
  2 | 
  3 | .constant('progressConfig', {
  4 |   animate: true,
  5 |   max: 100
  6 | })
  7 | 
  8 | .controller('ProgressController', ['$scope', '$attrs', 'progressConfig', '$transition', function($scope, $attrs, progressConfig, $transition) {
  9 |     var self = this,
 10 |         bars = [],
 11 |         max = angular.isDefined($attrs.max) ? $scope.$parent.$eval($attrs.max) : progressConfig.max,
 12 |         animate = angular.isDefined($attrs.animate) ? $scope.$parent.$eval($attrs.animate) : progressConfig.animate;
 13 | 
 14 |     this.addBar = function(bar, element) {
 15 |         var oldValue = 0, index = bar.$parent.$index;
 16 |         if ( angular.isDefined(index) &&  bars[index] ) {
 17 |             oldValue = bars[index].value;
 18 |         }
 19 |         bars.push(bar);
 20 | 
 21 |         this.update(element, bar.value, oldValue);
 22 | 
 23 |         bar.$watch('value', function(value, oldValue) {
 24 |             if (value !== oldValue) {
 25 |                 self.update(element, value, oldValue);
 26 |             }
 27 |         });
 28 | 
 29 |         bar.$on('$destroy', function() {
 30 |             self.removeBar(bar);
 31 |         });
 32 |     };
 33 | 
 34 |     // Update bar element width
 35 |     this.update = function(element, newValue, oldValue) {
 36 |         var percent = this.getPercentage(newValue);
 37 | 
 38 |         if (animate) {
 39 |             element.css('width', this.getPercentage(oldValue) + '%');
 40 |             $transition(element, {width: percent + '%'});
 41 |         } else {
 42 |             element.css({'transition': 'none', 'width': percent + '%'});
 43 |         }
 44 |     };
 45 | 
 46 |     this.removeBar = function(bar) {
 47 |         bars.splice(bars.indexOf(bar), 1);
 48 |     };
 49 | 
 50 |     this.getPercentage = function(value) {
 51 |         return Math.round(100 * value / max);
 52 |     };
 53 | }])
 54 | 
 55 | .directive('progress', function() {
 56 |     return {
 57 |         restrict: 'EA',
 58 |         replace: true,
 59 |         transclude: true,
 60 |         controller: 'ProgressController',
 61 |         require: 'progress',
 62 |         scope: {},
 63 |         template: '<div class="progress" ng-transclude></div>'
 64 |         //templateUrl: 'template/progressbar/progress.html' // Works in AngularJS 1.2
 65 |     };
 66 | })
 67 | 
 68 | .directive('bar', function() {
 69 |     return {
 70 |         restrict: 'EA',
 71 |         replace: true,
 72 |         transclude: true,
 73 |         require: '^progress',
 74 |         scope: {
 75 |             value: '=',
 76 |             type: '@'
 77 |         },
 78 |         templateUrl: 'template/progressbar/bar.html',
 79 |         link: function(scope, element, attrs, progressCtrl) {
 80 |             progressCtrl.addBar(scope, element);
 81 |         }
 82 |     };
 83 | })
 84 | 
 85 | .directive('progressbar', function() {
 86 |     return {
 87 |         restrict: 'EA',
 88 |         replace: true,
 89 |         transclude: true,
 90 |         controller: 'ProgressController',
 91 |         scope: {
 92 |             value: '=',
 93 |             type: '@'
 94 |         },
 95 |         templateUrl: 'template/progressbar/progressbar.html',
 96 |         link: function(scope, element, attrs, progressCtrl) {
 97 |             progressCtrl.addBar(scope, angular.element(element.children()[0]));
 98 |         }
 99 |     };
100 | });
101 | 


--------------------------------------------------------------------------------
/src/progressbar/test/progressbar.spec.js:
--------------------------------------------------------------------------------
 1 | describe('progressbar directive', function () {
 2 |   var $rootScope, element;
 3 |   beforeEach(module('mm.foundation.progressbar'));
 4 |   beforeEach(module('template/progressbar/progressbar.html', 'template/progressbar/progress.html', 'template/progressbar/bar.html'));
 5 |   beforeEach(inject(function(_$compile_, _$rootScope_) {
 6 |     $compile = _$compile_;
 7 |     $rootScope = _$rootScope_;
 8 |     $rootScope.value = 22;
 9 |     element = $compile('<progressbar animate="false" value="value">{{value}} %</progressbar>')($rootScope);
10 |     $rootScope.$digest();
11 |   }));
12 | 
13 |   var BAR_CLASS = 'meter';
14 | 
15 |   function getBar(i) {
16 |     return element.children().eq(i);
17 |   }
18 | 
19 |   it('has a "progress" css class', function() {
20 |     expect(element).toHaveClass('progress');
21 |   });
22 | 
23 |   it('contains one child element with "bar" css class', function() {
24 |     expect(element.children().length).toBe(1);
25 |     expect(getBar(0)).toHaveClass(BAR_CLASS);
26 |   });
27 | 
28 |   it('has a "bar" element with expected width', function() {
29 |     expect(getBar(0).css('width')).toBe('22%');
30 |   });
31 | 
32 |   it('transcludes "bar" text', function() {
33 |     expect(getBar(0).text()).toBe('22 %');
34 |   });
35 | 
36 |   it('it should be possible to add additional classes', function () {
37 |     element = $compile('<progress class="secondary radius" max="200"><bar class="pizza"></bar></progress>')($rootScope);
38 |     $rootScope.$digest();
39 | 
40 |     expect(element).toHaveClass('secondary');
41 |     expect(element).toHaveClass('radius');
42 | 
43 |     expect(getBar(0)).toHaveClass('pizza');
44 |   });
45 | 
46 |   describe('"max" attribute', function () {
47 |     beforeEach(inject(function() {
48 |       $rootScope.max = 200;
49 |       element = $compile('<progressbar max="max" animate="false" value="value">{{value}}/{{max}}</progressbar>')($rootScope);
50 |       $rootScope.$digest();
51 |     }));
52 | 
53 |     it('adjusts the "bar" width', function() {
54 |       expect(element.children().eq(0).css('width')).toBe('11%');
55 |     });
56 | 
57 |     it('adjusts the "bar" width when value changes', function() {
58 |       $rootScope.value = 60;
59 |       $rootScope.$digest();
60 |       expect(getBar(0).css('width')).toBe('30%');
61 | 
62 |       $rootScope.value += 12;
63 |       $rootScope.$digest();
64 |       expect(getBar(0).css('width')).toBe('36%');
65 | 
66 |       $rootScope.value = 0;
67 |       $rootScope.$digest();
68 |       expect(getBar(0).css('width')).toBe('0%');
69 |     });
70 | 
71 |     it('transcludes "bar" text', function() {
72 |       expect(getBar(0).text()).toBe('22/200');
73 |     });
74 |   });
75 | 
76 |   describe('"type" attribute', function () {
77 |     beforeEach(inject(function() {
78 |       $rootScope.type = 'success';
79 |       element = $compile('<progressbar value="value" type="{{type}}"></progressbar>')($rootScope);
80 |       $rootScope.$digest();
81 |     }));
82 | 
83 |     it('should use correct classes', function() {
84 |       expect(element).toHaveClass('progress');
85 |       expect(element).toHaveClass('success');
86 |     });
87 | 
88 |     it('should change classes if type changed', function() {
89 |       $rootScope.type = 'alert';
90 |       $rootScope.value += 1;
91 |       $rootScope.$digest();
92 | 
93 |       expect(element).toHaveClass('progress');
94 |       expect(element).not.toHaveClass('success');
95 |       expect(element).toHaveClass('alert');
96 |     });
97 |   });
98 | });
99 | 


--------------------------------------------------------------------------------
/src/rating/docs/demo.html:
--------------------------------------------------------------------------------
 1 | <div ng-controller="RatingDemoCtrl">
 2 |     <h4>Default</h4>
 3 |     <rating value="rate" max="max" readonly="isReadonly" on-hover="hoveringOver(value)" on-leave="overStar = null"></rating>
 4 |     <span class="label" ng-class="{'label-warning': percent<30, 'label-info': percent>=30 && percent<70, 'label-success': percent>=70}" ng-show="overStar && !isReadonly">{{percent}}%</span>
 5 | 
 6 |     <pre style="margin:15px 0;">Rate: <b>{{rate}}</b> - Readonly is: <i>{{isReadonly}}</i> - Hovering over: <b>{{overStar || "none"}}</b></pre>
 7 | 
 8 |     <button class="button small alert" ng-click="rate = 0" ng-disabled="isReadonly">Clear</button>
 9 |     <button class="button small" ng-click="isReadonly = ! isReadonly">Toggle Readonly</button>
10 |     <hr />
11 | 
12 |     <h4>Custom icons</h4>
13 |     <div ng-init="x = 5">
14 |       <rating value="x" max="15" state-on="'fa-check-circle'" state-off="'fa-check-circle-o'"></rating>
15 |       <b>(<i>Rate:</i> {{x}})</b>
16 |     </div>
17 |     <div ng-init="y = 2">
18 |       <rating value="y" rating-states="ratingStates"></rating>
19 |       <b>(<i>Rate:</i> {{y}})</b>
20 |     </div>
21 | </div>
22 | 


--------------------------------------------------------------------------------
/src/rating/docs/demo.js:
--------------------------------------------------------------------------------
 1 | angular.module('foundationDemoApp').controller('RatingDemoCtrl', function ($scope) {
 2 |   $scope.rate = 7;
 3 |   $scope.max = 10;
 4 |   $scope.isReadonly = false;
 5 | 
 6 |   $scope.hoveringOver = function(value) {
 7 |     $scope.overStar = value;
 8 |     $scope.percent = 100 * (value / $scope.max);
 9 |   };
10 | 
11 |   $scope.ratingStates = [
12 |     {stateOn: 'fa-check-circle', stateOff: 'fa-check-circle-o'},
13 |     {stateOn: 'fa-star', stateOff: 'fa-start-o'},
14 |     {stateOn: 'fa-heart', stateOff: 'fa-ban'},
15 |     {stateOn: 'fa-heart'},
16 |     {stateOff: 'fa-power-off'}
17 |   ];
18 | });
19 | 


--------------------------------------------------------------------------------
/src/rating/docs/readme.md:
--------------------------------------------------------------------------------
 1 | Rating directive that will take care of visualising a star rating bar.
 2 | 
 3 | It uses Font Awesome icons (http://fontawesome.io/) by default.
 4 | 
 5 | ### Settings ###
 6 | 
 7 | #### `<rating>` ####
 8 | 
 9 |  * `value` <i class="fa fa-eye"></i>
10 |  	:
11 |  	The current rate.
12 | 
13 |  * `max`
14 |  	_(Defaults: 5)_ :
15 |  	Changes the number of icons.
16 | 
17 |  * `readonly`
18 |  	_(Defaults: false)_ :
19 |  	Prevent user's interaction.
20 | 
21 |  * `on-hover(value)`
22 |  	:
23 |  	An optional expression called when user's mouse is over a particular icon.
24 | 
25 |  * `on-leave()`
26 |  	:
27 |  	An optional expression called when user's mouse leaves the control altogether.
28 | 
29 |  * `state-on`
30 |  	_(Defaults: null)_ :
31 |  	A variable used in template to specify the state (class, src, etc) for selected icons.
32 | 
33 |  * `state-off`
34 |  	_(Defaults: null)_ :
35 |  	A variable used in template to specify the state for unselected icons.
36 | 
37 |  * `rating-states`
38 |  	_(Defaults: null)_ :
39 |  	An array of objects defining properties for all icons. In default template, `stateOn` & `stateOff` property is used to specify the icon's class.
40 | 


--------------------------------------------------------------------------------
/src/rating/rating.js:
--------------------------------------------------------------------------------
 1 | angular.module('mm.foundation.rating', [])
 2 | 
 3 | .constant('ratingConfig', {
 4 |   max: 5,
 5 |   stateOn: null,
 6 |   stateOff: null
 7 | })
 8 | 
 9 | .controller('RatingController', ['$scope', '$attrs', '$parse', 'ratingConfig', function($scope, $attrs, $parse, ratingConfig) {
10 | 
11 |   this.maxRange = angular.isDefined($attrs.max) ? $scope.$parent.$eval($attrs.max) : ratingConfig.max;
12 |   this.stateOn = angular.isDefined($attrs.stateOn) ? $scope.$parent.$eval($attrs.stateOn) : ratingConfig.stateOn;
13 |   this.stateOff = angular.isDefined($attrs.stateOff) ? $scope.$parent.$eval($attrs.stateOff) : ratingConfig.stateOff;
14 | 
15 |   this.createRateObjects = function(states) {
16 |     var defaultOptions = {
17 |       stateOn: this.stateOn,
18 |       stateOff: this.stateOff
19 |     };
20 | 
21 |     for (var i = 0, n = states.length; i < n; i++) {
22 |       states[i] = angular.extend({ index: i }, defaultOptions, states[i]);
23 |     }
24 |     return states;
25 |   };
26 | 
27 |   // Get objects used in template
28 |   $scope.range = angular.isDefined($attrs.ratingStates) ?  this.createRateObjects(angular.copy($scope.$parent.$eval($attrs.ratingStates))): this.createRateObjects(new Array(this.maxRange));
29 | 
30 |   $scope.rate = function(value) {
31 |     if ( $scope.value !== value && !$scope.readonly ) {
32 |       $scope.value = value;
33 |     }
34 |   };
35 | 
36 |   $scope.enter = function(value) {
37 |     if ( ! $scope.readonly ) {
38 |       $scope.val = value;
39 |     }
40 |     $scope.onHover({value: value});
41 |   };
42 | 
43 |   $scope.reset = function() {
44 |     $scope.val = angular.copy($scope.value);
45 |     $scope.onLeave();
46 |   };
47 | 
48 |   $scope.$watch('value', function(value) {
49 |     $scope.val = value;
50 |   });
51 | 
52 |   $scope.readonly = false;
53 |   if ($attrs.readonly) {
54 |     $scope.$parent.$watch($parse($attrs.readonly), function(value) {
55 |       $scope.readonly = !!value;
56 |     });
57 |   }
58 | }])
59 | 
60 | .directive('rating', function() {
61 |   return {
62 |     restrict: 'EA',
63 |     scope: {
64 |       value: '=',
65 |       onHover: '&',
66 |       onLeave: '&'
67 |     },
68 |     controller: 'RatingController',
69 |     templateUrl: 'template/rating/rating.html',
70 |     replace: true
71 |   };
72 | });
73 | 


--------------------------------------------------------------------------------
/src/rating/test/rating.spec.js:
--------------------------------------------------------------------------------
  1 | describe('rating directive', function () {
  2 |   var $rootScope, element;
  3 |   beforeEach(module('mm.foundation.rating'));
  4 |   beforeEach(module('template/rating/rating.html'));
  5 |   beforeEach(inject(function(_$compile_, _$rootScope_) {
  6 |     $compile = _$compile_;
  7 |     $rootScope = _$rootScope_;
  8 |     $rootScope.rate = 3;
  9 |     element = $compile('<rating value="rate"></rating>')($rootScope);
 10 |     $rootScope.$digest();
 11 |   }));
 12 | 
 13 |   function getStars() {
 14 |     return element.find('i');
 15 |   }
 16 | 
 17 |   function getStar(number) {
 18 |     return getStars().eq( number - 1 );
 19 |   }
 20 | 
 21 |   function getState(classOn, classOff) {
 22 |     var stars = getStars();
 23 |     var state = [];
 24 |     for (var i = 0, n = stars.length; i < n; i++) {
 25 |       state.push( (stars.eq(i).hasClass(classOn || 'fa-star') && ! stars.eq(i).hasClass(classOff || 'fa-star-o')) );
 26 |     }
 27 |     return state;
 28 |   }
 29 | 
 30 |   it('contains the default number of icons', function() {
 31 |     expect(getStars().length).toBe(5);
 32 |   });
 33 | 
 34 |   it('initializes the default star icons as selected', function() {
 35 |     expect(getState()).toEqual([true, true, true, false, false]);
 36 |   });
 37 | 
 38 |   it('handles correctly the click event', function() {
 39 |     getStar(2).click();
 40 |     $rootScope.$digest();
 41 |     expect(getState()).toEqual([true, true, false, false, false]);
 42 |     expect($rootScope.rate).toBe(2);
 43 | 
 44 |     getStar(5).click();
 45 |     $rootScope.$digest();
 46 |     expect(getState()).toEqual([true, true, true, true, true]);
 47 |     expect($rootScope.rate).toBe(5);
 48 |   });
 49 | 
 50 |   it('handles correctly the hover event', function() {
 51 |     getStar(2).trigger('mouseover');
 52 |     $rootScope.$digest();
 53 |     expect(getState()).toEqual([true, true, false, false, false]);
 54 |     expect($rootScope.rate).toBe(3);
 55 | 
 56 |     getStar(5).trigger('mouseover');
 57 |     $rootScope.$digest();
 58 |     expect(getState()).toEqual([true, true, true, true, true]);
 59 |     expect($rootScope.rate).toBe(3);
 60 | 
 61 |     element.trigger('mouseout');
 62 |     expect(getState()).toEqual([true, true, true, false, false]);
 63 |     expect($rootScope.rate).toBe(3);
 64 |   });
 65 | 
 66 |   it('changes the number of selected icons when value changes', function() {
 67 |     $rootScope.rate = 2;
 68 |     $rootScope.$digest();
 69 | 
 70 |     expect(getState()).toEqual([true, true, false, false, false]);
 71 |   });
 72 | 
 73 |   it('shows different number of icons when `max` attribute is set', function() {
 74 |     element = $compile('<rating value="rate" max="7"></rating>')($rootScope);
 75 |     $rootScope.$digest();
 76 | 
 77 |     expect(getStars().length).toBe(7);
 78 |   });
 79 | 
 80 |   it('shows different number of icons when `max` attribute is from scope variable', function() {
 81 |     $rootScope.max = 15;
 82 |     element = $compile('<rating value="rate" max="max"></rating>')($rootScope);
 83 |     $rootScope.$digest();
 84 |     expect(getStars().length).toBe(15);
 85 |   });
 86 | 
 87 |   it('handles readonly attribute', function() {
 88 |     $rootScope.isReadonly = true;
 89 |     element = $compile('<rating value="rate" readonly="isReadonly"></rating>')($rootScope);
 90 |     $rootScope.$digest();
 91 | 
 92 |     expect(getState()).toEqual([true, true, true, false, false]);
 93 | 
 94 |     var star5 = getStar(5);
 95 |     star5.trigger('mouseover');
 96 |     $rootScope.$digest();
 97 |     expect(getState()).toEqual([true, true, true, false, false]);
 98 | 
 99 |     $rootScope.isReadonly = false;
100 |     $rootScope.$digest();
101 | 
102 |     star5.trigger('mouseover');
103 |     $rootScope.$digest();
104 |     expect(getState()).toEqual([true, true, true, true, true]);
105 |   });
106 | 
107 |   it('should fire onHover', function() {
108 |     $rootScope.hoveringOver = jasmine.createSpy('hoveringOver');
109 |     element = $compile('<rating value="rate" on-hover="hoveringOver(value)"></rating>')($rootScope);
110 |     $rootScope.$digest();
111 | 
112 |     getStar(3).trigger('mouseover');
113 |     $rootScope.$digest();
114 |     expect($rootScope.hoveringOver).toHaveBeenCalledWith(3);
115 |   });
116 | 
117 |   it('should fire onLeave', function() {
118 |     $rootScope.leaving = jasmine.createSpy('leaving');
119 |     element = $compile('<rating value="rate" on-leave="leaving()"></rating>')($rootScope);
120 |     $rootScope.$digest();
121 | 
122 |     element.trigger('mouseleave');
123 |     $rootScope.$digest();
124 |     expect($rootScope.leaving).toHaveBeenCalled();
125 |   });
126 | 
127 |   describe('custom states', function() {
128 |     beforeEach(inject(function() {
129 |       $rootScope.classOn = 'icon-ok-sign';
130 |       $rootScope.classOff = 'icon-ok-circle';
131 |       element = $compile('<rating value="rate" state-on="classOn" state-off="classOff"></rating>')($rootScope);
132 |       $rootScope.$digest();
133 |     }));
134 | 
135 |     it('changes the default icons', function() {
136 |       expect(getState($rootScope.classOn, $rootScope.classOff)).toEqual([true, true, true, false, false]);
137 |     });
138 |   });
139 | 
140 |   describe('`rating-states`', function() {
141 |     beforeEach(inject(function() {
142 |       $rootScope.states = [
143 |         {stateOn: 'sign', stateOff: 'circle'},
144 |         {stateOn: 'heart', stateOff: 'ban'},
145 |         {stateOn: 'heart'},
146 |         {stateOff: 'off'}
147 |       ];
148 |       element = $compile('<rating value="rate" rating-states="states"></rating>')($rootScope);
149 |       $rootScope.$digest();
150 |     }));
151 | 
152 |     it('should define number of icon elements', function () {
153 |       expect(getStars().length).toBe($rootScope.states.length);
154 |     });
155 | 
156 |     it('handles each icon', function() {
157 |       var stars = getStars();
158 | 
159 |       for (var i = 0; i < stars.length; i++) {
160 |         var star = stars.eq(i);
161 |         var state = $rootScope.states[i];
162 |         var isOn = i < $rootScope.rate;
163 | 
164 |         expect(star.hasClass(state.stateOn)).toBe(isOn);
165 |         expect(star.hasClass(state.stateOff)).toBe(!isOn);
166 |       }
167 |     });
168 |   });
169 | 
170 |   describe('setting ratingConfig', function() {
171 |     var originalConfig = {};
172 |     beforeEach(inject(function(ratingConfig) {
173 |       $rootScope.rate = 5;
174 |       angular.extend(originalConfig, ratingConfig);
175 |       ratingConfig.max = 10;
176 |       ratingConfig.stateOn = 'on';
177 |       ratingConfig.stateOff = 'off';
178 |       element = $compile('<rating value="rate"></rating>')($rootScope);
179 |       $rootScope.$digest();
180 |     }));
181 |     afterEach(inject(function(ratingConfig) {
182 |       // return it to the original state
183 |       angular.extend(ratingConfig, originalConfig);
184 |     }));
185 | 
186 |     it('should change number of icon elements', function () {
187 |       expect(getStars().length).toBe(10);
188 |     });
189 | 
190 |     it('should change icon states', function () {
191 |       expect(getState('on', 'off')).toEqual([true, true, true, true, true, false, false, false, false, false]);
192 |     });
193 |   });
194 | });
195 | 


--------------------------------------------------------------------------------
/src/tabs/docs/demo.html:
--------------------------------------------------------------------------------
 1 | <div ng-controller="TabsDemoCtrl">
 2 |   <p>Select a tab by setting active binding to true:</p>
 3 |   <p>
 4 |     <button class="button small" ng-click="tabs[0].active = true">Select second tab</button>
 5 |     <button class="button small" ng-click="tabs[1].active = true">Select third tab</button>
 6 |   </p>
 7 |   <hr />
 8 | 
 9 |   <tabset>
10 |     <tab heading="Static title">Static content</tab>
11 |     <tab ng-repeat="tab in tabs" heading="{{tab.title}}" active="tab.active">
12 |       {{tab.content}}
13 |     </tab>
14 |     <tab select="alertMe()">
15 |       <tab-heading>
16 |         <i class="fa fa-bell"></i> Alert!
17 |       </tab-heading>
18 |       I've got an HTML heading, and a select callback. Pretty cool!
19 |     </tab>
20 |   </tabset>
21 | 
22 |   <hr />
23 | 
24 |   <tabset vertical="true" type="navType">
25 |     <tab heading="Vertical 1">Vertical content 1</tab>
26 |     <tab heading="Vertical 2">Vertical content 2</tab>
27 |   </tabset>
28 | 
29 |   <hr />
30 | </div>
31 | 


--------------------------------------------------------------------------------
/src/tabs/docs/demo.js:
--------------------------------------------------------------------------------
 1 | angular.module('foundationDemoApp').controller('TabsDemoCtrl', function ($scope) {
 2 |   $scope.tabs = [
 3 |     { title:"Dynamic Title 1", content:"Dynamic content 1" },
 4 |     { title:"Dynamic Title 2", content:"Dynamic content 2" }
 5 |   ];
 6 | 
 7 |   $scope.alertMe = function() {
 8 |     setTimeout(function() {
 9 |       alert("You've selected the alert tab!");
10 |     });
11 |   };
12 | });
13 | 


--------------------------------------------------------------------------------
/src/tabs/docs/readme.md:
--------------------------------------------------------------------------------
 1 | Foundation version of the tabs directive.
 2 | 
 3 | ### Settings ###
 4 | 
 5 | #### `<tabset>` ####
 6 | 
 7 |  * `vertical`
 8 |  	_(Defaults: false)_ :
 9 |  	Whether tabs appear vertically stacked.
10 | 
11 |  * `open-on-load`
12 |   _(Defaults: true)_ :
13 |   Whether to open an active tab automatically.
14 | 
15 | #### `<tab>` ####
16 | 
17 |  * `heading` or `<tab-heading>`
18 |  	:
19 |  	Heading text or HTML markup.
20 | 
21 |  * `active` <i class="fa fa-eye"></i>
22 |  	_(Defaults: false)_ :
23 |  	Whether tab is currently selected.
24 | 
25 |  * `select()`
26 |  	_(Defaults: null)_ :
27 |  	An optional expression called when tab is activated.
28 | 


--------------------------------------------------------------------------------
/src/tooltip/docs/demo.html:
--------------------------------------------------------------------------------
 1 | <div ng-controller="TooltipDemoCtrl">
 2 |     <div class="form-group">
 3 |       <label>Dynamic Tooltip Text</label>
 4 |       <input type="text" ng-model="dynamicTooltipText" class="form-control">
 5 |     </div>
 6 |     <div class="form-group">
 7 |       <label>Dynamic Tooltip Popup Text</label>
 8 |       <input type="text" ng-model="dynamicTooltip" class="form-control">
 9 |     </div>
10 |     <p>
11 |       Pellentesque <a href="#" class="has-tip" tooltip="{{dynamicTooltip}}">{{dynamicTooltipText}}</a>,
12 |       sit amet venenatis urna cursus eget nunc scelerisque viverra mauris, in
13 |       aliquam. Tincidunt lobortis feugiat vivamus at 
14 |       <a href="#" class="has-tip" tooltip-placement="left" tooltip="On the Left!">left</a> eget
15 |       arcu dictum varius duis at consectetur lorem. Vitae elementum curabitur
16 |       <a href="#" class="has-tip" tooltip-placement="right" tooltip="On the Right!">right</a> 
17 |       nunc sed velit dignissim sodales ut eu sem integer vitae. Turpis egestas 
18 |       <a href="#" class="has-tip" tooltip-placement="bottom" tooltip="On the Bottom!">bottom</a> 
19 |       pharetra convallis posuere morbi leo urna, 
20 |       <a href="#" class="has-tip" tooltip-animation="false" tooltip="I don't fade. :-(">fading</a>
21 |       at elementum eu, facilisis sed odio morbi quis commodo odio. In cursus
22 |       <a href="#" class="has-tip" tooltip-popup-delay='1000' tooltip='appears with delay'>delayed</a> turpis massa tincidunt dui ut.
23 |     </p>
24 | 
25 |     <p>
26 |       I can even contain HTML. <a href="#" class="has-tip" tooltip-html-unsafe="{{htmlTooltip}}">Check me out!</a>
27 |     </p>
28 | 
29 |     <form role="form">
30 |       <div class="form-group">
31 |         <label>Or use custom triggers, like focus: </label>
32 |         <input type="text" value="Click me!" tooltip="See? Now click away..."  tooltip-trigger="focus" tooltip-placement="right" class="form-control" />
33 |       </div>
34 |     </form>
35 | </div>
36 | 


--------------------------------------------------------------------------------
/src/tooltip/docs/demo.js:
--------------------------------------------------------------------------------
1 | angular.module('foundationDemoApp').controller('TooltipDemoCtrl', function ($scope) {
2 |   $scope.dynamicTooltip = "Hello, World!";
3 |   $scope.dynamicTooltipText = "dynamic";
4 |   $scope.htmlTooltip = "I've been made <b>bold</b>!";
5 | });
6 | 


--------------------------------------------------------------------------------
/src/tooltip/docs/readme.md:
--------------------------------------------------------------------------------
 1 | A lightweight, extensible directive for fancy tooltip creation. The tooltip
 2 | directive supports multiple placements, optional transition animation, and more.
 3 | 
 4 | There are two versions of the tooltip: `tooltip` and `tooltip-html-unsafe`. The
 5 | former takes text only and will escape any HTML provided. The latter takes
 6 | whatever HTML is provided and displays it in a tooltip; it called "unsafe"
 7 | because the HTML is not sanitized. *The user is responsible for ensuring the
 8 | content is safe to put into the DOM!*
 9 | 
10 | The tooltip directives provide several optional attributes to control how they
11 | will display:
12 | 
13 | - `tooltip-placement`: Where to place it? Defaults to "top", but also accepts
14 |   "bottom", "left", "right".
15 | - `tooltip-animation`: Should it fade in and out? Defaults to "true".
16 | - `tooltip-popup-delay`: For how long should the user have to have the mouse
17 |   over the element before the tooltip shows (in milliseconds)? Defaults to 0.
18 | - `tooltip-trigger`: What should trigger a show of the tooltip?
19 | - `tooltip-append-to-body`: Should the tooltip be appended to `$body` instead of
20 |   the parent element?
21 | 
22 | The tooltip directives require the `$position` service.
23 | 
24 | **Triggers**
25 | 
26 | The following show triggers are supported out of the box, along with their
27 | provided hide triggers:
28 | 
29 | - `mouseenter`: `mouseleave`
30 | - `click`: `click`
31 | - `focus`: `blur`
32 | 
33 | For any non-supported value, the trigger will be used to both show and hide the
34 | tooltip.
35 | 
36 | **$tooltipProvider**
37 | 
38 | Through the `$tooltipProvider`, you can change the way tooltips and popovers
39 | behave by default; the attributes above always take precedence. The following
40 | methods are available:
41 | 
42 | - `setTriggers( obj )`: Extends the default trigger mappings mentioned above
43 |   with mappings of your own. E.g. `{ 'openTrigger': 'closeTrigger' }`.
44 | - `options( obj )`: Provide a set of defaults for certain tooltip and popover
45 |   attributes. Currently supports 'placement', 'animation', 'popupDelay', and
46 |   `appendToBody`. Here are the defaults:
47 | 
48 |   <pre>
49 |   placement: 'top',
50 |   animation: true,
51 |   popupDelay: 0,
52 |   appendToBody: false
53 |   </pre>
54 | 
55 | 


--------------------------------------------------------------------------------
/src/tooltip/test/tooltip2.spec.js:
--------------------------------------------------------------------------------
  1 | describe('tooltip directive', function () {
  2 | 
  3 |   var $rootScope, $compile, $document, $timeout;
  4 | 
  5 |   beforeEach(module('mm.foundation.tooltip'));
  6 |   beforeEach(module('template/tooltip/tooltip-popup.html'));
  7 |   beforeEach(inject(function (_$rootScope_, _$compile_, _$document_, _$timeout_) {
  8 |     $rootScope = _$rootScope_;
  9 |     $compile = _$compile_;
 10 |     $document = _$document_;
 11 |     $timeout = _$timeout_;
 12 |   }));
 13 | 
 14 |   beforeEach(function(){
 15 |     this.addMatchers({
 16 |       toHaveOpenTooltips: function(noOfOpened) {
 17 |         var ttipElements = this.actual.find('span.tooltip');
 18 |         noOfOpened = noOfOpened || 1;
 19 | 
 20 |         this.message = function() {
 21 |           return "Expected '" + angular.mock.dump(ttipElements) + "' to have '" + ttipElements.length + "' opened tooltips.";
 22 |         };
 23 | 
 24 |         return ttipElements.length === noOfOpened;
 25 |       }
 26 |     });
 27 |   });
 28 | 
 29 |   function compileTooltip(ttipMarkup) {
 30 |     var fragment = $compile('<div>'+ttipMarkup+'</div>')($rootScope);
 31 |     $rootScope.$digest();
 32 |     return fragment;
 33 |   }
 34 | 
 35 |   function closeTooltip(hostEl, trigger, shouldNotFlush) {
 36 |     hostEl.trigger(trigger || 'mouseleave' );
 37 |     if (!shouldNotFlush) {
 38 |       $timeout.flush();
 39 |     }
 40 |   }
 41 | 
 42 |   describe('basic scenarios with default options', function () {
 43 | 
 44 |     it('shows default tooltip on mouse enter and closes on mouse leave', function () {
 45 |       var fragment = compileTooltip('<span tooltip="tooltip text">Trigger here</span>');
 46 | 
 47 |       fragment.find('span').trigger( 'mouseenter' );
 48 |       expect(fragment).toHaveOpenTooltips();
 49 | 
 50 |       closeTooltip(fragment.find('span'));
 51 |       expect(fragment).not.toHaveOpenTooltips();
 52 |     });
 53 | 
 54 |     it('should not show a tooltip when its content is empty', function () {
 55 |       var fragment = compileTooltip('<span tooltip=""></span>');
 56 |       fragment.find('span').trigger( 'mouseenter' );
 57 |       expect(fragment).not.toHaveOpenTooltips();
 58 |     });
 59 | 
 60 |     it('should not show a tooltip when its content becomes empty', function () {
 61 | 
 62 |       $rootScope.content = 'some text';
 63 |       var fragment = compileTooltip('<span tooltip="{{ content }}"></span>');
 64 | 
 65 |       fragment.find('span').trigger( 'mouseenter' );
 66 |       expect(fragment).toHaveOpenTooltips();
 67 | 
 68 |       $rootScope.content = '';
 69 |       $rootScope.$digest();
 70 |       $timeout.flush();
 71 |       expect(fragment).not.toHaveOpenTooltips();
 72 |     });
 73 | 
 74 |     it('should update tooltip when its content becomes empty', function () {
 75 |       $rootScope.content = 'some text';
 76 |       var fragment = compileTooltip('<span tooltip="{{ content }}"></span>');
 77 | 
 78 |       $rootScope.content = '';
 79 |       $rootScope.$digest();
 80 | 
 81 |       fragment.find('span').trigger( 'mouseenter' );
 82 |       expect(fragment).not.toHaveOpenTooltips();
 83 |     });
 84 |   });
 85 | 
 86 |   describe('option by option', function () {
 87 | 
 88 |     describe('placement', function () {
 89 | 
 90 |       it('can specify an alternative, valid placement', function () {
 91 |         var fragment = compileTooltip('<span tooltip="tooltip text" tooltip-placement="left">Trigger here</span>');
 92 |         fragment.find('span').trigger( 'mouseenter' );
 93 | 
 94 |         var ttipElement = fragment.find('span.tooltip');
 95 |         expect(fragment).toHaveOpenTooltips();
 96 |         expect(ttipElement).toHaveClass('tip-left');
 97 | 
 98 |         closeTooltip(fragment.find('span'));
 99 |         expect(fragment).not.toHaveOpenTooltips();
100 |       });
101 | 
102 |     });
103 | 
104 |   });
105 | });
106 | 


--------------------------------------------------------------------------------
/src/topbar/docs/demo.html:
--------------------------------------------------------------------------------
 1 | <div ng-controller="TopBarDemoCtrl">
 2 |   <top-bar>
 3 |     <ul class="title-area">
 4 |       <li class="name">
 5 |         <h1><a href="#">My Site</a></h1>
 6 |       </li>
 7 |       <li toggle-top-bar class="menu-icon"><a href="#">Menu</a></li>
 8 |     </ul>
 9 | 
10 |     <top-bar-section>
11 |       <!-- Right Nav Section -->
12 |       <ul class="right">
13 |         <li class="active"><a href="#">Active</a></li>
14 |         <li has-dropdown>
15 |           <a href="#">Dropdown</a>
16 |           <ul top-bar-dropdown>
17 |             <li><a href="#">First link in dropdown</a></li>
18 |           </ul>
19 |         </li>
20 |       </ul>
21 | 
22 |       <!-- Left Nav Section -->
23 |       <ul class="left">
24 |         <li><a href="#">Left</a></li>
25 |       </ul>
26 |     </top-bar-section>
27 |   </top-bar>
28 | </div>


--------------------------------------------------------------------------------
/src/topbar/docs/demo.js:
--------------------------------------------------------------------------------
1 | angular.module('foundationDemoApp').controller('TopBarDemoCtrl', function ($scope) {
2 | 
3 | });
4 | 


--------------------------------------------------------------------------------
/src/topbar/docs/readme.md:
--------------------------------------------------------------------------------
 1 | A directive that provides the [Foundation Top Bar](http://foundation.zurb.com/docs/components/topbar.html) component.
 2 | 
 3 | The directive has virtually identical behavior to Foundation Top Bar. The markup however, is slightly different. The top bar consist of a root ```top-bar``` element with nested ```top-bar-section``` elements that encapsulate menus. The ```title-area``` list is also a direct descendant of the root element. The mobile menu toggle is created by adding the ```toggle-top-bar``` attribute to a ```li``` element inside the title area. Applying ```menu-icon``` class to this element will trigger the icon as determined by the Foundation CSS. ```li``` elements that contain nested menus need to have the ```has-dropdown``` attribute. The nested list itself should have the ```top-bar-dropdown``` attribute.
 4 | 
 5 | The following settings can be applied as attributes to the ```top-bar``` element:
 6 | 
 7 | - `sticky-class`: Class name that will trigger sticky behavior.
 8 | - `custom-back-text`: Set this to false and it will pull the top level link name as the back text.
 9 | - `back-text`: Define what you want your custom back text to be if custom-back-text is set.
10 | - `is-hover`: Toggle drop down menus on hover.
11 | - `mobile-show-parent-link`: will copy parent links into dropdowns for mobile navigation.
12 | - `scrolltop`: jump to top when sticky nav menu toggle is clicked
13 | 
14 | See the demo page for example on how to use this and visit the [Foundation docs](http://foundation.zurb.com/docs/components/topbar.html) for more details.
15 | 


--------------------------------------------------------------------------------
/src/topbar/test/topbar.spec.js:
--------------------------------------------------------------------------------
  1 | describe('topbar directive', function() {
  2 |   var $rootScope, $document, $compile, $window, element, containerElement;
  3 | 
  4 |   beforeEach(function() {
  5 |     $window = angular.extend(window, {
  6 |       pageYOffset: 0,
  7 |       scrollTo: jasmine.createSpy('scrollTo'),
  8 |       matchMedia: jasmine.createSpy('matchMedia').andReturn({matches: false}),
  9 |     });
 10 | 
 11 |     module(
 12 |       'mm.foundation.topbar',
 13 |       'template/topbar/top-bar.html',
 14 |       'template/topbar/has-dropdown.html',
 15 |       'template/topbar/toggle-top-bar.html',
 16 |       'template/topbar/top-bar-section.html',
 17 |       'template/topbar/top-bar-dropdown.html',
 18 |       {$window: $window});
 19 | 
 20 |     inject(function(_$compile_, _$rootScope_, _$document_) {
 21 |       $compile = _$compile_;
 22 |       $rootScope = _$rootScope_;
 23 |       $document = _$document_;
 24 |     });
 25 |   });
 26 | 
 27 |   beforeEach(inject(function ($rootScope) {
 28 |     this.addMatchers({
 29 |       toHaveDropDownsOpen: function(noOfLevels) {
 30 |         var dropDownDomEls = element.find('li.has-dropdown.not-click');
 31 |         return dropDownDomEls.length === noOfLevels;
 32 |       },
 33 |       toHaveMobileMenuOpen: function() {
 34 |         return element.hasClass("expanded");
 35 |       }
 36 |     });
 37 |   }));
 38 | 
 39 |   var setMobile = function() {
 40 |     $window.matchMedia.andReturn({matches: false});
 41 |   };
 42 | 
 43 |   var setDesktop = function() {
 44 |     $window.matchMedia.andReturn({matches: true});
 45 |   };
 46 | 
 47 |   var compileDirective = function(markup) {
 48 |     if (angular.isUndefined(markup)) {
 49 |       markup =
 50 |         '<div class="fixed" id="container">' +
 51 |           '<top-bar scrolltop="false">' +
 52 |             '<ul class="title-area">' +
 53 |               '<li class="name">' +
 54 |                 '<h1><a href="#">My Site</a></h1>' +
 55 |               '</li>' +
 56 |               '<li toggle-top-bar id="menu-toggle" class="menu-icon">' +
 57 |                 '<a href="#">Menu</a>' +
 58 |               '</li>' +
 59 |             '</ul>' +
 60 |             '<top-bar-section id="top-section">' +
 61 |               '<ul class="right">' +
 62 |                 '<li class="active">' +
 63 |                   '<a href="#">Active</a>' +
 64 |                 '</li>' +
 65 |                 '<li has-dropdown>' +
 66 |                   '<a id="dropdown" href="#">Dropdown</a>' +
 67 |                   '<ul top-bar-dropdown>' +
 68 |                     '<li><a id="alink" href="#">First link in dropdown</a></li>' +
 69 |                   '</ul>' +
 70 |                 '</li>' +
 71 |               '</ul>' +
 72 |               '<ul class="left">' +
 73 |                 '<li><a href="#">Left</a></li>' +
 74 |               '</ul>' +
 75 |             '</top-bar-section>' +
 76 |           '</top-bar>' +
 77 |           '<div>Content</div>' +
 78 |         '</div>';
 79 |     }
 80 | 
 81 |     containerElement = $compile(markup)($rootScope);
 82 |     $('body', $document).append(element);
 83 |     $rootScope.$digest();
 84 |     element = containerElement.find("nav");
 85 |   };
 86 | 
 87 |   describe("basic behavior", function() {
 88 |     beforeEach(function() {
 89 |       compileDirective();
 90 |     });
 91 | 
 92 |     it('has a "top-bar" css class', function() {
 93 |       expect(element).toHaveClass('top-bar');
 94 |     });
 95 | 
 96 |     it('has a drop down open on large screen', inject(function($window) {
 97 |       setDesktop();
 98 |       $('#dropdown', element).trigger('mouseenter');
 99 |       expect($window.matchMedia).toHaveBeenCalled();
100 |       expect(element).toHaveDropDownsOpen(1);
101 |     }));
102 | 
103 |     it('has no drop downs open on small screen', inject(function($window) {
104 |       setMobile();
105 |       $('#dropdown', element).trigger('mouseenter');
106 |       expect($window.matchMedia).toHaveBeenCalled();
107 |       expect(element).toHaveDropDownsOpen(0);
108 |     }));
109 | 
110 |     it('has no mobile menu opening on large screen', inject(function($window) {
111 |       setDesktop($window);
112 |       $('#menu-toggle', element).trigger('click');
113 |       expect($window.matchMedia).toHaveBeenCalled();
114 |       expect(element).not.toHaveMobileMenuOpen();
115 |     }));
116 | 
117 |     it('opens and closes mobile menu on small screen', inject(function($window) {
118 |       setMobile();
119 |       $('#menu-toggle', element).trigger('click');
120 |       expect($window.matchMedia).toHaveBeenCalled();
121 |       expect(element).toHaveMobileMenuOpen();
122 |       $('#menu-toggle', element).trigger('click');
123 |       expect(element).not.toHaveMobileMenuOpen();
124 |     }));
125 | 
126 |     it('opens the submenu when a dropdown is clicked on mobile', inject(function($window) {
127 |       var topSection = element.find('#top-section');
128 |       var menuToggle = element.find('#menu-toggle');
129 |       setMobile();
130 |       expect(element.hasClass("expanded")).toBe(false);
131 |       menuToggle.trigger('click');
132 |       expect($window.matchMedia).toHaveBeenCalled();
133 |       expect(element.hasClass("expanded")).toBe(true);
134 |     }));
135 |   });
136 | 
137 |   describe("sticky", function() {
138 |     var markup;
139 | 
140 |     beforeEach(function() {
141 |       markup =
142 |         '<div class="sticky">' +
143 |           '<top-bar>' +
144 |             '<ul class="title-area">' +
145 |               '<li class="name">' +
146 |                 '<h1><a href="#">My Site</a></h1>' +
147 |               '</li>' +
148 |               '<li toggle-top-bar id="menu-toggle" class="menu-icon">' +
149 |                 '<a href="#">Menu</a>' +
150 |               '</li>' +
151 |             '</ul>' +
152 |           '</top-bar>' +
153 |         '</div>';
154 |     });
155 | 
156 |     it('does not apply the fixed class on initial load', function() {
157 |       compileDirective(markup);
158 |       expect(containerElement.hasClass('fixed')).toBe(false);
159 |     });
160 |   });
161 | });
162 | 


--------------------------------------------------------------------------------
/src/tour/docs/demo.html:
--------------------------------------------------------------------------------
 1 | <div ng-controller="TourDemoCtrl">
 2 |   <button ng-click="startTour()">Start tour</button>
 3 |   <div class="panel"
 4 |     step-text="Hello, this is the first step of the tour."
 5 |     step-index="1"
 6 |     step-placement="bottom">
 7 |     First tour step points here
 8 |   </div>
 9 |   <div class="panel"
10 |     step-text="This is another step of the tour."
11 |     step-index="2"
12 |     step-placement="right">
13 |     Second tour step points here
14 |   </div>
15 |   <div class="panel"
16 |     step-text="Last step. Finally."
17 |     step-index="3">
18 |     Third tour step points here
19 |   </div>
20 | </div>
21 | 


--------------------------------------------------------------------------------
/src/tour/docs/demo.js:
--------------------------------------------------------------------------------
1 | angular.module('foundationDemoApp').controller('TourDemoCtrl', function ($scope, $tour) {
2 |   $scope.startTour = $tour.start;
3 | });
4 | 


--------------------------------------------------------------------------------
/src/tour/docs/readme.md:
--------------------------------------------------------------------------------
 1 | A `$tour` service to give users of your website or app a tour when they
 2 | visit. It works in conjunction with a `step-text` directive. This is an angular-focused
 3 | refactoring of the [Foundation Joyride](http://foundation.zurb.com/docs/components/joyride.html) component.
 4 | 
 5 | The step directive **requires** the tooltip module and supports multiple
 6 | placements, optional transition animation, and more.
 7 | 
 8 | Required attributes are:
 9 | 
10 | - `step-text`: The text to show in the tour popup when the tour is focused on the element.
11 | - `step-index`: The order in which the tour should focus on the element strting with `1`.
12 | 
13 | The `step-text` directive provides several optional attributes to control how it
14 | will display:
15 | 
16 | - `step-title`: A string to display as a fancy title.
17 | - `step-placement`: Where to place it? Defaults to "top", but also accepts
18 |   "bottom", "left", "right".
19 | - `step-animation`: Should it fade in and out? Defaults to "true".
20 | - `step-popup-delay`: For how long should the user have to have the mouse
21 |   over the element before the step shows (in milliseconds)? Defaults to 0.
22 | - `step-trigger`: What should trigger the show of the step? See the
23 |   `tooltip` directive for supported values.
24 | - `step-append-to-body`: Should the tooltip be appended to `$body` instead of
25 |   the parent element?
26 | 
27 | The step directive requires the `$position` service.
28 | 
29 | The step directive also supports various default configurations through the
30 | $tooltipProvider. See the [tooltip](#tooltip) section for more information.
31 | 
32 | 


--------------------------------------------------------------------------------
/src/tour/test/tour.spec.js:
--------------------------------------------------------------------------------
 1 | describe('tour', function() {
 2 |   var $window,
 3 |       $timeout,
 4 |       $compile,
 5 |       $tour,
 6 |       localStorage,
 7 |       elm,
 8 |       scope;
 9 | 
10 |   beforeEach(function() {
11 |     module('mm.foundation.tour');
12 |     module('template/tour/tour.html');
13 |   });
14 | 
15 |   beforeEach(inject(function($rootScope, _$window_, _$timeout_, _$compile_, _$tour_) {
16 |     $window = _$window_;
17 |     $timeout = _$timeout_;
18 |     localStorage = $window.localStorage;
19 |     $compile = _$compile_;
20 |     $tour = _$tour_;
21 |     scope = $rootScope;
22 | 
23 |     localStorage.removeItem('mm.tour.step');
24 |     spyOn(localStorage, 'getItem');
25 |     spyOn(localStorage, 'setItem');
26 |   }));
27 | 
28 |   function findTourPopup(dom, index) {
29 |     index = index || 1;
30 |     var targetElm = dom.find('[step-index="' + index + '"]');
31 |     return targetElm.next('[step-text-popup]');
32 |   }
33 | 
34 |   describe('basic behavior', function() {
35 |     beforeEach(function() {
36 |       elm = $compile(
37 |         '<div>' +
38 |           '<div step-text="First step content" step-index="1">Step one</div>' +
39 |           '<div step-text="Second step content" step-index="2">Step two</div>' +
40 |         '</div>'
41 |       )(scope);
42 |       scope.$digest();
43 |     });
44 | 
45 |     it('does not start the tour initially', function() {
46 |       expect($tour.isActive()).toBe(false);
47 |     });
48 | 
49 |     describe('when the tour is started', function() {
50 |       beforeEach(function() {
51 |         $tour.start();
52 |         $timeout.flush();
53 |       });
54 | 
55 |       it('is active', function() {
56 |         expect($tour.isActive()).toBe(true);
57 |       });
58 | 
59 |       it('starts on step 1', function() {
60 |         expect($tour.current()).toEqual(1);
61 |       });
62 | 
63 |       it('displays the first step', function() {
64 |         popup = findTourPopup(elm, 1);
65 |         expect(popup.length).toEqual(1);
66 |         expect(popup.html()).toMatch(/first step content/i);
67 |       });
68 | 
69 |       it('increments the step when advancing', function() {
70 |         expect($tour.current()).toEqual(1);
71 |         $tour.next();
72 |         expect($tour.current()).toEqual(2);
73 |       });
74 | 
75 |       it('displays the next step when advancing', function() {
76 |         $tour.next();
77 |         $timeout.flush();
78 |         popup = findTourPopup(elm, 2);
79 |         expect(popup.length).toEqual(1);
80 |         expect(popup.html()).toMatch(/second step content/i);
81 |       });
82 | 
83 |       it("closes the tour when the location changes", function() {
84 |         expect($tour.isActive()).toBe(true);
85 |         scope.$broadcast('$locationChangeSuccess');
86 |         expect($tour.isActive()).toBe(false);
87 |       });
88 |     });
89 |   });
90 | });
91 | 


--------------------------------------------------------------------------------
/src/tour/tour.js:
--------------------------------------------------------------------------------
  1 | angular.module( 'mm.foundation.tour', [ 'mm.foundation.position', 'mm.foundation.tooltip' ] )
  2 | 
  3 | .service( '$tour', [ '$window', function ( $window ) {
  4 |   var currentIndex = getStoredCurrentStep();
  5 |   var ended = false;
  6 |   var steps = {};
  7 | 
  8 |   function getStoredCurrentStep() {
  9 |     try {
 10 |       return parseInt( $window.localStorage.getItem( 'mm.tour.step' ), 10 );
 11 |     } catch(e) {
 12 |       if (e.name !== "SecurityError") {
 13 |         throw e;
 14 |       }
 15 |     }
 16 |   }
 17 | 
 18 |   function storeCurrentStep() {
 19 |     try {
 20 |       $window.localStorage.setItem( 'mm.tour.step', currentIndex );
 21 |     } catch(e) {
 22 |       if (e.name !== "SecurityError") {
 23 |         throw e;
 24 |       }
 25 |     }
 26 |   }
 27 | 
 28 |   function setCurrentStep(step) {
 29 |     currentIndex = step;
 30 |     storeCurrentStep();
 31 |   }
 32 | 
 33 |   this.add = function ( index, attrs ) {
 34 |     steps[ index ] = attrs;
 35 |   };
 36 | 
 37 |   this.has = function ( index ) {
 38 |     return !!steps[ index ];
 39 |   };
 40 | 
 41 |   this.isActive = function () {
 42 |     return currentIndex > 0;
 43 |   };
 44 | 
 45 |   this.current = function ( index ) {
 46 |     if ( index ) {
 47 |       setCurrentStep( currentIndex );
 48 |     } else {
 49 |       return currentIndex;
 50 |     }
 51 |   };
 52 | 
 53 |   this.start = function () {
 54 |     setCurrentStep( 1 );
 55 |   };
 56 | 
 57 |   this.next = function () {
 58 |     setCurrentStep( currentIndex + 1 );
 59 |   };
 60 | 
 61 |   this.end = function () {
 62 |     setCurrentStep( 0 );
 63 |   };
 64 | }])
 65 | 
 66 | .directive( 'stepTextPopup', ['$tour', function ( $tour ) {
 67 |   return {
 68 |     restrict: 'EA',
 69 |     replace: true,
 70 |     scope: { title: '@', content: '@', placement: '@', animation: '&', isOpen: '&' },
 71 |     templateUrl: 'template/tour/tour.html',
 72 |     link: function (scope, element) {
 73 |       scope.isLastStep = function () {
 74 |         return !$tour.has( $tour.current() + 1 );
 75 |       };
 76 | 
 77 |       scope.endTour = function () {
 78 |         element.remove();
 79 |         $tour.end();
 80 |       };
 81 | 
 82 |       scope.nextStep = function () {
 83 |         element.remove();
 84 |         $tour.next();
 85 |       };
 86 | 
 87 |       scope.$on('$locationChangeSuccess', scope.endTour);
 88 |     }
 89 |   };
 90 | }])
 91 | 
 92 | .directive( 'stepText', [ '$position', '$tooltip', '$tour', '$window', function ( $position, $tooltip, $tour, $window ) {
 93 |   function isElementInViewport( element ) {
 94 |     var rect = element[0].getBoundingClientRect();
 95 | 
 96 |     return (
 97 |       rect.top >= 0 &&
 98 |       rect.left >= 0 &&
 99 |       rect.bottom <= ($window.innerHeight - 80) &&
100 |       rect.right <= $window.innerWidth
101 |     );
102 |   }
103 | 
104 |   function show( scope, element, attrs ) {
105 |     var index = parseInt( attrs.stepIndex, 10);
106 | 
107 |     if ( $tour.isActive() && index ) {
108 |       $tour.add( index, attrs );
109 | 
110 |       if ( index === $tour.current() ) {
111 |         if ( !isElementInViewport( element ) ) {
112 |           var offset = $position.offset( element );
113 |           $window.scrollTo( 0, offset.top - $window.innerHeight / 2 );
114 |         }
115 | 
116 |         return true;
117 |       }
118 |     }
119 | 
120 |     return false;
121 |   }
122 | 
123 |   return $tooltip( 'stepText', 'step', show );
124 | }]);
125 | 


--------------------------------------------------------------------------------
/src/transition/test/transition.spec.js:
--------------------------------------------------------------------------------
  1 | 
  2 | describe('$transition', function() {
  3 | 
  4 |   // Work out if we are running IE
  5 |   var ie = (function(){
  6 |       var v = 3,
  7 |           div = document.createElement('div'),
  8 |           all = div.getElementsByTagName('i');
  9 |       do {
 10 |         div.innerHTML = '<!--[if gt IE ' + (++v) + ']><i></i><![endif]-->';
 11 |       } while(all[0]);
 12 |       return v > 4 ? v : undefined;
 13 |   }());
 14 | 
 15 |   var $transition, $timeout;
 16 | 
 17 |   beforeEach(module('mm.foundation.transition'));
 18 | 
 19 |   beforeEach(inject(function(_$transition_, _$timeout_) {
 20 |     $transition = _$transition_;
 21 |     $timeout = _$timeout_;
 22 |   }));
 23 | 
 24 |   it('returns our custom promise', function() {
 25 |     var element = angular.element('<div></div>');
 26 |     var promise = $transition(element, '');
 27 |     expect(promise.then).toEqual(jasmine.any(Function));
 28 |     expect(promise.cancel).toEqual(jasmine.any(Function));
 29 |   });
 30 | 
 31 |   it('changes the css if passed a string', function() {
 32 |     var element = angular.element('<div></div>');
 33 |     spyOn(element, 'addClass');
 34 |     $transition(element, 'triggerClass');
 35 |     $timeout.flush();
 36 | 
 37 |     expect(element.addClass).toHaveBeenCalledWith('triggerClass');
 38 |   });
 39 | 
 40 |   it('changes the style if passed an object', function() {
 41 |     var element = angular.element('<div></div>');
 42 |     var triggerStyle = { height: '11px' };
 43 |     spyOn(element, 'css');
 44 |     $transition(element, triggerStyle);
 45 |     $timeout.flush();
 46 |     expect(element.css).toHaveBeenCalledWith(triggerStyle);
 47 |   });
 48 | 
 49 |   it('calls the function if passed', function() {
 50 |     var element = angular.element('<div></div>');
 51 |     var triggerFunction = jasmine.createSpy('triggerFunction');
 52 |     $transition(element, triggerFunction);
 53 |     $timeout.flush();
 54 |     expect(triggerFunction).toHaveBeenCalledWith(element);
 55 |   });
 56 | 
 57 |   // Versions of Internet Explorer before version 10 do not have CSS transitions
 58 |   if ( !ie  || ie > 9 ) {
 59 |     describe('transitionEnd event', function() {
 60 |       var element, triggerTransitionEnd;
 61 | 
 62 |       beforeEach(function() {
 63 |         element = angular.element('<div></div>');
 64 |         // Mock up the element.bind method
 65 |         spyOn(element, 'bind').andCallFake(function(element, handler) {
 66 |           // Store the handler to be used to simulate the end of the transition later
 67 |           triggerTransitionEnd = handler;
 68 |         });
 69 |         // Mock up the element.unbind method
 70 |         spyOn(element, 'unbind');
 71 |       });
 72 | 
 73 |       describe('transitionEndEventName', function() {
 74 |         it('should be a string ending with transitionend', function() {
 75 |           expect($transition.transitionEndEventName).toMatch(/transitionend$/i);
 76 |         });
 77 |       });
 78 | 
 79 |       describe('animationEndEventName', function() {
 80 |         it('should be a string ending with animationend', function() {
 81 |           expect($transition.animationEndEventName).toMatch(/animationend$/i);
 82 |         });
 83 |       });
 84 | 
 85 |       it('binds a transitionEnd handler to the element', function() {
 86 |         $transition(element, '');
 87 |         expect(element.bind).toHaveBeenCalledWith($transition.transitionEndEventName, jasmine.any(Function));
 88 |       });
 89 | 
 90 |       it('binds an animationEnd handler to the element if option is given', function() {
 91 |         $transition(element, '', {animation: true});
 92 |         expect(element.bind).toHaveBeenCalledWith($transition.animationEndEventName, jasmine.any(Function));
 93 |       });
 94 | 
 95 |       it('resolves the promise when the transitionEnd is triggered', function() {
 96 |         var resolutionHandler = jasmine.createSpy('resolutionHandler');
 97 | 
 98 |         // Run the transition
 99 |         $transition(element, '').then(resolutionHandler);
100 | 
101 |         // Simulate the end of transition event
102 |         triggerTransitionEnd();
103 |         $timeout.flush();
104 | 
105 |         expect(resolutionHandler).toHaveBeenCalledWith(element);
106 |       });
107 | 
108 |       it('rejects the promise if transition is cancelled', function() {
109 |         var rejectionHandler = jasmine.createSpy('rejectionHandler');
110 | 
111 |         var promise = $transition(element, '');
112 |         promise.then(null, rejectionHandler);
113 | 
114 |         promise.cancel();
115 |         inject(function($rootScope) {
116 |           $rootScope.$digest();
117 |         });
118 |         expect(rejectionHandler).toHaveBeenCalledWith(jasmine.any(String));
119 |         expect(element.unbind).toHaveBeenCalledWith($transition.transitionEndEventName, jasmine.any(Function));
120 |       });
121 |     });
122 |   } else {
123 | 
124 |     describe('transitionEndEventName', function() {
125 |       it('should be undefined', function() {
126 |         expect($transition.transitionEndEventName).not.toBeDefined();
127 |       });
128 |     });
129 | 
130 |     it('does not bind a transitionEnd handler to the element', function() {
131 |       var element = angular.element('<div></div>');
132 |       spyOn(element, 'bind');
133 |       $transition(element, '');
134 |       expect(element.bind).not.toHaveBeenCalledWith($transition.transitionEndEventName, jasmine.any(Function));
135 |     });
136 | 
137 |     it('resolves the promise', function() {
138 |       var element = angular.element('<div></div>');
139 |       var transitionEndHandler = jasmine.createSpy('transitionEndHandler');
140 |       $transition(element, '').then(transitionEndHandler);
141 |       $timeout.flush();
142 |       expect(transitionEndHandler).toHaveBeenCalledWith(element);
143 |     });
144 | 
145 |   }
146 | });
147 | 
148 | 


--------------------------------------------------------------------------------
/src/transition/transition.js:
--------------------------------------------------------------------------------
 1 | angular.module('mm.foundation.transition', [])
 2 | 
 3 | /**
 4 |  * $transition service provides a consistent interface to trigger CSS 3 transitions and to be informed when they complete.
 5 |  * @param  {DOMElement} element  The DOMElement that will be animated.
 6 |  * @param  {string|object|function} trigger  The thing that will cause the transition to start:
 7 |  *   - As a string, it represents the css class to be added to the element.
 8 |  *   - As an object, it represents a hash of style attributes to be applied to the element.
 9 |  *   - As a function, it represents a function to be called that will cause the transition to occur.
10 |  * @return {Promise}  A promise that is resolved when the transition finishes.
11 |  */
12 | .factory('$transition', ['$q', '$timeout', '$rootScope', function($q, $timeout, $rootScope) {
13 | 
14 |   var $transition = function(element, trigger, options) {
15 |     options = options || {};
16 |     var deferred = $q.defer();
17 |     var endEventName = $transition[options.animation ? "animationEndEventName" : "transitionEndEventName"];
18 | 
19 |     var transitionEndHandler = function(event) {
20 |       $rootScope.$apply(function() {
21 |         element.unbind(endEventName, transitionEndHandler);
22 |         deferred.resolve(element);
23 |       });
24 |     };
25 | 
26 |     if (endEventName) {
27 |       element.bind(endEventName, transitionEndHandler);
28 |     }
29 | 
30 |     // Wrap in a timeout to allow the browser time to update the DOM before the transition is to occur
31 |     $timeout(function() {
32 |       if ( angular.isString(trigger) ) {
33 |         element.addClass(trigger);
34 |       } else if ( angular.isFunction(trigger) ) {
35 |         trigger(element);
36 |       } else if ( angular.isObject(trigger) ) {
37 |         element.css(trigger);
38 |       }
39 |       //If browser does not support transitions, instantly resolve
40 |       if ( !endEventName ) {
41 |         deferred.resolve(element);
42 |       }
43 |     });
44 | 
45 |     // Add our custom cancel function to the promise that is returned
46 |     // We can call this if we are about to run a new transition, which we know will prevent this transition from ending,
47 |     // i.e. it will therefore never raise a transitionEnd event for that transition
48 |     deferred.promise.cancel = function() {
49 |       if ( endEventName ) {
50 |         element.unbind(endEventName, transitionEndHandler);
51 |       }
52 |       deferred.reject('Transition cancelled');
53 |     };
54 | 
55 |     return deferred.promise;
56 |   };
57 | 
58 |   // Work out the name of the transitionEnd event
59 |   var transElement = document.createElement('trans');
60 |   var transitionEndEventNames = {
61 |     'WebkitTransition': 'webkitTransitionEnd',
62 |     'MozTransition': 'transitionend',
63 |     'OTransition': 'oTransitionEnd',
64 |     'transition': 'transitionend'
65 |   };
66 |   var animationEndEventNames = {
67 |     'WebkitTransition': 'webkitAnimationEnd',
68 |     'MozTransition': 'animationend',
69 |     'OTransition': 'oAnimationEnd',
70 |     'transition': 'animationend'
71 |   };
72 |   function findEndEventName(endEventNames) {
73 |     for (var name in endEventNames){
74 |       if (transElement.style[name] !== undefined) {
75 |         return endEventNames[name];
76 |       }
77 |     }
78 |   }
79 |   $transition.transitionEndEventName = findEndEventName(transitionEndEventNames);
80 |   $transition.animationEndEventName = findEndEventName(animationEndEventNames);
81 |   return $transition;
82 | }]);
83 | 


--------------------------------------------------------------------------------
/src/typeahead/docs/demo.html:
--------------------------------------------------------------------------------
 1 | <script type="text/ng-template" id="customTemplate.html">
 2 |   <a>
 3 |       <img ng-src="http://upload.wikimedia.org/wikipedia/commons/thumb/{{match.model.flag}}" width="16">
 4 |       <span bind-html-unsafe="match.label | typeaheadHighlight:query"></span>
 5 |   </a>
 6 | </script>
 7 | <div class='container-fluid' ng-controller="TypeaheadCtrl">
 8 | 
 9 |     <h4>Static arrays</h4>
10 |     <pre>Model: {{selected | json}}</pre>
11 |     <input type="text" ng-model="selected" typeahead="state for state in states | filter:$viewValue | limitTo:8" class="form-control">
12 | 
13 |     <h4>Asynchronous results</h4>
14 |     <pre>Model: {{asyncSelected | json}}</pre>
15 |     <input type="text" ng-model="asyncSelected" placeholder="Locations loaded via $http" typeahead="address for address in getLocation($viewValue)" typeahead-loading="loadingLocations" class="form-control">
16 |     <i ng-show="loadingLocations" class="glyphicon glyphicon-refresh"></i>
17 | 
18 |     <h4>Custom templates for results</h4>
19 |     <pre>Model: {{customSelected | json}}</pre>
20 |     <input type="text" ng-model="customSelected" placeholder="Custom template" typeahead="state as state.name for state in statesWithFlags | filter:{name:$viewValue}" typeahead-template-url="customTemplate.html" class="form-control">
21 | </div>
22 | 


--------------------------------------------------------------------------------
/src/typeahead/docs/demo.js:
--------------------------------------------------------------------------------
 1 | angular.module('foundationDemoApp').controller('TypeaheadCtrl', function($scope, $http) {
 2 | 
 3 |   $scope.selected = undefined;
 4 |   $scope.states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California', 'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii', 'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana', 'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire', 'New Jersey', 'New Mexico', 'New York', 'North Dakota', 'North Carolina', 'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island', 'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont', 'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'];
 5 |   // Any function returning a promise object can be used to load values asynchronously
 6 |   $scope.getLocation = function(val) {
 7 |     return $http.get('http://maps.googleapis.com/maps/api/geocode/json', {
 8 |       params: {
 9 |         address: val,
10 |         sensor: false
11 |       }
12 |     }).then(function(res){
13 |       var addresses = [];
14 |       angular.forEach(res.data.results, function(item){
15 |         addresses.push(item.formatted_address);
16 |       });
17 |       return addresses;
18 |     });
19 |   };
20 | 
21 |   $scope.statesWithFlags = [{"name":"Alabama","flag":"5/5c/Flag_of_Alabama.svg/45px-Flag_of_Alabama.svg.png"},{"name":"Alaska","flag":"e/e6/Flag_of_Alaska.svg/43px-Flag_of_Alaska.svg.png"},{"name":"Arizona","flag":"9/9d/Flag_of_Arizona.svg/45px-Flag_of_Arizona.svg.png"},{"name":"Arkansas","flag":"9/9d/Flag_of_Arkansas.svg/45px-Flag_of_Arkansas.svg.png"},{"name":"California","flag":"0/01/Flag_of_California.svg/45px-Flag_of_California.svg.png"},{"name":"Colorado","flag":"4/46/Flag_of_Colorado.svg/45px-Flag_of_Colorado.svg.png"},{"name":"Connecticut","flag":"9/96/Flag_of_Connecticut.svg/39px-Flag_of_Connecticut.svg.png"},{"name":"Delaware","flag":"c/c6/Flag_of_Delaware.svg/45px-Flag_of_Delaware.svg.png"},{"name":"Florida","flag":"f/f7/Flag_of_Florida.svg/45px-Flag_of_Florida.svg.png"},{"name":"Georgia","flag":"5/54/Flag_of_Georgia_%28U.S._state%29.svg/46px-Flag_of_Georgia_%28U.S._state%29.svg.png"},{"name":"Hawaii","flag":"e/ef/Flag_of_Hawaii.svg/46px-Flag_of_Hawaii.svg.png"},{"name":"Idaho","flag":"a/a4/Flag_of_Idaho.svg/38px-Flag_of_Idaho.svg.png"},{"name":"Illinois","flag":"0/01/Flag_of_Illinois.svg/46px-Flag_of_Illinois.svg.png"},{"name":"Indiana","flag":"a/ac/Flag_of_Indiana.svg/45px-Flag_of_Indiana.svg.png"},{"name":"Iowa","flag":"a/aa/Flag_of_Iowa.svg/44px-Flag_of_Iowa.svg.png"},{"name":"Kansas","flag":"d/da/Flag_of_Kansas.svg/46px-Flag_of_Kansas.svg.png"},{"name":"Kentucky","flag":"8/8d/Flag_of_Kentucky.svg/46px-Flag_of_Kentucky.svg.png"},{"name":"Louisiana","flag":"e/e0/Flag_of_Louisiana.svg/46px-Flag_of_Louisiana.svg.png"},{"name":"Maine","flag":"3/35/Flag_of_Maine.svg/45px-Flag_of_Maine.svg.png"},{"name":"Maryland","flag":"a/a0/Flag_of_Maryland.svg/45px-Flag_of_Maryland.svg.png"},{"name":"Massachusetts","flag":"f/f2/Flag_of_Massachusetts.svg/46px-Flag_of_Massachusetts.svg.png"},{"name":"Michigan","flag":"b/b5/Flag_of_Michigan.svg/45px-Flag_of_Michigan.svg.png"},{"name":"Minnesota","flag":"b/b9/Flag_of_Minnesota.svg/46px-Flag_of_Minnesota.svg.png"},{"name":"Mississippi","flag":"4/42/Flag_of_Mississippi.svg/45px-Flag_of_Mississippi.svg.png"},{"name":"Missouri","flag":"5/5a/Flag_of_Missouri.svg/46px-Flag_of_Missouri.svg.png"},{"name":"Montana","flag":"c/cb/Flag_of_Montana.svg/45px-Flag_of_Montana.svg.png"},{"name":"Nebraska","flag":"4/4d/Flag_of_Nebraska.svg/46px-Flag_of_Nebraska.svg.png"},{"name":"Nevada","flag":"f/f1/Flag_of_Nevada.svg/45px-Flag_of_Nevada.svg.png"},{"name":"New Hampshire","flag":"2/28/Flag_of_New_Hampshire.svg/45px-Flag_of_New_Hampshire.svg.png"},{"name":"New Jersey","flag":"9/92/Flag_of_New_Jersey.svg/45px-Flag_of_New_Jersey.svg.png"},{"name":"New Mexico","flag":"c/c3/Flag_of_New_Mexico.svg/45px-Flag_of_New_Mexico.svg.png"},{"name":"New York","flag":"1/1a/Flag_of_New_York.svg/46px-Flag_of_New_York.svg.png"},{"name":"North Carolina","flag":"b/bb/Flag_of_North_Carolina.svg/45px-Flag_of_North_Carolina.svg.png"},{"name":"North Dakota","flag":"e/ee/Flag_of_North_Dakota.svg/38px-Flag_of_North_Dakota.svg.png"},{"name":"Ohio","flag":"4/4c/Flag_of_Ohio.svg/46px-Flag_of_Ohio.svg.png"},{"name":"Oklahoma","flag":"6/6e/Flag_of_Oklahoma.svg/45px-Flag_of_Oklahoma.svg.png"},{"name":"Oregon","flag":"b/b9/Flag_of_Oregon.svg/46px-Flag_of_Oregon.svg.png"},{"name":"Pennsylvania","flag":"f/f7/Flag_of_Pennsylvania.svg/45px-Flag_of_Pennsylvania.svg.png"},{"name":"Rhode Island","flag":"f/f3/Flag_of_Rhode_Island.svg/32px-Flag_of_Rhode_Island.svg.png"},{"name":"South Carolina","flag":"6/69/Flag_of_South_Carolina.svg/45px-Flag_of_South_Carolina.svg.png"},{"name":"South Dakota","flag":"1/1a/Flag_of_South_Dakota.svg/46px-Flag_of_South_Dakota.svg.png"},{"name":"Tennessee","flag":"9/9e/Flag_of_Tennessee.svg/46px-Flag_of_Tennessee.svg.png"},{"name":"Texas","flag":"f/f7/Flag_of_Texas.svg/45px-Flag_of_Texas.svg.png"},{"name":"Utah","flag":"f/f6/Flag_of_Utah.svg/45px-Flag_of_Utah.svg.png"},{"name":"Vermont","flag":"4/49/Flag_of_Vermont.svg/46px-Flag_of_Vermont.svg.png"},{"name":"Virginia","flag":"4/47/Flag_of_Virginia.svg/44px-Flag_of_Virginia.svg.png"},{"name":"Washington","flag":"5/54/Flag_of_Washington.svg/46px-Flag_of_Washington.svg.png"},{"name":"West Virginia","flag":"2/22/Flag_of_West_Virginia.svg/46px-Flag_of_West_Virginia.svg.png"},{"name":"Wisconsin","flag":"2/22/Flag_of_Wisconsin.svg/45px-Flag_of_Wisconsin.svg.png"},{"name":"Wyoming","flag":"b/bc/Flag_of_Wyoming.svg/43px-Flag_of_Wyoming.svg.png"}];
22 | });


--------------------------------------------------------------------------------
/src/typeahead/docs/readme.md:
--------------------------------------------------------------------------------
 1 | Typeahead is a AngularJS version of [Bootstrap v2's typeahead plugin](http://getbootstrap.com/2.3.2/javascript.html#typeahead).
 2 | This directive can be used to quickly create elegant typeaheads with any form text input.
 3 | 
 4 | It is very well integrated into AngularJS as it uses a subset of the
 5 | [select directive](http://docs.angularjs.org/api/ng.directive:select) syntax, which is very flexible. Supported expressions are:
 6 | 
 7 | * _label_ for _value_ in _sourceArray_
 8 | * _select_ as _label_ for _value_ in _sourceArray_
 9 | 
10 | The `sourceArray` expression can use a special `$viewValue` variable that corresponds to the value entered inside the input.
11 | 
12 | This directive works with promises, meaning you can retrieve matches using the `$http` service with minimal effort.
13 | 
14 | The typeahead directives provide several attributes:
15 | 
16 | * `ng-model` <i class="glyphicon glyphicon-eye-open"></i>
17 |    :
18 |    Assignable angular expression to data-bind to
19 | 
20 | * `typeahead` <i class="glyphicon glyphicon-eye-open"></i>
21 |    :
22 |    Comprehension Angular expression (see [select directive](http://docs.angularjs.org/api/ng.directive:select))
23 | 
24 | * `typeahead-editable` <i class="glyphicon glyphicon-eye-open"></i>
25 |    _(Defaults: true)_ :
26 |    Should it restrict model values to the ones selected from the popup only ?
27 | 
28 | * `typeahead-input-formatter` <i class="glyphicon glyphicon-eye-open"></i>
29 |    _(Defaults: undefined)_ :
30 |    Format the ng-model result after selection
31 | 
32 | * `typeahead-loading` <i class="glyphicon glyphicon-eye-open"></i>
33 |    _(Defaults: angular.noop)_ :
34 |    Binding to a variable that indicates if matches are being retrieved asynchronously
35 | 
36 | * `typeahead-min-length` <i class="glyphicon glyphicon-eye-open"></i>
37 |    _(Defaults: 1)_ :
38 |    Minimal no of characters that needs to be entered before typeahead kicks-in
39 | 
40 | * `typeahead-on-select` <i class="glyphicon glyphicon-eye-open"></i>
41 |    _(Defaults: null)_ :
42 |    A callback executed when a match is selected
43 | 
44 | * `typeahead-template-url` <i class="glyphicon glyphicon-eye-open"></i>
45 |    :
46 |    Set custom item template
47 | 
48 | * `typeahead-wait-ms` <i class="glyphicon glyphicon-eye-open"></i>
49 |    _(Defaults: 0)_ :
50 |    Minimal wait time after last character typed before typeahead kicks-in
51 | 
52 | * `typeahead-focus-first` <i class="glyphicon glyphicon-eye-open"></i>
53 |    _(Defaults: true)_ :
54 |    Should the first match automatically be focused?
55 | 


--------------------------------------------------------------------------------
/src/typeahead/test/typeahead-highlight.spec.js:
--------------------------------------------------------------------------------
 1 | describe('typeaheadHighlight', function () {
 2 | 
 3 |   var highlightFilter;
 4 | 
 5 |   beforeEach(module('mm.foundation.typeahead'));
 6 |   beforeEach(inject(function (typeaheadHighlightFilter) {
 7 |     highlightFilter = typeaheadHighlightFilter;
 8 |   }));
 9 | 
10 |   it('should higlight a match', function () {
11 |     expect(highlightFilter('before match after', 'match')).toEqual('before <strong>match</strong> after');
12 |   });
13 | 
14 |   it('should higlight a match with mixed case', function () {
15 |     expect(highlightFilter('before MaTch after', 'match')).toEqual('before <strong>MaTch</strong> after');
16 |   });
17 | 
18 |   it('should higlight all matches', function () {
19 |     expect(highlightFilter('before MaTch after match', 'match')).toEqual('before <strong>MaTch</strong> after <strong>match</strong>');
20 |   });
21 | 
22 |   it('should do nothing if no match', function () {
23 |     expect(highlightFilter('before match after', 'nomatch')).toEqual('before match after');
24 |   });
25 | 
26 |   it('should do nothing if no or empty query', function () {
27 |     expect(highlightFilter('before match after', '')).toEqual('before match after');
28 |     expect(highlightFilter('before match after', null)).toEqual('before match after');
29 |     expect(highlightFilter('before match after', undefined)).toEqual('before match after');
30 |   });
31 | 
32 |   it('issue 316 - should work correctly for regexp reserved words', function () {
33 |     expect(highlightFilter('before (match after', '(match')).toEqual('before <strong>(match</strong> after');
34 |   });
35 | });
36 | 


--------------------------------------------------------------------------------
/src/typeahead/test/typeahead-parser.spec.js:
--------------------------------------------------------------------------------
 1 | describe('syntax parser', function () {
 2 | 
 3 |   var typeaheadParser, scope, filterFilter;
 4 | 
 5 |   beforeEach(module('mm.foundation.typeahead'));
 6 |   beforeEach(inject(function (_$rootScope_, _filterFilter_, _typeaheadParser_) {
 7 |     typeaheadParser = _typeaheadParser_;
 8 |     scope = _$rootScope_;
 9 |     filterFilter = _filterFilter_;
10 |   }));
11 | 
12 |   it('should parse the simplest array-based syntax', function () {
13 |     scope.states = ['Alabama', 'California', 'Delaware'];
14 |     var result = typeaheadParser.parse('state for state in states | filter:$viewValue');
15 | 
16 |     var itemName = result.itemName;
17 |     var locals = {$viewValue:'al'};
18 |     expect(result.source(scope, locals)).toEqual(['Alabama', 'California']);
19 | 
20 |     locals[itemName] = 'Alabama';
21 |     expect(result.viewMapper(scope, locals)).toEqual('Alabama');
22 |     expect(result.modelMapper(scope, locals)).toEqual('Alabama');
23 |   });
24 | 
25 |   it('should parse the simplest function-based syntax', function () {
26 |     scope.getStates = function ($viewValue) {
27 |       return filterFilter(['Alabama', 'California', 'Delaware'], $viewValue);
28 |     };
29 |     var result = typeaheadParser.parse('state for state in getStates($viewValue)');
30 | 
31 |     var itemName = result.itemName;
32 |     var locals = {$viewValue:'al'};
33 |     expect(result.source(scope, locals)).toEqual(['Alabama', 'California']);
34 | 
35 |     locals[itemName] = 'Alabama';
36 |     expect(result.viewMapper(scope, locals)).toEqual('Alabama');
37 |     expect(result.modelMapper(scope, locals)).toEqual('Alabama');
38 |   });
39 | 
40 |   it('should allow to specify custom model mapping that is used as a label as well', function () {
41 | 
42 |     scope.states = [
43 |       {code:'AL', name:'Alabama'},
44 |       {code:'CA', name:'California'},
45 |       {code:'DE', name:'Delaware'}
46 |     ];
47 |     var result = typeaheadParser.parse("state.name for state in states | filter:$viewValue | orderBy:'name':true");
48 | 
49 |     var itemName = result.itemName;
50 |     expect(itemName).toEqual('state');
51 |     expect(result.source(scope, {$viewValue:'al'})).toEqual([
52 |       {code:'CA', name:'California'},
53 |       {code:'AL', name:'Alabama'}
54 |     ]);
55 | 
56 |     var locals = {$viewValue:'al'};
57 |     locals[itemName] = {code:'AL', name:'Alabama'};
58 |     expect(result.viewMapper(scope, locals)).toEqual('Alabama');
59 |     expect(result.modelMapper(scope, locals)).toEqual('Alabama');
60 |   });
61 | 
62 |   it('should allow to specify custom view and model mappers', function () {
63 | 
64 |     scope.states = [
65 |       {code:'AL', name:'Alabama'},
66 |       {code:'CA', name:'California'},
67 |       {code:'DE', name:'Delaware'}
68 |     ];
69 |     var result = typeaheadParser.parse("state.code as state.name + ' ('+state.code+')' for state in states | filter:$viewValue | orderBy:'name':true");
70 | 
71 |     var itemName = result.itemName;
72 |     expect(result.source(scope, {$viewValue:'al'})).toEqual([
73 |       {code:'CA', name:'California'},
74 |       {code:'AL', name:'Alabama'}
75 |     ]);
76 | 
77 |     var locals = {$viewValue:'al'};
78 |     locals[itemName] = {code:'AL', name:'Alabama'};
79 |     expect(result.viewMapper(scope, locals)).toEqual('Alabama (AL)');
80 |     expect(result.modelMapper(scope, locals)).toEqual('AL');
81 |   });
82 | });
83 | 


--------------------------------------------------------------------------------
/src/typeahead/test/typeahead-popup.spec.js:
--------------------------------------------------------------------------------
 1 | describe('typeaheadPopup - result rendering', function () {
 2 | 
 3 |   var scope, $rootScope, $compile;
 4 | 
 5 |   beforeEach(module('mm.foundation.typeahead'));
 6 |   beforeEach(module('template/typeahead/typeahead-popup.html'));
 7 |   beforeEach(module('template/typeahead/typeahead-match.html'));
 8 |   beforeEach(inject(function (_$rootScope_, _$compile_) {
 9 |     $rootScope = _$rootScope_;
10 |     scope = $rootScope.$new();
11 |     $compile = _$compile_;
12 |   }));
13 | 
14 |   it('should render initial results', function () {
15 | 
16 |     scope.matches = ['foo', 'bar', 'baz'];
17 |     scope.active = 1;
18 | 
19 |     var el = $compile("<div><typeahead-popup matches='matches' active='active' select='select(activeIdx)'></typeahead-popup></div>")(scope);
20 |     $rootScope.$digest();
21 | 
22 |     var liElems = el.find('li');
23 |     expect(liElems.length).toEqual(3);
24 |     expect(liElems.eq(0)).not.toHaveClass('active');
25 |     expect(liElems.eq(1)).toHaveClass('active');
26 |     expect(liElems.eq(2)).not.toHaveClass('active');
27 |   });
28 | 
29 |   it('should change active item on mouseenter', function () {
30 | 
31 |     scope.matches = ['foo', 'bar', 'baz'];
32 |     scope.active = 1;
33 | 
34 |     var el = $compile("<div><typeahead-popup matches='matches' active='active' select='select(activeIdx)'></typeahead-popup></div>")(scope);
35 |     $rootScope.$digest();
36 | 
37 |     var liElems = el.find('li');
38 |     expect(liElems.eq(1)).toHaveClass('active');
39 |     expect(liElems.eq(2)).not.toHaveClass('active');
40 | 
41 |     liElems.eq(2).trigger('mouseenter');
42 | 
43 |     expect(liElems.eq(1)).not.toHaveClass('active');
44 |     expect(liElems.eq(2)).toHaveClass('active');
45 |   });
46 | 
47 |   it('should select an item on mouse click', function () {
48 | 
49 |     scope.matches = ['foo', 'bar', 'baz'];
50 |     scope.active = 1;
51 |     $rootScope.select = angular.noop;
52 |     spyOn($rootScope, 'select');
53 | 
54 |     var el = $compile("<div><typeahead-popup matches='matches' active='active' select='select(activeIdx)'></typeahead-popup></div>")(scope);
55 |     $rootScope.$digest();
56 | 
57 |     var liElems = el.find('li');
58 |     liElems.eq(2).find('a').trigger('click');
59 |     expect($rootScope.select).toHaveBeenCalledWith(2);
60 |   });
61 | });
62 | 


--------------------------------------------------------------------------------
/template/accordion/accordion-group.html:
--------------------------------------------------------------------------------
1 | <dd>
2 |   <a ng-click="isOpen = !isOpen" ng-class="{ active: isOpen }"  accordion-transclude="heading">{{heading}}</a>
3 |   <div class="content" ng-class="{ active: isOpen }" ng-transclude></div>
4 | </dd>
5 | 


--------------------------------------------------------------------------------
/template/accordion/accordion.html:
--------------------------------------------------------------------------------
1 | <dl class="accordion" ng-transclude></dl>
2 | 


--------------------------------------------------------------------------------
/template/alert/alert.html:
--------------------------------------------------------------------------------
1 | <div class='alert-box' ng-class='(type || "")'>
2 |   <span ng-transclude></span>
3 |   <a ng-show='closeable' class='close' ng-click='close()'>&times;</a>
4 | </div>
5 | 


--------------------------------------------------------------------------------
/template/modal/backdrop.html:
--------------------------------------------------------------------------------
1 | <div class="reveal-modal-bg fade" ng-class="{in: animate}" ng-click="close($event)" style="display: block"></div>
2 | 


--------------------------------------------------------------------------------
/template/modal/window.html:
--------------------------------------------------------------------------------
1 | <div tabindex="-1" class="reveal-modal fade {{ windowClass }}"
2 |   ng-class="{in: animate}" style="display: block; visibility: visible">
3 |   <div ng-transclude></div>
4 | </div>
5 | 


--------------------------------------------------------------------------------
/template/pagination/pager.html:
--------------------------------------------------------------------------------
1 | <ul class="pagination">
2 |   <li ng-repeat="page in pages" class="arrow" ng-class="{unavailable: page.disabled, left: page.previous, right: page.next}"><a ng-click="selectPage(page.number)">{{page.text}}</a></li>
3 | </ul>
4 | 


--------------------------------------------------------------------------------
/template/pagination/pagination.html:
--------------------------------------------------------------------------------
1 | <ul class="pagination">
2 |   <li ng-repeat="page in pages" ng-class="{arrow: $first || $last, current: page.active, unavailable: page.disabled}"><a ng-click="selectPage(page.number)">{{page.text}}</a></li>
3 | </ul>
4 | 


--------------------------------------------------------------------------------
/template/popover/popover.html:
--------------------------------------------------------------------------------
 1 | <div class="joyride-tip-guide" ng-class="{ in: isOpen(), fade: animation() }">
 2 |   <span class="joyride-nub" ng-class="{
 3 |     bottom: placement === 'top',
 4 |     left: placement === 'right',
 5 |     right: placement === 'left',
 6 |     top: placement === 'bottom'
 7 |   }"></span>
 8 |   <div class="joyride-content-wrapper">
 9 |     <h4 ng-bind="title" ng-show="title"></h4>
10 |     <p ng-bind="content"></p>
11 |   </div>
12 | </div>
13 | 


--------------------------------------------------------------------------------
/template/progressbar/bar.html:
--------------------------------------------------------------------------------
1 | <span class="meter" ng-transclude></span>
2 | 


--------------------------------------------------------------------------------
/template/progressbar/progress.html:
--------------------------------------------------------------------------------
1 | <div class="progress" ng-class="type" ng-transclude></div>
2 | 


--------------------------------------------------------------------------------
/template/progressbar/progressbar.html:
--------------------------------------------------------------------------------
1 | <div class="progress" ng-class="type">
2 |   <span class="meter" ng-transclude></span>
3 | </div>
4 | 


--------------------------------------------------------------------------------
/template/rating/rating.html:
--------------------------------------------------------------------------------
1 | <span ng-mouseleave="reset()">
2 |   <i ng-repeat="r in range" ng-mouseenter="enter($index + 1)" ng-click="rate($index + 1)" class="fa"
3 |     ng-class="$index < val && (r.stateOn || 'fa-star') || (r.stateOff || 'fa-star-o')"></i>
4 | </span>
5 | 


--------------------------------------------------------------------------------
/template/tabs/tab.html:
--------------------------------------------------------------------------------
1 | <dd ng-class="{active: active}">
2 |   <a ng-click="select()" tab-heading-transclude>{{heading}}</a>
3 | </dd>
4 | 


--------------------------------------------------------------------------------
/template/tabs/tabset.html:
--------------------------------------------------------------------------------
 1 | <div class="tabbable">
 2 |   <dl class="tabs" ng-class="{'vertical': vertical}" ng-transclude></dl>
 3 |   <div class="tabs-content" ng-class="{'vertical': vertical}">
 4 |     <div class="content" 
 5 |       ng-repeat="tab in tabs" 
 6 |       ng-class="{active: tab.active}">
 7 |       <div tab-content-transclude="tab"></div>
 8 |     </div>
 9 |   </div>
10 | </div>
11 | 


--------------------------------------------------------------------------------
/template/tooltip/tooltip-html-unsafe-popup.html:
--------------------------------------------------------------------------------
1 | <span class="tooltip tip-{{placement}}"
2 |   ng-class="{ in: isOpen(), fade: animation() }"
3 |   style="width: auto">
4 |   <span bind-html-unsafe="content"></span>
5 |   <span class="nub"></span>
6 | </span>
7 | 


--------------------------------------------------------------------------------
/template/tooltip/tooltip-popup.html:
--------------------------------------------------------------------------------
1 | <span class="tooltip tip-{{placement}}"
2 |   ng-class="{ in: isOpen(), fade: animation() }"
3 |   style="width: auto">
4 |   <span ng-bind="content"></span>
5 |   <span class="nub"></span>
6 | </span>
7 | 


--------------------------------------------------------------------------------
/template/topbar/has-dropdown.html:
--------------------------------------------------------------------------------
1 | <li class="has-dropdown" ng-transclude></li>


--------------------------------------------------------------------------------
/template/topbar/toggle-top-bar.html:
--------------------------------------------------------------------------------
1 | <li class="toggle-topbar menu-icon" ng-transclude></li>


--------------------------------------------------------------------------------
/template/topbar/top-bar-dropdown.html:
--------------------------------------------------------------------------------
1 | <ul class="dropdown" ng-transclude></ul>


--------------------------------------------------------------------------------
/template/topbar/top-bar-section.html:
--------------------------------------------------------------------------------
1 | <section class="top-bar-section" ng-transclude></section>


--------------------------------------------------------------------------------
/template/topbar/top-bar.html:
--------------------------------------------------------------------------------
1 | <nav class="top-bar" ng-transclude></nav>


--------------------------------------------------------------------------------
/template/tour/tour.html:
--------------------------------------------------------------------------------
 1 | <div class="joyride-tip-guide" ng-class="{ in: isOpen(), fade: animation() }">
 2 |   <span class="joyride-nub" ng-class="{
 3 |     bottom: placement === 'top',
 4 |     left: placement === 'right',
 5 |     right: placement === 'left',
 6 |     top: placement === 'bottom'
 7 |   }"></span>
 8 |   <div class="joyride-content-wrapper">
 9 |     <h4 ng-bind="title" ng-show="title"></h4>
10 |     <p ng-bind="content"></p>
11 |     <a class="small button joyride-next-tip" ng-show="!isLastStep()" ng-click="nextStep()">Next</a>
12 |     <a class="small button joyride-next-tip" ng-show="isLastStep()" ng-click="endTour()">End</a>
13 |     <a class="joyride-close-tip" ng-click="endTour()">&times;</a>
14 |   </div>
15 | </div>
16 | 


--------------------------------------------------------------------------------
/template/typeahead/typeahead-match.html:
--------------------------------------------------------------------------------
1 | <a tabindex="-1" bind-html-unsafe="match.label | typeaheadHighlight:query"></a>


--------------------------------------------------------------------------------
/template/typeahead/typeahead-popup.html:
--------------------------------------------------------------------------------
1 | <ul class="f-dropdown" ng-style="{display: isOpen()&&'block' || 'none', top: position.top+'px', left: position.left+'px'}">
2 |     <li ng-repeat="match in matches" ng-class="{active: isActive($index) }" ng-mouseenter="selectActive($index)" ng-click="selectMatch($index)">
3 |         <div typeahead-match index="$index" match="match" query="query" template-url="templateUrl"></div>
4 |     </li>
5 | </ul>
6 | 


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