From 2b56ce5e64dc1c9f67d588c30045f61de0430447 Mon Sep 17 00:00:00 2001 From: ross Date: Fri, 9 Jun 2017 23:33:35 +0930 Subject: [PATCH] feat: various bugs, enabled touch #8, #2 --- dist/jquery.gridstrap.css | 1 + dist/jquery.gridstrap.js | 113 +++++++++++++++++-------- dist/jquery.gridstrap.min.css | 2 +- dist/jquery.gridstrap.min.js | 2 +- dist/jquery.gridstrap.min.js.map | 2 +- docs/index.html | 1 - docs/indexLocal.html | 1 - docs/indexscript.js | 11 ++- docs/jquery.gridstrap.css | 1 + docs/jquery.gridstrap.js | 113 +++++++++++++++++-------- package.json | 4 +- src/constants.js | 3 + src/gridstrap.js | 2 +- src/handlers.js | 34 ++++++-- src/internal.js | 40 ++++++--- src/style.css | 1 + src/utils.js | 59 ++++++++----- test/compiled/jquery.gridstrap.spec.js | 57 ++++++++----- 18 files changed, 299 insertions(+), 148 deletions(-) diff --git a/dist/jquery.gridstrap.css b/dist/jquery.gridstrap.css index 9f967dc..e2bb77e 100644 --- a/dist/jquery.gridstrap.css +++ b/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 ; diff --git a/dist/jquery.gridstrap.js b/dist/jquery.gridstrap.js index ccb1dbe..4b0a84c 100644 --- a/dist/jquery.gridstrap.js +++ b/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; })(); diff --git a/dist/jquery.gridstrap.min.css b/dist/jquery.gridstrap.min.css index 8a0aa12..33bd892 100644 --- a/dist/jquery.gridstrap.min.css +++ b/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} \ No newline at end of file +.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} \ No newline at end of file diff --git a/dist/jquery.gridstrap.min.js b/dist/jquery.gridstrap.min.js index 67bec3a..38426b2 100644 --- a/dist/jquery.gridstrap.min.js +++ b/dist/jquery.gridstrap.min.js @@ -7,5 +7,5 @@ * Under MIT License */ -!function a(b,c,d){function e(g,h){if(!c[g]){if(!b[g]){var i="function"==typeof require&&require;if(!h&&i)return i(g,!0);if(f)return f(g,!0);var j=new Error("Cannot find module '"+g+"'");throw j.code="MODULE_NOT_FOUND",j}var k=c[g]={exports:{}};b[g][0].call(k.exports,function(a){var c=b[g][1][a];return e(c||a)},k,k.exports,a,b,c,d)}return c[g].exports}for(var f="function"==typeof require&&require,g=0;g=p.length)break;s=p[r++]}else{if(r=p.next(),r.done)break;s=r.value}var t=s,u=o[t];u instanceof Function&&u!==j.Methods&&(k[t]=u.bind(o))}m.InitOriginalCells(),m.InitEventHandlers(n),k.options.debug&&console.log("Gridstrap initialised for element: "+k.el.nodeName)},a.Gridstrap.defaultOptions={gridCellSelector:">*",hiddenCellClass:"gridstrap-cell-hidden",visibleCellClass:"gridstrap-cell-visible",nonContiguousPlaceholderCellClass:"gridstack-noncontiguous",dragCellClass:"gridstrap-cell-drag",resizeCellClass:"gridstrap-cell-resize",mouseMoveSelector:"body",visibleCellContainerParentSelector:null,visibleCellContainerClass:"gridstrap-container",getHtmlOfSourceCell:function(a){return a[0].outerHTML},dragCellHandleSelector:"*",draggable:!0,rearrangeOnDrag:!0,resizeHandleSelector:null,resizeOnDrag:!0,swapMode:!1,nonContiguousCellHtml:null,autoPadNonContiguousCells:!0,updateCoordinatesOnWindowResize:!0,debug:!1,dragMouseoverThrottle:500,windowResizeDebounce:50,mousemoveDebounce:0},a.fn.gridstrap=function(b){return this.each(function(){new a.Gridstrap(this,b)})}}(jQuery,window,document)},{"./constants":1,"./handlers":3,"./internal":4,"./methods":5,"./setup":6,"./utils":7}],3:[function(a,b,c){"use strict";function d(a){return a&&a.__esModule?a:{default:a}}function e(a,b){if(!(a instanceof b))throw new TypeError("Cannot call a class as a function")}c.__esModule=!0;var f=a("./constants"),g=d(f),h=a("./utils"),i=function(){function a(b,c){e(this,a),this.setup=b,this.internal=c}return a.prototype.onDragstart=function(a,b,c){c===this.setup.Context&&a.preventDefault()},a.prototype.onMousedown=function(a,b,c){var d=this.setup.jQuery,e=this.setup.Context,f=this.setup.Options;if(c===e&&!b.hasClass(f.nonContiguousPlaceholderCellClass))return f.resizeHandleSelector&&d(a.target).closest(f.resizeHandleSelector).length?void(b.hasClass(f.resizeCellClass)||(b.addClass(f.resizeCellClass),this.internal.SetMouseDownData(a,b))):void(f.draggable&&!b.hasClass(f.dragCellClass)&&(this.internal.SetMouseDownData(a,b),b.addClass(f.dragCellClass),this.internal.MoveDraggedCell(a,b)))},a.prototype.onMouseover=function(a,b,c){var d=this.setup.jQuery,e=(this.setup.Context,this.setup.Options);if(this.internal.LastMouseOverCellTarget=null,c.options.draggable){var f=this.internal.$GetDraggingCell();f.length&&b.length&&!f.closest(b).length&&(this.internal.LastMouseOverCellTarget=b,h.Utils.IsElementThrottled(d,b,e.dragMouseoverThrottle)||c.options.rearrangeOnDrag&&(this.internal.MoveCell(f,b,c),this.internal.MoveDraggedCell(a,f)))}},a.prototype.onMousemove=function(a){var b=this.setup.jQuery,c=(this.setup.Context,this.setup.Options),d=b(this.setup.ResizeCellSelector);if(d.length){var e=d.data(g.default.DATA_MOUSEDOWN_POSITION_DIFF),f=d.data(g.default.DATA_MOUSEDOWN_SIZE),i=d.data(g.default.DATA_CELL_POSITION_AND_SIZE),j=h.Utils.GetAbsoluteOffsetForElementFromMouseEvent(d,a,e),k=f.width+j.left-i.left,l=f.height+j.top-i.top;d.css("width",k),d.css("height",l),c.resizeOnDrag&&this.internal.ResizeCell(d,k,l)}else{var m=this.internal.$GetDraggingCell();m.length&&(this.internal.MoveDraggedCell(a,m),c.nonContiguousCellHtml&&c.rearrangeOnDrag&&c.autoPadNonContiguousCells&&this.internal.UpdateNonContiguousCellsForDrag(m,a))}},a.prototype.onMouseup=function(a){var b=this.setup.jQuery,c=this.setup.Context,d=this.setup.Options;this.setup.$Element,this.setup.Document;if(d.draggable){var e=b(this.setup.ResizeCellSelector);if(d.resizeHandleSelector&&e.length){if(!d.resizeOnDrag){var f=(e.data(g.default.DATA_MOUSEDOWN_POSITION_DIFF),originalMouseDownCellPosition.w+a.pageX-originalMouseDownPagePosition.x),i=originalMouseDownCellPosition.h+a.pageY-originalMouseDownPagePosition.y;this.internal.ResizeCell(e,f,i)}return e.removeClass(d.resizeCellClass),void h.Utils.ClearMouseDownData(e)}var j=this.internal.$GetDraggingCell();if(j.length>0){if(d.nonContiguousCellHtml&&!d.rearrangeOnDrag&&d.autoPadNonContiguousCells){this.internal.UpdateNonContiguousCellsForDrag(j,a);var k=this.internal.$GetNonDraggedCellFromPoint(j,a);k.length?this.internal.LastMouseOverCellTarget=k:this.internal.LastMouseOverCellTarget=null}j.removeClass(d.dragCellClass),h.Utils.ClearMouseDownData(e);var l=j.data(g.default.DATA_CELL_POSITION_AND_SIZE);c.setCellAbsolutePositionAndSize(j,l),this.internal.LastMouseOverCellTarget&&!d.rearrangeOnDrag&&this.internal.MoveCell(j,this.internal.LastMouseOverCellTarget,c)}}},a}();c.Handlers=i},{"./constants":1,"./utils":7}],4:[function(a,b,c){"use strict";function d(a){return a&&a.__esModule?a:{default:a}}function e(a,b){if(!(a instanceof b))throw new TypeError("Cannot call a class as a function")}c.__esModule=!0;var f=function(){function a(a,b){for(var c=0;c0){this.$GetClosestGridstrap(d).is(c.$el)&&(e={index:f,$cell:this.CellsArray[f]})}}return e},a.prototype.$GetClosestGridstrap=function(a){var b=this.setup.jQuery,c=function(a){return b(a).filter(function(){return!!b(this).data(h.default.DATA_GRIDSTRAP)})},d=c(a);return d.length?d.first():c(b(a).parents()).first()},a.prototype.$GetDraggingCell=function(){var a=this.setup.jQuery,b=this.setup.Context,c=(this.setup.Options,a(this.setup.DragCellSelector));return c.length&&this.$GetClosestGridstrap(c).is(b.$el)?c:a()},a.prototype.MoveCell=function(a,b,c){var d=this.setup.jQuery,e=this.setup.Context,f=this.setup.Options,g=a.data(h.default.DATA_HIDDEN_CELL),j=b.data(h.default.DATA_HIDDEN_CELL);if(!g.is(j))if(c!==e){if(this.AdditionalGridstrapDragTargetSelector){var k=d(this.AdditionalGridstrapDragTargetSelector).filter(function(){return d(this).data(h.default.DATA_GRIDSTRAP)===c}).first();if(k.length){if(f.swapMode){var l=i.Utils.GetPositionAndSizeOfCell(b),m=i.Utils.GetPositionAndSizeOfCell(a),n=c.detachCell(b),o=e.detachCell(a),p=o.hasClass(f.dragCellClass);p&&o.removeClass(f.dragCellClass),i.Utils.SwapJQueryElements(o,n);var q=c.attachCell(o),r=e.attachCell(n);i.Utils.ClearAbsoluteCSS(q),i.Utils.ClearAbsoluteCSS(r),c.setCellAbsolutePositionAndSize(q,m),e.setCellAbsolutePositionAndSize(r,l),c.setCellAbsolutePositionAndSize(q,l),e.setCellAbsolutePositionAndSize(r,m),p&&q.addClass(f.dragCellClass)}else{var m=i.Utils.GetPositionAndSizeOfCell(a),o=e.detachCell(a),p=o.hasClass(f.dragCellClass);p&&o.removeClass(f.dragCellClass),i.Utils.DetachAndInsertInPlaceJQueryElement(o,j);var q=c.attachCell(o);q.removeClass(f.visibleCellClass),c.setCellAbsolutePositionAndSize(q,m),q.addClass(f.visibleCellClass),p&&q.addClass(f.dragCellClass)}c.updateVisibleCellCoordinates(),e.updateVisibleCellCoordinates()}}}else f.swapMode?i.Utils.SwapJQueryElements(g,j):i.Utils.DetachAndInsertInPlaceJQueryElement(g,j),e.updateVisibleCellCoordinates()},a.prototype.ResizeCell=function(a,b,c){var d=this.setup.jQuery,e=this.setup.Context,f=this.setup.$Element,g=d.Event(h.default.EVENT_CELL_RESIZE,{width:b,height:c,target:a[0]});if(f.trigger(g),!g.isDefaultPrevented()){var i=a.data(h.default.DATA_HIDDEN_CELL);i.css("width",b),i.css("height",c),e.updateVisibleCellCoordinates()}},a.prototype.$GetHiddenCellsInElementOrder=function(){var a=this.setup.jQuery,b=(this.setup.Options,this.setup.$Element),c=this;return b.find(this.setup.HiddenCellSelector).filter(function(){var b=a(this).data(h.default.DATA_VISIBLE_CELL);if(!b||!b.length)return!1;for(var d=0;df(e)&&(e=g)}}),this.AppendOrRemoveNonContiguousCellsWhile(function(a,b){var c=i.Utils.GetPositionAndSizeOfCell(a.last());return b?c.top-e.top<2*e.height:c.top-e.top>2*e.height})&&this.MoveDraggedCell(b,a)},a.prototype.AppendOrRemoveNonContiguousCellsWhile=function(a){for(var b=this.setup.jQuery,c=this.setup.Options,d=this.setup.Context,e=!1,f=this.$GetHiddenCellsInElementOrder();a(f,!0);){var g=d.insertCell(c.nonContiguousCellHtml,f.length);g.addClass(c.nonContiguousPlaceholderCellClass);var j=g.data(h.default.DATA_HIDDEN_CELL);f=f.add(j),e=!0}for(var k=f.last(),l=null,m=function(){return l=l||f.filter(function(a,c){return i.Utils.GetPositionAndSizeOfCell(b(c)).top===i.Utils.GetPositionAndSizeOfCell(k).top})};a(f,!1)&&m().filter(function(a,d){return b(d).data(h.default.DATA_VISIBLE_CELL).hasClass(c.nonContiguousPlaceholderCellClass)}).length===m().length&&m().length>0;)d.removeCell(k.data(h.default.DATA_VISIBLE_CELL)),f=f.not(k),k=f.last(),l=null,e=!0;return e},f(a,[{key:"AdditionalGridstrapDragTargetSelector",get:function(){return this.additionalGridstrapDragTargetSelector},set:function(a){this.additionalGridstrapDragTargetSelector=a}},{key:"LastMouseOverCellTarget",get:function(){return this.lastMouseOverCellTarget},set:function(a){this.lastMouseOverCellTarget=a}},{key:"CellsArray",get:function(){return this.cellsArray}}]),a}();c.Internal=j},{"./constants":1,"./utils":7}],5:[function(a,b,c){"use strict";function d(a){return a&&a.__esModule?a:{default:a}}function e(a,b){if(!(a instanceof b))throw new TypeError("Cannot call a class as a function")}c.__esModule=!0;var f=a("./constants"),g=d(f),h=a("./utils"),i=function(){function a(b,c,d){e(this,a),this.setup=b,this.internal=c,this.handlers=d}return a.prototype.$getCellOfElement=function(a){var b=this.setup.jQuery,c=(this.setup.Context,this.setup.Options,this.internal.GetCellAndInternalIndex(a));return c?c.$cell:b()},a.prototype.setCellAbsolutePositionAndSize=function(a,b){var c=this.setup.jQuery,d=(this.setup.Context,this.setup.Options,this.setup.$Element),e=c.Event(g.default.EVENT_CELL_REDRAW,{left:b.left,top:b.top,width:b.width,height:b.height,target:a[0]});d.trigger(e),e.isDefaultPrevented()||(a.data(g.default.DATA_CELL_POSITION_AND_SIZE,b),a.css("left",b.left),a.css("top",b.top),a.css("width",b.width),a.css("height",b.height))},a.prototype.updateVisibleCellCoordinates=function(){for(var a=this.setup.jQuery,b=(this.setup.Context,this.setup.Options,0);bf.length&&d.nonContiguousCellHtml&&d.autoPadNonContiguousCells&&(this.internal.AppendOrRemoveNonContiguousCellsWhile(function(a,c){return!!c&&a.lengthf.length&&d.nonContiguousCellHtml&&d.autoPadNonContiguousCells&&(this.internal.AppendOrRemoveNonContiguousCellsWhile(function(a,c){return!!c&&a.length<=b}),f=this.$getCells());var g=this.internal.GetCellAndInternalIndex(a);this.internal.MoveCell(g.$cell,f.eq(b),c||e)},a.prototype.$getCellFromCoordinates=function(a,b){var c=this.setup.Document,d=this.setup.jQuery,e=c.elementFromPoint(a,b),f=this.internal.GetCellAndInternalIndex(e);return f?f.$cell:d()},a.prototype.getCellIndexFromCoordinates=function(a,b){var c=this.setup.Document,d=(this.setup.jQuery,c.elementFromPoint(a,b)),e=this.internal.GetCellAndInternalIndex(d);return e?this.$getCells().index(e.$cell):-1},a.prototype.$getCells=function(){var a=this.setup.jQuery,b=this.internal.$GetHiddenCellsInElementOrder(),c=b.map(function(){return a(this).data(g.default.DATA_VISIBLE_CELL)[0]});return a(c)},a.prototype.$getHiddenCells=function(){return this.internal.$GetHiddenCellsInElementOrder()},a.prototype.$getCellContainer=function(){return(0,this.setup.jQuery)(this.setup.VisibleCellContainerSelector)},a.prototype.updateOptions=function(a){var b=this.setup.jQuery,c=this.setup.Options;this.setup.Options=b.extend({},c,a)},a.prototype.getCellIndexOfElement=function(a){var b=this.$getCellOfElement(a);return this.$getCells().index(b)},a.prototype.setAdditionalGridstrapDragTarget=function(a){var b=this.setup.jQuery,c=this.handlers,d=this,e=g.default.EVENT_MOUSEOVER+".gridstrap-additional-"+this.setup.IdPrefix;d.internal.AdditionalGridstrapDragTargetSelector&&b(d.internal.AdditionalGridstrapDragTargetSelector).each(function(){b(b(this).data(g.default.DATA_GRIDSTRAP).options.visibleCellContainerParentSelector).off(e)}),d.internal.AdditionalGridstrapDragTargetSelector=a,d.internal.AdditionalGridstrapDragTargetSelector&&b(d.internal.AdditionalGridstrapDragTargetSelector).each(function(){d.internal.HandleCellMouseEvent(b(this).data(g.default.DATA_GRIDSTRAP),e,!1,c.onMouseover.bind(c))})},a.prototype.modifyCell=function(a,b){var c=this.setup.Context,d=this.$getCells().eq(a),e=d.data(g.default.DATA_HIDDEN_CELL),f=!1,h=!1;b.call(c,function(){return f=!0,d},function(){return h=!0,e}),f&&e.html(d.html()),this.updateVisibleCellCoordinates()},a.prototype.padWithNonContiguousCells=function(a){var b=this.setup.jQuery,c=this.setup.Options;if(!c.nonContiguousCellHtml)throw new Error(g.default.ERROR_NONCONTIGUOUS_HTML_UNDEFINED);this.internal.$GetHiddenCellsInElementOrder();this.internal.AppendOrRemoveNonContiguousCellsWhile(function(d,e){if(!e)return!1;var f=d.length,h=d.filter(function(a,d){return b(d).data(g.default.DATA_VISIBLE_CELL).hasClass(c.nonContiguousPlaceholderCellClass)}).length;return a(f,h)})},a}();c.Methods=i},{"./constants":1,"./utils":7}],6:[function(a,b,c){"use strict";function d(a,b){if(!(a instanceof b))throw new TypeError("Cannot call a class as a function")}c.__esModule=!0;var e=function(){function a(a,b){for(var c=0;c'),this.window=c,this.document=e,this.$=b,this.$el=g,this.context=h}return e(a,[{key:"Window",get:function(){return this.window}},{key:"Document",get:function(){return this.document}},{key:"jQuery",get:function(){return this.$}},{key:"Options",get:function(){return this.context.options},set:function(a){this.context.options=a}},{key:"$Element",get:function(){return this.$el}},{key:"Context",get:function(){return this.context}},{key:"$OriginalCells",get:function(){return this.$originalCells}},{key:"IdPrefix",get:function(){return this.idPrefix}},{key:"VisibleCellContainerSelector",get:function(){return this.visibleCellContainerSelector}},{key:"DragCellSelector",get:function(){return this.dragCellSelector}},{key:"ResizeCellSelector",get:function(){return this.resizeCellSelector}},{key:"VisibleCellContainerClassSelector",get:function(){return this.visibleCellContainerClassSelector}},{key:"HiddenCellSelector",get:function(){return this.hiddenCellSelector}}]),a}();c.Setup=g},{"./utils":7}],7:[function(a,b,c){"use strict";function d(a){return a&&a.__esModule?a:{default:a}}function e(a,b){if(!(a instanceof b))throw new TypeError("Cannot call a class as a function")}c.__esModule=!0;var f=a("./constants"),g=d(f),h=function(){function a(){e(this,a)}return a.GenerateRandomId=function(){return Math.random().toString(36).substr(2,5)+Math.round(1e3*Math.random()).toString()},a.ConvertCssClassToJQuerySelector=function(a){return a.replace(/(^ *| +)/g,".")},a.Debounce=function(a,b,c){var d=void 0;return function(){var e=this,f=arguments,g=c||!b,h=function(){d=null,g||a.apply(e,f)};clearTimeout(d),d=setTimeout(h,b),g&&a.apply(e,f)}},a.IsElementThrottled=function(b,c,d){a.recentDragMouseOvers=a.recentDragMouseOvers||[];for(var e=new Date,f=e.getTime(),g=0;g0&&!e.is(d)?function(a){e.before(a)}:f.length>0&&!f.is(d)?function(a){f.after(a)}:e.length>0&&e.is(d)?function(a){g.prepend(a)}:function(a){g.append(a)}},d=c(a),e=c(b),f=a.detach(),g=b.detach();e(f),d(g)},a.DetachAndInsertInPlaceJQueryElement=function(a,b){var c=b.index(),d=a.index(),e=a.detach();c=p.length)break;s=p[r++]}else{if(r=p.next(),r.done)break;s=r.value}var t=s,u=o[t];u instanceof Function&&u!==j.Methods&&(k[t]=u.bind(o))}m.InitOriginalCells(),m.InitEventHandlers(n),k.options.debug&&console.log("Gridstrap initialised for element: "+k.el.nodeName)},a.Gridstrap.defaultOptions={gridCellSelector:">*",hiddenCellClass:"gridstrap-cell-hidden",visibleCellClass:"gridstrap-cell-visible",nonContiguousPlaceholderCellClass:"gridstack-noncontiguous",dragCellClass:"gridstrap-cell-drag",resizeCellClass:"gridstrap-cell-resize",mouseMoveSelector:"body",visibleCellContainerParentSelector:null,visibleCellContainerClass:"gridstrap-container",getHtmlOfSourceCell:function(a){return a[0].outerHTML},dragCellHandleSelector:"*",draggable:!0,rearrangeOnDrag:!0,resizeHandleSelector:null,resizeOnDrag:!0,swapMode:!1,nonContiguousCellHtml:null,autoPadNonContiguousCells:!0,updateCoordinatesOnWindowResize:!0,debug:!1,dragMouseoverThrottle:150,windowResizeDebounce:50,mousemoveDebounce:0},a.fn.gridstrap=function(b){return this.each(function(){new a.Gridstrap(this,b)})}}(jQuery,window,document)},{"./constants":1,"./handlers":3,"./internal":4,"./methods":5,"./setup":6,"./utils":7}],3:[function(a,b,c){"use strict";function d(a){return a&&a.__esModule?a:{default:a}}function e(a,b){if(!(a instanceof b))throw new TypeError("Cannot call a class as a function")}c.__esModule=!0;var f=a("./constants"),g=d(f),h=a("./utils"),i=function(){function a(b,c){e(this,a),this.setup=b,this.internal=c}return a.prototype.onDragstart=function(a,b,c){c===this.setup.Context&&a.preventDefault()},a.prototype.onTouchStart=function(a,b,c){this.setup.jQuery,this.setup.Options;a.preventDefault(),a.touches.length&&this.onMousedown(h.Utils.ConvertTouchToMouseEvent(a),b,c)},a.prototype.onMousedown=function(a,b,c){var d=this.setup.jQuery,e=this.setup.Context,f=this.setup.Options;if(c===e&&!b.hasClass(f.nonContiguousPlaceholderCellClass))return f.resizeHandleSelector&&d(a.target).closest(f.resizeHandleSelector).length?void(b.hasClass(f.resizeCellClass)||(b.addClass(f.resizeCellClass),this.internal.SetMouseDownData(a,b))):void(f.draggable&&!b.hasClass(f.dragCellClass)&&(this.internal.SetMouseDownData(a,b),b.addClass(f.dragCellClass),this.internal.MoveDraggedCell(a,b)))},a.prototype.onMouseover=function(a,b,c){var d=this,e=(this.setup.jQuery,this.setup.Context,this.setup.Options);if(this.internal.LastMouseOverCellTarget=null,c.options.draggable){var f=this.internal.$GetDraggingCell();f.length&&b.length&&!f.closest(b).length&&(this.internal.LastMouseOverCellTarget=b,h.Utils.Limit(function(){c.options.rearrangeOnDrag&&(d.internal.MoveCell(f,b,c),d.internal.MoveDraggedCell(a,f))},e.dragMouseoverThrottle))}},a.prototype.onTouchmove=function(a){this.onMousemove(h.Utils.ConvertTouchToMouseEvent(a))},a.prototype.onMousemove=function(a){var b=this.setup.jQuery,c=(this.setup.Context,this.setup.Options),d=b(this.setup.ResizeCellSelector);if(d.length){var e=d.data(g.default.DATA_MOUSEDOWN_POSITION_DIFF),f=d.data(g.default.DATA_MOUSEDOWN_SIZE),i=d.data(g.default.DATA_CELL_POSITION_AND_SIZE),j=h.Utils.GetAbsoluteOffsetForElementFromMouseEvent(d,a,e),k=f.width+j.left-i.left,l=f.height+j.top-i.top;d.css("width",k),d.css("height",l),c.resizeOnDrag&&this.internal.ResizeCell(d,k,l)}else{var m=this.internal.$GetDraggingCell();m.length&&(this.internal.MoveDraggedCell(a,m),c.nonContiguousCellHtml&&c.rearrangeOnDrag&&c.autoPadNonContiguousCells&&this.internal.UpdateNonContiguousCellsForDrag(m,a))}},a.prototype.onTouchend=function(a){this.onMouseup(a)},a.prototype.onMouseup=function(a){var b=this.setup.jQuery,c=this.setup.Context,d=this.setup.Options;this.setup.$Element,this.setup.Document;if(d.draggable){var e=b(this.setup.ResizeCellSelector);if(d.resizeHandleSelector&&e.length){if(!d.resizeOnDrag){var f=(e.data(g.default.DATA_MOUSEDOWN_POSITION_DIFF),originalMouseDownCellPosition.w+a.pageX-originalMouseDownPagePosition.x),i=originalMouseDownCellPosition.h+a.pageY-originalMouseDownPagePosition.y;this.internal.ResizeCell(e,f,i)}return e.removeClass(d.resizeCellClass),void h.Utils.ClearMouseDownData(e)}var j=this.internal.$GetDraggingCell();if(j.length>0){if(d.nonContiguousCellHtml&&!d.rearrangeOnDrag&&d.autoPadNonContiguousCells){this.internal.UpdateNonContiguousCellsForDrag(j,a);var k=this.internal.$GetNonDraggedCellFromPoint(j,a);k.length?this.internal.LastMouseOverCellTarget=k:this.internal.LastMouseOverCellTarget=null}j.removeClass(d.dragCellClass),h.Utils.ClearMouseDownData(e);var l=j.data(g.default.DATA_CELL_POSITION_AND_SIZE);c.setCellAbsolutePositionAndSize(j,l),this.internal.LastMouseOverCellTarget&&!d.rearrangeOnDrag&&this.internal.MoveCell(j,this.internal.LastMouseOverCellTarget,c)}}},a}();c.Handlers=i},{"./constants":1,"./utils":7}],4:[function(a,b,c){"use strict";function d(a){return a&&a.__esModule?a:{default:a}}function e(a,b){if(!(a instanceof b))throw new TypeError("Cannot call a class as a function")}c.__esModule=!0;var f=function(){function a(a,b){for(var c=0;c0){this.$GetClosestGridstrap(d).is(c.$el)&&(e={index:f,$cell:this.CellsArray[f]})}}return e},a.prototype.$GetClosestGridstrap=function(a){var b=this.setup.jQuery,c=function(a){return b(a).filter(function(){return!!b(this).data(h.default.DATA_GRIDSTRAP)})},d=c(a);return d.length?d.first():c(b(a).parents()).first()},a.prototype.$GetDraggingCell=function(){var a=this.setup.jQuery,b=this.setup.Context,c=(this.setup.Options,a(this.setup.DragCellSelector));return c.length&&this.$GetClosestGridstrap(c).is(b.$el)?c:a()},a.prototype.MoveCell=function(a,b,c){var d=this.setup.jQuery,e=this.setup.Context,f=this.setup.Options,g=a.data(h.default.DATA_HIDDEN_CELL),j=b.data(h.default.DATA_HIDDEN_CELL);if(!g.is(j))if(c!==e){if(this.AdditionalGridstrapDragTargetSelector){var k=d(this.AdditionalGridstrapDragTargetSelector).filter(function(){return d(this).data(h.default.DATA_GRIDSTRAP)===c}).first();if(k.length){if(f.swapMode){var l=i.Utils.GetPositionAndSizeOfCell(b),m=i.Utils.GetPositionAndSizeOfCell(a),n=c.detachCell(b),o=e.detachCell(a),p=o.hasClass(f.dragCellClass);p&&o.removeClass(f.dragCellClass),i.Utils.SwapJQueryElements(o,n);var q=c.attachCell(o),r=e.attachCell(n);i.Utils.ClearAbsoluteCSS(q),i.Utils.ClearAbsoluteCSS(r),c.setCellAbsolutePositionAndSize(q,m),e.setCellAbsolutePositionAndSize(r,l),c.setCellAbsolutePositionAndSize(q,l),e.setCellAbsolutePositionAndSize(r,m),p&&q.addClass(f.dragCellClass)}else{var m=i.Utils.GetPositionAndSizeOfCell(a),o=e.detachCell(a),p=o.hasClass(f.dragCellClass);p&&o.removeClass(f.dragCellClass),i.Utils.DetachAndInsertInPlaceJQueryElement(o,j);var q=c.attachCell(o);q.removeClass(f.visibleCellClass),c.setCellAbsolutePositionAndSize(q,m),q.addClass(f.visibleCellClass),p&&q.addClass(f.dragCellClass)}c.updateVisibleCellCoordinates(),e.updateVisibleCellCoordinates()}}}else f.swapMode?i.Utils.SwapJQueryElements(g,j):i.Utils.DetachAndInsertInPlaceJQueryElement(g,j),e.updateVisibleCellCoordinates()},a.prototype.ResizeCell=function(a,b,c){var d=this.setup.jQuery,e=this.setup.Context,f=this.setup.$Element,g=d.Event(h.default.EVENT_CELL_RESIZE,{width:b,height:c,target:a[0]});if(f.trigger(g),!g.isDefaultPrevented()){var i=a.data(h.default.DATA_HIDDEN_CELL);i.css("width",b),i.css("height",c),e.updateVisibleCellCoordinates()}},a.prototype.$GetHiddenCellsInElementOrder=function(){var a=this.setup.jQuery,b=(this.setup.Options,this.setup.$Element),c=this;return b.find(this.setup.HiddenCellSelector).filter(function(){var b=a(this).data(h.default.DATA_VISIBLE_CELL);if(!b||!b.length)return!1;for(var d=0;df(e)&&(e=g)}}),this.AppendOrRemoveNonContiguousCellsWhile(function(a,b){var c=i.Utils.GetPositionAndSizeOfCell(a.last());return b?c.top-e.top<2*e.height:c.top-e.top>2*e.height})&&this.MoveDraggedCell(b,a)},a.prototype.AppendOrRemoveNonContiguousCellsWhile=function(a){for(var b=this.setup.jQuery,c=this.setup.Options,d=this.setup.Context,e=!1,f=this.$GetHiddenCellsInElementOrder();a(f,!0);){var g=d.insertCell(c.nonContiguousCellHtml,f.length);g.addClass(c.nonContiguousPlaceholderCellClass);var j=g.data(h.default.DATA_HIDDEN_CELL);f=f.add(j),e=!0}for(var k=f.last(),l=null,m=function(){return l=l||f.filter(function(a,c){return i.Utils.GetPositionAndSizeOfCell(b(c)).top===i.Utils.GetPositionAndSizeOfCell(k).top})};a(f,!1)&&m().filter(function(a,d){return b(d).data(h.default.DATA_VISIBLE_CELL).hasClass(c.nonContiguousPlaceholderCellClass)}).length===m().length&&m().length>0;)d.removeCell(k.data(h.default.DATA_VISIBLE_CELL)),f=f.not(k),k=f.last(),l=null,e=!0;return e},f(a,[{key:"AdditionalGridstrapDragTargetSelector",get:function(){return this.additionalGridstrapDragTargetSelector},set:function(a){this.additionalGridstrapDragTargetSelector=a}},{key:"LastMouseOverCellTarget",get:function(){return this.lastMouseOverCellTarget},set:function(a){this.lastMouseOverCellTarget=a}},{key:"CellsArray",get:function(){return this.cellsArray}}]),a}();c.Internal=j},{"./constants":1,"./utils":7}],5:[function(a,b,c){"use strict";function d(a){return a&&a.__esModule?a:{default:a}}function e(a,b){if(!(a instanceof b))throw new TypeError("Cannot call a class as a function")}c.__esModule=!0;var f=a("./constants"),g=d(f),h=a("./utils"),i=function(){function a(b,c,d){e(this,a),this.setup=b,this.internal=c,this.handlers=d}return a.prototype.$getCellOfElement=function(a){var b=this.setup.jQuery,c=(this.setup.Context,this.setup.Options,this.internal.GetCellAndInternalIndex(a));return c?c.$cell:b()},a.prototype.setCellAbsolutePositionAndSize=function(a,b){var c=this.setup.jQuery,d=(this.setup.Context,this.setup.Options,this.setup.$Element),e=c.Event(g.default.EVENT_CELL_REDRAW,{left:b.left,top:b.top,width:b.width,height:b.height,target:a[0]});d.trigger(e),e.isDefaultPrevented()||(a.data(g.default.DATA_CELL_POSITION_AND_SIZE,b),a.css("left",b.left),a.css("top",b.top),a.css("width",b.width),a.css("height",b.height))},a.prototype.updateVisibleCellCoordinates=function(){for(var a=this.setup.jQuery,b=(this.setup.Context,this.setup.Options,0);bf.length&&d.nonContiguousCellHtml&&d.autoPadNonContiguousCells&&(this.internal.AppendOrRemoveNonContiguousCellsWhile(function(a,c){return!!c&&a.lengthf.length&&d.nonContiguousCellHtml&&d.autoPadNonContiguousCells&&(this.internal.AppendOrRemoveNonContiguousCellsWhile(function(a,c){return!!c&&a.length<=b}),f=this.$getCells());var g=this.internal.GetCellAndInternalIndex(a);this.internal.MoveCell(g.$cell,f.eq(b),c||e)},a.prototype.$getCellFromCoordinates=function(a,b){var c=this.setup.Document,d=this.setup.jQuery,e=c.elementFromPoint(a,b),f=this.internal.GetCellAndInternalIndex(e);return f?f.$cell:d()},a.prototype.getCellIndexFromCoordinates=function(a,b){var c=this.setup.Document,d=(this.setup.jQuery,c.elementFromPoint(a,b)),e=this.internal.GetCellAndInternalIndex(d);return e?this.$getCells().index(e.$cell):-1},a.prototype.$getCells=function(){var a=this.setup.jQuery,b=this.internal.$GetHiddenCellsInElementOrder(),c=b.map(function(){return a(this).data(g.default.DATA_VISIBLE_CELL)[0]});return a(c)},a.prototype.$getHiddenCells=function(){return this.internal.$GetHiddenCellsInElementOrder()},a.prototype.$getCellContainer=function(){return(0,this.setup.jQuery)(this.setup.VisibleCellContainerSelector)},a.prototype.updateOptions=function(a){var b=this.setup.jQuery,c=this.setup.Options;this.setup.Options=b.extend({},c,a)},a.prototype.getCellIndexOfElement=function(a){var b=this.$getCellOfElement(a);return this.$getCells().index(b)},a.prototype.setAdditionalGridstrapDragTarget=function(a){var b=this.setup.jQuery,c=this.handlers,d=this,e=g.default.EVENT_MOUSEOVER+".gridstrap-additional-"+this.setup.IdPrefix;d.internal.AdditionalGridstrapDragTargetSelector&&b(d.internal.AdditionalGridstrapDragTargetSelector).each(function(){b(b(this).data(g.default.DATA_GRIDSTRAP).options.visibleCellContainerParentSelector).off(e)}),d.internal.AdditionalGridstrapDragTargetSelector=a,d.internal.AdditionalGridstrapDragTargetSelector&&b(d.internal.AdditionalGridstrapDragTargetSelector).each(function(){d.internal.HandleCellMouseEvent(b(this).data(g.default.DATA_GRIDSTRAP),e,!1,c.onMouseover.bind(c))})},a.prototype.modifyCell=function(a,b){var c=this.setup.Context,d=this.$getCells().eq(a),e=d.data(g.default.DATA_HIDDEN_CELL),f=!1,h=!1;b.call(c,function(){return f=!0,d},function(){return h=!0,e}),f&&e.html(d.html()),this.updateVisibleCellCoordinates()},a.prototype.padWithNonContiguousCells=function(a){var b=this.setup.jQuery,c=this.setup.Options;if(!c.nonContiguousCellHtml)throw new Error(g.default.ERROR_NONCONTIGUOUS_HTML_UNDEFINED);this.internal.$GetHiddenCellsInElementOrder();this.internal.AppendOrRemoveNonContiguousCellsWhile(function(d,e){if(!e)return!1;var f=d.length,h=d.filter(function(a,d){return b(d).data(g.default.DATA_VISIBLE_CELL).hasClass(c.nonContiguousPlaceholderCellClass)}).length;return a(f,h)})},a}();c.Methods=i},{"./constants":1,"./utils":7}],6:[function(a,b,c){"use strict";function d(a,b){if(!(a instanceof b))throw new TypeError("Cannot call a class as a function")}c.__esModule=!0;var e=function(){function a(a,b){for(var c=0;c'),this.window=c,this.document=e,this.$=b,this.$el=g,this.context=h}return e(a,[{key:"Window",get:function(){return this.window}},{key:"Document",get:function(){return this.document}},{key:"jQuery",get:function(){return this.$}},{key:"Options",get:function(){return this.context.options},set:function(a){this.context.options=a}},{key:"$Element",get:function(){return this.$el}},{key:"Context",get:function(){return this.context}},{key:"$OriginalCells",get:function(){return this.$originalCells}},{key:"IdPrefix",get:function(){return this.idPrefix}},{key:"VisibleCellContainerSelector",get:function(){return this.visibleCellContainerSelector}},{key:"DragCellSelector",get:function(){return this.dragCellSelector}},{key:"ResizeCellSelector",get:function(){return this.resizeCellSelector}},{key:"VisibleCellContainerClassSelector",get:function(){return this.visibleCellContainerClassSelector}},{key:"HiddenCellSelector",get:function(){return this.hiddenCellSelector}}]),a}();c.Setup=g},{"./utils":7}],7:[function(a,b,c){"use strict";function d(a){return a&&a.__esModule?a:{default:a}}function e(a,b){if(!(a instanceof b))throw new TypeError("Cannot call a class as a function")}c.__esModule=!0;var f=a("./constants"),g=d(f),h=function(){function a(){e(this,a)}return a.GenerateRandomId=function(){return Math.random().toString(36).substr(2,5)+Math.round(1e3*Math.random()).toString()},a.ConvertCssClassToJQuerySelector=function(a){return a.replace(/(^ *| +)/g,".")},a.Debounce=function(a,b,c,d){return void 0===d&&(d=null),function(){var e=this,f=arguments,g=function(){d=null,c||a.apply(e,f)},h=c&&!d;return 500==b&&console.log("callNow: "+h),clearTimeout(d),d=setTimeout(g,b),h&&a.apply(e,f),d}},a.Limit=function(b,c){var d=new Date,e=d.getTime();e-(a.limit||0)>c&&(b(),a.limit=e)},a.SwapJQueryElements=function(a,b){var c=function(c){var d=a.is(c)?b:a,e=c.next(),f=c.prev(),g=c.parent();return e.length>0&&!e.is(d)?function(a){e.before(a)}:f.length>0&&!f.is(d)?function(a){f.after(a)}:e.length>0&&e.is(d)?function(a){g.prepend(a)}:function(a){g.append(a)}},d=c(a),e=c(b),f=a.detach(),g=b.detach();e(f),d(g)},a.DetachAndInsertInPlaceJQueryElement=function(a,b){var c=b.index(),d=a.index(),e=a.detach();cDemo src="//code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"> - diff --git a/docs/indexLocal.html b/docs/indexLocal.html index a6e8e17..ac9b334 100644 --- a/docs/indexLocal.html +++ b/docs/indexLocal.html @@ -320,7 +320,6 @@

