use spritesheet for player controls

fabslab · Mar 3, 2014 · e6c31e0 · e6c31e0
1 parent cf42a95
commit e6c31e0
Show file tree

Hide file tree

Showing 4 changed files with 68 additions and 62 deletions.
diff --git a/public/images/controls-sprite.png b/public/images/controls-sprite.png
diff --git a/public/index.html b/public/index.html
@@ -48,9 +48,9 @@
     <li id="8">Driven</li>
   </ul>
   <div class="controls">
-    <div id="prev"></div>
-    <div id="play"></div>
-    <div id="next"></div>
+    <i id="prev" class="sprite sprite-prev"></i>
+    <i id="play" class="sprite sprite-play"></i>
+    <i id="next" class="sprite sprite-next"></i>
   </div>
 </div>
 

diff --git a/public/scripts/main.js b/public/scripts/main.js
@@ -104,16 +104,16 @@
     } else if (track.ended) {
       active.className = '';
       // reset back to first song, wait to play
-      document.getElementById(1).className = 'active';
-      playButton.className = '';
+      document.getElementById('1').className = 'active';
+      playButton.className = 'sprite sprite-play';
     }
   }
 
   function togglePlayback(e) {
     if (e) e.preventDefault();
     var active = document.getElementsByClassName('active')[0];
     ~active.className.indexOf('playing') ? active.className = 'active' : active.className = 'active playing';
-    playButton.className ? playButton.className = '' : playButton.className = 'pause';
+    playButton.className == 'sprite sprite-pause' ? playButton.className = 'sprite sprite-play' : playButton.className = 'sprite sprite-pause';
     track.paused || track.ended ? track.play() : track.pause();
   }
 
@@ -133,7 +133,7 @@
     var src = audioFolder + num + ext;
     if (~track.src.indexOf(src)) return;
     track.src = src;
-    playButton.className = 'pause';
+    playButton.className = 'sprite sprite-pause';
     waveBase.src = imgFolder + num + '-bg.png';
     waveCover.style.width = 0;
     waveCover.style.backgroundImage = 'url(' + imgFolder + num + '.png)';

diff --git a/public/styles/main.css b/public/styles/main.css
@@ -76,61 +76,6 @@ li a {
   background: url(../images/indicator.gif);
 }
 
-.controls {
-  margin: 0 auto;
-  width: 300px;
-  text-align: center;
-}
-
-.controls div {
-  cursor: pointer;
-  display: inline-block;
-}
-
-#play {
-  margin-bottom: -5px;
-  height: 60px;
-  width: 150px;
-}
-
-#play {
-  background: url(../images/play.png) 55% no-repeat;
-  background-size: contain;
-}
-
-#play.pause {
-  background: url(../images/pause.png) center no-repeat;
-  background-size: contain;
-  opacity: 0.85;
-  transition: opacity 0.2s;
-}
-
-#play.pause:hover {
-  opacity: 1;
-}
-
-#prev, #next {
-  height: 45px;
-  width: 70px;
-  opacity: 0.85;
-  transition: opacity 0.2s;
-}
-
-#prev:hover, #next:hover {
-  opacity: 1.0;
-  transition: opacity 0.2s;
-}
-
-#prev {
-  background-image: url(../images/prev.png);
-  background-size: contain;
-}
-
-#next {
-  background-image: url(../images/next.png);
-  background-size: contain;
-}
-
 .links {
   text-align: right;
   position: absolute;
@@ -253,4 +198,65 @@ a {
   -moz-transition: color 0.2s;
   -webkit-transition: color 0.2s;
   transition: color 0.2s;
+}
+
+.sprite {
+  background-image: url(../images/controls-sprite.png);
+  background-repeat: no-repeat;
+}
+
+.controls {
+  margin: 0 auto;
+  width: 300px;
+  text-align: center;
+}
+
+.controls i {
+  cursor: pointer;
+  display: inline-block;
+}
+
+#play {
+  margin-bottom: -15px;
+  margin-left: 20px;
+  margin-right: 15px;
+  width: 90px;
+  height: 80px;
+  background-position: -86px -1px;
+}
+
+#play.sprite-pause {
+  margin-left: 22px;
+  margin-right: 20px;
+  margin-bottom: -17px;
+  opacity: 0.9;
+  opacity: 0.9;
+  transition: opacity 0.2s;
+  width: 83px;
+  height: 82px;
+  background-position: -1px -46px;
+}
+
+#play.sprite-pause:hover {
+  opacity: 1;
+}
+
+#prev, #next {
+  opacity: 0.9;
+  transition: opacity 0.2s;
+  width: 69px;
+  height: 43px;
+}
+
+#prev:hover, #next:hover {
+  opacity: 1.0;
+  transition: opacity 0.2s;
+}
+
+#prev {
+  background-position: -86px -83px;
+}
+
+#next {
+  background-position: -1px -1px;
 }