deblan/gridstack.js
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Add default values for verticalMarginUnit and cellHeightUnit, update readme to have verticalMargin info, and several more unit tests.

Browse source
This commit is contained in:
d 2016-03-01 15:15:32 -05:00
parent 3d0c8baefe
commit 398dccb7a9
6 changed files with 369 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
dist/gridstack.js vendored
View file

@ -537,7 +537,9 @@
disableResize: opts.disableResize || false,
rtl: 'auto',
removable: false,
removeTimeout: 2000
removeTimeout: 2000,
verticalMarginUnit: 'px',
cellHeightUnit: 'px'
});
if (this.opts.rtl === 'auto') {

2
dist/gridstack.min.js vendored
View file

File diff suppressed because one or more lines are too long

2
dist/gridstack.min.map vendored
View file

File diff suppressed because one or more lines are too long

8
doc/README.md
View file

@ -48,6 +48,7 @@ gridstack.js API
- [setGridWidth(gridWidth, doNotPropagate)](#setgridwidthgridwidth-donotpropagate)
- [setStatic(staticValue)](#setstaticstaticvalue)
- [update(el, x, y, width, height)](#updateel-x-y-width-height)
- [verticalMargin(value, noUpdate)](#verticalmarginvalue-noupdate)
- [willItFit(x, y, width, height, autoPosition)](#willitfitx-y-width-height-autoposition)
- [Utils](#utils)
- [GridStackUI.Utils.sort(nodes[, dir[, width]])](#gridstackuiutilssortnodes-dir-width)
@ -438,6 +439,13 @@ Parameters:
Updates widget position/size.
### verticalMargin(value, noUpdate)
Parameters:
- `value` - new vertical margin value.
- `noUpdate` - if true, styles will not be updated.
### willItFit(x, y, width, height, autoPosition)
Returns `true` if the `height` of the grid will be less the vertical constraint. Always returns `true` if grid doesn't

355
spec/gridstack-spec.js
View file

@ -869,7 +869,7 @@ describe('gridstack', function() {
});
});
describe('grid.destroy()', function() {
describe('grid.destroy', function() {
beforeEach(function() {
document.body.insertAdjacentHTML(
'afterbegin', gridstackHTML);
@ -896,10 +896,361 @@ describe('gridstack', function() {
$('.grid-stack').gridstack(options);
var grid = $('.grid-stack').data('gridstack');
grid.destroy(false);
//console.log(grid.grid.nodes);
expect($('.grid-stack').length).toBe(1);
expect($('.grid-stack-item').length).toBe(2);
expect(grid.grid).toBe(null);
grid.destroy();
});
});
describe('grid.resize', function() {
beforeEach(function() {
document.body.insertAdjacentHTML(
'afterbegin', gridstackHTML);
});
afterEach(function() {
document.body.removeChild(document.getElementsByClassName('grid-stack')[0]);
});
it('should resize widget', function() {
var options = {
cellHeight: 80,
verticalMargin: 10
};
$('.grid-stack').gridstack(options);
var grid = $('.grid-stack').data('gridstack');
var items = $('.grid-stack-item');
grid.resize(items[0], 5, 5);
expect(parseInt($(items[0]).attr('data-gs-width'), 10)).toBe(5);
expect(parseInt($(items[0]).attr('data-gs-height'), 10)).toBe(5);
});
});
describe('grid.move', function() {
beforeEach(function() {
document.body.insertAdjacentHTML(
'afterbegin', gridstackHTML);
});
afterEach(function() {
document.body.removeChild(document.getElementsByClassName('grid-stack')[0]);
});
it('should move widget', function() {
var options = {
cellHeight: 80,
verticalMargin: 10,
float: true
};
$('.grid-stack').gridstack(options);
var grid = $('.grid-stack').data('gridstack');
var items = $('.grid-stack-item');
grid.move(items[0], 5, 5);
expect(parseInt($(items[0]).attr('data-gs-x'), 10)).toBe(5);
expect(parseInt($(items[0]).attr('data-gs-y'), 10)).toBe(5);
});
});
describe('grid.moveNode', function() {
beforeEach(function() {
document.body.insertAdjacentHTML(
'afterbegin', gridstackHTML);
});
afterEach(function() {
document.body.removeChild(document.getElementsByClassName('grid-stack')[0]);
});
it('should do nothing and return node', function() {
var options = {
cellHeight: 80,
verticalMargin: 10
};
$('.grid-stack').gridstack(options);
var grid = $('.grid-stack').data('gridstack');
var items = $('.grid-stack-item');
grid._updateElement(items[0], function(el, node) {
var newNode = grid.grid.moveNode(node);
expect(newNode).toBe(node);
});
});
it('should do nothing and return node', function() {
var options = {
cellHeight: 80,
verticalMargin: 10
};
$('.grid-stack').gridstack(options);
var grid = $('.grid-stack').data('gridstack');
var items = $('.grid-stack-item');
grid.minWidth(items[0], 1);
grid.maxWidth(items[0], 2);
grid.minHeight(items[0], 1);
grid.maxHeight(items[0], 2);
grid._updateElement(items[0], function(el, node) {
var newNode = grid.grid.moveNode(node);
expect(newNode).toBe(node);
});
});
});
describe('grid.update', function() {
beforeEach(function() {
document.body.insertAdjacentHTML(
'afterbegin', gridstackHTML);
});
afterEach(function() {
document.body.removeChild(document.getElementsByClassName('grid-stack')[0]);
});
it('should move and resize widget', function() {
var options = {
cellHeight: 80,
verticalMargin: 10,
float: true
};
$('.grid-stack').gridstack(options);
var grid = $('.grid-stack').data('gridstack');
var items = $('.grid-stack-item');
grid.update(items[0], 5, 5, 5 ,5);
expect(parseInt($(items[0]).attr('data-gs-width'), 10)).toBe(5);
expect(parseInt($(items[0]).attr('data-gs-height'), 10)).toBe(5);
expect(parseInt($(items[0]).attr('data-gs-x'), 10)).toBe(5);
expect(parseInt($(items[0]).attr('data-gs-y'), 10)).toBe(5);
});
});
describe('grid.verticalMargin', function() {
beforeEach(function() {
document.body.insertAdjacentHTML(
'afterbegin', gridstackHTML);
});
afterEach(function() {
document.body.removeChild(document.getElementsByClassName('grid-stack')[0]);
});
it('should return verticalMargin', function() {
var options = {
cellHeight: 80,
verticalMargin: 10
};
$('.grid-stack').gridstack(options);
var grid = $('.grid-stack').data('gridstack');
var vm = grid.verticalMargin();
expect(vm).toBe(10);
});
it('should return update verticalMargin', function() {
var options = {
cellHeight: 80,
verticalMargin: 10
};
$('.grid-stack').gridstack(options);
var grid = $('.grid-stack').data('gridstack');
grid.verticalMargin(11);
expect(grid.verticalMargin()).toBe(11);
});
it('should do nothing', function() {
var options = {
cellHeight: 80,
verticalMargin: 10
};
$('.grid-stack').gridstack(options);
var grid = $('.grid-stack').data('gridstack');
var vm = grid.verticalMargin(10);
expect(grid.verticalMargin()).toBe(10);
});
it('should do nothing', function() {
var options = {
cellHeight: 80,
verticalMargin: 10,
height: 10
};
$('.grid-stack').gridstack(options);
var grid = $('.grid-stack').data('gridstack');
var vm = grid.verticalMargin(10);
expect(grid.verticalMargin()).toBe(10);
});
it('should not update styles', function() {
var options = {
cellHeight: 80,
verticalMargin: 10
};
$('.grid-stack').gridstack(options);
var grid = $('.grid-stack').data('gridstack');
spyOn(grid, '_updateStyles');
grid.verticalMargin(11, true);
expect(grid._updateStyles).not.toHaveBeenCalled();
});
});
describe('grid.opts.rtl', function() {
beforeEach(function() {
document.body.insertAdjacentHTML(
'afterbegin', gridstackHTML);
});
afterEach(function() {
document.body.removeChild(document.getElementsByClassName('grid-stack')[0]);
});
it('should add grid-stack-rtl class', function() {
var options = {
cellHeight: 80,
verticalMargin: 10,
rtl: true
};
$('.grid-stack').gridstack(options);
expect($('.grid-stack').hasClass('grid-stack-rtl')).toBe(true);
});
it('should not add grid-stack-rtl class', function() {
var options = {
cellHeight: 80,
verticalMargin: 10
};
$('.grid-stack').gridstack(options);
expect($('.grid-stack').hasClass('grid-stack-rtl')).toBe(false);
});
});
describe('grid.enableMove', function() {
beforeEach(function() {
document.body.insertAdjacentHTML(
'afterbegin', gridstackHTML);
});
afterEach(function() {
document.body.removeChild(document.getElementsByClassName('grid-stack')[0]);
});
it('should enable move', function() {
var options = {
cellHeight: 80,
verticalMargin: 10,
minWidth: 1,
disableDrag: true
};
$('.grid-stack').gridstack(options);
var grid = $('.grid-stack').data('gridstack');
var items = $('.grid-stack-item');
expect(grid.opts.disableDrag).toBe(true);
grid.enableMove(true, true);
for (var i = 0; i < items.length; i++) {
expect($(items[i]).hasClass('ui-draggable-handle')).toBe(true);
}
expect(grid.opts.disableDrag).toBe(false);
});
it('should disable move', function() {
var options = {
cellHeight: 80,
verticalMargin: 10,
minWidth: 1
};
$('.grid-stack').gridstack(options);
var grid = $('.grid-stack').data('gridstack');
var items = $('.grid-stack-item');
grid.enableMove(false);
for (var i = 0; i < items.length; i++) {
expect($(items[i]).hasClass('ui-draggable-handle')).toBe(false);
}
expect(grid.opts.disableDrag).toBe(false);
});
});
describe('grid.enableResize', function() {
beforeEach(function() {
document.body.insertAdjacentHTML(
'afterbegin', gridstackHTML);
});
afterEach(function() {
document.body.removeChild(document.getElementsByClassName('grid-stack')[0]);
});
it('should enable resize', function() {
var options = {
cellHeight: 80,
verticalMargin: 10,
minWidth: 1,
disableResize: true
};
$('.grid-stack').gridstack(options);
var grid = $('.grid-stack').data('gridstack');
var items = $('.grid-stack-item');
expect(grid.opts.disableResize).toBe(true);
grid.enableResize(true, true);
for (var i = 0; i < items.length; i++) {
expect(($(items[i]).resizable('option','disabled'))).toBe(false);
}
expect(grid.opts.disableResize).toBe(false);
});
it('should disable resize', function() {
var options = {
cellHeight: 80,
verticalMargin: 10,
minWidth: 1
};
$('.grid-stack').gridstack(options);
var grid = $('.grid-stack').data('gridstack');
var items = $('.grid-stack-item');
grid.enableResize(false);
for (var i = 0; i < items.length; i++) {
expect(($(items[i]).resizable('option','disabled'))).toBe(true);
}
expect(grid.opts.disableResize).toBe(false);
});
});
describe('grid.enable', function() {
beforeEach(function() {
document.body.insertAdjacentHTML(
'afterbegin', gridstackHTML);
});
afterEach(function() {
document.body.removeChild(document.getElementsByClassName('grid-stack')[0]);
});
it('should enable movable and resizable', function() {
var options = {
cellHeight: 80,
verticalMargin: 10,
minWidth: 1
};
$('.grid-stack').gridstack(options);
var grid = $('.grid-stack').data('gridstack');
var items = $('.grid-stack-item');
grid.enableResize(false);
grid.enableMove(false);
for (var i = 0; i < items.length; i++) {
expect($(items[i]).hasClass('ui-draggable-handle')).toBe(false);
expect(($(items[i]).resizable('option','disabled'))).toBe(true);
}
grid.enable();
for (var j = 0; j < items.length; j++) {
expect($(items[j]).hasClass('ui-draggable-handle')).toBe(true);
expect(($(items[j]).resizable('option','disabled'))).toBe(false);
}
});
});
describe('grid.enable', function() {
beforeEach(function() {
document.body.insertAdjacentHTML(
'afterbegin', gridstackHTML);
});
afterEach(function() {
document.body.removeChild(document.getElementsByClassName('grid-stack')[0]);
});
it('should lock widgets', function() {
var options = {
cellHeight: 80,
verticalMargin: 10
};
$('.grid-stack').gridstack(options);
var grid = $('.grid-stack').data('gridstack');
var items = $('.grid-stack-item');
for (var i = 0; i < items.length; i++) {
grid.locked(items[i], true);
expect($(items[i]).attr('data-gs-locked')).toBe('yes');
}
});
it('should unlock widgets', function() {
var options = {
cellHeight: 80,
verticalMargin: 10
};
$('.grid-stack').gridstack(options);
var grid = $('.grid-stack').data('gridstack');
var items = $('.grid-stack-item');
for (var i = 0; i < items.length; i++) {
grid.locked(items[i], false);
expect($(items[i]).attr('data-gs-locked')).toBe(undefined);
}
});
});
});

4
src/gridstack.js
View file

@ -537,7 +537,9 @@
disableResize: opts.disableResize || false,
rtl: 'auto',
removable: false,
removeTimeout: 2000
removeTimeout: 2000,
verticalMarginUnit: 'px',
cellHeightUnit: 'px'
});
if (this.opts.rtl === 'auto') {