Commit 9b3a9303 authored by Cecilia Vela Gurovic's avatar Cecilia Vela Gurovic

Bug 1813987: gridstack resizing fixes

- manual block resize: round value to closest column/row
- set min height for a block so automatic resize won't make
a block smaller than the height the user selected on view edit
- no float grid: save the new position of all blocks
when gridstack moves them to fill empty spaces
- no need to consider the horizontal margin when
setting the column number for a block
- don't set min-height for collapsible blocks on display

behatnotneeded
Change-Id: I4a890a83ed76df523a2904a9776cf7f1076d3cb2
parent 65c463e5
......@@ -36,6 +36,7 @@ function loadGridTranslate(grid, blocks) {
updateTranslatedGridRows(blocks);
gridInit();
$.each(gridElements, function(index, el) {
el.on('resizestart', resizeStartBlock);
el.on('resizestop', resizeStopBlock);
});
initJs();
......@@ -43,12 +44,16 @@ function loadGridTranslate(grid, blocks) {
}
function loadGrid(grid, blocks) {
var minWidth = grid.opts.minCellColumns;
var minWidth = grid.opts.minCellColumns,
minHeight=null;
$.each(blocks, function(index, block) {
var blockContent = $('<div id="block_' + block.id + '"><div class="grid-stack-item-content">'
+ block.content +
'<div/><div/>');
addNewWidget(blockContent, block.id, block, grid, block.class, minWidth);
if (!$(block.content).children().hasClass('collapse')) {
minHeight = block.height;
}
addNewWidget(blockContent, block.id, block, grid, block.class, minWidth, minHeight);
});
jQuery(document).trigger('blocksloaded');
......@@ -204,18 +209,19 @@ function updateBlockSizes(grid) {
});
}
function addNewWidget(blockContent, blockId, dimensions, grid, blocktypeclass, minWidth=null) {
function addNewWidget(blockContent, blockId, dimensions, grid, blocktypeclass, minWidth=null, minHeight=null) {
el = grid.addWidget(
blockContent,
dimensions.positionx,
dimensions.positiony,
dimensions.width,
dimensions.height,
null, minWidth, null, null, null,
null, minWidth, null, minHeight, null,
blockId
);
$(el).addClass(blocktypeclass);
el.on('resizestart', resizeStartBlock);
el.on('resizestop', resizeStopBlock);
// images need time to load before height can be properly calculated
......@@ -230,24 +236,31 @@ function addNewWidget(blockContent, blockId, dimensions, grid, blocktypeclass, m
return el;
}
function resizeStartBlock(event, data) {
var grid = $('.grid-stack').data('gridstack');
grid.minHeight($(this), null);
}
function resizeStopBlock(event, data) {
var grid = $('.grid-stack').data('gridstack');
var content = $(this).find('.grid-stack-item-content')[0];
var heightpx = Math.max(data.size.height, content.scrollHeight),
widthpx = data.size.width,
heightgrid = Math.ceil((heightpx + grid.opts.verticalMargin) / (grid.cellHeight() + grid.opts.verticalMargin)),
widthgrid = Math.ceil((widthpx + grid.opts.verticalMargin) / (grid.cellWidth() + grid.opts.verticalMargin)); // horizontalMargin doesn't exist in gridstack yet
grid.resize($(this), widthgrid, heightgrid);
// update dimesions in db
var id = this.attributes['data-gs-id'].value,
dimensions = {
newx: this.attributes['data-gs-x'].value,
newy: this.attributes['data-gs-y'].value,
newwidth: widthgrid,
newheight: heightgrid,
}
moveBlock(id, dimensions);
var grid = $('.grid-stack').data('gridstack');
var content = $(this).find('.gridstackblock')[0];
var heightpx = Math.max(data.size.height, content.scrollHeight),
widthpx = data.size.width,
heightgrid = Math.round((heightpx + grid.opts.verticalMargin) / (grid.cellHeight() + grid.opts.verticalMargin)),
widthgrid = Math.round((widthpx + grid.opts.verticalMargin) / grid.cellWidth()); // horizontalMargin doesn't exist in gridstack yet
grid.resize($(this), widthgrid, heightgrid);
grid.minHeight($(this), heightgrid);
// update dimesions in db
var id = this.attributes['data-gs-id'].value,
dimensions = {
newx: this.attributes['data-gs-x'].value,
newy: this.attributes['data-gs-y'].value,
newwidth: widthgrid,
newheight: heightgrid,
}
moveBlock(id, dimensions);
serializeWidgetMap(grid.grid.nodes);
}
function moveBlock(id, whereTo) {
......
......@@ -543,7 +543,7 @@
minWidth = grid.opts.minCellColumns;
dimensions.width = 4;
dimensions.height = 3;
addNewWidget(blockinstance, blockId, dimensions, grid, 'placeholder', minWidth);
addNewWidget(blockinstance, blockId, dimensions, grid, 'placeholder', minWidth, dimensions.height);
if (data.data.configure) {
showDock($('#configureblock'), true);
......
......@@ -4,6 +4,7 @@ data-gs-x="{$positionx}"
data-gs-y="{$positiony}"
data-gs-width="{$width}"
data-gs-height="{$height}"
data-gs-min-height="{$height}"
data-gs-id="{$id}"
>
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment