6746234036
This update allows use of bower.json main value in buildtools that rely on the appropriate files being defined in this main array. It also points to the unminified, but compiled dist versions as per bower spec: https://github.com/bower/bower.json-spec#main * Changes main js file to use unminified version * Adds the gridstack.css file to the main files array * Moves compiled CSS into `dist` folder (upstream build process needs update) * Duplicate `src/gridstack.js` into `dist/gridstack.js` (upstream build process needs update) * Update demo html to point to `dist` instead of `src`
112 lines
4 KiB
HTML
112 lines
4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<!--[if lt IE 9]>
|
|
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
|
|
<![endif]-->
|
|
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Serialization demo</title>
|
|
|
|
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
|
|
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css"/>
|
|
<link rel="stylesheet" href="../dist/gridstack.css"/>
|
|
|
|
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
|
|
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.0/jquery-ui.js"></script>
|
|
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
|
|
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/3.5.0/lodash.min.js"></script>
|
|
<script src="../dist/gridstack.js"></script>
|
|
|
|
<style type="text/css">
|
|
.grid-stack {
|
|
background: lightgoldenrodyellow;
|
|
}
|
|
|
|
.grid-stack-item-content {
|
|
color: #2c3e50;
|
|
text-align: center;
|
|
background-color: #18bc9c;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container-fluid">
|
|
<h1>Serialization demo</h1>
|
|
|
|
<div>
|
|
<a class="btn btn-default" id="save-grid" href="#">Save Grid</a>
|
|
<a class="btn btn-default" id="load-grid" href="#">Load Grid</a>
|
|
<a class="btn btn-default" id="clear-grid" href="#">Clear Grid</a>
|
|
</div>
|
|
|
|
<br/>
|
|
|
|
<div class="grid-stack">
|
|
</div>
|
|
|
|
<hr/>
|
|
|
|
<textarea id="saved-data" cols="100" rows="20" readonly="readonly"></textarea>
|
|
</div>
|
|
|
|
|
|
<script type="text/javascript">
|
|
$(function () {
|
|
var options = {
|
|
};
|
|
$('.grid-stack').gridstack(options);
|
|
|
|
new function () {
|
|
this.serialized_data = [
|
|
{x: 0, y: 0, width: 2, height: 2},
|
|
{x: 3, y: 1, width: 1, height: 2},
|
|
{x: 4, y: 1, width: 1, height: 1},
|
|
{x: 2, y: 3, width: 3, height: 1},
|
|
{x: 1, y: 4, width: 1, height: 1},
|
|
{x: 1, y: 3, width: 1, height: 1},
|
|
{x: 2, y: 4, width: 1, height: 1},
|
|
{x: 2, y: 5, width: 1, height: 1}
|
|
];
|
|
|
|
this.grid = $('.grid-stack').data('gridstack');
|
|
|
|
this.load_grid = function () {
|
|
this.grid.remove_all();
|
|
var items = GridStackUI.Utils.sort(this.serialized_data);
|
|
_.each(items, function (node) {
|
|
this.grid.add_widget($('<div><div class="grid-stack-item-content" /><div/>'),
|
|
node.x, node.y, node.width, node.height);
|
|
}, this);
|
|
}.bind(this);
|
|
|
|
this.save_grid = function () {
|
|
this.serialized_data = _.map($('.grid-stack > .grid-stack-item:visible'), function (el) {
|
|
el = $(el);
|
|
var node = el.data('_gridstack_node');
|
|
return {
|
|
x: node.x,
|
|
y: node.y,
|
|
width: node.width,
|
|
height: node.height
|
|
};
|
|
}, this);
|
|
$('#saved-data').val(JSON.stringify(this.serialized_data, null, ' '));
|
|
}.bind(this);
|
|
|
|
this.clear_grid = function () {
|
|
this.grid.remove_all();
|
|
}.bind(this);
|
|
|
|
$('#save-grid').click(this.save_grid);
|
|
$('#load-grid').click(this.load_grid);
|
|
$('#clear-grid').click(this.clear_grid);
|
|
|
|
this.load_grid();
|
|
};
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|