From 02cf3872a1fab7d663474ddaf860e93547565d1a Mon Sep 17 00:00:00 2001
From: Adam Bradley <adamdbradley@gmail.com>
Date: Thu, 17 Oct 2013 11:46:48 -0500
Subject: [PATCH] removed div.track from toggle

---
 dist/css/ionic-scoped.css                   | 118 +++++++++++--------
 dist/css/ionic.css                          | 124 ++++++++++++--------
 dist/js/ionic-angular.js                    |  13 +-
 dist/js/ionic.js                            |  18 +--
 js/ext/angular/src/directive/ionicToggle.js |  13 +-
 js/ext/simple/toggle.js                     |   3 +-
 js/views/toggleView.js                      |  18 +--
 scss/ionic/_toggle.scss                     |  59 +++++-----
 test/index.html                             |   4 +-
 test/input-toggle.html                      |   9 +-
 10 files changed, 189 insertions(+), 190 deletions(-)

diff --git a/dist/css/ionic-scoped.css b/dist/css/ionic-scoped.css
index 284f96aba8..7e68fc5961 100644
--- a/dist/css/ionic-scoped.css
+++ b/dist/css/ionic-scoped.css
@@ -177,13 +177,14 @@
   /**
    * List refreser elements
    */
+  /* the checkmark within the box */
+  /* what the background looks like when its checked */
+  /* what the checkmark looks like when its checked */
   /* the overall container of the toggle */
-  /* hide the actual <input type="checkbox"> */
-  /* the background of the toggle's track area */
-  /* also the track appearance when the toggle is "off" */
   /* the handle (circle) thats inside the toggle's track area */
   /* also the appearance when the handle is "off" */
-  /* When the toggle is "on" */
+  /* The track when the toggle is "on" */
+  /* the handle when the toggle is "on" */
   @keyframes fadein {
     from {
       opacity: 0.7; }
@@ -2121,62 +2122,81 @@
     position: relative;
     display: inline-block;
     padding: 7px 7px;
+    cursor: pointer; }
+  .ionic .checkbox input {
+    position: relative;
+    width: 28px;
+    height: 28px;
+    border: 0;
+    background: transparent;
     cursor: pointer;
-    /* what the checkbox looks like when its not checked */
-    /* the checkmark within the box */
-    /* what it looks like when it is checked */ }
-    .ionic .checkbox input {
-      display: none; }
-    .ionic .checkbox .handle {
-      width: 28px;
-      height: 28px;
+    -webkit-appearance: none; }
+    .ionic .checkbox input:before {
+      /* what the checkbox looks like when its not checked */
+      display: table;
+      width: 100%;
+      height: 100%;
       border: 1px solid #049cdb;
       border-radius: 50%;
       background: white;
+      content: ' ';
       transition: background-color 0.1s ease-in-out; }
