From 47b9b5431fe0fe166b09847c39841c860a801cd7 Mon Sep 17 00:00:00 2001 From: Jordan Eldredge Date: Tue, 4 Nov 2014 19:36:01 -0800 Subject: [PATCH] Implement 'shade' mode --- README.md | 4 +- index.html | 5 ++ winamp.css | 177 ++++++++++++++++++++++++++++++++++++++++++++++++----- winamp.js | 38 ++++++++---- 4 files changed, 196 insertions(+), 28 deletions(-) diff --git a/README.md b/README.md index f5fa59b5..f2471268 100755 --- a/README.md +++ b/README.md @@ -10,11 +10,12 @@ Works in modern versions of Firefox, Safari and Chrome. Untested in IE. ## TODO +- Shade mode + - Left and right position slider - Investigate real space text - Blog post - Test on IE 10 - Handle "working" icon -- Minimized "shade" view - Better presentation around it - Test other themes - Tool for selecting a theme @@ -31,6 +32,7 @@ Works in modern versions of Firefox, Safari and Chrome. Untested in IE. - What is the line graph version? - What is the bar graph version? - What do the clutter bar letters do? + - Check behavior of position slider icon as it moves from left to right ## Someday Maybe diff --git a/index.html b/index.html index 60145cc0..d91dcb6d 100755 --- a/index.html +++ b/index.html @@ -9,6 +9,11 @@
+
+
+
+
+
diff --git a/winamp.css b/winamp.css index a670e1db..3bc4932e 100755 --- a/winamp.css +++ b/winamp.css @@ -7,6 +7,13 @@ input[type=range]:focus { outline: none; } input[type=range]::-moz-focus-outer { border: 0; } a:focus { outline: none; } +#shade-minute-first-digit, +#shade-minute-second-digit, +#shade-second-first-digit, +#shade-second-second-digit { + display: none; +} + #winamp { position: relative; background-image: url('skins/default/MAIN.BMP'); @@ -15,14 +22,6 @@ a:focus { outline: none; } cursor:url('skins/default/MAINMENU.CUR'), auto; } -.actions { - position: absolute; - top: 88px; - left: 16px; - height: 18px; - width: 114px; -} - #title-bar { position: absolute; top: 0; @@ -374,18 +373,39 @@ a:focus { outline: none; } background-image: url('skins/default/CBUTTONS.BMP'); height: 18px; width: 23px; - float: left; + position: absolute; } -.actions #previous { background-position: 0 0; } +.actions #previous { + top: 88px; + left: 16px; + background-position: 0 0; +} .actions #previous:active { background-position: 0 -18px; } -.actions #play { background-position: -23px 0; } +.actions #play { + top: 88px; + left: 39px; + background-position: -23px 0; +} .actions #play:active { background-position: -23px -18px; } -.actions #pause { background-position: -46px 0; } +.actions #pause { + top: 88px; + left: 62px; + background-position: -46px 0; +} .actions #pause:active { background-position: -46px -18px; } -.actions #stop { background-position: -69px 0; } +.actions #stop { + top: 88px; + left: 85px; + background-position: -69px 0; +} .actions #stop:active { background-position: -69px -18px; } -.actions #next { background-position: -92px 0; width: 22px; } +.actions #next { + top: 88px; + left: 108px; + background-position: -92px 0; + width: 22px; +} .actions #next:active { background-position: -92px -18px; } #eject { @@ -469,3 +489,132 @@ a:focus { outline: none; } } #file-input { display: none; } + +/* Shade View */ +#winamp.shade { + height: 14px; + overflow: hidden; +} + +.shade #title-bar { + background-position: -27px -42px; +} + +.shade #title-bar.selected { + background-position: -27px -29px; +} + +.shade #title-bar #shade { + background-position: 0px -27px; +} +.shade #title-bar #shade:active { + background-position: -9px -27px; +} +.shade .actions div { + background: none; + position: absolute; +} +.shade #previous { + height: 10px; + width: 7px; + top: 2px; + left: 169px; +} +.shade #play { + height: 10px; + width: 10px; + top: 2px; + left: 176px; +} +.shade #pause { + height: 10px; + width: 9px; + top: 2px; + left: 186px; +} +.shade #stop { + height: 10px; + width: 9px; + top: 2px; + left: 195px; +} +.shade #next { + height: 10px; + width: 10px; + top: 2px; + left: 204px; +} +.shade #eject { + height: 10px; + width: 10px; + top: 2px; + left: 215px; + background: none; +} + +.shade #position { + position: absolute; + left: 226px; + top: 4px; + width: 17px; + height: 7px; + background-image: url('skins/default/TITLEBAR.BMP'); + background-position: -0px -36px; +} + +.shade #position::-webkit-slider-thumb { + height: 7px; + width: 3px; + background-position: -20px -36px; + background-image: url('skins/default/TITLEBAR.BMP'); +} +.shade #position::-moz-range-thumb { + height: 7px; + width: 3px; + background-position: -20px -36px; + background-image: url('skins/default/TITLEBAR.BMP'); +} +.shade #position:active::-webkit-slider-thumb { + background-position: -20px -36px; +} +.shade #position:active::-moz-range-thumb { + background-position: -20px -36px; +} + +.shade #shade-minus-sign { + display: block; + top: 5px; + left: 126px; + width: 5px; + height:6px; +} +.shade #shade-minute-first-digit { + display: block; + top: 5px; + left: 133px; + width: 5px; + height:6px; +} + +.shade #shade-minute-second-digit { + display: block; + top: 5px; + left: 138px; + width: 5px; + height:6px; +} +.shade #shade-second-first-digit { + display: block; + top: 5px; + left: 147px; + width: 5px; + height:6px; +} + +.shade #shade-second-second-digit { + display: block; + top: 5px; + left: 152px; + width: 5px; + height:6px; +} diff --git a/winamp.js b/winamp.js index 2bf1394a..15f7ee3d 100755 --- a/winamp.js +++ b/winamp.js @@ -81,6 +81,7 @@ function Winamp () { this.nodes = { 'close': document.getElementById('close'), + 'shade': document.getElementById('shade'), 'position': document.getElementById('position'), 'fileInput': document.getElementById('file-input'), 'time': document.getElementById('time'), @@ -111,6 +112,10 @@ function Winamp () { self.media.previous(); }); + this.nodes.shade.onclick = function() { + self.nodes.winamp.classList.toggle('shade'); + } + this.nodes.time.onclick = function() { this.classList.toggle('countdown'); self.updateTime(); @@ -204,15 +209,19 @@ function Winamp () { html = digitHtml(digits[0]); document.getElementById('minute-first-digit').innerHTML = ''; document.getElementById('minute-first-digit').appendChild(html); + displayCharacterInNode(digits[0], document.getElementById('shade-minute-first-digit')); html = digitHtml(digits[1]); document.getElementById('minute-second-digit').innerHTML = ''; document.getElementById('minute-second-digit').appendChild(html); + displayCharacterInNode(digits[1], document.getElementById('shade-minute-second-digit')); html = digitHtml(digits[2]); document.getElementById('second-first-digit').innerHTML = ''; document.getElementById('second-first-digit').appendChild(html); + displayCharacterInNode(digits[2], document.getElementById('shade-second-first-digit')); html = digitHtml(digits[3]); document.getElementById('second-second-digit').innerHTML = ''; document.getElementById('second-second-digit').appendChild(html); + displayCharacterInNode(digits[3], document.getElementById('shade-second-second-digit')); } @@ -257,6 +266,21 @@ function Winamp () { this.updateTime(); } + function displayCharacterInNode(character, node) { + position = charPosition(character); + row = position[0]; + column = position[1]; + verticalOffset = row * 6; + horizontalOffset = column * 5; + + x = '-' + horizontalOffset + 'px'; + y = '-' + verticalOffset + 'px' + node.style.backgroundPosition = x + ' ' + y; + node.classList.add('character'); + node.innerHTML = character; + return node; + } + function digitHtml(digit) { horizontalOffset = digit * 9; div = document.createElement('div'); @@ -276,19 +300,7 @@ function Winamp () { } function charHtml(char) { - position = charPosition(char); - row = position[0]; - column = position[1]; - verticalOffset = row * 6; - horizontalOffset = column * 5; - - div = document.createElement('div'); - div.classList.add('character'); - x = '-' + horizontalOffset + 'px'; - y = '-' + verticalOffset + 'px' - div.style.backgroundPosition = x + ' ' + y; - div.innerHTML = char; - return div; + return displayCharacterInNode(char, document.createElement('div')); } function charPosition(char) {