Implemented phase 4 for the POC prototype in the Website service.

Services/Website/Resources/Static/js/shared.js

@@ -21,3 +21,22 @@ if (filters) {
   sync();
   desktop.addEventListener("change", sync);
 }
+
+// The new-listing form shows every field without scripts; here, only those that apply to the format and grading picked.
+const listingForm = document.querySelector(".listing-form__form");
+
+if (listingForm) {
+  const apply = () => {
+    const format = listingForm.querySelector("input[name=format]:checked")?.value;
+    const grading = listingForm.querySelector("input[name=grading]:checked")?.value;
+    const single = format === "single-issues";
+    const scopes = { "single-issues": single, collected: !single, slabbed: single && grading === "slabbed" };
+
+    for (const element of listingForm.querySelectorAll("[data-scope]")) {
+      element.hidden = !scopes[element.dataset.scope];
+    }
+  };
+
+  listingForm.addEventListener("change", apply);
+  apply();
+}