refactor: make ts scripts more readable

static/js/anime.ts

@@ -1,62 +1,71 @@
-((): void => {
-  const parseClassList = (value: string | null): string[] => {
-    if (!value) {
-      return []
-    }
+export {}
 
-    return value
-      .split(' ')
-      .map((entry: string): string => entry.trim())
-      .filter((entry: string): boolean => entry.length > 0)
+const parseClassList = (value: string | null): string[] => {
+  if (!value) {
+    return []
   }
 
-  const setMenuState = (menu: HTMLElement, isOpen: boolean): void => {
-    const openClasses = parseClassList(menu.getAttribute('data-dropdown-open-classes'))
-    const closedClasses = parseClassList(menu.getAttribute('data-dropdown-closed-classes'))
+  return value
+    .split(' ')
+    .map((entry: string): string => entry.trim())
+    .filter((entry: string): boolean => entry.length > 0)
+}
 
-    if (isOpen) {
-      menu.classList.remove(...closedClasses)
-      menu.classList.add(...openClasses)
-      return
-    }
+const setDropdownMenuState = (menu: HTMLElement, isOpen: boolean): void => {
+  const openClasses = parseClassList(menu.getAttribute('data-dropdown-open-classes'))
+  const closedClasses = parseClassList(menu.getAttribute('data-dropdown-closed-classes'))
 
-    menu.classList.remove(...openClasses)
-    menu.classList.add(...closedClasses)
+  if (isOpen) {
+    menu.classList.remove(...closedClasses)
+    menu.classList.add(...openClasses)
+    return
   }
 
-  const toggleDropdown = (): void => {
-    const dropdown = document.getElementById('watchlist-dropdown')
-    if (!dropdown) {
-      return
-    }
+  menu.classList.remove(...openClasses)
+  menu.classList.add(...closedClasses)
+}
 
-    const isOpen = !dropdown.classList.contains('open')
-    dropdown.classList.toggle('open', isOpen)
-    const menu = dropdown.querySelector('[data-dropdown-menu]')
-    if (menu instanceof HTMLElement) {
-      setMenuState(menu, isOpen)
-    }
+const setWatchlistDropdownState = (isOpen: boolean): void => {
+  const dropdown = document.getElementById('watchlist-dropdown')
+  if (!dropdown) {
+    return
   }
 
-  ;(window as Window & { toggleDropdown?: () => void }).toggleDropdown = toggleDropdown
+  dropdown.classList.toggle('open', isOpen)
+  const menu = dropdown.querySelector('[data-dropdown-menu]')
+  if (menu instanceof HTMLElement) {
+    setDropdownMenuState(menu, isOpen)
+  }
+}
 
-  document.addEventListener('click', (event: MouseEvent): void => {
-    const dropdown = document.getElementById('watchlist-dropdown')
-    if (!dropdown) {
-      return
-    }
+const toggleWatchlistDropdown = (): void => {
+  const dropdown = document.getElementById('watchlist-dropdown')
+  if (!dropdown) {
+    return
+  }
 
-    const target = event.target
-    if (!(target instanceof Node)) {
-      return
-    }
+  setWatchlistDropdownState(!dropdown.classList.contains('open'))
+}
 
-    if (!dropdown.contains(target)) {
-      dropdown.classList.remove('open')
-      const menu = dropdown.querySelector('[data-dropdown-menu]')
-      if (menu instanceof HTMLElement) {
-        setMenuState(menu, false)
-      }
-    }
-  })
-})()
+const closeDropdownOnOutsideClick = (event: MouseEvent): void => {
+  const dropdown = document.getElementById('watchlist-dropdown')
+  if (!dropdown) {
+    return
+  }
+
+  const target = event.target
+  if (!(target instanceof Node)) {
+    return
+  }
+
+  if (!dropdown.contains(target)) {
+    setWatchlistDropdownState(false)
+  }
+}
+
+const initWatchlistDropdown = (): void => {
+  ;(window as Window & { toggleDropdown?: () => void }).toggleDropdown = toggleWatchlistDropdown
+  document.addEventListener('click', closeDropdownOnOutsideClick)
+}
+
+initWatchlistDropdown()