diff --git a/README.md b/README.md index 8ef5864..5746ea1 100644 --- a/README.md +++ b/README.md @@ -1,18 +1,18 @@ -# gridstrap.js +# gridstrap.js -[![Build Status](https://travis-ci.org/rosspi/gridstrap.js.svg?branch=master)](https://travis-ci.org/rosspi/gridstrap.js) +[![Build Status](https://travis-ci.org/rosspi/gridstrap.js.svg?branch=master)](https://travis-ci.org/rosspi/gridstrap.js) [![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release) -[![NPM version](https://img.shields.io/npm/v/jquery.gridstrap.svg)](https://www.npmjs.com/package/jquery.gridstrap) +[![NPM version](https://img.shields.io/npm/v/jquery.gridstrap.svg)](https://www.npmjs.com/package/jquery.gridstrap) ![donate](https://img.shields.io/badge/donate%20bitcoin-1Q32bCvaoNPS4GUNxeBbPzkniMguKFVEtf-green.svg) - + gridstrap.js is a jQuery plugin designed to take [Bootstrap's CSS grid system](https://getbootstrap.com/css/#grid) and turn it into a managed draggable and resizeable grid while truely maintaining its responsive behaviour. It will also work with any kind of CSS-driven layout. -I made this plugin to fill a gap that existed for easily creating Bootstrap-based drag 'n' drop grid responsive interfaces. +I made this plugin to fill a gap that existed for easily creating Bootstrap-based drag 'n' drop grid responsive interfaces. Both gridster.js and gridstack.js inspired this jQuery plugin, however both have their own grid systems that don't play nicely with Bootstrap out of the box. -## Demo +## Demo [https://rosspi.github.io/gridstrap.js/](https://rosspi.github.io/gridstrap.js/) - + ## Usage @@ -25,8 +25,8 @@ Both gridster.js and gridstack.js inspired this jQuery plugin, however both have 2. Include plugin's code: - ```html - + ```html + ``` @@ -37,7 +37,7 @@ Both gridster.js and gridstack.js inspired this jQuery plugin, however both have
... - ``` + ``` 3. Call the plugin: @@ -53,10 +53,10 @@ Both gridster.js and gridstack.js inspired this jQuery plugin, however both have **Download from NPM to have version details affixed to distributables. Using semantic-release means this info won't be in the distributables on GitHub.** [![NPM version](https://img.shields.io/npm/v/jquery.gridstrap.svg)](https://www.npmjs.com/package/jquery.gridstrap) - + ```bash $ npm install jquery.gridstrap - ``` + ``` ## API @@ -71,17 +71,18 @@ $.Gridstrap.defaultOptions = { nonContiguousPlaceholderCellClass: 'gridstack-noncontiguous', // class applied to non-contiguous placeholder cells. dragCellClass: 'gridstrap-cell-drag', // class applied to dragging cell. resizeCellClass: 'gridstrap-cell-resize', // class applied to resizing cell. + mouseOverCellClass: 'gridstrap-cell-mouseover', // class applied on mouseover mouseMoveSelector: 'body', // jQuery selector to bind mousemouse and mouseup events. visibleCellContainerParentSelector: null, // jQuery selector to append 'visible' cell container to. Null will use the element the plugin is initialised on. visibleCellContainerClass: 'gridstrap-container', // class applied to the cell container element. getHtmlOfSourceCell: function ($cell) { // function to return the html of a 'source' cell. return $cell[0].outerHTML; - }, + }, dragCellHandleSelector: '*', // jQuery selector relative to and including cell for drag handling. draggable: true, // toggle mouse dragging. rearrangeOnDrag: true, // toggle the triggering of rearranging cells before mouseup. resizeHandleSelector: null, // jQuery selector relative to cell for resize handling. Null disables. - resizeOnDrag: true, // toggle mouse resizing. + resizeOnDrag: true, // toggle mouse resizing. swapMode: false, // toggle swap or insert mode when rearranging cells. nonContiguousCellHtml: null, // html to use for non-contiguous placeholder cells. autoPadNonContiguousCells: true, // toggle adding non-contiguous cells automatically on drag or as otherwise needed. @@ -96,7 +97,7 @@ $.Gridstrap.defaultOptions = { ### Plugin's methods -#### [.attachCell](src/methods.js) +#### [.attachCell](src/methods.js) Attach an existing html element to the grid. Will create a hidden cell and convert existing source cell to a visible cell. @@ -109,7 +110,7 @@ Attach an existing html element to the grid. Will create a hidden cell and conve A jQuery object of the attached visible cell. -#### [.detachCell](src/methods.js) +#### [.detachCell](src/methods.js) Detach an existing cell from the grid. Will delete hidden cell and convert visible cell to its original state. @@ -121,7 +122,7 @@ Detach an existing cell from the grid. Will delete hidden cell and convert visib A jQuery object of the detached source cell. -#### [.$getCellContainer](src/methods.js) +#### [.$getCellContainer](src/methods.js) Get the div that contains the visible cells. It exists within the gridstrap element by default. @@ -133,7 +134,7 @@ None. jQuery object of all visible cell container. -#### [.$getCellFromCoordinates](src/methods.js) +#### [.$getCellFromCoordinates](src/methods.js) Get the visible cell at certain coordinates. @@ -148,7 +149,7 @@ jQuery object of a visible cell. -#### [.getCellIndexFromCoordinates](src/methods.js) +#### [.getCellIndexFromCoordinates](src/methods.js) Get the index/order position of the visible cell at certain coordinates. @@ -161,7 +162,7 @@ Get the index/order position of the visible cell at certain coordinates. 0-based index or -1 if cannot find. -#### [.getCellIndexOfElement](src/methods.js) +#### [.getCellIndexOfElement](src/methods.js) Get the index/order position of the visible cell. @@ -173,7 +174,7 @@ Get the index/order position of the visible cell. 0-based index or -1 if cannot find. -#### [.$getCells](src/methods.js) +#### [.$getCells](src/methods.js) Get the visible cells in their current order. @@ -185,19 +186,19 @@ None. jQuery object of all ordered visible cells. -#### [.$getCellOfElement](src/methods.js) +#### [.$getCellOfElement](src/methods.js) Get jQuery object selection of the .closest() visible cell from the element. **Params** -* `element` **{jQuery/String/Element}**: Html element. +* `element` **{jQuery/String/Element}**: Html element. **Returns** A jQuery object selection of the closest visible cell from the element. -#### [.$getHiddenCells](src/methods.js) +#### [.$getHiddenCells](src/methods.js) Get the hidden cells in their current order. @@ -209,13 +210,13 @@ None. jQuery object of all ordered hidden cells. -#### [.insertCell](src/methods.js) +#### [.insertCell](src/methods.js) Create a new cell from a html string and attach to grid. Converts a html string to a hidden and visible cell. **Params** -* `cellHtml` **{String}**: Html to create a new cell. +* `cellHtml` **{String}**: Html to create a new cell. * `index` **{Number}**: Index within the existing ordered visible cell to insert the html. **Returns** @@ -223,7 +224,7 @@ Create a new cell from a html string and attach to grid. Converts a html string A jQuery object of the new created visible cell. -#### [.modifyCell](src/methods.js) +#### [.modifyCell](src/methods.js) Modify an existing visible and/or hidden cell. Provides an easy way to modify an existing cell without breaking gridstrap's management of them. @@ -237,7 +238,7 @@ Modify an existing visible and/or hidden cell. Provides an easy way to modify an Nothing. -#### [.moveCell](src/methods.js) +#### [.moveCell](src/methods.js) Move a cell within the grid. @@ -252,7 +253,7 @@ Move a cell within the grid. Nothing. -#### [.padWithNonContiguousCells](src/methods.js) +#### [.padWithNonContiguousCells](src/methods.js) Explicitly append non-contiguous cells to set of current cells. These cells are added automatically as required if the `autoPadNonContiguousCells` option is enabled, but for performance and behaviour reasons it may be better to setup a grid using this method. @@ -265,9 +266,9 @@ Explicitly append non-contiguous cells to set of current cells. These cells are Nothing. -#### [.removeCell](src/methods.js) +#### [.removeCell](src/methods.js) -Detach an existing cell from the grid and then removes it from the DOM. +Detach an existing cell from the grid and then removes it from the DOM. **Params** @@ -278,7 +279,7 @@ Detach an existing cell from the grid and then removes it from the DOM. Nothing. -#### [.setAdditionalGridstrapDragTarget](src/methods.js) +#### [.setAdditionalGridstrapDragTarget](src/methods.js) Enable another gridstrap instance to be targetable for drag and moveCell calls. @@ -298,13 +299,13 @@ Set a visible cell's position and size. This will also trigger the 'cellredraw' **Params** * `$cell` **{jQuery/String/Element}**: Visible cell Html element. -* `positionAndSize` **{Object}**: {left:left, top:top, width:width, height:height}. +* `positionAndSize` **{Object}**: {left:left, top:top, width:width, height:height}. **Returns** Nothing. -#### [.updateOptions](src/methods.js) +#### [.updateOptions](src/methods.js) Get the div that contains the visible cells. It exists within the gridstrap element by default. @@ -363,7 +364,7 @@ Triggered when a visible cell is being resized. Can be prevented. * `width` **{Number}**: Width of cell. * `height` **{Number}**: Height of cell. -* `target` **{Element}**: Visible cell being resized. +* `target` **{Element}**: Visible cell being resized. diff --git a/dist/jquery.gridstrap.js b/dist/jquery.gridstrap.js index 5552c5a..4e18977 100644 --- a/dist/jquery.gridstrap.js +++ b/dist/jquery.gridstrap.js @@ -24,6 +24,7 @@ var _default = { EVENT_DRAGSTART: 'dragstart', EVENT_MOUSEDOWN: 'mousedown', EVENT_MOUSEOVER: 'mouseover', + EVENT_MOUSEOUT: 'mouseout', EVENT_MOUSEMOVE: 'mousemove', EVENT_MOUSEUP: 'mouseup', EVENT_TOUCHSTART: 'touchstart', @@ -137,6 +138,8 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d // class applied to dragging cell. resizeCellClass: 'gridstrap-cell-resize', // class applied to resizing cell. + mouseOverCellClass: 'gridstrap-cell-mouseover', + // class applied to mouseover cell. mouseMoveSelector: 'body', // jQuery selector to bind mousemouse and mouseup events. visibleCellContainerParentSelector: null, @@ -156,7 +159,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d resizeHandleSelector: null, // jQuery selector relative to cell for resize handling. Null disables. resizeOnDrag: true, - // toggle mouse resizing. + // toggle mouse resizing. swapMode: false, // toggle swap or insert mode when rearranging cells. nonContiguousCellHtml: null, @@ -278,10 +281,14 @@ function () { return; } - var $draggedCell = this.internal.$GetDraggingCell(); + var $draggedCell = this.internal.$GetDraggingCell(); // Add mouseOverCellClass (only when not currently dragging) + + if (options.draggable && !$draggedCell.length && !$cell.hasClass(options.mouseOverCellClass)) { + $cell.addClass(options.mouseOverCellClass); + } if ($draggedCell.length) { - // Is currently dragging. + // Is currently dragging. if ($cell.length && !$draggedCell.closest($cell).length) { // make sure you're not mouseover-ing the dragged cell itself. // css' 'pointer-events', 'none' should do this job, but this double checks. @@ -289,7 +296,7 @@ function () { _utils.Utils.Limit(function () { if (gridstrapContext.options.rearrangeOnDrag) { - _this.internal.MoveCell($draggedCell, $cell, gridstrapContext); // reset dragged object to mouse pos, not pos of hidden cells. + _this.internal.MoveCell($draggedCell, $cell, gridstrapContext); // reset dragged object to mouse pos, not pos of hidden cells. // do not trigger overlapping now. @@ -299,6 +306,16 @@ function () { } } } + }, { + key: "onMouseout", + value: function onMouseout(mouseEvent, $cell, gridstrapContext) { + var options = this.setup.Options; + var isDragging = this.internal.$GetDraggingCell().length; // Remove mouseOverCellClass (only when not currently dragging) + + if (!isDragging) { + $cell.removeClass(options.mouseOverCellClass); + } + } }, { key: "onTouchmove", value: function onTouchmove(touchEvent) { @@ -313,7 +330,7 @@ function () { var $resizedCell = $(this.setup.ResizeCellSelector); if ($resizedCell.length) { - // is resizing + // is resizing var originalMouseDownDiff = $resizedCell.data(_constants["default"].DATA_MOUSEDOWN_POSITION_DIFF); var originalMouseDownSize = $resizedCell.data(_constants["default"].DATA_MOUSEDOWN_SIZE); // will change as resizing. @@ -470,7 +487,8 @@ function () { this.HandleCellMouseEvent(context, "".concat(appendNamespace(_constants["default"].EVENT_MOUSEDOWN)), true, eventHandlers.onMousedown.bind(eventHandlers)); this.HandleCellMouseEvent(context, "".concat(appendNamespace(_constants["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, "".concat(appendNamespace(_constants["default"].EVENT_MOUSEOVER)), false, eventHandlers.onMouseover.bind(eventHandlers)); // it is not appropriate to confine the events to the visible cell wrapper. + this.HandleCellMouseEvent(context, "".concat(appendNamespace(_constants["default"].EVENT_MOUSEOVER)), false, eventHandlers.onMouseover.bind(eventHandlers)); + this.HandleCellMouseEvent(context, "".concat(appendNamespace(_constants["default"].EVENT_MOUSEOUT)), false, eventHandlers.onMouseout.bind(eventHandlers)); // it is not appropriate to confine the events to the visible cell wrapper. $(options.mouseMoveSelector).on("".concat(appendNamespace(_constants["default"].EVENT_MOUSEMOVE)), _utils.Utils.Debounce(eventHandlers.onMousemove.bind(eventHandlers), options.mousemoveDebounce)).on("".concat(appendNamespace(_constants["default"].EVENT_TOUCHMOVE)), _utils.Utils.Debounce(eventHandlers.onTouchmove.bind(eventHandlers), options.mousemoveDebounce)).on("".concat(appendNamespace(_constants["default"].EVENT_MOUSEUP)), eventHandlers.onMouseup.bind(eventHandlers)).on("".concat(appendNamespace(_constants["default"].EVENT_TOUCHEND)), eventHandlers.onTouchend.bind(eventHandlers)); @@ -519,7 +537,7 @@ function () { // If the default settings apply for drag handle mouse events, // or if mouseover, then we want the event to be lenient as to what triggers it. // Prepend selector with grid cell itself as an OR/, selector. - // To become the cell itself OR any dragCellHandleSelector within the cell. + // To become the cell itself OR any dragCellHandleSelector within the cell. draggableSelector = context.options.gridCellSelector + ',' + draggableSelector; } @@ -752,8 +770,8 @@ function () { var $reattachedMovingCell = gridstrapContext.attachCell($detachedMovingOriginalCell); var $reattachedTargetCell = context.attachCell($detachedTargetOriginalCell); // have to remove visibleCellClass that these two would now have - // as that should have the css transition animation in it, - // and we want to bypass that, set position, then apply it, set position again. + // as that should have the css transition animation in it, + // and we want to bypass that, set position, then apply it, set position again. _utils.Utils.ClearAbsoluteCSS($reattachedMovingCell); @@ -784,8 +802,8 @@ function () { _utils.Utils.DetachAndInsertInPlaceJQueryElement(_$detachedMovingOriginalCell, $hiddenTarget); var _$reattachedMovingCell = gridstrapContext.attachCell(_$detachedMovingOriginalCell); // have to remove visibleCellClass that these two would now have - // as that should have the css transition animation in it, - // and we want to bypass that, set position, then apply it, set position again. + // as that should have the css transition animation in it, + // and we want to bypass that, set position, then apply it, set position again. _$reattachedMovingCell.removeClass(options.visibleCellClass); @@ -804,7 +822,7 @@ function () { } } } else { - // regular internal movement + // regular internal movement if (options.swapMode) { _utils.Utils.SwapJQueryElements($hiddenDragged, $hiddenTarget); } else { @@ -921,7 +939,7 @@ function () { var $insertedHiddenCell = $insertedCell.data(_constants["default"].DATA_HIDDEN_CELL); $hiddenCells = $hiddenCells.add($insertedHiddenCell); changed = true; - } // remove cells at end when we have too much. + } // remove cells at end when we have too much. var $lastHiddenCell = $hiddenCells.last(); @@ -943,7 +961,7 @@ function () { $hiddenCells = $hiddenCells.not($lastHiddenCell); // update new last hidden cell. $lastHiddenCell = $hiddenCells.last(); - $bottomRowHiddenCells = null; // force refilter. + $bottomRowHiddenCells = null; // force refilter. changed = true; } diff --git a/dist/jquery.gridstrap.min.js b/dist/jquery.gridstrap.min.js index 5298ed5..1c5c360 100644 --- a/dist/jquery.gridstrap.min.js +++ b/dist/jquery.gridstrap.min.js @@ -8,5 +8,5 @@ * Under MIT License */ -!function s(r,o,a){function u(t,e){if(!o[t]){if(!r[t]){var n="function"==typeof require&&require;if(!e&&n)return n(t,!0);if(d)return d(t,!0);var l=new Error("Cannot find module '"+t+"'");throw l.code="MODULE_NOT_FOUND",l}var i=o[t]={exports:{}};r[t][0].call(i.exports,function(e){return u(r[t][1][e]||e)},i,i.exports,s,r,o,a)}return o[t].exports}for(var d="function"==typeof require&&require,e=0;e*",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(e){return e[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},f.fn.gridstrap=function(e){return this.each(function(){new f.Gridstrap(this,e)})}},{"./constants":1,"./handlers":3,"./internal":4,"./methods":5,"./setup":6,"./utils":7}],3:[function(e,t,n){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.Handlers=void 0;var l,c=(l=e("./constants"))&&l.__esModule?l:{default:l},C=e("./utils");function i(e,t){for(var n=0;nl(r)&&(r=n)}}),this.AppendOrRemoveNonContiguousCellsWhile(function(e,t){var n=D.Utils.GetPositionAndSizeOfCell(e.last());return t?n.top-r.top<2*r.height:n.top-r.top>2*r.height})&&this.MoveDraggedCell(t,e)}},{key:"AppendOrRemoveNonContiguousCellsWhile",value:function(e){for(var n=this.setup.jQuery,l=this.setup.Options,t=this.setup.Context,i=!1,s=this.$GetHiddenCellsInElementOrder();e(s,!0);){var r=t.insertCell(l.nonContiguousCellHtml,s.length);r.addClass(l.nonContiguousPlaceholderCellClass);var o=r.data(A.default.DATA_HIDDEN_CELL);s=s.add(o),i=!0}for(var a=s.last(),u=null,d=function(){return u=u||s.filter(function(e,t){return D.Utils.GetPositionAndSizeOfCell(n(t)).top===D.Utils.GetPositionAndSizeOfCell(a).top})};e(s,!1)&&d().filter(function(e,t){return n(t).data(A.default.DATA_VISIBLE_CELL).hasClass(l.nonContiguousPlaceholderCellClass)}).length===d().length&&0r.length&&i.nonContiguousCellHtml&&i.autoPadNonContiguousCells&&(this.internal.AppendOrRemoveNonContiguousCellsWhile(function(e,t){return!!t&&e.lengths.length&&l.nonContiguousCellHtml&&l.autoPadNonContiguousCells&&(this.internal.AppendOrRemoveNonContiguousCellsWhile(function(e,t){return!!t&&e.length<=n}),s=this.$getCells());var r=this.internal.GetCellAndInternalIndex(e);this.internal.MoveCell(r.$cell,s.eq(n),t||i)}},{key:"$getCellFromCoordinates",value:function(e,t){var n=this.setup.Document,l=this.setup.jQuery,i=n.elementFromPoint(e,t),s=this.internal.GetCellAndInternalIndex(i);return s?s.$cell:l()}},{key:"getCellIndexFromCoordinates",value:function(e,t){var n=this.setup.Document,l=(this.setup.jQuery,n.elementFromPoint(e,t)),i=this.internal.GetCellAndInternalIndex(l);return i?this.$getCells().index(i.$cell):-1}},{key:"$getCells",value:function(){var e=this.setup.jQuery,t=this.internal.$GetHiddenCellsInElementOrder().map(function(){return e(this).data(o.default.DATA_VISIBLE_CELL)[0]});return e(t)}},{key:"$getHiddenCells",value:function(){return this.internal.$GetHiddenCellsInElementOrder()}},{key:"$getCellContainer",value:function(){return(0,this.setup.jQuery)(this.setup.VisibleCellContainerSelector)}},{key:"updateOptions",value:function(e){var t=this.setup.jQuery,n=this.setup.Options;this.setup.Options=t.extend({},n,e)}},{key:"getCellIndexOfElement",value:function(e){var t=this.$getCellOfElement(e);return this.$getCells().index(t)}},{key:"setAdditionalGridstrapDragTarget",value:function(e){var t=this.setup.jQuery,n=this.handlers,l=this,i="".concat(o.default.EVENT_MOUSEOVER,".gridstrap-additional-").concat(this.setup.IdPrefix);l.internal.AdditionalGridstrapDragTargetSelector&&t(l.internal.AdditionalGridstrapDragTargetSelector).each(function(){t(t(this).data(o.default.DATA_GRIDSTRAP).options.visibleCellContainerParentSelector).off(i)}),l.internal.AdditionalGridstrapDragTargetSelector=e,l.internal.AdditionalGridstrapDragTargetSelector&&t(l.internal.AdditionalGridstrapDragTargetSelector).each(function(){l.internal.HandleCellMouseEvent(t(this).data(o.default.DATA_GRIDSTRAP),i,!1,n.onMouseover.bind(n))})}},{key:"modifyCell",value:function(e,t){var n=this.setup.Context,l=this.$getCells().eq(e),i=l.data(o.default.DATA_HIDDEN_CELL),s=!1;t.call(n,function(){return s=!0,l},function(){return i}),s&&i.html(l.html()),this.updateVisibleCellCoordinates()}},{key:"padWithNonContiguousCells",value:function(i){var s=this.setup.jQuery,r=this.setup.Options;if(!r.nonContiguousCellHtml)throw new Error(o.default.ERROR_NONCONTIGUOUS_HTML_UNDEFINED);this.internal.$GetHiddenCellsInElementOrder();this.internal.AppendOrRemoveNonContiguousCellsWhile(function(e,t){if(!t)return!1;var n=e.length,l=e.filter(function(e,t){return s(t).data(o.default.DATA_VISIBLE_CELL).hasClass(r.nonContiguousPlaceholderCellClass)}).length;return i(n,l)})}}])&&i(e.prototype,t),n&&i(e,n),l}();n.Methods=s},{"./constants":1,"./utils":7}],6:[function(e,t,n){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.Setup=void 0;var a=e("./utils");function l(e,t){for(var n=0;n'),this.window=t,this.document=n,this.$=e,this.$el=l,this.context=i}var e,t,n;return e=o,(t=[{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(e){this.context.options=e}},{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}}])&&l(e.prototype,t),n&&l(e,n),o}();n.Setup=i},{"./utils":7}],7:[function(e,t,n){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.Utils=void 0;var l,i=(l=e("./constants"))&&l.__esModule?l:{default:l};function s(e,t){for(var n=0;n*",hiddenCellClass:"gridstrap-cell-hidden",visibleCellClass:"gridstrap-cell-visible",nonContiguousPlaceholderCellClass:"gridstack-noncontiguous",dragCellClass:"gridstrap-cell-drag",resizeCellClass:"gridstrap-cell-resize",mouseOverCellClass:"gridstrap-cell-mouseover",mouseMoveSelector:"body",visibleCellContainerParentSelector:null,visibleCellContainerClass:"gridstrap-container",getHtmlOfSourceCell:function(e){return e[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},f.fn.gridstrap=function(e){return this.each(function(){new f.Gridstrap(this,e)})}},{"./constants":1,"./handlers":3,"./internal":4,"./methods":5,"./setup":6,"./utils":7}],3:[function(e,t,n){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.Handlers=void 0;var l,C=(l=e("./constants"))&&l.__esModule?l:{default:l},c=e("./utils");function i(e,t){for(var n=0;nl(r)&&(r=n)}}),this.AppendOrRemoveNonContiguousCellsWhile(function(e,t){var n=O.Utils.GetPositionAndSizeOfCell(e.last());return t?n.top-r.top<2*r.height:n.top-r.top>2*r.height})&&this.MoveDraggedCell(t,e)}},{key:"AppendOrRemoveNonContiguousCellsWhile",value:function(e){for(var n=this.setup.jQuery,l=this.setup.Options,t=this.setup.Context,i=!1,s=this.$GetHiddenCellsInElementOrder();e(s,!0);){var r=t.insertCell(l.nonContiguousCellHtml,s.length);r.addClass(l.nonContiguousPlaceholderCellClass);var o=r.data(A.default.DATA_HIDDEN_CELL);s=s.add(o),i=!0}for(var a=s.last(),u=null,d=function(){return u=u||s.filter(function(e,t){return O.Utils.GetPositionAndSizeOfCell(n(t)).top===O.Utils.GetPositionAndSizeOfCell(a).top})};e(s,!1)&&d().filter(function(e,t){return n(t).data(A.default.DATA_VISIBLE_CELL).hasClass(l.nonContiguousPlaceholderCellClass)}).length===d().length&&0r.length&&i.nonContiguousCellHtml&&i.autoPadNonContiguousCells&&(this.internal.AppendOrRemoveNonContiguousCellsWhile(function(e,t){return!!t&&e.lengths.length&&l.nonContiguousCellHtml&&l.autoPadNonContiguousCells&&(this.internal.AppendOrRemoveNonContiguousCellsWhile(function(e,t){return!!t&&e.length<=n}),s=this.$getCells());var r=this.internal.GetCellAndInternalIndex(e);this.internal.MoveCell(r.$cell,s.eq(n),t||i)}},{key:"$getCellFromCoordinates",value:function(e,t){var n=this.setup.Document,l=this.setup.jQuery,i=n.elementFromPoint(e,t),s=this.internal.GetCellAndInternalIndex(i);return s?s.$cell:l()}},{key:"getCellIndexFromCoordinates",value:function(e,t){var n=this.setup.Document,l=(this.setup.jQuery,n.elementFromPoint(e,t)),i=this.internal.GetCellAndInternalIndex(l);return i?this.$getCells().index(i.$cell):-1}},{key:"$getCells",value:function(){var e=this.setup.jQuery,t=this.internal.$GetHiddenCellsInElementOrder().map(function(){return e(this).data(o.default.DATA_VISIBLE_CELL)[0]});return e(t)}},{key:"$getHiddenCells",value:function(){return this.internal.$GetHiddenCellsInElementOrder()}},{key:"$getCellContainer",value:function(){return(0,this.setup.jQuery)(this.setup.VisibleCellContainerSelector)}},{key:"updateOptions",value:function(e){var t=this.setup.jQuery,n=this.setup.Options;this.setup.Options=t.extend({},n,e)}},{key:"getCellIndexOfElement",value:function(e){var t=this.$getCellOfElement(e);return this.$getCells().index(t)}},{key:"setAdditionalGridstrapDragTarget",value:function(e){var t=this.setup.jQuery,n=this.handlers,l=this,i="".concat(o.default.EVENT_MOUSEOVER,".gridstrap-additional-").concat(this.setup.IdPrefix);l.internal.AdditionalGridstrapDragTargetSelector&&t(l.internal.AdditionalGridstrapDragTargetSelector).each(function(){t(t(this).data(o.default.DATA_GRIDSTRAP).options.visibleCellContainerParentSelector).off(i)}),l.internal.AdditionalGridstrapDragTargetSelector=e,l.internal.AdditionalGridstrapDragTargetSelector&&t(l.internal.AdditionalGridstrapDragTargetSelector).each(function(){l.internal.HandleCellMouseEvent(t(this).data(o.default.DATA_GRIDSTRAP),i,!1,n.onMouseover.bind(n))})}},{key:"modifyCell",value:function(e,t){var n=this.setup.Context,l=this.$getCells().eq(e),i=l.data(o.default.DATA_HIDDEN_CELL),s=!1;t.call(n,function(){return s=!0,l},function(){return i}),s&&i.html(l.html()),this.updateVisibleCellCoordinates()}},{key:"padWithNonContiguousCells",value:function(i){var s=this.setup.jQuery,r=this.setup.Options;if(!r.nonContiguousCellHtml)throw new Error(o.default.ERROR_NONCONTIGUOUS_HTML_UNDEFINED);this.internal.$GetHiddenCellsInElementOrder();this.internal.AppendOrRemoveNonContiguousCellsWhile(function(e,t){if(!t)return!1;var n=e.length,l=e.filter(function(e,t){return s(t).data(o.default.DATA_VISIBLE_CELL).hasClass(r.nonContiguousPlaceholderCellClass)}).length;return i(n,l)})}}])&&i(e.prototype,t),n&&i(e,n),l}();n.Methods=s},{"./constants":1,"./utils":7}],6:[function(e,t,n){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.Setup=void 0;var a=e("./utils");function l(e,t){for(var n=0;n'),this.window=t,this.document=n,this.$=e,this.$el=l,this.context=i}var e,t,n;return e=o,(t=[{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(e){this.context.options=e}},{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}}])&&l(e.prototype,t),n&&l(e,n),o}();n.Setup=i},{"./utils":7}],7:[function(e,t,n){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.Utils=void 0;var l,i=(l=e("./constants"))&&l.__esModule?l:{default:l};function s(e,t){for(var n=0;ndiv{ +#custom-grid>div{ float:left; -} \ No newline at end of file +} diff --git a/docs/jquery.gridstrap.js b/docs/jquery.gridstrap.js index 5552c5a..4e18977 100644 --- a/docs/jquery.gridstrap.js +++ b/docs/jquery.gridstrap.js @@ -24,6 +24,7 @@ var _default = { EVENT_DRAGSTART: 'dragstart', EVENT_MOUSEDOWN: 'mousedown', EVENT_MOUSEOVER: 'mouseover', + EVENT_MOUSEOUT: 'mouseout', EVENT_MOUSEMOVE: 'mousemove', EVENT_MOUSEUP: 'mouseup', EVENT_TOUCHSTART: 'touchstart', @@ -137,6 +138,8 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d // class applied to dragging cell. resizeCellClass: 'gridstrap-cell-resize', // class applied to resizing cell. + mouseOverCellClass: 'gridstrap-cell-mouseover', + // class applied to mouseover cell. mouseMoveSelector: 'body', // jQuery selector to bind mousemouse and mouseup events. visibleCellContainerParentSelector: null, @@ -156,7 +159,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d resizeHandleSelector: null, // jQuery selector relative to cell for resize handling. Null disables. resizeOnDrag: true, - // toggle mouse resizing. + // toggle mouse resizing. swapMode: false, // toggle swap or insert mode when rearranging cells. nonContiguousCellHtml: null, @@ -278,10 +281,14 @@ function () { return; } - var $draggedCell = this.internal.$GetDraggingCell(); + var $draggedCell = this.internal.$GetDraggingCell(); // Add mouseOverCellClass (only when not currently dragging) + + if (options.draggable && !$draggedCell.length && !$cell.hasClass(options.mouseOverCellClass)) { + $cell.addClass(options.mouseOverCellClass); + } if ($draggedCell.length) { - // Is currently dragging. + // Is currently dragging. if ($cell.length && !$draggedCell.closest($cell).length) { // make sure you're not mouseover-ing the dragged cell itself. // css' 'pointer-events', 'none' should do this job, but this double checks. @@ -289,7 +296,7 @@ function () { _utils.Utils.Limit(function () { if (gridstrapContext.options.rearrangeOnDrag) { - _this.internal.MoveCell($draggedCell, $cell, gridstrapContext); // reset dragged object to mouse pos, not pos of hidden cells. + _this.internal.MoveCell($draggedCell, $cell, gridstrapContext); // reset dragged object to mouse pos, not pos of hidden cells. // do not trigger overlapping now. @@ -299,6 +306,16 @@ function () { } } } + }, { + key: "onMouseout", + value: function onMouseout(mouseEvent, $cell, gridstrapContext) { + var options = this.setup.Options; + var isDragging = this.internal.$GetDraggingCell().length; // Remove mouseOverCellClass (only when not currently dragging) + + if (!isDragging) { + $cell.removeClass(options.mouseOverCellClass); + } + } }, { key: "onTouchmove", value: function onTouchmove(touchEvent) { @@ -313,7 +330,7 @@ function () { var $resizedCell = $(this.setup.ResizeCellSelector); if ($resizedCell.length) { - // is resizing + // is resizing var originalMouseDownDiff = $resizedCell.data(_constants["default"].DATA_MOUSEDOWN_POSITION_DIFF); var originalMouseDownSize = $resizedCell.data(_constants["default"].DATA_MOUSEDOWN_SIZE); // will change as resizing. @@ -470,7 +487,8 @@ function () { this.HandleCellMouseEvent(context, "".concat(appendNamespace(_constants["default"].EVENT_MOUSEDOWN)), true, eventHandlers.onMousedown.bind(eventHandlers)); this.HandleCellMouseEvent(context, "".concat(appendNamespace(_constants["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, "".concat(appendNamespace(_constants["default"].EVENT_MOUSEOVER)), false, eventHandlers.onMouseover.bind(eventHandlers)); // it is not appropriate to confine the events to the visible cell wrapper. + this.HandleCellMouseEvent(context, "".concat(appendNamespace(_constants["default"].EVENT_MOUSEOVER)), false, eventHandlers.onMouseover.bind(eventHandlers)); + this.HandleCellMouseEvent(context, "".concat(appendNamespace(_constants["default"].EVENT_MOUSEOUT)), false, eventHandlers.onMouseout.bind(eventHandlers)); // it is not appropriate to confine the events to the visible cell wrapper. $(options.mouseMoveSelector).on("".concat(appendNamespace(_constants["default"].EVENT_MOUSEMOVE)), _utils.Utils.Debounce(eventHandlers.onMousemove.bind(eventHandlers), options.mousemoveDebounce)).on("".concat(appendNamespace(_constants["default"].EVENT_TOUCHMOVE)), _utils.Utils.Debounce(eventHandlers.onTouchmove.bind(eventHandlers), options.mousemoveDebounce)).on("".concat(appendNamespace(_constants["default"].EVENT_MOUSEUP)), eventHandlers.onMouseup.bind(eventHandlers)).on("".concat(appendNamespace(_constants["default"].EVENT_TOUCHEND)), eventHandlers.onTouchend.bind(eventHandlers)); @@ -519,7 +537,7 @@ function () { // If the default settings apply for drag handle mouse events, // or if mouseover, then we want the event to be lenient as to what triggers it. // Prepend selector with grid cell itself as an OR/, selector. - // To become the cell itself OR any dragCellHandleSelector within the cell. + // To become the cell itself OR any dragCellHandleSelector within the cell. draggableSelector = context.options.gridCellSelector + ',' + draggableSelector; } @@ -752,8 +770,8 @@ function () { var $reattachedMovingCell = gridstrapContext.attachCell($detachedMovingOriginalCell); var $reattachedTargetCell = context.attachCell($detachedTargetOriginalCell); // have to remove visibleCellClass that these two would now have - // as that should have the css transition animation in it, - // and we want to bypass that, set position, then apply it, set position again. + // as that should have the css transition animation in it, + // and we want to bypass that, set position, then apply it, set position again. _utils.Utils.ClearAbsoluteCSS($reattachedMovingCell); @@ -784,8 +802,8 @@ function () { _utils.Utils.DetachAndInsertInPlaceJQueryElement(_$detachedMovingOriginalCell, $hiddenTarget); var _$reattachedMovingCell = gridstrapContext.attachCell(_$detachedMovingOriginalCell); // have to remove visibleCellClass that these two would now have - // as that should have the css transition animation in it, - // and we want to bypass that, set position, then apply it, set position again. + // as that should have the css transition animation in it, + // and we want to bypass that, set position, then apply it, set position again. _$reattachedMovingCell.removeClass(options.visibleCellClass); @@ -804,7 +822,7 @@ function () { } } } else { - // regular internal movement + // regular internal movement if (options.swapMode) { _utils.Utils.SwapJQueryElements($hiddenDragged, $hiddenTarget); } else { @@ -921,7 +939,7 @@ function () { var $insertedHiddenCell = $insertedCell.data(_constants["default"].DATA_HIDDEN_CELL); $hiddenCells = $hiddenCells.add($insertedHiddenCell); changed = true; - } // remove cells at end when we have too much. + } // remove cells at end when we have too much. var $lastHiddenCell = $hiddenCells.last(); @@ -943,7 +961,7 @@ function () { $hiddenCells = $hiddenCells.not($lastHiddenCell); // update new last hidden cell. $lastHiddenCell = $hiddenCells.last(); - $bottomRowHiddenCells = null; // force refilter. + $bottomRowHiddenCells = null; // force refilter. changed = true; } diff --git a/package-lock.json b/package-lock.json index 0b751f0..4d655ad 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "jquery.gridstrap", - "version": "0.0.0-semantically-released", + "version": "0.0.0-development", "lockfileVersion": 1, "requires": true, "dependencies": { @@ -4910,13 +4910,15 @@ "version": "1.0.0", "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz", "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=", - "dev": true + "dev": true, + "optional": true }, "brace-expansion": { "version": "1.1.11", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==", "dev": true, + "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -4933,19 +4935,22 @@ "version": "1.1.0", "resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz", "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=", - "dev": true + "dev": true, + "optional": true }, "concat-map": { "version": "0.0.1", "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz", "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=", - "dev": true + "dev": true, + "optional": true }, "console-control-strings": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz", "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=", - "dev": true + "dev": true, + "optional": true }, "core-util-is": { "version": "1.0.2", @@ -5076,7 +5081,8 @@ "version": "2.0.3", "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz", "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=", - "dev": true + "dev": true, + "optional": true }, "ini": { "version": "1.3.5", @@ -5090,6 +5096,7 @@ "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz", "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=", "dev": true, + "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -5106,6 +5113,7 @@ "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz", "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==", "dev": true, + "optional": true, "requires": { "brace-expansion": "^1.1.7" } @@ -5114,13 +5122,15 @@ "version": "0.0.8", "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz", "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=", - "dev": true + "dev": true, + "optional": true }, "minipass": { "version": "2.3.5", "resolved": "https://registry.npmjs.org/minipass/-/minipass-2.3.5.tgz", "integrity": "sha512-Gi1W4k059gyRbyVUZQ4mEqLm0YIUiGYfvxhF6SIlk3ui1WVxMTGfGdQ2SInh3PDrRTVvPKgULkpJtT4RH10+VA==", "dev": true, + "optional": true, "requires": { "safe-buffer": "^5.1.2", "yallist": "^3.0.0" @@ -5141,6 +5151,7 @@ "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz", "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=", "dev": true, + "optional": true, "requires": { "minimist": "0.0.8" } @@ -5229,7 +5240,8 @@ "version": "1.0.1", "resolved": "https://registry.npmjs.org/number-is-nan/-/number-is-nan-1.0.1.tgz", "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=", - "dev": true + "dev": true, + "optional": true }, "object-assign": { "version": "4.1.1", @@ -5243,6 +5255,7 @@ "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz", "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=", "dev": true, + "optional": true, "requires": { "wrappy": "1" } @@ -5380,6 +5393,7 @@ "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz", "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=", "dev": true, + "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", diff --git a/src/constants.js b/src/constants.js index 8da7f9a..5c99650 100644 --- a/src/constants.js +++ b/src/constants.js @@ -1,23 +1,24 @@ export default { DATA_GRIDSTRAP : 'gridstrap', DATA_HIDDEN_CELL : 'gridstrap-hidden-cell', - DATA_VISIBLE_CELL : 'gridstrap-visible-cell', + DATA_VISIBLE_CELL : 'gridstrap-visible-cell', DATA_MOUSEDOWN_POSITION_DIFF : 'gridstrap-mousedown-position-diff', DATA_MOUSEDOWN_SIZE : 'gridstrap-mousedown-size', DATA_CELL_POSITION_AND_SIZE : 'gridstrap-position-size', EVENT_DRAGSTART : 'dragstart', EVENT_MOUSEDOWN : 'mousedown', EVENT_MOUSEOVER : 'mouseover', + EVENT_MOUSEOUT : 'mouseout', EVENT_MOUSEMOVE : 'mousemove', EVENT_MOUSEUP : 'mouseup', EVENT_TOUCHSTART: 'touchstart', - EVENT_TOUCHMOVE: 'touchmove', + EVENT_TOUCHMOVE: 'touchmove', EVENT_TOUCHEND: 'touchend', EVENT_RESIZE : 'resize', EVENT_CELL_RESIZE : 'cellresize', EVENT_CELL_DRAG: 'celldrag', EVENT_CELL_REDRAW: 'cellredraw', - ERROR_MISSING_JQUERY: 'Requires jQuery v3.4.1', + ERROR_MISSING_JQUERY: 'Requires jQuery v3.4.1', ERROR_INVALID_ATTACH_ELEMENT : 'Cannot attach element that is not a child of gridstrap parent.', ERROR_NONCONTIGUOUS_HTML_UNDEFINED : 'nonContiguousCellHtml option cannot be null.' }; diff --git a/src/gridstrap.js b/src/gridstrap.js index fe8fa50..f8d9fb9 100644 --- a/src/gridstrap.js +++ b/src/gridstrap.js @@ -1,7 +1,7 @@ import Constants from './constants'; import {Utils} from './utils'; import {Handlers} from './handlers'; -import {Setup} from './setup'; +import {Setup} from './setup'; import {Internal} from './internal'; import {Methods} from './methods'; @@ -9,11 +9,11 @@ import {Methods} from './methods'; $.Gridstrap = function (el, options) { if ( - typeof(jQuery) == 'undefined' || + typeof(jQuery) == 'undefined' || !jQuery.Event || !jQuery.Event.prototype.hasOwnProperty('changedTouches')){ throw new Error(Constants.ERROR_MISSING_JQUERY); - } + } // To avoid scope issues, use 'context' instead of 'this' // to reference this class from internal events and functions. @@ -21,8 +21,8 @@ import {Methods} from './methods'; // Access to jQuery and DOM versions of element context.$el = $(el); - context.el = el; - context.constants = Constants; + context.el = el; + context.constants = Constants; context.options = $.extend({}, $.Gridstrap.defaultOptions, options); // Do nothing if it's already been done before. @@ -32,14 +32,14 @@ import {Methods} from './methods'; console.log(`Gridstrap already initialised for element: ${context.el.nodeName}`); } return; - } + } // Add a reverse reference to the DOM object context.$el.data(Constants.DATA_GRIDSTRAP, context); let setup = new Setup($, window, document, context.$el, context); let internal = new Internal(setup); - let eventHandlers = new Handlers(setup, internal); + let eventHandlers = new Handlers(setup, internal); let methods = new Methods(setup, internal, eventHandlers); // copy methods from Methods to context. @@ -47,16 +47,16 @@ import {Methods} from './methods'; let method = methods[name]; // skip constructor if (!(method instanceof Function) || method === Methods) continue; - + context[name] = method.bind(methods); } - internal.InitOriginalCells(); - internal.InitEventHandlers(eventHandlers); + internal.InitOriginalCells(); + internal.InitEventHandlers(eventHandlers); if (context.options.debug) { console.log(`Gridstrap initialised for element: ${context.el.nodeName}`); - } + } // initialised :). }; @@ -67,17 +67,18 @@ import {Methods} from './methods'; nonContiguousPlaceholderCellClass: 'gridstack-noncontiguous', // class applied to non-contiguous placeholder cells. dragCellClass: 'gridstrap-cell-drag', // class applied to dragging cell. resizeCellClass: 'gridstrap-cell-resize', // class applied to resizing cell. + mouseOverCellClass: 'gridstrap-cell-mouseover', // class applied to mouseover cell. mouseMoveSelector: 'body', // jQuery selector to bind mousemouse and mouseup events. visibleCellContainerParentSelector: null, // jQuery selector to append 'visible' cell container to. Null will use the element the plugin is initialised on. visibleCellContainerClass: 'gridstrap-container', // class applied to the cell container element. getHtmlOfSourceCell: function ($cell) { // function to return the html of a 'source' cell. return $cell[0].outerHTML; - }, + }, dragCellHandleSelector: '*', // jQuery selector relative to and including cell for drag handling. draggable: true, // toggle mouse dragging. rearrangeOnDrag: true, // toggle the triggering of rearranging cells before mouseup. resizeHandleSelector: null, // jQuery selector relative to cell for resize handling. Null disables. - resizeOnDrag: true, // toggle mouse resizing. + resizeOnDrag: true, // toggle mouse resizing. swapMode: false, // toggle swap or insert mode when rearranging cells. nonContiguousCellHtml: null, // html to use for non-contiguous placeholder cells. autoPadNonContiguousCells: true, // toggle adding non-contiguous cells automatically on drag or as needed. diff --git a/src/handlers.js b/src/handlers.js index fd7072d..f08bcf6 100644 --- a/src/handlers.js +++ b/src/handlers.js @@ -1,15 +1,15 @@ import Constants from './constants'; import {Utils} from './utils'; -export class Handlers { +export class Handlers { constructor(setup, internal){ this.setup = setup; this.internal = internal; } - onDragstart (mouseEvent, $cell, gridstrapContext) { - let context = this.setup.Context; + onDragstart (mouseEvent, $cell, gridstrapContext) { + let context = this.setup.Context; if (gridstrapContext === context) { mouseEvent.preventDefault(); @@ -20,12 +20,12 @@ export class Handlers { let $ = this.setup.jQuery; let options = this.setup.Options; - touchEvent.preventDefault(); + touchEvent.preventDefault(); if (touchEvent.touches.length){ this.onMousedown( - Utils.ConvertTouchToMouseEvent(touchEvent), - $cell, + Utils.ConvertTouchToMouseEvent(touchEvent), + $cell, gridstrapContext); } } @@ -49,21 +49,21 @@ export class Handlers { if (!$cell.hasClass(options.resizeCellClass)) { $cell.addClass(options.resizeCellClass); - this.internal.SetMouseDownData(mouseEvent, $cell); + this.internal.SetMouseDownData(mouseEvent, $cell); } return; - } + } if (options.draggable && !$cell.hasClass(options.dragCellClass)) { - this.internal.SetMouseDownData(mouseEvent, $cell); + this.internal.SetMouseDownData(mouseEvent, $cell); $cell.addClass(options.dragCellClass); this.internal.MoveDraggedCell(mouseEvent, $cell); } - } + } onMouseover(mouseEvent, $cell, gridstrapContext) { let $ = this.setup.jQuery; @@ -72,34 +72,51 @@ export class Handlers { // clear initially. this.internal.LastMouseOverCellTarget = null; - + if (!gridstrapContext.options.draggable) { return; } + let $draggedCell = this.internal.$GetDraggingCell(); + + // Add mouseOverCellClass (only when not currently dragging) + if (options.draggable && !$draggedCell.length && !$cell.hasClass(options.mouseOverCellClass)) { + $cell.addClass(options.mouseOverCellClass); + } + if ($draggedCell.length) { - // Is currently dragging. + // Is currently dragging. if ($cell.length && !$draggedCell.closest($cell).length) { // 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; + this.internal.LastMouseOverCellTarget = $cell; Utils.Limit(() => { - if (gridstrapContext.options.rearrangeOnDrag) { + if (gridstrapContext.options.rearrangeOnDrag) { - this.internal.MoveCell($draggedCell, $cell, gridstrapContext); - - // reset dragged object to mouse pos, not pos of hidden cells. + this.internal.MoveCell($draggedCell, $cell, gridstrapContext); + + // reset dragged object to mouse pos, not pos of hidden cells. // do not trigger overlapping now. this.internal.MoveDraggedCell(mouseEvent, $draggedCell, true); } - }, options.dragMouseoverThrottle); + }, options.dragMouseoverThrottle); } } } + onMouseout (mouseEvent, $cell, gridstrapContext) { + let options = this.setup.Options; + let isDragging = this.internal.$GetDraggingCell().length; + + // Remove mouseOverCellClass (only when not currently dragging) + if (!isDragging) { + $cell.removeClass(options.mouseOverCellClass); + } + } + onTouchmove (touchEvent) { this.onMousemove(Utils.ConvertTouchToMouseEvent(touchEvent)); @@ -112,15 +129,15 @@ export class Handlers { let $resizedCell = $(this.setup.ResizeCellSelector); if ($resizedCell.length) { - // is resizing + // is resizing - let originalMouseDownDiff = $resizedCell.data(Constants.DATA_MOUSEDOWN_POSITION_DIFF); - let originalMouseDownSize = $resizedCell.data(Constants.DATA_MOUSEDOWN_SIZE); + let originalMouseDownDiff = $resizedCell.data(Constants.DATA_MOUSEDOWN_POSITION_DIFF); + let originalMouseDownSize = $resizedCell.data(Constants.DATA_MOUSEDOWN_SIZE); // will change as resizing. let cellPositionAndSize = $resizedCell.data(Constants.DATA_CELL_POSITION_AND_SIZE); - let absoluteOffset = Utils.GetAbsoluteOffsetForElementFromMouseEvent($resizedCell, mouseEvent, originalMouseDownDiff); + let absoluteOffset = Utils.GetAbsoluteOffsetForElementFromMouseEvent($resizedCell, mouseEvent, originalMouseDownDiff); let newW = originalMouseDownSize.width + absoluteOffset.left - cellPositionAndSize.left; let newH = originalMouseDownSize.height + absoluteOffset.top - cellPositionAndSize.top; @@ -139,11 +156,11 @@ export class Handlers { this.internal.MoveDraggedCell(mouseEvent, $draggedCell); - if (options.nonContiguousCellHtml && - options.rearrangeOnDrag && + if (options.nonContiguousCellHtml && + options.rearrangeOnDrag && options.autoPadNonContiguousCells){ this.internal.UpdateNonContiguousCellsForDrag($draggedCell, mouseEvent); - } + } } } } @@ -167,7 +184,7 @@ export class Handlers { let $resizedCell = $(this.setup.ResizeCellSelector); if (options.resizeHandleSelector && $resizedCell.length) { if (!options.resizeOnDrag) { - let originalMouseDownDifference = $resizedCell.data(Constants.DATA_MOUSEDOWN_POSITION_DIFF); + let originalMouseDownDifference = $resizedCell.data(Constants.DATA_MOUSEDOWN_POSITION_DIFF); let newW = originalMouseDownCellPosition.w + mouseEvent.pageX - originalMouseDownPagePosition.x; let newH = originalMouseDownCellPosition.h + mouseEvent.pageY - originalMouseDownPagePosition.y; @@ -184,10 +201,10 @@ export class Handlers { let $draggedCell = this.internal.$GetDraggingCell(); if ($draggedCell.length > 0) { - if (options.nonContiguousCellHtml && + if (options.nonContiguousCellHtml && !options.rearrangeOnDrag && options.autoPadNonContiguousCells){ - + this.internal.UpdateNonContiguousCellsForDrag($draggedCell, mouseEvent); // mouse event may be over a new placeholder cell now. @@ -207,11 +224,11 @@ export class Handlers { let cellOriginalPosition = $draggedCell.data(Constants.DATA_CELL_POSITION_AND_SIZE); context.setCellAbsolutePositionAndSize($draggedCell, cellOriginalPosition); - if (this.internal.LastMouseOverCellTarget && !options.rearrangeOnDrag) { + if (this.internal.LastMouseOverCellTarget && !options.rearrangeOnDrag) { // rearrange on mouseup this.internal.MoveCell($draggedCell, this.internal.LastMouseOverCellTarget, context); } } - } -} \ No newline at end of file + } +} diff --git a/src/internal.js b/src/internal.js index 36d27e6..1ec4dd6 100644 --- a/src/internal.js +++ b/src/internal.js @@ -1,19 +1,19 @@ import Constants from './constants'; import {Utils} from './utils'; -export class Internal { +export class Internal { constructor(setup){ - this.setup = setup; + this.setup = setup; this.document = document; this.cellsArray = []; - } + } InitOriginalCells(){ let self = this; let $ = self.setup.jQuery; - self.cellsArray = []; + self.cellsArray = []; self.setup.$OriginalCells.each(function (e) { self.InitCellsHiddenCopyAndSetAbsolutePosition($(this)); @@ -30,61 +30,67 @@ export class Internal { }; this.HandleCellMouseEvent( - context, - `${appendNamespace(Constants.EVENT_DRAGSTART)}`, - true, + context, + `${appendNamespace(Constants.EVENT_DRAGSTART)}`, + true, eventHandlers.onDragstart.bind(eventHandlers)); this.HandleCellMouseEvent( - context, - `${appendNamespace(Constants.EVENT_MOUSEDOWN)}`, - true, + context, + `${appendNamespace(Constants.EVENT_MOUSEDOWN)}`, + true, eventHandlers.onMousedown.bind(eventHandlers)); this.HandleCellMouseEvent( - context, - `${appendNamespace(Constants.EVENT_TOUCHSTART)}`, - true, + 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)); - - // it is not appropriate to confine the events to the visible cell wrapper. + context, + `${appendNamespace(Constants.EVENT_MOUSEOVER)}`, + false, + eventHandlers.onMouseover.bind(eventHandlers)); + + this.HandleCellMouseEvent( + context, + `${appendNamespace(Constants.EVENT_MOUSEOUT)}`, + false, + eventHandlers.onMouseout.bind(eventHandlers)); + + // it is not appropriate to confine the events to the visible cell wrapper. $(options.mouseMoveSelector) .on( - `${appendNamespace(Constants.EVENT_MOUSEMOVE)}`, + `${appendNamespace(Constants.EVENT_MOUSEMOVE)}`, Utils.Debounce( eventHandlers.onMousemove.bind(eventHandlers), options.mousemoveDebounce - )) + )) .on( - `${appendNamespace(Constants.EVENT_TOUCHMOVE)}`, + `${appendNamespace(Constants.EVENT_TOUCHMOVE)}`, Utils.Debounce( eventHandlers.onTouchmove.bind(eventHandlers), options.mousemoveDebounce )) .on( - `${appendNamespace(Constants.EVENT_MOUSEUP)}`, + `${appendNamespace(Constants.EVENT_MOUSEUP)}`, eventHandlers.onMouseup.bind(eventHandlers)) .on( - `${appendNamespace(Constants.EVENT_TOUCHEND)}`, + `${appendNamespace(Constants.EVENT_TOUCHEND)}`, eventHandlers.onTouchend.bind(eventHandlers)); if (options.updateCoordinatesOnWindowResize) { $(window).on( - `${appendNamespace(Constants.EVENT_RESIZE)}`, + `${appendNamespace(Constants.EVENT_RESIZE)}`, Utils.Debounce( context.updateVisibleCellCoordinates, options.windowResizeDebounce )); } } - + InitCellsHiddenCopyAndSetAbsolutePosition($cell){ let $ = this.setup.jQuery; let context = this.setup.Context; @@ -127,7 +133,7 @@ export class Internal { // If the default settings apply for drag handle mouse events, // or if mouseover, then we want the event to be lenient as to what triggers it. // Prepend selector with grid cell itself as an OR/, selector. - // To become the cell itself OR any dragCellHandleSelector within the cell. + // To become the cell itself OR any dragCellHandleSelector within the cell. draggableSelector = context.options.gridCellSelector + ',' + draggableSelector; } @@ -147,10 +153,10 @@ export class Internal { SetMouseDownData(mouseEvent, $cell) { let context = this.setup.Context; - let options = this.setup.Options; + let options = this.setup.Options; // compare page with element' offset. - let cellOffset = $cell.offset(); + let cellOffset = $cell.offset(); var w = $cell.outerWidth(); var h = $cell.outerHeight(); @@ -174,13 +180,13 @@ export class Internal { $draggedCell.css('pointer-events', 'none'); $draggedCell.css('touch-action', 'none'); - let element = document.elementFromPoint(mouseEvent.clientX, mouseEvent.clientY); + let element = document.elementFromPoint(mouseEvent.clientX, mouseEvent.clientY); // restore pointer-events css. $draggedCell.css('pointer-events', oldPointerEvents); - $draggedCell.css('touch-action', oldTouchAction); + $draggedCell.css('touch-action', oldTouchAction); - return element; + return element; } MoveDraggedCell (mouseEvent, $cell, dontLookForOverlappedCell /*optional*/) { @@ -203,10 +209,10 @@ export class Internal { if (event.isDefaultPrevented()){ return; - } + } $cell.css('left', absoluteOffset.left); - $cell.css('top', absoluteOffset.top); + $cell.css('top', absoluteOffset.top); if (dontLookForOverlappedCell){ return; @@ -223,7 +229,7 @@ export class Internal { 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. triggerMouseOverEvent($overlappedCell); @@ -234,7 +240,7 @@ export class Internal { // it might be from a linked 'additional' gridstrap. if (this.AdditionalGridstrapDragTargetSelector) { $(this.AdditionalGridstrapDragTargetSelector).each(function () { - + let additionalContext = $(this).data(Constants.DATA_GRIDSTRAP); if (additionalContext) { // $getCellOfElement is a 'public' method. @@ -250,7 +256,7 @@ export class Internal { } GetCellAndInternalIndex (element) { // element or jquery selector, child of cell or cell itself. - + let $ = this.setup.jQuery; let context = this.setup.Context; let options = this.setup.Options; @@ -278,7 +284,7 @@ export class Internal { } } - return visibleCellAndIndex; + return visibleCellAndIndex; } $GetClosestGridstrap(element) { // looks up the tree to find the closest instantiated gridstap instance. May not be this one in the case of nested grids. @@ -294,7 +300,7 @@ export class Internal { if ($currentElement.length){ return $currentElement.first(); } - return dataExistsInSelector($(element).parents()).first(); + return dataExistsInSelector($(element).parents()).first(); } $GetDraggingCell(){ @@ -312,10 +318,10 @@ export class Internal { return $(); //empty set } - return $draggedCell; + return $draggedCell; } - MoveCell ($movingVisibleCell, $targetVisibleCell, gridstrapContext) { + MoveCell ($movingVisibleCell, $targetVisibleCell, gridstrapContext) { let $ = this.setup.jQuery; let context = this.setup.Context; let options = this.setup.Options; @@ -356,10 +362,10 @@ export class Internal { let $reattachedTargetCell = context.attachCell($detachedTargetOriginalCell); // have to remove visibleCellClass that these two would now have - // as that should have the css transition animation in it, - // and we want to bypass that, set position, then apply it, set position again. + // as that should have the css transition animation in it, + // and we want to bypass that, set position, then apply it, set position again. Utils.ClearAbsoluteCSS($reattachedMovingCell); - Utils.ClearAbsoluteCSS($reattachedTargetCell); + Utils.ClearAbsoluteCSS($reattachedTargetCell); gridstrapContext.setCellAbsolutePositionAndSize($reattachedMovingCell, preDetachPositionMoving); context.setCellAbsolutePositionAndSize($reattachedTargetCell, preDetachPositionTarget); @@ -372,7 +378,7 @@ export class Internal { if (wasDragging) { $reattachedMovingCell.addClass(options.dragCellClass); - } + } } else { @@ -390,25 +396,25 @@ export class Internal { let $reattachedMovingCell = gridstrapContext.attachCell($detachedMovingOriginalCell); // have to remove visibleCellClass that these two would now have - // as that should have the css transition animation in it, - // and we want to bypass that, set position, then apply it, set position again. + // as that should have the css transition animation in it, + // and we want to bypass that, set position, then apply it, set position again. $reattachedMovingCell.removeClass(options.visibleCellClass); - - gridstrapContext.setCellAbsolutePositionAndSize($reattachedMovingCell, preDetachPositionMoving); + + gridstrapContext.setCellAbsolutePositionAndSize($reattachedMovingCell, preDetachPositionMoving); $reattachedMovingCell.addClass(options.visibleCellClass); if (wasDragging) { $reattachedMovingCell.addClass(options.dragCellClass); } - } + } gridstrapContext.updateVisibleCellCoordinates(); context.updateVisibleCellCoordinates(); } } } else { - // regular internal movement + // regular internal movement if (options.swapMode) { Utils.SwapJQueryElements($hiddenDragged, $hiddenTarget); } else { @@ -440,13 +446,13 @@ export class Internal { $hiddenCell.css('height', height); context.updateVisibleCellCoordinates(); - } + } $GetHiddenCellsInElementOrder () { let $ = this.setup.jQuery; let options = this.setup.Options; let $element = this.setup.$Element; - let self = this; + let self = this; let $attachedHiddenCells = $element.find(this.setup.HiddenCellSelector).filter(function () { let $linkedVisibleCell = $(this).data(Constants.DATA_VISIBLE_CELL); @@ -459,26 +465,26 @@ export class Internal { } } return false; - }); + }); return $attachedHiddenCells; - } + } ModifyCellsArray(callback){ callback(this.cellsArray); - } + } UpdateNonContiguousCellsForDrag($draggedCell, mouseEvent){ - let $ = this.setup.jQuery; - let options = this.setup.Options; + let $ = this.setup.jQuery; + let options = this.setup.Options; let furthestVisibleCellPositionAndSize = Utils.GetPositionAndSizeOfCell($draggedCell); let compare = (positionAndSize) => { - return positionAndSize.left + positionAndSize.width + + return positionAndSize.left + positionAndSize.width + (positionAndSize.top + positionAndSize.height) * 100000 }; - let $hiddenCells = this.$GetHiddenCellsInElementOrder(); + let $hiddenCells = this.$GetHiddenCellsInElementOrder(); $hiddenCells.each((i, e) => { if (!$(e).data(Constants.DATA_VISIBLE_CELL).hasClass(options.nonContiguousPlaceholderCellClass)){ let positionAndSize = Utils.GetPositionAndSizeOfCell($(e)); @@ -491,29 +497,29 @@ export class Internal { let changed = this.AppendOrRemoveNonContiguousCellsWhile(($hiddenCells, appending) => { let lastHiddenCellPositionAndSize = Utils.GetPositionAndSizeOfCell( $hiddenCells.last()); - + // A whole row of extra cells should exist. if (appending){ // need at least 2* cell height worht of space at bottom of grid. - return lastHiddenCellPositionAndSize.top - furthestVisibleCellPositionAndSize.top < furthestVisibleCellPositionAndSize.height * 2; + return lastHiddenCellPositionAndSize.top - furthestVisibleCellPositionAndSize.top < furthestVisibleCellPositionAndSize.height * 2; } else { return lastHiddenCellPositionAndSize.top - furthestVisibleCellPositionAndSize.top > furthestVisibleCellPositionAndSize.height * 2; - } - }); + } + }); if (changed){ - this.MoveDraggedCell(mouseEvent, $draggedCell); + this.MoveDraggedCell(mouseEvent, $draggedCell); } } - AppendOrRemoveNonContiguousCellsWhile(appendWhilePredicate){ - let $ = this.setup.jQuery; + AppendOrRemoveNonContiguousCellsWhile(appendWhilePredicate){ + let $ = this.setup.jQuery; let options = this.setup.Options; let context = this.setup.Context; let changed = false; - let $hiddenCells = this.$GetHiddenCellsInElementOrder(); + let $hiddenCells = this.$GetHiddenCellsInElementOrder(); while (appendWhilePredicate($hiddenCells, true)) { // if mouse beyond or getting near end of static hidden element, then make some placeholder ones. @@ -525,12 +531,12 @@ export class Internal { $insertedCell.addClass(options.nonContiguousPlaceholderCellClass); let $insertedHiddenCell = $insertedCell.data(Constants.DATA_HIDDEN_CELL); - $hiddenCells = $hiddenCells.add($insertedHiddenCell); + $hiddenCells = $hiddenCells.add($insertedHiddenCell); changed = true; - } + } - // remove cells at end when we have too much. + // remove cells at end when we have too much. let $lastHiddenCell = $hiddenCells.last(); let $bottomRowHiddenCells = null; let $getBottomRowHiddenCells = () => { @@ -538,13 +544,13 @@ export class Internal { return Utils.GetPositionAndSizeOfCell($(e)).top === Utils.GetPositionAndSizeOfCell($lastHiddenCell).top; }); return $bottomRowHiddenCells; - }; - + }; + // remove all non-contiguous bottom row cells. while (appendWhilePredicate($hiddenCells, false) && $getBottomRowHiddenCells().filter((i,e) => { return $(e).data(Constants.DATA_VISIBLE_CELL).hasClass(options.nonContiguousPlaceholderCellClass); - }).length === $getBottomRowHiddenCells().length && + }).length === $getBottomRowHiddenCells().length && $getBottomRowHiddenCells().length > 0) { // while all bottom row cells are placeholders. @@ -552,12 +558,12 @@ export class Internal { $hiddenCells = $hiddenCells.not($lastHiddenCell); // update new last hidden cell. - $lastHiddenCell = $hiddenCells.last(); + $lastHiddenCell = $hiddenCells.last(); - $bottomRowHiddenCells = null; // force refilter. + $bottomRowHiddenCells = null; // force refilter. changed = true; - } + } return changed; } @@ -576,8 +582,8 @@ export class Internal { set LastMouseOverCellTarget(value){ this.lastMouseOverCellTarget = value; } - + get CellsArray(){ return this.cellsArray; - } -} \ No newline at end of file + } +} diff --git a/test/compiled/jquery.gridstrap.spec.js b/test/compiled/jquery.gridstrap.spec.js index fbc2a0e..360a9da 100644 --- a/test/compiled/jquery.gridstrap.spec.js +++ b/test/compiled/jquery.gridstrap.spec.js @@ -15,6 +15,7 @@ var _default = { EVENT_DRAGSTART: 'dragstart', EVENT_MOUSEDOWN: 'mousedown', EVENT_MOUSEOVER: 'mouseover', + EVENT_MOUSEOUT: 'mouseout', EVENT_MOUSEMOVE: 'mousemove', EVENT_MOUSEUP: 'mouseup', EVENT_TOUCHSTART: 'touchstart', @@ -266,7 +267,7 @@ function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterat }); QUnit.test('expected defaultOptions', function (assert) { var defaultOptions = $[pluginOptionsName].defaultOptions; - assert.equal(JSON.stringify(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","dragCellHandleSelector":"*","draggable":true,"rearrangeOnDrag":true,"resizeHandleSelector":null,"resizeOnDrag":true,"swapMode":false,"nonContiguousCellHtml":null,"autoPadNonContiguousCells":true,"updateCoordinatesOnWindowResize":true,"debug":false,"dragMouseoverThrottle":150,"windowResizeDebounce":50,"mousemoveDebounce":0}', "default options has changed, breaking change"); + assert.equal(JSON.stringify(defaultOptions), '{"gridCellSelector":">*","hiddenCellClass":"gridstrap-cell-hidden","visibleCellClass":"gridstrap-cell-visible","nonContiguousPlaceholderCellClass":"gridstack-noncontiguous","dragCellClass":"gridstrap-cell-drag","resizeCellClass":"gridstrap-cell-resize","mouseOverCellClass":"gridstrap-cell-mouseover","mouseMoveSelector":"body","visibleCellContainerParentSelector":null,"visibleCellContainerClass":"gridstrap-container","dragCellHandleSelector":"*","draggable":true,"rearrangeOnDrag":true,"resizeHandleSelector":null,"resizeOnDrag":true,"swapMode":false,"nonContiguousCellHtml":null,"autoPadNonContiguousCells":true,"updateCoordinatesOnWindowResize":true,"debug":false,"dragMouseoverThrottle":150,"windowResizeDebounce":50,"mousemoveDebounce":0}', "default options has changed, breaking change"); }); // QUnit.test( "enable custom config", function( assert ) { // $fixture[pluginName]( { // foo: "bar" diff --git a/test/spec/jquery.gridstrap.spec.js b/test/spec/jquery.gridstrap.spec.js index c4db145..0a882d7 100644 --- a/test/spec/jquery.gridstrap.spec.js +++ b/test/spec/jquery.gridstrap.spec.js @@ -4,7 +4,7 @@ import Utils from '../../src/utils'; ( function( $, QUnit ) { "use strict"; - + let $fixture; let pluginName = 'gridstrap'; let pluginDataName = 'gridstrap'; @@ -14,7 +14,7 @@ import Utils from '../../src/utils'; beforeEach: function() { // fixture is the element where your jQuery plugin will act - $fixture = $( "#testGrid" ); + $fixture = $( "#testGrid" ); }, afterEach: function() { @@ -39,7 +39,7 @@ import Utils from '../../src/utils'; QUnit.test( "caches plugin instance", function( assert ) { $fixture[pluginName](); - + assert.ok( $fixture.data( pluginDataName ), "has cached it into a jQuery data" @@ -50,8 +50,8 @@ import Utils from '../../src/utils'; var defaultOptions = $[pluginOptionsName].defaultOptions; assert.equal( JSON.stringify(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","dragCellHandleSelector":"*","draggable":true,"rearrangeOnDrag":true,"resizeHandleSelector":null,"resizeOnDrag":true,"swapMode":false,"nonContiguousCellHtml":null,"autoPadNonContiguousCells":true,"updateCoordinatesOnWindowResize":true,"debug":false,"dragMouseoverThrottle":150,"windowResizeDebounce":50,"mousemoveDebounce":0}', - + '{"gridCellSelector":">*","hiddenCellClass":"gridstrap-cell-hidden","visibleCellClass":"gridstrap-cell-visible","nonContiguousPlaceholderCellClass":"gridstack-noncontiguous","dragCellClass":"gridstrap-cell-drag","resizeCellClass":"gridstrap-cell-resize","mouseOverCellClass":"gridstrap-cell-mouseover","mouseMoveSelector":"body","visibleCellContainerParentSelector":null,"visibleCellContainerClass":"gridstrap-container","dragCellHandleSelector":"*","draggable":true,"rearrangeOnDrag":true,"resizeHandleSelector":null,"resizeOnDrag":true,"swapMode":false,"nonContiguousCellHtml":null,"autoPadNonContiguousCells":true,"updateCoordinatesOnWindowResize":true,"debug":false,"dragMouseoverThrottle":150,"windowResizeDebounce":50,"mousemoveDebounce":0}', + "default options has changed, breaking change" ); });