feat: various bugs, enabled touch

#8, #2

Author: rosspi

dist/jquery.gridstrap.css

@@ -13,6 +13,7 @@
 .gridstrap-cell-hidden{ 
   opacity: 0; 
   pointer-events: none;
+  touch-action: none;
 }
 .gridstrap-cell-drag{ 
   transition:width 0.05s, height 0.05s,  left 0.05s, top 0.05s ;

dist/jquery.gridstrap.js

@@ -22,6 +22,9 @@ exports['default'] = {
   EVENT_MOUSEOVER: 'mouseover',
   EVENT_MOUSEMOVE: 'mousemove',
   EVENT_MOUSEUP: 'mouseup',
+  EVENT_TOUCHSTART: 'touchstart',
+  EVENT_TOUCHMOVE: 'touchmove',
+  EVENT_TOUCHEND: 'touchend',
   EVENT_RESIZE: 'resize',
   EVENT_CELL_RESIZE: 'cellresize',
   EVENT_CELL_DRAG: 'celldrag',
@@ -140,7 +143,7 @@ var _methods = require('./methods');
     autoPadNonContiguousCells: true, // toggle adding non-contiguous cells automatically on drag or as needed.
     updateCoordinatesOnWindowResize: true, // enable window resize event handler.
     debug: false, // toggle console output.
-    dragMouseoverThrottle: 500, // throttle cell mouseover events for rearranging.
+    dragMouseoverThrottle: 150, // throttle cell mouseover events for rearranging.
     windowResizeDebounce: 50, // debounce redraw on window resize.
     mousemoveDebounce: 0 // debounce mousemove for dragging cells.
   };
@@ -183,6 +186,17 @@ var Handlers = (function () {
     }
   };
 
+  Handlers.prototype.onTouchStart = function onTouchStart(touchEvent, $cell, gridstrapContext) {
+    var $ = this.setup.jQuery;
+    var options = this.setup.Options;
+
+    touchEvent.preventDefault();
+
+    if (touchEvent.touches.length) {
+      this.onMousedown(_utils.Utils.ConvertTouchToMouseEvent(touchEvent), $cell, gridstrapContext);
+    }
+  };
+
   Handlers.prototype.onMousedown = function onMousedown(mouseEvent, $cell, gridstrapContext) {
     var $ = this.setup.jQuery;
     var context = this.setup.Context;
@@ -218,6 +232,8 @@ var Handlers = (function () {
   };
 
   Handlers.prototype.onMouseover = function onMouseover(mouseEvent, $cell, gridstrapContext) {
+    var _this = this;
+
     var $ = this.setup.jQuery;
     var context = this.setup.Context;
     var options = this.setup.Options;
@@ -238,21 +254,24 @@ var Handlers = (function () {
 
         this.internal.LastMouseOverCellTarget = $cell;
 
-        if (!_utils.Utils.IsElementThrottled($, $cell, options.dragMouseoverThrottle)) {
-          // do not move two cells that have recently already moved.
-
+        _utils.Utils.Limit(function () {
           if (gridstrapContext.options.rearrangeOnDrag) {
 
-            this.internal.MoveCell($draggedCell, $cell, gridstrapContext);
+            _this.internal.MoveCell($draggedCell, $cell, gridstrapContext);
 
             // reset dragged object to mouse pos, not pos of hidden cells.
-            this.internal.MoveDraggedCell(mouseEvent, $draggedCell);
+            _this.internal.MoveDraggedCell(mouseEvent, $draggedCell);
           }
-        }
+        }, options.dragMouseoverThrottle);
       }
     }
   };
 
+  Handlers.prototype.onTouchmove = function onTouchmove(touchEvent) {
+
+    this.onMousemove(_utils.Utils.ConvertTouchToMouseEvent(touchEvent));
+  };
+
   Handlers.prototype.onMousemove = function onMousemove(mouseEvent) {
     var $ = this.setup.jQuery;
     var context = this.setup.Context;
@@ -294,6 +313,11 @@ var Handlers = (function () {
     }
   };
 
+  Handlers.prototype.onTouchend = function onTouchend(touchEvent) {
+    // don't convert to mouseEVent becuase there are no touches.
+    this.onMouseup(touchEvent);
+  };
+
   Handlers.prototype.onMouseup = function onMouseup(mouseEvent) {
     var $ = this.setup.jQuery;
     var context = this.setup.Context;
@@ -409,11 +433,14 @@ var Internal = (function () {
     this.HandleCellMouseEvent(context, '' + appendNamespace(_constants2['default'].EVENT_DRAGSTART), true, eventHandlers.onDragstart.bind(eventHandlers));
 
     this.HandleCellMouseEvent(context, '' + appendNamespace(_constants2['default'].EVENT_MOUSEDOWN), true, eventHandlers.onMousedown.bind(eventHandlers));
+
+    this.HandleCellMouseEvent(context, '' + appendNamespace(_constants2['default'].EVENT_TOUCHSTART), true, eventHandlers.onTouchStart.bind(eventHandlers));
+
     // pass false as param because we need to do non-contiguous stuff in there.
     this.HandleCellMouseEvent(context, '' + appendNamespace(_constants2['default'].EVENT_MOUSEOVER), false, eventHandlers.onMouseover.bind(eventHandlers));
 
     // it is not appropriate to confine the events to the visible cell wrapper.
-    $(options.mouseMoveSelector).on('' + appendNamespace(_constants2['default'].EVENT_MOUSEMOVE), _utils.Utils.Debounce(eventHandlers.onMousemove.bind(eventHandlers), options.mousemoveDebounce)).on('' + appendNamespace(_constants2['default'].EVENT_MOUSEUP), eventHandlers.onMouseup.bind(eventHandlers));
+    $(options.mouseMoveSelector).on('' + appendNamespace(_constants2['default'].EVENT_MOUSEMOVE), _utils.Utils.Debounce(eventHandlers.onMousemove.bind(eventHandlers), options.mousemoveDebounce)).on('' + appendNamespace(_constants2['default'].EVENT_TOUCHMOVE), _utils.Utils.Debounce(eventHandlers.onTouchmove.bind(eventHandlers), options.mousemoveDebounce)).on('' + appendNamespace(_constants2['default'].EVENT_MOUSEUP), eventHandlers.onMouseup.bind(eventHandlers)).on('' + appendNamespace(_constants2['default'].EVENT_TOUCHEND), eventHandlers.onTouchend.bind(eventHandlers));
 
     if (options.updateCoordinatesOnWindowResize) {
       $(window).on('' + appendNamespace(_constants2['default'].EVENT_RESIZE), _utils.Utils.Debounce(context.updateVisibleCellCoordinates, options.windowResizeDebounce));
@@ -500,24 +527,23 @@ var Internal = (function () {
     });
   };
 
-  Internal.prototype.$GetNonDraggedCellFromPoint = function $GetNonDraggedCellFromPoint($draggedCell, mouseEvent) {
+  Internal.prototype.GetNonDraggedElementFromPoint = function GetNonDraggedElementFromPoint($draggedCell, mouseEvent) {
     var document = this.setup.Document;
     var $ = this.setup.jQuery;
 
     //remove mouse events from dragged cell, because we need to test for overlap of underneath things.
     var oldPointerEvents = $draggedCell.css('pointer-events');
+    var oldTouchAction = $draggedCell.css('touch-action');
     $draggedCell.css('pointer-events', 'none');
+    $draggedCell.css('touch-action', 'none');
 
     var element = document.elementFromPoint(mouseEvent.clientX, mouseEvent.clientY);
-    var cellAndIndex = this.GetCellAndInternalIndex(element);
 
     // restore pointer-events css.
     $draggedCell.css('pointer-events', oldPointerEvents);
+    $draggedCell.css('touch-action', oldTouchAction);
 
-    if (!cellAndIndex) {
-      return $();
-    }
-    return cellAndIndex.$cell;
+    return element;
   };
 
   Internal.prototype.MoveDraggedCell = function MoveDraggedCell(mouseEvent, $cell) {
@@ -553,7 +579,8 @@ var Internal = (function () {
       }));
     };
 
-    var $overlappedCell = this.$GetNonDraggedCellFromPoint($cell, mouseEvent);
+    var overlappedElement = this.GetNonDraggedElementFromPoint($cell, mouseEvent);
+    var $overlappedCell = context.$getCellOfElement(overlappedElement);
 
     if ($overlappedCell.length) {
       // have to create event here like this other mouse coords are missing.
@@ -568,7 +595,7 @@ var Internal = (function () {
           var additionalContext = $(this).data(_constants2['default'].DATA_GRIDSTRAP);
           if (additionalContext) {
             // $getCellOfElement is a 'public' method.
-            var $additionalContextCell = additionalContext.$getCellOfElement(element);
+            var $additionalContextCell = additionalContext.$getCellOfElement(overlappedElement);
             if ($additionalContextCell.length) {
               // have to create event here like this other mouse coords are missing.
               triggerMouseOverEvent($additionalContextCell);
@@ -1427,46 +1454,42 @@ var Utils = (function () {
     return cssClass.replace(/(^ *| +)/g, '.');
   };
 
-  Utils.Debounce = function Debounce(callback, milliseconds, leading) {
-    var timeout = undefined;
+  Utils.Debounce = function Debounce(callback, milliseconds, leading, timeout) {
+    if (typeof timeout === 'undefined') {
+      timeout = null;
+    }
     return function () {
       var context = this;
       var args = arguments;
-      var callNow = leading || !milliseconds;
       var later = function later() {
         timeout = null;
-        if (!callNow) {
+        if (!leading) {
           callback.apply(context, args);
         }
       };
+      var callNow = leading && !timeout;
+
+      if (milliseconds == 500) console.log('callNow: ' + callNow);
+
       clearTimeout(timeout);
       timeout = setTimeout(later, milliseconds);
       if (callNow) {
         callback.apply(context, args);
       }
+
+      return timeout;
     };
   };
 
-  Utils.IsElementThrottled = function IsElementThrottled($, element, milliseconds) {
-
-    Utils.recentDragMouseOvers = Utils.recentDragMouseOvers || [];
-
+  Utils.Limit = function Limit(callback, milliseconds) {
     var d = new Date();
     var n = d.getTime();
-    for (var i = 0; i < Utils.recentDragMouseOvers.length; i++) {
-      if (Utils.recentDragMouseOvers[i].n + milliseconds < n) {
-        // expired.
-        Utils.recentDragMouseOvers.splice(i, 1);
-      }
-      if (i < Utils.recentDragMouseOvers.length && $(Utils.recentDragMouseOvers[i].e).is(element)) {
-        return true;
-      }
+    if (n - (Utils.limit || 0) > milliseconds) {
+
+      callback();
+
+      Utils.limit = n;
     }
-    Utils.recentDragMouseOvers.push({
-      n: n,
-      e: element
-    });
-    return false;
   };
 
   Utils.SwapJQueryElements = function SwapJQueryElements($a, $b) {
@@ -1565,6 +1588,22 @@ var Utils = (function () {
     };
   };
 
+  Utils.ConvertTouchToMouseEvent = function ConvertTouchToMouseEvent(touchEvent) {
+    var touch = null;
+    for (var i = 0; !touch && i < touchEvent.changedTouches.length; i++) {
+      if (touchEvent.changedTouches[i].identifier === 0) {
+        touch = touchEvent.changedTouches[i];
+      }
+    }
+
+    touchEvent.pageX = touch.pageX;
+    touchEvent.pageY = touch.pageY;
+    touchEvent.clientX = touch.clientX;
+    touchEvent.clientY = touch.clientY;
+
+    return touchEvent;
+  };
+
   return Utils;
 })();
 

dist/jquery.gridstrap.min.css

@@ -6,4 +6,4 @@
  *  Made by Ross P
  *  Under MIT License
  */
-.gridstrap-cell-visible{position:absolute!important;transition:width .2s,height .2s,left .2s,top .2s}.gridstrap-cell-hidden{opacity:0;pointer-events:none}.gridstrap-cell-drag{transition:width 50ms,height 50ms,left 50ms,top 50ms;z-index:10000}.gridstrap-cell-resize{transition:width 50ms,height 50ms,left 50ms,top 50ms;z-index:10000}.gridstack-noncontiguous{opacity:.02}
+.gridstrap-cell-visible{position:absolute!important;transition:width .2s,height .2s,left .2s,top .2s}.gridstrap-cell-hidden{opacity:0;pointer-events:none;touch-action:none}.gridstrap-cell-drag{transition:width 50ms,height 50ms,left 50ms,top 50ms;z-index:10000}.gridstrap-cell-resize{transition:width 50ms,height 50ms,left 50ms,top 50ms;z-index:10000}.gridstack-noncontiguous{opacity:0}

dist/jquery.gridstrap.min.js

@@ -320,7 +320,6 @@ <h1 id="header-1"><a href="#header-1"></a>Demo</h1>
   src="//code.jquery.com/jquery-3.2.1.js"
   integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
   crossorigin="anonymous"></script>
-  <script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
 
         <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
 <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/prism/1.6.0/themes/prism.css" />

dist/jquery.gridstrap.min.js.map

@@ -320,7 +320,6 @@ <h1 id="header-1"><a href="#header-1"></a>Demo</h1>
   src="http://code.jquery.com/jquery-3.2.1.js"
   integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
   crossorigin="anonymous"></script>
-  <script src="http://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
 
         <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
 <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/prism/1.6.0/themes/prism.css" />

docs/index.html

@@ -2,22 +2,24 @@ var popGrid = function ($grid, html, quantity) {
   var computed = html;
   for (var i = 0; i < quantity; i++) {
     if (typeof (html) == 'function') {
-      computed = html();
+      computed = html(i);
     }
     $($grid).append(computed);
   }
 };
 
 $(function () {
-  popGrid('#basic-grid', '<div class="col-xs-4 col-sm-2 col-md-1 cell"><div class="inner"></div></div>', 36);
+  popGrid('#basic-grid', function (i) {
+    return '<div class="col-xs-4 col-sm-2 col-md-1 cell"><div class="inner"></div></div>';
+  }, 36);
 
   popGrid('#nested-grid', '<div class="col-xs-4 col-sm-2 cell"><div class="inner"><div class="nested-inner-grid"></div></div></div>', 1);
   popGrid('#nested-grid', '<div class="col-xs-4 col-sm-2 cell"><div class="inner"></div></div>', 10);
   popGrid('.nested-inner-grid', '<div class="col-xs-4 col-sm-2 cell nested"><div class="inner nested"></div></div>', 9);
 
   popGrid('#resize-grid', '<div class="col-xs-2 cell"><div class="inner"><div class="resize"></div></div></div>', 24);
 
-  popGrid('#noncontiguous-grid', '<div class="col-xs-1 cell"><div class="inner"></div></div>', 12);
+  popGrid('#noncontiguous-grid', '<div class="col-xs-4 col-sm-2 col-md-1 cell"><div class="inner"></div></div>', 12);
 
   popGrid('#dual1-grid', '<div class="col-xs-1 cell"><div class="inner"></div></div>', 24);
   popGrid('#dual2-grid', '<div class="col-xs-2 cell"><div class="inner"></div></div>', 12);
@@ -31,7 +33,8 @@ $(function () {
   }, 36);
 
   $('#basic-grid').gridstrap({
-
+dragMouseoverThrottle: 150,
+//swapMode: true
   });
 
   $('a[href="#responsive-demo"]').on('shown.bs.tab', function () {

docs/indexLocal.html

@@ -13,6 +13,7 @@
 .gridstrap-cell-hidden{ 
   opacity: 0; 
   pointer-events: none;
+  touch-action: none;
 }
 .gridstrap-cell-drag{ 
   transition:width 0.05s, height 0.05s,  left 0.05s, top 0.05s ;