Skip to content

Commit 9066d27

Browse files
author
Alain Dumesny
committed
fix reponsive.html demo
part of #1120 #1098
1 parent 128e608 commit 9066d27

File tree

3 files changed

+58
-83
lines changed

3 files changed

+58
-83
lines changed

‎demo/column.html‎

Lines changed: 22 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -18,16 +18,19 @@
1818
<body>
1919
<div class="container-fluid">
2020
<h1>setColumn() grid demo</h1>
21-
<a class="btn btn-primary" id="add-widget" href="#">Add Widget</a>
22-
<a class="btn btn-primary" id="1column" href="#">1 Column</a>
23-
<a class="btn btn-primary" id="2column" href="#">2 Column</a>
24-
<a class="btn btn-primary" id="3column" href="#">3 Column</a>
25-
<a class="btn btn-primary" id="4column" href="#">4 Column</a>
26-
<a class="btn btn-primary" id="6column" href="#">6 Column</a>
27-
<a class="btn btn-primary" id="8column" href="#">8 Column</a>
28-
<a class="btn btn-primary" id="10column" href="#">10 Column</a>
29-
<a class="btn btn-primary" id="12column" href="#">12 Column</a>
30-
<br><br>
21+
<div><span>Number of Columns:</span> <span id="column-text">12</span></div>
22+
<div>
23+
<a class="btn btn-primary" id="add-widget" href="#">Add Widget</a>
24+
<a class="btn btn-primary" id="1column" href="#">1 Column</a>
25+
<a class="btn btn-primary" id="2column" href="#">2 Column</a>
26+
<a class="btn btn-primary" id="3column" href="#">3 Column</a>
27+
<a class="btn btn-primary" id="4column" href="#">4 Column</a>
28+
<a class="btn btn-primary" id="6column" href="#">6 Column</a>
29+
<a class="btn btn-primary" id="8column" href="#">8 Column</a>
30+
<a class="btn btn-primary" id="10column" href="#">10 Column</a>
31+
<a class="btn btn-primary" id="12column" href="#">12 Column</a>
32+
</div>
33+
<br>
3134
<div class="grid-stack"></div>
3235
</div>
3336

@@ -36,6 +39,7 @@ <h1>setColumn() grid demo</h1>
3639
var $grid = $('.grid-stack');
3740
$grid.gridstack({float: true});
3841
grid = $grid.data('gridstack');
42+
var $text = $('#column-text');
3943

4044
$grid.on('added', function(e, items) {log(' added ', items)});
4145
$grid.on('removed', function(e, items) {log(' removed ', items)});
@@ -74,15 +78,14 @@ <h1>setColumn() grid demo</h1>
7478
grid.addWidget($('<div><div class="grid-stack-item-content">' + count++ + (n.text ? n.text : '') + '</div></div>'), n);
7579
});
7680

77-
$('#1column').click(function() { grid.setColumn(1); });
78-
$('#2column').click(function() { grid.setColumn(2); });
79-
$('#3column').click(function() { grid.setColumn(3); });
80-
$('#4column').click(function() { grid.setColumn(4); });
81-
$('#6column').click(function() { grid.setColumn(6); });
82-
$('#6column').click(function() { grid.setColumn(6); });
83-
$('#8column').click(function() { grid.setColumn(8); });
84-
$('#10column').click(function() { grid.setColumn(10); });
85-
$('#12column').click(function() { grid.setColumn(12); });
81+
$('#1column').click(function() { grid.setColumn(1); $text.text(1);});
82+
$('#2column').click(function() { grid.setColumn(2); $text.text(2);});
83+
$('#3column').click(function() { grid.setColumn(3); $text.text(3);});
84+
$('#4column').click(function() { grid.setColumn(4); $text.text(4);});
85+
$('#6column').click(function() { grid.setColumn(6); $text.text(6);});
86+
$('#8column').click(function() { grid.setColumn(8); $text.text(8);});
87+
$('#10column').click(function() { grid.setColumn(10); $text.text(10);});
88+
$('#12column').click(function() { grid.setColumn(12); $text.text(12);});
8689
});
8790
</script>
8891
</body>

‎demo/responsive.html‎

Lines changed: 34 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,6 @@
11
<!DOCTYPE html>
22
<html lang="en">
33
<head>
4-
<meta charset="utf-8">
5-
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6-
<meta name="viewport" content="width=device-width, initial-scale=1">
74
<title>Responsive grid demo</title>
85

96
<link rel="stylesheet" href="demo.css"/>
@@ -15,85 +12,59 @@
1512
<script src="../src/gridstack.jQueryUI.js"></script>
1613
</head>
1714
<body>
18-
<div class="device-xs visible-xs"></div>
19-
<div class="device-sm visible-sm"></div>
20-
<div class="device-md visible-md"></div>
21-
<div class="device-lg visible-lg"></div>
22-
<div class="device-xl visible-xl"></div>
23-
<div class="container-fluid">
15+
<div>
2416
<h1>Responsive grid demo</h1>
25-
2617
<div>
27-
<span>Number of Columns:</span> <span id="grid-size"></span>
18+
<span>Number of Columns:</span> <span id="column-text"></span>
2819
</div>
29-
3020
<br/>
31-
3221
<div class="grid-stack">
3322
</div>
3423
</div>
3524

