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

update demo

Browse source
This commit is contained in:
Pavel Reznikov 2016-02-17 18:48:03 -08:00
parent 31c3eb494e
commit 1527485f75
5 changed files with 38 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
demo/float.html
View file

@ -68,18 +68,19 @@
this.grid = $('.grid-stack').data('gridstack');
this.add_new_widget = function () {
this.addNewWidget = function () {
var node = this.items.pop() || {
x: 12 * Math.random(),
y: 5 * Math.random(),
width: 1 + 3 * Math.random(),
height: 1 + 3 * Math.random()
};
this.grid.add_widget($('<div><div class="grid-stack-item-content" /><div/>'),
this.grid.addWidget($('<div><div class="grid-stack-item-content" /><div/>'),
node.x, node.y, node.width, node.height);
return false;
}.bind(this);
$('#add-new-widget').click(this.add_new_widget);
$('#add-new-widget').click(this.addNewWidget);
};
});
</script>

14
demo/knockout.html
View file

@ -38,7 +38,7 @@
<h1>knockout.js Demo</h1>
<div>
<button data-bind="click: add_new_widget">Add new widget</button>
<button data-bind="click: addNewWidget">Add new widget</button>
</div>
<br>
@ -64,9 +64,9 @@
}
var item = _.find(items, function (i) { return i.nodeType == 1 });
grid.add_widget(item);
grid.addWidget(item);
ko.utils.domNodeDisposal.addDisposeCallback(item, function () {
grid.remove_widget(item);
grid.removeWidget(item);
});
};
};
@ -78,7 +78,7 @@
[
'<div class="grid-stack" data-bind="foreach: {data: widgets, afterRender: afterAddWidget}">',
' <div class="grid-stack-item" data-bind="attr: {\'data-gs-x\': $data.x, \'data-gs-y\': $data.y, \'data-gs-width\': $data.width, \'data-gs-height\': $data.height, \'data-gs-auto-position\': $data.auto_position}">',
' <div class="grid-stack-item-content"><button data-bind="click: $root.delete_widget">Delete me</button></div>',
' <div class="grid-stack-item-content"><button data-bind="click: $root.deleteWidget">Delete me</button></div>',
' </div>',
'</div> '
].join('')
@ -90,7 +90,7 @@
this.widgets = ko.observableArray(widgets);
this.add_new_widget = function () {
this.addNewWidget = function () {
this.widgets.push({
x: 0,
y: 0,
@ -98,10 +98,12 @@
height: Math.floor(1 + 3 * Math.random()),
auto_position: true
});
return false;
};
this.delete_widget = function (item) {
this.deleteWidget = function (item) {
self.widgets.remove(item);
return false;
};
};

14
demo/knockout2.html
View file

@ -38,7 +38,7 @@
<h1>knockout.js Demo</h1>
<div>
<button data-bind="click: add_new_widget">Add new widget</button>
<button data-bind="click: addNewWidget">Add new widget</button>
</div>
<br>
@ -64,9 +64,9 @@
}
var item = _.find(items, function (i) { return i.nodeType == 1 });
grid.add_widget(item);
grid.addWidget(item);
ko.utils.domNodeDisposal.addDisposeCallback(item, function () {
grid.remove_widget(item);
grid.removeWidget(item);
});
};
};
@ -83,7 +83,7 @@
this.widgets = ko.observableArray(widgets);
this.add_new_widget = function () {
this.addNewWidget = function () {
this.widgets.push({
x: 0,
y: 0,
@ -91,10 +91,12 @@
height: Math.floor(1 + 3 * Math.random()),
auto_position: true
});
return false;
};
this.delete_widget = function (item) {
this.deleteWidget = function (item) {
self.widgets.remove(item);
return false;
};
};
@ -113,7 +115,7 @@
<template id="gridstack-template">
<div class="grid-stack" data-bind="foreach: {data: widgets, afterRender: afterAddWidget}">
<div class="grid-stack-item" data-bind="attr: {'data-gs-x': $data.x, 'data-gs-y': $data.y, 'data-gs-width': $data.width, 'data-gs-height': $data.height, 'data-gs-auto-position': $data.auto_position}">
<div class="grid-stack-item-content"><button data-bind="click: $root.delete_widget">Delete me</button></div>
<div class="grid-stack-item-content"><button data-bind="click: $root.deleteWidget">Delete me</button></div>
</div></div><!-- <---- NO SPACE BETWEEN THESE CLOSING TAGS -->
</template>
</body>

31
demo/serialization.html
View file

@ -60,7 +60,7 @@
$('.grid-stack').gridstack(options);
new function () {
this.serialized_data = [
this.serializedData = [
{x: 0, y: 0, width: 2, height: 2},
{x: 3, y: 1, width: 1, height: 2},
{x: 4, y: 1, width: 1, height: 1},
@ -73,17 +73,18 @@
this.grid = $('.grid-stack').data('gridstack');
this.load_grid = function () {
this.grid.remove_all();
var items = GridStackUI.Utils.sort(this.serialized_data);
this.loadGrid = function () {
this.grid.removeAll();
var items = GridStackUI.Utils.sort(this.serializedData);
_.each(items, function (node) {
this.grid.add_widget($('<div><div class="grid-stack-item-content" /><div/>'),
this.grid.addWidget($('<div><div class="grid-stack-item-content" /><div/>'),
node.x, node.y, node.width, node.height);
}, this);
return false;
}.bind(this);
this.save_grid = function () {
this.serialized_data = _.map($('.grid-stack > .grid-stack-item:visible'), function (el) {
this.saveGrid = function () {
this.serializedData = _.map($('.grid-stack > .grid-stack-item:visible'), function (el) {
el = $(el);
var node = el.data('_gridstack_node');
return {
@ -93,18 +94,20 @@
height: node.height
};
}, this);
$('#saved-data').val(JSON.stringify(this.serialized_data, null, ' '));
$('#saved-data').val(JSON.stringify(this.serializedData, null, ' '));
return false;
}.bind(this);
this.clear_grid = function () {
this.grid.remove_all();
this.clearGrid = function () {
this.grid.removeAll();
return false;
}.bind(this);
$('#save-grid').click(this.save_grid);
$('#load-grid').click(this.load_grid);
$('#clear-grid').click(this.clear_grid);
$('#save-grid').click(this.saveGrid);
$('#load-grid').click(this.loadGrid);
$('#clear-grid').click(this.clearGrid);
this.load_grid();
this.loadGrid();
};
});
</script>

2
demo/two.html
View file

@ -75,7 +75,7 @@
var grid = $(this).data('gridstack');
_.each(items, function (node) {
grid.add_widget($('<div><div class="grid-stack-item-content" /><div/>'),
grid.addWidget($('<div><div class="grid-stack-item-content" /><div/>'),
node.x, node.y, node.width, node.height);
}, this);
});