├── .editorconfig ├── .gitignore ├── .jshintrc ├── .travis.yml ├── CONTRIBUTING.md ├── LICENSE ├── README.md ├── css └── stylesheet.css ├── dist ├── angular-bootstrap-toggle.css ├── angular-bootstrap-toggle.js ├── angular-bootstrap-toggle.min.css └── angular-bootstrap-toggle.min.js ├── gulpfile.js ├── img ├── header.png ├── nyt.png └── nytdev.svg ├── index.html ├── js ├── app.js ├── script.js └── smoothscroll-angular-custom.js ├── karma-dist-concatenated.conf.js ├── karma-dist-minified.conf.js ├── karma-src.conf.js ├── modal.html ├── package-lock.json ├── package.json ├── src ├── angular-bootstrap-toggle.js └── angular-bootstrap-toggle.less └── test └── unit └── angularBootstrapToggleSpec.js /.editorconfig: -------------------------------------------------------------------------------- 1 | # http://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | indent_style = space 6 | indent_size = 2 7 | charset = utf-8 8 | trim_trailing_whitespace = true 9 | insert_final_newline = true 10 | 11 | [*.md] 12 | trim_trailing_whitespace = false 13 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | ._* 2 | .~lock.* 3 | .buildpath 4 | .DS_Store 5 | .idea 6 | .project 7 | .settings 8 | 9 | # Ignore node stuff 10 | node_modules/ 11 | npm-debug.log 12 | libpeerconnection.log 13 | 14 | # OS-specific 15 | .DS_Store 16 | 17 | # Bower components 18 | bower 19 | -------------------------------------------------------------------------------- /.jshintrc: -------------------------------------------------------------------------------- 1 | { 2 | "bitwise": true, 3 | "camelcase": true, 4 | "curly": true, 5 | "eqeqeq": true, 6 | "es3": false, 7 | "forin": true, 8 | "freeze": true, 9 | "immed": true, 10 | "indent": 2, 11 | "latedef": "nofunc", 12 | "newcap": true, 13 | "noarg": true, 14 | "noempty": true, 15 | "nonbsp": true, 16 | "nonew": true, 17 | "plusplus": false, 18 | "quotmark": "single", 19 | "undef": true, 20 | "unused": false, 21 | "strict": false, 22 | "maxparams": 10, 23 | "maxdepth": 5, 24 | "maxstatements": 40, 25 | "maxcomplexity": 11, 26 | "maxlen": 120, 27 | 28 | "asi": false, 29 | "boss": false, 30 | "debug": false, 31 | "eqnull": true, 32 | "esnext": false, 33 | "evil": false, 34 | "expr": false, 35 | "funcscope": false, 36 | "globalstrict": false, 37 | "iterator": false, 38 | "lastsemic": false, 39 | "laxbreak": false, 40 | "laxcomma": false, 41 | "loopfunc": true, 42 | "maxerr": false, 43 | "moz": false, 44 | "multistr": false, 45 | "notypeof": false, 46 | "proto": false, 47 | "scripturl": false, 48 | "shadow": false, 49 | "sub": true, 50 | "supernew": false, 51 | "validthis": false, 52 | "noyield": false, 53 | 54 | "browser": true, 55 | "node": true, 56 | 57 | "globals": { 58 | "angular": false, 59 | "$": false 60 | } 61 | } 62 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - "8" 4 | before_script: 5 | - npm install -g gulp-cli 6 | script: gulp process-all 7 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | ## Got a question or problem? 2 | 3 | Firstly, please go over our FAQ: https://github.com/ziscloud/angular-bootstrap-toggle/wiki/FAQ 4 | 5 | Please, do not open issues for the general support questions as we want to keep GitHub issues for bug reports and feature requests. You've got much better chances of getting your question answered on [StackOverflow](http://stackoverflow.com/questions/tagged/angular-bootstrap-toggle) where maintainers are looking at questions questions tagged with `angular-bootstrap-toggle`. 6 | 7 | StackOverflow is a much better place to ask questions since: 8 | * there are hundreds of people willing to help on StackOverflow 9 | * questions and answers stay available for public viewing so your question / answer might help someone else 10 | * SO voting system assures that the best answers are prominently visible. 11 | 12 | To save your and our time we will be systematically closing all the issues that are requests for general support and redirecting people to StackOverflow. 13 | 14 | ## You think you've found a bug? 15 | 16 | Oh, we are ashamed and want to fix it asap! But before fixing a bug we need to reproduce and confirm it. In order to reproduce bugs we will systematically ask you to provide a _minimal_ reproduce scenario using http://plnkr.co/. Having a live reproduce scenario gives us wealth of important information without going back & forth to you with additional questions like: 17 | * version of AngularJS used 18 | * version of this library that you are using 19 | * 3rd-party libraries used, if any 20 | * and most importantly - a use-case that fails 21 | 22 | A minimal reproduce scenario using http://plnkr.co/ allows us to quickly confirm a bug (or point out coding problem) as well as confirm that we are fixing the right problem. 23 | 24 | We will be insisting on a minimal reproduce scenario in order to save maintainers time and ultimately be able to fix more bugs. Interestingly, from our experience users often find coding problems themselves while preparing a minimal plunk. We understand that sometimes it might be hard to extract essentials bits of code from a larger code-base but we really need to isolate the problem before we can fix it. 25 | 26 | The best part is that you don't need to create plunks from scratch - you can use one from our [demo page](http://ziscloud.github.io/angular-bootstrap-toggle/). 27 | 28 | Unfortunately we are not able to investigate / fix bugs without a minimal reproduce scenario using http://plnkr.co/, so if we don't hear back from you we are going to close an issue that don't have enough info to be reproduced. 29 | 30 | 31 | ## You want to contribute some code? 32 | 33 | **NOTE: We are migrating all our components to use a prefix, in the meantime you will see both the new and the old directives separated by a comment. If you want to contribute with code, make all your changes on top of that comment.** 34 | 35 | We are always looking for the quality contributions and will be happy to accept your Pull Requests as long as those adhere to some basic rules: 36 | 37 | * Please make sure that your contribution fits well in the project's context: 38 | * we are aiming at rebuilding bootstrap directives in pure AngularJS, without any dependencies on any external JavaScript library; 39 | * the only dependency should be bootstrap CSS and its markup structure; 40 | * directives should be html-agnostic as much as possible which in practice means: 41 | * templates should be referred to using the `templateUrl` property 42 | * it should be easy to change a default template to a custom one 43 | * directives shouldn't manipulate DOM structure directly (when possible) 44 | * Please assure that you are submitting quality code, specifically make sure that: 45 | * your directive has accompanying tests and all the tests are passing 46 | * your PR doesn't break the build; check the Travis-CI build status after opening a PR and push corrective commits if anything goes wrong 47 | * your commits conform to the conventions established [here](https://github.com/ajoslin/conventional-changelog/blob/master/conventions/angular.md) 48 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 Tony Wang 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ### Angular Bootstrap Toggle - [AngularJS](http://angularjs.org/) version of [Bootstrap Toggle](http://www.bootstraptoggle.com/) 2 | 3 | [![Gitter](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/ziscloud/angular-bootstrap-toggle?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge) 4 | [![Build Status](https://secure.travis-ci.org/ziscloud/angular-bootstrap-toggle.svg)](http://travis-ci.org/ziscloud/angular-bootstrap-toggle) 5 | [![devDependency Status](https://david-dm.org/ziscloud/angular-bootstrap-toggle/dev-status.svg?branch=master)](https://david-dm.org/ziscloud/angular-bootstrap-toggle#info=devDependencies) 6 | 7 | ### Quick links 8 | - [Demo](#demo) 9 | - [Installation](#installation) 10 | - [Bower](#install-with-bower) 11 | - [Manual](#manual-download) 12 | - [Support](#support) 13 | - [FAQ](#faq) 14 | - [Supported browsers](#supported-browsers) 15 | - [Need help?](#need-help) 16 | - [Found a bug?](#found-a-bug) 17 | - [Contributing to the project](#contributing-to-the-project) 18 | 19 | # Demo 20 | 21 | Do you want to see directive in action? Visit http://ziscloud.github.io/angular-bootstrap-toggle/! 22 | 23 | # Installation 24 | 25 | Installation is easy as UI Bootstrap has minimal dependencies - only the AngularJS and Twitter Bootstrap's CSS are required. 26 | It is strongly recommended you use Angular 1.3+ or higher due to 'Bind Once'. 27 | 28 | #### Install with Bower 29 | ```sh 30 | $ bower install angular-bootstrap-toggle --save 31 | ``` 32 | 33 | ### Adding dependency to your project 34 | 35 | When you are done downloading all the dependencies and project files the only remaining part is to add dependencies on the `ui.toggle` AngularJS module: 36 | 37 | ```js 38 | angular.module('myApp', ['ui.toggle']); 39 | ``` 40 | 41 | If you're a Browserify or Webpack user, you can do: 42 | 43 | ```js 44 | var abt = require('angular-bootstrap-toggle'); 45 | 46 | angular.module('myApp', [abt]); 47 | ``` 48 | 49 | # Support 50 | 51 | ## FAQ 52 | 53 | https://github.com/ziscloud/angular-bootstrap-toggle/wiki/FAQ 54 | 55 | ## Supported browsers 56 | 57 | Directives from this repository are automatically tested with the following browsers: 58 | * Chrome (stable and canary channel) 59 | * Firefox 60 | * IE 9 and 10 61 | * Opera 62 | * Safari 63 | 64 | Modern mobile browsers should work without problems. 65 | 66 | 67 | ## Need help? 68 | Need help using this directive? 69 | 70 | * https://gitter.im/ziscloud/angular-bootstrap-toggle/~chat#share. 71 | * Ask a question in [StackOverflow](http://stackoverflow.com/) under the [angular-bootstrap-toggle](http://stackoverflow.com/questions/tagged/angular-bootstrap-toggle) tag. 72 | 73 | **Please do not create new issues in this repository to ask questions about using UI Bootstrap** 74 | 75 | ## Found a bug? 76 | Please take a look at [CONTRIBUTING.md](CONTRIBUTING.md#you-think-you've-found-a-bug) and submit your issue [here](https://github.com/ziscloud/angular-bootstrap-toggle/issues/new). 77 | 78 | 79 | ---- 80 | 81 | 82 | # Contributing to the project 83 | 84 | We are always looking for the quality contributions! Please check the [CONTRIBUTING.md](CONTRIBUTING.md) for the contribution guidelines. 85 | -------------------------------------------------------------------------------- /css/stylesheet.css: -------------------------------------------------------------------------------- 1 | header, footer { 2 | padding: 20px; 3 | background-image: url('../img/header.png'); 4 | background-size: 256px 256px; 5 | } 6 | footer { 7 | color: #fff; 8 | text-align: center; 9 | } 10 | .nyt-logo { 11 | max-height: 40px; 12 | margin-top: 5px; 13 | margin-right: 5px; 14 | } 15 | 16 | nav.navbar { 17 | margin-bottom: 10px; 18 | background-color: #fff; 19 | border: 0px; 20 | border-radius: 2px; 21 | } 22 | #navbar { 23 | margin: 0px; 24 | } 25 | #navbar .navbar-nav li iframe { 26 | margin-top: 15px; 27 | } 28 | #navbar .navbar-nav li:last-child iframe { 29 | margin-right: 15px; 30 | } 31 | 32 | @media screen and (max-width: 767px) { 33 | #navbar .navbar-nav li iframe { 34 | display: none; 35 | } 36 | } 37 | 38 | .mast-head { 39 | margin: 10px 0; 40 | } 41 | .mast-head h1 { 42 | margin-bottom: 15px; 43 | color: #fff; 44 | } 45 | .mast-head p { 46 | color: #fff; 47 | } 48 | 49 | .mast-links { 50 | padding-top: 10px; 51 | } 52 | 53 | .mast-links > * { 54 | vertical-align: middle; 55 | margin-bottom: 10px; 56 | } 57 | 58 | .mast-links > .btn { 59 | margin-right: 30px; 60 | } 61 | main { 62 | margin: 10px 20px; 63 | } 64 | main .container { 65 | margin-bottom: 40px; 66 | } 67 | 68 | code.hljs { 69 | border: 1px solid #ccc; 70 | padding: 1em; 71 | white-space: pre; 72 | margin-bottom: 10px; 73 | } 74 | 75 | .example { 76 | position: relative; 77 | border: 1px solid #ccc; 78 | padding: 1em 1em 0.5em 1em; 79 | border-radius: 4px 4px 0 0; 80 | } 81 | 82 | .example:after { 83 | content: "Example"; 84 | position: absolute; 85 | top: 0px; 86 | right: 0px; 87 | padding: 3px 7px; 88 | font-size: 12px; 89 | font-weight: bold; 90 | background-color: #f5f5f5; 91 | border: 1px solid #ccc; 92 | color: #9da0a4; 93 | border-radius: 0px 4px 0px 4px; 94 | border-width: 0px 0px 1px 1px; 95 | } 96 | 97 | .example + code.hljs { 98 | border-top: 0; 99 | border-radius: 0px 0px 4px 4px; 100 | } 101 | 102 | .example > * { 103 | margin-bottom: 10px; 104 | } 105 | 106 | .example > div.toggle { 107 | margin-right: 10px; 108 | } 109 | 110 | .table-striped code { 111 | background-color: inherit; 112 | } -------------------------------------------------------------------------------- /dist/angular-bootstrap-toggle.css: -------------------------------------------------------------------------------- 1 | .checkbox label .toggle, 2 | .checkbox-inline .toggle { 3 | margin-left: -20px; 4 | margin-right: 5px; 5 | } 6 | .toggle { 7 | position: relative; 8 | overflow: hidden; 9 | } 10 | .toggle-group { 11 | position: absolute; 12 | width: 200%; 13 | top: 0; 14 | bottom: 0; 15 | left: 0; 16 | transition: left 0.35s; 17 | -webkit-transition: left 0.35s; 18 | -moz-user-select: none; 19 | -webkit-user-select: none; 20 | } 21 | .toggle.off .toggle-group { 22 | left: -100%; 23 | } 24 | .toggle-on { 25 | position: absolute; 26 | top: 0; 27 | bottom: 0; 28 | left: 0; 29 | right: 50%; 30 | margin: 0; 31 | border: 0; 32 | border-radius: 0; 33 | } 34 | .toggle-off { 35 | position: absolute; 36 | top: 0; 37 | bottom: 0; 38 | left: 50%; 39 | right: 0; 40 | margin: 0; 41 | border: 0; 42 | border-radius: 0; 43 | } 44 | .toggle-handle { 45 | position: relative; 46 | margin: 0 auto; 47 | padding-top: 0px; 48 | padding-bottom: 0px; 49 | height: 100%; 50 | width: 0px; 51 | border-width: 0 1px; 52 | } 53 | .toggle-on-pad.btn.btn-lg { 54 | padding-right: 32px; 55 | } 56 | .toggle-off-pad.btn.btn-lg { 57 | padding-left: 32px; 58 | } 59 | .toggle-on-pad.btn { 60 | padding-right: 24px; 61 | } 62 | .toggle-off-pad.btn { 63 | padding-left: 24px; 64 | } 65 | .toggle-on-pad.btn.btn-sm { 66 | padding-right: 20px; 67 | } 68 | .toggle-off-pad.btn.btn-sm { 69 | padding-left: 20px; 70 | } 71 | .toggle-on-pad.btn.btn-xs { 72 | padding-right: 9px; 73 | } 74 | .toggle-off-pad.btn.btn-xs { 75 | padding-left: 9px; 76 | } 77 | -------------------------------------------------------------------------------- /dist/angular-bootstrap-toggle.js: -------------------------------------------------------------------------------- 1 | (function () { 2 | 'use strict'; 3 | angular.module('ui.toggle', []) 4 | .value('$toggleSuppressError', false) 5 | .constant('toggleConfig', 6 | { 7 | /** 8 | * This object defines supported toggle widget attributes and their default values. 9 | * Angular's ngClick and ngDisabled are handled separately. Search code below. 10 | */ 11 | /** 12 | * This version simulates checkbox functionality which can have either true or false value. 13 | * User-defined values are not supported. 14 | */ 15 | 'btnCheckboxFalse': false, 16 | 'btnCheckboxTrue': true, 17 | /** 18 | * Type: string/html 19 | * Default: "On" 20 | * Description: Text of the on toggle 21 | */ 22 | on: 'On', 23 | /** 24 | * Type: string/html 25 | * Default: "Off" 26 | * Description: Text of the off toggle 27 | */ 28 | off: 'Off', 29 | /** 30 | * Type: string 31 | * Default: "" 32 | * Description: Allows to specify one of the standarg bootstrap's button sizes (class). 33 | * Possible values are btn-lg, btn-sm, btn-xs. 34 | */ 35 | size: '', 36 | /** 37 | * Type: string 38 | * Default: "btn-primary" 39 | * Description: Class for "on" state from one of standard bootstrap button types. 40 | * Possible values: btn-default, btn-primary, btn-success, btn-info, btn-warning, btn-danger 41 | */ 42 | onClass: 'btn-primary', 43 | onstyle: '', /* for backward compatibility only */ 44 | /** 45 | * Type: string 46 | * Default: "btn-default" 47 | * Description: Class for "off" state from one of standard bootstrap button types. 48 | * Possible values: btn-default, btn-primary, btn-success, btn-info, btn-warning, btn-danger 49 | */ 50 | offClass: 'btn-default', 51 | offstyle: '', /* for some backward compatibility only */ 52 | /** 53 | * Type: string 54 | * Default: "btn-default" 55 | * Description: Class for little bar from one of standard bootstrap button types. 56 | * Possible values: btn-default, btn-primary, btn-success, btn-info, btn-warning, btn-danger 57 | */ 58 | barClass: 'btn-default', 59 | /** 60 | * Type: JSON string 61 | * Default: "" 62 | * Description: Allows to pass user-defined style to the toggle's first immediate child (first DIV inside 63 | * which is what you actually see as widget's outer container). 64 | * This can be used to alter widget's appearance. Use with caution! Note that "width" and "height" values 65 | * will be overwritten by either auto-calculated values or used-specified values from "width" and "height" 66 | * attributes. 67 | * Example: 68 | */ 69 | toggleStyle: '', 70 | /** 71 | * Type: string 72 | * Default: "" 73 | * Description: Passes a class to the toggle's first immediate child 74 | **/ 75 | toggleClass: '', 76 | style: '', 77 | /** 78 | * Type: string 79 | * Default: "" 80 | * Description: Allows to force width and height to specified value. Use css notation such as 50px, 1%. etc. 81 | * This is useful when you have a group of toggles with different text in the lables and, therefore, 82 | * would never line-up to the same width. 83 | * Example: 84 | */ 85 | width: '', 86 | height: '', 87 | /** 88 | * Type: boolean 89 | * Default: false 90 | * Description: Defines "disabled" attribute for the directive itself. The ng-disabled dirrective 91 | * manipulates this attribute, plus there is additional code that propagates its value to child elements. 92 | * Applying "disabled" to itself apparently does nothing, but when its value is propagated to 93 | * two child