From e2be096441155f8ff4e5c21f6b9991be87eae8c9 Mon Sep 17 00:00:00 2001 From: Jordan Eldredge Date: Wed, 12 Nov 2014 16:03:12 -0800 Subject: [PATCH] Switch to a CSS solution to hiding meta info --- index.html | 4 ++-- winamp.css | 40 +++++++++++++++++++++++++++++----------- winamp.js | 25 +++++-------------------- 3 files changed, 36 insertions(+), 33 deletions(-) diff --git a/index.html b/index.html index 462f027c..451df486 100755 --- a/index.html +++ b/index.html @@ -6,7 +6,7 @@ -
+
@@ -23,7 +23,7 @@
-
+
diff --git a/winamp.css b/winamp.css index b75c3380..2b97e177 100755 --- a/winamp.css +++ b/winamp.css @@ -8,7 +8,6 @@ input[type=range]::-moz-focus-outer { border: 0; } a:focus { outline: none; } #shade-time { - display: none; cursor:url('cursors/MAINMENU.CUR'), auto; } @@ -133,7 +132,7 @@ a:focus { outline: none; } background-repeat: no-repeat; } -.status #play-pause.play #work-indicator { +.play .status #play-pause #work-indicator { position: absolute; top: 0px; left: 0px; @@ -142,15 +141,14 @@ a:focus { outline: none; } /* background-image: PLAYPAUS.BMP via Javascript */ background-position: -36px 0; } -.status #play-pause.play #work-indicator.selected { +.play .status #play-pause #work-indicator.selected { background-position: -39px 0; } -.status #play-pause.play { } -.status #play-pause.pause { background-position: -9px 0; } -.status #play-pause.stop { background-position: -18px 0; } +.play .status #play-pause { } +.pause .status #play-pause { background-position: -9px 0; } +.stop .status #play-pause { background-position: -18px 0; } .status #time { - display:none; position: absolute; left: 48px; left: 40px; @@ -159,6 +157,9 @@ a:focus { outline: none; } height: 13px; width: 59px; } + +.stop .status #time { display:none; } + .status #time #minus-sign { position: absolute; top: 6px; @@ -219,7 +220,6 @@ a:focus { outline: none; } .setting-balance #balance-message { display: block; } .media-info #kbps { - display: none; position: absolute; left: 111px; top: 43px; @@ -228,8 +228,9 @@ a:focus { outline: none; } overflow: hidden; } +.stop .media-info #kbps { display: none; } + .media-info #khz { - display: none; position: absolute; left: 156px; top: 43px; @@ -238,6 +239,8 @@ a:focus { outline: none; } overflow: hidden; } +.stop .media-info #khz { display: none; } + .media-info .mono-stereo { position: absolute; left: 212px; @@ -246,6 +249,8 @@ a:focus { outline: none; } height: 12px; } +.stop .media-info .mono-stero { display: none; } + .media-info .mono-stereo div { position: absolute; height: 12px; @@ -279,6 +284,7 @@ a:focus { outline: none; } background-position: 0 0; } #volume::-webkit-slider-thumb { + display: block; margin-top: 1px; height: 11px; width: 14px; @@ -367,7 +373,6 @@ a:focus { outline: none; } } #position { - display: none; position: absolute; left: 16px; top: 72px; @@ -391,14 +396,19 @@ a:focus { outline: none; } -webkit-box-sizing: border-box; position: relative; } + #position::-moz-range-thumb { height: 10px; width: 29px; background-position: -248px 0; /* background-image: POSBAR.BMP via Javascript */ - background-repeat: no-repeat; cursor:url('cursors/POSBAR.CUR'), auto; } + +/* For some reason, we can't use display: none here */ +.stop #position::-webkit-slider-thumb { visibility: hidden; } +.stop #position::-moz-range-thumb { visibility: hidden; } + #position:active::-webkit-slider-thumb { background-position: -278px 0; } @@ -606,12 +616,14 @@ a:focus { outline: none; } background-position: -20px -36px; /* background-image: TITLEBAR.BMP via Javascript */ } + .shade #position::-moz-range-thumb { height: 7px; width: 3px; background-position: -20px -36px; /* background-image: TITLEBAR.BMP via Javascript */ } + .shade #position.left::-webkit-slider-thumb { background-position: -17px -36px; } @@ -625,6 +637,10 @@ a:focus { outline: none; } background-position: -23px -36px; } +#shade-time { + display: none; +} + .shade #shade-time { display: block; position: absolute; @@ -634,6 +650,8 @@ a:focus { outline: none; } width: 25px; } +.stop.shade #shade-time { display:none; } + .shade #shade-time .character { position: absolute; top: 0; diff --git a/winamp.js b/winamp.js index 173f2db8..5c589b90 100755 --- a/winamp.js +++ b/winamp.js @@ -185,7 +185,6 @@ function Winamp () { }); this.media.addEventListener('ended', function() { - self.hideMetaInfo(); self.stopBlinkTime(); self.setStatus('stop'); }); @@ -218,7 +217,6 @@ function Winamp () { } this.nodes.play.onclick = function() { - self.showMetaInfo(); self.stopBlinkTime(); self.media.play(); self.setStatus('play'); @@ -234,7 +232,6 @@ function Winamp () { self.media.stop(); self.setStatus('stop'); self.stopBlinkTime(); - self.hideMetaInfo(); } this.nodes.next.onclick = function() { @@ -293,20 +290,6 @@ function Winamp () { } /* Functions */ - this.showMetaInfo = function() { - this.nodes.khz.style.display='block'; - this.nodes.kbps.style.display='block'; - this.nodes.position.style.display='block'; - this.nodes.time.style.display='block'; - }; - - this.hideMetaInfo = function() { - this.nodes.khz.style.display=''; - this.nodes.kbps.style.display=''; - this.nodes.position.style.display=''; - this.nodes.time.style.display=''; - }; - this.startBlinkTime = function(){ self.nodes.time.classList.add('blink'); self.nodes.shadeTime.classList.add('blink'); @@ -318,8 +301,11 @@ function Winamp () { this.setStatus = function(className) { - self.nodes.playPause.removeAttribute("class"); - self.nodes.playPause.classList.add(className); + var statusOptions = ['play', 'stop', 'pause']; + for(var i = 0; i < statusOptions.length; i++) { + self.nodes.winamp.classList.remove(statusOptions[i]); + } + self.nodes.winamp.classList.add(className); } // From 0-100 @@ -438,7 +424,6 @@ function Winamp () { this.startFile = function(file, fileName) { self.loadFile(file, fileName); - self.showMetaInfo(); self.media.play(); self.setStatus('play'); }