From a9900a6df81498f4cd9be21ee013c016bc234b4a Mon Sep 17 00:00:00 2001 From: Jordan Eldredge Date: Sat, 7 Feb 2015 23:21:11 -0800 Subject: [PATCH] Finish abstracting sprite data --- css/main.css | 32 +------------------------------- js/skin-sprites.js | 12 ++++++++++++ js/skin.js | 29 +++++------------------------ 3 files changed, 18 insertions(+), 55 deletions(-) diff --git a/css/main.css b/css/main.css index 6c31a50f..05883146 100755 --- a/css/main.css +++ b/css/main.css @@ -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; } diff --git a/js/skin-sprites.js b/js/skin-sprites.js index 3e9b82bc..2c4e4ab9 100644 --- a/js/skin-sprites.js +++ b/js/skin-sprites.js @@ -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}, ] }, { diff --git a/js/skin.js b/js/skin.js index 7a310120..9bd831df 100644 --- a/js/skin.js +++ b/js/skin.js @@ -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) {