init

static/script.js

@@ -0,0 +1,107 @@
+document.addEventListener("DOMContentLoaded", () => {
+  const authorSearchInput = document.getElementById(
+    "author-search-input"
+  );
+  const authorDropdown = document.getElementById("author-dropdown");
+  const selectedAuthorsContainer = document.getElementById(
+    "selected-authors-container"
+  );
+  const dropdownItems = authorDropdown.querySelectorAll('[data-value]');
+  let selectedAuthors = new Set();
+
+  // Function to update highlights in dropdown
+  const updateDropdownHighlights = () => {
+    dropdownItems.forEach(item => {
+      const value = item.dataset.value;
+      if (selectedAuthors.has(value)) {
+        item.classList.add('bg-blue-200');
+      } else {
+        item.classList.remove('bg-blue-200');
+      }
+    });
+  };
+
+  // Function to render selected authors
+  const renderSelectedAuthors = () => {
+    // Clear existing chips, but keep the input field
+    Array.from(selectedAuthorsContainer.children).forEach((child) => {
+      if (child.id !== "author-search-input") {
+        child.remove();
+      }
+    });
+
+    selectedAuthors.forEach((author) => {
+      const authorChip = document.createElement("span");
+      authorChip.className =
+        "flex items-center bg-blue-100 text-blue-800 text-sm font-medium px-2.5 py-0.5 rounded-full";
+      authorChip.innerHTML = `
+                  ${author}
+                  <button type="button" class="ml-1 inline-flex items-center p-0.5 text-sm text-blue-400 bg-transparent rounded-sm hover:bg-blue-200 hover:text-blue-900" data-author="${author}">
+                      <svg class="w-2 h-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
+                          <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
+                      </svg>
+                      <span class="sr-only">Remove author</span>
+                  </button>
+              `;
+      selectedAuthorsContainer.insertBefore(
+        authorChip,
+        authorSearchInput
+      );
+    });
+    updateDropdownHighlights(); // Update highlights after rendering
+    authorSearchInput.focus(); // Keep focus on the input
+  };
+
+  // Handle input focus to show dropdown
+  authorSearchInput.addEventListener("focus", () => {
+    authorDropdown.classList.remove("hidden");
+  });
+
+  // Handle input for filtering
+  authorSearchInput.addEventListener('input', () => {
+    const query = authorSearchInput.value.toLowerCase();
+    dropdownItems.forEach(item => {
+      const text = item.textContent.toLowerCase();
+      item.style.display = text.includes(query) ? 'block' : 'none';
+    });
+    authorDropdown.classList.remove('hidden');
+  });
+
+  // Handle clicks outside to hide dropdown
+  document.addEventListener("click", (event) => {
+    if (
+      !selectedAuthorsContainer.contains(event.target) &&
+      !authorDropdown.contains(event.target)
+    ) {
+      authorDropdown.classList.add("hidden");
+    }
+  });
+
+  // Handle author selection from dropdown
+  authorDropdown.addEventListener("click", (event) => {
+    const selectedValue = event.target.dataset.value;
+    if (selectedValue) {
+      if (selectedAuthors.has(selectedValue)) {
+        selectedAuthors.delete(selectedValue);
+      } else {
+        selectedAuthors.add(selectedValue);
+      }
+      authorSearchInput.value = ""; // Clear input after selection
+      renderSelectedAuthors();
+      // Keep dropdown open for further selections
+    }
+  });
+
+  // Handle removing selected author chip
+  selectedAuthorsContainer.addEventListener("click", (event) => {
+    if (event.target.closest("button")) {
+      const authorToRemove =
+        event.target.closest("button").dataset.author;
+      selectedAuthors.delete(authorToRemove);
+      renderSelectedAuthors();
+    }
+  });
+
+  // Initial render and highlights
+  renderSelectedAuthors();
+});