Fixed #138 - radio and checkbox tap/click

dist/css/ionic.css

@@ -4884,6 +4884,13 @@ a.button {
     -webkit-animation: fadeIn 0.3s;
     animation: fadeIn 0.3s; }
 
+.fade-in-not-out.ng-enter, .fade-in-not-out .ng-enter {
+  position: relative;
+  -webkit-animation: fadeIn 0.3s;
+  animation: fadeIn 0.3s; }
+.fade-in-not-out.ng-leave, .fade-in-not-out .ng-leave {
+  display: none; }
+
 @-moz-keyframes spin {
   100% {
     -moz-transform: rotate(360deg); } }

dist/js/ionic-angular.js

@@ -23165,13 +23165,15 @@ angular.module('ionic.service.modal', ['ionic.service.templateLoad', 'ngAnimate'
     },
     // Show the modal
     show: function() {
+      var _this = this;
       var element = angular.element(this.el);
       if(!element.parent().length) {
-        $animate.enter(element, angular.element($document[0].body));
+        $animate.enter(element, angular.element($document[0].body), null, function() {
+          ionic.views.Modal.prototype.show.call(_this);
+        });
       } 
-      $animate.addClass(element, this.animation);
+      $animate.addClass(element, this.animation, function() {
-
+      });
-      ionic.views.Modal.prototype.show.call(this);
     },
     // Hide the modal
     hide: function() {
@@ -23542,35 +23544,48 @@ angular.module('ionic.ui.checkbox', [])
     restrict: 'E',
     replace: true,
     require: '?ngModel',
-    scope: true,
+    scope: {},
-    template: '<div class="checkbox"><input type="checkbox"><div class="handle"></div></div>',
+    template: '<label class="checkbox"><input type="checkbox"></label>',
+  
 
     link: function($scope, $element, $attr, ngModel) {
-      var checkbox, handle;
+      var checkbox;
 
       if(!ngModel) { return; }
 
       checkbox = $element.children().eq(0);
-      handle = $element.children().eq(1);
 
-      if(!checkbox.length || !handle.length) { return; }
+      if(!checkbox.length) { return; }
 
-      $scope.checkbox = new ionic.views.Checkbox({ 
+      var tapHandler = function(e) {
-        el: $element[0],
+        checkbox[0].checked = !checkbox[0].checked;
-        checkbox: checkbox[0],
-        handle: handle[0]
-      });
-
-      $element.bind('click', function(e) {
-        $scope.checkbox.tap(e);
         $scope.$apply(function() {
           ngModel.$setViewValue(checkbox[0].checked);
         });
+        e.preventDefault();
+      };
+
+      var clickHandler = function(e) {
+        checkbox[0].checked = !checkbox[0].checked;
+        $scope.$apply(function() {
+          ngModel.$setViewValue(checkbox[0].checked);
+        });
+      };
+
+      $scope.$on('$destroy', function() {
+        $element.unbind('tap', tapHandler);
+        $element.unbind('click', clickHandler);
       });
 
-      ngModel.$render = function() {
+      if(ngModel) {
-        $scope.checkbox.val(ngModel.$viewValue);
+        $element.bind('tap', tapHandler);
-      };
+        $element.bind('click', clickHandler);
+
+        ngModel.$render = function() {
+          console.log('checkbox redern', ngModel.$viewValue);
+          checkbox[0].checked = ngModel.$viewValue;
+        };
+      }
     }
   };
 });
@@ -24171,11 +24186,11 @@ angular.module('ionic.ui.radio', [])
     },
     transclude: true,
     template: '<label class="item item-radio">\
-          <input type="radio" name="group">\
+                <input type="radio" name="group">\
-          <div class="item-content" ng-transclude>\
+                <div class="item-content" ng-transclude>\
-          </div>\
+                </div>\
-          <i class="radio-icon icon ion-checkmark"></i>\
+                <i class="radio-icon icon ion-checkmark"></i>\
-        </label>',
+              </label>',
 
     link: function($scope, $element, $attr, ngModel) {
       var radio;
@@ -24186,20 +24201,34 @@ angular.module('ionic.ui.radio', [])
 
       if(!radio.length) { return; }
 
-      radio.bind('click', function(e) {
+      var tapHandler = function(e) {
-        $scope.$apply(function() {
+        radio[0].checked = true;
-          ngModel.$setViewValue($scope.$eval($attr.ngValue));
+        ngModel.$setViewValue($scope.$eval($attr.ngValue));
-        });
+        e.preventDefault();
+      };
+
+      var clickHandler = function(e) {
+        ngModel.$setViewValue($scope.$eval($attr.ngValue));
+      };
+
+      $scope.$on('$destroy', function() {
+        $element.unbind('tap', tapHandler);
+        $element.unbind('click', clickHandler);
       });
 
-      ngModel.$render = function() {
+      if(ngModel) {
-        var val = $scope.$eval($attr.ngValue);
+        $element.bind('tap', tapHandler);
-        if(val === ngModel.$viewValue) {
+        $element.bind('click', clickHandler);
-          radio.attr('checked', 'checked');
+
-        } else {
+        ngModel.$render = function() {
-          radio.removeAttr('checked');
+          var val = $scope.$eval($attr.ngValue);
-        }
+          if(val === ngModel.$viewValue) {
-      };
+            radio.attr('checked', 'checked');
+          } else {
+            radio.removeAttr('checked');
+          }
+        };
+      }
     }
   };
 });