-    .ionic .checkbox .handle:after {
-      position: absolute;
-      top: 37%;
-      left: 14px;
-      width: 14px;
-      height: 7px;
-      border: 1px solid white;
-      border-top: none;
-      border-right: none;
-      content: '';
-      opacity: 0;
-      transition: opacity 0.05s ease-in-out;
-      -webkit-transform: rotate(-45deg);
-      transform: rotate(-45deg); }
-    .ionic .checkbox input:checked + .handle {
-      background: #049cdb; }
-      .ionic .checkbox input:checked + .handle:after {
-        opacity: 1; }
+  .ionic .checkbox input:after {
+    position: absolute;
+    top: 37%;
+    left: 26%;
+    display: table;
+    width: 14px;
+    height: 7px;
+    border: 1px solid white;
+    border-top: none;
+    border-right: none;
+    content: ' ';
+    opacity: 0;
+    transition: opacity 0.05s ease-in-out;
+    -webkit-transform: rotate(-45deg);
+    transform: rotate(-45deg); }
+  .ionic .checkbox input:checked:before {
+    border: 0;
+    background: #049cdb; }
+  .ionic .checkbox input:checked:after {
+    opacity: 1; }
   .ionic .toggle {
+    position: relative;
     display: inline-block; }
-  .ionic .toggle input[type="checkbox"] {
-    display: none; }
-  .ionic .toggle .track {
-    display: inline-block;
-    box-sizing: border-box;
+  .ionic .toggle input {
+    /* set the actual checkbox input to have a width/height */
+    /* but hide its appearance, then use :after to style it */
     width: 54px;
     height: 32px;
-    border: solid 2px #e5e5e5;
-    border-radius: 20px;
-    background-color: #e5e5e5;
-    cursor: pointer;
-    transition-timing-function: ease-in-out;
-    transition-duration: 0.1s;
-    transition-property: background-color, border; }
+    border: 0;
+    background: transparent;
+    -webkit-appearance: none;
+    /* the track appearance when the toggle is "off" */ }
+    .ionic .toggle input:after {
+      display: inline-block;
+      box-sizing: border-box;
+      width: 100%;
+      height: 100%;
+      border: solid 2px #e5e5e5;
+      border-radius: 20px;
+      background-color: #e5e5e5;
+      content: ' ';
+      cursor: pointer;
+      transition-timing-function: ease-in-out;
+      transition-duration: 0.1s;
+      transition-property: background-color, border; }
   .ionic .toggle .handle {
     position: absolute;
+    top: 6px;
+    left: 2px;
     display: block;
     width: 28px;
     height: 28px;
     border-radius: 50%;
     background-color: white;
     transition: -webkit-transform 0.1s ease-in-out;
-    /* used to create a larger hit area to slide the handle */ }
+    /* used to create a larger (but hidden) hit area to slide the handle */ }
     .ionic .toggle .handle:before {
       position: absolute;
       top: -2px;
@@ -2184,14 +2204,12 @@
       display: table;
       padding: 17px 30px;
       content: " "; }
-  .ionic .toggle :checked + .track {
-    /* the track when the toggle is "on" */
+  .ionic .toggle input:checked:after {
     border-color: #5f85ef;
-    background-color: #5f85ef;
-    /* the handle when the toggle is "on" */ }
-    .ionic .toggle :checked + .track .handle {
-      background-color: white;
-      -webkit-transform: translate3d(22px, 0, 0); }
+    background-color: #5f85ef; }
+  .ionic .toggle input:checked + .handle {
+    background-color: white;
+    -webkit-transform: translate3d(22px, 0, 0); }
   .ionic .radio-buttton-list .list-item-content {
     /* give some room to the right for the checkmark icon */
     padding-right: 60px; }
diff --git a/dist/css/ionic.css b/dist/css/ionic.css
index 1c22e770ad..601d4f8e15 100644
--- a/dist/css/ionic.css
+++ b/dist/css/ionic.css
@@ -2591,72 +2591,94 @@ input[type="checkbox"][readonly] {
   position: relative;
   display: inline-block;
   padding: 7px 7px;
+  cursor: pointer; }
+
+.checkbox input {
+  position: relative;
+  width: 28px;
+  height: 28px;
+  border: 0;
+  background: transparent;
   cursor: pointer;
-  /* what the checkbox looks like when its not checked */
-  /* the checkmark within the box */
-  /* what it looks like when it is checked */ }
-  .checkbox input {
-    display: none; }
-  .checkbox .handle {
-    width: 28px;
-    height: 28px;
+  -webkit-appearance: none; }
+  .checkbox input:before {
+    /* what the checkbox looks like when its not checked */
+    display: table;
+    width: 100%;
+    height: 100%;
     border: 1px solid #049cdb;
     border-radius: 50%;
     background: white;
+    content: ' ';
     transition: background-color 0.1s ease-in-out; }
-  .checkbox .handle:after {
-    position: absolute;
-    top: 37%;
-    left: 14px;
-    width: 14px;
-    height: 7px;
-    border: 1px solid white;
-    border-top: none;
-    border-right: none;
-    content: '';
-    opacity: 0;
-    transition: opacity 0.05s ease-in-out;
-    -webkit-transform: rotate(-45deg);
-    transform: rotate(-45deg); }
-  .checkbox input:checked + .handle {
-    background: #049cdb; }
-    .checkbox input:checked + .handle:after {
-      opacity: 1; }
+
+/* the checkmark within the box */
+.checkbox input:after {
+  position: absolute;
+  top: 37%;
+  left: 26%;
+  display: table;
+  width: 14px;
+  height: 7px;
+  border: 1px solid white;
+  border-top: none;
+  border-right: none;
+  content: ' ';
+  opacity: 0;
+  transition: opacity 0.05s ease-in-out;
+  -webkit-transform: rotate(-45deg);
+  transform: rotate(-45deg); }
+
+/* what the background looks like when its checked */
+.checkbox input:checked:before {
+  border: 0;
+  background: #049cdb; }
+
+/* what the checkmark looks like when its checked */
+.checkbox input:checked:after {
+  opacity: 1; }
 
 /* the overall container of the toggle */
 .toggle {
+  position: relative;
   display: inline-block; }
 
-/* hide the actual <input type="checkbox"> */
-.toggle input[type="checkbox"] {
-  display: none; }
-
-/* the background of the toggle's track area */
-/* also the track appearance when the toggle is "off" */
-.toggle .track {
-  display: inline-block;
-  box-sizing: border-box;
+.toggle input {
+  /* set the actual checkbox input to have a width/height */
+  /* but hide its appearance, then use :after to style it */
   width: 54px;
   height: 32px;
-  border: solid 2px #e5e5e5;
-  border-radius: 20px;
-  background-color: #e5e5e5;
-  cursor: pointer;
-  transition-timing-function: ease-in-out;
-  transition-duration: 0.1s;
-  transition-property: background-color, border; }
+  border: 0;
+  background: transparent;
+  -webkit-appearance: none;
+  /* the track appearance when the toggle is "off" */ }
+  .toggle input:after {
+    display: inline-block;
+    box-sizing: border-box;
+    width: 100%;
+    height: 100%;
+    border: solid 2px #e5e5e5;
+    border-radius: 20px;
+    background-color: #e5e5e5;
+    content: ' ';
+    cursor: pointer;
+    transition-timing-function: ease-in-out;
+    transition-duration: 0.1s;
+    transition-property: background-color, border; }
 
 /* the handle (circle) thats inside the toggle's track area */
 /* also the appearance when the handle is "off" */
 .toggle .handle {
   position: absolute;
+  top: 6px;
+  left: 2px;
   display: block;
   width: 28px;
   height: 28px;
   border-radius: 50%;
   background-color: white;
   transition: -webkit-transform 0.1s ease-in-out;
-  /* used to create a larger hit area to slide the handle */ }
+  /* used to create a larger (but hidden) hit area to slide the handle */ }
   .toggle .handle:before {
     position: absolute;
     top: -2px;
@@ -2665,15 +2687,15 @@ input[type="checkbox"][readonly] {
     padding: 17px 30px;
     content: " "; }
 
-/* When the toggle is "on" */
-.toggle :checked + .track {
-  /* the track when the toggle is "on" */
+/* The track when the toggle is "on" */
+.toggle input:checked:after {
   border-color: #5f85ef;
-  background-color: #5f85ef;
-  /* the handle when the toggle is "on" */ }
-  .toggle :checked + .track .handle {
-    background-color: white;
-    -webkit-transform: translate3d(22px, 0, 0); }
+  background-color: #5f85ef; }
+
+/* the handle when the toggle is "on" */
+.toggle input:checked + .handle {
+  background-color: white;
+  -webkit-transform: translate3d(22px, 0, 0); }
 
 .radio-buttton-list .list-item-content {
   /* give some room to the right for the checkmark icon */
diff --git a/dist/js/ionic-angular.js b/dist/js/ionic-angular.js
index f6004ca1b8..ce7930f7dd 100644
--- a/dist/js/ionic-angular.js
+++ b/dist/js/ionic-angular.js
@@ -692,28 +692,21 @@ angular.module('ionic.ui.toggle', [])
     replace: true,
     require: '?ngModel',
     scope: true,
-    template: '<div class="toggle">' +
-              ' <input type="checkbox">'+
-              ' <div class="track">' +
-              '   <div class="handle"></div>' +
-              ' </div>' +
-              '</div>',
+    template: '<div class="toggle"><input type="checkbox"><div class="handle"></div></div>',
 
     link: function($scope, $element, $attr, ngModel) {
-      var checkbox, track, handle;
+      var checkbox, handle;
 
       if(!ngModel) { return; }
 
       checkbox = $element.children().eq(0);
-      track = $element.children().eq(1);
       handle = track.children().eq(0);
 
-      if(!checkbox.length || !track.length || !handle.length) { return; }
+      if(!checkbox.length || !handle.length) { return; }
 
       $scope.toggle = new ionic.views.Toggle({ 
         el: $element[0],
         checkbox: checkbox[0],
-        track: track[0],
         handle: handle[0]
       });
 
diff --git a/dist/js/ionic.js b/dist/js/ionic.js
index b4787e0658..baca49d451 100644
--- a/dist/js/ionic.js
+++ b/dist/js/ionic.js
@@ -2875,20 +2875,8 @@ ionic.views.TabBar.prototype = {
   ionic.views.Toggle = function(opts) {
     this.el = opts.el;
     this.checkbox = opts.checkbox;
-    this.track = opts.track;
     this.handle = opts.handle;
     this.openPercent = -1;
-
-    /*
-    // remember that this element, and all its children are apart of a component
-    // and assign the component instance to each element so the lookups
-    // only has to go through this process just once
-    this.el.isComponent = true;
-    this.track.component = this;
-    this.track.isComponent = true;
-    this.handle.component = this;
-    this.handle.isComponent = true;
-    */
   };
 
   ionic.views.Toggle.prototype = {
@@ -2898,8 +2886,8 @@ ionic.views.TabBar.prototype = {
     },
 
     drag: function(e) {
-      var slidePageLeft = this.track.offsetLeft + (this.handle.offsetWidth / 2);
-      var slidePageRight = this.track.offsetLeft + this.track.offsetWidth - (this.handle.offsetWidth / 2);
+      var slidePageLeft = this.checkbox.offsetLeft + (this.handle.offsetWidth / 2);
+      var slidePageRight = this.checkbox.offsetLeft + this.checkbox.offsetWidth - (this.handle.offsetWidth / 2);
 
       if(e.pageX >= slidePageRight - 4) {
         this.val(true);
@@ -2920,7 +2908,7 @@ ionic.views.TabBar.prototype = {
         } else if(openPercent === 100) {
           this.val(true);
         } else {
-          var openPixel = Math.round( (openPercent / 100) * this.track.offsetWidth - (this.handle.offsetWidth) );
+          var openPixel = Math.round( (openPercent / 100) * this.checkbox.offsetWidth - (this.handle.offsetWidth) );
           openPixel = (openPixel < 1 ? 0 : openPixel);
           this.handle.style.webkitTransform = 'translate3d(' + openPixel + 'px,0,0)';
         }
diff --git a/js/ext/angular/src/directive/ionicToggle.js b/js/ext/angular/src/directive/ionicToggle.js
index cf45a5f1b2..6a1f76e30f 100644
--- a/js/ext/angular/src/directive/ionicToggle.js
+++ b/js/ext/angular/src/directive/ionicToggle.js
@@ -8,28 +8,21 @@ angular.module('ionic.ui.toggle', [])
     replace: true,
     require: '?ngModel',
     scope: true,
-    template: '<div class="toggle">' +
-              ' <input type="checkbox">'+
-              ' <div class="track">' +
-              '   <div class="handle"></div>' +
-              ' </div>' +
-              '</div>',
+    template: '<div class="toggle"><input type="checkbox"><div class="handle"></div></div>',
 
     link: function($scope, $element, $attr, ngModel) {
-      var checkbox, track, handle;
+      var checkbox, handle;
 
       if(!ngModel) { return; }
 
       checkbox = $element.children().eq(0);
-      track = $element.children().eq(1);
       handle = track.children().eq(0);
 
-      if(!checkbox.length || !track.length || !handle.length) { return; }
+      if(!checkbox.length || !handle.length) { return; }
 
       $scope.toggle = new ionic.views.Toggle({ 
         el: $element[0],
         checkbox: checkbox[0],
-        track: track[0],
         handle: handle[0]
       });
 
diff --git a/js/ext/simple/toggle.js b/js/ext/simple/toggle.js
index c5cfbc0895..c34b58ce2a 100644
--- a/js/ext/simple/toggle.js
+++ b/js/ext/simple/toggle.js
@@ -18,12 +18,11 @@
         var opts = { 
           el: el,
           checkbox: el.querySelector("input[type='checkbox']"),
-          track: el.querySelector(".track"),
           handle: el.querySelector(".handle")
         };
 
         // validate its a well formed toggle with the required pieces
-        if(!opts.checkbox || !opts.track || !opts.handle) return;
+        if(!opts.checkbox || !opts.handle) return;
 
         // initialize an instance of a Toggle
         el.component = new ionic.views.Toggle(opts);
diff --git a/js/views/toggleView.js b/js/views/toggleView.js
index 95445ab892..f5d2a09543 100644
--- a/js/views/toggleView.js
+++ b/js/views/toggleView.js
@@ -4,20 +4,8 @@
   ionic.views.Toggle = function(opts) {
     this.el = opts.el;
     this.checkbox = opts.checkbox;
-    this.track = opts.track;
     this.handle = opts.handle;
     this.openPercent = -1;
-
-    /*
-    // remember that this element, and all its children are apart of a component
-    // and assign the component instance to each element so the lookups
-    // only has to go through this process just once
-    this.el.isComponent = true;
-    this.track.component = this;
-    this.track.isComponent = true;
-    this.handle.component = this;
-    this.handle.isComponent = true;
-    */
   };
 
   ionic.views.Toggle.prototype = {
@@ -27,8 +15,8 @@
     },
 
     drag: function(e) {
-      var slidePageLeft = this.track.offsetLeft + (this.handle.offsetWidth / 2);
-      var slidePageRight = this.track.offsetLeft + this.track.offsetWidth - (this.handle.offsetWidth / 2);
+      var slidePageLeft = this.checkbox.offsetLeft + (this.handle.offsetWidth / 2);
+      var slidePageRight = this.checkbox.offsetLeft + this.checkbox.offsetWidth - (this.handle.offsetWidth / 2);
 
       if(e.pageX >= slidePageRight - 4) {
         this.val(true);
@@ -49,7 +37,7 @@
         } else if(openPercent === 100) {
           this.val(true);
         } else {
-          var openPixel = Math.round( (openPercent / 100) * this.track.offsetWidth - (this.handle.offsetWidth) );
+          var openPixel = Math.round( (openPercent / 100) * this.checkbox.offsetWidth - (this.handle.offsetWidth) );
           openPixel = (openPixel < 1 ? 0 : openPixel);
           this.handle.style.webkitTransform = 'translate3d(' + openPixel + 'px,0,0)';
         }
diff --git a/scss/ionic/_toggle.scss b/scss/ionic/_toggle.scss
index 7de4cffe32..b976622b4b 100644
--- a/scss/ionic/_toggle.scss
+++ b/scss/ionic/_toggle.scss
@@ -4,35 +4,43 @@
 
 /* the overall container of the toggle */
 .toggle {
+  position: relative;
   display: inline-block;
 }
 
-/* hide the actual <input type="checkbox"> */
-.toggle input[type="checkbox"] {
-  display: none;
-}
-
-/* the background of the toggle's track area */
-/* also the track appearance when the toggle is "off" */
-.toggle .track {
-  display: inline-block;
-  box-sizing: border-box;
+.toggle input {
+  /* set the actual checkbox input to have a width/height */
+  /* but hide its appearance, then use :after to style it */
   width: $toggle-width;
   height: $toggle-height;
-  border: solid $toggle-border-width $toggle-off-border-color;
-  border-radius: $toggle-border-radius;
-  background-color: $toggle-off-bg-color;
-  cursor: pointer;
+  border: 0;
+  background: transparent;
+  -webkit-appearance: none;
 
-  transition-timing-function: ease-in-out;
-  transition-duration: $toggle-transition-duration;
-  transition-property: background-color, border;
+  /* the track appearance when the toggle is "off" */
+  &:after {
+    display: inline-block;
+    box-sizing: border-box;
+    width: 100%;
+    height: 100%;
+    border: solid $toggle-border-width $toggle-off-border-color;
+    border-radius: $toggle-border-radius;
+    background-color: $toggle-off-bg-color;
+    content: ' ';
+    cursor: pointer;
+
+    transition-timing-function: ease-in-out;
+    transition-duration: $toggle-transition-duration;
+    transition-property: background-color, border;
+  }
 }
 
 /* the handle (circle) thats inside the toggle's track area */
 /* also the appearance when the handle is "off" */
 .toggle .handle {
   position: absolute;
+  top: ($toggle-height - $toggle-handle-height) + $toggle-border-width;
+  left: $toggle-border-width;
   display: block;
   width: $toggle-handle-width;
   height: $toggle-handle-height;
@@ -40,7 +48,7 @@
   background-color: $toggle-handle-off-bg-color;
   transition: -webkit-transform $toggle-transition-duration ease-in-out;
 
-  /* used to create a larger hit area to slide the handle */
+  /* used to create a larger (but hidden) hit area to slide the handle */
   &:before {
     position: absolute;
     top: -2px;
@@ -51,17 +59,14 @@
   }
 }
 
-
-/* When the toggle is "on" */
-.toggle :checked + .track {
-
-  /* the track when the toggle is "on" */
+/* The track when the toggle is "on" */
+.toggle input:checked:after {
   border-color: $toggle-on-border-color;
   background-color: $toggle-on-bg-color;
+}
 
   /* the handle when the toggle is "on" */
-  .handle {
-    background-color: $toggle-handle-on-bg-color;
-    -webkit-transform: translate3d( $toggle-width - $toggle-handle-width - ($toggle-border-width * 2) ,0,0);
-  }
+.toggle input:checked + .handle {
+  background-color: $toggle-handle-on-bg-color;
+  -webkit-transform: translate3d( $toggle-width - $toggle-handle-width - ($toggle-border-width * 2) ,0,0);
 }
diff --git a/test/index.html b/test/index.html
index e8d6717ee9..51cee8390f 100644
--- a/test/index.html
+++ b/test/index.html
@@ -29,7 +29,7 @@
           <p><a class="button button-block button-default" href="input-range.html"><i class="icon-star"></i> Input: Range</a></p>
           <p><a class="button button-block button-default" href="input-select.html"><i class="icon-star-empty"></i> Input: Select</a></p>
           <p><a class="button button-block button-default" href="input-checkbox.html"><i class="icon-star"></i> Input: Checkbox</a></p>
-          <p><a class="button button-block button-default" href="input-toggle.html"><i class="icon-star-half-empty"></i> Input: Toggle</a></p>
+          <p><a class="button button-block button-default" href="input-toggle.html"><i class="icon-star"></i> Input: Toggle</a></p>
           <p><a class="button button-block button-default" href="lists.html"><i class="icon-star-half-empty"></i> Lists</a></p>
           <p><a class="button button-block button-default" href="modals.html"><i class="icon-star-empty"></i> Modals</a></p>
           <p><a class="button button-block button-default" href="popovers.html"><i class="icon-star-empty"></i> Popovers</a></p>
@@ -51,7 +51,5 @@
       }
     </script>
 
-    <script src="../dist/js/ionic.js"></script>
-
   </body>
 </html>
diff --git a/test/input-toggle.html b/test/input-toggle.html
index b09e413bd8..008d927696 100644
--- a/test/input-toggle.html
+++ b/test/input-toggle.html
@@ -22,18 +22,14 @@
             Airplane Mode
             <label class="toggle" id="airplaneMode">
                <input type="checkbox" name="airplaneMode">
-               <div class="track">
-                <div class="handle"></div>
-              </div>
+               <div class="handle"></div>
             </label>
           </li>
           <li class="list-item">
             Do Not Disturb
             <label class="toggle" id="doNotDisturb">
                <input type="checkbox" name="doNotDisturb" checked="checked">
-               <div class="track">
-                <div class="handle"></div>
-              </div>
+               <div class="handle"></div>
             </label>
           </li>
         </ul>
@@ -57,7 +53,6 @@
 
     <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
     <script src="../dist/js/ionic.js"></script>
-    <script src="../dist/js/ionic-simple.js"></script>
 
 
     <!-- for testing only -->