fix(sideMenu): when a drag on content is disallowed, do not prevent d…

…efault Closes #1725
ionic-team · Jul 8, 2014 · ab500f2 · ab500f2
1 parent a2fe834
commit ab500f2
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 30 deletions.
diff --git a/js/angular/controller/sideMenuController.js b/js/angular/controller/sideMenuController.js
@@ -9,7 +9,6 @@ function($scope, $attrs, $ionicSideMenuDelegate, $ionicPlatform) {
   extend(this, ionic.controllers.SideMenuController.prototype);
 
   this.$scope = $scope;
-  this.dragThreshold = 25;
 
   ionic.controllers.SideMenuController.call(this, {
     left: { width: 275 },
@@ -23,26 +22,36 @@ function($scope, $attrs, $ionicSideMenuDelegate, $ionicPlatform) {
     return $scope.dragContent;
   };
 
-  this.dragThreshold = 25;
-  this.dragOnlyEdge = false;
+  this.edgeThreshold = 25;
+  this.edgeThresholdEnabled = false;
   this.edgeDragThreshold = function(value) {
     if (arguments.length) {
       if (angular.isNumber(value) && value > 0) {
-        this.dragThreshold = value;
-        this.dragOnlyEdge = true;
+        this.edgeThreshold = value;
+        this.edgeThresholdEnabled = true;
       } else {
-        this.dragOnlyEdge = !!value;
+        this.edgeThresholdEnabled = !!value;
       }
     }
-    return this.dragOnlyEdge;
+    return this.edgeThresholdEnabled;
   };
 
   this.isDraggableTarget = function(e) {
-    return (self.isOpen() || $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'));
+    var startX = e.gesture.startEvent && e.gesture.startEvent.center &&
+      e.gesture.startEvent.center.pageX;
+
+    //Only restrict edge when sidemenu is closed and it's enabled
+    var shouldAllowOnlyEdgeDrag = self.edgeThresholdEnabled && !self.isOpen();
+    var dragIsWithinBounds = !shouldAllowOnlyEdgeDrag ||
+      startX <= this.edgeThreshold ||
+      startX >= this.content.offsetWidth - this.edgeThreshold;
+
+    return ($scope.dragContent || self.isOpen()) &&
+           dragIsWithinBounds &&
+           !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;

diff --git a/js/controllers/sideMenuController.js b/js/controllers/sideMenuController.js
@@ -278,28 +278,11 @@
       this._startX = null;
       this._lastX = null;
       this._offsetX = null;
-      this._firstX = null;
-      this._doDrag = false;
     },
 
     // Handle a drag event
     _handleDrag: function(e) {
 
-      //Get the start position of the drag
-      if (!this._firstX) {
-       this._firstX = e.gesture.touches[0].pageX;
-       this.content._cachedWidth = this.content.element.offsetWidth;
-      }
-
-      //Allow the drag to affect the side if:
-      // - the side menu is already opened, or
-      // - there is no edge drag threshold enabled, or
-      // - the drag is within the edge drag threshold
-      this._doDrag = this.isOpen() ||
-        !this.edgeDragThreshold() ||
-        this._firstX <= this.dragThreshold ||
-        this._firstX >= this.content._cachedWidth - this.dragThreshold;
-
       // If we don't have start coords, grab and store them
       if(!this._startX) {
         this._startX = e.gesture.touches[0].pageX;
@@ -310,7 +293,7 @@
       }
 
       // Calculate difference from the tap points
-      if(!this._isDragging && this._doDrag && Math.abs(this._lastX - this._startX) > this.dragThresholdX) {
+      if(!this._isDragging && Math.abs(this._lastX - this._startX) > this.dragThresholdX) {
         // if the difference is greater than threshold, start dragging using the current
         // point as the starting point
         this._startX = this._lastX;