36-
3725
<script type="text/javascript">
3826
$(function () {
39-
// thanks to http://stackoverflow.com/a/22885503
40-
var waitForFinalEvent=function(){var b={};return function(c,d,a){a||(a="I am a banana!");b[a]&&clearTimeout(b[a]);b[a]=setTimeout(c,d)}}();
41-
var fullDateString = new Date();
42-
function isBreakpoint(alias) {
43-
return $('.device-' + alias).is(':visible');
44-
}
45-
46-
$('.grid-stack').gridstack();
27+
var grid = $('.grid-stack').gridstack({
28+
disableOneColumnMode: true, // will manually do 1 column
29+
float: true }).data('gridstack');
30+
var $text = $('#column-text');
31+
4732
function resizeGrid() {
48-
var grid = $('.grid-stack').data('gridstack');
49-
if (isBreakpoint('xs')) {
50-
$('#grid-size').text('One column mode');
51-
} else if (isBreakpoint('sm')) {
33+
var width = document.body.clientWidth;
34+
if (width < 700) {
35+
grid.setColumn(1);
36+
$text.text(1);
37+
} else if (width < 850) {
5238
grid.setColumn(3);
53-
$('#grid-size').text(3);
54-
} else if (isBreakpoint('md')) {
39+
$text.text(3);
40+
} else if (width < 950) {
5541
grid.setColumn(6);
56-
$('#grid-size').text(6);
57-
} else if (isBreakpoint('lg')) {
42+
$text.text(6);
43+
} else {
5844
grid.setColumn(12);
59-
$('#grid-size').text(12);
45+
$text.text(12);
6046
}
6147
};
6248
$(window).resize(function () {
63-
waitForFinalEvent(function() {
64-
resizeGrid();
65-
}, 300, fullDateString.getTime());
49+
resizeGrid();
6650
});
67-
68-
new function () {
69-
this.serializedData = [
70-
{x: 0, y: 0, width: 4, height: 2},
71-
{x: 3, y: 1, width: 4, height: 2},
72-
{x: 4, y: 1, width: 4, height: 1},
73-
{x: 2, y: 3, width: 8, height: 1},
74-
{x: 0, y: 4, width: 4, height: 1},
75-
{x: 0, y: 3, width: 4, height: 1},
76-
{x: 2, y: 4, width: 4, height: 1},
77-
{x: 2, y: 5, width: 4, height: 1},
78-
{x: 0, y: 6, width: 12, height: 1}
79-
];
80-
81-
this.grid = $('.grid-stack').data('gridstack');
82-
83-
this.loadGrid = function () {
84-
this.grid.removeAll();
85-
var items = GridStackUI.Utils.sort(this.serializedData);
86-
this.grid.batchUpdate();
87-
items.forEach(function (node, i) {
88-
this.grid.addWidget($('<div><div class="grid-stack-item-content">' + i + '</div></div>'), node);
89-
}.bind(this));
90-
this.grid.commit();
91-
return false;
92-
}.bind(this);
93-
94-
this.loadGrid();
51+
$(document).ready(function() {
9552
resizeGrid();
96-
};
53+
});
54+
55+
var items = [
56+
{x: 0, y: 0, width: 2, height: 2},
57+
{x: 2, y: 0, width: 2, height: 1},
58+
{x: 5, y: 0, width: 1, height: 1},
59+
{x: 1, y: 3, width: 4, height: 1},
60+
{x: 5, y: 2, width: 2, height: 1},
61+
{x: 0, y: 4, width: 12, height: 1}
62+
];
63+
grid.batchUpdate();
64+
items.forEach(function (node, index) {
65+
grid.addWidget($('<div><div class="grid-stack-item-content">' + index + '</div></div>'), node);
66+
});
67+
grid.commit();
9768
});
9869
</script>
9970
</body>

‎doc/CHANGES.md‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,8 @@ Change log
2929
## v0.6.0-dev (upcoming changes)
3030

3131
- one column mode (<768px by default) now simply calls `setColumn(1)` and remembers prev columns (so we can restore). This gives
32-
us full resize/re-order of items capabilities rathern than a locked CSS only layout (see prev rev changes).
32+
us full resize/re-order of items capabilities rathern than a locked CSS only layout (see prev rev changes). [#1120](https://github.com/gridstack/gridstack.js/pull/1120)
33+
- fixed responsive.html demo [#1121](https://github.com/gridstack/gridstack.js/pull/1121)
3334

3435
## v0.6.0 (2019-12-24)
3536

0 commit comments

Comments
 (0)