Skip to content
This repository has been archived by the owner on Feb 4, 2023. It is now read-only.

Commit

Permalink
feat(padding): non-contiguous cells working
Browse files Browse the repository at this point in the history 
3, 5
  • Loading branch information
@rosspi
rosspi committed May 26, 2017
1 parent aa2481e commit b350483
Show file tree
Hide file tree
Showing 17 changed files with 429 additions and 132 deletions.
32 changes: 16 additions & 16 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -81,12 +81,8 @@ $.Gridstrap.defaultOptions = {
resizeHandleSelector: null, // jQuery selector relative to cell for resize handling. Null disables.
resizeOnDrag: true, // toggle mouse resizing.
swapMode: false, // toggle swap or insert mode when rearranging cells.
nonContiguousOptions: { // TODO// TODO// TODO// TODO
selector: null,
getHtml: function () {
return null;
}
},
nonContiguousCellHtml: null, // html to use for non-contiguous placeholder cells.
autoPadNonContiguousCells: true, // toggle adding non-contiguous cells automatically on drag or as otherwise needed.
updateCoordinatesOnWindowResize: true, // enable window resize event handler.
debug: false, // toggle console output.
dragMouseoverThrottle: 500, // throttle cell mouseover events for rearranging.
Expand Down Expand Up @@ -254,6 +250,19 @@ Move a cell within the grid.
Nothing.


#### [.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.

**Params**

* `callback` **{Function}**: Provide a function with two Number parameters, `cellCount` and `nonContiguousCellCount`. Return `true` to append a new non-contiguous cell to the grid. The function will be continuously be called until `false` is returned.

**Returns**

Nothing.


#### [.removeCell](src/methods.js)

Detach an existing cell from the grid and then removes it from the DOM.
Expand Down Expand Up @@ -352,16 +361,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.

#### [noncontiguouschange](src/constants.js)

Triggered when the quantity of non-contiguous placeholder elements change. Can be prevented.

**Event data**
TODO


* `target` **{Element}**: Visible cell being resized.



Expand Down
2 changes: 1 addition & 1 deletion dist/jquery.gridstrap.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,5 +23,5 @@
z-index: 10000;
}
.gridstack-noncontiguous{
opacity: 0.02;
opacity: 0;
}
121 changes: 95 additions & 26 deletions dist/jquery.gridstrap.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,9 +26,9 @@ exports['default'] = {
EVENT_CELL_RESIZE: 'cellresize',
EVENT_CELL_DRAG: 'celldrag',
EVENT_CELL_REDRAW: 'cellredraw',
EVENT_NONCONTIGUOUS_CONTAINER_CHANGE: 'noncontiguouschange',
ERROR_MISSING_JQUERY: 'Requires jQuery v?',
ERROR_INVALID_ATTACH_ELEMENT: 'Cannot attach element that is not a child of gridstrap parent'
ERROR_MISSING_JQUERY: 'Requires jQuery v?', //TODO
ERROR_INVALID_ATTACH_ELEMENT: 'Cannot attach element that is not a child of gridstrap parent.',
ERROR_NONCONTIGUOUS_HTML_UNDEFINED: 'nonContiguousCellHtml option cannot be null.'
};
module.exports = exports['default'];

Expand Down Expand Up @@ -136,7 +136,8 @@ var _methods = require('./methods');
resizeHandleSelector: null, // jQuery selector relative to cell for resize handling. Null disables.
resizeOnDrag: true, // toggle mouse resizing.
swapMode: false, // toggle swap or insert mode when rearranging cells.
nonContiguousCellHtml: null, // enable non-contiguous mode using this html for a placeholder cell.
nonContiguousCellHtml: null, // html to use for non-contiguous placeholder cells.
autoPadNonContiguousCells: true, // toggle adding non-contiguous cells automatically on drag or as needed.
updateCoordinatesOnWindowResize: true, // enable window resize event handler.
debug: false, // toggle console output.
dragMouseoverThrottle: 500, // throttle cell mouseover events for rearranging.
Expand Down Expand Up @@ -286,7 +287,7 @@ var Handlers = (function () {

this.internal.MoveDraggedCell(mouseEvent, $draggedCell);

if (options.nonContiguousCellHtml && options.rearrangeOnDrag) {
if (options.nonContiguousCellHtml && options.rearrangeOnDrag && options.autoPadNonContiguousCells) {
this.internal.UpdateNonContiguousCellsForDrag($draggedCell, mouseEvent);
}
}
Expand Down Expand Up @@ -324,7 +325,8 @@ var Handlers = (function () {
var $draggedCell = this.internal.$GetDraggingCell();
if ($draggedCell.length > 0) {

if (options.nonContiguousCellHtml && !options.rearrangeOnDrag) {
if (options.nonContiguousCellHtml && !options.rearrangeOnDrag && options.autoPadNonContiguousCells) {

this.internal.UpdateNonContiguousCellsForDrag($draggedCell, mouseEvent);

// mouse event may be over a new placeholder cell now.
Expand Down Expand Up @@ -800,21 +802,38 @@ var Internal = (function () {
};

Internal.prototype.UpdateNonContiguousCellsForDrag = function UpdateNonContiguousCellsForDrag($draggedCell, mouseEvent) {
var draggedCellPositionAndSize = _utils.Utils.GetPositionAndSizeOfCell($draggedCell);
var $ = this.setup.jQuery;
var options = this.setup.Options;

var furthestVisibleCellPositionAndSize = _utils.Utils.GetPositionAndSizeOfCell($draggedCell);

var compare = function compare(positionAndSize) {
return positionAndSize.left + positionAndSize.width + (positionAndSize.top + positionAndSize.height) * 100000;
};
var $hiddenCells = this.$GetHiddenCellsInElementOrder();
$hiddenCells.each(function (i, e) {
if (!$(e).data(_constants2['default'].DATA_VISIBLE_CELL).hasClass(options.nonContiguousPlaceholderCellClass)) {
var positionAndSize = _utils.Utils.GetPositionAndSizeOfCell($(e));

if (compare(positionAndSize) > compare(furthestVisibleCellPositionAndSize)) {
furthestVisibleCellPositionAndSize = positionAndSize;
}
}
});

var changed = this.AppendOrRemoveNonContiguousCellsWhile(function ($hiddenCells, appending) {
var lastHiddenCellPositionAndSize = _utils.Utils.GetPositionAndSizeOfCell($hiddenCells.last());

// A whole row of extra cells should exist.
if (appending) {
// if making new placeholder cells, then a whole row of extra cells should exist.
return lastHiddenCellPositionAndSize.top - draggedCellPositionAndSize.top < draggedCellPositionAndSize.height * 2;
// need at least 2* cell height worht of space at bottom of grid.
return lastHiddenCellPositionAndSize.top - furthestVisibleCellPositionAndSize.top < furthestVisibleCellPositionAndSize.height * 2;
} else {
return lastHiddenCellPositionAndSize.top - draggedCellPositionAndSize.top > draggedCellPositionAndSize.height * 2;
return lastHiddenCellPositionAndSize.top - furthestVisibleCellPositionAndSize.top > furthestVisibleCellPositionAndSize.height * 2;
}
});

if (changed) {
// insert/remove triggers a repositioning, so have to set dragged cell to mousepos again.
this.MoveDraggedCell(mouseEvent, $draggedCell);
}
};
Expand All @@ -824,18 +843,9 @@ var Internal = (function () {
var options = this.setup.Options;
var context = this.setup.Context;

var $hiddenCells = this.$GetHiddenCellsInElementOrder();
var changed = false;

// remove cells at end when we have too much.
var $lastHiddenCell = $hiddenCells.last();
var $bottomRowHiddenCells = null;
var $getBottomRowHiddenCells = function $getBottomRowHiddenCells() {
$bottomRowHiddenCells = $bottomRowHiddenCells || $hiddenCells.filter(function (i, e) {
return _utils.Utils.GetPositionAndSizeOfCell($(e)).top === _utils.Utils.GetPositionAndSizeOfCell($lastHiddenCell).top;
});
return $bottomRowHiddenCells;
};
var $hiddenCells = this.$GetHiddenCellsInElementOrder();

while (appendWhilePredicate($hiddenCells, true)) {
// if mouse beyond or getting near end of static hidden element, then make some placeholder ones.
Expand All @@ -849,9 +859,21 @@ var Internal = (function () {
changed = true;
}

// remove cells at end when we have too much.
var $lastHiddenCell = $hiddenCells.last();
var $bottomRowHiddenCells = null;
var $getBottomRowHiddenCells = function $getBottomRowHiddenCells() {
$bottomRowHiddenCells = $bottomRowHiddenCells || $hiddenCells.filter(function (i, e) {
return _utils.Utils.GetPositionAndSizeOfCell($(e)).top === _utils.Utils.GetPositionAndSizeOfCell($lastHiddenCell).top;
});
return $bottomRowHiddenCells;
};

// remove all non-contiguous bottom row cells.
while (appendWhilePredicate($hiddenCells, false) && $getBottomRowHiddenCells().filter(function (i, e) {
return $(e).data(_constants2['default'].DATA_VISIBLE_CELL).hasClass(options.nonContiguousPlaceholderCellClass);
}).length === $getBottomRowHiddenCells().length) {
}).length === $getBottomRowHiddenCells().length && $getBottomRowHiddenCells().length > 0) {
// while all bottom row cells are placeholders.

context.removeCell($lastHiddenCell.data(_constants2['default'].DATA_VISIBLE_CELL));
$hiddenCells = $hiddenCells.not($lastHiddenCell);
Expand Down Expand Up @@ -991,13 +1013,30 @@ var Methods = (function () {

Methods.prototype.insertCell = function insertCell(cellHtml, index) {
var $ = this.setup.jQuery;
var options = this.setup.Options;
var $element = this.setup.$Element;

var $existingHiddenCells = this.internal.$GetHiddenCellsInElementOrder();
if (typeof index === 'undefined') {
index = $existingHiddenCells.length; // insert at end.
}

if (index > $existingHiddenCells.length && options.nonContiguousCellHtml && options.autoPadNonContiguousCells) {

this.internal.AppendOrRemoveNonContiguousCellsWhile(function ($hiddenCells, appending) {

if (!appending) {
// do not remove when trying to remove.
return false;
}
// insert placeholders until quantity of cells is index -1.
return $hiddenCells.length < index;
});

// update these.
$existingHiddenCells = this.internal.$GetHiddenCellsInElementOrder();
}

var $insertedCell;
if (index === $existingHiddenCells.length) {
if ($existingHiddenCells.length === 0) {
Expand Down Expand Up @@ -1070,12 +1109,29 @@ var Methods = (function () {

Methods.prototype.moveCell = function moveCell(element, toIndex, targetGridstrap) {
// targetGridstrap optional..
var options = this.setup.Options;
var context = this.setup.Context;

var cellNIndex = this.internal.GetCellAndInternalIndex(element);

var $existingVisibleCells = this.$getCells();

if (toIndex > $existingVisibleCells.length && options.nonContiguousCellHtml && options.autoPadNonContiguousCells) {

this.internal.AppendOrRemoveNonContiguousCellsWhile(function ($hiddenCells, appending) {

if (!appending) {
// do not remove when trying to remove.
return false;
}
// insert placeholders until quantity of cells is index -1.
return $hiddenCells.length <= toIndex;
});

// update these.
$existingVisibleCells = this.$getCells();
}

var cellNIndex = this.internal.GetCellAndInternalIndex(element);

this.internal.MoveCell(cellNIndex.$cell, $existingVisibleCells.eq(toIndex), targetGridstrap || context);
};

Expand Down Expand Up @@ -1198,12 +1254,25 @@ var Methods = (function () {
var $ = this.setup.jQuery;
var options = this.setup.Options;

if (!options.nonContiguousCellHtml) {
throw new Error(_constants2['default'].ERROR_NONCONTIGUOUS_HTML_UNDEFINED);
}

var $attachedHiddenCells = this.internal.$GetHiddenCellsInElementOrder();

this.internal.AppendOrRemoveNonContiguousCellsWhile(function ($hiddenCells, appending) {
return callback($hiddenCells.length, $hiddenCells.filter(function (i, e) {

if (!appending) {
// do not remove, when trying to remove.
// only append/pad.
return false;
}
var cellCount = $hiddenCells.length;
var placeHolderCount = $hiddenCells.filter(function (i, e) {
return $(e).data(_constants2['default'].DATA_VISIBLE_CELL).hasClass(options.nonContiguousPlaceholderCellClass);
}).length, appending);
}).length;

return callback(cellCount, placeHolderCount);
});
};

Expand Down
2 changes: 1 addition & 1 deletion dist/jquery.gridstrap.min.js
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/jquery.gridstrap.min.js.map
View file

Large diffs are not rendered by default.

41 changes: 41 additions & 0 deletions docs/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -181,6 +181,47 @@ <h1 id="header-1"><a href="#header-1"></a>Demo</h1>
<div role="tabpanel" class="tab-pane" id="noncontiguous-demo">
<div id="noncontiguous-grid">
</div>
<div class="row">
<div class="col-xs-12">
<pre><code class="language-javascript">&lt;div id="noncontiguous-grid"&gt;
&lt;div class="col-xs-4 col-sm-2 col-md-1 cell"&gt;&lt;div class="inner"&gt;&lt;/div&gt;&lt;/div&gt;
&lt;div class="col-xs-4 col-sm-2 col-md-1 cell"&gt;&lt;div class="inner"&gt;&lt;/div&gt;&lt;/div&gt;
...
&lt;/div&gt;

&lt;script&gt;
$('#noncontiguous-grid').gridstrap({
nonContiguousCellHtml: '&lt;div class="col-xs-4 col-sm-2 col-md-1 cell"&gt;&lt;div class="inner"&gt;&lt;/div&gt;&lt;/div&gt;',
swapMode: true,
rearrangeOnDrag: false,
autoPadNonContiguousCells: false // We will explicitly init non-contiguous cells below.
});

var ncg = $('#noncontiguous-grid').data('gridstrap');
var $cells = ncg.$getCells();
var finalCellCount = 5 * 12; // 5 rows

// Create non-contiguous cells until the condition is met.
ncg.padWithNonContiguousCells(function(cellCount, nonContiguousCellCount) {
return cellCount &lt; finalCellCount;
});

var moveRandomCell = function(){
var $cellToMove = $cells.eq(Math.floor(Math.random() * $cells.length));
var moveToIndex = Math.floor(Math.random() * finalCellCount);

ncg.moveCell($cellToMove, moveToIndex);
};

// Move some cells around to demonstrate effect.
moveRandomCell();
moveRandomCell();
moveRandomCell();
moveRandomCell();
moveRandomCell();
&lt;/script&gt;</code></pre>
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="dual-demo">
<div class="row">
Expand Down
41 changes: 41 additions & 0 deletions docs/indexLocal.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -181,6 +181,47 @@ <h1 id="header-1"><a href="#header-1"></a>Demo</h1>
<div role="tabpanel" class="tab-pane" id="noncontiguous-demo">
<div id="noncontiguous-grid">
</div>
<div class="row">
<div class="col-xs-12">
<pre><code class="language-javascript">&lt;div id="noncontiguous-grid"&gt;
&lt;div class="col-xs-4 col-sm-2 col-md-1 cell"&gt;&lt;div class="inner"&gt;&lt;/div&gt;&lt;/div&gt;
&lt;div class="col-xs-4 col-sm-2 col-md-1 cell"&gt;&lt;div class="inner"&gt;&lt;/div&gt;&lt;/div&gt;
...
&lt;/div&gt;

&lt;script&gt;
$('#noncontiguous-grid').gridstrap({
nonContiguousCellHtml: '&lt;div class="col-xs-4 col-sm-2 col-md-1 cell"&gt;&lt;div class="inner"&gt;&lt;/div&gt;&lt;/div&gt;',
swapMode: true,
rearrangeOnDrag: false,
autoPadNonContiguousCells: false // We will explicitly init non-contiguous cells below.
});

var ncg = $('#noncontiguous-grid').data('gridstrap');
var $cells = ncg.$getCells();
var finalCellCount = 5 * 12; // 5 rows

// Create non-contiguous cells until the condition is met.
ncg.padWithNonContiguousCells(function(cellCount, nonContiguousCellCount) {
return cellCount &lt; finalCellCount;
});

var moveRandomCell = function(){
var $cellToMove = $cells.eq(Math.floor(Math.random() * $cells.length));
var moveToIndex = Math.floor(Math.random() * finalCellCount);

ncg.moveCell($cellToMove, moveToIndex);
};

// Move some cells around to demonstrate effect.
moveRandomCell();
moveRandomCell();
moveRandomCell();
moveRandomCell();
moveRandomCell();
&lt;/script&gt;</code></pre>
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="dual-demo">
<div class="row">
Expand Down
Loading

0 comments on commit b350483

Please sign in to comment.