From f564ea62a0a77b02d3de616e95dc09f71a3ba2f3 Mon Sep 17 00:00:00 2001 From: iJugleboy Date: Wed, 14 Oct 2015 23:33:22 +0200 Subject: [PATCH 1/3] Created attribute "invert" which inverts the way the switch shows the property. Ideal for many cases where the internal boolean value shows the opposite of the intuitive switch - like if the boolean is "dontShoot" but you want it to show this as a good-state as if it were "isSafe" --- angular-ui-switch.js | 2 +- example/index.html | 19 +++++++++++++++---- 2 files changed, 16 insertions(+), 5 deletions(-) diff --git a/angular-ui-switch.js b/angular-ui-switch.js index 9a6b591..72992ac 100644 --- a/angular-ui-switch.js +++ b/angular-ui-switch.js @@ -10,7 +10,7 @@ angular.module('uiSwitch', []) html += ' + @@ -43,9 +43,20 @@

-

- Enabled: {{ disabled }} -

+

+ Enabled: {{ disabled }} +

+ + +

Using invert - which shows the switch in the opposite arrangement

+ + +

+ +

+

+ Enabled: {{ inverted }} +

From 71a40f97afaa926a21127a5adf8e76d817812ad7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Raphael=20M=C3=BCller?= Date: Tue, 17 Nov 2015 09:16:28 +0100 Subject: [PATCH 2/3] Added example with dynamic update of disabled property Rebuild of minified css and js --- angular-ui-switch.min.css | 2 +- angular-ui-switch.min.js | 2 +- example/app.js | 8 ++++++-- example/index.html | 8 ++++++++ 4 files changed, 16 insertions(+), 4 deletions(-) diff --git a/angular-ui-switch.min.css b/angular-ui-switch.min.css index a52d377..206345b 100644 --- a/angular-ui-switch.min.css +++ b/angular-ui-switch.min.css @@ -1 +1 @@ -.switch{background:#fff;border:1px solid #dfdfdf;position:relative;display:inline-block;box-sizing:content-box;overflow:visible;width:52px;height:30px;padding:0;margin:0;border-radius:20px;cursor:pointer;box-shadow:#dfdfdf 0 0 0 0 inset;transition:.3s ease-out all;-webkit-transition:.3s ease-out all;top:-1px}.switch.wide{width:80px}.switch small{background:#fff;border-radius:100%;box-shadow:0 1px 3px rgba(0,0,0,.4);width:30px;height:30px;position:absolute;top:0;left:0;transition:.3s ease-out all;-webkit-transition:.3s ease-out all}.switch.checked{background:#64bd63;border-color:#64bd63}.switch.checked small{left:22px}.switch.wide.checked small{left:52px}.switch .switch-text{font-family:Arial,Helvetica,sans-serif;font-size:13px}.switch .off{display:block;position:absolute;right:10%;top:25%;z-index:0;color:#A9A9A9}.switch .on{display:none;z-index:0;color:#fff;position:absolute;top:25%;left:9%}.switch.checked .off{display:none}.switch.checked .on{display:block}.switch.disabled{opacity:.5;cursor:not-allowed} +.switch,.switch small{background:#fff;height:30px}.switch{border:1px solid #dfdfdf;position:relative;display:inline-block;box-sizing:content-box;overflow:visible;width:52px;padding:0;margin:0;border-radius:20px;cursor:pointer;box-shadow:#dfdfdf 0 0 0 0 inset;transition:.3s ease-out all;-webkit-transition:.3s ease-out all;top:-1px}.switch.wide{width:80px}.switch small{border-radius:100%;box-shadow:0 1px 3px rgba(0,0,0,.4);width:30px;position:absolute;top:0;left:0;transition:.3s ease-out all;-webkit-transition:.3s ease-out all}.switch .off,.switch .on{z-index:0;position:absolute;top:25%}.switch.checked{background:#64bd63;border-color:#64bd63}.switch.checked small{left:22px}.switch.wide.checked small{left:52px}.switch .switch-text{font-family:Arial,Helvetica,sans-serif;font-size:13px}.switch .off{display:block;right:10%;color:#A9A9A9}.switch .on,.switch.checked .off{display:none}.switch .on{color:#fff;left:9%}.switch.checked .on{display:block}.switch.disabled{opacity:.5;cursor:not-allowed} diff --git a/angular-ui-switch.min.js b/angular-ui-switch.min.js index 6f6da0f..8e84204 100644 --- a/angular-ui-switch.min.js +++ b/angular-ui-switch.min.js @@ -1 +1 @@ -angular.module("uiSwitch",[]).directive("switch",function(){return{restrict:"AE",replace:!0,transclude:!0,template:function(n,e){var s="";return s+="'+e.on+"":"",s+=e.off?''+e.off+"":" ",s+=""}}}); \ No newline at end of file +angular.module("uiSwitch",[]).directive("switch",function(){return{restrict:"AE",replace:!0,transclude:!0,template:function(n,e){var s="";return s+="'+e.on+"":"",s+=e.off?''+e.off+"":" ",s+=""}}}); diff --git a/example/app.js b/example/app.js index 3d12135..18ea133 100644 --- a/example/app.js +++ b/example/app.js @@ -1,11 +1,15 @@ angular.module('app', ['uiSwitch']) -.controller('MyController', function($scope) { +.controller('MyController', function($scope, $timeout) { $scope.enabled = true; $scope.onOff = true; $scope.yesNo = true; $scope.disabled = true; - + + $scope.dynamicDisabled = true; + $timeout(function() { + $scope.dynamicDisabled = false; + }, 1000); $scope.changeCallback = function() { console.log('This is the state of my model ' + $scope.enabled); diff --git a/example/index.html b/example/index.html index 21c1381..6572de8 100644 --- a/example/index.html +++ b/example/index.html @@ -47,6 +47,14 @@ Enabled: {{ disabled }}

+ + +

+ +

+

+ Enabled: {{ disabled }} +

Using invert - which shows the switch in the opposite arrangement

From 10d0b144b9aec1b72af2bc3cb3f02649c6a46949 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Raphael=20M=C3=BCller?= Date: Tue, 17 Nov 2015 10:18:22 +0100 Subject: [PATCH 3/3] Use ngdisabled instead of disabled --- angular-ui-switch.js | 4 ++-- angular-ui-switch.min.js | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/angular-ui-switch.js b/angular-ui-switch.js index 72992ac..80e82e3 100644 --- a/angular-ui-switch.js +++ b/angular-ui-switch.js @@ -9,8 +9,8 @@ angular.module('uiSwitch', []) var html = ''; html += ''+e.on+"":"",s+=e.off?''+e.off+"":" ",s+=""}}}); +angular.module("uiSwitch",[]).directive("switch",function(){return{restrict:"AE",replace:!0,transclude:!0,template:function(n,e){var s="";return s+="'+e.on+"":"",s+=e.off?''+e.off+"":" ",s+=""}}});