diff --git a/Gruntfile.js b/Gruntfile.js index 7494349..9cd63cc 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -11,6 +11,7 @@ banner: "/*\n" + " * <%= pkg.title || pkg.name %> - v{{ include-version }}\n" + " * <%= pkg.description %>\n" + + " * <%= pkg.message %>\n" + " * <%= pkg.homepage %>\n" + " *\n" + " * Made by <%= pkg.author.name %>\n" + @@ -25,10 +26,10 @@ }, dist: { files: { - "dist/jquery.gridstrap.js": ["dist/jquery.gridstrap.js"], "docs/jquery.gridstrap.js": ["dist/jquery.gridstrap.js"], - "dist/jquery.gridstrap.css": ["src/style.css"], + "dist/jquery.gridstrap.js": ["dist/jquery.gridstrap.js"], "docs/jquery.gridstrap.css": ["src/style.css"], + "dist/jquery.gridstrap.css": ["src/style.css"], "dist/jquery.gridstrap.min.css": ["dist/jquery.gridstrap.min.css"], } } @@ -62,10 +63,9 @@ // karma test runner karma: { unit: { - configFile: "karma.conf.js", - background: true, + configFile: "karma.conf.js", singleRun: false, - browsers: [ "PhantomJS", "Firefox" ] + browsers: [ "PhantomJS" ] }, //continuous integration mode: run tests once in PhantomJS browser. @@ -107,6 +107,10 @@ replacements: [{ pattern: /"http:\/\//ig, replacement: '"//' + }, + { + pattern: /responsiveLocal/ig, + replacement: 'responsive' }] } } diff --git a/README.md b/README.md index 525508e..10d3632 100644 --- a/README.md +++ b/README.md @@ -6,9 +6,11 @@ ![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. +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 -[https://rosspi.github.io/gridstrap.js/](https://rosspi.github.io/gridstrap.js/) +[https://rosspi.github.io/gridstrap.js/](https://rosspi.github.io/gridstrap.js/){:target="_blank"} @@ -18,7 +20,7 @@ gridstrap.js is a jQuery plugin designed to take [Bootstrap's CSS grid system](h 1. Include jQuery: ```html - + ``` 2. Include plugin's code: @@ -50,7 +52,7 @@ gridstrap.js is a jQuery plugin designed to take [Bootstrap's CSS grid system](h **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) + [![NPM version](https://img.shields.io/npm/v/jquery.gridstrap.svg)](https://www.npmjs.com/package/jquery.gridstrap){:target="_blank"} ```bash $ npm install jquery.gridstrap @@ -380,7 +382,7 @@ When gridstrap is initialised on a element, its child elements will become 'cell As the aim of the extension was to easily enable draggable bootstrap grids, making them resizable doesn't really fit the Bootstrap grid design. However they will behave as expected upon resizing them. To make the cells resizable to always fit within Bootstrap's grid system, check out the example at https://rosspi.github.io/gridstrap.js/ . ### Non-contiguous -Non-contiguous mode allows the ability to move cells to anywhere within the grid area, rather than just in place of existing cells. It can create the illusion of there being no backing static/relative grid like there is with Bootstrap's grid system. The way the plugin pulls this off is by appended new cells on the fly as needed upon dragging or performing cell operations beyond the existing cell count, and applying the `nonContiguousPlaceholderCellClass` class to them to set their opacity to 0 by default. Once created, the placeholder cells can serve as hidden cells for other regular hidden cells to move around. This implementation will not work well with cells that are of a different size. But of course, this extension will work with any kind of html layout. +Non-contiguous mode grants the ability to move cells to anywhere within the grid area, rather than just in place of existing cells. It can create the illusion of there being no backing static/relative grid like there is with Bootstrap's grid system. The way this is pulled off is by appended new cells on the fly as needed upon dragging or performing cell operations beyond the existing cell count, and applying the `nonContiguousPlaceholderCellClass` class to them to set their opacity to 0 by default. Once created, the placeholder cells can serve as hidden cells for other regular hidden cells to move around. This implementation will not work well with cells that are of a different size. But of course, this extension will work with any kind of html layout. ## History @@ -390,5 +392,3 @@ Check [Releases](https://github.com/rosspi/gridstrap.js/releases) for detailed c ## License [MIT License](http://mit-license.org/) © Ross P - -The way non-contiguous mode works is by appending (or removing as needed) placeholder cells to the end of the cell container. These placeholders therefore act dynamically so that the quantity of cells within the grid will be sufficient for whatever is required as if they were 'real' cells. However, because.. somethign about misbehaving with things moving between cells. diff --git a/dist/jquery.gridstrap.css b/dist/jquery.gridstrap.css index e2bb77e..d560875 100644 --- a/dist/jquery.gridstrap.css +++ b/dist/jquery.gridstrap.css @@ -1,6 +1,7 @@ /* * jquery.gridstrap - v{{ include-version }} - * gridstrap.js https://www.npmjs.com/package/jquery.gridstrap + * gridstrap.js + * Use https://www.npmjs.com/package/jquery.gridstrap for version information, semantically-released. * https://rosspi.github.io/gridstrap.js/ * * Made by Ross P diff --git a/dist/jquery.gridstrap.js b/dist/jquery.gridstrap.js index 4b0a84c..134a96b 100644 --- a/dist/jquery.gridstrap.js +++ b/dist/jquery.gridstrap.js @@ -1,6 +1,7 @@ /* * jquery.gridstrap - v{{ include-version }} - * gridstrap.js https://www.npmjs.com/package/jquery.gridstrap + * gridstrap.js + * Use https://www.npmjs.com/package/jquery.gridstrap for version information, semantically-released. * https://rosspi.github.io/gridstrap.js/ * * Made by Ross P @@ -260,7 +261,8 @@ var Handlers = (function () { _this.internal.MoveCell($draggedCell, $cell, gridstrapContext); // reset dragged object to mouse pos, not pos of hidden cells. - _this.internal.MoveDraggedCell(mouseEvent, $draggedCell); + // do not trigger overlapping now. + _this.internal.MoveDraggedCell(mouseEvent, $draggedCell, true); } }, options.dragMouseoverThrottle); } @@ -546,7 +548,7 @@ var Internal = (function () { return element; }; - Internal.prototype.MoveDraggedCell = function MoveDraggedCell(mouseEvent, $cell) { + Internal.prototype.MoveDraggedCell = function MoveDraggedCell(mouseEvent, $cell, dontLookForOverlappedCell /*optional*/) { var $ = this.setup.jQuery; var context = this.setup.Context; var options = this.setup.Options; @@ -571,6 +573,10 @@ var Internal = (function () { $cell.css('left', absoluteOffset.left); $cell.css('top', absoluteOffset.top); + if (dontLookForOverlappedCell) { + return; + } + var triggerMouseOverEvent = function triggerMouseOverEvent($element) { $element.trigger($.Event(_constants2['default'].EVENT_MOUSEOVER, { pageX: mouseEvent.pageX, @@ -1014,6 +1020,8 @@ var Methods = (function () { var context = this.setup.Context; var options = this.setup.Options; + var $draggedCell = this.internal.$GetDraggingCell(); + for (var i = 0; i < this.internal.CellsArray.length; i++) { var $this = this.internal.CellsArray[i]; @@ -1023,15 +1031,16 @@ var Methods = (function () { this.setCellAbsolutePositionAndSize($this, positionNSizeOfHiddenClone); } + // need to also update the first child gristrap - one that might exist within this one - it is then obviously recursive. for (var i = 0; i < this.internal.CellsArray.length; i++) { var $nestedGridstrap = this.internal.CellsArray[i].find('*').filter(function () { return !!$(this).data(_constants2['default'].DATA_GRIDSTRAP); }); - if ($nestedGridstrap.length) { - $nestedGridstrap.first().data(_constants2['default'].DATA_GRIDSTRAP).updateVisibleCellCoordinates(); - } + $nestedGridstrap.each(function () { + $(this).data(_constants2['default'].DATA_GRIDSTRAP).updateVisibleCellCoordinates(); + }); } }; diff --git a/dist/jquery.gridstrap.min.css b/dist/jquery.gridstrap.min.css index 33bd892..0aafc59 100644 --- a/dist/jquery.gridstrap.min.css +++ b/dist/jquery.gridstrap.min.css @@ -1,6 +1,7 @@ /* * jquery.gridstrap - v{{ include-version }} - * gridstrap.js https://www.npmjs.com/package/jquery.gridstrap + * gridstrap.js + * Use https://www.npmjs.com/package/jquery.gridstrap for version information, semantically-released. * https://rosspi.github.io/gridstrap.js/ * * Made by Ross P diff --git a/dist/jquery.gridstrap.min.js b/dist/jquery.gridstrap.min.js index 38426b2..6bacb25 100644 --- a/dist/jquery.gridstrap.min.js +++ b/dist/jquery.gridstrap.min.js @@ -1,11 +1,12 @@ /* * jquery.gridstrap - v{{ include-version }} - * gridstrap.js https://www.npmjs.com/package/jquery.gridstrap + * gridstrap.js + * Use https://www.npmjs.com/package/jquery.gridstrap for version information, semantically-released. * https://rosspi.github.io/gridstrap.js/ * * Made by Ross P * 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: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();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,!0))},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,this.internal.$GetDraggingCell(),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();c @@ -23,17 +22,19 @@ -
+

