fix(range): Fix range being able to slide when in a side menu, closes #318

Author: Adam Bradley

Diff for: js/ext/angular/src/directive/ionicSideMenu.js

@@ -79,9 +79,9 @@ angular.module('ionic.ui.sideMenu', ['ionic.service.gesture', 'ionic.service.vie
    * @name $ionicSideMenuDelegate#getOpenRatio
    * @description Gets the ratio of open amount over menu width. For example, a
    * menu of width 100 that is opened by 50 pixels is 50% opened, and would return
-   * a ratio of 0.5. 
+   * a ratio of 0.5.
    *
-   * @returns {float} 0 if nothing is open, between 0 and 1 if left menu is 
+   * @returns {float} 0 if nothing is open, between 0 and 1 if left menu is
    * opened/opening, and between 0 and -1 if right menu is opened/opening.
    */
   'getOpenRatio',
@@ -104,7 +104,7 @@ angular.module('ionic.ui.sideMenu', ['ionic.service.gesture', 'ionic.service.vie
    * side menus.
    * @returns {boolean} Whether the content can be dragged to open side menus.
    */
-  'canDragContent',
+  'canDragContent'
   /**
    * @ngdoc method
    * @name $ionicSideMenuDelegate#$getByHandle
@@ -171,8 +171,6 @@ angular.module('ionic.ui.sideMenu', ['ionic.service.gesture', 'ionic.service.vie
   return {
     restrict: 'ECA',
     controller: ['$scope', '$attrs', '$ionicSideMenuDelegate', function($scope, $attrs, $ionicSideMenuDelegate) {
-      var _this = this;
-
       angular.extend(this, ionic.controllers.SideMenuController.prototype);
 
       ionic.controllers.SideMenuController.call(this, {
@@ -187,6 +185,14 @@ angular.module('ionic.ui.sideMenu', ['ionic.service.gesture', 'ionic.service.vie
         return $scope.dragContent;
       };
 
+      this.isDraggableTarget = function(e) {
+        return $scope.dragContent &&
+               (!e.gesture.srcEvent.defaultPrevented &&
+                !e.target.tagName.match(/input|textarea|select|object|embed/i) &&
+                !e.target.isContentEditable &&
+                !(e.target.dataset ? e.target.dataset.preventScroll : e.target.getAttribute('data-prevent-default') == 'true'));
+      };
+
       $scope.sideMenuContentTranslateX = 0;
 
       var deregisterInstance = $ionicSideMenuDelegate._registerInstance(
@@ -225,6 +231,7 @@ angular.module('ionic.ui.sideMenu', ['ionic.service.gesture', 'ionic.service.vie
  *
  */
 .directive('ionSideMenuContent', ['$timeout', '$ionicGesture', function($timeout, $ionicGesture) {
+
   return {
     restrict: 'EA', //DEPRECATED 'A'
     require: '^ionSideMenus',
@@ -256,14 +263,10 @@ angular.module('ionic.ui.sideMenu', ['ionic.service.gesture', 'ionic.service.vie
         ionic.on('tap', contentTap, $element[0]);
 
         var dragFn = function(e) {
-          if($scope.dragContent) {
-            if(defaultPrevented || e.gesture.srcEvent.defaultPrevented) {
-              return;
-            }
-            isDragging = true;
-            sideMenuCtrl._handleDrag(e);
-            e.gesture.srcEvent.preventDefault();
-          }
+          if(defaultPrevented || !sideMenuCtrl.isDraggableTarget(e)) return;
+          isDragging = true;
+          sideMenuCtrl._handleDrag(e);
+          e.gesture.srcEvent.preventDefault();
         };
 
         var dragVertFn = function(e) {

Diff for: js/ext/angular/test/directive/ionicSideMenu.unit.js

@@ -38,6 +38,76 @@ describe('Ionic Angular Side Menu', function() {
     expect(el.controller('ionSideMenus').canDragContent()).toBe(true);
     expect(el.scope().dragContent).toBe(true);
   }));
+
+  it('should isDraggableTarget', inject(function($compile, $rootScope) {
+    var el = $compile('<ion-side-menus><ion-side-menu-content></ion-side-menu-content></ion-side-menus>')($rootScope.$new());
+    $rootScope.$apply();
+
+    expect(el.controller('ionSideMenus').canDragContent()).toBe(true);
+
+    var e = {
+      gesture: {
+        srcEvent: {
+          defaultPrevented: false
+        }
+      },
+      target: {
+        tagName: 'DIV',
+        dataset: {
+          preventScroll: false
+        }
+      }
+    };
+
+    var ctrl = el.controller('ionSideMenus');
+    expect(ctrl.isDraggableTarget(e)).toBe(true);
+
+    el.controller('ionSideMenus').canDragContent(false);
+    expect(ctrl.isDraggableTarget(e)).toBe(false);
+    el.controller('ionSideMenus').canDragContent(true);
+
+    e.gesture.srcEvent.defaultPrevented = true;
+    expect(ctrl.isDraggableTarget(e)).toBe(false);
+    e.gesture.srcEvent.defaultPrevented = false;
+
+    e.target.tagName = 'INPUT';
+    expect(ctrl.isDraggableTarget(e)).toBe(false);
+
+    e.target.tagName = 'TEXTAREA';
+    expect(ctrl.isDraggableTarget(e)).toBe(false);
+
+    e.target.tagName = 'SELECT';
+    expect(ctrl.isDraggableTarget(e)).toBe(false);
+
+    e.target.tagName = 'OBJECT';
+    expect(ctrl.isDraggableTarget(e)).toBe(false);
+
+    e.target.tagName = 'EMBED';
+    expect(ctrl.isDraggableTarget(e)).toBe(false);
+
+    e.target.tagName = 'DIV';
+    expect(ctrl.isDraggableTarget(e)).toBe(true);
+
+    e.target.isContentEditable = true;
+    expect(ctrl.isDraggableTarget(e)).toBe(false);
+    e.target.isContentEditable = false;
+
+    e.target.dataset.preventScroll = true
+    expect(ctrl.isDraggableTarget(e)).toBe(false);
+    e.target.isContentEditable = false;
+
+    e.target.dataset = undefined;
+    e.target.getAttribute = function(val){
+      return (val == 'data-prevent-default' ? 'true' : undefined);
+    }
+    expect(ctrl.isDraggableTarget(e)).toBe(false);
+
+    e.target.getAttribute = function(){
+      return null;
+    }
+    expect(ctrl.isDraggableTarget(e)).toBe(true);
+
+  }));
 });
 
 describe('Ionic Side Menu Content Directive', function () {

Diff for: js/ext/angular/test/sideMenu2.html

@@ -69,6 +69,12 @@
           <p>Swipe to the right to reveal the left menu.</p>
 
           <div class="list">
+            <div class="item item-input range range-positive">
+              <span class="input-label">Range</span>
+              5 km
+              <input type="range" min="5" max="700">
+              700 km
+            </div>
             <ion-item ion-item="item" ng-href="#" ng-click="itemClick()" ng-repeat="item in range">
               <strong>{{$index}}</strong>
               <b>:</b>