Merge pull request #1577 from adumesny/develop

test for #1570
gridstack · Jan 17, 2021 · 99ba04a · 99ba04a
2 parents 7b05db1 + f0fa426
commit 99ba04a
Show file tree

Hide file tree

Showing 2 changed files with 123 additions and 5 deletions.
diff --git a/spec/e2e/html/1570_drag_bottom_max_row.html b/spec/e2e/html/1570_drag_bottom_max_row.html
@@ -0,0 +1,119 @@
+<!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>drop onto full</title>
+
+  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
+  <link rel="stylesheet" href="../../../dist/gridstack.min.css"/>
+  <script src="../../../dist/gridstack-h5.js"></script>
+
+  <style type="text/css">
+    *,
+    *::before,
+    *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: inherit;
+    }
+    html {
+        height: 100vh;
+        width: 100vw;
+        margin: 0;
+        box-sizing: border-box;
+        font-size: 62.5%;
+        background-color: white;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        overflow: hidden;
+        background-color: rgb(216, 216, 216);
+    }
+    .container {
+        width: 70vw;
+        background-color: rgb(252, 252, 252);
+
+        display: grid;
+        grid-template-rows: 100%;
+        grid-template-columns: 5% 95%;
+        grid-row-gap: 0px;
+        grid-column-gap: 0px;
+    }
+    .side-grid-container {
+        grid-column: 1;
+        height: 100%;
+        width: 100%;
+        background-color: rgb(88, 90, 90);
+    }
+    .main-grid-container {
+        grid-column: 2;
+        height: 100%;
+        width: 100%;
+        background-color: rgb(92, 92, 92);
+    }
+    .grid-stack-item-content{
+        background-color: rgb(206, 214, 167);
+        font-size: large;
+    }
+    .right-grid{
+        background-color: rgb(168, 193, 218);
+    }
+    .left-grid {
+        background-color: rgb(114, 177, 196);
+    }
+    .drag-border {
+        border: solid 5px cyan;
+    }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <div class="side-grid-container">
+      <div id='side-grid' class="left-grid grid-stack">
+      </div>
+    </div>
+    <div class="main-grid-container">
+      <div id="main-grid" class="right-grid grid-stack" >
+      </div>
+    </div>
+ </div>
+<script type="text/javascript">
+  let options = {
+    column: 1,
+    margin: 5,
+    disableResize: true
+  }
+
+  let options2 = {
+    disableOneColumnMode: true,
+    minRow: 3,
+    // maxRow: 3, // change this to show issue
+    acceptWidgets: true,
+    removable: true,
+    removeTimeout: 0,
+    float: true
+  }
+
+  let grid1 = GridStack.init(options, '#side-grid');
+  let grid2 = GridStack.init(options2, '#main-grid');
+
+  let items1 = [
+    {x: 0, y: 0, content: "1", id: 1},
+    {x: 0, y: 1, content: "2", id: 2},
+    {x: 0, y: 2, content: "3", id: 3}
+  ]
+  grid1.load(items1);
+
+  grid2.load([{x: 1, y: 2, content: "4", id: 4}])
+
+  grid2.on('removed', function(e, items) {
+    item = items[0];
+    item.h = item.w = 1;
+    grid1.addWidget(item);
+  })
+
+</script>
+</body>
+</html>
diff --git a/spec/e2e/html/1571_drop_onto_full.html b/spec/e2e/html/1571_drop_onto_full.html
@@ -69,21 +69,20 @@ <h1>drop onto full</h1>
       <div class="col-md-6">
         <a onClick="toggleFloat(this, 0)" class="btn btn-primary" href="#">float: false</a>
         <a onClick="compact(0)" class="btn btn-primary" href="#">Compact</a>
-        <div class="grid-stack grid-stack-6"></div>
+        <div class="grid-stack"></div>
       </div>
       <div class="col-md-6">
         <a onClick="toggleFloat(this, 1)" class="btn btn-primary" href="#">float: false</a>
         <a onClick="compact(1)" class="btn btn-primary" href="#">Compact</a>
-        <div class="grid-stack grid-stack-6"></div>
+        <div class="grid-stack"></div>
       </div>
     </div>
   </div>
   <script src="../../../demo/events.js"></script>
   <script type="text/javascript">
     let options = {
       column: 6,
-      minRow: 1, // don't collapse when empty
-      maxRow: 3, // make it full
+      row: 1,
       cellHeight: 70,
       disableOneColumnMode: true,
       float: false,
@@ -95,7 +94,7 @@ <h1>drop onto full</h1>
     };
     let grids = GridStack.initAll(options);
     grids[0].load([{x: 4, y: 0, w: 1, h: 1}])
-    grids[1].load([{x: 0, y: 0, w: 6, h: 3}])
+    grids[1].load([{x: 0, y: 0, w: 6, h: 1}])
 
     grids.forEach(function (grid, i) {
       addEvents(grid, i);