Demo

src="http://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"> - diff --git a/docs/indexscript.js b/docs/indexscript.js index 276e917..bf7eb70 100644 --- a/docs/indexscript.js +++ b/docs/indexscript.js @@ -2,14 +2,16 @@ 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', '
', 36); + popGrid('#basic-grid', function (i) { + return '
'; + }, 36); popGrid('#nested-grid', '
', 1); popGrid('#nested-grid', '
', 10); @@ -17,7 +19,7 @@ $(function () { popGrid('#resize-grid', '
', 24); - popGrid('#noncontiguous-grid', '
', 12); + popGrid('#noncontiguous-grid', '
', 12); popGrid('#dual1-grid', '
', 24); popGrid('#dual2-grid', '
', 12); @@ -31,7 +33,8 @@ $(function () { }, 36); $('#basic-grid').gridstrap({ - +dragMouseoverThrottle: 150, +//swapMode: true }); $('a[href="#responsive-demo"]').on('shown.bs.tab', function () { diff --git a/docs/jquery.gridstrap.css b/docs/jquery.gridstrap.css index 9f967dc..e2bb77e 100644 --- a/docs/jquery.gridstrap.css +++ b/docs/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 ; diff --git a/docs/jquery.gridstrap.js b/docs/jquery.gridstrap.js index 207dbdf..e5f6b46 100644 --- a/docs/jquery.gridstrap.js +++ b/docs/jquery.gridstrap.js @@ -30,6 +30,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', @@ -148,7 +151,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. }; @@ -191,6 +194,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; @@ -226,6 +240,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; @@ -246,21 +262,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; @@ -302,6 +321,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; @@ -417,11 +441,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)); @@ -508,24 +535,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) { @@ -561,7 +587,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. @@ -576,7 +603,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); @@ -1435,46 +1462,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) { @@ -1573,6 +1596,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; })(); diff --git a/package.json b/package.json index 29a3504..fbdd4bb 100644 --- a/package.json +++ b/package.json @@ -22,14 +22,14 @@ }, "author": { "name": "Ross P", - "email": "info@rossp.xyz", + "email": "info@rossp.email", "url": "https://github.com/rosspi" }, "homepage": "https://rosspi.github.io/gridstrap.js/", "contributors": [ { "name": "Ross P", - "email": "info@rossp.xyz", + "email": "info@rossp.email", "url": "https://github.com/rosspi" } ], diff --git a/src/constants.js b/src/constants.js index 3742d65..6f56f12 100644 --- a/src/constants.js +++ b/src/constants.js @@ -10,6 +10,9 @@ 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', diff --git a/src/gridstrap.js b/src/gridstrap.js index 46506a7..6f3821d 100644 --- a/src/gridstrap.js +++ b/src/gridstrap.js @@ -80,7 +80,7 @@ import {Methods} from './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. }; diff --git a/src/handlers.js b/src/handlers.js index 73aace4..6391a0f 100644 --- a/src/handlers.js +++ b/src/handlers.js @@ -16,6 +16,20 @@ export class Handlers { } } + onTouchStart (touchEvent, $cell, gridstrapContext){ + let $ = this.setup.jQuery; + let options = this.setup.Options; + + touchEvent.preventDefault(); + + if (touchEvent.touches.length){ + this.onMousedown( + Utils.ConvertTouchToMouseEvent(touchEvent), + $cell, + gridstrapContext); + } + } + onMousedown (mouseEvent, $cell, gridstrapContext) { let $ = this.setup.jQuery; let context = this.setup.Context; @@ -49,7 +63,7 @@ export class Handlers { this.internal.MoveDraggedCell(mouseEvent, $cell); } - } + } onMouseover(mouseEvent, $cell, gridstrapContext) { let $ = this.setup.jQuery; @@ -70,11 +84,9 @@ export class Handlers { // make sure you're not mouseover-ing the dragged cell itself. // css' 'pointer-events', 'none' should do this job, but this double checks. - this.internal.LastMouseOverCellTarget = $cell; - - if (!Utils.IsElementThrottled($, $cell, options.dragMouseoverThrottle)) { - // do not move two cells that have recently already moved. + this.internal.LastMouseOverCellTarget = $cell; + Utils.Limit(() => { if (gridstrapContext.options.rearrangeOnDrag) { this.internal.MoveCell($draggedCell, $cell, gridstrapContext); @@ -82,11 +94,16 @@ export class Handlers { // reset dragged object to mouse pos, not pos of hidden cells. this.internal.MoveDraggedCell(mouseEvent, $draggedCell); } - } + }, options.dragMouseoverThrottle); } } } + onTouchmove (touchEvent) { + + this.onMousemove(Utils.ConvertTouchToMouseEvent(touchEvent)); + } + onMousemove (mouseEvent) { let $ = this.setup.jQuery; let context = this.setup.Context; @@ -130,6 +147,11 @@ export class Handlers { } } + onTouchend(touchEvent){ + // don't convert to mouseEVent becuase there are no touches. + this.onMouseup(touchEvent); + } + onMouseup (mouseEvent) { let $ = this.setup.jQuery; let context = this.setup.Context; diff --git a/src/internal.js b/src/internal.js index 339dc0b..b7af105 100644 --- a/src/internal.js +++ b/src/internal.js @@ -40,12 +40,19 @@ export class Internal { `${appendNamespace(Constants.EVENT_MOUSEDOWN)}`, true, eventHandlers.onMousedown.bind(eventHandlers)); + + this.HandleCellMouseEvent( + context, + `${appendNamespace(Constants.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(Constants.EVENT_MOUSEOVER)}`, false, - eventHandlers.onMouseover.bind(eventHandlers)); + eventHandlers.onMouseover.bind(eventHandlers)); // it is not appropriate to confine the events to the visible cell wrapper. $(options.mouseMoveSelector) @@ -54,10 +61,19 @@ export class Internal { Utils.Debounce( eventHandlers.onMousemove.bind(eventHandlers), options.mousemoveDebounce - )) + )) + .on( + `${appendNamespace(Constants.EVENT_TOUCHMOVE)}`, + Utils.Debounce( + eventHandlers.onTouchmove.bind(eventHandlers), + options.mousemoveDebounce + )) .on( `${appendNamespace(Constants.EVENT_MOUSEUP)}`, - eventHandlers.onMouseup.bind(eventHandlers)); + eventHandlers.onMouseup.bind(eventHandlers)) + .on( + `${appendNamespace(Constants.EVENT_TOUCHEND)}`, + eventHandlers.onTouchend.bind(eventHandlers)); if (options.updateCoordinatesOnWindowResize) { $(window).on( @@ -148,24 +164,23 @@ export class Internal { }); } - $GetNonDraggedCellFromPoint($draggedCell, mouseEvent) { + GetNonDraggedElementFromPoint($draggedCell, mouseEvent) { let document = this.setup.Document; let $ = this.setup.jQuery; //remove mouse events from dragged cell, because we need to test for overlap of underneath things. let oldPointerEvents = $draggedCell.css('pointer-events'); + let oldTouchAction = $draggedCell.css('touch-action'); $draggedCell.css('pointer-events', 'none'); + $draggedCell.css('touch-action', 'none'); - let element = document.elementFromPoint(mouseEvent.clientX, mouseEvent.clientY); - let cellAndIndex = this.GetCellAndInternalIndex(element); + let element = document.elementFromPoint(mouseEvent.clientX, mouseEvent.clientY); // restore pointer-events css. $draggedCell.css('pointer-events', oldPointerEvents); + $draggedCell.css('touch-action', oldTouchAction); - if (!cellAndIndex){ - return $(); - } - return cellAndIndex.$cell; + return element; } MoveDraggedCell (mouseEvent, $cell) { @@ -202,7 +217,8 @@ export class Internal { })); }; - let $overlappedCell = this.$GetNonDraggedCellFromPoint($cell, mouseEvent); + let overlappedElement = this.GetNonDraggedElementFromPoint($cell, mouseEvent); + let $overlappedCell = context.$getCellOfElement(overlappedElement); if ($overlappedCell.length) { // have to create event here like this other mouse coords are missing. @@ -218,7 +234,7 @@ export class Internal { let additionalContext = $(this).data(Constants.DATA_GRIDSTRAP); if (additionalContext) { // $getCellOfElement is a 'public' method. - let $additionalContextCell = additionalContext.$getCellOfElement(element); + let $additionalContextCell = additionalContext.$getCellOfElement(overlappedElement); if ($additionalContextCell.length) { // have to create event here like this other mouse coords are missing. triggerMouseOverEvent($additionalContextCell); diff --git a/src/style.css b/src/style.css index 23fa091..da75b1f 100644 --- a/src/style.css +++ b/src/style.css @@ -5,6 +5,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 ; diff --git a/src/utils.js b/src/utils.js index f5892ac..04273bc 100644 --- a/src/utils.js +++ b/src/utils.js @@ -10,48 +10,45 @@ export class Utils { return cssClass.replace(/(^ *| +)/g, '.'); } - static Debounce(callback, milliseconds, leading){ - let timeout; + static Debounce(callback, milliseconds, leading, timeout){ + if (typeof(timeout) === 'undefined'){ + timeout = null; + } return function () { let context = this; let args = arguments; - let callNow = leading || !milliseconds; let later = function () { timeout = null; - if (!callNow) { + if (!leading) { callback.apply(context, args); } }; + let callNow = leading && !timeout; + + if (milliseconds == 500) + console.log('callNow: ' + callNow); + clearTimeout(timeout); timeout = setTimeout(later, milliseconds); if (callNow) { callback.apply(context, args); } + + return timeout; }; } - static IsElementThrottled($, element, milliseconds){ - - Utils.recentDragMouseOvers = Utils.recentDragMouseOvers || []; - + static Limit(callback, milliseconds) { let d = new Date(); let n = d.getTime(); - for (let 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; - } - } - Utils.recentDragMouseOvers.push({ - n: n, - e: element - }); - return false; - } + if (n - (Utils.limit || 0) > milliseconds){ + + callback(); + Utils.limit = n; + } + } + static SwapJQueryElements($a, $b){ let getInPlaceFunction = function ($element) { let $other = $a.is($element) ? $b : $a; @@ -148,4 +145,20 @@ export class Utils { }; } + static ConvertTouchToMouseEvent(touchEvent){ + let 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; + } + } \ No newline at end of file diff --git a/test/compiled/jquery.gridstrap.spec.js b/test/compiled/jquery.gridstrap.spec.js index 36f1d0f..6a47500 100644 --- a/test/compiled/jquery.gridstrap.spec.js +++ b/test/compiled/jquery.gridstrap.spec.js @@ -14,6 +14,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', @@ -50,46 +53,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) { @@ -188,6 +187,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; })();