4.6 - Track information

Introduction

When users click on the information button information about the track appears on the screen:

How it works

This element also function within a MutationObserver similair to the workspaceplaylist:

const observer = new MutationObserver(function(mutations) {

mutations.forEach(function(mutation) {
if(mutation){

// this is where the eventListeners are placed
...
}

const results = document.querySelector('.search-results')
const projectPage = document.querySelector('.project-page')

observer.observe(results, {
    childList: true,
    attributes: true,
    characterData: true,

})
observer.observe(projectPage, {
    childList: true,
    attributes: true,
    characterData: true,

})
})

The difference is that here we are looking to place click events at the info anchortags:

        if(mutation){
            // when a mutation is observed reselect all track info links
            const anchorList = document.querySelectorAll('.track-info-link')

            anchorList.forEach(anchor => {
                // add a click event to each track info link
                anchor.addEventListener('click', function(event){
                    // prevent it from linking to a new page
                    event.preventDefault()
                    // make the track information element visible
                    document.querySelector('.track-information').style.display = 'block'

                    const trackId = anchor.id
                    // intercept the url the anchor tag is pointing at which is a track detail page
                    const url = anchor.getAttribute('href')
                    // fetch this url from the server and pass a query with the track id and token, the right track will be fetched from the spotify API on the server 
                    fetch(url + '?query=' + trackId + '&async=true' + '&token=' + token)
                        .then(res => res.text())
                        .then(html => {
                            // the response will be the component with the right data
                            const trackInfo = document.querySelector('.track-information')

                            // append the component to the trackInfo section
                            trackInfo.innerHTML = html
                            const closeButton = document.querySelectorAll('.close-button')

                            // make both close buttons clickable, and hides the trackInfo component
                            closeButton[0].addEventListener('click', () => {
                                trackInfo.style.display = 'none'
                            })
                            closeButton[1].addEventListener('click', () => {
                                trackInfo.style.display = 'none'
                            })


                        })

                })

            })

        }