mirror of
https://github.com/captbaritone/webamp.git
synced 2026-01-23 02:15:01 +00:00
Implement 'shade' mode
This commit is contained in:
Jordan Eldredge
parent
459fbb9c61
commit
47b9b5431f
4 changed files with 196 additions and 28 deletions
|
|
@ -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
|
||||
|
||||
|
|
|
|||
|
|
@ -9,6 +9,11 @@
|
|||
<audio id='player'></audio>
|
||||
<div id='title-bar' class='selected'>
|
||||
<div id='option'></div>
|
||||
<div id='shade-minus-sign'></div>
|
||||
<div id='shade-minute-first-digit'></div>
|
||||
<div id='shade-minute-second-digit'></div>
|
||||
<div id='shade-second-first-digit'></div>
|
||||
<div id='shade-second-second-digit'></div>
|
||||
<div id='minimize'></div>
|
||||
<div id='shade'></div>
|
||||
<div id='close'></div>
|
||||
|
|
|
|||
177
winamp.css
177
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;
|
||||
}
|
||||
|
|
|
|||
38
winamp.js
38
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) {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue