demo for parent offset

* this shows that fix gridstack#1820 with latest 7.x code adding a demo with parent offseted working as expected.
adumesny · Dec 27, 2022 · 57ae798 · 57ae798
1 parent b46e264
commit 57ae798
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 0 deletions.
diff --git a/demo/index.html b/demo/index.html
@@ -18,6 +18,7 @@ <h1>Demos</h1>
     <li><a href="nested.html">Nested grids</a></li>
     <li><a href="nested_constraint.html">Nested Constraint grids</a></li>
     <li><a href="nested_advanced.html">Nested Advanced grids</a></li>
+    <li><a href="offset.html">Offset parent</a></li>
     <li><a href="react-hooks.html">ReactJS (Hooks)</a></li>
     <li><a href="react.html">ReactJS</a></li>
     <li><a href="responsive.html">Responsive</a></li>

diff --git a/demo/offset.html b/demo/offset.html
@@ -0,0 +1,59 @@
+<!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>Transform Parent demo</title>
+
+  <link rel="stylesheet" href="demo.css"/>
+  <script src="../dist/gridstack-all.js"></script>
+
+</head>
+<body>
+  <div class="container-fluid">
+    <h1>Transform Parent demo</h1>
+    <p>example where the grid parent has a transform (50px, 100px). Scale not supported yet - see #1275</p>
+    <div>
+      <a class="btn btn-primary" onClick="addNewWidget()" href="#">Add Widget</a>
+    </div>
+    <br><br>
+    <div style="transform: translate(50px, 100px)">
+      <div class="grid-stack"></div>
+    </div>
+  </div>
+  <script src="events.js"></script>
+  <script type="text/javascript">
+    let grid = GridStack.init({float: true});
+    addEvents(grid);
+
+    let items = [
+      {x: 0, y: 0, w: 2, h: 2},
+      {x: 2, y: 0, w: 1},
+      {x: 3, y: 0, h: 1},
+      {x: 0, y: 2, w: 2},
+    ];
+    let count = 0;
+
+    getNode = function() {
+      let n = items[count] || {
+        x: Math.round(12 * Math.random()),
+        y: Math.round(5 * Math.random()),
+        w: Math.round(1 + 3 * Math.random()),
+        h: Math.round(1 + 3 * Math.random())
+      };
+      n.content = n.content || String(count);
+      count++;
+      return n;
+    };
+
+    addNewWidget = function() {
+      let w = grid.addWidget(getNode());
+    };
+
+    addNewWidget();
+    addNewWidget();
+    addNewWidget();
+  </script>
+</body>
+</html>