Theme Switcher

2024-05-24 21:37:33 +02:00
parent cceab89523
commit 4dc97daf63
8 changed files with 219 additions and 79 deletions
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <?php include_once "../../../base/meta.php" ?>
+
+  <title>Colour Selector</title>
+
+  <script src="./js/formValidation.js"></script>
+
+  <?php
+  // PHP
+  include_once "../../../base/settings.php";
+  include_once "../../../base/headers.php";
+
+  if (!isset($_COOKIE["validation"])) {
+    setcookie("validation", "false");
+  }
+
+  if (isset($_POST["colour"])) {
+    $colour = $_POST["colour"];
+
+    if (!preg_match("/^#([0-9A-Fa-f]{3,4}|[0-9A-Fa-f]{6}|[0-9A-Fa-f]{8})$/", $colour)) {
+      $error = "Invalid hex colour";
+      unset($colour);
+    }
+  }
+
+  Headers::html();
+  ?>
+</head>
+
+<body style="background-color: <?= $colour ?>">
+
+  <div class="p-3">
+    <div class="form-check form-switch mb-3">
+      <input class="form-check-input" type="checkbox" role="switch" id="clientSideValidate" <?= ($_COOKIE["validation"] ?? false) === "true" ? "checked" : "" ?>>
+      <label class=" form-check-label" for="clientSideValidate">Use Client Side Validation</label>
+    </div>
+    <form method="post" class="needs-validation" novalidate>
+      <div class="mb-3">
+        <label class="form-label" for="colour">Colour Code</label>
+        <input class="form-control" id="colour" name="colour" required pattern="^#([0-9A-Fa-f]{3,4}|[0-9A-Fa-f]{6}|[0-9A-Fa-f]{8})$" />
+        <div class="invalid-feedback">
+          Please enter valid hex colour code
+        </div>
+      </div>
+      <button type="submit" class="btn btn-primary mb-3 w-100">Send</button>
+    </form>
+    <?php if (isset($error)) { ?>
+      <h2 class="text-danger"><?= $error ?></h2>
+    <?php } ?>
+  </div>
+</body>
+
+</html>
@@ -0,0 +1,37 @@
+"use strict";
+
+document.addEventListener("DOMContentLoaded", () => {
+  const handler = (event) => {
+    if (!event.target.checkValidity()) {
+      event.preventDefault();
+      event.stopPropagation();
+    }
+
+    event.target.classList.add("was-validated");
+  };
+
+  const addValidation = () => {
+    const forms = document.querySelectorAll(".needs-validation");
+
+    Array.from(forms).forEach((form) => {
+      form.addEventListener("submit", handler, false);
+    });
+  };
+
+  const removeValidation = () => {
+    const forms = document.querySelectorAll(".needs-validation");
+
+    Array.from(forms).forEach((form) => {
+      form.removeEventListener("submit", handler, false);
+    });
+  };
+
+  const switchHandler = () => {
+    _switch.checked ? addValidation() : removeValidation();
+    document.cookie = `validation=${_switch.checked}`;
+  };
+
+  const _switch = document.getElementById("clientSideValidate");
+  _switch.addEventListener("change", switchHandler);
+  switchHandler();
+});