Mirrors/webamp
1
0
Fork 0
mirror of https://github.com/captbaritone/webamp.git synced 2026-07-28 20:40:39 +00:00
Code Issues Projects Releases Wiki Activity

Clean up skin.js

Browse source
This commit is contained in:
Jordan Eldredge 2014-11-12 23:04:58 -08:00
parent 61a8e5bb8f
commit ed43cebe6c
2 changed files with 22 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

1
index.html
View file

@ -4,6 +4,7 @@
<title>Winamp2-js</title>
<meta charset="utf-8" />
<link rel='stylesheet' type='text/css' href='winamp.css' />
<style id='skin' media="screen" type="text/css"></style>
</head>
<body>
<div id='winamp' class='stop'>

33
skin.js
View file

@ -1,8 +1,8 @@
// Dynamically set the css background images for a skin
// Dynamically set the css background images for all the sprites
SkinManager = function() {
var self = this;
this.skinImages = {
this._skinImages = {
"#winamp": "MAIN.BMP",
"#title-bar": "TITLEBAR.BMP",
"#title-bar #option": "TITLEBAR.BMP",
@ -32,26 +32,35 @@ SkinManager = function() {
".shade #position": "TITLEBAR.BMP",
".shade #position::-webkit-slider-thumb": "TITLEBAR.BMP",
".shade #position::-moz-range-thumb": "TITLEBAR.BMP",
};
}
// For local dev, we want to use the asset we have locally
this.useLocalDefaultSkin = function() {
self.setSkinByUrl('skins/default');
}
// I have a collection of skins on GitHub to make loading remote skins
// easier. rawgit.com changes this into a free CDN
this.setSkinByName = function(name) {
url = "https://cdn.rawgit.com/captbaritone/winamp-skins/master/v2/" + name;
self.setSkinByUrl(url);
}
// Given the URL of a skin directory, set the current skin
this.setSkinByUrl = function(skinPath) {
// Make sure we have a trailing slash. Two slashes are > than none
skinPath += "/";
cssRules = '';
for(var selector in self.skinImages) {
var value = "background-image: url(" + skinPath + self.skinImages[selector] + ");";
var style = document.getElementById('skin');
// XXX Ideally we would empty the style tag here, but I don't know how.
// Appending overwrites, which has the same net effect, but after
// several skin changes, this tag will get pretty bloated.
var cssRules = '';
for(var selector in self._skinImages) {
var imagePath = skinPath + self._skinImages[selector];
var value = "background-image: url(" + imagePath + ");";
cssRules += selector + "{" + value + "}\n";
var style = document.createElement('style');
style.type = 'text/css';
style.appendChild(document.createTextNode(cssRules));
document.getElementsByTagName("head")[0].appendChild(style);
}
}
}