highlight selected song and navigation improvments

6859-sp21 · May 19, 2021 · b7060fd · b7060fd
1 parent b173691
commit b7060fd
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 5 deletions.
diff --git a/comparison.html b/comparison.html
@@ -156,7 +156,7 @@
 function goHome() {
   sessionStorage.playlist = JSON.stringify(examplePlaylist);
   sessionStorage.yourPlaylist = JSON.stringify(yourPlaylist);
-  window.location = 'index.html';
+  window.location = 'playlist.html';
 }
 
 var removeSong;
@@ -693,6 +693,13 @@
 
             svg.selectAll("path")
               .style("fill", function(d){ return getDarkerByColor(this.style.fill)}) 
+            if (selectedSong.length > 0){
+              let oldElement = document.getElementById(selectedSong);
+              oldElement.style.color = 'initial';
+              oldElement.style.border = 'initial';
+              oldElement.style['font-weight'] = 'initial';
+            }
+
             selectedSong = d;
             svg.selectAll("path")
               .filter(d => d == selectedSong)
@@ -707,9 +714,13 @@
             let player = document.getElementById('left-player');
             player.innerHTML = `<iframe  src="https://open.spotify.com/embed/track/${d}" width="250" height="100" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe>`;
 
-            document.getElementById(d).scrollIntoView({ 
+            let listElement = document.getElementById(d);
+            listElement.scrollIntoView({ 
               behavior: 'smooth' 
             });
+            listElement.style.color = colors[3];
+            listElement.style.border = `1px solid ${colors[3]}`;
+            listElement.style['font-weight'] = '900';
           } 
 
           else {
@@ -718,6 +729,13 @@
             svg.selectAll("path")
               // .filter(d => d == selectedRightSong)
               .style("fill", function(d){ return getDarkerByColor(this.style.fill)}) 
+            if (selectedRightSong.length > 0){
+              let oldElement = document.getElementById(`${selectedRightSong}-custom`);
+              oldElement.style.color = 'initial';
+              oldElement.style.border = 'initial';
+              oldElement.style['font-weight'] = 'initial';
+            }
+
             selectedRightSong = d;
             svg.selectAll("path")
               .filter(d => d == selectedRightSong)
@@ -731,9 +749,14 @@
             let player = document.getElementById('right-player');
             player.innerHTML = `<iframe  src="https://open.spotify.com/embed/track/${d}" width="250" height="100" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe>`;
 
-            document.getElementById(`${d}-custom`).scrollIntoView({ 
+
+            let listElement = document.getElementById(`${d}-custom`)
+            listElement.scrollIntoView({ 
               behavior: 'smooth' 
             });
+            listElement.style.color = colors[3];
+            listElement.style.border = `1px solid ${colors[3]}`;
+            listElement.style['font-weight'] = '900';
 
           }
 

diff --git a/index.html b/index.html
@@ -67,7 +67,7 @@
     <!-- PLAYLIST EXPLORATION -->
     <div class="full-height-div">
       <div class="section-title" id="left-title">playlist exploration</div>
-
+      <p class="section-subtitle">click a bubble for more info</p>
       <div class="fill-remaining-space-div" style="overflow-y:scroll">
         <svg id='home' class="collapse show" width="100%" height="100%" style="vertical-align: top;"></svg>
       </div>

diff --git a/playlist.html b/playlist.html
@@ -640,6 +640,13 @@
           if (svg_id === 'svg#playlist'){
             svg.selectAll("path")
               .style("fill", function(d){ return getDarkerByColor(this.style.fill)}) 
+            if (selectedSong.length > 0){
+              let oldElement = document.getElementById(selectedSong);
+              oldElement.style.color = 'initial';
+              oldElement.style.border = 'initial';
+              oldElement.style['font-weight'] = 'initial';
+            }
+
             selectedSong = d;
             svg.selectAll("path")
               .filter(d => d == selectedSong)
@@ -653,9 +660,13 @@
             let player = document.getElementById('left-player');
             player.innerHTML = `<iframe  src="https://open.spotify.com/embed/track/${d}" width="250" height="100" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe>`;
 
-            document.getElementById(d).scrollIntoView({ 
+            let listElement = document.getElementById(d);
+            listElement.scrollIntoView({ 
               behavior: 'smooth' 
             });
+            listElement.style.color = colors[3];
+            listElement.style.border = `1px solid ${colors[3]}`;
+            listElement.style['font-weight'] = '900';
           } 
 
           else {

diff --git a/style.css b/style.css
@@ -49,6 +49,13 @@ html {
   padding-left: 5px; 
 }
 
+.section-subtitle{
+  /*font-size: 30px;*/
+  /*padding-top: 15px; */
+  padding-left: 5px; 
+  opacity: .7;
+}
+
 .help-info{
   margin-top: 20px; 
 }