Initial commit

Groceries/wwwroot/js/controllers/list-filter.js

@@ -0,0 +1,17 @@
+import { Controller } from "/lib/hotwired/stimulus/dist/stimulus.js";
+
+export default class ListFilterController extends Controller {
+    static targets = ["option"];
+
+    filter(event) {
+        for (const option of this.optionTargets) {
+            if (!event.target.value) {
+                option.disabled = false;
+                continue;
+            }
+
+            const value = option.getAttribute("data-list-filter-value");
+            option.disabled = value !== event.target.value;
+        }
+    }
+}

Groceries/wwwroot/js/controllers/modal.js

@@ -0,0 +1,33 @@
+import { Controller } from "/lib/hotwired/stimulus/dist/stimulus.js";
+
+export default class ModalController extends Controller {
+    static targets = ["frame"];
+
+    open() {
+        if (!this.element.open) {
+            this.element.showModal();
+        }
+    }
+
+    close(event) {
+        if (!this.element.open) {
+            return;
+        }
+
+        event.preventDefault();
+
+        this.element.close();
+        this.frameTarget.src = undefined;
+        this.frameTarget.innerHTML = "";
+
+        switch (event.type) {
+            case "turbo:submit-end":
+                Turbo.visit(location.href, { action: "replace" });
+                break;
+            case "popstate":
+                event.stopImmediatePropagation();
+                history.go(1);
+                break;
+        }
+    }
+}

Groceries/wwwroot/js/controllers/search-form.js

@@ -0,0 +1,21 @@
+import { Controller } from "/lib/hotwired/stimulus/dist/stimulus.js";
+
+export default class SearchFormController extends Controller {
+    static targets = ["button"];
+
+    #timeoutHandle;
+
+    connect() {
+        this.buttonTarget.hidden = true;
+    }
+
+    disconnect() {
+        clearTimeout(this.#timeoutHandle);
+        this.buttonTarget.hidden = false;
+    }
+
+    input() {
+        clearTimeout(this.#timeoutHandle);
+        this.#timeoutHandle = setTimeout(() => this.element.requestSubmit(), 500);
+    }
+}

Groceries/wwwroot/js/main.js

@@ -0,0 +1,37 @@
+import { Application } from "/lib/hotwired/stimulus/dist/stimulus.js";
+
+import ListFilterController from "./controllers/list-filter.js";
+import ModalController from "./controllers/modal.js";
+import SearchFormController from "./controllers/search-form.js";
+
+const app = Application.start();
+app.register("list-filter", ListFilterController);
+app.register("modal", ModalController);
+app.register("search-form", SearchFormController);
+
+let timeout;
+document.addEventListener("turbo:visit", () => {
+    clearTimeout(timeout);
+});
+document.addEventListener("turbo:render", () => {
+    clearTimeout(timeout);
+    if (document.getElementById("sidebarToggle").checked) {
+        timeout = setTimeout(() => document.getElementById("sidebarToggle").checked = false, 500);
+    }
+});
+
+let transition;
+document.addEventListener("turbo:before-render", async event => {
+    if (document.startViewTransition) {
+        event.preventDefault();
+
+        if (transition == undefined) {
+            transition = document.startViewTransition(() => event.detail.resume());
+            await transition.finished;
+            transition = undefined;
+        } else {
+            await transition.finished;
+            event.detail.resume();
+        }
+    }
+});