From cda581119abb57e5b4c6be86d32312e286cbee4a Mon Sep 17 00:00:00 2001
From: TNDRM <palina.maslava@gmail.com>
Date: Wed, 30 Nov 2016 12:35:19 +0300
Subject: [PATCH] refactor(form inputs): add css switches

---
 src/app/pages/form/inputs/inputs.html         |  8 +-
 .../OldSwitchPanelCtrl.js}                    |  4 +-
 .../switch.directive.js                       | 21 +++---
 .../{switch => oldSwitches}/switch.html       |  2 +-
 .../widgets/switches/SwitchDemoPanelCtrl.js   | 23 ++++++
 .../form/inputs/widgets/switches/switch.html  |  9 +++
 .../theme/inputs/baSwitcher/baSwitcher.html   | 10 +++
 src/app/theme/inputs/baSwitcher/baSwitcher.js | 22 ++++++
 src/app/theme/inputs/inputs.module.js         | 10 +++
 src/app/theme/theme.module.js                 |  3 +-
 src/sass/app/_form.scss                       | 74 +++++++++++++++++++
 11 files changed, 170 insertions(+), 16 deletions(-)
 rename src/app/pages/form/inputs/widgets/{switch/SwitchPanelCtrl.js => oldSwitches/OldSwitchPanelCtrl.js} (76%)
 rename src/app/pages/form/inputs/widgets/{switch => oldSwitches}/switch.directive.js (63%)
 rename src/app/pages/form/inputs/widgets/{switch => oldSwitches}/switch.html (82%)
 create mode 100644 src/app/pages/form/inputs/widgets/switches/SwitchDemoPanelCtrl.js
 create mode 100644 src/app/pages/form/inputs/widgets/switches/switch.html
 create mode 100644 src/app/theme/inputs/baSwitcher/baSwitcher.html
 create mode 100644 src/app/theme/inputs/baSwitcher/baSwitcher.js
 create mode 100644 src/app/theme/inputs/inputs.module.js

diff --git a/src/app/pages/form/inputs/inputs.html b/src/app/pages/form/inputs/inputs.html
index c7fb0be..13bd467 100644
--- a/src/app/pages/form/inputs/inputs.html
+++ b/src/app/pages/form/inputs/inputs.html
@@ -26,9 +26,15 @@
           ba-panel-class="with-scroll">
         <div ng-include="'app/pages/form/inputs/widgets/checkboxesRadios.html'"></div>
       </div>
+
       <div ba-panel ba-panel-title="On/Off Switches" ba-panel-class="with-scroll">
-        <div ng-include="'app/pages/form/inputs/widgets/switch/switch.html'"></div>
+        <div ng-include="'app/pages/form/inputs/widgets/switches/switch.html'"></div>
       </div>
+
+      <div ba-panel ba-panel-title="Old On/Off Switches (Deprecated)" ba-panel-class="with-scroll">
+        <div ng-include="'app/pages/form/inputs/widgets/oldSwitches/switch.html'"></div>
+      </div>
+
     </div>
     <div class="col-md-6">
       <div
diff --git a/src/app/pages/form/inputs/widgets/switch/SwitchPanelCtrl.js b/src/app/pages/form/inputs/widgets/oldSwitches/OldSwitchPanelCtrl.js
similarity index 76%
rename from src/app/pages/form/inputs/widgets/switch/SwitchPanelCtrl.js
rename to src/app/pages/form/inputs/widgets/oldSwitches/OldSwitchPanelCtrl.js
index 4ea425d..8bda5e7 100644
--- a/src/app/pages/form/inputs/widgets/switch/SwitchPanelCtrl.js
+++ b/src/app/pages/form/inputs/widgets/oldSwitches/OldSwitchPanelCtrl.js
@@ -6,10 +6,10 @@
   'use strict';
 
   angular.module('BlurAdmin.pages.form')
-      .controller('SwitchPanelCtrl', SwitchPanelCtrl);
+      .controller('OldSwitchPanelCtrl', OldSwitchPanelCtrl);
 
   /** @ngInject */