dist/js/ionic.js

@@ -1769,7 +1769,7 @@ window.ionic = {
   ionic.Platform.detect();
 })(window.ionic);
 ;
-(function(ionic) {
+(function(window, document, ionic) {
   'use strict';
 
   // From the man himself, Mr. Paul Irish.
@@ -1799,7 +1799,71 @@ window.ionic = {
     }
   })();
 
-})(window.ionic);
+
+  // polyfill use to simulate native "tap"
+  function inputTapPolyfill(ele, e) {
+    if(ele.type === "radio" || ele.type === "checkbox") {
+      console.log('RADIOPOLY');
+      ele.checked = !ele.checked;
+    } else if(ele.type === "submit" || ele.type === "button") {
+      ele.click();
+    } else {
+      ele.focus();
+    }
+    e.stopPropagation();
+    e.preventDefault();
+    return false;
+  }
+
+  function tapPolyfill(e) {
+    // if the source event wasn't from a touch event then don't use this polyfill
+    if(!e.gesture || e.gesture.pointerType !== "touch" || !e.gesture.srcEvent) return;
+
+    if(e.defaultPrevented) {
+      e.stopPropagation();
+      e.preventDefault();
+      return false;
+    }
+
+    e = e.gesture.srcEvent; // evaluate the actual source event, not the created event by gestures.js
+
+    var ele = e.target;
+
+    while(ele) {
+      if( ele.tagName === "INPUT" || ele.tagName === "TEXTAREA" || ele.tagName === "SELECT" ) {
+        return inputTapPolyfill(ele, e);
+      } else if( ele.tagName === "LABEL" ) {
+        if(ele.control) {
+          return inputTapPolyfill(ele.control, e);
+        }
+      }
+      /* Let ng-click handle this
+      else if( ele.tagName === "A" || ele.tagName === "BUTTON" ) {
+        ele.click();
+        e.stopPropagation();
+        e.preventDefault();
+        return false;
+      }
+      */
+      ele = ele.parentElement;
+    }
+
+    // they didn't tap one of the above elements
+    // if the currently active element is an input, and they tapped outside
+    // of the current input, then unset its focus (blur) so the keyboard goes away
+    var activeElement = document.activeElement;
+    if(activeElement && (activeElement.tagName === "INPUT" || activeElement.tagName === "TEXTAREA" || activeElement.tagName === "SELECT")) {
+      activeElement.blur();
+      e.stopPropagation();
+      e.preventDefault();
+      return false;
+    }
+  }
+
+  // global tap event listener polyfill for HTML elements that were "tapped" by the user
+  ionic.on("tap", tapPolyfill, window);
+
+})(this, document, ionic);
 ;
 (function(ionic) {
   
@@ -2779,30 +2843,6 @@ window.ionic = {
     }
   });
 
