From f97fecfa7a5e1b49cf66bcebb2764e4c5667bbc0 Mon Sep 17 00:00:00 2001 From: thebigh2014 Date: Tue, 7 Oct 2014 12:19:35 -0700 Subject: [PATCH 1/7] Added FontAwesome as a choice for icons; moved src into /src directory; added grunt config and have it generate templates and minified js in /dest directory; updated README.md to include new info; added index-fa.html to demonstrate FontAwesome; bumped version to 0.4.0 --- .jshintrc | 42 ++ Gruntfile.js | 75 ++++ README.md | 8 +- angular-bootstrap-checkbox.js | 76 ---- bower.json | 5 +- ...ular-bootstrap-checkbox-fontawesome-tpl.js | 10 + ...ngular-bootstrap-checkbox-glyphicon-tpl.js | 10 + dist/angular-bootstrap-checkbox.min.js | 1 + index-fa.html | 371 ++++++++++++++++++ index.html | 3 +- package.json | 24 ++ ...ar-bootstrap-checkbox-fontawesome-tpl.html | 3 + ...ular-bootstrap-checkbox-glyphicon-tpl.html | 3 + src/angular-bootstrap-checkbox.js | 79 ++++ 14 files changed, 630 insertions(+), 80 deletions(-) create mode 100644 .jshintrc create mode 100644 Gruntfile.js delete mode 100644 angular-bootstrap-checkbox.js create mode 100644 dist/angular-bootstrap-checkbox-fontawesome-tpl.js create mode 100644 dist/angular-bootstrap-checkbox-glyphicon-tpl.js create mode 100644 dist/angular-bootstrap-checkbox.min.js create mode 100644 index-fa.html create mode 100644 package.json create mode 100644 src/angular-bootstrap-checkbox-fontawesome-tpl.html create mode 100644 src/angular-bootstrap-checkbox-glyphicon-tpl.html create mode 100644 src/angular-bootstrap-checkbox.js diff --git a/.jshintrc b/.jshintrc new file mode 100644 index 0000000..11b940f --- /dev/null +++ b/.jshintrc @@ -0,0 +1,42 @@ +{ + "node": true, + "esnext": true, + "bitwise": true, + "camelcase": true, + "curly": true, + "eqeqeq": true, + "eqnull": true, + "immed": true, + "indent": 2, + "latedef": true, + "newcap": true, + "noarg": true, + "quotmark": "single", + "regexp": true, + "white": false, + "immed": true, + "undef": true, + "latedef": true, // true: Require variables/functions to be defined before being used + "sub": true, // true: Tolerate using `[]` notation when it can still be expressed in dot notation + "boss": true, // true: Tolerate assignments where comparisons would be expected + "node": true, // Node.js + "unused": false, + "strict": false, + "trailing": true, + "smarttabs": true, + "globals": { + "jQuery": true, + "$": true, + "it": true, + "beforeEach": true, + "expect": true, + "element": true, + "browser": true, + "module": true, + "spyOn": true, + "inject": true, + "repeater": true, + "describe": true, + "angular": true + } +} \ No newline at end of file diff --git a/Gruntfile.js b/Gruntfile.js new file mode 100644 index 0000000..3934ba4 --- /dev/null +++ b/Gruntfile.js @@ -0,0 +1,75 @@ +'use_strict'; + +module.exports = function(grunt) { + grunt.initConfig({ + pkg: grunt.file.readJSON('package.json'), + bump: { + options: { + files: ['package.json', 'bower.json'], + commit: false, + push: false, + commitMessage: 'Release v%VERSION%', + commitFiles: ['package.json', 'bower.json'] + } + }, + jshint: { + options: { + jshintrc: '.jshintrc' + }, + src: { + files: { + src: ['src/**/*.js', 'test/**/*.js'] + }, + } + }, + ngtemplates: { + glyphicon: { + src: 'src/*-glyphicon-tpl.html', + dest: 'dist/angular-bootstrap-checkbox-glyphicon-tpl.js', + options: { + module: 'ui.checkbox', + url: function(url) { return url.replace('src/', '').replace('-glyphicon', ''); } + } + }, + fontawesome: { + src: 'src/*-fontawesome-tpl.html', + dest: 'dist/angular-bootstrap-checkbox-fontawesome-tpl.js', + options: { + module: 'ui.checkbox', + url: function(url) { return url.replace('src/', '').replace('-fontawesome', ''); } + } + } + }, + uglify: { + options: { + mangle: true, + compile: true, + compress: true + }, + dist: { + files: { + 'dist/angular-bootstrap-checkbox.min.js': ['src/**/*.js'] + } + } + }, + watch: { + all: { + files: ['Gruntfile.js', 'src/*.js'], + tasks: ['default'], + options: { + livereload: 1676, + } + } + } + }); + + grunt.loadNpmTasks('grunt-contrib-jshint'); + grunt.loadNpmTasks('grunt-contrib-uglify'); + grunt.loadNpmTasks('grunt-contrib-watch'); + grunt.loadNpmTasks('grunt-contrib-clean'); + grunt.loadNpmTasks('grunt-bump'); + grunt.loadNpmTasks('grunt-shell'); + grunt.loadNpmTasks('grunt-angular-templates'); + + grunt.registerTask('default', ['jshint', 'ngtemplates', 'uglify']); +}; \ No newline at end of file diff --git a/README.md b/README.md index 7c7d4a1..62809c2 100644 --- a/README.md +++ b/README.md @@ -11,7 +11,7 @@ Screenshot: The standard checkboxes which use the input HTML element just don't look good in combination with Bootstrap. -Surprisingly, I could not find any nice looking, simple checkbox, so I built one. It is based on a button and Glyphicons which behaves like a normal checkbox. +Surprisingly, I could not find any nice looking, simple checkbox, so I built one. It is based on a button and Glyphicons (or FontAwesome, if you prefer) which behaves like a normal checkbox. The angular-bootstrap-checkbox is compatible to the use of the original AngularJS input[checkbox], with one minor change: while the original implementation allows an "uninitialized" or other then defined state of the model this one forces "false" or "ng-false-value" (not checked) when not set to "true" or "ng-true-value". @@ -23,6 +23,10 @@ $ bower install angular-bootstrap-checkbox --save ### Usage: +Include the dist files (be sure to choose **only one (1)** of the compiled template files). + +If you don't use glyphicons or FontAwesome and instead want to create your own template, see the existing html templates and directive (in /src) and the Gruntfile.js for examples. + Add "ui.checkbox" to your modules list. Then you can use it like AngularJS input[checkbox]: ``` @@ -60,6 +64,8 @@ And also style the checkboxes like Bootstrap buttons: See index.html for examples and how it works. +See index-fa.html for the FontAwesome version. + ### Testing: Start web server e.g. via Python: diff --git a/angular-bootstrap-checkbox.js b/angular-bootstrap-checkbox.js deleted file mode 100644 index 0849d6d..0000000 --- a/angular-bootstrap-checkbox.js +++ /dev/null @@ -1,76 +0,0 @@ -"use strict"; - -angular.module("ui.checkbox", []).directive("checkbox", function() { - return { - scope: {}, - require: "ngModel", - restrict: "E", - replace: "true", - template: "", - link: function(scope, elem, attrs, modelCtrl) { - scope.size = "default"; - // Default Button Styling - scope.stylebtn = {}; - // Default Checkmark Styling - scope.styleicon = {"width": "10px", "left": "-1px"}; - // If size is undefined, Checkbox has normal size (Bootstrap 'xs') - if(attrs.large !== undefined) { - scope.size = "large"; - scope.stylebtn = {"padding-top": "2px", "padding-bottom": "2px", "height": "30px"}; - scope.styleicon = {"width": "8px", "left": "-5px", "font-size": "17px"}; - } - if(attrs.larger !== undefined) { - scope.size = "larger"; - scope.stylebtn = {"padding-top": "2px", "padding-bottom": "2px", "height": "34px"}; - scope.styleicon = {"width": "8px", "left": "-8px", "font-size": "22px"}; - } - if(attrs.largest !== undefined) { - scope.size = "largest"; - scope.stylebtn = {"padding-top": "2px", "padding-bottom": "2px", "height": "45px"}; - scope.styleicon = {"width": "11px", "left": "-11px", "font-size": "30px"}; - } - - var trueValue = true; - var falseValue = false; - - // If defined set true value - if(attrs.ngTrueValue !== undefined) { - trueValue = attrs.ngTrueValue; - } - // If defined set false value - if(attrs.ngFalseValue !== undefined) { - falseValue = attrs.ngFalseValue; - } - - // Check if name attribute is set and if so add it to the DOM element - if(scope.name !== undefined) { - elem.name = scope.name; - } - - // Update element when model changes - scope.$watch(function() { - if(modelCtrl.$modelValue === trueValue || modelCtrl.$modelValue === true) { - modelCtrl.$setViewValue(trueValue); - } else { - modelCtrl.$setViewValue(falseValue); - } - return modelCtrl.$modelValue; - }, function(newVal, oldVal) { - scope.checked = modelCtrl.$modelValue === trueValue; - }, true); - - // On click swap value and trigger onChange function - elem.bind("click", function() { - scope.$apply(function() { - if(modelCtrl.$modelValue === falseValue) { - modelCtrl.$setViewValue(trueValue); - } else { - modelCtrl.$setViewValue(falseValue); - } - }); - }); - } - }; -}); \ No newline at end of file diff --git a/bower.json b/bower.json index 3ad721d..6d0276c 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "angular-bootstrap-checkbox", - "version": "0.3.1", + "version": "0.4.0", "authors": [ "Sebastian Hammerl, Getslash GmbH" ], @@ -21,7 +21,8 @@ ], "dependencies": { "angular": ">= 1.2.0", - "bootstrap": ">= 3.0.0" + "bootstrap": ">= 3.0.0", + "font-awesome": ">= 4.2.0" }, "devDependencies": { "angular-scenario": ">= 1.2.0" diff --git a/dist/angular-bootstrap-checkbox-fontawesome-tpl.js b/dist/angular-bootstrap-checkbox-fontawesome-tpl.js new file mode 100644 index 0000000..cb64cb1 --- /dev/null +++ b/dist/angular-bootstrap-checkbox-fontawesome-tpl.js @@ -0,0 +1,10 @@ +angular.module('ui.checkbox').run(['$templateCache', function($templateCache) { + 'use strict'; + + $templateCache.put('angular-bootstrap-checkbox-tpl.html', + "" + ); + +}]); diff --git a/dist/angular-bootstrap-checkbox-glyphicon-tpl.js b/dist/angular-bootstrap-checkbox-glyphicon-tpl.js new file mode 100644 index 0000000..696f320 --- /dev/null +++ b/dist/angular-bootstrap-checkbox-glyphicon-tpl.js @@ -0,0 +1,10 @@ +angular.module('ui.checkbox').run(['$templateCache', function($templateCache) { + 'use strict'; + + $templateCache.put('angular-bootstrap-checkbox-tpl.html', + "" + ); + +}]); diff --git a/dist/angular-bootstrap-checkbox.min.js b/dist/angular-bootstrap-checkbox.min.js new file mode 100644 index 0000000..178ac9c --- /dev/null +++ b/dist/angular-bootstrap-checkbox.min.js @@ -0,0 +1 @@ +"use strict";angular.module("ui.checkbox",[]).directive("checkbox",function(){return{scope:{},require:"ngModel",restrict:"E",replace:"true",templateUrl:"angular-bootstrap-checkbox-tpl.html",link:function(a,b,c,d){a.size="default",a.stylebtn={},a.styleicon={width:"10px",position:"relative",left:"-1px"},a.stylefaicon={width:"10px",position:"relative",left:"-3px",top:"1px","font-size":"16px"},void 0!==c.large&&(a.size="large",a.stylebtn={"padding-top":"2px","padding-bottom":"2px",height:"30px"},a.styleicon={width:"8px",position:"relative",left:"-5px","font-size":"17px"},a.stylefaicon={width:"8px",position:"relative",left:"-8px",top:"-1px","font-size":"25px"}),void 0!==c.larger&&(a.size="larger",a.stylebtn={"padding-top":"2px","padding-bottom":"2px",height:"34px"},a.styleicon={width:"8px",position:"relative",left:"-8px","font-size":"22px"},a.stylefaicon={width:"8px",position:"relative",left:"-11px",top:"-2px","font-size":"30px"}),void 0!==c.largest&&(a.size="largest",a.stylebtn={"padding-top":"2px","padding-bottom":"2px",height:"45px"},a.styleicon={width:"11px",position:"relative",left:"-11px","font-size":"30px"},a.stylefaicon={width:"11px",position:"relative",left:"-14px",top:"-2px","font-size":"40px"});var e=!0,f=!1;void 0!==c.ngTrueValue&&(e=c.ngTrueValue),void 0!==c.ngFalseValue&&(f=c.ngFalseValue),void 0!==a.name&&(b.name=a.name),a.$watch(function(){return d.$setViewValue(d.$modelValue===e||d.$modelValue===!0?e:f),d.$modelValue},function(){a.checked=d.$modelValue===e},!0),b.bind("click",function(){a.$apply(function(){d.$setViewValue(d.$modelValue===f?e:f)})})}}}); \ No newline at end of file diff --git a/index-fa.html b/index-fa.html new file mode 100644 index 0000000..bcf89d8 --- /dev/null +++ b/index-fa.html @@ -0,0 +1,371 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Example + + Value + + Code +
+ Minimal example + + + + + +
+ + 		+ +
<checkbox
+    ng-model="checkboxModel[0]"
+></checkbox>
+ +
+ Example with custom name attribute + + + + + +
+ + 		+ +
<checkbox
+    ng-model="checkboxModel[1]"
+    name="custom-name"
+></checkbox>
+ +
+ Example with custom true value + + + + + +
+
+ + 		+ +
<checkbox
+    ng-model="checkboxModel[2]"
+    ng-true-value="The Truth"
+></checkbox>
+ +
+ Example with custom false value + + + + + +
+
+ + 		+ +
<checkbox
+    ng-model="checkboxModel[3]"
+    ng-false-value="The Untruth"
+></checkbox>
+ +
+ Example with custom true and false value + + + + + +
+
+
+ + 		+ +
<checkbox
+    ng-model="checkboxModel[4]"
+    ng-true-value="The Truth"
+    ng-false-value="The Untruth"
+></checkbox>
+ +
+ Example with change listener when clicked + + + +
+
+ Clicks: + 		+
+ + 		+ +
<checkbox
+    ng-model="checkboxModel[5]"
+    ng-change="onChange()"
+></checkbox>
+ +
+ Example disabled checkbox + + + + + +
+ + + + 		+ +
<checkbox
+    ng-model="checkboxModel[6]"
+    ng-disabled="isDisabled === true"
+></checkbox>
+ +
+ Different Sizes (normal, large, larger, largest) + + + + + +

+ + + + + 		+ +
<checkbox
+    ng-model="checkboxModel[7]"
+></checkbox>
+<checkbox large
+    ng-model="checkboxModel[7]"
+></checkbox>
+<checkbox larger
+    ng-model="checkboxModel[7]"
+></checkbox>
+<checkbox largest
+    ng-model="checkboxModel[7]"
+></checkbox>
+ +
+ Different Styles (normal, primary, success, info, warning, danger) + + default:


+ + primary:


+ + success:


+ + info:


+ + warning:


+ + danger: + 		+ +       +


+ + +       +


+ + +       +


+ + +       +


+ + +       +


+ + +       + + 		+ +
<checkbox
+    ng-model="checkboxModel[9]"
+></checkbox>
+<checkbox class="btn-primary"
+    ng-model="checkboxModel[9]"
+></checkbox>
+<checkbox class="btn-success"
+    ng-model="checkboxModel[9]"
+></checkbox>
+<checkbox class="btn-info"
+    ng-model="checkboxModel[9]"
+></checkbox>
+<checkbox class="btn-warning"
+    ng-model="checkboxModel[9]"
+></checkbox>
+<checkbox class="btn-danger"
+    ng-model="checkboxModel[9]"
+></checkbox>
+
+ app.js: + 
+angular.module("angular-bootstrap-checkbox-test", ["ui.checkbox"])
+.controller("index", function($scope) {
+    $scope.checkboxModel = [
+        false, false, false,false, false, false, false, false, true, false, true
+    ];
+
+    $scope.changes = 0;
+    $scope.onChange = function() {
+        $scope.changes++;
+    };
+
+    $scope.isDisabled = false;
+});
+
+
+ + + \ No newline at end of file diff --git a/index.html b/index.html index c1fc638..3b7bcf2 100644 --- a/index.html +++ b/index.html @@ -5,7 +5,8 @@ - + + diff --git a/package.json b/package.json new file mode 100644 index 0000000..eddd708 --- /dev/null +++ b/package.json @@ -0,0 +1,24 @@ +{ + "name": "angular-bootstrap-checkbox", + "description": "A Twitter Bootstrap styled checkbox to use with AngularJS", + "authors": [ + "Sebastian Hammerl, Getslash GmbH" + ], + "version": "0.4.0", + "licence": "MIT", + "repository": { + "type": "git", + "url": "git://github.com/sebastianha/angular-bootstrap-checkbox.git" + }, + "devDependencies": { + "grunt": "~0.4.2", + "grunt-contrib-uglify": "latest", + "grunt-contrib-watch": "*", + "grunt-contrib-jshint": "*", + "grunt-contrib-concat": "*", + "grunt-contrib-jasmine": "*", + "grunt-contrib-clean": "latest", + "grunt-bump": "0.0.11", + "grunt-angular-templates": "~0.5.4" + } +} \ No newline at end of file diff --git a/src/angular-bootstrap-checkbox-fontawesome-tpl.html b/src/angular-bootstrap-checkbox-fontawesome-tpl.html new file mode 100644 index 0000000..db3e039 --- /dev/null +++ b/src/angular-bootstrap-checkbox-fontawesome-tpl.html @@ -0,0 +1,3 @@ + \ No newline at end of file diff --git a/src/angular-bootstrap-checkbox-glyphicon-tpl.html b/src/angular-bootstrap-checkbox-glyphicon-tpl.html new file mode 100644 index 0000000..cd8e3b1 --- /dev/null +++ b/src/angular-bootstrap-checkbox-glyphicon-tpl.html @@ -0,0 +1,3 @@ + \ No newline at end of file diff --git a/src/angular-bootstrap-checkbox.js b/src/angular-bootstrap-checkbox.js new file mode 100644 index 0000000..c3fce90 --- /dev/null +++ b/src/angular-bootstrap-checkbox.js @@ -0,0 +1,79 @@ +'use strict'; + +angular.module('ui.checkbox', []).directive('checkbox', function() { + return { + scope: {}, + require: 'ngModel', + restrict: 'E', + replace: 'true', + templateUrl: 'angular-bootstrap-checkbox-tpl.html', + link: function(scope, elem, attrs, modelCtrl) { + scope.size = 'default'; + // Default Button Styling + scope.stylebtn = {}; + // Default Checkmark Styling + scope.styleicon = {'width': '10px', 'position': 'relative', 'left': '-1px'}; + // FontAwesome Default Checkmark Styling + scope.stylefaicon = {'width': '10px', 'position': 'relative', 'left': '-3px', 'top': '1px', 'font-size': '16px'}; + // If size is undefined, Checkbox has normal size (Bootstrap 'xs') + if(attrs.large !== undefined) { + scope.size = 'large'; + scope.stylebtn = {'padding-top': '2px', 'padding-bottom': '2px', 'height': '30px'}; + scope.styleicon = {'width': '8px', 'position': 'relative', 'left': '-5px', 'font-size': '17px'}; + scope.stylefaicon = {'width': '8px', 'position': 'relative', 'left': '-8px', 'top': '-1px', 'font-size': '25px'}; + } + if(attrs.larger !== undefined) { + scope.size = 'larger'; + scope.stylebtn = {'padding-top': '2px', 'padding-bottom': '2px', 'height': '34px'}; + scope.styleicon = {'width': '8px', 'position': 'relative', 'left': '-8px', 'font-size': '22px'}; + scope.stylefaicon = {'width': '8px', 'position': 'relative', 'left': '-11px', 'top': '-2px', 'font-size': '30px'}; + } + if(attrs.largest !== undefined) { + scope.size = 'largest'; + scope.stylebtn = {'padding-top': '2px', 'padding-bottom': '2px', 'height': '45px'}; + scope.styleicon = {'width': '11px', 'position': 'relative', 'left': '-11px', 'font-size': '30px'}; + scope.stylefaicon = {'width': '11px', 'position': 'relative', 'left': '-14px', 'top': '-2px', 'font-size': '40px'}; + } + + var trueValue = true; + var falseValue = false; + + // If defined set true value + if(attrs.ngTrueValue !== undefined) { + trueValue = attrs.ngTrueValue; + } + // If defined set false value + if(attrs.ngFalseValue !== undefined) { + falseValue = attrs.ngFalseValue; + } + + // Check if name attribute is set and if so add it to the DOM element + if(scope.name !== undefined) { + elem.name = scope.name; + } + + // Update element when model changes + scope.$watch(function() { + if(modelCtrl.$modelValue === trueValue || modelCtrl.$modelValue === true) { + modelCtrl.$setViewValue(trueValue); + } else { + modelCtrl.$setViewValue(falseValue); + } + return modelCtrl.$modelValue; + }, function(newVal, oldVal) { + scope.checked = modelCtrl.$modelValue === trueValue; + }, true); + + // On click swap value and trigger onChange function + elem.bind('click', function() { + scope.$apply(function() { + if(modelCtrl.$modelValue === falseValue) { + modelCtrl.$setViewValue(trueValue); + } else { + modelCtrl.$setViewValue(falseValue); + } + }); + }); + } + }; +}); \ No newline at end of file From 1d284357b192777ea7564ecbd025a85267c1e738 Mon Sep 17 00:00:00 2001 From: Joris de Wit Date: Tue, 7 Oct 2014 13:24:51 -0700 Subject: [PATCH 2/7] add editor config --- .editorconfig | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) create mode 100644 .editorconfig diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 0000000..3f4927e --- /dev/null +++ b/.editorconfig @@ -0,0 +1,20 @@ +# EditorConfig helps developers define and maintain consistent +# coding styles between different editors and IDEs +# editorconfig.org + +root = true + +[*] + +# Change these settings to your own preference +indent_style = tab +indent_size = 4 + +# We recommend you to keep these unchanged +end_of_line = lf +charset = utf-8 +trim_trailing_whitespace = true +insert_final_newline = true + +[*.md] +trim_trailing_whitespace = false From 2007f59b49dcdf69db525cda5faf4c1669cb1534 Mon Sep 17 00:00:00 2001 From: Joris de Wit Date: Tue, 7 Oct 2014 13:25:33 -0700 Subject: [PATCH 3/7] allow checkbox to be checked when false --- README.md | 8 +++++++- dist/angular-bootstrap-checkbox.min.js | 2 +- src/angular-bootstrap-checkbox.js | 6 +++--- 3 files changed, 11 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index 62809c2..d322399 100644 --- a/README.md +++ b/README.md @@ -62,6 +62,12 @@ And also style the checkboxes like Bootstrap buttons: ![Screenshot](/styles.png?raw=true "Screenshot Styles") +Invert selection of checkbox +``` +Show Item + +``` + See index.html for examples and how it works. See index-fa.html for the FontAwesome version. @@ -82,4 +88,4 @@ $ karma start Copyright (c) 2014 Sebastian Hammerl, Getslash GmbH -Licensed under the MIT License \ No newline at end of file +Licensed under the MIT License diff --git a/dist/angular-bootstrap-checkbox.min.js b/dist/angular-bootstrap-checkbox.min.js index 178ac9c..2ca8f7d 100644 --- a/dist/angular-bootstrap-checkbox.min.js +++ b/dist/angular-bootstrap-checkbox.min.js @@ -1 +1 @@ -"use strict";angular.module("ui.checkbox",[]).directive("checkbox",function(){return{scope:{},require:"ngModel",restrict:"E",replace:"true",templateUrl:"angular-bootstrap-checkbox-tpl.html",link:function(a,b,c,d){a.size="default",a.stylebtn={},a.styleicon={width:"10px",position:"relative",left:"-1px"},a.stylefaicon={width:"10px",position:"relative",left:"-3px",top:"1px","font-size":"16px"},void 0!==c.large&&(a.size="large",a.stylebtn={"padding-top":"2px","padding-bottom":"2px",height:"30px"},a.styleicon={width:"8px",position:"relative",left:"-5px","font-size":"17px"},a.stylefaicon={width:"8px",position:"relative",left:"-8px",top:"-1px","font-size":"25px"}),void 0!==c.larger&&(a.size="larger",a.stylebtn={"padding-top":"2px","padding-bottom":"2px",height:"34px"},a.styleicon={width:"8px",position:"relative",left:"-8px","font-size":"22px"},a.stylefaicon={width:"8px",position:"relative",left:"-11px",top:"-2px","font-size":"30px"}),void 0!==c.largest&&(a.size="largest",a.stylebtn={"padding-top":"2px","padding-bottom":"2px",height:"45px"},a.styleicon={width:"11px",position:"relative",left:"-11px","font-size":"30px"},a.stylefaicon={width:"11px",position:"relative",left:"-14px",top:"-2px","font-size":"40px"});var e=!0,f=!1;void 0!==c.ngTrueValue&&(e=c.ngTrueValue),void 0!==c.ngFalseValue&&(f=c.ngFalseValue),void 0!==a.name&&(b.name=a.name),a.$watch(function(){return d.$setViewValue(d.$modelValue===e||d.$modelValue===!0?e:f),d.$modelValue},function(){a.checked=d.$modelValue===e},!0),b.bind("click",function(){a.$apply(function(){d.$setViewValue(d.$modelValue===f?e:f)})})}}}); \ No newline at end of file +"use strict";angular.module("ui.checkbox",[]).directive("checkbox",function(){return{scope:{},require:"ngModel",restrict:"E",replace:"true",templateUrl:"angular-bootstrap-checkbox-tpl.html",link:function(a,b,c,d){a.size="default",a.stylebtn={},a.styleicon={width:"10px",position:"relative",left:"-1px"},a.stylefaicon={width:"10px",position:"relative",left:"-3px",top:"1px","font-size":"16px"},void 0!==c.large&&(a.size="large",a.stylebtn={"padding-top":"2px","padding-bottom":"2px",height:"30px"},a.styleicon={width:"8px",position:"relative",left:"-5px","font-size":"17px"},a.stylefaicon={width:"8px",position:"relative",left:"-8px",top:"-1px","font-size":"25px"}),void 0!==c.larger&&(a.size="larger",a.stylebtn={"padding-top":"2px","padding-bottom":"2px",height:"34px"},a.styleicon={width:"8px",position:"relative",left:"-8px","font-size":"22px"},a.stylefaicon={width:"8px",position:"relative",left:"-11px",top:"-2px","font-size":"30px"}),void 0!==c.largest&&(a.size="largest",a.stylebtn={"padding-top":"2px","padding-bottom":"2px",height:"45px"},a.styleicon={width:"11px",position:"relative",left:"-11px","font-size":"30px"},a.stylefaicon={width:"11px",position:"relative",left:"-14px",top:"-2px","font-size":"40px"});var e=c.invert?!1:!0,f=c.invert?!0:!1;void 0!==c.ngTrueValue&&(e=c.ngTrueValue),void 0!==c.ngFalseValue&&(f=c.ngFalseValue),void 0!==a.name&&(b.name=a.name),a.$watch(function(){return d.$setViewValue(d.$modelValue===e||d.$modelValue===!0?e:f),d.$modelValue},function(){a.checked=d.$modelValue===e},!0),b.bind("click",function(){a.$apply(function(){d.$setViewValue(d.$modelValue===f?e:f)})})}}}); \ No newline at end of file diff --git a/src/angular-bootstrap-checkbox.js b/src/angular-bootstrap-checkbox.js index c3fce90..5f66429 100644 --- a/src/angular-bootstrap-checkbox.js +++ b/src/angular-bootstrap-checkbox.js @@ -35,8 +35,8 @@ angular.module('ui.checkbox', []).directive('checkbox', function() { scope.stylefaicon = {'width': '11px', 'position': 'relative', 'left': '-14px', 'top': '-2px', 'font-size': '40px'}; } - var trueValue = true; - var falseValue = false; + var trueValue = attrs.invert ? false : true; + var falseValue = attrs.invert ? true : false; // If defined set true value if(attrs.ngTrueValue !== undefined) { @@ -76,4 +76,4 @@ angular.module('ui.checkbox', []).directive('checkbox', function() { }); } }; -}); \ No newline at end of file +}); From c58855a621657ca1e482136bd870f218e1454ce7 Mon Sep 17 00:00:00 2001 From: Joris de Wit Date: Tue, 14 Oct 2014 07:46:29 -0700 Subject: [PATCH 4/7] add ui-checkbox class to template --- dist/angular-bootstrap-checkbox-fontawesome-tpl.js | 4 ++-- dist/angular-bootstrap-checkbox-glyphicon-tpl.js | 4 ++-- src/angular-bootstrap-checkbox-fontawesome-tpl.html | 4 ++-- src/angular-bootstrap-checkbox-glyphicon-tpl.html | 4 ++-- 4 files changed, 8 insertions(+), 8 deletions(-) diff --git a/dist/angular-bootstrap-checkbox-fontawesome-tpl.js b/dist/angular-bootstrap-checkbox-fontawesome-tpl.js index cb64cb1..622b86b 100644 --- a/dist/angular-bootstrap-checkbox-fontawesome-tpl.js +++ b/dist/angular-bootstrap-checkbox-fontawesome-tpl.js @@ -2,9 +2,9 @@ angular.module('ui.checkbox').run(['$templateCache', function($templateCache) { 'use strict'; $templateCache.put('angular-bootstrap-checkbox-tpl.html', - "" + "\n" ); }]); diff --git a/dist/angular-bootstrap-checkbox-glyphicon-tpl.js b/dist/angular-bootstrap-checkbox-glyphicon-tpl.js index 696f320..cc20757 100644 --- a/dist/angular-bootstrap-checkbox-glyphicon-tpl.js +++ b/dist/angular-bootstrap-checkbox-glyphicon-tpl.js @@ -2,9 +2,9 @@ angular.module('ui.checkbox').run(['$templateCache', function($templateCache) { 'use strict'; $templateCache.put('angular-bootstrap-checkbox-tpl.html', - "" + "\n" ); }]); diff --git a/src/angular-bootstrap-checkbox-fontawesome-tpl.html b/src/angular-bootstrap-checkbox-fontawesome-tpl.html index db3e039..09c3930 100644 --- a/src/angular-bootstrap-checkbox-fontawesome-tpl.html +++ b/src/angular-bootstrap-checkbox-fontawesome-tpl.html @@ -1,3 +1,3 @@ - \ No newline at end of file + diff --git a/src/angular-bootstrap-checkbox-glyphicon-tpl.html b/src/angular-bootstrap-checkbox-glyphicon-tpl.html index cd8e3b1..7ee36f2 100644 --- a/src/angular-bootstrap-checkbox-glyphicon-tpl.html +++ b/src/angular-bootstrap-checkbox-glyphicon-tpl.html @@ -1,3 +1,3 @@ - \ No newline at end of file + From 8f4a536e76c5c597bcafdf4e6f67f9fccd6ab4e8 Mon Sep 17 00:00:00 2001 From: Joris de Wit Date: Tue, 14 Oct 2014 08:54:11 -0700 Subject: [PATCH 5/7] removed css styling from directive, and added css styling remove templates in favor of configurable uiCheckbox constant --- Gruntfile.js | 32 +++++-------- README.md | 25 ++++++++--- ...ular-bootstrap-checkbox-fontawesome-tpl.js | 10 ----- ...ngular-bootstrap-checkbox-glyphicon-tpl.js | 10 ----- dist/angular-bootstrap-checkbox.css | 38 ++++++++++++++++ dist/angular-bootstrap-checkbox.min.js | 2 +- package.json | 14 +++--- ...ar-bootstrap-checkbox-fontawesome-tpl.html | 3 -- ...ular-bootstrap-checkbox-glyphicon-tpl.html | 3 -- src/angular-bootstrap-checkbox.js | 45 ++++++------------- src/angular-bootstrap-checkbox.less | 43 ++++++++++++++++++ 11 files changed, 133 insertions(+), 92 deletions(-) delete mode 100644 dist/angular-bootstrap-checkbox-fontawesome-tpl.js delete mode 100644 dist/angular-bootstrap-checkbox-glyphicon-tpl.js create mode 100644 dist/angular-bootstrap-checkbox.css delete mode 100644 src/angular-bootstrap-checkbox-fontawesome-tpl.html delete mode 100644 src/angular-bootstrap-checkbox-glyphicon-tpl.html create mode 100644 src/angular-bootstrap-checkbox.less diff --git a/Gruntfile.js b/Gruntfile.js index 3934ba4..55df8eb 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -22,24 +22,13 @@ module.exports = function(grunt) { }, } }, - ngtemplates: { - glyphicon: { - src: 'src/*-glyphicon-tpl.html', - dest: 'dist/angular-bootstrap-checkbox-glyphicon-tpl.js', - options: { - module: 'ui.checkbox', - url: function(url) { return url.replace('src/', '').replace('-glyphicon', ''); } - } - }, - fontawesome: { - src: 'src/*-fontawesome-tpl.html', - dest: 'dist/angular-bootstrap-checkbox-fontawesome-tpl.js', - options: { - module: 'ui.checkbox', - url: function(url) { return url.replace('src/', '').replace('-fontawesome', ''); } - } - } - }, + less: { + dist: { + files: { + 'dist/angular-bootstrap-checkbox.css': 'src/*.less' + } + } + }, uglify: { options: { mangle: true, @@ -67,9 +56,8 @@ module.exports = function(grunt) { grunt.loadNpmTasks('grunt-contrib-uglify'); grunt.loadNpmTasks('grunt-contrib-watch'); grunt.loadNpmTasks('grunt-contrib-clean'); + grunt.loadNpmTasks('grunt-contrib-less'); grunt.loadNpmTasks('grunt-bump'); - grunt.loadNpmTasks('grunt-shell'); - grunt.loadNpmTasks('grunt-angular-templates'); - grunt.registerTask('default', ['jshint', 'ngtemplates', 'uglify']); -}; \ No newline at end of file + grunt.registerTask('default', ['jshint', 'less', 'uglify']); +}; diff --git a/README.md b/README.md index d322399..05b0010 100644 --- a/README.md +++ b/README.md @@ -43,11 +43,28 @@ Additionally you can set the size: ``` (Normal size, corresponds to 'btn-xs') - (Large, corresponds to 'btn-sm') - (Larger, corresponds to Button default size) - (Largest, corresponds to 'btn-lg') + (Large, corresponds to 'btn-sm') + (Larger, corresponds to Button default size) + (Largest, corresponds to 'btn-lg') ``` +###Configure + +By default, glyphicon icon is used but you can customize the classes within ui-checkbox through the uiCheckboxConfig constant. You can alter the constant globally in your apps boot phase or within a controller and pass the options to the checkbox directive as a parameter. + +``` +//controller +$scope.customConfig = { + iconClass: 'fa fa-check', + buttonClass: 'btn btn-default btn-success' +}; +``` + +``` + +``` + + ![Screenshot](/sizes.png?raw=true "Screenshot Sizes") And also style the checkboxes like Bootstrap buttons: @@ -70,8 +87,6 @@ Show Item See index.html for examples and how it works. -See index-fa.html for the FontAwesome version. - ### Testing: Start web server e.g. via Python: diff --git a/dist/angular-bootstrap-checkbox-fontawesome-tpl.js b/dist/angular-bootstrap-checkbox-fontawesome-tpl.js deleted file mode 100644 index 622b86b..0000000 --- a/dist/angular-bootstrap-checkbox-fontawesome-tpl.js +++ /dev/null @@ -1,10 +0,0 @@ -angular.module('ui.checkbox').run(['$templateCache', function($templateCache) { - 'use strict'; - - $templateCache.put('angular-bootstrap-checkbox-tpl.html', - "\n" - ); - -}]); diff --git a/dist/angular-bootstrap-checkbox-glyphicon-tpl.js b/dist/angular-bootstrap-checkbox-glyphicon-tpl.js deleted file mode 100644 index cc20757..0000000 --- a/dist/angular-bootstrap-checkbox-glyphicon-tpl.js +++ /dev/null @@ -1,10 +0,0 @@ -angular.module('ui.checkbox').run(['$templateCache', function($templateCache) { - 'use strict'; - - $templateCache.put('angular-bootstrap-checkbox-tpl.html', - "\n" - ); - -}]); diff --git a/dist/angular-bootstrap-checkbox.css b/dist/angular-bootstrap-checkbox.css new file mode 100644 index 0000000..91d5f98 --- /dev/null +++ b/dist/angular-bootstrap-checkbox.css @@ -0,0 +1,38 @@ +.ui-checkbox { + width: 16px; + height: 16px; + position: relative; + margin-right: 5px; +} +.ui-checkbox i { + position: absolute; + left: 1px; + top: 1px; +} +.ui-checkbox.large { + height: 30px; + width: 30px; +} +.ui-checkbox.large i { + left: 3px; + top: 3px; + font-size: 20px; +} +.ui-checkbox.larger { + height: 34px; + width: 34px; +} +.ui-checkbox.larger i { + left: 4px; + top: 4px; + font-size: 22px; +} +.ui-checkbox.largest { + height: 45px; + width: 45px; +} +.ui-checkbox.largest i { + left: 6px; + top: 6px; + font-size: 30px; +} diff --git a/dist/angular-bootstrap-checkbox.min.js b/dist/angular-bootstrap-checkbox.min.js index 2ca8f7d..5a40e49 100644 --- a/dist/angular-bootstrap-checkbox.min.js +++ b/dist/angular-bootstrap-checkbox.min.js @@ -1 +1 @@ -"use strict";angular.module("ui.checkbox",[]).directive("checkbox",function(){return{scope:{},require:"ngModel",restrict:"E",replace:"true",templateUrl:"angular-bootstrap-checkbox-tpl.html",link:function(a,b,c,d){a.size="default",a.stylebtn={},a.styleicon={width:"10px",position:"relative",left:"-1px"},a.stylefaicon={width:"10px",position:"relative",left:"-3px",top:"1px","font-size":"16px"},void 0!==c.large&&(a.size="large",a.stylebtn={"padding-top":"2px","padding-bottom":"2px",height:"30px"},a.styleicon={width:"8px",position:"relative",left:"-5px","font-size":"17px"},a.stylefaicon={width:"8px",position:"relative",left:"-8px",top:"-1px","font-size":"25px"}),void 0!==c.larger&&(a.size="larger",a.stylebtn={"padding-top":"2px","padding-bottom":"2px",height:"34px"},a.styleicon={width:"8px",position:"relative",left:"-8px","font-size":"22px"},a.stylefaicon={width:"8px",position:"relative",left:"-11px",top:"-2px","font-size":"30px"}),void 0!==c.largest&&(a.size="largest",a.stylebtn={"padding-top":"2px","padding-bottom":"2px",height:"45px"},a.styleicon={width:"11px",position:"relative",left:"-11px","font-size":"30px"},a.stylefaicon={width:"11px",position:"relative",left:"-14px",top:"-2px","font-size":"40px"});var e=c.invert?!1:!0,f=c.invert?!0:!1;void 0!==c.ngTrueValue&&(e=c.ngTrueValue),void 0!==c.ngFalseValue&&(f=c.ngFalseValue),void 0!==a.name&&(b.name=a.name),a.$watch(function(){return d.$setViewValue(d.$modelValue===e||d.$modelValue===!0?e:f),d.$modelValue},function(){a.checked=d.$modelValue===e},!0),b.bind("click",function(){a.$apply(function(){d.$setViewValue(d.$modelValue===f?e:f)})})}}}); \ No newline at end of file +"use strict";angular.module("ui.checkbox",[]).constant("uiCheckboxConfig",{iconClass:"glyphicon glyphicon-ok",buttonClass:"btn btn-default btn-xs"}).directive("checkbox",["uiCheckboxConfig",function(a){return{scope:{config:"=?checkbox"},require:"ngModel",restrict:"EA",replace:"true",template:'',link:function(b,c,d,e){b.options=angular.extend({},a,b.config);var f=d.invert?!1:!0,g=d.invert?!0:!1;void 0!==d.ngTrueValue&&(f=d.ngTrueValue),void 0!==d.ngFalseValue&&(g=d.ngFalseValue),void 0!==b.name&&(c.name=b.name),b.$watch(function(){return e.$setViewValue(e.$modelValue===f||e.$modelValue===!0?f:g),e.$modelValue},function(){b.checked=e.$modelValue===f},!0),c.bind("click",function(){b.$apply(function(){e.$setViewValue(e.$modelValue===g?f:g)})})}}}]); \ No newline at end of file diff --git a/package.json b/package.json index eddd708..cb3e69a 100644 --- a/package.json +++ b/package.json @@ -12,13 +12,13 @@ }, "devDependencies": { "grunt": "~0.4.2", - "grunt-contrib-uglify": "latest", - "grunt-contrib-watch": "*", - "grunt-contrib-jshint": "*", + "grunt-bump": "0.0.11", + "grunt-contrib-clean": "latest", "grunt-contrib-concat": "*", "grunt-contrib-jasmine": "*", - "grunt-contrib-clean": "latest", - "grunt-bump": "0.0.11", - "grunt-angular-templates": "~0.5.4" + "grunt-contrib-jshint": "*", + "grunt-contrib-less": "^0.11.4", + "grunt-contrib-uglify": "latest", + "grunt-contrib-watch": "*" } -} \ No newline at end of file +} diff --git a/src/angular-bootstrap-checkbox-fontawesome-tpl.html b/src/angular-bootstrap-checkbox-fontawesome-tpl.html deleted file mode 100644 index 09c3930..0000000 --- a/src/angular-bootstrap-checkbox-fontawesome-tpl.html +++ /dev/null @@ -1,3 +0,0 @@ - diff --git a/src/angular-bootstrap-checkbox-glyphicon-tpl.html b/src/angular-bootstrap-checkbox-glyphicon-tpl.html deleted file mode 100644 index 7ee36f2..0000000 --- a/src/angular-bootstrap-checkbox-glyphicon-tpl.html +++ /dev/null @@ -1,3 +0,0 @@ - diff --git a/src/angular-bootstrap-checkbox.js b/src/angular-bootstrap-checkbox.js index 5f66429..60b5133 100644 --- a/src/angular-bootstrap-checkbox.js +++ b/src/angular-bootstrap-checkbox.js @@ -1,39 +1,22 @@ 'use strict'; -angular.module('ui.checkbox', []).directive('checkbox', function() { +angular.module('ui.checkbox', []) +.constant('uiCheckboxConfig', { + iconClass: 'glyphicon glyphicon-ok', + buttonClass: 'btn btn-default btn-xs', +}) +.directive('checkbox', ['uiCheckboxConfig', function(uiCheckboxConfig) { return { - scope: {}, + scope: { + config: '=?checkbox' + }, require: 'ngModel', - restrict: 'E', + restrict: 'EA', replace: 'true', - templateUrl: 'angular-bootstrap-checkbox-tpl.html', + template: '', link: function(scope, elem, attrs, modelCtrl) { - scope.size = 'default'; - // Default Button Styling - scope.stylebtn = {}; - // Default Checkmark Styling - scope.styleicon = {'width': '10px', 'position': 'relative', 'left': '-1px'}; - // FontAwesome Default Checkmark Styling - scope.stylefaicon = {'width': '10px', 'position': 'relative', 'left': '-3px', 'top': '1px', 'font-size': '16px'}; - // If size is undefined, Checkbox has normal size (Bootstrap 'xs') - if(attrs.large !== undefined) { - scope.size = 'large'; - scope.stylebtn = {'padding-top': '2px', 'padding-bottom': '2px', 'height': '30px'}; - scope.styleicon = {'width': '8px', 'position': 'relative', 'left': '-5px', 'font-size': '17px'}; - scope.stylefaicon = {'width': '8px', 'position': 'relative', 'left': '-8px', 'top': '-1px', 'font-size': '25px'}; - } - if(attrs.larger !== undefined) { - scope.size = 'larger'; - scope.stylebtn = {'padding-top': '2px', 'padding-bottom': '2px', 'height': '34px'}; - scope.styleicon = {'width': '8px', 'position': 'relative', 'left': '-8px', 'font-size': '22px'}; - scope.stylefaicon = {'width': '8px', 'position': 'relative', 'left': '-11px', 'top': '-2px', 'font-size': '30px'}; - } - if(attrs.largest !== undefined) { - scope.size = 'largest'; - scope.stylebtn = {'padding-top': '2px', 'padding-bottom': '2px', 'height': '45px'}; - scope.styleicon = {'width': '11px', 'position': 'relative', 'left': '-11px', 'font-size': '30px'}; - scope.stylefaicon = {'width': '11px', 'position': 'relative', 'left': '-14px', 'top': '-2px', 'font-size': '40px'}; - } + + scope.options = angular.extend({}, uiCheckboxConfig, scope.config); var trueValue = attrs.invert ? false : true; var falseValue = attrs.invert ? true : false; @@ -76,4 +59,4 @@ angular.module('ui.checkbox', []).directive('checkbox', function() { }); } }; -}); +}]); diff --git a/src/angular-bootstrap-checkbox.less b/src/angular-bootstrap-checkbox.less new file mode 100644 index 0000000..51c79bc --- /dev/null +++ b/src/angular-bootstrap-checkbox.less @@ -0,0 +1,43 @@ +.ui-checkbox { + width: 16px; + height: 16px; + position: relative; + margin-right: 5px; + + i { + position: absolute; + left: 1px; + top: 1px; + } + + &.large { + height: 30px; + width: 30px; + + i { + left: 3px; + top: 3px; + font-size: 20px; + } + } + + &.larger { + height: 34px; + width: 34px; + i { + left: 4px; + top: 4px; + font-size: 22px; + } + } + + &.largest { + height: 45px; + width: 45px; + i { + left: 6px; + top: 6px; + font-size: 30px; + } + } +} From 2b05538704219e1d0ba2087528b7793e78558f7f Mon Sep 17 00:00:00 2001 From: thebigh2014 Date: Fri, 24 Oct 2014 16:30:57 -0700 Subject: [PATCH 6/7] Fixed checkbox behaviour when using invert=true --- bower.json | 2 +- dist/angular-bootstrap-checkbox.min.js | 2 +- package.json | 2 +- src/angular-bootstrap-checkbox.js | 4 +++- 4 files changed, 6 insertions(+), 4 deletions(-) diff --git a/bower.json b/bower.json index 6d0276c..5cf835c 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "angular-bootstrap-checkbox", - "version": "0.4.0", + "version": "0.4.1", "authors": [ "Sebastian Hammerl, Getslash GmbH" ], diff --git a/dist/angular-bootstrap-checkbox.min.js b/dist/angular-bootstrap-checkbox.min.js index 5a40e49..d3b2b78 100644 --- a/dist/angular-bootstrap-checkbox.min.js +++ b/dist/angular-bootstrap-checkbox.min.js @@ -1 +1 @@ -"use strict";angular.module("ui.checkbox",[]).constant("uiCheckboxConfig",{iconClass:"glyphicon glyphicon-ok",buttonClass:"btn btn-default btn-xs"}).directive("checkbox",["uiCheckboxConfig",function(a){return{scope:{config:"=?checkbox"},require:"ngModel",restrict:"EA",replace:"true",template:'',link:function(b,c,d,e){b.options=angular.extend({},a,b.config);var f=d.invert?!1:!0,g=d.invert?!0:!1;void 0!==d.ngTrueValue&&(f=d.ngTrueValue),void 0!==d.ngFalseValue&&(g=d.ngFalseValue),void 0!==b.name&&(c.name=b.name),b.$watch(function(){return e.$setViewValue(e.$modelValue===f||e.$modelValue===!0?f:g),e.$modelValue},function(){b.checked=e.$modelValue===f},!0),c.bind("click",function(){b.$apply(function(){e.$setViewValue(e.$modelValue===g?f:g)})})}}}]); \ No newline at end of file +"use strict";angular.module("ui.checkbox",[]).constant("uiCheckboxConfig",{iconClass:"glyphicon glyphicon-ok",buttonClass:"btn btn-default btn-xs"}).directive("checkbox",["uiCheckboxConfig",function(a){return{scope:{config:"=?checkbox"},require:"ngModel",restrict:"EA",replace:"true",template:'',link:function(b,c,d,e){b.options=angular.extend({},a,b.config);var f=d.invert?!1:!0,g=d.invert?!0:!1;void 0!==d.ngTrueValue&&(f=d.ngTrueValue),void 0!==d.ngFalseValue&&(g=d.ngFalseValue),void 0!==b.name&&(c.name=b.name),b.$watch(function(){var a=d.invert?!1:!0;return e.$setViewValue(e.$modelValue===f||e.$modelValue===a?f:g),e.$modelValue},function(){b.checked=e.$modelValue===f},!0),c.bind("click",function(){b.$apply(function(){e.$setViewValue(e.$modelValue===g?f:g)})})}}}]); \ No newline at end of file diff --git a/package.json b/package.json index cb3e69a..9764626 100644 --- a/package.json +++ b/package.json @@ -4,7 +4,7 @@ "authors": [ "Sebastian Hammerl, Getslash GmbH" ], - "version": "0.4.0", + "version": "0.4.1", "licence": "MIT", "repository": { "type": "git", diff --git a/src/angular-bootstrap-checkbox.js b/src/angular-bootstrap-checkbox.js index 60b5133..bd91bbe 100644 --- a/src/angular-bootstrap-checkbox.js +++ b/src/angular-bootstrap-checkbox.js @@ -37,7 +37,9 @@ angular.module('ui.checkbox', []) // Update element when model changes scope.$watch(function() { - if(modelCtrl.$modelValue === trueValue || modelCtrl.$modelValue === true) { + var baseComparison = attrs.invert ? false : true; + + if(modelCtrl.$modelValue === trueValue || modelCtrl.$modelValue === baseComparison) { modelCtrl.$setViewValue(trueValue); } else { modelCtrl.$setViewValue(falseValue); From 430e4cd3bea5eb3e476ca78821d3fd49489e839c Mon Sep 17 00:00:00 2001 From: Joris de Wit Date: Thu, 14 May 2015 12:07:16 -0700 Subject: [PATCH 7/7] big refactor - use render to update checked state - use ng-click to handle toggle - use font-awesome check/unchecked icon - minify css - remove unecessary styles - simply and clean up project structure - update readme & demo --- .editorconfig | 4 +- .jshintrc | 1 - Gruntfile.js | 27 +- LICENSE | 4 +- README.md | 122 ++------ app.js | 14 - bower.json | 18 +- checkbox.png | Bin 8574 -> 0 bytes dist/angular-bootstrap-checkbox.css | 38 --- dist/angular-bootstrap-checkbox.min.js | 1 - dist/ez-checkbox.css | 12 + dist/ez-checkbox.min.css | 1 + dist/ez-checkbox.min.js | 1 + index-fa.html | 371 ------------------------- index.html | 361 +++++------------------- karma.conf.js | 28 -- package.json | 13 +- sizes.png | Bin 6395 -> 0 bytes src/angular-bootstrap-checkbox.js | 64 ----- src/angular-bootstrap-checkbox.less | 43 --- src/ez-checkbox.js | 48 ++++ src/ez-checkbox.less | 14 + styles.png | Bin 9042 -> 0 bytes test.js | 353 ----------------------- 24 files changed, 196 insertions(+), 1342 deletions(-) delete mode 100644 app.js delete mode 100644 checkbox.png delete mode 100644 dist/angular-bootstrap-checkbox.css delete mode 100644 dist/angular-bootstrap-checkbox.min.js create mode 100644 dist/ez-checkbox.css create mode 100644 dist/ez-checkbox.min.css create mode 100644 dist/ez-checkbox.min.js delete mode 100644 index-fa.html delete mode 100644 karma.conf.js delete mode 100644 sizes.png delete mode 100644 src/angular-bootstrap-checkbox.js delete mode 100644 src/angular-bootstrap-checkbox.less create mode 100644 src/ez-checkbox.js create mode 100644 src/ez-checkbox.less delete mode 100644 styles.png delete mode 100644 test.js diff --git a/.editorconfig b/.editorconfig index 3f4927e..04ba039 100644 --- a/.editorconfig +++ b/.editorconfig @@ -7,8 +7,8 @@ root = true [*] # Change these settings to your own preference -indent_style = tab -indent_size = 4 +indent_style = space +indent_size = 2 # We recommend you to keep these unchanged end_of_line = lf diff --git a/.jshintrc b/.jshintrc index 04dcdd8..15b0538 100644 --- a/.jshintrc +++ b/.jshintrc @@ -20,7 +20,6 @@ "noarg" : true, "noempty" : true, "nonew" : true, - "quotmark" : "double", "regexp" : true, "smarttabs": true, "strict" : true, diff --git a/Gruntfile.js b/Gruntfile.js index 55df8eb..7aec975 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -12,6 +12,13 @@ module.exports = function(grunt) { commitFiles: ['package.json', 'bower.json'] } }, + cssmin: { + style: { + files: { + 'dist/ez-checkbox.min.css': ['dist/ez-checkbox.css'] + } + } + }, jshint: { options: { jshintrc: '.jshintrc' @@ -22,13 +29,13 @@ module.exports = function(grunt) { }, } }, - less: { - dist: { - files: { - 'dist/angular-bootstrap-checkbox.css': 'src/*.less' - } - } - }, + less: { + dist: { + files: { + 'dist/ez-checkbox.css': 'src/*.less' + } + } + }, uglify: { options: { mangle: true, @@ -37,7 +44,7 @@ module.exports = function(grunt) { }, dist: { files: { - 'dist/angular-bootstrap-checkbox.min.js': ['src/**/*.js'] + 'dist/ez-checkbox.min.js': ['src/**/*.js'] } } }, @@ -55,9 +62,9 @@ module.exports = function(grunt) { grunt.loadNpmTasks('grunt-contrib-jshint'); grunt.loadNpmTasks('grunt-contrib-uglify'); grunt.loadNpmTasks('grunt-contrib-watch'); - grunt.loadNpmTasks('grunt-contrib-clean'); grunt.loadNpmTasks('grunt-contrib-less'); + grunt.loadNpmTasks('grunt-contrib-cssmin'); grunt.loadNpmTasks('grunt-bump'); - grunt.registerTask('default', ['jshint', 'less', 'uglify']); + grunt.registerTask('default', ['jshint', 'less', 'uglify', 'cssmin']); }; diff --git a/LICENSE b/LICENSE index d6f187c..d713e44 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ The MIT License (MIT) -Copyright (c) 2014 Sebastian Hammerl, Getslash GmbH +Copyright (c) 2014 Sebastian Hammerl, Getslash GmbH, Joris de Wit Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal @@ -18,4 +18,4 @@ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE -SOFTWARE. \ No newline at end of file +SOFTWARE. diff --git a/README.md b/README.md index 00fecdd..b038047 100644 --- a/README.md +++ b/README.md @@ -1,106 +1,38 @@ -angular-bootstrap-checkbox -========================== +ez-checkbox +=========== -A checkbox for AngularJS styled to fit the Twitter Bootstrap standard design +A better checkbox for AngularJS. -Screenshot: +##Features +- Inverse selection (show check on falsy value) +- Non boolean true/false values +- Easily transclude a clickable label -![Screenshot](/checkbox.png?raw=true "Screenshot") - -### Description: - -The standard checkboxes which use the input HTML element just don't look good in combination with Bootstrap. - -Surprisingly, I could not find any nice looking, simple checkbox, so I built one. It is based on a button and Glyphicons (or FontAwesome, if you prefer) which behaves like a normal checkbox. - -The angular-bootstrap-checkbox is compatible to the use of the original AngularJS input[checkbox], with one minor change: while the original implementation allows an "uninitialized" or other then defined state of the model this one forces "false" or "ng-false-value" (not checked) when not set to "true" or "ng-true-value". - -### Installation via Bower: - -``` -$ bower install angular-bootstrap-checkbox --save -``` - -### Usage: - -Include the dist files (be sure to choose **only one (1)** of the compiled template files). - -If you don't use glyphicons or FontAwesome and instead want to create your own template, see the existing html templates and directive (in /src) and the Gruntfile.js for examples. - -Add "ui.checkbox" to your modules list. Then you can use it like AngularJS input[checkbox]: - -``` - -``` - -Additionally you can set the size: - -``` - (Normal size, corresponds to 'btn-xs') - (Large, corresponds to 'btn-sm') - (Larger, corresponds to Button default size) - (Largest, corresponds to 'btn-lg') -``` - -###Configure - -By default, glyphicon icon is used but you can customize the classes within ui-checkbox through the uiCheckboxConfig constant. You can alter the constant globally in your apps boot phase or within a controller and pass the options to the checkbox directive as a parameter. - -``` -//controller -$scope.customConfig = { - iconClass: 'fa fa-check', - buttonClass: 'btn btn-default btn-success' -}; -``` - -``` - -``` - - -![Screenshot](/sizes.png?raw=true "Screenshot Sizes") - -And also style the checkboxes like Bootstrap buttons: - -``` - (Looks like primary button) - (Looks like success button) - (Looks like info button) - (Looks like warning button) - (Looks like danger button) -``` - -![Screenshot](/styles.png?raw=true "Screenshot Styles") - -Invert selection of checkbox -``` -Show Item - +##Installation +- run `bower install ez-checkbox` +- add `ez.checkbox` to your applications list of modules +- add sources to your html +```html + + ``` -See index.html and app.js for examples and how it works. +##Requirements +Font Awesome. -### Testing: +##Demo +See Live Demo -Start web server e.g. via Python: -``` -$ python -m SimpleHTTPServer 8000 -``` - -Start Karma E2E tests (has to be installed globally before): -``` -$ karma start +##Usage +```html +This is cool ``` -### License +##Options +Add the following attributes to customize behaviour -Copyright (c) 2014 Sebastian Hammerl, Getslash GmbH +- `invert="true"` - Show check on false value instead of true +- `true-value="this-is-cool"` - Will display check in checkbox if ng-model value === 'this-is-cool' -Licensed under the MIT License +##Acknowledgements +Thanks to angular-bootstrap-checkbox. diff --git a/app.js b/app.js deleted file mode 100644 index 2b89069..0000000 --- a/app.js +++ /dev/null @@ -1,14 +0,0 @@ -"use strict"; - -angular.module("angular-bootstrap-checkbox-test", ["ui.checkbox"]).controller("index", function($scope) { - $scope.checkboxModel = [ - false, false, false,false, false, false, false, false, true, false, true - ]; - - $scope.changes = 0; - $scope.onChange = function() { - $scope.changes++; - }; - - $scope.isDisabled = false; -}); \ No newline at end of file diff --git a/bower.json b/bower.json index 7e82a47..5bde218 100644 --- a/bower.json +++ b/bower.json @@ -1,19 +1,12 @@ { - "name": "angular-bootstrap-checkbox", - "version": "0.4.1", - "authors": [ - "Sebastian Hammerl, Getslash GmbH" - ], - "description": "A checkbox for AngularJS styled to fit the Twitter Bootstrap standard design", - "main": "angular-bootstrap-checkbox.js", + "name": "ez-checkbox", + "version": "0.0.0", + "description": "A checkbox for AngularJS", "keywords": [ "angular", "angularjs", "directive", - "ui", - "bootstrap", "form", - "input", "checkbox" ], "license": "MIT", @@ -24,9 +17,6 @@ ], "dependencies": { "angular": ">= 1.2.0", - "bootstrap": ">= 3.0.0" - }, - "devDependencies": { - "angular-scenario": ">= 1.2.0" + "font-awesome": ">= 4.0.0" } } diff --git a/checkbox.png b/checkbox.png deleted file mode 100644 index ca3ca48ad26aaa4b753dfeb8f0ea5642a660e40e..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 8574 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 R2}}h',link:function(b,c,d,e){b.options=angular.extend({},a,b.config);var f=d.invert?!1:!0,g=d.invert?!0:!1;void 0!==d.ngTrueValue&&(f=d.ngTrueValue),void 0!==d.ngFalseValue&&(g=d.ngFalseValue),void 0!==b.name&&(c.name=b.name),b.$watch(function(){var a=d.invert?!1:!0;return e.$setViewValue(e.$modelValue===f||e.$modelValue===a?f:g),e.$modelValue},function(){b.checked=e.$modelValue===f},!0),c.bind("click",function(){b.$apply(function(){e.$setViewValue(e.$modelValue===g?f:g)})})}}}]); \ No newline at end of file diff --git a/dist/ez-checkbox.css b/dist/ez-checkbox.css new file mode 100644 index 0000000..083eb7e --- /dev/null +++ b/dist/ez-checkbox.css @@ -0,0 +1,12 @@ +.ez-checkbox { + position: relative; + margin-right: 5px; + color: #333; + cursor: pointer; +} +.ez-checkbox:hover { + text-decoration: none; +} +.ez-checkbox i { + cursor: pointer; +} diff --git a/dist/ez-checkbox.min.css b/dist/ez-checkbox.min.css new file mode 100644 index 0000000..017769a --- /dev/null +++ b/dist/ez-checkbox.min.css @@ -0,0 +1 @@ +.ez-checkbox,.ez-checkbox i{cursor:pointer}.ez-checkbox{position:relative;margin-right:5px;color:#333}.ez-checkbox:hover{text-decoration:none} \ No newline at end of file diff --git a/dist/ez-checkbox.min.js b/dist/ez-checkbox.min.js new file mode 100644 index 0000000..0ad9db5 --- /dev/null +++ b/dist/ez-checkbox.min.js @@ -0,0 +1 @@ +"use strict";angular.module("ez.checkbox",[]).directive("ezCheckbox",[function(){return{require:"ngModel",restrict:"EA",replace:"true",transclude:!0,template:'',scope:{},link:function(a,b,c,d){var e=!0,f=!1;c.hasOwnProperty("trueValue")&&(e=c.trueValue),c.hasOwnProperty("invert")&&(f=e,e=!1),d.$render=function(){a.checked=d.$modelValue===e?!0:!1},a.toggle=function(){d.$setViewValue(d.$modelValue===f?e:f),d.$render()}}}}]); \ No newline at end of file diff --git a/index-fa.html b/index-fa.html deleted file mode 100644 index bcf89d8..0000000 --- a/index-fa.html +++ /dev/null @@ -1,371 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- Example - - Value - - Code -
- Minimal example - - - - - -
- - 		- -
<checkbox
-    ng-model="checkboxModel[0]"
-></checkbox>
- -
- Example with custom name attribute - - - - - -
- - 		- -
<checkbox
-    ng-model="checkboxModel[1]"
-    name="custom-name"
-></checkbox>
- -
- Example with custom true value - - - - - -
-
- - 		- -
<checkbox
-    ng-model="checkboxModel[2]"
-    ng-true-value="The Truth"
-></checkbox>
- -
- Example with custom false value - - - - - -
-
- - 		- -
<checkbox
-    ng-model="checkboxModel[3]"
-    ng-false-value="The Untruth"
-></checkbox>
- -
- Example with custom true and false value - - - - - -
-
-
- - 		- -
<checkbox
-    ng-model="checkboxModel[4]"
-    ng-true-value="The Truth"
-    ng-false-value="The Untruth"
-></checkbox>
- -
- Example with change listener when clicked - - - -
-
- Clicks: - 		-
- - 		- -
<checkbox
-    ng-model="checkboxModel[5]"
-    ng-change="onChange()"
-></checkbox>
- -
- Example disabled checkbox - - - - - -
- - - - 		- -
<checkbox
-    ng-model="checkboxModel[6]"
-    ng-disabled="isDisabled === true"
-></checkbox>
- -
- Different Sizes (normal, large, larger, largest) - - - - - -

- - - - - 		- -
<checkbox
-    ng-model="checkboxModel[7]"
-></checkbox>
-<checkbox large
-    ng-model="checkboxModel[7]"
-></checkbox>
-<checkbox larger
-    ng-model="checkboxModel[7]"
-></checkbox>
-<checkbox largest
-    ng-model="checkboxModel[7]"
-></checkbox>
- -
- Different Styles (normal, primary, success, info, warning, danger) - - default:


- - primary:


- - success:


- - info:


- - warning:


- - danger: - 		- -       -


- - -       -


- - -       -


- - -       -


- - -       -


- - -       - - 		- -
<checkbox
-    ng-model="checkboxModel[9]"
-></checkbox>
-<checkbox class="btn-primary"
-    ng-model="checkboxModel[9]"
-></checkbox>
-<checkbox class="btn-success"
-    ng-model="checkboxModel[9]"
-></checkbox>
-<checkbox class="btn-info"
-    ng-model="checkboxModel[9]"
-></checkbox>
-<checkbox class="btn-warning"
-    ng-model="checkboxModel[9]"
-></checkbox>
-<checkbox class="btn-danger"
-    ng-model="checkboxModel[9]"
-></checkbox>
-
- app.js: - 
-angular.module("angular-bootstrap-checkbox-test", ["ui.checkbox"])
-.controller("index", function($scope) {
-    $scope.checkboxModel = [
-        false, false, false,false, false, false, false, false, true, false, true
-    ];
-
-    $scope.changes = 0;
-    $scope.onChange = function() {
-        $scope.changes++;
-    };
-
-    $scope.isDisabled = false;
-});
-
-
- - - \ No newline at end of file diff --git a/index.html b/index.html index 3b7bcf2..f41d1ca 100644 --- a/index.html +++ b/index.html @@ -1,370 +1,137 @@ - - - - - - - - - - - - - - - - - - + + - - - - - - - - - - - - - -
- Example - - Value - - Code -
- Minimal example - - - - - -
- - 		+ -
<checkbox
-    ng-model="checkboxModel[0]"
-></checkbox>
- -
- Example with custom name attribute - - - - - -
- - 		+ + -
<checkbox
-    ng-model="checkboxModel[1]"
-    name="custom-name"
-></checkbox>
+ + + + + - - - - - + + + + + - - - - - - - - - - - - - - - - - - - -
- Example with custom false value - - - - - -
-
- - 		- -
<checkbox
-    ng-model="checkboxModel[3]"
-    ng-false-value="The Untruth"
-></checkbox>
- - 		ExampleCheckboxValueExternal ControlCode
- Example with custom true and false value + Minimal example - + + Checkbox Label + - + -
-
-
- 		+ -
<checkbox
-    ng-model="checkboxModel[4]"
-    ng-true-value="The Truth"
-    ng-false-value="The Untruth"
-></checkbox>
+
<ez-checkbox
+	ng-model="form.example1"
+></ez-checkbox>
- Example with change listener when clicked + Example with inverted truth and custom name attribute - + -
-
- Clicks: + 		-
- 		+ -
<checkbox
-    ng-model="checkboxModel[5]"
-    ng-change="onChange()"
-></checkbox>
+
<ez-checkbox
+	ng-model="form.example2" invert="true"
+	name="example2"
+></ez-checkbox>
- Example disabled checkbox + Example with custom true value - + - + -
-
+ - - - 		- -
<checkbox
-    ng-model="checkboxModel[6]"
-    ng-disabled="isDisabled === true"
-></checkbox>
-
- Different Sizes (normal, large, larger, largest) - - - - - -

- - - - - 		+
<ez-checkbox
+	ng-model="form.example3"
+	true-value="The Real True"
+></ez-checkbox>
-
<checkbox
-    ng-model="checkboxModel[7]"
-></checkbox>
-<checkbox large
-    ng-model="checkboxModel[7]"
-></checkbox>
-<checkbox larger
-    ng-model="checkboxModel[7]"
-></checkbox>
-<checkbox largest
-    ng-model="checkboxModel[7]"
-></checkbox>
- -
- Different Styles (normal, primary, success, info, warning, danger) - - default:


- - primary:


- - success:


- - info:


- - warning:


- - danger: - 		- -       -


- - -       -


- - -       -


- - -       -


- - -       -


- - -       - - 		- -
<checkbox
-    ng-model="checkboxModel[9]"
-></checkbox>
-<checkbox class="btn-primary"
-    ng-model="checkboxModel[9]"
-></checkbox>
-<checkbox class="btn-success"
-    ng-model="checkboxModel[9]"
-></checkbox>
-<checkbox class="btn-info"
-    ng-model="checkboxModel[9]"
-></checkbox>
-<checkbox class="btn-warning"
-    ng-model="checkboxModel[9]"
-></checkbox>
-<checkbox class="btn-danger"
-    ng-model="checkboxModel[9]"
-></checkbox>
- app.js: - 
-angular.module("angular-bootstrap-checkbox-test", ["ui.checkbox"])
-.controller("index", function($scope) {
-    $scope.checkboxModel = [
-        false, false, false,false, false, false, false, false, true, false, true
-    ];
-
-    $scope.changes = 0;
-    $scope.onChange = function() {
-        $scope.changes++;
-    };
-
-    $scope.isDisabled = false;
-});
-
-
- \ No newline at end of file + diff --git a/karma.conf.js b/karma.conf.js deleted file mode 100644 index 1eab1b9..0000000 --- a/karma.conf.js +++ /dev/null @@ -1,28 +0,0 @@ -// Karma configuration -// Generated on Wed May 21 2014 09:55:50 GMT+0200 (CEST) - -module.exports = function(config) { - config.set({ - basePath : '', - frameworks : ["ng-scenario"], - files : [ - "angular-bootstrap-checkbox.js", - "app.js", - "test.js", - "index.html" - ], - exclude : [], - preprocessors: {}, - reporters : ['progress'], - port : 8001, - colors : true, - logLevel : config.LOG_INFO, - autoWatch : true, -// browsers : ["PhantomJS", "Chrome", "Firefox", "Opera"], - browsers : ["Chrome"], - singleRun : false, - proxies : { - "/": "http://localhost:8000/" - } - }); -}; diff --git a/package.json b/package.json index 9764626..0d8469d 100644 --- a/package.json +++ b/package.json @@ -1,21 +1,16 @@ { - "name": "angular-bootstrap-checkbox", - "description": "A Twitter Bootstrap styled checkbox to use with AngularJS", - "authors": [ - "Sebastian Hammerl, Getslash GmbH" - ], - "version": "0.4.1", + "name": "ez-checkbox", + "version": "0.0.0", "licence": "MIT", "repository": { "type": "git", - "url": "git://github.com/sebastianha/angular-bootstrap-checkbox.git" + "url": "git://github.com/jdewit/ez-checkbox.git" }, "devDependencies": { "grunt": "~0.4.2", "grunt-bump": "0.0.11", - "grunt-contrib-clean": "latest", "grunt-contrib-concat": "*", - "grunt-contrib-jasmine": "*", + "grunt-contrib-cssmin": "^0.12.3", "grunt-contrib-jshint": "*", "grunt-contrib-less": "^0.11.4", "grunt-contrib-uglify": "latest", diff --git a/sizes.png b/sizes.png deleted file mode 100644 index 15632ebea7ecc232a4c764d748a5bee696b1b9fc..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 6395 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 D4?--a diff --git a/src/angular-bootstrap-checkbox.js b/src/angular-bootstrap-checkbox.js deleted file mode 100644 index bd91bbe..0000000 --- a/src/angular-bootstrap-checkbox.js +++ /dev/null @@ -1,64 +0,0 @@ -'use strict'; - -angular.module('ui.checkbox', []) -.constant('uiCheckboxConfig', { - iconClass: 'glyphicon glyphicon-ok', - buttonClass: 'btn btn-default btn-xs', -}) -.directive('checkbox', ['uiCheckboxConfig', function(uiCheckboxConfig) { - return { - scope: { - config: '=?checkbox' - }, - require: 'ngModel', - restrict: 'EA', - replace: 'true', - template: '', - link: function(scope, elem, attrs, modelCtrl) { - - scope.options = angular.extend({}, uiCheckboxConfig, scope.config); - - var trueValue = attrs.invert ? false : true; - var falseValue = attrs.invert ? true : false; - - // If defined set true value - if(attrs.ngTrueValue !== undefined) { - trueValue = attrs.ngTrueValue; - } - // If defined set false value - if(attrs.ngFalseValue !== undefined) { - falseValue = attrs.ngFalseValue; - } - - // Check if name attribute is set and if so add it to the DOM element - if(scope.name !== undefined) { - elem.name = scope.name; - } - - // Update element when model changes - scope.$watch(function() { - var baseComparison = attrs.invert ? false : true; - - if(modelCtrl.$modelValue === trueValue || modelCtrl.$modelValue === baseComparison) { - modelCtrl.$setViewValue(trueValue); - } else { - modelCtrl.$setViewValue(falseValue); - } - return modelCtrl.$modelValue; - }, function(newVal, oldVal) { - scope.checked = modelCtrl.$modelValue === trueValue; - }, true); - - // On click swap value and trigger onChange function - elem.bind('click', function() { - scope.$apply(function() { - if(modelCtrl.$modelValue === falseValue) { - modelCtrl.$setViewValue(trueValue); - } else { - modelCtrl.$setViewValue(falseValue); - } - }); - }); - } - }; -}]); diff --git a/src/angular-bootstrap-checkbox.less b/src/angular-bootstrap-checkbox.less deleted file mode 100644 index 51c79bc..0000000 --- a/src/angular-bootstrap-checkbox.less +++ /dev/null @@ -1,43 +0,0 @@ -.ui-checkbox { - width: 16px; - height: 16px; - position: relative; - margin-right: 5px; - - i { - position: absolute; - left: 1px; - top: 1px; - } - - &.large { - height: 30px; - width: 30px; - - i { - left: 3px; - top: 3px; - font-size: 20px; - } - } - - &.larger { - height: 34px; - width: 34px; - i { - left: 4px; - top: 4px; - font-size: 22px; - } - } - - &.largest { - height: 45px; - width: 45px; - i { - left: 6px; - top: 6px; - font-size: 30px; - } - } -} diff --git a/src/ez-checkbox.js b/src/ez-checkbox.js new file mode 100644 index 0000000..e44210d --- /dev/null +++ b/src/ez-checkbox.js @@ -0,0 +1,48 @@ +'use strict'; + +angular.module('ez.checkbox', []) +.directive('ezCheckbox', [function() { + return { + require: 'ngModel', + restrict: 'EA', + replace: 'true', + transclude: true, + template: '' + + '' + + '' + + '', + scope: {}, + link: function(scope, elem, attrs, modelCtrl) { + var trueValue = true; + var falseValue = false; + + if (attrs.hasOwnProperty('trueValue')) { + trueValue = attrs.trueValue; + } + + // invert truthyness if invert is defined + if (attrs.hasOwnProperty('invert')) { + falseValue = trueValue; + trueValue = false; + } + + modelCtrl.$render = function() { + if (modelCtrl.$modelValue === trueValue) { + scope.checked = true; + } else { + scope.checked = false; + } + }; + + scope.toggle = function() { + if (modelCtrl.$modelValue === falseValue) { + modelCtrl.$setViewValue(trueValue); + } else { + modelCtrl.$setViewValue(falseValue); + } + + modelCtrl.$render(); + }; + } + }; +}]); diff --git a/src/ez-checkbox.less b/src/ez-checkbox.less new file mode 100644 index 0000000..c6a9a3c --- /dev/null +++ b/src/ez-checkbox.less @@ -0,0 +1,14 @@ +.ez-checkbox { + position: relative; + margin-right: 5px; + color: #333; + cursor: pointer; + + &:hover { + text-decoration: none; + } + + i { + cursor: pointer; + } +} diff --git a/styles.png b/styles.png deleted file mode 100644 index cdbf36266f7b59fe16ee5574785c130600bbd816..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 9042 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 diff --git a/test.js b/test.js deleted file mode 100644 index 18ce87a..0000000 --- a/test.js +++ /dev/null @@ -1,353 +0,0 @@ -"use strict"; - -describe("Checkbutton Tests", function() { - it("Minimal Example", function() { - browser().navigateTo("index.html"); - - // Check if the checkbox has been replaced with template - expect(element("#checkbox0").attr("class")).toBe("btn btn-default ng-isolate-scope ng-valid btn-xs ng-dirty"); - - - // Check if the checkbox is unchecked - expect(element("#checkbox0 > span:eq(0)").attr("class")).toBe("glyphicon"); - expect(element("#checkboxModel0").text()).toBe("false"); - - - // Click checkbox to be checked - element("#checkbox0").click(); - expect(element("#checkbox0 > span:eq(0)").attr("class")).toBe("glyphicon glyphicon-ok"); - expect(element("#checkboxModel0").text()).toBe("true"); - - // Click the checkbox to be unchecked - element("#checkbox0").click(); - expect(element("#checkbox0 > span:eq(0)").attr("class")).toBe("glyphicon"); - expect(element("#checkboxModel0").text()).toBe("false"); - - - // Click external trigger for true - element("#checkboxButton0true").click(); - expect(element("#checkbox0 > span:eq(0)").attr("class")).toBe("glyphicon glyphicon-ok"); - expect(element("#checkboxModel0").text()).toBe("true"); - - // Click external trigger for false - element("#checkboxButton0false").click(); - expect(element("#checkbox0 > span:eq(0)").attr("class")).toBe("glyphicon"); - expect(element("#checkboxModel0").text()).toBe("false"); - }); - - it("Example with Custom Name", function() { - browser().navigateTo("index.html"); - - // Check if the checkbox has been replaced with template - expect(element("#checkbox1").attr("class")).toBe("btn btn-default ng-isolate-scope ng-valid btn-xs ng-dirty"); - - - // Check if the name is set correctly - expect(element("#checkbox1").attr("name")).toBe("custom-name"); - - - // Check if the checkbox is unchecked - expect(element("#checkbox1 > span:eq(0)").attr("class")).toBe("glyphicon"); - expect(element("#checkboxModel1").text()).toBe("false"); - - - // Click checkbox to be checked - element("#checkbox1").click(); - expect(element("#checkbox1 > span:eq(0)").attr("class")).toBe("glyphicon glyphicon-ok"); - expect(element("#checkboxModel1").text()).toBe("true"); - - // Click the checkbox to be unchecked - element("#checkbox1").click(); - expect(element("#checkbox1 > span:eq(0)").attr("class")).toBe("glyphicon"); - expect(element("#checkboxModel1").text()).toBe("false"); - - - // Click external trigger for true - element("#checkboxButton1true").click(); - expect(element("#checkbox1 > span:eq(0)").attr("class")).toBe("glyphicon glyphicon-ok"); - expect(element("#checkboxModel1").text()).toBe("true"); - - // Click external trigger for false - element("#checkboxButton1false").click(); - expect(element("#checkbox1 > span:eq(0)").attr("class")).toBe("glyphicon"); - expect(element("#checkboxModel1").text()).toBe("false"); - }); - - it("Example with Custom True Value", function() { - browser().navigateTo("index.html"); - - // Check if the checkbox has been replaced with template - expect(element("#checkbox2").attr("class")).toBe("btn btn-default ng-isolate-scope ng-valid btn-xs ng-dirty"); - - - // Check if the checkbox is unchecked - expect(element("#checkbox2 > span:eq(0)").attr("class")).toBe("glyphicon"); - expect(element("#checkboxModel2").text()).toBe("false"); - - - // Click checkbox to be checked - element("#checkbox2").click(); - expect(element("#checkbox2 > span:eq(0)").attr("class")).toBe("glyphicon glyphicon-ok"); - expect(element("#checkboxModel2").text()).toBe("The Truth"); - - // Click the checkbox to be unchecked - element("#checkbox2").click(); - expect(element("#checkbox2 > span:eq(0)").attr("class")).toBe("glyphicon"); - expect(element("#checkboxModel2").text()).toBe("false"); - - - // Click external trigger for true - element("#checkboxButton2true").click(); - expect(element("#checkbox2 > span:eq(0)").attr("class")).toBe("glyphicon glyphicon-ok"); - expect(element("#checkboxModel2").text()).toBe("The Truth"); - - // Click external trigger for false - element("#checkboxButton2false").click(); - expect(element("#checkbox2 > span:eq(0)").attr("class")).toBe("glyphicon"); - expect(element("#checkboxModel2").text()).toBe("false"); - - // Click external trigger for truth - element("#checkboxButton2truth").click(); - expect(element("#checkbox2 > span:eq(0)").attr("class")).toBe("glyphicon glyphicon-ok"); - expect(element("#checkboxModel2").text()).toBe("The Truth"); - }); - - it("Example with Custom False Value", function() { - browser().navigateTo("index.html"); - - // Check if the checkbox has been replaced with template - expect(element("#checkbox3").attr("class")).toBe("btn btn-default ng-isolate-scope ng-valid btn-xs ng-dirty"); - - - // Check if the checkbox is unchecked - expect(element("#checkbox3 > span:eq(0)").attr("class")).toBe("glyphicon"); - expect(element("#checkboxModel3").text()).toBe("The Untruth"); - - - // Click checkbox to be checked - element("#checkbox3").click(); - expect(element("#checkbox3 > span:eq(0)").attr("class")).toBe("glyphicon glyphicon-ok"); - expect(element("#checkboxModel3").text()).toBe("true"); - - // Click the checkbox to be unchecked - element("#checkbox3").click(); - expect(element("#checkbox3 > span:eq(0)").attr("class")).toBe("glyphicon"); - expect(element("#checkboxModel3").text()).toBe("The Untruth"); - - - // Click external trigger for true - element("#checkboxButton3true").click(); - expect(element("#checkbox3 > span:eq(0)").attr("class")).toBe("glyphicon glyphicon-ok"); - expect(element("#checkboxModel3").text()).toBe("true"); - - // Click external trigger for false - element("#checkboxButton3false").click(); - expect(element("#checkbox3 > span:eq(0)").attr("class")).toBe("glyphicon"); - expect(element("#checkboxModel3").text()).toBe("The Untruth"); - - - // Click checkbox to be checked - element("#checkbox3").click(); - expect(element("#checkbox3 > span:eq(0)").attr("class")).toBe("glyphicon glyphicon-ok"); - expect(element("#checkboxModel3").text()).toBe("true"); - - // Click external trigger for untruth - element("#checkboxButton3untruth").click(); - expect(element("#checkbox3 > span:eq(0)").attr("class")).toBe("glyphicon"); - expect(element("#checkboxModel3").text()).toBe("The Untruth"); - }); - - it("Example with Custom True and False Value", function() { - browser().navigateTo("index.html"); - - // Check if the checkbox has been replaced with template - expect(element("#checkbox4").attr("class")).toBe("btn btn-default ng-isolate-scope ng-valid btn-xs ng-dirty"); - - - // Check if the checkbox is unchecked - expect(element("#checkbox4 > span:eq(0)").attr("class")).toBe("glyphicon"); - expect(element("#checkboxModel4").text()).toBe("The Untruth"); - - - // Click checkbox to be checked - element("#checkbox4").click(); - expect(element("#checkbox4 > span:eq(0)").attr("class")).toBe("glyphicon glyphicon-ok"); - expect(element("#checkboxModel4").text()).toBe("The Truth"); - - // Click the checkbox to be unchecked - element("#checkbox4").click(); - expect(element("#checkbox4 > span:eq(0)").attr("class")).toBe("glyphicon"); - expect(element("#checkboxModel4").text()).toBe("The Untruth"); - - - // Click external trigger for true - element("#checkboxButton4true").click(); - expect(element("#checkbox4 > span:eq(0)").attr("class")).toBe("glyphicon glyphicon-ok"); - expect(element("#checkboxModel4").text()).toBe("The Truth"); - - // Click external trigger for false - element("#checkboxButton4false").click(); - expect(element("#checkbox4 > span:eq(0)").attr("class")).toBe("glyphicon"); - expect(element("#checkboxModel4").text()).toBe("The Untruth"); - - // Click external trigger for truth - element("#checkboxButton4truth").click(); - expect(element("#checkbox4 > span:eq(0)").attr("class")).toBe("glyphicon glyphicon-ok"); - expect(element("#checkboxModel4").text()).toBe("The Truth"); - - // Click external trigger for untruth - element("#checkboxButton4untruth").click(); - expect(element("#checkbox4 > span:eq(0)").attr("class")).toBe("glyphicon"); - expect(element("#checkboxModel4").text()).toBe("The Untruth"); - }); - - it("Minimal Example", function() { - browser().navigateTo("index.html"); - - // Check if the checkbox has been replaced with template - expect(element("#checkbox5").attr("class")).toBe("btn btn-default ng-isolate-scope ng-valid btn-xs ng-dirty"); - - - // Check if the checkbox is unchecked - expect(element("#checkbox5 > span:eq(0)").attr("class")).toBe("glyphicon"); - expect(element("#checkboxModel5").text()).toBe("false"); - expect(element("#changes").text()).toBe("0"); - - - // Click checkbox to be checked - element("#checkbox5").click(); - expect(element("#checkbox5 > span:eq(0)").attr("class")).toBe("glyphicon glyphicon-ok"); - expect(element("#checkboxModel5").text()).toBe("true"); - expect(element("#changes").text()).toBe("1"); - - // Click the checkbox to be unchecked - element("#checkbox5").click(); - expect(element("#checkbox5 > span:eq(0)").attr("class")).toBe("glyphicon"); - expect(element("#checkboxModel5").text()).toBe("false"); - expect(element("#changes").text()).toBe("2"); - - - // Click external trigger for true - element("#checkboxButton5true").click(); - expect(element("#checkbox5 > span:eq(0)").attr("class")).toBe("glyphicon glyphicon-ok"); - expect(element("#checkboxModel5").text()).toBe("true"); - expect(element("#changes").text()).toBe("2"); - - // Click external trigger for false - element("#checkboxButton5false").click(); - expect(element("#checkbox5 > span:eq(0)").attr("class")).toBe("glyphicon"); - expect(element("#checkboxModel5").text()).toBe("false"); - expect(element("#changes").text()).toBe("2"); - }); - - it("Example Disabled", function() { - browser().navigateTo("index.html"); - - // Check if the checkbox has been replaced with template - expect(element("#checkbox6").attr("class")).toBe("btn btn-default ng-isolate-scope ng-valid btn-xs ng-dirty"); - - - // Check if the checkbox is unchecked and enabled - expect(element("#checkbox6 > span:eq(0)").attr("class")).toBe("glyphicon"); - expect(element("#checkboxModel6").text()).toBe("false"); - expect(element("#checkbox6").attr("disabled")).toBe(undefined); - - - // Click checkbox to be checked - element("#checkbox6").click(); - expect(element("#checkbox6 > span:eq(0)").attr("class")).toBe("glyphicon glyphicon-ok"); - expect(element("#checkboxModel6").text()).toBe("true"); - - // Click the checkbox to be unchecked - element("#checkbox6").click(); - expect(element("#checkbox6 > span:eq(0)").attr("class")).toBe("glyphicon"); - expect(element("#checkboxModel6").text()).toBe("false"); - - - // Click external trigger for true - element("#checkboxButton6true").click(); - expect(element("#checkbox6 > span:eq(0)").attr("class")).toBe("glyphicon glyphicon-ok"); - expect(element("#checkboxModel6").text()).toBe("true"); - - // Click external trigger for false - element("#checkboxButton6false").click(); - expect(element("#checkbox6 > span:eq(0)").attr("class")).toBe("glyphicon"); - expect(element("#checkboxModel6").text()).toBe("false"); - - - // Disable checkbox - element("#checkboxButton6disable").click(); - expect(element("#checkbox6").attr("disabled")).toBe("disabled"); - - // Click disabled checkbox - element("#checkbox6").click(); - expect(element("#checkbox6 > span:eq(0)").attr("class")).toBe("glyphicon"); - expect(element("#checkboxModel6").text()).toBe("false"); - - // Click external trigger for true - element("#checkboxButton6true").click(); - expect(element("#checkbox6 > span:eq(0)").attr("class")).toBe("glyphicon glyphicon-ok"); - expect(element("#checkboxModel6").text()).toBe("true"); - - // Click external trigger for false - element("#checkboxButton6false").click(); - expect(element("#checkbox6 > span:eq(0)").attr("class")).toBe("glyphicon"); - expect(element("#checkboxModel6").text()).toBe("false"); - - - // Enable checkbox again - element("#checkboxButton6enable").click(); - expect(element("#checkbox6").attr("disabled")).toBe(undefined); - }); - - it("Example Different Sizes", function() { - browser().navigateTo("index.html"); - - // Check if the checkbox has been replaced with template - expect(element("#checkbox7a").attr("class")).toBe("btn btn-default ng-isolate-scope ng-valid btn-xs ng-dirty"); - expect(element("#checkbox7b").attr("class")).toBe("btn btn-default ng-isolate-scope ng-valid btn-sm ng-dirty"); - expect(element("#checkbox7c").attr("class")).toBe("btn btn-default ng-isolate-scope ng-valid ng-dirty"); - expect(element("#checkbox7d").attr("class")).toBe("btn btn-default ng-isolate-scope ng-valid btn-lg ng-dirty"); - expect(element("#checkbox8a").attr("class")).toBe("btn btn-default ng-isolate-scope ng-valid btn-xs ng-dirty"); - expect(element("#checkbox8b").attr("class")).toBe("btn btn-default ng-isolate-scope ng-valid btn-sm ng-dirty"); - expect(element("#checkbox8c").attr("class")).toBe("btn btn-default ng-isolate-scope ng-valid ng-dirty"); - expect(element("#checkbox8d").attr("class")).toBe("btn btn-default ng-isolate-scope ng-valid btn-lg ng-dirty"); - - expect(element("#checkbox7a").css("width")).toBe("22px"); - expect(element("#checkbox7b").css("width")).toBe("30px"); - expect(element("#checkbox7c").css("width")).toBe("34px"); - expect(element("#checkbox7d").css("width")).toBe("45px"); - expect(element("#checkbox8a").css("width")).toBe("22px"); - expect(element("#checkbox8b").css("width")).toBe("30px"); - expect(element("#checkbox8c").css("width")).toBe("34px"); - expect(element("#checkbox8d").css("width")).toBe("45px"); - - expect(element("#checkbox7a").css("height")).toBe("22px"); - expect(element("#checkbox7b").css("height")).toBe("30px"); - expect(element("#checkbox7c").css("height")).toBe("34px"); - expect(element("#checkbox7d").css("height")).toBe("45px"); - expect(element("#checkbox8a").css("height")).toBe("22px"); - expect(element("#checkbox8b").css("height")).toBe("30px"); - expect(element("#checkbox8c").css("height")).toBe("34px"); - expect(element("#checkbox8d").css("height")).toBe("45px"); - }); - - it("Example Different Styles", function() { - browser().navigateTo("index.html"); - - // Check if the checkbox has been replaced with template - expect(element("#checkbox9a").attr("class")).toBe("btn btn-default ng-isolate-scope ng-valid btn-xs ng-dirty"); - expect(element("#checkbox9b").attr("class")).toBe("btn-primary btn btn-default ng-isolate-scope ng-valid btn-xs ng-dirty"); - expect(element("#checkbox9c").attr("class")).toBe("btn-success btn btn-default ng-isolate-scope ng-valid btn-xs ng-dirty"); - expect(element("#checkbox9d").attr("class")).toBe("btn-info btn btn-default ng-isolate-scope ng-valid btn-xs ng-dirty"); - expect(element("#checkbox9e").attr("class")).toBe("btn-warning btn btn-default ng-isolate-scope ng-valid btn-xs ng-dirty"); - expect(element("#checkbox9f").attr("class")).toBe("btn-danger btn btn-default ng-isolate-scope ng-valid btn-xs ng-dirty"); - - expect(element("#checkbox9a").css("background-color")).toBe("rgb(255, 255, 255)"); - expect(element("#checkbox9b").css("background-color")).toBe("rgb(66, 139, 202)"); - expect(element("#checkbox9c").css("background-color")).toBe("rgb(92, 184, 92)"); - expect(element("#checkbox9d").css("background-color")).toBe("rgb(91, 192, 222)"); - expect(element("#checkbox9e").css("background-color")).toBe("rgb(240, 173, 78)"); - expect(element("#checkbox9f").css("background-color")).toBe("rgb(217, 83, 79)"); - }); -});