Refactor how we handle special NUM_EX CSS

This commit is contained in:
Jordan Eldredge 2016-07-11 20:37:03 -07:00
parent 1fe9fe5da7
commit 3ef2bf7041
3 changed files with 10 additions and 18 deletions

View file

@ -161,6 +161,7 @@
}
#winamp2-js .status #time #minus-sign {
/* Note that this get's augmented by the skin CSS if NUM_EX.BMP is present */
position: absolute;
top: 6px;
left: -1px;
@ -168,13 +169,6 @@
height: 1px;
}
/* Alternate format for minus sign, when skin supports it */
#winamp2-js .status #time.ex #minus-sign {
top: 0px;
left: -1px;
width: 9px;
height: 13px;
}
#winamp2-js .status #time #minute-first-digit {
position: absolute;

View file

@ -94,8 +94,8 @@ module.exports = [
{
img: 'NUMS_EX',
sprites: [
{selectors: ['#time.ex #minus-sign'], x: 90, y: 0, width: 9, height: 13},
{selectors: ['#time.ex.countdown #minus-sign'], x: 99, y: 0, width: 9, height: 13},
{selectors: ['#time #minus-sign'], x: 90, y: 0, width: 9, height: 13},
{selectors: ['#time.countdown #minus-sign'], x: 99, y: 0, width: 9, height: 13},
{selectors: ['.digit-0'], x: 0, y: 0, width: 9, height: 13},
{selectors: ['.digit-1'], x: 9, y: 0, width: 9, height: 13},
{selectors: ['.digit-2'], x: 18, y: 0, width: 9, height: 13},

View file

@ -25,18 +25,11 @@ module.exports = {
// Gets passed as a callback, so don't have access to `this`
_setSkinByBuffer: function(buffer) {
var zip = new JSZip(buffer);
document.getElementById('time').classList.remove('ex');
var promisedCssRules = this._skinSprites.map(function(spriteObj) {
var file = this._findFileInZip(spriteObj.img, zip);
if (file) {
// CSS has to change if this file is present
if (spriteObj.img === 'NUMS_EX') {
document.getElementById('time').classList.add('ex');
}
var src = 'data:image/bmp;base64,' + btoa(file.asBinary());
return this._spriteCssRule(src, spriteObj);
return this._spriteCssRule(spriteObj.img, src, spriteObj);
}
}, this);
@ -85,7 +78,7 @@ module.exports = {
// Given an image URL and coordinates, returns a data url for a sub-section
// of that image
_spriteCssRule: function(src, spriteObj) {
_spriteCssRule: function(img, src, spriteObj) {
return new Promise(function(resolve) {
var imageObj = new Image();
imageObj.src = src;
@ -105,6 +98,11 @@ module.exports = {
cssRules += '#winamp2-js ' + selector + '{' + value + '}\n';
});
});
if (img === 'NUMS_EX') {
// This alternate number file requires that the minus sign be
// formatted differently.
cssRules += '#winamp2-js .status #time #minus-sign { top: 0px; left: -1px; width: 9px; height: 13px; }\n';
}
resolve(cssRules);
};
});