Skin system

Vocabulary

A skin = HTML structure + default CSS.

A theme = specific CSS.

How to add a new skin

Skins can be added dynamically (after the page has been loaded).

Whether you want to add a new skin at page load or after, this page describes how to do it.

Bascially, you only have 2 things to do:

• Add an object to JukeboxUI.skins
• Add your CSS

Skin has to be specified during jukebox instanciation. Theme can be changed at any time by using the .theme(name)method.

Add a JSON object to JukeboxUI.skins

Before the jukebox instanciation, you have to add your skin to JukeboxUI.skins. The key is the name of your skin. Your skin object has to expose the following properties:

A templates object, with the following properties

• player (template)
• song (template)
• playQueue (template)
• playQueueSong (template)

Additionnal facultatives properties can be declared :

A params object, another object with the following properties

• dragdrop (boolean)
• playQueueNode (string)
• songNode (string)

A themes object (array of string)

A defaultTheme (string)

Example:

JukeboxUI.skins["mySkin"] =
{
	params:
	{
		dragdrop: false
	},
	defaultTheme: 'white',
	themes: ['white', 'blue'],
	templates:
	{
		player: <template>,
		song: <template>,
		playQueue: <template>,
		playQueueSong: <template>
	}
};

Each <template> is a string and must contains only one root node. You can use #{variableName} inside the template.

Here is the list of available variables for each template:

player: (the main template)

• root
• theme
• currentSong (see song template)
• canalLabel
• canalValue
• searchLabel
• searchButton
• UploadTabName
• QueryTabName
• NotificationsTabName
• DebugTabName
• artist
• title
• album
• genre
• refreshButton
• refreshLabel
• pluginLabel
• pluginDefault
• pluginButton
• play
• stop
• volume
• listenersCount

song: (the template for current song)

• root

playQueue: (the playQueue container)

• root
• playQueueLabel
• listenersCount

playQueueSong: (an item of the playQueue)

• root
• index
• artist
• album
• title
• duration

#{root} is a specific variable available inside each template. It is the CSS prefix you have to add for each class. This way your skin does not pollute the page.

Do not use id inside your template, only class (no collision with other elements in the page). Checkout JukeboxUI.js for examples.

Add the corresponding CSS

Just include your css in the page... Make sure that all your css selectors contains: .jukebox-<skin>-[end of className].

Theme

A skin can have multiple themes. To do so, add the following class to the root node of your player template: #{root}-theme-#{theme}. Then customize your css by prefixing with the following selector: .jukebox-<skin>-theme-<theme>.

Example:

.jukebox-light-theme-black{
border: 1px solid black;
}
.jukebox-light-theme-blue{
border: 1px solid blue;
}

You can switch the theme on the fly by using the .theme(name) method!

Expand/Collapse

A specific CSS class is added when the jukebox is expanded: .jukebox-<skin>-fullplayer.

CSS usage exemple:

.jukebox-light-playqueue-content{
border-top: 1px solid black;
display: none;
}
.jukebox-light-fullplayer .jukebox-light-playqueue-content{
display: block;
}

How to use it

The skin name can be used in options object (second parameter).

You can easily instanciate several jukebox on the same page:

var j1 = new Jukebox("player",
{
	skin: "default"
});

var j2 = new Jukebox(document.body,
{
	skin: "light",
	theme: "blue"
});