Mirrors/webamp
1
0
Fork 0
mirror of https://github.com/captbaritone/webamp.git synced 2026-07-21 00:59:29 +00:00
Code Issues Projects Releases Wiki Activity

Abstract volume, balance, and shade sprite info

Browse source
This commit is contained in:
Jordan Eldredge 2015-02-07 22:00:50 -08:00
parent 81b1406bdb
commit cbae6b3e50
4 changed files with 27 additions and 59 deletions
Download patch file Download diff file Expand all files Collapse all files

51
css/main.css
View file

@ -288,7 +288,6 @@
top: 57px;
height: 13px;
width: 68px;
/* background-image: VOLUME.BMP via Javascript */
background-position: 0 0;
cursor:url('../cursors/POSBAR.PNG?inline'), auto;
}
@ -297,25 +296,13 @@
margin-top: 1px;
height: 11px;
width: 14px;
/* background-image: VOLUME.BMP via Javascript */
background-position: -15px -422px;
cursor:url('../cursors/POSBAR.PNG?inline'), auto;
background-repeat: no-repeat;
}
#volume::-moz-range-thumb {
margin-top: 1px;
height: 11px;
width: 14px;
/* background-image: VOLUME.BMP via Javascript */
background-position: -15px -422px;
cursor:url('../cursors/POSBAR.PNG?inline'), auto;
background-repeat: no-repeat;
}
#volume:active::-webkit-slider-thumb {
background-position: 0 -422px;
}
#volume:active::-moz-range-thumb {
background-position: 0 -422px;
}
#balance {
@ -324,8 +311,6 @@
top: 57px;
height: 13px;
width: 38px;
/* background-image: BALANCE.BMP via Javascript */
background-position: -9px 0;
cursor:url('../cursors/POSBAR.PNG?inline'), auto;
}
@ -333,26 +318,13 @@
top: 1px;
height: 11px;
width: 14px;
/* background-image: VOLUME.BMP via Javascript */
background-position: -15px -422px;
cursor:url('../cursors/POSBAR.PNG?inline'), auto;
background-repeat: no-repeat;
}
#balance::-moz-range-thumb {
top: 1px;
height: 11px;
width: 14px;
/* background-image: VOLUME.BMP via Javascript */
background-position: -15px -422px;
cursor:url('../cursors/POSBAR.PNG?inline'), auto;
background-repeat: no-repeat;
}
#balance:active::-webkit-slider-thumb {
background-position: 0 -422px;
}
#balance:active::-moz-range-thumb {
background-position: 0 -422px;
}
.windows {
@ -614,35 +586,20 @@
top: 4px;
width: 17px;
height: 7px;
/* background-image: TITLEBAR.BMP via Javascript */
background-position: -0px -36px;
}
.shade #position::-webkit-slider-thumb {
height: 7px;
width: 3px;
background-position: -20px -36px;
/* background-image: TITLEBAR.BMP via Javascript */
/* This make it appear. Not sure why */
background: none;
}
.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;
}
.shade #position.left::-moz-range-thumb {
background-position: -17px -36px;
}
.shade #position.right::-webkit-slider-thumb {
background-position: -23px -36px;
}
.shade #position.right::-moz-range-thumb {
background-position: -23px -36px;
/* This make it appear. Not sure why */
background: none;
}
#shade-time {

2
js/main-window.js
View file

@ -325,7 +325,7 @@ MainWindow = {
balance = Math.abs(balance) / 100;
var sprite = Math.round(balance * 28);
var offset = (sprite - 1) * 15;
this.nodes.balance.style.backgroundPosition = '-9px -' + offset + 'px';
this.nodes.balance.style.backgroundPosition = '0px -' + offset + 'px';
},
changeState: function() {

22
js/skin-sprites.js
View file

@ -1,4 +1,12 @@
var SKIN_SPRITES = [
{
img: "BALANCE",
sprites: [
{ selectors: ["#balance"], x: 9, y: 0, width: 38, height: 420},
{ selectors: ["#balance::-webkit-slider-thumb", "#balance::-moz-range-thumb"], x: 15, y: 422, width: 14, height: 11},
{ selectors: ["#balance::-webkit-slider-thumb:active", "#balance::-moz-range-thumb:active"], x: 0, y: 422, width: 14, height: 11},
]
},
{
img: "MAIN",
sprites: [
@ -95,7 +103,19 @@ var SKIN_SPRITES = [
{ selectors: [".shade #title-bar"], x: 27, y: 42, width: 275, height: 14},
{ selectors: [".shade #title-bar.selected"], x: 27, y: 29, width: 275, height: 14},
{ selectors: [".shade #title-bar #shade"], x: 0, y: 27, width: 9, height: 9},
{ selectors: [".shade #title-bar #shade:active"], x: 9, y: 27, width: 9, height: 9}
{ selectors: [".shade #title-bar #shade:active"], x: 9, y: 27, width: 9, height: 9},
{ selectors: [".shade #position"], x: 0, y: 36, width: 17, height: 7},
{ selectors: [".shade #position::-moz-range-thumb", ".shade #position::-webkit-slider-thumb"], x: 20, y: 36, width: 3, height: 7},
{ selectors: [".shade #position.left::-moz-range-thumb", ".shade #position.left::-webkit-slider-thumb"], x: 17, y: 36, width: 3, height: 7},
{ selectors: [".shade #position.right::-moz-range-thumb", ".shade #position.right::-webkit-slider-thumb"], x: 23, y: 36, width: 3, height: 7}
]
},
{
img: "VOLUME",
sprites: [
{ selectors: ["#volume"], x: 0, y: 0, width: 68, height: 420},
{ selectors: ["#volume::-webkit-slider-thumb", "#volume::-moz-range-thumb"], x: 15, y: 422, width: 14, height: 11},
{ selectors: ["#volume::-webkit-slider-thumb:active", "#volume::-moz-range-thumb:active"], x: 0, y: 422, width: 14, height: 11},
]
},
];

11
js/skin.js
View file

@ -8,12 +8,6 @@ SkinManager = {
},
_skinImages: {
"#volume": "VOLUME.BMP",
"#volume::-webkit-slider-thumb": "VOLUME.BMP",
"#volume::-moz-range-thumb": "VOLUME.BMP",
"#balance": "BALANCE.BMP",
"#balance::-webkit-slider-thumb": "VOLUME.BMP",
"#balance::-moz-range-thumb": "VOLUME.BMP",
".windows div": "SHUFREP.BMP",
"#position": "POSBAR.BMP",
"#position::-webkit-slider-thumb": "POSBAR.BMP",
@ -23,10 +17,7 @@ SkinManager = {
".shuffle-repeat div": "SHUFREP.BMP",
".character": "TEXT.BMP",
// Put this second, since it will trump .digit
".digit-ex": "NUMS_EX.BMP",
".shade #position": "TITLEBAR.BMP",
".shade #position::-webkit-slider-thumb": "TITLEBAR.BMP",
".shade #position::-moz-range-thumb": "TITLEBAR.BMP",
".digit-ex": "NUMS_EX.BMP"
},
// For sprites that tile, we need to use just the sprite, not the whole image