mirror of
https://github.com/captbaritone/webamp.git
synced 2026-07-21 09:09:01 +00:00
Start abstracing sprite info for playlist
This commit is contained in:
Jordan Eldredge
parent
a012dddb08
commit
8998749511
3 changed files with 44 additions and 49 deletions
|
|
@ -7,7 +7,6 @@
|
|||
margin-left: -137px;
|
||||
top: 40%;
|
||||
left: 20%;
|
||||
/* Background-image: pledit.bmp */
|
||||
}
|
||||
#playlist.closed { display: none; }
|
||||
|
||||
|
|
@ -52,21 +51,12 @@
|
|||
left: 0;
|
||||
height: 100%;
|
||||
width: 25px;
|
||||
background-position: 0 -21px;
|
||||
}
|
||||
#playlist.selected .top .top-left {
|
||||
background-position: 0 0;
|
||||
}
|
||||
|
||||
#playlist .top .title {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
width: 100px;
|
||||
margin: 0 auto;
|
||||
background-position: -26px -21px;
|
||||
}
|
||||
#playlist.selected .top .title {
|
||||
background-position: -26px 0px;
|
||||
}
|
||||
|
||||
#playlist .top .top-right {
|
||||
|
|
@ -75,30 +65,17 @@
|
|||
right: 0;
|
||||
height: 100%;
|
||||
width: 25px;
|
||||
background-position: -153px -21px;
|
||||
}
|
||||
|
||||
#playlist.selected .top .top-right {
|
||||
background-position: -153px 0;
|
||||
}
|
||||
|
||||
#playlist .top #playlist-shade {
|
||||
background-position: -156px -3px;
|
||||
position: absolute;
|
||||
top: 3px;
|
||||
right: 13px;
|
||||
height: 9px;
|
||||
width: 9px;
|
||||
}
|
||||
#playlist .top #playlist-shade:active {
|
||||
background-position: -62px -42px;
|
||||
}
|
||||
#playlist .top #playlist-shade.selected {
|
||||
background-position: -150px -42px;
|
||||
}
|
||||
|
||||
#playlist .top #playlist-close {
|
||||
background-position: -167px -3px;
|
||||
position: absolute;
|
||||
top: 3px;
|
||||
right: 3px;
|
||||
|
|
@ -106,15 +83,12 @@
|
|||
width: 9px;
|
||||
}
|
||||
|
||||
#playlist .top #playlist-close:active {
|
||||
background-position: -52px -42px;
|
||||
}
|
||||
|
||||
#playlist .left {
|
||||
height: 100%;
|
||||
width: 24px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#playlist .right {
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
|
|
@ -138,7 +112,6 @@
|
|||
left: 0;
|
||||
height: 100%;
|
||||
width: 125px;
|
||||
background-position: 0 -72px;
|
||||
}
|
||||
#playlist .bottom-right {
|
||||
position: absolute;
|
||||
|
|
@ -146,7 +119,6 @@
|
|||
right: 0;
|
||||
height: 100%;
|
||||
width: 150px;
|
||||
background-position: -126px -72px;
|
||||
}
|
||||
|
||||
#playlist #playlist-resize-handle {
|
||||
|
|
@ -174,27 +146,13 @@
|
|||
}
|
||||
|
||||
#playlist.shade .top .top-left {
|
||||
background-position: -72px -42px;
|
||||
width: 25px;
|
||||
height: 14px;
|
||||
}
|
||||
#playlist.shade .top .top-right {
|
||||
background-position: -99px -42px;
|
||||
width: 50px;
|
||||
height: 14px;
|
||||
}
|
||||
#playlist.shade .top #playlist-close {
|
||||
background-position: -138px -45px;
|
||||
}
|
||||
#playlist.shade .top #playlist-close:active {
|
||||
background-position: -52px -42px;
|
||||
}
|
||||
#playlist.shade .top #playlist-shade {
|
||||
background-position: -128px -45px;
|
||||
}
|
||||
#playlist.shade .top #playlist-shade:active {
|
||||
background-position: -150px -42px;
|
||||
}
|
||||
#playlist.shade #tracks {
|
||||
top: 0;
|
||||
height: 14px;
|
||||
|
|
|
|||
|
|
@ -83,17 +83,36 @@ var SKIN_SPRITES = [
|
|||
{ selectors: [".play #work-indicator.selected"], x: 39, y: 0, width: 9, height: 9}
|
||||
]
|
||||
},
|
||||
/* {
|
||||
{
|
||||
img: "PLEDIT",
|
||||
sprites: [
|
||||
{ selectors: ["#playlist .top-left"], x: 0, y: 21, width: 25, height: 20},
|
||||
{ selectors: ["#playlist.selected .top-left"], x: 0, y: 0, width: 25, height: 20},
|
||||
{ selectors: ["#playlist .title"], x: 26, y: 21, width: 100, height: 20},
|
||||
{ selectors: ["#playlist.selected .title"], x: 26, y: 0, width: 100, height: 20},
|
||||
{ selectors: ["#playlist .top-right"], x: 153, y: 21, width: 25, height: 20},
|
||||
{ selectors: ["#playlist.selected .top-right"], x: 153, y: 0, width: 25, height: 20},
|
||||
{ selectors: [".playlist-top-tile"], x: 127, y: 21, width: 25, height: 20},
|
||||
{ selectors: [".selected .playlist-top-tile"], x: 127, y: 0, width: 25, height: 20},
|
||||
{ selectors: ["#playlist-shade"], x: 156, y: 3, width: 9, height: 9},
|
||||
{ selectors: ["#playlist-shade:active"], x: 62, y: 42, width: 9, height: 9},
|
||||
{ selectors: ["#playlist-shade.selected"], x: 150, y: 42, width: 9, height: 9},
|
||||
{ selectors: ["#playlist.shade #playlist-shade"], x: 128, y: 45, width: 9, height: 9},
|
||||
{ selectors: ["#playlist.shade #playlist-shade:active"], x: 150, y: 42, width: 9, height: 9},
|
||||
{ selectors: ["#playlist-close"], x: 167, y: 3, width: 9, height: 9},
|
||||
{ selectors: ["#playlist-close:active"], x: 52, y: 42, width: 9, height: 9},
|
||||
{ selectors: ["#playlist.shade #playlist-close"], x: 138, y: 45, width: 9, height: 9},
|
||||
{ selectors: ["#playlist.shade #playlist-close:active"], x: 52, y: 42, width: 9, height: 9},
|
||||
{ selectors: [".playlist-left-tile"], x: 0, y: 42, width: 25, height: 29},
|
||||
{ selectors: [".playlist-right-tile"], x: 27, y: 42, width: 25, height: 29},
|
||||
{ selectors: [".playlist-bottom-tile"], x: 179, y: 0, width: 25, height: 38},
|
||||
{ selectors: ["#playlist.shade"], x: 72, y: 57, width: 25, height: 14}
|
||||
{ selectors: ["#playlist .bottom-right"], x: 126, y: 72, width: 150, height: 38},
|
||||
{ selectors: ["#playlist .bottom-left"], x: 0, y: 72, width: 150, height: 38},
|
||||
{ selectors: ["#playlist.shade"], x: 72, y: 57, width: 25, height: 14},
|
||||
{ selectors: ["#playlist.shade .top-left"], x: 72, y: 42, width: 25, height: 14},
|
||||
{ selectors: ["#playlist.shade .top-right"], x: 99, y: 42, width: 50, height: 14}
|
||||
]
|
||||
}, */
|
||||
},
|
||||
{
|
||||
img: "POSBAR",
|
||||
sprites: [
|
||||
|
|
|
|||
24
js/skin.js
24
js/skin.js
|
|
@ -10,6 +10,15 @@ SkinManager = {
|
|||
// For sprites that tile, we need to use just the sprite, not the whole image
|
||||
_skinSprites: SKIN_SPRITES,
|
||||
|
||||
// PLEDIT.txt values
|
||||
_plRules: {
|
||||
"Normal": { selector:'#tracks li', attribute:'color' },
|
||||
"Current": { selector:'#tracks li.current', attribute:'color' },
|
||||
"Font": { selector:'#tracks li', attribute:'font-family' },
|
||||
"NormalBG": { selector:'#tracks, #tracks li', attribute:'background-color' },
|
||||
"SelectedBG": { selector:'#tracks li.selected', attribute:'background-color' }
|
||||
},
|
||||
|
||||
// Given a file of an original Winamp WSZ file, set the current skin
|
||||
setSkinByFile: function(file, completedCallback) {
|
||||
this.completedCallback = completedCallback;
|
||||
|
|
@ -47,13 +56,22 @@ SkinManager = {
|
|||
};
|
||||
|
||||
var plValues = this._parsePlEdit(zip);
|
||||
for(var key in plRules) {
|
||||
var rule = plRules[key];
|
||||
for(var key in this._plRules) {
|
||||
var rule = this._plRules[key];
|
||||
if(plValues[key]) {
|
||||
promisedCssRules.push(rule.selector + "{" + rule.attribute + ":" + plValues[key] + "}");
|
||||
}
|
||||
}
|
||||
|
||||
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));
|
||||
|
||||
|
||||
// Extract sprite images
|
||||
Promise.all(promisedCssRules).then(function(newCssRules) {
|
||||
this._createNewStyleNode();
|
||||
|
|
@ -84,7 +102,7 @@ SkinManager = {
|
|||
|
||||
_parsePlEdit: function(zip) {
|
||||
var entries = this._findFileInZip("PLEDIT.TXT", zip).asText().split("\n");
|
||||
var regex = /^([^=]*)=([^=\r]*)\r?$/
|
||||
var regex = /^([^=]*)=([^=\r]*)\r?$/;
|
||||
var results = {};
|
||||
for(var i = 0; i < entries.length; i++) {
|
||||
var matches = regex.exec(entries[i]);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue