Search box improvements

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 ## WIP
 - Major performance improvements
+- Search box improvements
 - Fix position of error box
 
 ## 1.0.3

src/js/utils/button.js

@@ -28,7 +28,7 @@ const button = {
     playBtn.classList.add('play-button')
     playBtn.innerHTML = icons.play
     playBtn.addEventListener('click', ({ currentTarget }) => {
-      const row = currentTarget.closest('tr')
+      const row = currentTarget.closest('.row')
 
       if (row !== null && row.classList.contains('is-playing')) {
         // If the row already contains the "is-playing" class, the user has paused the track

src/js/utils/search.js

@@ -1,15 +1,28 @@
 // Search
 const empty = require('./empty.js')
 const button = require('./button.js')
+const icons = require('./icons.js')
+
+const dropdown = document.getElementById('track-dropdown')
+let input
+let icon
+
+const emptySearch = () => {
+  input.value = ''
+  icon.innerHTML = icons.search
+  dropdown.classList.remove('show')
+}
 
 const search = {
   init: (target, tracks) => {
-    const dropdown = document.getElementById('track-dropdown')
+    input = target
+    icon = input.nextElementSibling
     empty(dropdown)
-    if (target.value.length) {
+    if (input.value.length) {
+      search.enableEmpty()
       dropdown.classList.add('show')
       Object.entries(tracks).forEach(([key, value]) => {
-        if (value.name.toLowerCase().includes(target.value.toLowerCase())) {
+        if (value.name.toLowerCase().includes(input.value.toLowerCase())) {
           dropdown.append(search.createItem(value))
         }
       })
@@ -19,16 +32,21 @@ const search = {
       }
     } else {
       dropdown.classList.remove('show')
+      icon.innerHTML = icons.cross
       empty(dropdown)
     }
   },
+  enableEmpty: () => {
+    icon.innerHTML = icons.cross
+    icon.addEventListener('click', emptySearch, { once: true })
+  },
   createItem: (value) => {
     const text = document.createElement('span')
     text.innerText = value.name
 
     const item = document.createElement('div')
     item.href = '#'
-    item.classList.add('dropdown-item')
+    item.classList.add('dropdown-item', 'row')
     item.append(button.play(value))
     item.append(text)
 

src/js/utils/table.js

@@ -17,6 +17,7 @@ const table = {
     artist.innerText = track.artist !== undefined ? track.artist : ''
 
     const tr = document.createElement('tr')
+    tr.classList.add('row')
     tr.append(id, name, time, artist)
     tr.setAttribute('data-id', track.track_id)