From 6188629da675f18b04b42c2ee06b7de7a8a082a3 Mon Sep 17 00:00:00 2001
From: Jan Skovgaard <jaskov@gmail.com>
Date: Fri, 1 Jun 2018 22:03:10 +0200
Subject: [PATCH] Convert the default boring checkbox to the shiny new and
 beautiful toggle based on the umb-toggle directive

---
 .../prevalueeditors/boolean.controller.js     | 28 ++++++++++++++++++-
 .../src/views/prevalueeditors/boolean.html    | 10 ++++---
 .../boolean/boolean.controller.js             | 18 ++++++++----
 .../propertyeditors/boolean/boolean.html      |  7 +++--
 4 files changed, 51 insertions(+), 12 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/views/prevalueeditors/boolean.controller.js b/src/Umbraco.Web.UI.Client/src/views/prevalueeditors/boolean.controller.js
index a7bf0ac280..e397722f7d 100644
--- a/src/Umbraco.Web.UI.Client/src/views/prevalueeditors/boolean.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/prevalueeditors/boolean.controller.js
@@ -1,4 +1,30 @@
 angular.module("umbraco").controller("Umbraco.PrevalueEditors.BooleanController",
     function ($scope) {
-        $scope.htmlId = "bool-" + String.CreateGuid();
+
+        function updateToggleValue() {
+            $scope.toggleValue = false;
+
+            if ($scope.model && $scope.model.value && ($scope.model.value.toString() === "1" || angular.lowercase($scope.model.value) === "true")) {
+                $scope.toggleValue = true;
+            }
+        }
+
+        if($scope.model.value === null){
+            $scope.model.value = "0";
+        }
+
+        updateToggleValue();
+
+        $scope.toggle = function(){
+            if($scope.model.value === 1 || $scope.model.value === "1"){
+                $scope.model.value = "0";
+                updateToggleValue();
+
+                return;
+            }
+
+            $scope.model.value = "1";
+
+            updateToggleValue();
+        }
     });
diff --git a/src/Umbraco.Web.UI.Client/src/views/prevalueeditors/boolean.html b/src/Umbraco.Web.UI.Client/src/views/prevalueeditors/boolean.html
index 880647a0df..2aeb1222b6 100644
--- a/src/Umbraco.Web.UI.Client/src/views/prevalueeditors/boolean.html
+++ b/src/Umbraco.Web.UI.Client/src/views/prevalueeditors/boolean.html
@@ -1,4 +1,6 @@
-<label ng-controller="Umbraco.PrevalueEditors.BooleanController" for="{{htmlId}}" class="checkbox">
-    <input name="boolean" type="checkbox" ng-model="model.value" ng-true-value="1" ng-false-value="0" id="{{htmlId}}" />
-    <localize key="general_yes">Yes</localize>
-</label>
+<div ng-controller="Umbraco.PrevalueEditors.BooleanController">
+    <umb-toggle
+        checked="toggleValue"
+        on-click="toggle()">
+    </umb-toggle>
+</div>
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/boolean/boolean.controller.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/boolean/boolean.controller.js
index 422f761851..6c16a32790 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/boolean/boolean.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/boolean/boolean.controller.js
@@ -4,7 +4,7 @@ function booleanEditorController($scope, $rootScope, assetsService) {
         $scope.renderModel = {
             value: false
         };
-        
+
         if ($scope.model.config && $scope.model.config.default && $scope.model.config.default.toString() === "1" && $scope.model && !$scope.model.value) {
             $scope.renderModel.value = true;
         }
@@ -16,10 +16,6 @@ function booleanEditorController($scope, $rootScope, assetsService) {
 
     setupViewModel();
 
-    $scope.$watch("renderModel.value", function (newVal) {
-        $scope.model.value = newVal === true ? "1" : "0";
-    });
-
     //here we declare a special method which will be called whenever the value has changed from the server
     //this is instead of doing a watch on the model.value = faster
     $scope.model.onValueChanged = function (newVal, oldVal) {
@@ -27,5 +23,17 @@ function booleanEditorController($scope, $rootScope, assetsService) {
         setupViewModel();
     };
 
+    // Update the value when the toggle is clicked
+    $scope.toggle = function(){
+        if($scope.renderModel.value){
+            $scope.model.value = "0";
+            setupViewModel();
+            return;
+        }
+
+        $scope.model.value = "1";
+        setupViewModel();
+    };
+
 }
 angular.module("umbraco").controller("Umbraco.PropertyEditors.BooleanController", booleanEditorController);
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/boolean/boolean.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/boolean/boolean.html
index b2373f2d12..10f388a0d0 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/boolean/boolean.html
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/boolean/boolean.html
@@ -1,3 +1,6 @@
 <div class="umb-editor umb-boolean" ng-controller="Umbraco.PropertyEditors.BooleanController">
-    <input type="checkbox" ng-model="renderModel.value" id="{{model.alias}}" />    
-</div>
\ No newline at end of file
+    <umb-toggle
+        checked="renderModel.value"
+        on-click="toggle()">
+    </umb-toggle>
+</div>