-})(ionic);
-;
-(function(ionic) {
-'use strict';
-
-  ionic.views.Checkbox = ionic.views.View.inherit({
-    initialize: function(opts) {
-      this.el = opts.el;
-      this.checkbox = opts.checkbox;
-      this.handle = opts.handle;
-    },
-
-    tap: function(e) {
-      this.val( !this.checkbox.checked );
-    },
-
-    val: function(value) {
-      if(value === true || value === false) {
-        this.checkbox.checked = value;
-      }
-      return this.checkbox.checked;
-    }
-  });
-
 })(ionic);
 ;
 (function(ionic) {

js/ext/angular/src/directive/ionicCheckbox.js

@@ -9,35 +9,48 @@ angular.module('ionic.ui.checkbox', [])
     restrict: 'E',
     replace: true,
     require: '?ngModel',
-    scope: true,
+    scope: {},
-    template: '<div class="checkbox"><input type="checkbox"><div class="handle"></div></div>',
+    template: '<label class="checkbox"><input type="checkbox"></label>',
+  
 
     link: function($scope, $element, $attr, ngModel) {
-      var checkbox, handle;
+      var checkbox;
 
       if(!ngModel) { return; }
 
       checkbox = $element.children().eq(0);
-      handle = $element.children().eq(1);
 
-      if(!checkbox.length || !handle.length) { return; }
+      if(!checkbox.length) { return; }
 
-      $scope.checkbox = new ionic.views.Checkbox({ 
+      var tapHandler = function(e) {
-        el: $element[0],
+        checkbox[0].checked = !checkbox[0].checked;
-        checkbox: checkbox[0],
-        handle: handle[0]
-      });
-
-      $element.bind('click', function(e) {
-        $scope.checkbox.tap(e);
         $scope.$apply(function() {
           ngModel.$setViewValue(checkbox[0].checked);
         });
+        e.preventDefault();
+      };
+
+      var clickHandler = function(e) {
+        checkbox[0].checked = !checkbox[0].checked;
+        $scope.$apply(function() {
+          ngModel.$setViewValue(checkbox[0].checked);
+        });
+      };
+
+      $scope.$on('$destroy', function() {
+        $element.unbind('tap', tapHandler);
+        $element.unbind('click', clickHandler);
       });
 
-      ngModel.$render = function() {
+      if(ngModel) {
-        $scope.checkbox.val(ngModel.$viewValue);
+        $element.bind('tap', tapHandler);
-      };
+        $element.bind('click', clickHandler);
+
+        ngModel.$render = function() {
+          console.log('checkbox redern', ngModel.$viewValue);
+          checkbox[0].checked = ngModel.$viewValue;
+        };
+      }
     }
   };
 });

js/ext/angular/src/directive/ionicRadio.js

@@ -15,11 +15,11 @@ angular.module('ionic.ui.radio', [])
     },
     transclude: true,
     template: '<label class="item item-radio">\
-          <input type="radio" name="group">\
+                <input type="radio" name="group">\
-          <div class="item-content" ng-transclude>\
+                <div class="item-content" ng-transclude>\
-          </div>\
+                </div>\
-          <i class="radio-icon icon ion-checkmark"></i>\
+                <i class="radio-icon icon ion-checkmark"></i>\
-        </label>',
+              </label>',
 
     link: function($scope, $element, $attr, ngModel) {
       var radio;
@@ -30,20 +30,34 @@ angular.module('ionic.ui.radio', [])
 
       if(!radio.length) { return; }
 
-      radio.bind('click', function(e) {
+      var tapHandler = function(e) {
-        $scope.$apply(function() {
+        radio[0].checked = true;
-          ngModel.$setViewValue($scope.$eval($attr.ngValue));
+        ngModel.$setViewValue($scope.$eval($attr.ngValue));
-        });
+        e.preventDefault();
+      };
+
+      var clickHandler = function(e) {
+        ngModel.$setViewValue($scope.$eval($attr.ngValue));
+      };
+
+      $scope.$on('$destroy', function() {
+        $element.unbind('tap', tapHandler);
+        $element.unbind('click', clickHandler);
       });
 
-      ngModel.$render = function() {
+      if(ngModel) {
-        var val = $scope.$eval($attr.ngValue);
+        $element.bind('tap', tapHandler);
-        if(val === ngModel.$viewValue) {
+        $element.bind('click', clickHandler);
-          radio.attr('checked', 'checked');
+
-        } else {
+        ngModel.$render = function() {
-          radio.removeAttr('checked');
+          var val = $scope.$eval($attr.ngValue);
-        }
+          if(val === ngModel.$viewValue) {
-      };
+            radio.attr('checked', 'checked');
+          } else {
+            radio.removeAttr('checked');
+          }
+        };
+      }
     }
   };
 });

