enable/disable toggle pointer-events w/ css only, closes #1185

Author: Adam Bradley

js/angular/directive/toggle.js

@@ -31,11 +31,11 @@ function($ionicGesture, $timeout) {
       ngDisabled: '=?'
     },
     transclude: true,
-    template: '<div class="item item-toggle disable-pointer-events">' +
+    template: '<div class="item item-toggle">' +
                 '<div ng-transclude></div>' +
-                '<label class="toggle enable-pointer-events">' +
+                '<label class="toggle">' +
                   '<input type="checkbox" ng-model="ngModel" ng-value="ngValue" ng-change="ngChange()" ng-disabled="ngDisabled">' +
-                  '<div class="track disable-pointer-events">' +
+                  '<div class="track">' +
                     '<div class="handle"></div>' +
                   '</div>' +
                 '</label>' +

scss/_toggle.scss

@@ -4,13 +4,17 @@
  * --------------------------------------------------
  */
 
-/* the overall container of the toggle */
+.item-toggle {
+  pointer-events: none;
+}
+
 .toggle {
   // set the color defaults
   @include toggle-style($toggle-on-default-border, $toggle-on-default-bg);
 
   position: relative;
   display: inline-block;
+  pointer-events: auto;
   margin: -$toggle-hit-area-expansion;
   padding: $toggle-hit-area-expansion;
 
@@ -49,8 +53,8 @@
   }
 }
 
-/* hide the actual input checkbox */
 .toggle input {
+  // hide the actual input checkbox
   display: none;
 }
 
@@ -69,23 +73,24 @@
   background-color: $toggle-off-bg-color;
   content: ' ';
   cursor: pointer;
+  pointer-events: none;
 }
 
 /* the handle (circle) thats inside the toggle's track area */
 /* also the handle's appearance when it is "off" */
 .toggle .handle {
   @include transition($toggle-transition-duration ease-in-out);
   position: absolute;
-  top: $toggle-border-width + $toggle-hit-area-expansion;
-  left: $toggle-border-width + $toggle-hit-area-expansion;
   display: block;
   width: $toggle-handle-width;
   height: $toggle-handle-height;
   border-radius: $toggle-handle-radius;
   background-color: $toggle-handle-off-bg-color;
+  top: $toggle-border-width + $toggle-hit-area-expansion;
+  left: $toggle-border-width + $toggle-hit-area-expansion;
 
-  /* used to create a larger (but hidden) hit area to slide the handle */
   &:before {
+    // used to create a larger (but hidden) hit area to slide the handle
     position: absolute;
     top: -4px;
     left: ( ($toggle-handle-width / 2) * -1) - 8;
@@ -94,23 +99,23 @@
   }
 }
 
-  /* the handle when the toggle is "on" */
 .toggle input:checked + .track .handle {
+  // the handle when the toggle is "on"
   @include translate3d($toggle-width - $toggle-handle-width - ($toggle-border-width * 2), 0, 0);
   background-color: $toggle-handle-on-bg-color;
 }
 
-/* make sure list item content have enough padding on right to fit the toggle */
 .item-toggle {
+  // make sure list item content have enough padding on right to fit the toggle
   padding-right: ($item-padding * 3) + $toggle-width;
 
   &.active {
     box-shadow: none;
   }
 }
 
-/* position the toggle to the right within a list item */
 .item-toggle .toggle {
+  // position the toggle to the right within a list item
   position: absolute;
   top: $item-padding / 2;
   right: $item-padding;

test/html/tapInputs.html

@@ -69,6 +69,16 @@
             <input type="checkbox" ng-model="toggle2" ng-true-value="yup" ng-false-value="nope">,
           </div>
 
+          <li ng-if="true" class="item item-toggle">
+            <label class="toggle">
+              <input type="checkbox">
+              <div class="track">
+                <div class="handle"></div>
+              </div>
+            </label>
+            HTML Only
+          </li>
+
           <div class="item item-divider">
             Radio
           </div>