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

nested grids

Browse source
This commit is contained in:
Pavel Reznikov 2015-03-08 22:31:23 -07:00
commit bd815c4a28
3 changed files with 100 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

81
demo/nested.html Normal file
View file

@ -0,0 +1,81 @@
<!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>Nested grids 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="../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/underscore.js/1.7.0/underscore-min.js"></script>
<script src="../gridstack.js"></script>
<style type="text/css">
.grid-stack {
background: lightgoldenrodyellow;
}
.grid-stack-item-content {
color: #2c3e50;
text-align: center;
background-color: #18bc9c;
}
.grid-stack .grid-stack {
/*margin: 0 -10px;*/
background: rgba(255, 255, 255, 0.3);
}
.grid-stack .grid-stack .grid-stack-item-content {
background: lightpink;
}
</style>
</head>
<body>
<div class="container-fluid">
<h1>Nested grids demo</h1>
<div class="grid-stack">
<div class="grid-stack-item" data-gs-x="0" data-gs-y="0" data-gs-width="4" data-gs-height="3">
<div class="grid-stack-item-content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque eius eligendi eos fuga magnam numquam perferendis provident quos rem. Asperiores assumenda dolor error eveniet impedit nihil numquam provident repellat ullam.
</div>
</div>
<div class="grid-stack-item" data-gs-x="4" data-gs-y="0" data-gs-width="4" data-gs-height="4">
<div class="grid-stack-item-content">
<div class="grid-stack">
<div class="grid-stack-item" data-gs-x="0" data-gs-y="0" data-gs-width="3" data-gs-height="1"><div class="grid-stack-item-content">1</div></div>
<div class="grid-stack-item" data-gs-x="3" data-gs-y="0" data-gs-width="3" data-gs-height="1"><div class="grid-stack-item-content">2</div></div>
<div class="grid-stack-item" data-gs-x="6" data-gs-y="0" data-gs-width="3" data-gs-height="1"><div class="grid-stack-item-content">3</div></div>
<div class="grid-stack-item" data-gs-x="9" data-gs-y="0" data-gs-width="3" data-gs-height="1"><div class="grid-stack-item-content">4</div></div>
<div class="grid-stack-item" data-gs-x="0" data-gs-y="1" data-gs-width="3" data-gs-height="1"><div class="grid-stack-item-content">5</div></div>
<div class="grid-stack-item" data-gs-x="3" data-gs-y="1" data-gs-width="3" data-gs-height="1"><div class="grid-stack-item-content">6</div></div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
var options = {
};
$('.grid-stack').gridstack(options);
});
</script>
</body>
</html>

4
gridstack.css
View file

@ -15,7 +15,6 @@
bottom: 0;
width: auto;
z-index: 0 !important;
overflow: auto;
}
.grid-stack > .grid-stack-item {
min-width: 8.33333333%;
@ -31,7 +30,8 @@
bottom: 0;
width: auto;
z-index: 0 !important;
overflow: auto;
overflow-x: hidden;
overflow-y: auto;
}
.grid-stack > .grid-stack-item > .ui-resizable-handle {
position: absolute;

25
gridstack.js
View file

@ -362,6 +362,9 @@
this.container = $(el);
opts.item_class = opts.item_class || 'grid-stack-item';
var is_nested = this.container.closest('.' + opts.item_class).size() > 0;
this.opts = _.defaults(opts || {}, {
width: parseInt(this.container.attr('data-gs-width')) || 12,
height: parseInt(this.container.attr('data-gs-height')) || 0,
@ -382,12 +385,17 @@
}),
draggable: _.defaults(opts.draggable || {}, {
handle: '.grid-stack-item-content',
scroll: true,
scroll: false,
appendTo: 'body'
})
});
this.opts.is_nested = is_nested;
this.container.addClass(this.opts._class);
if (is_nested) {
this.container.addClass('grid-stack-nested');
}
this._init_styles();
this.grid = new GridStackEngine(this.opts.width, function (nodes) {
@ -410,7 +418,7 @@
if (this.opts.auto) {
var elements = [];
this.container.find('.' + this.opts.item_class).each(function (index, el) {
this.container.children('.' + this.opts.item_class).each(function (index, el) {
el = $(el);
elements.push({
el: el,
@ -600,7 +608,8 @@
}
self.grid.move_node(node, x, y);
self._update_container_height();
}
},
containment: this.opts.is_nested ? this.container.parent() : null
})).resizable(_.extend(this.opts.resizable, {
start: on_start_moving,
stop: on_end_moving,
@ -713,13 +722,13 @@
};
GridStack.prototype.disable = function () {
this.movable(this.container.find('.' + this.opts.item_class), false);
this.resizable(this.container.find('.' + this.opts.item_class), false);
this.movable(this.container.children('.' + this.opts.item_class), false);
this.resizable(this.container.children('.' + this.opts.item_class), false);
};
GridStack.prototype.enable = function () {
this.movable(this.container.find('.' + this.opts.item_class), true);
this.resizable(this.container.find('.' + this.opts.item_class), true);
this.movable(this.container.children('.' + this.opts.item_class), true);
this.resizable(this.container.children('.' + this.opts.item_class), true);
};
GridStack.prototype.locked = function (el, val) {
@ -798,7 +807,7 @@
};
GridStack.prototype.cell_width = function () {
var o = this.container.find('.' + this.opts.item_class).first();
var o = this.container.children('.' + this.opts.item_class).first();
return Math.ceil(o.outerWidth() / o.attr('data-gs-width'));
};