gridstrap.js

- View on GitHub + View on GitHub
-

gridstrap.js is a jQuery plugin designed to take Bootstrap's responsive grid system 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.

+

gridstrap.js is a jQuery plugin designed to take Bootstrap's responsive grid system 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 interfaces.

+

Both gridster.js and gridstack.js inspired this plugin.

Demo

@@ -144,7 +145,7 @@

Demo

resizeHandleSelector: '.resize' }); // The above is all you need to do to enable resizing. - // The below shows how we can maintain Bootstrap's + // However, the below shows how we can maintain Bootstrap's // grid functionality. var gs = $('#resize-grid').data('gridstrap'); $('#resize-grid').on('cellresize', function (e) { @@ -303,9 +304,11 @@

Demo

+
+ -
+
@@ -313,13 +316,9 @@

Demo

+
-
- - + diff --git a/docs/indexLocal.html b/docs/indexLocal.html index ac9b334..e900fb9 100644 --- a/docs/indexLocal.html +++ b/docs/indexLocal.html @@ -1,4 +1,3 @@ - @@ -23,17 +22,19 @@ -
+

gridstrap.js

- View on GitHub + View on GitHub
-

gridstrap.js is a jQuery plugin designed to take Bootstrap's responsive grid system 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.

+

gridstrap.js is a jQuery plugin designed to take Bootstrap's responsive grid system 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 interfaces.

