4.7 - Workspace playlist

Introduction

Schermafbeelding 2020-06-17 om 12 44 22

As users need to be able to save tracks they like somewhere in the search process. We decided it would be best to have an empty playlist which is visible from any main search interaction. When a users wish to save this playlist they can enter a name and click the save button, which is not working yet

Users can drag tracks they wish to save for now in this list from the search results:

But also from a project page:

How it works

To keep track of the current state a MutationObserver is made for both the project-page and the search results:

const observer = new MutationObserver(function(mutations) {

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

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

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

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

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

})
})

In order to make the tracks drag n' droppable:

//select all draggable tracks
const tracks = document.querySelectorAll('.draggableTrack')
//select the target
const target = document.querySelector('.target-drop')
//current dragging item indicator
let dragged



tracks.forEach(listItem => {
    // attach an eventListener on drag start for each draggable track
    listItem.addEventListener('dragstart', (dragEvent) => {
        // set the value of of each draggable track to the value of the item being dragged
        dragged = event.target
    })

})

target.addEventListener('dragover', (event) => {
    event.preventDefault()
})

document.addEventListener("dragenter", function(event) {

    //changes the color of the background if an item is dragged over the drop target
    if (event.target.className == "target-drop") {
      event.target.style.background = "purple";
    }

  }, false);

  document.addEventListener("dragleave", function(event) {
    // reset background of potential drop target when the draggable element leaves it
    if (event.target.className == "target-drop") {
      event.target.style.background = "";
    }

  }, false);



target.addEventListener("drop", function(event) {
    // prevent default action (open as link for some elements)
    event.preventDefault();

    // move dragged element to the selected drop target
    if (event.target.parentNode.className == "target-drop") {
      event.target.style.background = "";
      // remove the dragged element from the first list
      dragged.parentNode.removeChild( dragged );
      // append the dragged element to the target drop
      event.target.parentNode.appendChild( dragged );
    }
  }, false);