js/ext/angular/src/service/ionicModal.js

@@ -9,13 +9,15 @@ angular.module('ionic.service.modal', ['ionic.service.templateLoad', 'ngAnimate'
     },
     // Show the modal
     show: function() {
+      var _this = this;
       var element = angular.element(this.el);
       if(!element.parent().length) {
-        $animate.enter(element, angular.element($document[0].body));
+        $animate.enter(element, angular.element($document[0].body), null, function() {
+          ionic.views.Modal.prototype.show.call(_this);
+        });
       } 
-      $animate.addClass(element, this.animation);
+      $animate.addClass(element, this.animation, function() {
-
+      });
-      ionic.views.Modal.prototype.show.call(this);
     },
     // Hide the modal
     hide: function() {

js/ext/angular/test/checkbox.html

@@ -9,12 +9,14 @@
   </head>
   <body>
 
-    <content has-header="true" ng-controller="TestCtrl" class="reveal-animation">
+    <div ng-controller="TestCtrl">
-      <p><checkbox ng-model="data.isLovely"></checkbox></p>
+      <content has-header="true" class="reveal-animation">
-      <button type="submit" class="button button-danger" ng-click="setToTrue()">Set to true</button>
+        <p><checkbox ng-model="data.isLovely"></checkbox></p>
-      <button type="submit" class="button button-danger" ng-click="setToFalse()">Set to false</button>
+        <button type="submit" class="button button-danger" ng-click="setToTrue()">Set to true</button>
-      <button type="submit" class="button button-danger" ng-click="getValue()">Get Value</button>
+        <button type="submit" class="button button-danger" ng-click="setToFalse()">Set to false</button>
-    </content>
+        <button type="submit" class="button button-danger" ng-click="getValue()">Get Value</button>
+      </content>
+    </div>
 
     <script src="../../../../dist/js/ionic.js"></script>
     <script src="../../../../dist/js/ionic-angular.js"></script>

js/ext/angular/test/input.html

@@ -0,0 +1,35 @@
+<html ng-app="navTest">
+  <head>
+    <meta charset="utf-8">
+    <title>Checkbox</title>
+
+    <!-- Sets initial viewport load and disables zooming  -->
+    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
+    <link rel="stylesheet" href="../../../../dist/css/ionic.css">
+  </head>
+  <body>
+
+    <div>
+      <content has-header="true" class="reveal-animation">
+        <div class="list">
+          <label class="item item-input">
+            <span class="input-label">First Name</span>
+            <input type="text" placeholder="John">
+          </label>
+          <label class="item item-input">
+            <span class="input-label">Last Name</span>
+            <input type="text" placeholder="Suhr">
+          </label>
+        </div>
+      </content>
+    </div>
+
+    <script src="../../../../dist/js/ionic.js"></script>
+    <script src="../../../../dist/js/ionic-angular.js"></script>
+    <script>
+      angular.module('navTest', ['ionic']);
+
+    </script>
+  </body>
+</html>
+

js/utils/poly.js

@@ -1,4 +1,4 @@
-(function(ionic) {
+(function(window, document, ionic) {
   'use strict';
 
   // From the man himself, Mr. Paul Irish.
@@ -28,4 +28,68 @@
     }
   })();
 
-})(window.ionic);
+
+  // polyfill use to simulate native "tap"
+  function inputTapPolyfill(ele, e) {
+    if(ele.type === "radio" || ele.type === "checkbox") {
+      console.log('RADIOPOLY');
+      ele.checked = !ele.checked;
+    } else if(ele.type === "submit" || ele.type === "button") {
+      ele.click();
+    } else {
+      ele.focus();
+    }
+    e.stopPropagation();
+    e.preventDefault();
+    return false;
+  }
+
+  function tapPolyfill(e) {
+    // if the source event wasn't from a touch event then don't use this polyfill
+    if(!e.gesture || e.gesture.pointerType !== "touch" || !e.gesture.srcEvent) return;
+
+    if(e.defaultPrevented) {
+      e.stopPropagation();
+      e.preventDefault();
+      return false;
+    }
+
+    e = e.gesture.srcEvent; // evaluate the actual source event, not the created event by gestures.js
+
+    var ele = e.target;
+
+    while(ele) {
+      if( ele.tagName === "INPUT" || ele.tagName === "TEXTAREA" || ele.tagName === "SELECT" ) {
+        return inputTapPolyfill(ele, e);
+      } else if( ele.tagName === "LABEL" ) {
+        if(ele.control) {
+          return inputTapPolyfill(ele.control, e);
+        }
+      }
+      /* Let ng-click handle this
+      else if( ele.tagName === "A" || ele.tagName === "BUTTON" ) {
+        ele.click();
+        e.stopPropagation();
+        e.preventDefault();
+        return false;
+      }
+      */
+      ele = ele.parentElement;
+    }
+
+    // they didn't tap one of the above elements
+    // if the currently active element is an input, and they tapped outside
+    // of the current input, then unset its focus (blur) so the keyboard goes away
+    var activeElement = document.activeElement;
+    if(activeElement && (activeElement.tagName === "INPUT" || activeElement.tagName === "TEXTAREA" || activeElement.tagName === "SELECT")) {
+      activeElement.blur();
+      e.stopPropagation();
+      e.preventDefault();
+      return false;
+    }
+  }
+
+  // global tap event listener polyfill for HTML elements that were "tapped" by the user
+  ionic.on("tap", tapPolyfill, window);
+
+})(this, document, ionic);

