fix: create click outside util function to hide ui (#231)

cdrani · Jun 1, 2024 · daa0486 · daa0486
1 parent 34d1ea7
commit daa0486
Show file tree

Hide file tree

Showing 7 changed files with 82 additions and 14 deletions.
diff --git a/src/events/listeners/header-listeners.js b/src/events/listeners/header-listeners.js
@@ -12,6 +12,10 @@ export default class HeaderListeners extends Listeners {
     }
 
     init() {
+        if (this._viewInFocus == 'fx' && this._setup) {
+            return this._reverb.init()
+        }
+
         if (this._setup) return
 
         this.#snipViewToggle()
@@ -40,6 +44,7 @@ export default class HeaderListeners extends Listeners {
     set currentView(selectedView = 'snip') {
         this._viewInFocus = selectedView
         if (selectedView != 'snip') this._video.resetTempTimes()
+        this._reverb.destroyClickHandlers()
 
         this._VIEWS.forEach((view) => {
             const viewButton = document.getElementById(`chorus-${view}-button`)

diff --git a/src/events/listeners/listeners.js b/src/events/listeners/listeners.js
@@ -17,5 +17,6 @@ export default class Listeners {
         const mainElement = document.getElementById('chorus-main')
         mainElement.style.display = 'none'
         this._video.resetTempTimes()
+        this._reverb.destroyClickHandlers()
     }
 }
diff --git a/src/models/chorus.js b/src/models/chorus.js
@@ -8,11 +8,13 @@ import ActionListeners from '../events/listeners/action-listeners.js'
 
 import { parseNodeString } from '../utils/parser.js'
 import { spotifyVideo } from '../actions/overload.js'
+import { clickOutside } from '../utils/click-outside.js'
 
 export default class Chorus {
     constructor(songTracker) {
         this._songTracker = songTracker
         this._video = spotifyVideo.element
+        this._clickOutsideHandler = null
     }
 
     init() {
@@ -34,14 +36,20 @@ export default class Chorus {
         return document.getElementById('chorus-controls')
     }
 
-    toggle() {
-        this.isShowing ? this.hide() : this.show()
+    async toggle() {
+        this.isShowing ? await this.hide() : this.show()
     }
 
     get #hasSnipControls() {
         return !!document.getElementById('chorus-snip-controls')
     }
 
+    #setupModal() {
+        if (this._clickOutsideHandler) return
+        this._clickOutsideHandler = clickOutside({ node: this.mainElement })
+        this.mainElement.addEventListener('click_outside', this.hide)
+    }
+
     #insertIntoDOM() {
         if (this.#hasSnipControls) return
 
@@ -56,12 +64,20 @@ export default class Chorus {
         this.chorusControls.appendChild(seekControlsEl)
     }
 
-    async hide() {
+    #cleanUpOutsideHandler() {
+        this._clickOutsideHandler?.destroy()
+        this._clickOutsideHandler = null
+    }
+
+    hide = async () => {
         if (!this.mainElement) return
 
         await this.headerListeners.hide()
         this.mainElement.style.display = 'none'
         this._video.resetTempTimes()
+
+        this.#cleanUpOutsideHandler()
+        this.headerListeners._reverb.destroyClickHandlers()
     }
 
     show() {
@@ -70,5 +86,6 @@ export default class Chorus {
 
         this.headerListeners.init()
         this.actionListeners.init()
+        this.#setupModal()
     }
 }
diff --git a/src/models/now-playing-icons.js b/src/models/now-playing-icons.js
@@ -58,14 +58,21 @@ export default class NowPlayingIcons {
         return createIcon(NOW_PLAYING_SKIP_ICON)
     }
 
+    #showModal() {
+        this.chorus.show()
+        this.snip.init()
+        this.snip.updateView()
+    }
+
+    async #hideModal() {
+        await this.chorus.hide()
+    }
+
     #setIconListeners() {
         const settingsIcon = document.getElementById('chorus-icon')
-        settingsIcon?.addEventListener('click', () => {
-            this.chorus.toggle()
-            if (this.chorus.isShowing) {
-                this.snip.init()
-                this.snip.updateView()
-            }
+        settingsIcon?.addEventListener('click', async (e) => {
+            e.preventDefault()
+            this.chorus.isShowing ? await this.#hideModal() : this.#showModal()
         })
 
         const skipIcon = document.getElementById('chorus-skip')
@@ -106,7 +113,7 @@ export default class NowPlayingIcons {
 
         if (updatedValues.isSkipped) {
             this.#highlightTrackListBlock(updatedValues)
-            document.querySelector('[data-testid="control-button-skip-forward"]')?.click()   
+            document.querySelector('[data-testid="control-button-skip-forward"]')?.click()
         }
     }
 }
diff --git a/src/models/reverb/reverb-controller.js b/src/models/reverb/reverb-controller.js
@@ -1,11 +1,13 @@
 import { store } from '../../stores/data.js'
 import { spotifyVideo } from '../../actions/overload.js'
 import { roomPresets } from '../../lib/reverb/presets.js'
+import { clickOutside } from '../../utils/click-outside.js'
 
 export default class ReverbController {
     constructor() {
         this._store = store
         this._reverb = spotifyVideo.reverb
+        this._clickOutsideHandlers = []
     }
 
     init() {
@@ -59,7 +61,28 @@ export default class ReverbController {
     }
 
     #setupToggleBtnEvents(btn) {
+        const clickHandler = clickOutside({ area: '#chorus-controls', node: btn })
+        this._clickOutsideHandlers.push(clickHandler)
+
         btn.addEventListener('click', this.#toggleListView)
+        btn.addEventListener('click_outside', () => {
+            btn.nextElementSibling.style.display = 'none'
+        })
+    }
+
+    destroyClickHandlers() {
+        this._clickOutsideHandlers.forEach((handler) => handler?.destroy())
+        this._clickOutsideHandlers = []
+
+        this.#closeLists()
+    }
+
+    #closeLists() {
+        const { roomList, convolverList } = this.elements
+        if (!roomList || !convolverList) return
+
+        roomList.style.display = 'none'
+        convolverList.style.display = 'none'
     }
 
     #setupSelectEvents() {
@@ -106,16 +129,15 @@ export default class ReverbController {
         const value = e.target.value
         await this._reverb.setReverbEffect(value)
 
-        const { roomList, convolverList, convolverEffect, roomEffect } = this.elements
+        const { convolverEffect, roomEffect } = this.elements
         const roomPresetUpdate = e.target?.parentElement?.id?.startsWith('room')
 
         convolverEffect.textContent = roomPresetUpdate ? 'none' : value
         roomEffect.textContent = roomPresetUpdate ? value : 'none'
 
         this.elements.presetSelection.textContent = value
 
-        roomList.style.display = 'none'
-        convolverList.style.display = 'none'
+        this.#closeLists()
     }
 
     async saveSelection() {

diff --git a/src/models/tracklist/track-list.js b/src/models/tracklist/track-list.js
@@ -190,7 +190,7 @@ export default class TrackList {
                     this._chorus.show()
                     await this._trackSnip.init(row)
                 } else if (currentIndex == this._previousRowNum) {
-                    this._chorus.toggle()
+                    await this._chorus.toggle()
                 }
 
                 const icon = row.querySelector('button[role="snip"]')

diff --git a/src/utils/click-outside.js b/src/utils/click-outside.js
@@ -0,0 +1,16 @@
+export function clickOutside({ area, node }) {
+    const handleClick = (event) => {
+        if (!node?.contains(event.target) && !event.defaultPrevented) {
+            node.dispatchEvent(new CustomEvent('click_outside', { detail: node }))
+        }
+    }
+
+    const boundary = document.querySelector(area) ?? document
+    boundary.addEventListener('click', handleClick, false)
+
+    return {
+        destroy() {
+            boundary.removeEventListener('click', handleClick, false)
+        }
+    }
+}