nested grids

2015-03-08 22:28:51 -07:00 · 2015-03-08 22:28:51 -07:00 · 3f5d6fca80
parent b64accd45a
commit 3f5d6fca80
8 changed files with 113 additions and 15 deletions
--- a/README.md
+++ b/README.md
@ -52,6 +52,7 @@ Inspired by [gridster.js](http://gridster.net). Built with love.
  - [Load grid from array](#load-grid-from-array)
  - [Override resizable/draggable options](#override-resizabledraggable-options)
  - [IE8 support](#ie8-support)
+  - [Nested grids](#nested-grids)
 - [Changes](#changes)
      - [v0.2.3 (development version)](#v023-development-version)
      - [v0.2.2 (2014-12-23)](#v022-2014-12-23)
@ -621,6 +622,13 @@ There are at least two more issues with gridstack in IE8 with jQueryUI resizable
 droppable. If you have any suggestions about support of IE8 you are welcome here: https://github.com/troolee/gridstack.js/issues/76 


+## Nested grids
+
+Gridstack may be nested. All nested grids have an additional class `grid-stack-nested` which is assigned automatically 
+during initialization. 
+See example: [Nested grid demo](http://troolee.github.io/gridstack.js/demo/nested.html)
+
+
 Changes
 =======

--- a/demo/nested.html
+++ b/demo/nested.html
@ -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="../src/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="../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>
--- a/dist/gridstack.min.css
+++ b/dist/gridstack.min.css
--- a/dist/gridstack.min.js
+++ b/dist/gridstack.min.js
--- a/dist/gridstack.min.map
+++ b/dist/gridstack.min.map
--- a/src/gridstack.css
+++ b/src/gridstack.css
@ -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;
--- a/src/gridstack.js
+++ b/src/gridstack.js
@ -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'));
    };

--- a/src/gridstack.scss
+++ b/src/gridstack.scss
@ -26,7 +26,6 @@ $animation_speed: .3s;
        bottom: 0;
        width: auto;
        z-index: 0 !important;
-        overflow: auto;
    }

    > .grid-stack-item {
@ -43,7 +42,8 @@ $animation_speed: .3s;
            bottom: 0;
            width: auto;
            z-index: 0 !important;
-            overflow: auto;
+            overflow-x: hidden;
+            overflow-y: auto;
        }

        > .ui-resizable-handle {