-  function SwitchPanelCtrl() {
+  function OldSwitchPanelCtrl() {
     var vm = this;
 
     vm.switcherValues = {
diff --git a/src/app/pages/form/inputs/widgets/switch/switch.directive.js b/src/app/pages/form/inputs/widgets/oldSwitches/switch.directive.js
similarity index 63%
rename from src/app/pages/form/inputs/widgets/switch/switch.directive.js
rename to src/app/pages/form/inputs/widgets/oldSwitches/switch.directive.js
index 7b2937c..03954e9 100644
--- a/src/app/pages/form/inputs/widgets/switch/switch.directive.js
+++ b/src/app/pages/form/inputs/widgets/oldSwitches/switch.directive.js
@@ -1,6 +1,7 @@
 /**
  * @author v.lugovksy
  * created on 16.12.2015
+ *
  */
 (function () {
   'use strict';
@@ -20,18 +21,16 @@
         return '<div class="switch-container ' + (attrs.color || '') + '"><input type="checkbox" ng-model="ngModel"></div>';
       },
       link: function (scope, elem, attr) {
-        $timeout(function(){
-          var input = $(elem).find('input');
-          input.bootstrapSwitch({
-            size: 'small',
-            onColor: attr.color
-          });
-          input.on('switchChange.bootstrapSwitch', function(event, state) {
-            scope.ngModel = state;
-            scope.$apply();
-          });
-
+        var input = $(elem).find('input');
+        input.bootstrapSwitch({
+          size: 'small',
+          onColor: attr.color
         });
+        input.on('switchChange.bootstrapSwitch', function(event, state) {
+          scope.ngModel = state;
+          scope.$apply();
+        });
+
       }
     };
   }
diff --git a/src/app/pages/form/inputs/widgets/switch/switch.html b/src/app/pages/form/inputs/widgets/oldSwitches/switch.html
similarity index 82%
rename from src/app/pages/form/inputs/widgets/switch/switch.html
rename to src/app/pages/form/inputs/widgets/oldSwitches/switch.html
index c8b0034..1a79779 100644
--- a/src/app/pages/form/inputs/widgets/switch/switch.html
+++ b/src/app/pages/form/inputs/widgets/oldSwitches/switch.html
@@ -1,4 +1,4 @@
-<div ng-controller="SwitchPanelCtrl as switchPanelVm" class="switches clearfix">
+<div ng-controller="OldSwitchPanelCtrl as switchPanelVm" class="switches clearfix">
   <switch color="primary" ng-model="switchPanelVm.switcherValues.primary"></switch>
   <switch color="warning" ng-model="switchPanelVm.switcherValues.warning"></switch>
   <switch color="danger" ng-model="switchPanelVm.switcherValues.danger"></switch>
diff --git a/src/app/pages/form/inputs/widgets/switches/SwitchDemoPanelCtrl.js b/src/app/pages/form/inputs/widgets/switches/SwitchDemoPanelCtrl.js
new file mode 100644
index 0000000..275ce5f
--- /dev/null
+++ b/src/app/pages/form/inputs/widgets/switches/SwitchDemoPanelCtrl.js
@@ -0,0 +1,23 @@
+/**
+ * @author v.lugovsky
+ * created on 10.12.2016
+ */
+(function () {
+  'use strict';
+
+  angular.module('BlurAdmin.pages.form')
+      .controller('SwitchDemoPanelCtrl', SwitchDemoPanelCtrl);
+
+  /** @ngInject */
+  function SwitchDemoPanelCtrl() {
+    var vm = this;
+    vm.switches = {
+      s1: true,
+      s2: false,
+      s3: true,
+      s4: true,
+      s5: false
+    };
+  }
+
+})();
diff --git a/src/app/pages/form/inputs/widgets/switches/switch.html b/src/app/pages/form/inputs/widgets/switches/switch.html
new file mode 100644
index 0000000..571ac43
--- /dev/null
+++ b/src/app/pages/form/inputs/widgets/switches/switch.html
@@ -0,0 +1,9 @@
+<div ng-controller="SwitchDemoPanelCtrl as vm">
+  <ba-switcher switcher-style="primary" switcher-value="vm.switches.s1"></ba-switcher>
+  <ba-switcher switcher-style="success" switcher-value="vm.switches.s2"></ba-switcher>
+  <ba-switcher switcher-style="warning" switcher-value="vm.switches.s3"></ba-switcher>
+  <ba-switcher switcher-style="danger" switcher-value="vm.switches.s4"></ba-switcher>
+  <ba-switcher switcher-style="info" switcher-value="vm.switches.s5"></ba-switcher>
+</div>
+
+
diff --git a/src/app/theme/inputs/baSwitcher/baSwitcher.html b/src/app/theme/inputs/baSwitcher/baSwitcher.html
new file mode 100644
index 0000000..56b58db
--- /dev/null
+++ b/src/app/theme/inputs/baSwitcher/baSwitcher.html
@@ -0,0 +1,10 @@
+<label class="switcher-container">
+  <input type="checkbox" ng-model="switcherValue">
+  <div class="switcher" ng-class="::switcherStyle">
+    <div class="handle-container">
+      <span class="handle handle-on">ON</span>
+      <span class="handle"></span>
+      <span class="handle handle-off">OFF</span>
+    </div>
+  </div>
+</label>
\ No newline at end of file
diff --git a/src/app/theme/inputs/baSwitcher/baSwitcher.js b/src/app/theme/inputs/baSwitcher/baSwitcher.js
new file mode 100644
index 0000000..69ca69a
--- /dev/null
+++ b/src/app/theme/inputs/baSwitcher/baSwitcher.js
@@ -0,0 +1,22 @@
+/**
+ * @author v.lugovsky
+ * created on 10.12.2016
+ */
+(function () {
+  'use strict';
+
+  angular.module('BlurAdmin.theme.inputs')
+      .directive('baSwitcher', baSwitcher);
+
+  /** @ngInject */
+  function baSwitcher() {
+    return {
+      templateUrl: 'app/theme/inputs/baSwitcher/baSwitcher.html',
+      scope: {
+        switcherStyle: '@',
+        switcherValue: '='
+      }
+    };
+  }
+
+})();
diff --git a/src/app/theme/inputs/inputs.module.js b/src/app/theme/inputs/inputs.module.js
new file mode 100644
index 0000000..bf0bd16
--- /dev/null
+++ b/src/app/theme/inputs/inputs.module.js
@@ -0,0 +1,10 @@
+/**
+ * @author v.lugovsky
+ * created on 10.12.2016
+ */
+(function () {
+  'use strict';
+
+  angular.module('BlurAdmin.theme.inputs', []);
+
+})();
diff --git a/src/app/theme/theme.module.js b/src/app/theme/theme.module.js
index adf34ba..49525c5 100644
--- a/src/app/theme/theme.module.js
+++ b/src/app/theme/theme.module.js
@@ -11,7 +11,8 @@
       'angular-chartist',
       'angular.morris-chart',
       'textAngular',
-      'BlurAdmin.theme.components'
+      'BlurAdmin.theme.components',
+      'BlurAdmin.theme.inputs'
   ]);
 
 })();
