Mirrors/webamp
1
0
Fork 0
mirror of https://github.com/captbaritone/webamp.git synced 2026-01-23 18:25:30 +00:00
Code Issues Projects Releases Wiki Activity

Finish abstracting sprite data

Browse source
This commit is contained in:
Jordan Eldredge 2015-02-07 23:21:11 -08:00
parent 24eca69581
commit a9900a6df8
3 changed files with 18 additions and 55 deletions
Download patch file Download diff file Expand all files Collapse all files

32
css/main.css
View file

@ -1,7 +1,6 @@
/* Styles */
#main-window {
position: absolute;
/* background-image: MAIN.BMP via Javascript */
height: 116px;
width: 275px;
margin-top: -58px;
@ -80,7 +79,6 @@
#title-bar #option {
left: 6px;
/* background-image: TITLEBAR.BMP via Javascript */
}
#title-bar #option #context-menu {
display: none;
@ -142,7 +140,6 @@
left: 26px;
height: 9px;
width: 9px;
/* background-image: PLAYPAUS.BMP via Javascript */
background-repeat: no-repeat;
}
@ -152,8 +149,6 @@
left: 24px;
height: 9px;
width: 3px;
/* background-image: PLAYPAUS.BMP via Javascript */
background-position: -36px 0;
}
.status #time {
position: absolute;
@ -311,6 +306,7 @@
top: 57px;
height: 13px;
width: 38px;
background-position: 0 0;
cursor:url('../cursors/POSBAR.PNG?inline'), auto;
}
@ -339,23 +335,14 @@
position: absolute;
width: 23px;
height: 12px;
/* background-image: SHUFREP.BMP via Javascript */
}
.windows #equalizer-button {
left: 0;
background-position: 0 -61px;
}
.windows #equalizer-button:active {
background-position: -46px -61px;
}
.windows #playlist-button {
left: 23px;
background-position: -23px -61px;
}
.windows #playlist-button:active {
background-position: -69px -61px;
}
#position {
@ -364,17 +351,12 @@
top: 72px;
width: 248px;
height: 10px;
/* background-image: POSBAR.BMP via Javascript */
background-repeat: no-repeat;
cursor:url('../cursors/POSBAR.PNG?inline'), auto;
}
#position::-webkit-slider-thumb {
height: 10px;
width: 29px;
background-position: -248px 0;
/* background-image: POSBAR.BMP via Javascript */
background-repeat: no-repeat;
cursor:url('../cursors/POSBAR.PNG?inline'), auto;
/*
* Fix the strange bug in Safair/mobile-chrome
@ -387,9 +369,6 @@
#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.PNG?inline'), auto;
}
@ -397,15 +376,7 @@
.stop #position::-webkit-slider-thumb { visibility: hidden; }
.stop #position::-moz-range-thumb { visibility: hidden; }
#position:active::-webkit-slider-thumb {
background-position: -278px 0;
}
#position:active::-moz-range-thumb {
background-position: -278px 0;
}
.actions div {
/* background-image: CBUTTONS.BMP via Javascript */
height: 18px;
width: 23px;
position: absolute;
@ -475,7 +446,6 @@
display: inline-block;
width: 9px;
height: 13px;
/* background-image: NUMBERS.BMP via Javascript */
background-repeat: no-repeat;
text-indent: -9999px;
}

12
js/skin-sprites.js
View file

@ -94,6 +94,14 @@ var SKIN_SPRITES = [
{ selectors: ["#playlist.shade"], x: 72, y: 57, width: 25, height: 14}
]
}, */
{
img: "POSBAR",
sprites: [
{ selectors: ["#position"], x: 0, y: 0, width: 248, height: 10},
{ selectors: ["#position::-webkit-slider-thumb", "#position::-moz-range-thumb"], x: 248, y: 0, width: 29, height: 10},
{ selectors: ["#position:active::-webkit-slider-thumb", "#position:active::-moz-range-thumb"], x: 278, y: 0, width: 29, height: 10},
]
},
{
img: "SHUFREP",
sprites: [
@ -105,6 +113,10 @@ var SKIN_SPRITES = [
{ selectors: ["#repeat:active"], x: 0, y: 15, width: 28, height: 15},
{ selectors: ["#repeat.selected"], x: 0, y: 30, width: 28, height: 15},
{ selectors: ["#repeat.selected:active"], x: 0, y: 45, width: 28, height: 15},
{ selectors: ["#equalizer-button"], x: 0, y: 61, width: 23, height: 12},
{ selectors: ["#equalizer-button:active"], x: 46, y: 61, width: 23, height: 12},
{ selectors: ["#playlist-button"], x: 23, y: 61, width: 23, height: 12},
{ selectors: ["#playlist-button:active"], x: 69, y: 61, width: 23, height: 12},
]
},
{

29
js/skin.js
View file

@ -7,14 +7,6 @@ SkinManager = {
return this;
},
_skinImages: {
"#position": "POSBAR.BMP",
"#position::-webkit-slider-thumb": "POSBAR.BMP",
"#position::-moz-range-thumb": "POSBAR.BMP",
// Put this second, since it will trump .digit
".digit-ex": "NUMS_EX.BMP"
},
// For sprites that tile, we need to use just the sprite, not the whole image
_skinSprites: SKIN_SPRITES,
@ -30,30 +22,19 @@ SkinManager = {
var zip = new JSZip(buffer);
document.getElementById('time').classList.remove('ex');
var promisedCssRules = [];
for(var selector in this._skinImages) {
var fileName = this._skinImages[selector];
var file = this._findFileInZip(fileName, zip);
var promisedCssRules = this._skinSprites.map(function(spriteObj) {
if (file) {
var value = "background-image: url(data:image/bmp;base64," + btoa(file.asBinary()) + ")";
promisedCssRules.push(selector + "{" + value + "}");
// CSS has to change if this file is present
if(fileName == 'NUMS_EX.BMP') {
document.getElementById('time').classList.add('ex');
}
// CSS has to change if this file is present
if(spriteObj.img == 'NUMS_EX') {
document.getElementById('time').classList.add('ex');
}
}
Array.prototype.push.apply(promisedCssRules, this._skinSprites.map(function(spriteObj) {
var file = this._findFileInZip(spriteObj.img, zip);
if (file) {
var src = "data:image/bmp;base64," + btoa(file.asBinary());
return this._spriteCssRule(src, spriteObj);
}
}, this));
}, this);
// Extract sprite images
Promise.all(promisedCssRules).then(function(newCssRules) {