@momsfriendlydevco/angular-ui-toggle - npm Package Compare versions

Comparing version 1.0.2 to 1.0.4

dist/angular-ui-toggle.js

 'use strict';
 
 /**
-* Angular-UI-Toggle
-* Display a simple UI-Toggle control
-*
-* @param {boolean} [ngModel] Model to bind to
-* @param {string} [class] Optional class style to apply
-* @param {boolean} [disabled=false] Whether to disable the toggle
-* @param {boolean} [ngDisabled=false] Alternate binding for `disabled`
-* @param {function} [ngChange] Function to call as ({value}) on value change
-*/
+ * Angular-UI-Toggle
+ * Display a simple UI-Toggle control
+ *
+ * @param {boolean} [ngModel] Model to bind to
+ * @param {string} [class] Optional class style to apply
+ * @param {boolean} [disabled=false] Whether to disable the toggle
+ * @param {boolean} [ngDisabled=false] Alternate binding for `disabled`
+ * @param {function} [ngChange] Function to call as ({value}) on value change
+ */
 angular.module('uiToggle', []).component('uiToggle', {
@@ -17,15 +17,31 @@ bindings: {
 		disabled: '<?',
-		ngChange: '&?',
-		ngDisabled: '<',
-		ngModel: '='
+		ngDisabled: '<?'
 	},
+	require: {
+		ngModel: 'ngModel'
+	},
 	controller: ["$scope", "$attrs", function controller($scope, $attrs) {
+
 		var $ctrl = this;
+
 		$ctrl.$attrs = $attrs || {};
+		$ctrl.value = null;
 
+		$scope.$watch(function () {
+			return $ctrl.ngModel ? $ctrl.ngModel.$modelValue : undefined;
+		}, function (val) {
+			if (val !== $ctrl.value) $ctrl.value = val;
+		});
+
+		$scope.disabled = function () {
+			return $ctrl.ngDisabled !== undefined ? $ctrl.ngDisabled : $ctrl.$attrs.disabled !== undefined;
+		};
+
 		$ctrl.toggleState = function () {
-			if ($ctrl.ngChange) $ctrl.ngChange({ value: $ctrl.ngModel });
+			if ($scope.disabled()) return;
+			$ctrl.value = !$ctrl.value;
+			$ctrl.ngModel.$setViewValue($ctrl.value);
 		};
 	}],
-	template: '\n\t\t\t<span class="ui-toggle" ng-class="$ctrl.class" ng-click="$ctrl.toggleState()">\n\t\t\t\t<input type="checkbox"\n\t\t\t\t\tng-model="$ctrl.ngModel"\n\t\t\t\t\tng-disabled="$ctrl.ngDisabled || $ctrl.$attrs.disabled !== undefined"\n\t\t\t\t/>\n\t\t\t\t<div class="ui-toggle__track"></div>\n\t\t\t\t<div class="ui-toggle__thumb"></div>\n\t\t\t</span>\n\t\t'
+	template: '\n\t\t\t<span class="ui-toggle" ng-class="$ctrl.class" ng-click="$ctrl.toggleState()">\n\t\t\t\t<span class="ui-toggle-input" ng-class="{checked: $ctrl.value, disabled: disabled()}"></span>\n\t\t\t\t<div class="ui-toggle__track"></div>\n\t\t\t\t<div class="ui-toggle__thumb"></div>\n\t\t\t</span>\n\t\t'
 });

dist/angular-ui-toggle.min.js