diff --git a/src/sass/app/_form.scss b/src/sass/app/_form.scss
index d08e78f..24191cf 100644
--- a/src/sass/app/_form.scss
+++ b/src/sass/app/_form.scss
@@ -88,6 +88,79 @@ textarea.form-control {
   }
 }
 
+@mixin setSwitcherColor($color) {
+  border: solid 1px $color;
+  .handle.handle-on {
+    background-color: $color;
+  }
+}
+
+.switcher-container {
+  margin-right: 10px;
+  font-weight: normal;
+  input {
+    display: none;
+  }
+  .switcher {
+    &.primary {
+      @include setSwitcherColor($primary);
+    }
+    &.success {
+      @include setSwitcherColor($success);
+    }
+    &.warning {
+      @include setSwitcherColor($warning);
+    }
+    &.danger {
+      @include setSwitcherColor($danger);
+    }
+    &.info {
+      @include setSwitcherColor($primary-light);
+    }
+    position: relative;
+    display: inline-block;
+    width: 84px;
+    overflow: hidden;
+    border-radius: 6px;
+    box-sizing: border-box;
+
+    /* this fixes the overflow:hidden in Chrome */
+    -webkit-transform: translateZ(0);
+    /* Hide default HTML checkbox */
+    input {
+      display: none;
+    }
+    .handle-container {
+      position: relative;
+      width: 126px;
+      cursor: pointer;
+      transform: translate3d(-42px, 0, 0);
+      transition: transform .2s linear;
+      .handle {
+        width: 42px;
+        float: left;
+        line-height: 28px;
+        height: 28px;
+        font-size: 12px;
+        text-align: center;
+        color: white;
+        &.handle-off {
+          background: $border;
+          color: black;
+        }
+      }
+    }
+  }
+  input:checked + .switcher {
+    border: solid 1px $border;
+    .handle-container {
+      transform: translate3d(0, 0, 0);
+    }
+  }
+
+}
+
+
 .switch-container {
   display: inline-block;
   &.primary {
@@ -562,3 +635,4 @@ label.custom-input-danger {
 .sub-little-text {
   font-size: 12px;
 }
+