Skip to content

Commit 1527485

Browse files
trooleetroolee
committed
update demo
1 parent 31c3eb4 commit 1527485

File tree

5 files changed

+38
-30
lines changed

5 files changed

+38
-30
lines changed

‎demo/float.html‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -68,18 +68,19 @@ <h1>Float grid demo</h1>
6868

6969
this.grid = $('.grid-stack').data('gridstack');
7070

71-
this.add_new_widget = function () {
71+
this.addNewWidget = function () {
7272
var node = this.items.pop() || {
7373
x: 12 * Math.random(),
7474
y: 5 * Math.random(),
7575
width: 1 + 3 * Math.random(),
7676
height: 1 + 3 * Math.random()
7777
};
78-
this.grid.add_widget($('<div><div class="grid-stack-item-content" /><div/>'),
78+
this.grid.addWidget($('<div><div class="grid-stack-item-content" /><div/>'),
7979
node.x, node.y, node.width, node.height);
80+
return false;
8081
}.bind(this);
8182

82-
$('#add-new-widget').click(this.add_new_widget);
83+
$('#add-new-widget').click(this.addNewWidget);
8384
};
8485
});
8586
</script>

‎demo/knockout.html‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@
3838
<h1>knockout.js Demo</h1>
3939

4040
<div>
41-
<button data-bind="click: add_new_widget">Add new widget</button>
41+
<button data-bind="click: addNewWidget">Add new widget</button>
4242
</div>
4343

4444
<br>
@@ -64,9 +64,9 @@ <h1>knockout.js Demo</h1>
6464
}
6565

6666
var item = _.find(items, function (i) { return i.nodeType == 1 });
67-
grid.add_widget(item);
67+
grid.addWidget(item);
6868
ko.utils.domNodeDisposal.addDisposeCallback(item, function () {
69-
grid.remove_widget(item);
69+
grid.removeWidget(item);
7070
});
7171
};
7272
};
@@ -78,7 +78,7 @@ <h1>knockout.js Demo</h1>
7878
[
7979
'<div class="grid-stack" data-bind="foreach: {data: widgets, afterRender: afterAddWidget}">',
8080
' <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}">',
81-
' <div class="grid-stack-item-content"><button data-bind="click: $root.delete_widget">Delete me</button></div>',
81+
' <div class="grid-stack-item-content"><button data-bind="click: $root.deleteWidget">Delete me</button></div>',
8282
' </div>',
8383
'</div> '
8484
].join('')
@@ -90,18 +90,20 @@ <h1>knockout.js Demo</h1>
9090

9191
this.widgets = ko.observableArray(widgets);
9292

93-
this.add_new_widget = function () {
93+
this.addNewWidget = function () {
9494
this.widgets.push({
9595
x: 0,
9696
y: 0,
9797
width: Math.floor(1 + 3 * Math.random()),
9898
height: Math.floor(1 + 3 * Math.random()),
9999
auto_position: true
100100
});
101+
return false;
101102
};
102103

103-
this.delete_widget = function (item) {
104+
this.deleteWidget = function (item) {
104105
self.widgets.remove(item);
106+
return false;
105107
};
106108
};
107109

‎demo/knockout2.html‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@
3838
<h1>knockout.js Demo</h1>
3939

4040
<div>
41-
<button data-bind="click: add_new_widget">Add new widget</button>
41+
<button data-bind="click: addNewWidget">Add new widget</button>
4242
</div>
4343

4444
<br>
@@ -64,9 +64,9 @@ <h1>knockout.js Demo</h1>
6464
}
6565

6666
var item = _.find(items, function (i) { return i.nodeType == 1 });
67-
grid.add_widget(item);
67+
grid.addWidget(item);
6868
ko.utils.domNodeDisposal.addDisposeCallback(item, function () {
69-
grid.remove_widget(item);
69+
grid.removeWidget(item);
7070
});
7171
};
7272
};
@@ -83,18 +83,20 @@ <h1>knockout.js Demo</h1>
8383

8484
this.widgets = ko.observableArray(widgets);
8585

