Skip to content

Commit

Permalink
Merge pull request #1121 from adumesny/develop
Browse files Browse the repository at this point in the history 
fix reponsive.html demo
  • Loading branch information
@adumesny
adumesny authored Feb 2, 2020
2 parents 621c1ce + 9066d27 commit d920362
Show file tree
Hide file tree
Showing 3 changed files with 58 additions and 83 deletions.
41 changes: 22 additions & 19 deletions demo/column.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,16 +18,19 @@
<body>
<div class="container-fluid">
<h1>setColumn() grid demo</h1>
<a class="btn btn-primary" id="add-widget" href="#">Add Widget</a>
<a class="btn btn-primary" id="1column" href="#">1 Column</a>
<a class="btn btn-primary" id="2column" href="#">2 Column</a>
<a class="btn btn-primary" id="3column" href="#">3 Column</a>
<a class="btn btn-primary" id="4column" href="#">4 Column</a>
<a class="btn btn-primary" id="6column" href="#">6 Column</a>
<a class="btn btn-primary" id="8column" href="#">8 Column</a>
<a class="btn btn-primary" id="10column" href="#">10 Column</a>
<a class="btn btn-primary" id="12column" href="#">12 Column</a>
<br><br>
<div><span>Number of Columns:</span> <span id="column-text">12</span></div>
<div>
<a class="btn btn-primary" id="add-widget" href="#">Add Widget</a>
<a class="btn btn-primary" id="1column" href="#">1 Column</a>
<a class="btn btn-primary" id="2column" href="#">2 Column</a>
<a class="btn btn-primary" id="3column" href="#">3 Column</a>
<a class="btn btn-primary" id="4column" href="#">4 Column</a>
<a class="btn btn-primary" id="6column" href="#">6 Column</a>
<a class="btn btn-primary" id="8column" href="#">8 Column</a>
<a class="btn btn-primary" id="10column" href="#">10 Column</a>
<a class="btn btn-primary" id="12column" href="#">12 Column</a>
</div>
<br>
<div class="grid-stack"></div>
</div>

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

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

$('#1column').click(function() { grid.setColumn(1); });
$('#2column').click(function() { grid.setColumn(2); });
$('#3column').click(function() { grid.setColumn(3); });
$('#4column').click(function() { grid.setColumn(4); });
$('#6column').click(function() { grid.setColumn(6); });
$('#6column').click(function() { grid.setColumn(6); });
$('#8column').click(function() { grid.setColumn(8); });
$('#10column').click(function() { grid.setColumn(10); });
$('#12column').click(function() { grid.setColumn(12); });
$('#1column').click(function() { grid.setColumn(1); $text.text(1);});
$('#2column').click(function() { grid.setColumn(2); $text.text(2);});
$('#3column').click(function() { grid.setColumn(3); $text.text(3);});
$('#4column').click(function() { grid.setColumn(4); $text.text(4);});
$('#6column').click(function() { grid.setColumn(6); $text.text(6);});
$('#8column').click(function() { grid.setColumn(8); $text.text(8);});
$('#10column').click(function() { grid.setColumn(10); $text.text(10);});
$('#12column').click(function() { grid.setColumn(12); $text.text(12);});
});
</script>
</body>
Expand Down
97 changes: 34 additions & 63 deletions demo/responsive.html
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,6 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Responsive grid demo</title>

<link rel="stylesheet" href="demo.css"/>
Expand All @@ -15,85 +12,59 @@
<script src="../src/gridstack.jQueryUI.js"></script>
</head>
<body>
<div class="device-xs visible-xs"></div>
<div class="device-sm visible-sm"></div>
<div class="device-md visible-md"></div>
<div class="device-lg visible-lg"></div>
<div class="device-xl visible-xl"></div>
<div class="container-fluid">
<div>
<h1>Responsive grid demo</h1>

<div>
<span>Number of Columns:</span> <span id="grid-size"></span>
<span>Number of Columns:</span> <span id="column-text"></span>
</div>

<br/>

<div class="grid-stack">
</div>
</div>


<script type="text/javascript">
$(function () {
// thanks to http://stackoverflow.com/a/22885503
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)}}();
var fullDateString = new Date();
function isBreakpoint(alias) {
return $('.device-' + alias).is(':visible');
}

$('.grid-stack').gridstack();
var grid = $('.grid-stack').gridstack({
disableOneColumnMode: true, // will manually do 1 column
float: true }).data('gridstack');
var $text = $('#column-text');

function resizeGrid() {
var grid = $('.grid-stack').data('gridstack');
if (isBreakpoint('xs')) {
$('#grid-size').text('One column mode');
} else if (isBreakpoint('sm')) {
var width = document.body.clientWidth;
if (width < 700) {
grid.setColumn(1);
$text.text(1);
} else if (width < 850) {
grid.setColumn(3);
$('#grid-size').text(3);
} else if (isBreakpoint('md')) {
$text.text(3);
} else if (width < 950) {
grid.setColumn(6);
$('#grid-size').text(6);
} else if (isBreakpoint('lg')) {
$text.text(6);
} else {
grid.setColumn(12);
$('#grid-size').text(12);
$text.text(12);
}
};
$(window).resize(function () {
waitForFinalEvent(function() {
resizeGrid();
}, 300, fullDateString.getTime());
resizeGrid();
});

new function () {
this.serializedData = [
{x: 0, y: 0, width: 4, height: 2},
{x: 3, y: 1, width: 4, height: 2},
{x: 4, y: 1, width: 4, height: 1},
{x: 2, y: 3, width: 8, height: 1},
{x: 0, y: 4, width: 4, height: 1},
{x: 0, y: 3, width: 4, height: 1},
{x: 2, y: 4, width: 4, height: 1},
{x: 2, y: 5, width: 4, height: 1},
{x: 0, y: 6, width: 12, height: 1}
];

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

this.loadGrid = function () {
this.grid.removeAll();
var items = GridStackUI.Utils.sort(this.serializedData);
this.grid.batchUpdate();
items.forEach(function (node, i) {
this.grid.addWidget($('<div><div class="grid-stack-item-content">' + i + '</div></div>'), node);
}.bind(this));
this.grid.commit();
return false;
}.bind(this);

this.loadGrid();
$(document).ready(function() {
resizeGrid();
};
});

var items = [
{x: 0, y: 0, width: 2, height: 2},
{x: 2, y: 0, width: 2, height: 1},
{x: 5, y: 0, width: 1, height: 1},
{x: 1, y: 3, width: 4, height: 1},
{x: 5, y: 2, width: 2, height: 1},
{x: 0, y: 4, width: 12, height: 1}
];
grid.batchUpdate();
items.forEach(function (node, index) {
grid.addWidget($('<div><div class="grid-stack-item-content">' + index + '</div></div>'), node);
});
grid.commit();
});
</script>
</body>
Expand Down
3 changes: 2 additions & 1 deletion doc/CHANGES.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,8 @@ Change log
## v0.6.0-dev (upcoming changes)

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

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

Expand Down

0 comments on commit d920362

Please sign in to comment.