+

Both gridster.js and gridstack.js inspired this plugin.

Demo

@@ -85,7 +86,7 @@

Demo

-
@@ -144,7 +145,7 @@

Demo

resizeHandleSelector: '.resize' }); // The above is all you need to do to enable resizing. - // The below shows how we can maintain Bootstrap's + // However, the below shows how we can maintain Bootstrap's // grid functionality. var gs = $('#resize-grid').data('gridstrap'); $('#resize-grid').on('cellresize', function (e) { @@ -303,9 +304,11 @@

Demo

+
+ -
+
@@ -313,13 +316,9 @@

Demo

+
-
- - + diff --git a/docs/indexstyle.css b/docs/indexstyle.css index e42e57d..ec94ac8 100644 --- a/docs/indexstyle.css +++ b/docs/indexstyle.css @@ -262,7 +262,7 @@ body { padding: 0; margin: 0; font-family: "Open Sans", "Helvetica Neue", Helvet a { color: #1e6bb8; text-decoration: none; } a:hover { text-decoration: underline; } -.btn-top { display: inline-block; margin-bottom: 1rem; color: rgba(255, 255, 255, 0.7); background-color: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.2); border-style: solid; border-width: 1px; border-radius: 0.3rem; transition: color 0.2s, background-color 0.2s, border-color 0.2s; } +.btn-top { display: inline-block; color: rgba(255, 255, 255, 0.7); background-color: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.2); border-style: solid; border-width: 1px; border-radius: 0.3rem; transition: color 0.2s, background-color 0.2s, border-color 0.2s; } .btn-top:hover { color: rgba(255, 255, 255, 0.8); text-decoration: none; background-color: rgba(255, 255, 255, 0.2); border-color: rgba(255, 255, 255, 0.3); } .btn-top + .btn-top { margin-left: 1rem; } @media screen and (min-width: 64em) { .btn-top { padding: 0.75rem 1rem; } } @@ -270,7 +270,7 @@ a:hover { text-decoration: underline; } @media screen and (max-width: 42em) { .btn-top { display: block; width: 100%; padding: 0.75rem; font-size: 0.9rem; } .btn-top + .btn-top { margin-top: 1rem; margin-left: 0; } } -.page-header { +.header-bg { color: #cdbfe3; @@ -327,7 +327,12 @@ margin:0px; .main-content dl dd { padding: 0; margin-bottom: 1rem; } .main-content hr { height: 2px; padding: 0; margin: 1rem 0; background-color: #eff0f1; border: 0; } -.site-footer { padding-top: 2rem; margin-top: 2rem; border-top: solid 1px #eff0f1; } +.site-footer { padding-top: 2rem; margin-top: 2rem; border-top: solid 1px #eff0f1; + + color: #99979c; + text-align: center; + background-color: #2a2730; + } @media screen and (min-width: 64em) { .site-footer { font-size: 1rem; } } @media screen and (min-width: 42em) and (max-width: 64em) { .site-footer { font-size: 1rem; } } @media screen and (max-width: 42em) { .site-footer { font-size: 0.9rem; } } diff --git a/docs/jquery.gridstrap.css b/docs/jquery.gridstrap.css index e2bb77e..d560875 100644 --- a/docs/jquery.gridstrap.css +++ b/docs/jquery.gridstrap.css @@ -1,6 +1,7 @@ /* * jquery.gridstrap - v{{ include-version }} - * gridstrap.js https://www.npmjs.com/package/jquery.gridstrap + * gridstrap.js + * Use https://www.npmjs.com/package/jquery.gridstrap for version information, semantically-released. * https://rosspi.github.io/gridstrap.js/ * * Made by Ross P diff --git a/docs/jquery.gridstrap.js b/docs/jquery.gridstrap.js index e5f6b46..134a96b 100644 --- a/docs/jquery.gridstrap.js +++ b/docs/jquery.gridstrap.js @@ -1,14 +1,7 @@ /* * jquery.gridstrap - v{{ include-version }} - * gridstrap.js https://www.npmjs.com/package/jquery.gridstrap - * https://rosspi.github.io/gridstrap.js/ - * - * Made by Ross P - * Under MIT License - */ -/* - * jquery.gridstrap - v{{ include-version }} - * gridstrap.js https://www.npmjs.com/package/jquery.gridstrap + * gridstrap.js + * Use https://www.npmjs.com/package/jquery.gridstrap for version information, semantically-released. * https://rosspi.github.io/gridstrap.js/ * * Made by Ross P @@ -268,7 +261,8 @@ var Handlers = (function () { _this.internal.MoveCell($draggedCell, $cell, gridstrapContext); // reset dragged object to mouse pos, not pos of hidden cells. - _this.internal.MoveDraggedCell(mouseEvent, $draggedCell); + // do not trigger overlapping now. + _this.internal.MoveDraggedCell(mouseEvent, $draggedCell, true); } }, options.dragMouseoverThrottle); } @@ -554,7 +548,7 @@ var Internal = (function () { return element; }; - Internal.prototype.MoveDraggedCell = function MoveDraggedCell(mouseEvent, $cell) { + Internal.prototype.MoveDraggedCell = function MoveDraggedCell(mouseEvent, $cell, dontLookForOverlappedCell /*optional*/) { var $ = this.setup.jQuery; var context = this.setup.Context; var options = this.setup.Options; @@ -579,6 +573,10 @@ var Internal = (function () { $cell.css('left', absoluteOffset.left); $cell.css('top', absoluteOffset.top); + if (dontLookForOverlappedCell) { + return; + } + var triggerMouseOverEvent = function triggerMouseOverEvent($element) { $element.trigger($.Event(_constants2['default'].EVENT_MOUSEOVER, { pageX: mouseEvent.pageX, @@ -1022,6 +1020,8 @@ var Methods = (function () { var context = this.setup.Context; var options = this.setup.Options; + var $draggedCell = this.internal.$GetDraggingCell(); + for (var i = 0; i < this.internal.CellsArray.length; i++) { var $this = this.internal.CellsArray[i]; @@ -1031,15 +1031,16 @@ var Methods = (function () { this.setCellAbsolutePositionAndSize($this, positionNSizeOfHiddenClone); } + // need to also update the first child gristrap - one that might exist within this one - it is then obviously recursive. for (var i = 0; i < this.internal.CellsArray.length; i++) { var $nestedGridstrap = this.internal.CellsArray[i].find('*').filter(function () { return !!$(this).data(_constants2['default'].DATA_GRIDSTRAP); }); - if ($nestedGridstrap.length) { - $nestedGridstrap.first().data(_constants2['default'].DATA_GRIDSTRAP).updateVisibleCellCoordinates(); - } + $nestedGridstrap.each(function () { + $(this).data(_constants2['default'].DATA_GRIDSTRAP).updateVisibleCellCoordinates(); + }); } }; diff --git a/docs/responsive.html b/docs/responsive.html index 321b0f7..67b34b4 100644 --- a/docs/responsive.html +++ b/docs/responsive.html @@ -24,10 +24,7 @@
- + diff --git a/docs/responsiveLocal.html b/docs/responsiveLocal.html index d744639..fbaff22 100644 --- a/docs/responsiveLocal.html +++ b/docs/responsiveLocal.html @@ -24,10 +24,7 @@
- + diff --git a/karma.conf.js b/karma.conf.js index 3db5932..bc33562 100644 --- a/karma.conf.js +++ b/karma.conf.js @@ -2,10 +2,42 @@ module.exports = function( config ) { config.set( { files: [ - "node_modules/jquery/dist/jquery.js", - "dist/jquery.gridstrap.min.js", - "test/setup.js", - "test/compiled/*" + { + pattern: "node_modules/jquery/dist/jquery.js", + served: true, + included: true, + watched: true + }, + { + pattern: "dist/jquery.gridstrap.min.js", + served: true, + included: true, + watched: true + }, + { + pattern: "test/setup.js", + served: true, + included: true, + watched: true + }, + { + pattern: "test/compiled/*", + served: true, + included: true, + watched: true + }, + { + pattern: "src/*.js", + served: false, + included: false, + watched: true + }, + { + pattern: "test/spec/*", + served: false, + included: false, + watched: true + } ], frameworks: [ "qunit" ], autoWatch: true diff --git a/package.json b/package.json index fbdd4bb..5eca8e4 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,8 @@ { "name": "jquery.gridstrap", "version": "0.0.0-semantically-released", - "description": "gridstrap.js https://www.npmjs.com/package/jquery.gridstrap", + "description": "gridstrap.js", + "message": "Use https://www.npmjs.com/package/jquery.gridstrap for version information, semantically-released.", "keywords": [ "gridster", "gridstrap", @@ -10,9 +11,12 @@ "jquery-plugin", "jquery", "jquery plugin", - "plugins" + "plugins", + "drag", + "drop", + "draggable" ], - "main": "dist/jquery-gridstrap.js", + "main": "dist/jquery.gridstrap.js", "repository": { "type": "git", "url": "https://github.com/rosspi/gridstrap.js.git" @@ -35,7 +39,7 @@ ], "license": "MIT", "dependencies": { - "jquery": ">=1.5.1" + "jquery": ">=1.9.1 < 4.0.0" }, "devDependencies": { "babel-core": "^6.24.1", @@ -59,7 +63,8 @@ "karma-qunit": "^1.2.1", "phantomjs": "^1.9.18", "qunitjs": "^1.19.0", - "semantic-release": "^6.3.6" + "semantic-release": "^6.3.6", + "jquery": ">=1.9.1 < 4.0.0" }, "scripts": { "commit": "git-cz", diff --git a/src/handlers.js b/src/handlers.js index 6391a0f..fd7072d 100644 --- a/src/handlers.js +++ b/src/handlers.js @@ -92,7 +92,8 @@ export class Handlers { this.internal.MoveCell($draggedCell, $cell, gridstrapContext); // reset dragged object to mouse pos, not pos of hidden cells. - this.internal.MoveDraggedCell(mouseEvent, $draggedCell); + // do not trigger overlapping now. + this.internal.MoveDraggedCell(mouseEvent, $draggedCell, true); } }, options.dragMouseoverThrottle); } diff --git a/src/internal.js b/src/internal.js index b7af105..36d27e6 100644 --- a/src/internal.js +++ b/src/internal.js @@ -183,7 +183,7 @@ export class Internal { return element; } - MoveDraggedCell (mouseEvent, $cell) { + MoveDraggedCell (mouseEvent, $cell, dontLookForOverlappedCell /*optional*/) { let $ = this.setup.jQuery; let context = this.setup.Context; let options = this.setup.Options; @@ -208,6 +208,10 @@ export class Internal { $cell.css('left', absoluteOffset.left); $cell.css('top', absoluteOffset.top); + if (dontLookForOverlappedCell){ + return; + } + let triggerMouseOverEvent = function ($element) { $element.trigger( $.Event(Constants.EVENT_MOUSEOVER, { diff --git a/src/methods.js b/src/methods.js index f7ad02d..9611e4b 100644 --- a/src/methods.js +++ b/src/methods.js @@ -55,27 +55,30 @@ export class Methods { let context = this.setup.Context; let options = this.setup.Options; + + let $draggedCell = this.internal.$GetDraggingCell(); + for (var i = 0; i < this.internal.CellsArray.length; i++) { - let $this = this.internal.CellsArray[i]; + let $this = this.internal.CellsArray[i]; let $hiddenClone = $this.data(Constants.DATA_HIDDEN_CELL); let positionNSizeOfHiddenClone = Utils.GetPositionAndSizeOfCell($hiddenClone); - this.setCellAbsolutePositionAndSize($this, positionNSizeOfHiddenClone); + this.setCellAbsolutePositionAndSize($this, positionNSizeOfHiddenClone); } + // need to also update the first child gristrap - one that might exist within this one - it is then obviously recursive. for (var i = 0; i < this.internal.CellsArray.length; i++) { var $nestedGridstrap = this.internal.CellsArray[i].find('*').filter(function () { return !!$(this).data(Constants.DATA_GRIDSTRAP); }); - if ($nestedGridstrap.length) { - $nestedGridstrap.first().data(Constants.DATA_GRIDSTRAP).updateVisibleCellCoordinates(); - } + $nestedGridstrap.each(function(){ + $(this).data(Constants.DATA_GRIDSTRAP).updateVisibleCellCoordinates(); + }); } - } - + } // returns jquery object of new cell. // index is optional. diff --git a/src/setup.js b/src/setup.js index 7eb2476..b519432 100644 --- a/src/setup.js +++ b/src/setup.js @@ -12,7 +12,7 @@ export class Setup { let wrapperGeneratedId = 'gridstrap-' + this.idPrefix; this.visibleCellContainerSelector = '#' + wrapperGeneratedId; - // drag selector must be within wrapper div. Turn class name/list into selector. + // drag selector must be within wrapper div. Turn class name/list into selector. this.dragCellSelector = this.visibleCellContainerSelector + ' ' + Utils.ConvertCssClassToJQuerySelector(options.dragCellClass) + ':first'; this.resizeCellSelector = this.visibleCellContainerSelector + ' ' + Utils.ConvertCssClassToJQuerySelector(options.resizeCellClass) + ':first'; // visibleCellContainerClassSelector just contains a .class selector, dont prfix with id. Important. Refactor this. diff --git a/test/compiled/jquery.gridstrap.spec.js b/test/compiled/jquery.gridstrap.spec.js index 6a47500..a21f7fe 100644 --- a/test/compiled/jquery.gridstrap.spec.js +++ b/test/compiled/jquery.gridstrap.spec.js @@ -209,9 +209,9 @@ var Utils = (function () { exports.Utils = Utils; },{"./constants":1}],3:[function(require,module,exports){ -"use strict"; +'use strict'; -function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; } +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } var _srcUtils = require('../../src/utils'); @@ -221,22 +221,22 @@ var _srcUtils2 = _interopRequireDefault(_srcUtils); "use strict"; - var $testCanvas = $("#testCanvas"); - var $fixture = null; + var $fixture = undefined; var pluginName = 'gridstrap'; var pluginDataName = 'gridstrap'; + var pluginOptionsName = 'Gridstrap'; QUnit.module("jQuery Gridstrap", { beforeEach: function beforeEach() { // fixture is the element where your jQuery plugin will act - $fixture = $("
"); - - $testCanvas.append($fixture); + $fixture = $("#testGrid"); }, afterEach: function afterEach() { // we remove the element to reset our plugin job :) + }, + after: function after() { $fixture.remove(); } }); @@ -252,9 +252,16 @@ var _srcUtils2 = _interopRequireDefault(_srcUtils); QUnit.test("caches plugin instance", function (assert) { $fixture[pluginName](); + assert.ok($fixture.data(pluginDataName), "has cached it into a jQuery data"); }); + 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"); + }); + // QUnit.test( "enable custom config", function( assert ) { // $fixture[pluginName]( { // foo: "bar" diff --git a/test/setup.js b/test/setup.js index 67a5529..2485af4 100644 --- a/test/setup.js +++ b/test/setup.js @@ -2,10 +2,15 @@ "use strict"; - // create an element to run tests inside - var $testCanvas = $( "
" ); + var cellCount = 5*12; - $( "body" ).prepend( $testCanvas ); + // create an element to run tests inside + var $testGrid = $('
'); + + for (var i = 0 ; i < cellCount; i++){ + $testGrid.append('
'); + } + $( "body" ).prepend( $testGrid ); }( jQuery ) ); diff --git a/test/spec/jquery.gridstrap.spec.js b/test/spec/jquery.gridstrap.spec.js index 30206da..13e306f 100644 --- a/test/spec/jquery.gridstrap.spec.js +++ b/test/spec/jquery.gridstrap.spec.js @@ -4,23 +4,23 @@ import Utils from '../../src/utils'; ( function( $, QUnit ) { "use strict"; - - var $testCanvas = $( "#testCanvas" ); - var $fixture = null; + + let $fixture; let pluginName = 'gridstrap'; let pluginDataName = 'gridstrap'; + let pluginOptionsName = 'Gridstrap'; QUnit.module( "jQuery Gridstrap", { beforeEach: function() { // fixture is the element where your jQuery plugin will act - $fixture = $( "
" ); - - $testCanvas.append( $fixture ); + $fixture = $( "#testGrid" ); }, afterEach: function() { // we remove the element to reset our plugin job :) + }, + after: function(){ $fixture.remove(); } } ); @@ -39,11 +39,23 @@ 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" ); - } ); + }); + + 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" + ); + }); // QUnit.test( "enable custom config", function( assert ) { // $fixture[pluginName]( {