86-
this.add_new_widget = function () {
86+
this.addNewWidget = function () {
8787
this.widgets.push({
8888
x: 0,
8989
y: 0,
9090
width: Math.floor(1 + 3 * Math.random()),
9191
height: Math.floor(1 + 3 * Math.random()),
9292
auto_position: true
9393
});
94+
return false;
9495
};
9596

96-
this.delete_widget = function (item) {
97+
this.deleteWidget = function (item) {
9798
self.widgets.remove(item);
99+
return false;
98100
};
99101
};
100102

@@ -113,7 +115,7 @@ <h1>knockout.js Demo</h1>
113115
<template id="gridstack-template">
114116
<div class="grid-stack" data-bind="foreach: {data: widgets, afterRender: afterAddWidget}">
115117
<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}">
116-
<div class="grid-stack-item-content"><button data-bind="click: $root.delete_widget">Delete me</button></div>
118+
<div class="grid-stack-item-content"><button data-bind="click: $root.deleteWidget">Delete me</button></div>
117119
</div></div><!-- <---- NO SPACE BETWEEN THESE CLOSING TAGS -->
118120
</template>
119121
</body>

‎demo/serialization.html‎

Lines changed: 17 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@ <h1>Serialization demo</h1>
6060
$('.grid-stack').gridstack(options);
6161

6262
new function () {
63-
this.serialized_data = [
63+
this.serializedData = [
6464
{x: 0, y: 0, width: 2, height: 2},
6565
{x: 3, y: 1, width: 1, height: 2},
6666
{x: 4, y: 1, width: 1, height: 1},
@@ -73,17 +73,18 @@ <h1>Serialization demo</h1>
7373

7474
this.grid = $('.grid-stack').data('gridstack');
7575

76-
this.load_grid = function () {
77-
this.grid.remove_all();
78-
var items = GridStackUI.Utils.sort(this.serialized_data);
76+
this.loadGrid = function () {
77+
this.grid.removeAll();
78+
var items = GridStackUI.Utils.sort(this.serializedData);
7979
_.each(items, function (node) {
80-
this.grid.add_widget($('<div><div class="grid-stack-item-content" /><div/>'),
80+
this.grid.addWidget($('<div><div class="grid-stack-item-content" /><div/>'),
8181
node.x, node.y, node.width, node.height);
8282
}, this);
83+
return false;
8384
}.bind(this);
8485

85-
this.save_grid = function () {
86-
this.serialized_data = _.map($('.grid-stack > .grid-stack-item:visible'), function (el) {
86+
this.saveGrid = function () {
87+
this.serializedData = _.map($('.grid-stack > .grid-stack-item:visible'), function (el) {
8788
el = $(el);
8889
var node = el.data('_gridstack_node');
8990
return {
@@ -93,18 +94,20 @@ <h1>Serialization demo</h1>
9394
height: node.height
9495
};
9596
}, this);
96-
$('#saved-data').val(JSON.stringify(this.serialized_data, null, ' '));
97+
$('#saved-data').val(JSON.stringify(this.serializedData, null, ' '));
98+
return false;
9799
}.bind(this);
98100

99-
this.clear_grid = function () {
100-
this.grid.remove_all();
101+
this.clearGrid = function () {
102+
this.grid.removeAll();
103+
return false;
101104
}.bind(this);
102105

103-
$('#save-grid').click(this.save_grid);
104-
$('#load-grid').click(this.load_grid);
105-
$('#clear-grid').click(this.clear_grid);
106+
$('#save-grid').click(this.saveGrid);
107+
$('#load-grid').click(this.loadGrid);
108+
$('#clear-grid').click(this.clearGrid);
106109

107-
this.load_grid();
110+
this.loadGrid();
108111
};
109112
});
110113
</script>

‎demo/two.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,7 @@ <h1>Two grids demo</h1>
7575
var grid = $(this).data('gridstack');
7676

7777
_.each(items, function (node) {
78-
grid.add_widget($('<div><div class="grid-stack-item-content" /><div/>'),
78+
grid.addWidget($('<div><div class="grid-stack-item-content" /><div/>'),
7979
node.x, node.y, node.width, node.height);
8080
}, this);
8181
});

0 commit comments

Comments
 (0)