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
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);
Users can drag tracks they wish to save for now in this list from the search results:
