From 9b855bb6d4709b761b3127345807acc3c6b7ce15 Mon Sep 17 00:00:00 2001 From: Tony Wang Date: Mon, 7 Dec 2015 21:12:16 +0800 Subject: [PATCH] fix issue #1 --- dist/angular-bootstrap-toggle.js | 201 +++++++++++++++------------ dist/angular-bootstrap-toggle.min.js | 2 +- gulpfile.js | 2 +- src/angular-bootstrap-toggle.js | 201 +++++++++++++++------------ 4 files changed, 232 insertions(+), 174 deletions(-) diff --git a/dist/angular-bootstrap-toggle.js b/dist/angular-bootstrap-toggle.js index 75c46b6..c808ba5 100644 --- a/dist/angular-bootstrap-toggle.js +++ b/dist/angular-bootstrap-toggle.js @@ -21,123 +21,152 @@ /** * Type: string * Default: '' - * Description: Size of the toggle. Possible values are btn-lg, btn-sm, btn-xs. + * 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 + * 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 + * 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. + * 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) { - //$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_) { - ngModelCtrl = ngModelCtrl_; - - ngModelCtrl.$render = function () { - self.render(); - }; - - ngModelCtrl.$viewChangeListeners.push(function () { - $scope.$eval($attrs.ngChange); + ['$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]; }); - 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); + this.init = function (ngModelCtrl_) { + ngModelCtrl = ngModelCtrl_; - var divs = self.element.find('div'); - var wrapperWidth = divs[0].offsetWidth; - var wrapperHeight = divs[1].offsetHeight; + self.computeStyle(); - $scope.wrapperStyle = {}; - if (wrapperWidth < wrapperComputedWidth) { - $scope.wrapperStyle.width = wrapperComputedWidth + 'px'; - } + ngModelCtrl.$render = function () { + self.toggle(); + }; - if (wrapperHeight < wrapperComputedHeight && self.size != 'btn-xs' && self.size != 'btn-sm') { - $scope.wrapperStyle.height = wrapperComputedHeight + 'px'; - } - $scope.onClass = [self.onstyle, self.size, 'toggle-on']; - $scope.offClass = [self.offstyle, self.size, 'toggle-off']; - $scope.handleClass = [self.size, 'toggle-handle']; - }; + ngModelCtrl.$viewChangeListeners.push(function () { + $scope.$eval($attrs.ngChange); + }); + }; - this.render = 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]; - } - }; + 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'; + } + + if (wrapperHeight < wrapperComputedHeight && self.size !== 'btn-xs' && self.size !== 'btn-sm') { + $scope.wrapperStyle.height = wrapperComputedHeight + 'px'; + } else { + $scope.wrapperStyle.height = wrapperHeight + 'px'; + } + + $scope.onClass = [self.onstyle, self.size, 'toggle-on']; + $scope.offClass = [self.offstyle, self.size, 'toggle-off']; + $scope.handleClass = [self.size, 'toggle-handle']; + }; - $scope.onSwitch = function (evt) { - ngModelCtrl.$setViewValue(!ngModelCtrl.$viewValue); - ngModelCtrl.$render(); - }; + 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]; + } + }; - // Watchable date attributes - angular.forEach(['ngModel'], function (key) { - var watch = $scope.$parent.$watch($attrs[key], function (value) { + $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(); + }); }); - $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', - link: function (scope, element, attrs, ctrls) { - var toggleCtrl = ctrls[0], ngModelCtrl = ctrls[1]; - toggleCtrl.element = element; - toggleCtrl.init(ngModelCtrl); - } - }; - } - ); + return { + restrict: 'E', + transclude: true, + template: '
' + + '
' + + '' + + '' + + '' + + '
' + + '
', + scope: { + bindModel: '=ngModel' + }, + require: ['toggle', 'ngModel'], + controller: 'ToggleController', + controllerAs: 'toggle', + link: function (scope, element, attrs, ctrls) { + var toggleCtrl = ctrls[0], ngModelCtrl = ctrls[1]; + toggleCtrl.element = element; + toggleCtrl.init(ngModelCtrl); + } + }; + } + ); })(); diff --git a/dist/angular-bootstrap-toggle.min.js b/dist/angular-bootstrap-toggle.min.js index 7a0231c..4b647b6 100644 --- a/dist/angular-bootstrap-toggle.min.js +++ b/dist/angular-bootstrap-toggle.min.js @@ -1 +1 @@ -!function(){"use strict";angular.module("ui.toggle",[]).value("$toggleSuppressError",!1).constant("toggleConfig",{on:"On",off:"Off",size:"",onstyle:"btn-primary",offstyle:"btn-default",style:""}).controller("ToggleController",["$scope","$attrs","$interpolate","$log","toggleConfig","$toggleSuppressError",function(e,t,n,l,s){var o=this,a={$setViewValue:angular.noop};angular.forEach(["on","off","size","onstyle","offstyle","style"],function(l,a){o[l]=angular.isDefined(t[l])?6>a?n(t[l])(e.$parent):e.$parent.$eval(t[l]):s[l]}),this.init=function(n){a=n,a.$render=function(){o.render()},a.$viewChangeListeners.push(function(){e.$eval(t.ngChange)});var l=o.element.find("label");angular.element(l[0]).html(o.on),angular.element(l[1]).html(o.off);var s=o.element.find("span"),i=o.width||Math.max(l[0].offsetWidth,l[1].offsetWidth)+s[0].offsetWidth/2,r=o.height||Math.max(l[0].offsetHeight,l[1].offsetHeight),f=o.element.find("div"),g=f[0].offsetWidth,c=f[1].offsetHeight;e.wrapperStyle={},i>g&&(e.wrapperStyle.width=i+"px"),r>c&&"btn-xs"!=o.size&&"btn-sm"!=o.size&&(e.wrapperStyle.height=r+"px"),e.onClass=[o.onstyle,o.size,"toggle-on"],e.offClass=[o.offstyle,o.size,"toggle-off"],e.handleClass=[o.size,"toggle-handle"]},this.render=function(){this.isOn=angular.isDefined(a.$viewValue)?a.$viewValue:!1,e.wrapperClass=this.isOn?[o.onstyle,o.size,o.style]:[o.offstyle,"off ",o.size,o.style]},e.onSwitch=function(){a.$setViewValue(!a.$viewValue),a.$render()},angular.forEach(["ngModel"],function(n){var l=e.$parent.$watch(t[n],function(){a.$render()});e.$parent.$on("$destroy",function(){l()})})}]).directive("toggle",function(){return{restrict:"E",transclude:!0,template:'
',scope:{bindModel:"=ngModel"},require:["toggle","ngModel"],controller:"ToggleController",controllerAs:"toggle",link:function(e,t,n,l){var s=l[0],o=l[1];s.element=t,s.init(o)}}})}(); \ No newline at end of file +!function(){"use strict";angular.module("ui.toggle",[]).value("$toggleSuppressError",!1).constant("toggleConfig",{on:"On",off:"Off",size:"",onstyle:"btn-primary",offstyle:"btn-default",style:""}).controller("ToggleController",["$scope","$attrs","$interpolate","$log","toggleConfig","$toggleSuppressError",function(e,t,n,l,o){var s=this,a={$setViewValue:angular.noop};angular.forEach(["on","off","size","onstyle","offstyle","style"],function(l,a){s[l]=angular.isDefined(t[l])?6>a?n(t[l])(e.$parent):e.$parent.$eval(t[l]):o[l]}),this.init=function(n){a=n,s.computeStyle(),a.$render=function(){s.toggle()},a.$viewChangeListeners.push(function(){e.$eval(t.ngChange)})},this.computeStyle=function(){var t=s.element.find("label");angular.element(t[0]).html(s.on),angular.element(t[1]).html(s.off);var n=s.element.find("span"),l=s.width||Math.max(t[0].offsetWidth,t[1].offsetWidth)+n[0].offsetWidth/2,o=s.height||Math.max(t[0].offsetHeight,t[1].offsetHeight),a=s.element.find("div"),i=a[0].offsetWidth,r=a[1].offsetHeight;e.wrapperStyle={},e.wrapperStyle.width=l>i?l+"px":i+"px",e.wrapperStyle.height=o>r&&"btn-xs"!==s.size&&"btn-sm"!==s.size?o+"px":r+"px",e.onClass=[s.onstyle,s.size,"toggle-on"],e.offClass=[s.offstyle,s.size,"toggle-off"],e.handleClass=[s.size,"toggle-handle"]},this.toggle=function(){this.isOn=angular.isDefined(a.$viewValue)?a.$viewValue:!1,e.wrapperClass=this.isOn?[s.onstyle,s.size,s.style]:[s.offstyle,"off ",s.size,s.style]},e.onSwitch=function(){a.$setViewValue(!a.$viewValue),a.$render()},angular.forEach(["ngModel"],function(n){var l=e.$parent.$watch(t[n],function(){a.$render()});e.$parent.$on("$destroy",function(){l()})}),angular.forEach(["on","off","size","onstyle","offstyle","style"],function(e){t.$observe(e,function(t){s[e]!==t&&(s[e]=t,s.computeStyle())})})}]).directive("toggle",function(){return{restrict:"E",transclude:!0,template:'
',scope:{bindModel:"=ngModel"},require:["toggle","ngModel"],controller:"ToggleController",controllerAs:"toggle",link:function(e,t,n,l){var o=l[0],s=l[1];o.element=t,o.init(s)}}})}(); \ No newline at end of file diff --git a/gulpfile.js b/gulpfile.js index eb434ab..26b6a41 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -36,7 +36,7 @@ gulp.task('less', function () { .pipe(gulp.dest('./dist/')) .pipe(minifyCSS({compatibility: 'ie8'})) .pipe(rename(function (path) { - path.basename += ".min"; + path.basename += '.min'; })) .pipe(gulp.dest('./dist')); }); diff --git a/src/angular-bootstrap-toggle.js b/src/angular-bootstrap-toggle.js index 75c46b6..c808ba5 100644 --- a/src/angular-bootstrap-toggle.js +++ b/src/angular-bootstrap-toggle.js @@ -21,123 +21,152 @@ /** * Type: string * Default: '' - * Description: Size of the toggle. Possible values are btn-lg, btn-sm, btn-xs. + * 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 + * 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 + * 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. + * 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) { - //$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_) { - ngModelCtrl = ngModelCtrl_; - - ngModelCtrl.$render = function () { - self.render(); - }; - - ngModelCtrl.$viewChangeListeners.push(function () { - $scope.$eval($attrs.ngChange); + ['$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]; }); - 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); + this.init = function (ngModelCtrl_) { + ngModelCtrl = ngModelCtrl_; - var divs = self.element.find('div'); - var wrapperWidth = divs[0].offsetWidth; - var wrapperHeight = divs[1].offsetHeight; + self.computeStyle(); - $scope.wrapperStyle = {}; - if (wrapperWidth < wrapperComputedWidth) { - $scope.wrapperStyle.width = wrapperComputedWidth + 'px'; - } + ngModelCtrl.$render = function () { + self.toggle(); + }; - if (wrapperHeight < wrapperComputedHeight && self.size != 'btn-xs' && self.size != 'btn-sm') { - $scope.wrapperStyle.height = wrapperComputedHeight + 'px'; - } - $scope.onClass = [self.onstyle, self.size, 'toggle-on']; - $scope.offClass = [self.offstyle, self.size, 'toggle-off']; - $scope.handleClass = [self.size, 'toggle-handle']; - }; + ngModelCtrl.$viewChangeListeners.push(function () { + $scope.$eval($attrs.ngChange); + }); + }; - this.render = 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]; - } - }; + 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'; + } + + if (wrapperHeight < wrapperComputedHeight && self.size !== 'btn-xs' && self.size !== 'btn-sm') { + $scope.wrapperStyle.height = wrapperComputedHeight + 'px'; + } else { + $scope.wrapperStyle.height = wrapperHeight + 'px'; + } + + $scope.onClass = [self.onstyle, self.size, 'toggle-on']; + $scope.offClass = [self.offstyle, self.size, 'toggle-off']; + $scope.handleClass = [self.size, 'toggle-handle']; + }; - $scope.onSwitch = function (evt) { - ngModelCtrl.$setViewValue(!ngModelCtrl.$viewValue); - ngModelCtrl.$render(); - }; + 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]; + } + }; - // Watchable date attributes - angular.forEach(['ngModel'], function (key) { - var watch = $scope.$parent.$watch($attrs[key], function (value) { + $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(); + }); }); - $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', - link: function (scope, element, attrs, ctrls) { - var toggleCtrl = ctrls[0], ngModelCtrl = ctrls[1]; - toggleCtrl.element = element; - toggleCtrl.init(ngModelCtrl); - } - }; - } - ); + return { + restrict: 'E', + transclude: true, + template: '
' + + '
' + + '' + + '' + + '' + + '
' + + '
', + scope: { + bindModel: '=ngModel' + }, + require: ['toggle', 'ngModel'], + controller: 'ToggleController', + controllerAs: 'toggle', + link: function (scope, element, attrs, ctrls) { + var toggleCtrl = ctrls[0], ngModelCtrl = ctrls[1]; + toggleCtrl.element = element; + toggleCtrl.init(ngModelCtrl); + } + }; + } + ); })();