Added ngDisabled property

indrimuska · Oct 31, 2015 · 8e51807 · 8e51807
1 parent 3c243e7
commit 8e51807
Show file tree

Hide file tree

Showing 8 changed files with 31 additions and 17 deletions.
diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "angular-switcher",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "authors": [
     "Indri Muska <indrimuska@gmail.com>"
   ],

diff --git a/dist/angular-switcher.css b/dist/angular-switcher.css
@@ -15,4 +15,6 @@
 
 .switcher.active .switcher-line:after { left: 100%; -webkit-transform: translate(-100%, -50%); transform: translate(-100%, -50%); }
 .switcher.active .switcher-label.true { color: #4ecb32; }
-.switcher.active .switcher-label.false { color: inherit; }
+.switcher.active .switcher-label.false { color: inherit; }
+
+.switcher.disabled { opacity: .7; }
diff --git a/dist/angular-switcher.js b/dist/angular-switcher.js
@@ -7,25 +7,26 @@
 			this.require     = 'ngModel';
 			this.scope       = {
 				model:      '=ngModel',
+				disabled:   '=?ngDisabled',
 				trueValue:  '=?',
 				trueLabel:  '@?',
 				falseValue: '=?',
 				falseLabel: '@?',
 				change:     '&?ngChange'
 			};
 			this.template    =
-				'<div class="switcher" ng-class="{active:shadowModel}">' +
-					'<span class="switcher-label false" ng-bind-html="trustedHtml(falseLabel)" ng-click="shadowModel=false"></span>' +
+				'<div class="switcher" ng-class="{active:shadowModel,disabled:disabled}">' +
+					'<span class="switcher-label false" ng-bind-html="trustedHtml(falseLabel)" ng-click="set(false)"></span>' +
 					'<label class="switcher-line">' +
-						'<input type="checkbox" ng-model="shadowModel" ng-change="onChange()">' +
+						'<input type="checkbox" ng-model="shadowModel" ng-disabled="disabled" ng-change="onChange()">' +
 					'</label>' +
-					'<span class="switcher-label true" ng-bind-html="trustedHtml(trueLabel)" ng-click="shadowModel=true"></span>' +
+					'<span class="switcher-label true" ng-bind-html="trustedHtml(trueLabel)" ng-click="set(true)"></span>' +
 				'</div>';
 			$sce = sce;
 		};
 		Switcher.prototype.$inject = ['$sce'];
 		Switcher.prototype.link = function ($scope, $element, $attrs, $controller) {
-			var defaultProperties = { trueValue:  true, falseValue: false },
+			var defaultProperties = { trueValue:  true, falseValue: false, disabled: false },
 				defaultAttributes = { trueLabel:  'On', falseLabel: 'Off' };
 
 			angular.forEach(defaultProperties, function (value, key) {
@@ -40,6 +41,10 @@
 			$scope.trustedHtml = function (value) {
 				return $sce.trustAsHtml(value);
 			};
+			$scope.set = function (value) {
+				if ($scope.disabled) return;
+				$scope.shadowModel = value;
+			};
 			$scope.onChange = function () {
 				var oldValue = $scope.model,
 					newValue = $scope.shadowModel ? $scope.trueValue : $scope.falseValue;

diff --git a/dist/angular-switcher.min.css b/dist/angular-switcher.min.css
diff --git a/dist/angular-switcher.min.js b/dist/angular-switcher.min.js
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "angular-switcher",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "description": "Angular Switcher is an AngularJS directive that models toggle switches.",
   "main": "Gruntfile.js",
   "repository": {

diff --git a/src/angular-switcher.css b/src/angular-switcher.css
@@ -15,4 +15,6 @@
 
 .switcher.active .switcher-line:after { left: 100%; -webkit-transform: translate(-100%, -50%); transform: translate(-100%, -50%); }
 .switcher.active .switcher-label.true { color: #4ecb32; }
-.switcher.active .switcher-label.false { color: inherit; }
+.switcher.active .switcher-label.false { color: inherit; }
+
+.switcher.disabled { opacity: .7; }
diff --git a/src/angular-switcher.js b/src/angular-switcher.js
@@ -7,25 +7,26 @@
 			this.require     = 'ngModel';
 			this.scope       = {
 				model:      '=ngModel',
+				disabled:   '=?ngDisabled',
 				trueValue:  '=?',
 				trueLabel:  '@?',
 				falseValue: '=?',
 				falseLabel: '@?',
 				change:     '&?ngChange'
 			};
 			this.template    =
-				'<div class="switcher" ng-class="{active:shadowModel}">' +
-					'<span class="switcher-label false" ng-bind-html="trustedHtml(falseLabel)" ng-click="shadowModel=false"></span>' +
+				'<div class="switcher" ng-class="{active:shadowModel,disabled:disabled}">' +
+					'<span class="switcher-label false" ng-bind-html="trustedHtml(falseLabel)" ng-click="set(false)"></span>' +
 					'<label class="switcher-line">' +
-						'<input type="checkbox" ng-model="shadowModel" ng-change="onChange()">' +
+						'<input type="checkbox" ng-model="shadowModel" ng-disabled="disabled" ng-change="onChange()">' +
 					'</label>' +
-					'<span class="switcher-label true" ng-bind-html="trustedHtml(trueLabel)" ng-click="shadowModel=true"></span>' +
+					'<span class="switcher-label true" ng-bind-html="trustedHtml(trueLabel)" ng-click="set(true)"></span>' +
 				'</div>';
 			$sce = sce;
 		};
 		Switcher.prototype.$inject = ['$sce'];
 		Switcher.prototype.link = function ($scope, $element, $attrs, $controller) {
-			var defaultProperties = { trueValue:  true, falseValue: false },
+			var defaultProperties = { trueValue:  true, falseValue: false, disabled: false },
 				defaultAttributes = { trueLabel:  'On', falseLabel: 'Off' };
 
 			angular.forEach(defaultProperties, function (value, key) {
@@ -40,6 +41,10 @@
 			$scope.trustedHtml = function (value) {
 				return $sce.trustAsHtml(value);
 			};
+			$scope.set = function (value) {
+				if ($scope.disabled) return;
+				$scope.shadowModel = value;
+			};
 			$scope.onChange = function () {
 				var oldValue = $scope.model,
 					newValue = $scope.shadowModel ? $scope.trueValue : $scope.falseValue;