From 0456785b23cf53b576f4a28263bfaadb9d83f67a Mon Sep 17 00:00:00 2001 From: Tony Wang Date: Thu, 4 Aug 2016 10:07:57 +0800 Subject: [PATCH 01/15] update the version number in the package.json --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index bab2c33..b76f0a9 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "angular-bootstrap-toggle", - "version": "0.1.1", + "version": "0.1.2", "author": { "name": "Tony Wang", "email": "ziscloud@gmail.com" From 0d61217dafdd877952ead330c5e586e075050ee6 Mon Sep 17 00:00:00 2001 From: Dmitry Makushin Date: Tue, 21 Feb 2017 09:23:08 +0300 Subject: [PATCH 02/15] fix for double switching --- src/angular-bootstrap-toggle.js | 20 ++++++++------------ 1 file changed, 8 insertions(+), 12 deletions(-) diff --git a/src/angular-bootstrap-toggle.js b/src/angular-bootstrap-toggle.js index 609d532..4572def 100644 --- a/src/angular-bootstrap-toggle.js +++ b/src/angular-bootstrap-toggle.js @@ -56,11 +56,9 @@ // Configuration attributes angular.forEach(['on', 'off', 'size', 'onstyle', 'offstyle', 'style'], function (key, index) { - //$log.info(key + ':' + $attrs[key]); self[key] = angular.isDefined($attrs[key]) ? (index < 6 ? $interpolate($attrs[key])($scope.$parent) : $scope.$parent.$eval($attrs[key])) : toggleConfig[key]; - //$log.info(key + ':' + self[key]); }); this.init = function (ngModelCtrl_) { @@ -110,14 +108,11 @@ this.toggle = function () { if (angular.isDefined(ngModelCtrl.$viewValue)) { - this.isOn = ngModelCtrl.$viewValue; - } else { - this.isOn = false; - } - if (this.isOn) { - $scope.wrapperClass = [self.onstyle, self.size, self.style]; - } else { - $scope.wrapperClass = [self.offstyle, 'off ', self.size, self.style]; + if (ngModelCtrl.$viewValue) { + $scope.wrapperClass = [self.onstyle, self.size, self.style]; + } else { + $scope.wrapperClass = [self.offstyle, 'off ', self.size, self.style]; + } } }; @@ -150,7 +145,8 @@ return { restrict: 'E', transclude: true, - template: '
' + + template: + '
' + '
' + '' + '' + @@ -158,7 +154,7 @@ '
' + '
', scope: { - bindModel: '=ngModel' + ngModel: '=' }, require: ['toggle', 'ngModel'], controller: 'ToggleController', From 65c4d50c887df6c5bc59c54d7b637bbf245caac2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Stanislav=20Nechutn=C3=BD?= Date: Wed, 7 Jun 2017 15:03:33 +0200 Subject: [PATCH 03/15] Add main entry to package.json --- package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/package.json b/package.json index b76f0a9..56970a0 100644 --- a/package.json +++ b/package.json @@ -5,6 +5,7 @@ "name": "Tony Wang", "email": "ziscloud@gmail.com" }, + "main": "dist/angular-bootstrap-toggle.min.js", "dependencies": {}, "devDependencies": { "gulp": "^3.8.7", From f056c5f17eaf752b83348cb4633cf4cb812d70fd Mon Sep 17 00:00:00 2001 From: geniesys Date: Wed, 7 Jun 2017 21:01:01 -0700 Subject: [PATCH 04/15] Greatly improved version - see details. - Adds support for "ng-disabled"; - Fixes "width" and "height" attributes; - Fixes width calculation (width increases with each flip); - Allows to style each toggle widget individually via toggle-style attribute; - Removes "style" attribute due to name conflict; - Other improvements and optimizations; --- dist/angular-bootstrap-toggle.js | 433 +++++++++++++++++++------------ 1 file changed, 262 insertions(+), 171 deletions(-) diff --git a/dist/angular-bootstrap-toggle.js b/dist/angular-bootstrap-toggle.js index 20ef38f..d2e1f0c 100644 --- a/dist/angular-bootstrap-toggle.js +++ b/dist/angular-bootstrap-toggle.js @@ -1,177 +1,268 @@ (function () { - 'use strict'; - - angular.module('ui.toggle', []) - - .value('$toggleSuppressError', false) - - .constant('toggleConfig', { - /** - * Type: string/html - * Default: "On" - * Description: Text of the on toggle - */ - on: 'On', - /** - * Type: string/html - * Default: "Off" - * Description: Text of the off toggle - */ - off: 'Off', - /** - * Type: string - * Default: '' - * Description: Size of the toggle. - * Possible values are btn-lg, btn-sm, btn-xs. - */ - size: '', - /** - * Type: string - * Default: "btn-primary" - * Description: Style of the on toggle. - * Possible values are btn-default, btn-primary, btn-success, btn-info, btn-warning, btn-danger - */ - onstyle: 'btn-primary', - /** - * Type: string - * Default: "btn-default" - * Description: Style of the off toggle. - * Possible values are btn-default, btn-primary,btn- success, btn-info, btn-warning, btn-danger - */ - offstyle: 'btn-default', - /** - * Type: string - * Default: '' - * Description: Appends the value to the class attribute of the toggle. - * This can be used to apply custom styles. Refer to Custom Styles for reference. - */ - style: '' - }) - - .controller('ToggleController', - ['$scope', '$attrs', '$interpolate', '$log', 'toggleConfig', '$toggleSuppressError', - function ($scope, $attrs, $interpolate, $log, toggleConfig, $toggleSuppressError) { - var self = this, - ngModelCtrl = {$setViewValue: angular.noop}; - - // Configuration attributes - angular.forEach(['on', 'off', 'size', 'onstyle', 'offstyle', 'style'], function (key, index) { - self[key] = angular.isDefined($attrs[key]) ? - (index < 6 ? $interpolate($attrs[key])($scope.$parent) : $scope.$parent.$eval($attrs[key])) : - toggleConfig[key]; - }); - - this.init = function (ngModelCtrl_) { - ngModelCtrl = ngModelCtrl_; - - self.computeStyle(); - - ngModelCtrl.$render = function () { - self.toggle(); - }; - - ngModelCtrl.$viewChangeListeners.push(function () { - $scope.$eval($attrs.ngChange); - }); - }; - - this.computeStyle = function () { - var labels = self.element.find('label'); - angular.element(labels[0]).html(self.on); - angular.element(labels[1]).html(self.off); - var spans = self.element.find('span'); - var wrapperComputedWidth = self.width || Math.max(labels[0].offsetWidth, labels[1].offsetWidth) + - (spans[0].offsetWidth / 2); - var wrapperComputedHeight = self.height || Math.max(labels[0].offsetHeight, labels[1].offsetHeight); - - var divs = self.element.find('div'); - var wrapperWidth = divs[0].offsetWidth; - var wrapperHeight = divs[1].offsetHeight; - - $scope.wrapperStyle = {}; - if (wrapperWidth < wrapperComputedWidth) { - $scope.wrapperStyle.width = wrapperComputedWidth + 'px'; - } else { - $scope.wrapperStyle.width = wrapperWidth + 'px'; - } + 'use strict'; - if (wrapperHeight < wrapperComputedHeight && self.size !== 'btn-xs' && self.size !== 'btn-sm') { - $scope.wrapperStyle.height = wrapperComputedHeight + 'px'; - } else { - $scope.wrapperStyle.height = wrapperHeight + 'px'; - } + angular.module('ui.toggle', []) - $scope.onClass = [self.onstyle, self.size, 'toggle-on']; - $scope.offClass = [self.offstyle, self.size, 'toggle-off']; - $scope.handleClass = [self.size, 'toggle-handle']; - }; + .value('$toggleSuppressError', false) - this.toggle = function () { - if (angular.isDefined(ngModelCtrl.$viewValue)) { - this.isOn = ngModelCtrl.$viewValue; - } else { - this.isOn = false; - } - if (this.isOn) { - $scope.wrapperClass = [self.onstyle, self.size, self.style]; - } else { - $scope.wrapperClass = [self.offstyle, 'off ', self.size, self.style]; - } - }; - - $scope.onSwitch = function (evt) { - ngModelCtrl.$setViewValue(!ngModelCtrl.$viewValue); - ngModelCtrl.$render(); - }; - - // Watchable date attributes - angular.forEach(['ngModel'], function (key) { - var watch = $scope.$parent.$watch($attrs[key], function (value) { - ngModelCtrl.$render(); - }); - $scope.$parent.$on('$destroy', function () { - watch(); - }); - }); - - angular.forEach(['on', 'off', 'size', 'onstyle', 'offstyle', 'style'], function (key) { - $attrs.$observe(key, function (val) { - if (self[key] !== val) { - self[key] = val; - self.computeStyle(); - } - }); - }); - }]) - - .directive('toggle', function () { - return { - restrict: 'E', - transclude: true, - template: '
' + - '
' + - '' + - '' + - '' + - '
' + - '
', - scope: { - bindModel: '=ngModel' - }, - require: ['toggle', 'ngModel'], - controller: 'ToggleController', - controllerAs: 'toggle', - compile: function (element, attrs, transclude) { - return { - pre: function (scope, element, attrs, ctrls) { - var toggleCtrl = ctrls[0], ngModelCtrl = ctrls[1]; - toggleCtrl.element = element; - toggleCtrl.init(ngModelCtrl); - }, - post: function () {} + .constant('toggleConfig', { + /** + * This object defines supported toggle widget attributes and their default values. + * Angular's ngClick and ngDisabled are handled separately. Search code below. + */ + /** + * This version simulates checkbox functionality which can have either true or false value. + * User-defined values are not supported. + */ + 'btnCheckboxFalse': false, + 'btnCheckboxTrue' : true, + /** + * Type: string/html + * Default: "On" + * Description: Text of the on toggle + */ + on: 'On', + /** + * Type: string/html + * Default: "Off" + * Description: Text of the off toggle + */ + off: 'Off', + /** + * Type: string + * Default: '' + * Description: Allows to specify one of the standarg bootstrap's button sizes (class). + * Possible values are btn-lg, btn-sm, btn-xs. + */ + size: '', + /** + * Type: string + * Default: "btn-primary" + * Description: Class for "on" state from one of standard bootstrap button types. + * Possible values: btn-default, btn-primary, btn-success, btn-info, btn-warning, btn-danger + */ + onstyle: 'btn-primary', + /** + * Type: string + * Default: "btn-default" + * Description: Class for "off" state from one of standard bootstrap button types. + * Possible values: btn-default, btn-primary,btn- success, btn-info, btn-warning, btn-danger + */ + offstyle: 'btn-default', + /** + * Type: JSON string + * Default: '' + * Description: Allows to pass user-defined style to the toggle's first immediate child (first DIV inside + * which is what you actually see as widget's outer container). + * This can be used to alter widget's appearance. Use with caution! Note that "width" and "height" values + * will be overwritten by either auto-calculated values or used-specified values from "width" and "height" + * attributes. + * Example: + */ + toggleStyle: '', + /** + * Type: string + * Default: '' + * Description: Allows to force width and height to specified value. Use css notation such as 50px, 1%. etc. + * This is useful when you have a group of toggles with different text in the lables and, therefore, + * would never line-up to the same width. + * Example: + */ + width : '', + height: '', + /** + * Type: boolean + * Default: false + * Description: Defines "disabled" attribute for the directive itself. The ng-disabled dirrective + * manipulates this attribute, plus there is additional code that propagates its value to child elements. + * Applying "disabled" to itself apparently does nothing, but when its value is propagated to + * two child
',scope:{ngModel:"="},require:["toggle","ngModel"],controller:"ToggleController",controllerAs:"toggle",compile:function(e,t,l){return{pre:function(e,t,l,n){var a=n[0],s=n[1];a.element=t,a.init(s)},post:function(){}}}}})}(); From d7b6eb992463462356155462764ae7f40271f5e2 Mon Sep 17 00:00:00 2001 From: geniesys Date: Wed, 7 Jun 2017 21:07:24 -0700 Subject: [PATCH 06/15] Greatly improved version - see details. - Adds support for "ng-disabled"; - Fixes "width" and "height" attributes; - Fixes width calculation (width increases with each flip); - Allows to style each toggle widget individually via toggle-style attribute; - Removes "style" attribute due to name conflict; - Other improvements and optimizations; --- src/angular-bootstrap-toggle.js | 428 ++++++++++++++++++++------------ 1 file changed, 263 insertions(+), 165 deletions(-) diff --git a/src/angular-bootstrap-toggle.js b/src/angular-bootstrap-toggle.js index 4572def..f5605f6 100644 --- a/src/angular-bootstrap-toggle.js +++ b/src/angular-bootstrap-toggle.js @@ -1,170 +1,268 @@ (function () { - 'use strict'; - - angular.module('ui.toggle', []) - - .value('$toggleSuppressError', false) - - .constant('toggleConfig', { - /** - * Type: string/html - * Default: "On" - * Description: Text of the on toggle - */ - on: 'On', - /** - * Type: string/html - * Default: "Off" - * Description: Text of the off toggle - */ - off: 'Off', - /** - * Type: string - * Default: '' - * Description: Size of the toggle. - * Possible values are btn-lg, btn-sm, btn-xs. - */ - size: '', - /** - * Type: string - * Default: "btn-primary" - * Description: Style of the on toggle. - * Possible values are btn-default, btn-primary, btn-success, btn-info, btn-warning, btn-danger - */ - onstyle: 'btn-primary', - /** - * Type: string - * Default: "btn-default" - * Description: Style of the off toggle. - * Possible values are btn-default, btn-primary,btn- success, btn-info, btn-warning, btn-danger - */ - offstyle: 'btn-default', - /** - * Type: string - * Default: '' - * Description: Appends the value to the class attribute of the toggle. - * This can be used to apply custom styles. Refer to Custom Styles for reference. - */ - style: '' - }) - - .controller('ToggleController', - ['$scope', '$attrs', '$interpolate', '$log', 'toggleConfig', '$toggleSuppressError', - function ($scope, $attrs, $interpolate, $log, toggleConfig, $toggleSuppressError) { - var self = this, - ngModelCtrl = {$setViewValue: angular.noop}; - - // Configuration attributes - angular.forEach(['on', 'off', 'size', 'onstyle', 'offstyle', 'style'], function (key, index) { - self[key] = angular.isDefined($attrs[key]) ? - (index < 6 ? $interpolate($attrs[key])($scope.$parent) : $scope.$parent.$eval($attrs[key])) : - toggleConfig[key]; - }); - - this.init = function (ngModelCtrl_) { - ngModelCtrl = ngModelCtrl_; - - self.computeStyle(); - - ngModelCtrl.$render = function () { - self.toggle(); - }; - - ngModelCtrl.$viewChangeListeners.push(function () { - $scope.$eval($attrs.ngChange); - }); - }; - - this.computeStyle = function () { - var labels = self.element.find('label'); - angular.element(labels[0]).html(self.on); - angular.element(labels[1]).html(self.off); - var spans = self.element.find('span'); - var wrapperComputedWidth = self.width || Math.max(labels[0].offsetWidth, labels[1].offsetWidth) + - (spans[0].offsetWidth / 2); - var wrapperComputedHeight = self.height || Math.max(labels[0].offsetHeight, labels[1].offsetHeight); - - var divs = self.element.find('div'); - var wrapperWidth = divs[0].offsetWidth; - var wrapperHeight = divs[1].offsetHeight; - - $scope.wrapperStyle = {}; - if (wrapperWidth < wrapperComputedWidth) { - $scope.wrapperStyle.width = wrapperComputedWidth + 'px'; - } else { - $scope.wrapperStyle.width = wrapperWidth + 'px'; - } + 'use strict'; - if (wrapperHeight < wrapperComputedHeight && self.size !== 'btn-xs' && self.size !== 'btn-sm') { - $scope.wrapperStyle.height = wrapperComputedHeight + 'px'; - } else { - $scope.wrapperStyle.height = wrapperHeight + 'px'; - } + angular.module('ui.toggle', []) + + .value('$toggleSuppressError', false) + + .constant('toggleConfig', { + /** + * This object defines supported toggle widget attributes and their default values. + * Angular's ngClick and ngDisabled are handled separately. Search code below. + */ + /** + * This version simulates checkbox functionality which can have either true or false value. + * User-defined values are not supported. + */ + 'btnCheckboxFalse': false, + 'btnCheckboxTrue' : true, + /** + * Type: string/html + * Default: "On" + * Description: Text of the on toggle + */ + on: 'On', + /** + * Type: string/html + * Default: "Off" + * Description: Text of the off toggle + */ + off: 'Off', + /** + * Type: string + * Default: '' + * Description: Allows to specify one of the standarg bootstrap's button sizes (class). + * Possible values are btn-lg, btn-sm, btn-xs. + */ + size: '', + /** + * Type: string + * Default: "btn-primary" + * Description: Class for "on" state from one of standard bootstrap button types. + * Possible values: btn-default, btn-primary, btn-success, btn-info, btn-warning, btn-danger + */ + onstyle: 'btn-primary', + /** + * Type: string + * Default: "btn-default" + * Description: Class for "off" state from one of standard bootstrap button types. + * Possible values: btn-default, btn-primary,btn- success, btn-info, btn-warning, btn-danger + */ + offstyle: 'btn-default', + /** + * Type: JSON string + * Default: '' + * Description: Allows to pass user-defined style to the toggle's first immediate child (first DIV inside + * which is what you actually see as widget's outer container). + * This can be used to alter widget's appearance. Use with caution! Note that "width" and "height" values + * will be overwritten by either auto-calculated values or used-specified values from "width" and "height" + * attributes. + * Example: + */ + toggleStyle: '', + /** + * Type: string + * Default: '' + * Description: Allows to force width and height to specified value. Use css notation such as 50px, 1%. etc. + * This is useful when you have a group of toggles with different text in the lables and, therefore, + * would never line-up to the same width. + * Example: + */ + width : '', + height: '', + /** + * Type: boolean + * Default: false + * Description: Defines "disabled" attribute for the directive itself. The ng-disabled dirrective + * manipulates this attribute, plus there is additional code that propagates its value to child elements. + * Applying "disabled" to itself apparently does nothing, but when its value is propagated to + * two child