chore: add CSP header example

- ref issue #878
6pac · Oct 30, 2023 · f9cc41b · f9cc41b
1 parent ada4690
commit f9cc41b
Show file tree

Hide file tree

Showing 3 changed files with 113 additions and 4 deletions.
diff --git a/examples/example-csp-header.html b/examples/example-csp-header.html
@@ -0,0 +1,43 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <link rel="shortcut icon" type="image/ico" href="favicon.ico" />
+  <link rel="stylesheet" href="../dist/styles/css/example-demo.css" type="text/css"/>
+  <link rel="stylesheet" href="../dist/styles/css/slick-alpine-theme.css" type="text/css"/>
+  <meta http-equiv="Content-Security-Policy" content="default-src 'self' https://cdn.jsdelivr.net 'nonce-random-string' 'nonce-browser-sync'">
+</head>
+<body>
+<table width="100%">
+  <tr>
+    <td valign="top" width="50%">
+      <div id="myGrid"></div>
+    </td>
+    <td valign="top">
+      <h2>
+        <a href="/examples/index.html" id="link">&#x2302;</a>
+        Demonstrates:
+      </h2>
+      <ul>
+        <li>column span</li>
+      </ul>
+        <h2>View Source:</h2>
+        <ul>
+            <li><A href="https://github.com/6pac/SlickGrid/blob/master/examples/example-colspan.html" target="_sourcewindow"> View the source for this example on Github</a></li>
+        </ul>
+    </td>
+  </tr>
+</table>
+
+<script src="https://cdn.jsdelivr.net/npm/sortablejs/Sortable.min.js"></script>
+<script src="sortable-cdn-fallback.js"></script>
+
+<script src="../dist/browser/slick.core.js"></script>
+<script src="../dist/browser/slick.interactions.js"></script>
+<script src="../dist/browser/slick.grid.js"></script>
+<script src="../dist/browser/plugins/slick.cellrangedecorator.js"></script>
+<script src="../dist/browser/plugins/slick.cellrangeselector.js"></script>
+<script src="../dist/browser/plugins/slick.cellselectionmodel.js"></script>
+
+<script src="./example-csp-header.js"></script>
+</body>
+</html>
diff --git a/examples/example-csp-header.js b/examples/example-csp-header.js
@@ -0,0 +1,61 @@
+var grid;
+var columns = [
+  { id: "title", name: "Title", field: "title" },
+  { id: "duration", name: "Duration", field: "duration" },
+  { id: "%", name: "% Complete", field: "percentComplete", selectable: false, width: 100 },
+  { id: "start", name: "Start", field: "start" },
+  { id: "finish", name: "Finish", field: "finish" },
+  { id: "effort-driven", name: "Effort Driven", field: "effortDriven", width: 100 }
+];
+
+var options = {
+  enableCellNavigation: true,
+  enableColumnReorder: false
+};
+
+document.addEventListener("DOMContentLoaded", function () {
+  let gridElement = document.getElementById("myGrid");
+  gridElement.style.width = "600px";
+  gridElement.style.height = "500px";
+
+  let linkElement = document.getElementById("link");
+  //text-decoration: none; font-size: 22px
+  linkElement.style.textDecoration = "none";
+  linkElement.style.fontSize = "22px";
+
+  var data = [];
+  for (var i = 0; i < 500; i++) {
+    data[i] = {
+      title: "Task " + i,
+      duration: "5 days",
+      percentComplete: Math.round(Math.random() * 100),
+      start: "01/01/2009",
+      finish: "01/05/2009",
+      effortDriven: (i % 5 == 0)
+    };
+  }
+
+  data.getItemMetadata = function (row) {
+    if (row % 2 === 1) {
+      return {
+        "columns": {
+          "duration": {
+            "colspan": 3
+          }
+        }
+      };
+    } else {
+      return {
+        "columns": {
+          0: {
+            "colspan": "*"
+          }
+        }
+      };
+    }
+  };
+
+  grid = new Slick.Grid("#myGrid", data, columns, options);
+
+  grid.setSelectionModel(new Slick.CellSelectionModel());
+});
diff --git a/examples/index.html b/examples/index.html
@@ -79,10 +79,15 @@ <h2>Grouping</h2>
   <h2>Other Features</h2>
   <div>
     <ul>
-      <li><a href="example-explicit-initialization.html">Explicit initialization</a></li>
-      <li><a href="example9-row-reordering.html">Row selection &amp; reordering</a></li>
-      <li><a href="example10-async-post-render.html">Using background post-rendering to add graphs</a></li>
-      <li><a href="example10-async-post-render-cleanup.html">Background post-rendering with async cleanup</a></li>
+      <li><a href="./example-explicit-initialization.html">Explicit initialization</a></li>
+      <li><a href="./example9-row-reordering.html">Row selection &amp; reordering</a></li>
+      <li><a href="./example9-row-reordering-simple.html">Row reordering (simple example without delete)</a></li>
+      <li><a href="./example10-async-post-render.html">Using background post-rendering to add graphs</a></li>
+      <li><a href="./example10a-async-post-render-cleanup.html">Background post-rendering with async cleanup</a></li>
+      <li><a href="./example-auto-scroll-when-dragging.html">Auto scroll when dragging</a></li>
+      <li><a href="./example-column-hidden.html">Grid with Hidden Columns</a></li>
+      <li><a href="./example-frozen-columns-and-column-group-hidden-col.html">Frozen Grid with Hidden Columns</a></li>
+      <li><a href="./example-csp-header.html">CSP Header (Content Security Policy)</a></li>
     </ul>
   </div>
   <h2>Bootstrap, Dynamic Grids and Third Party component editors</h2>