Feature/allow touch scroll

README.md

@@ -144,6 +144,7 @@ There are some example usages that you can look at to get started. They can be f
   mouseDrag: true,
   touchDrag: true,
   pointerDrag: true,
+  enableTouchScroll: false,
 
   direction: 'right', // top, bottom, left, right
   duration: '500',

dist/jquery-slidePanel.es.js

@@ -99,10 +99,11 @@ var DEFAULTS = {
   mouseDrag: true,
   touchDrag: true,
   pointerDrag: true,
+  enableTouchScroll: false,
 
   direction: 'right', // top, bottom, left, right
   duration: '500',
-  easing: 'ease', // linear, ease-in, ease-out, ease-in-out
+  easing: 'ease', // linear, ease-in, ease-out, ease-in-out,
 
   // callbacks
   beforeLoad: $.noop, // Before loading
@@ -576,7 +577,7 @@ class Drag {
 
     $$1(document).on(SlidePanel.eventName('blur'), $$1.proxy(this.onDragEnd, this));
 
-    event.preventDefault();
+    !this.options.enableTouchScroll && event.preventDefault();
   }
 
   /**
@@ -585,11 +586,11 @@ class Drag {
   onDragMove(event) {
     const distance = this.distance(this._drag.pointer, this.pointer(event));
 
-    if (!SlidePanel.is('dragging')) {
+    if (!SlidePanel.is('dragging') || Math.abs(distance.scroll) > Math.abs(distance.drag)) {
       return;
     }
 
-    if (Math.abs(distance) > this.options.dragTolerance) {
+    if (Math.abs(distance.drag) > this.options.dragTolerance) {
       if (this._willClose !== true) {
         this._willClose = true;
         this._view.$panel.addClass(this.options.classes.willClose);
@@ -603,8 +604,8 @@ class Drag {
       return;
     }
 
-    event.preventDefault();
-    this.move(distance);
+    !this.options.enableTouchScroll && event.preventDefault();
+    this.move(distance.drag);
   }
 
   /**
@@ -613,6 +614,10 @@ class Drag {
   onDragEnd(event) {
     const distance = this.distance(this._drag.pointer, this.pointer(event));
 
+    if (Math.abs(distance.scroll) > Math.abs(distance.drag)) {
+      return;
+    }
+
     $$1(document).off(SlidePanel.eventName('mousemove mouseup touchmove touchend pointermove pointerup MSPointerMove MSPointerUp blur'));
 
     this._view.$panel.removeClass(this.options.classes.dragging);
@@ -630,7 +635,7 @@ class Drag {
 
     SlidePanel.trigger(this._view, 'afterDrag');
 
-    if (Math.abs(distance) < this.options.dragTolerance) {
+    if (Math.abs(distance.drag) < this.options.dragTolerance) {
       this._view.revert();
     } else {
       this._view.hide();
@@ -667,13 +672,16 @@ class Drag {
 
   /**distance
    * Gets the distance of two pointer.
+   * @returns {Object} - Contains 'drag' and 'scroll' distances between the given pointers.
    */
   distance(first, second) {
     const d = this.options.direction;
-    if (d === 'left' || d === 'right') {
-      return second.x - first.x;
-    }
-    return second.y - first.y;
+    var dx = second.x - first.x;
+    var dy = second.y - first.y;
+
+    return (d === 'left' || d === 'right') ?
+        { drag: dx, scroll: this.options.enableTouchScroll ? dy : 0 }
+        : { drag: dy, scroll: this.options.enableTouchScroll ? dx : 0 };
   }
 
   move(value) {

dist/jquery-slidePanel.js

@@ -161,10 +161,11 @@
     mouseDrag: true,
     touchDrag: true,
     pointerDrag: true,
+    enableTouchScroll: false,
 
     direction: 'right', // top, bottom, left, right
     duration: '500',
-    easing: 'ease', // linear, ease-in, ease-out, ease-in-out
+    easing: 'ease', // linear, ease-in, ease-out, ease-in-out,
 
     // callbacks
     beforeLoad: $.noop, // Before loading
@@ -769,19 +770,22 @@
             _jquery2.default.proxy(this.onDragEnd, this)
           );
 
-          event.preventDefault();
+          !this.options.enableTouchScroll && event.preventDefault();
         }
       },
       {
         key: 'onDragMove',
         value: function onDragMove(event) {
           var distance = this.distance(this._drag.pointer, this.pointer(event));
 
-          if (!SlidePanel.is('dragging')) {
+          if (
+            !SlidePanel.is('dragging') ||
+            Math.abs(distance.scroll) > Math.abs(distance.drag)
+          ) {
             return;
           }
 
-          if (Math.abs(distance) > this.options.dragTolerance) {
+          if (Math.abs(distance.drag) > this.options.dragTolerance) {
             if (this._willClose !== true) {
               this._willClose = true;
               this._view.$panel.addClass(this.options.classes.willClose);
@@ -795,15 +799,19 @@
             return;
           }
 
-          event.preventDefault();
-          this.move(distance);
+          !this.options.enableTouchScroll && event.preventDefault();
+          this.move(distance.drag);
         }
       },
       {
         key: 'onDragEnd',
         value: function onDragEnd(event) {
           var distance = this.distance(this._drag.pointer, this.pointer(event));
 
+          if (Math.abs(distance.scroll) > Math.abs(distance.drag)) {
+            return;
+          }
+
           (0, _jquery2.default)(document).off(
             SlidePanel.eventName(
               'mousemove mouseup touchmove touchend pointermove pointerup MSPointerMove MSPointerUp blur'
@@ -825,7 +833,7 @@
 
           SlidePanel.trigger(this._view, 'afterDrag');
 
-          if (Math.abs(distance) < this.options.dragTolerance) {
+          if (Math.abs(distance.drag) < this.options.dragTolerance) {
             this._view.revert();
           } else {
             this._view.hide();
@@ -865,10 +873,12 @@
         key: 'distance',
         value: function distance(first, second) {
           var d = this.options.direction;
-          if (d === 'left' || d === 'right') {
-            return second.x - first.x;
-          }
-          return second.y - first.y;
+          var dx = second.x - first.x;
+          var dy = second.y - first.y;
+
+          return d === 'left' || d === 'right'
+            ? { drag: dx, scroll: this.options.enableTouchScroll ? dy : 0 }
+            : { drag: dy, scroll: this.options.enableTouchScroll ? dx : 0 };
         }
       },
       {

examples/index.html

@@ -21,6 +21,11 @@
 			background: rgba(0, 0, 0, .4);
 		}
 
+		.slidePanel-content {
+			overflow: auto;
+			max-height: 100%;
+		}
+
 		.slidePanel-will-close {
 			background: rgba(0, 0, 255, .4);
 		}
@@ -146,6 +151,15 @@ <h2>Passing data to view</h2>
 				<button class="example-data" data-hello="world">Data</button>
 			</div>
 		</section>
+		<section>
+			<h2>Touch scroll</h2>
+			<div class="example">
+				<a href="ajax.html" class="example-touch-scroll" data-direction="top">top</a>
+				<a href="ajax.html" class="example-touch-scroll" data-direction="left">left</a>
+				<a href="ajax.html" class="example-touch-scroll" data-direction="right">right</a>
+				<a href="ajax.html" class="example-touch-scroll" data-direction="bottom">bottom</a>
+			</div>
+		</section>
 	</div>
 	<script>
 		(function() {
@@ -168,6 +182,15 @@ <h2>Passing data to view</h2>
 					useCssTransitions: false
 				});
 			});
+			$('.example-touch-scroll').on('click', function() {
+				var direction = $(this).data('direction');
+				$.slidePanel.show({
+					content: '<div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sed velit eget nisi placerat imperdiet interdum sed mi. Sed vel dolor nunc. Sed consectetur malesuada mollis. Duis mollis, ante id dapibus maximus, ex tortor placerat risus, in maximus dolor turpis ut nisl. Proin augue magna, pellentesque nec erat at, rutrum ornare ex. Duis et fermentum elit, aliquet dignissim libero. Quisque sagittis nulla mi, id egestas dui placerat ut. Nunc efficitur metus et elementum interdum.</p><p>Morbi sed ex vestibulum, tincidunt nisl eu, tincidunt arcu. Pellentesque non lorem vestibulum, viverra diam ac, pulvinar diam. Ut consequat massa sit amet sem semper molestie. Suspendisse potenti. In et ipsum eu erat egestas tempor. Nulla sed metus fermentum, iaculis augue quis, tempus eros. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas viverra orci et elit fringilla ornare id vitae eros.</p><p>Nullam sed risus risus. Phasellus vitae metus et mauris eleifend vehicula eu nec mi. Suspendisse et purus cursus, finibus nulla id, feugiat arcu. Integer bibendum luctus fringilla. Morbi sit amet elit libero. Donec ut porta odio. Praesent commodo convallis mi, sed fringilla enim fermentum id. Praesent ut pellentesque nibh. Suspendisse elementum pellentesque urna a auctor. Curabitur rhoncus luctus augue id malesuada.</p><p>Sed nisl augue, posuere sed euismod in, imperdiet eu arcu. Nam et sagittis nisl. Sed aliquet luctus laoreet. Nulla iaculis justo ipsum, rutrum interdum sapien volutpat eu. Sed leo neque, rutrum ut vulputate quis, imperdiet vel massa. Aliquam neque eros, sodales nec fringilla eget, facilisis ac nisi. Maecenas quis gravida arcu. Nam non venenatis tellus. Sed tristique turpis eget odio convallis, id porttitor tortor sollicitudin. Cras luctus turpis ut dolor sodales pharetra blandit ut sem. Mauris elementum neque nec orci vehicula, non lobortis sem mattis. Integer vel luctus ex. Aenean et blandit nisi. Nunc venenatis turpis vel fringilla tempor.</p><p>Mauris laoreet magna lacinia, rhoncus libero vitae, mollis velit. Phasellus vestibulum lobortis egestas. Duis placerat, nunc quis vehicula posuere, sem tortor semper nunc, et faucibus enim nisi eget ante. Donec sapien lorem, facilisis vel felis iaculis, sollicitudin suscipit lectus. Duis ut neque ultricies, fringilla sapien a, tristique tellus. Sed facilisis elit risus, sit amet egestas tortor placerat at. Morbi blandit nisi lorem. Ut aliquam, tortor eget placerat sodales, ligula dui viverra magna, vel dapibus erat turpis a risus. Sed porta leo eget justo consectetur scelerisque. Nunc mollis eleifend eros, vitae aliquet tortor dictum ultrices. Curabitur sit amet mi et nisi ultricies semper. Sed nunc est, porttitor ac tincidunt a, ultrices vitae justo. Suspendisse sagittis massa et velit egestas faucibus. Nulla facilisi. Suspendisse in nibh urna. Mauris purus orci, egestas eget enim et, tristique elementum libero.</p><p>Nunc et hendrerit nunc, a vestibulum mi. Pellentesque sollicitudin arcu eu tincidunt malesuada. Donec vitae lorem odio. Sed nec varius diam. Nunc purus magna, aliquam sed sapien nec, dignissim mollis nisi. Nam commodo rutrum urna malesuada porta. Integer condimentum ornare sapien. Praesent vitae varius magna.</p><p>Sed a nisl ac eros pharetra convallis. Vivamus gravida maximus odio gravida hendrerit. Nullam ut ante elit. Cras non dictum urna. Nulla pretium eu nunc a molestie. Curabitur pharetra orci ante, et convallis turpis placerat vitae. Cras imperdiet rhoncus quam, vitae lobortis felis varius vel. Nulla a orci faucibus, accumsan ligula et, cursus urna. Donec consectetur enim a ullamcorper gravida. Praesent blandit augue non arcu sagittis hendrerit. Cras fringilla metus in nulla vehicula tincidunt.</p><p>Suspendisse efficitur suscipit facilisis. Fusce ac lorem sit amet elit viverra faucibus nec vitae ligula. Donec cursus vel est sed tincidunt. Ut mollis porta cursus. Quisque sit amet fringilla justo. Integer lobortis ut purus ut vehicula. Fusce scelerisque massa id turpis molestie, vel vestibulum lorem egestas. Praesent nisl mi, hendrerit sit amet aliquet eu, imperdiet eu elit. Fusce mollis pharetra egestas. Nunc nec augue non augue mollis dictum. Nullam facilisis, massa non condimentum venenatis, libero justo elementum lorem, malesuada viverra nulla purus a nisl. Duis purus ligula, consectetur sed auctor eget, rutrum eu sapien. Donec iaculis tellus blandit quam placerat, eu venenatis ante tincidunt.</p><p>Pellentesque eu sapien ac orci auctor tempor. Praesent elementum ligula enim, a dictum velit suscipit sed. Mauris eget finibus metus. Pellentesque tincidunt sollicitudin placerat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec quis eros non justo congue imperdiet eu vel metus. Morbi sagittis diam enim, et suscipit ante tempus bibendum. Aliquam a maximus mauris, sed aliquam arcu. Maecenas nunc ex, ullamcorper eu luctus quis, gravida sit amet diam. Sed ut vulputate tortor.</p><p>Donec eget convallis metus. Cras pretium quam pulvinar magna tincidunt, quis luctus risus sollicitudin. Sed dui libero, rutrum id arcu non, mattis vestibulum ex. Integer in est suscipit, ornare lectus quis, suscipit enim. Sed sit amet tincidunt quam. Curabitur eget ipsum ut justo aliquam porta. Vivamus quis vestibulum lectus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt orci et semper rutrum. Aliquam eget magna quis sem semper aliquam at id augue. Proin eu eros quam. Ut et libero vitae lorem mollis volutpat. Maecenas sagittis vitae ante finibus tincidunt. Aliquam aliquet ac eros id condimentum. Aenean venenatis elementum magna, at fermentum orci ultrices ac.</p><p>Proin ac diam eros. Maecenas justo nisi, aliquet et nunc ut, fermentum sollicitudin justo. Vivamus eget massa mi. Pellentesque malesuada tortor consequat purus lacinia lobortis. Etiam mauris elit, interdum vel diam a, bibendum commodo lacus. Pellentesque vel nunc semper, tincidunt nisi et, ornare metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer porttitor facilisis dolor vel dapibus. Aliquam ullamcorper mauris id arcu rhoncus porttitor. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam semper metus at purus dictum, sed finibus felis consectetur. Duis purus purus, fringilla posuere interdum a, porta a elit. Nam malesuada euismod euismod. Proin id porta lorem. Mauris et feugiat est. Nullam in aliquet nibh, quis tristique eros.</p><p>Ut dictum eget nunc nec convallis. Ut diam tortor, tristique sed nisl at, dignissim hendrerit arcu. Integer augue libero, laoreet sed sem eget, feugiat vehicula libero. Sed et sem id tortor viverra bibendum. Sed molestie posuere nunc non sollicitudin. Nullam consectetur facilisis fringilla. Nunc quis ullamcorper magna.</p><p>Curabitur commodo efficitur lectus, at varius sapien interdum non. Morbi fermentum ac arcu ac blandit. Vivamus pretium malesuada libero at interdum. Sed rhoncus dolor ac dictum eleifend. Nulla dolor felis, viverra a interdum et, sollicitudin ut urna. Mauris dictum ex eros, nec tristique urna scelerisque at. Ut imperdiet auctor fringilla. Proin dui augue, dignissim a magna vitae, rhoncus tempus velit. Quisque commodo, lectus ac bibendum posuere, arcu lectus blandit elit, dapibus vestibulum purus lacus in odio. Integer lectus risus, maximus maximus dolor luctus, feugiat tempor odio. Integer vel lacinia metus. Mauris facilisis rhoncus risus eu lobortis. Vestibulum sed neque justo. Praesent auctor sapien lacus, nec mollis sem iaculis at. Sed a pharetra erat, quis ultrices augue.</p><p>Sed pharetra ligula ac ligula viverra vulputate sit amet malesuada tellus. Sed porttitor odio dictum sollicitudin pretium. Fusce nec viverra erat. Nam eget posuere lectus, gravida auctor risus. Aliquam cursus nulla non venenatis sollicitudin. Pellentesque sit amet luctus purus, vel consectetur ipsum. Vivamus feugiat tortor in scelerisque tempor. Pellentesque et ullamcorper felis. Quisque tempor sagittis erat vitae mollis.</p><p>Nullam a felis ligula. Etiam dignissim sem ante, at lacinia leo tempor ac. Duis eros mi, vehicula a felis et, porttitor tincidunt mauris. Integer dapibus tellus ex, eu suscipit nisl luctus id. Etiam a libero ac purus lobortis feugiat. In hac habitasse platea dictumst. Duis ut tristique quam. Nam porta placerat suscipit. Praesent in dapibus magna, in aliquam dolor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur nec risus quam. Integer sit amet maximus velit, ut mattis nisl. Etiam non mauris sed purus dictum gravida sed quis felis. Quisque ac finibus risus.</p></div>'
+				}, {
+					direction: direction,
+					enableTouchScroll: true
+				});
+			});
 			$('.example-handler').on('click', function() {
 				$.slidePanel.show({
 					content: '<div><h2>Title</h2><p>content here</p></div><div class="handler"></div>'

src/defaults.js

@@ -44,10 +44,11 @@ export default {
   mouseDrag: true,
   touchDrag: true,
   pointerDrag: true,
+  enableTouchScroll: false,
 
   direction: 'right', // top, bottom, left, right
   duration: '500',
-  easing: 'ease', // linear, ease-in, ease-out, ease-in-out
+  easing: 'ease', // linear, ease-in, ease-out, ease-in-out,
 
   // callbacks
   beforeLoad: $.noop, // Before loading

src/drag.js

@@ -107,7 +107,7 @@ class Drag {
 
     $(document).on(SlidePanel.eventName('blur'), $.proxy(this.onDragEnd, this));
 
-    event.preventDefault();
+    !this.options.enableTouchScroll && event.preventDefault();
   }
 
   /**
@@ -116,11 +116,11 @@ class Drag {
   onDragMove(event) {
     const distance = this.distance(this._drag.pointer, this.pointer(event));
 
-    if (!SlidePanel.is('dragging')) {
+    if (!SlidePanel.is('dragging') || Math.abs(distance.scroll) > Math.abs(distance.drag)) {
       return;
     }
 
-    if (Math.abs(distance) > this.options.dragTolerance) {
+    if (Math.abs(distance.drag) > this.options.dragTolerance) {
       if (this._willClose !== true) {
         this._willClose = true;
         this._view.$panel.addClass(this.options.classes.willClose);
@@ -134,8 +134,8 @@ class Drag {
       return;
     }
 
-    event.preventDefault();
-    this.move(distance);
+    !this.options.enableTouchScroll && event.preventDefault();
+    this.move(distance.drag);
   }
 
   /**
@@ -144,6 +144,10 @@ class Drag {
   onDragEnd(event) {
     const distance = this.distance(this._drag.pointer, this.pointer(event));
 
+    if (Math.abs(distance.scroll) > Math.abs(distance.drag)) {
+      return;
+    }
+
     $(document).off(SlidePanel.eventName('mousemove mouseup touchmove touchend pointermove pointerup MSPointerMove MSPointerUp blur'));
 
     this._view.$panel.removeClass(this.options.classes.dragging);
@@ -161,7 +165,7 @@ class Drag {
 
     SlidePanel.trigger(this._view, 'afterDrag');
 
-    if (Math.abs(distance) < this.options.dragTolerance) {
+    if (Math.abs(distance.drag) < this.options.dragTolerance) {
       this._view.revert();
     } else {
       this._view.hide();
@@ -198,13 +202,16 @@ class Drag {
 
   /**distance
    * Gets the distance of two pointer.
+   * @returns {Object} - Contains 'drag' and 'scroll' distances between the given pointers.
    */
   distance(first, second) {
     const d = this.options.direction;
-    if (d === 'left' || d === 'right') {
-      return second.x - first.x;
-    }
-    return second.y - first.y;
+    var dx = second.x - first.x;
+    var dy = second.y - first.y;
+
+    return (d === 'left' || d === 'right') ?
+        { drag: dx, scroll: this.options.enableTouchScroll ? dy : 0 }
+        : { drag: dy, scroll: this.options.enableTouchScroll ? dx : 0 };
   }
 
   move(value) {