js/views/checkboxView.js

@@ -1,23 +0,0 @@
-(function(ionic) {
-'use strict';
-
-  ionic.views.Checkbox = ionic.views.View.inherit({
-    initialize: function(opts) {
-      this.el = opts.el;
-      this.checkbox = opts.checkbox;
-      this.handle = opts.handle;
-    },
-
-    tap: function(e) {
-      this.val( !this.checkbox.checked );
-    },
-
-    val: function(value) {
-      if(value === true || value === false) {
-        this.checkbox.checked = value;
-      }
-      return this.checkbox.checked;
-    }
-  });
-
-})(ionic);

scss/_animations.scss

@@ -198,6 +198,17 @@ $slide-in-up-function: cubic-bezier(.1, .7, .1, 1);
   }
 }
 
+.fade-in-not-out {
+  &.ng-enter, .ng-enter {
+    position: relative;
+    -webkit-animation: fadeIn 0.3s;
+    animation: fadeIn 0.3s;
+  }
+  &.ng-leave, .ng-leave {
+    display: none;
+  }
+}
+
 @-moz-keyframes spin { 
   100% { -moz-transform: rotate(360deg); } 
 }
@@ -210,3 +221,4 @@ $slide-in-up-function: cubic-bezier(.1, .7, .1, 1);
     transform:rotate(360deg); 
   } 
 }
+