Merge pull request #815 from ndw/cookies

Another interactive example
xproc · Jan 30, 2025 · db80939 · db80939
2 parents 56d206e + 89faa51
commit db80939
Show file tree

Hide file tree

Showing 2 changed files with 67 additions and 0 deletions.
diff --git a/docker/apache2/htdocs/apps/cookies.html b/docker/apache2/htdocs/apps/cookies.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html xmlns='http://www.w3.org/1999/xhtml'>
+<head>
+<meta charset='UTF-8'/>
+<title>Cookies</title>
+</head>
+<body>
+<h1>Cookies</h1>
+
+<p id="message">I have no cookies.</p>
+
+<p>
+<button id="hobnail">Hobnail</button>
+<button id="chocchip">Chocolate chip</button>
+<button id="sugar">Sugar</button>
+</p>
+
+<div id="cookies"></div>
+
+</body>
+<script src="js/cookies.js"></script>
+</html>
diff --git a/docker/apache2/htdocs/apps/js/cookies.js b/docker/apache2/htdocs/apps/js/cookies.js
@@ -0,0 +1,45 @@
+(function() {
+  counter = 0;
+
+  function showCookies() {
+    const div = document.querySelector("#cookies");
+    let count = 0
+    let inner = "<table><thead><tr><th>Name</th><th>Value</th></tr></thead>"
+    inner += "<tbody>";
+    document.cookie.split("; ").forEach(cookie => {
+      if (cookie.startsWith("cookie") || cookie.startsWith("selenium")) {
+        count++;
+        tokens = cookie.split("=")
+        inner += `<tr><td>${tokens[0]}</td><td>${tokens[1]}</td></tr>`
+      }
+    });
+    if (count == 0) {
+      div.innerHTML = "";
+    } else {
+      div.innerHTML = `${inner}</tbody></table>`
+    }
+  }
+
+  function setCookie(name, value, seconds) {
+    var expires = "";
+    if (seconds) {
+        var date = new Date();
+        date.setTime(date.getTime() + (seconds*1000));
+        expires = "; expires=" + date.toUTCString();
+    }
+    document.cookie = name + "=" + (value || "")  + expires + "; SameSite=Strict; path=/";
+  }
+
+  function setupButton(id) {
+    let button = document.querySelector(`#${id}`);
+    button.addEventListener("click", (event) => {
+      setCookie(`cookie${++counter}`, button.innerHTML, 5)
+      showCookies()
+    });
+  }
+
+  setupButton("hobnail")
+  setupButton("chocchip")
+  setupButton("sugar")
+  showCookies()
+})();