Add demo showcasing how to use gridstack.js attributes in CSS

adiessl · adiessl · commit 18de73bf9061 · 2025-01-02T11:21:55.000+01:00
diff --git a/demo/css_attributes.html b/demo/css_attributes.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>CSS & attributes demo</title>
+
+  <link rel="stylesheet" href="demo.css"/>
+  <script src="../dist/gridstack-all.js"></script>
+
+</head>
+<body>
+  <div class="container-fluid">
+    <h1>Demo showcasing how to use gridstack.js attributes in CSS</h1>
+    <p>The center of the widget shows its dimensions by purely using CSS, no JavaScript involved.</p>
+    <div>
+      <a class="btn btn-primary" onClick="addNewWidget()" href="#">Add Widget</a>
+    </div>
+    <br><br>
+    <div class="grid-stack show-dimensions"></div>
+  </div>
+  <script src="events.js"></script>
+  <script type="text/javascript">
+    let grid = GridStack.init({
+      float: true,
+      resizable: { handles: 'all'}
+    });
+    addEvents(grid);
+
+    let items = [
+      {x: 1, y: 1},
+      {x: 2, y: 2, w: 3},
+      {x: 4, y: 2},
+      {x: 3, y: 1, h: 2},
+      {x: 0, y: 6, w: 2, h: 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() {
+      grid.addWidget(getNode());
+    };
+
+    addNewWidget();
+  </script>
+</body>
+</html>
diff --git a/demo/demo.css b/demo/demo.css
@@ -74,3 +74,27 @@ h1 {
   background: none;
   inset: 0;
 }
+
+.grid-stack.show-dimensions .grid-stack-item:after {
+   content: '1x1';
+   position: absolute;
+   top: 50%;
+   left: 50%;
+   transform: translate(-50%, -50%);
+   padding: 2px;
+   color: black;
+   background-color: white;
+   pointer-events: none; /* to not interfere with dragging the item */
+}
+
+.grid-stack.show-dimensions .grid-stack-item[gs-h]::after {
+   content: '1x' attr(gs-h);
+}
+
+.grid-stack.show-dimensions .grid-stack-item[gs-w]::after {
+   content: attr(gs-w) 'x1';
+}
+
+.grid-stack.show-dimensions .grid-stack-item[gs-h][gs-w]::after {
+   content: attr(gs-w) 'x' attr(gs-h);
+}
diff --git a/demo/index.html b/demo/index.html
@@ -12,6 +12,7 @@ <h1>Demos</h1>
     <li><a href="anijs.html">AniJS</a></li>
     <li><a href="cell-height.html">Cell Height</a></li>
     <li><a href="column.html">Column</a></li>
+    <li><a href="css_attributes.html">CSS & attributes</a></li>
     <!-- <li><a href="esmodule.html">ES Module test</a></li> -->
     <li><a href="float.html">Float grid</a></li>
     <li><a href="knockout.html">Knockout.js</a></li>