@@ -1,1 +0,1 @@
-"use strict";angular.module("uiToggle",[]).component("uiToggle",{bindings:{class:"@?",disabled:"<?",ngChange:"&?",ngDisabled:"<",ngModel:"="},controller:["$scope","$attrs",function($scope,$attrs){var $ctrl=this;$ctrl.$attrs=$attrs||{},$ctrl.toggleState=function(){$ctrl.ngChange&&$ctrl.ngChange({value:$ctrl.ngModel})}}],template:'\n\t\t\t<span class="ui-toggle" ng-class="$ctrl.class" ng-click="$ctrl.toggleState()">\n\t\t\t\t<input type="checkbox"\n\t\t\t\t\tng-model="$ctrl.ngModel"\n\t\t\t\t\tng-disabled="$ctrl.ngDisabled || $ctrl.$attrs.disabled !== undefined"\n\t\t\t\t/>\n\t\t\t\t<div class="ui-toggle__track"></div>\n\t\t\t\t<div class="ui-toggle__thumb"></div>\n\t\t\t</span>\n\t\t'});
+"use strict";angular.module("uiToggle",[]).component("uiToggle",{bindings:{class:"@?",disabled:"<?",ngDisabled:"<?"},require:{ngModel:"ngModel"},controller:["$scope","$attrs",function($scope,$attrs){var $ctrl=this;$ctrl.$attrs=$attrs||{},$ctrl.value=null,$scope.$watch(function(){return $ctrl.ngModel?$ctrl.ngModel.$modelValue:void 0},function(val){val!==$ctrl.value&&($ctrl.value=val)}),$scope.disabled=function(){return void 0!==$ctrl.ngDisabled?$ctrl.ngDisabled:void 0!==$ctrl.$attrs.disabled},$ctrl.toggleState=function(){$scope.disabled()||($ctrl.value=!$ctrl.value,$ctrl.ngModel.$setViewValue($ctrl.value))}}],template:'\n\t\t\t<span class="ui-toggle" ng-class="$ctrl.class" ng-click="$ctrl.toggleState()">\n\t\t\t\t<span class="ui-toggle-input" ng-class="{checked: $ctrl.value, disabled: disabled()}"></span>\n\t\t\t\t<div class="ui-toggle__track"></div>\n\t\t\t\t<div class="ui-toggle__thumb"></div>\n\t\t\t</span>\n\t\t'});

package.json

@@ -5,6 +5,7 @@ {
   "contributors": [
-    "Matt Carter <[e-mail]> (https://github.com/hash-bang)"
+    "Matt Carter <[e-mail]> (https://github.com/hash-bang)",
+    "Adones Pitogo <[e-mail]> (https://github.com/adonespitogo)"
   ],
   "license": "MIT",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "main": "angular-ui-toggle.js",
@@ -11,0 +12,0 @@ "repository": {

src/angular-ui-toggle.js

 /**
-* Angular-UI-Toggle
-* Display a simple UI-Toggle control
-*
-* @param {boolean} [ngModel] Model to bind to
-* @param {string} [class] Optional class style to apply
-* @param {boolean} [disabled=false] Whether to disable the toggle
-* @param {boolean} [ngDisabled=false] Alternate binding for `disabled`
-* @param {function} [ngChange] Function to call as ({value}) on value change
-*/
+ * Angular-UI-Toggle
+ * Display a simple UI-Toggle control
+ *
+ * @param {boolean} [ngModel] Model to bind to
+ * @param {string} [class] Optional class style to apply
+ * @param {boolean} [disabled=false] Whether to disable the toggle
+ * @param {boolean} [ngDisabled=false] Alternate binding for `disabled`
+ * @param {function} [ngChange] Function to call as ({value}) on value change
+ */
 angular
@@ -17,20 +17,34 @@ .module('uiToggle', [])
 			disabled: '<?',
-			ngChange: '&?',
-			ngDisabled: '<',
-			ngModel: '=',
+			ngDisabled: '<?'
 		},
+		require: {
+			ngModel: 'ngModel'
+		},
 		controller: function($scope, $attrs) {
+
 			var $ctrl = this;
+
 			$ctrl.$attrs = $attrs || {};
+			$ctrl.value = null;
 
-			$ctrl.toggleState = ()=> {
-				if ($ctrl.ngChange) $ctrl.ngChange({value: $ctrl.ngModel});
+			$scope.$watch(()=> $ctrl.ngModel ? $ctrl.ngModel.$modelValue : undefined, val => {
+				if (val !== $ctrl.value) $ctrl.value = val;
+			});
+
+			$scope.disabled = function () {
+				return $ctrl.ngDisabled !== undefined
+					? $ctrl.ngDisabled
+					: $ctrl.$attrs.disabled !== undefined;
 			};
+
+			$ctrl.toggleState = function () {
+				if ($scope.disabled()) return;
+				$ctrl.value = !$ctrl.value;
+				$ctrl.ngModel.$setViewValue($ctrl.value);
+			};
+
 		},
 		template: `
 			<span class="ui-toggle" ng-class="$ctrl.class" ng-click="$ctrl.toggleState()">
-				<input type="checkbox"
-					ng-model="$ctrl.ngModel"
-					ng-disabled="$ctrl.ngDisabled || $ctrl.$attrs.disabled !== undefined"
-				/>
+				<span class="ui-toggle-input" ng-class="{checked: $ctrl.value, disabled: disabled()}"></span>
 				<div class="ui-toggle__track"></div>
@@ -37,0 +51,0 @@ <div class="ui-toggle__thumb"></div>

No alert changes

Improved metrics

Total package byte prevSize

30504

increased by7.04%

Worsened metrics

Lines of code

462

decreased by-1.28%

No dependency changes