simoon
/
parallel-library
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
master
Develop
0.6.0
0.6.2
0.6.3
0.6.4
0.6.5
0.6.6
0.6.7
0.6.8
0.6.9
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from 'dac48a2610'
${ noResults }
parallel-library/cps/static/js/libs/bar-ui.js

1746 lines
42 KiB
JavaScript
Raw Normal View History Unescape Escape

Merge branch 'Develop' # Conflicts: # MANIFEST.in # README.md # cps/helper.py # cps/static/js/archive/archive.js # cps/translations/nl/LC_MESSAGES/messages.mo # cps/translations/nl/LC_MESSAGES/messages.po # cps/ub.py # cps/updater.py # cps/web.py # cps/worker.py # optional-requirements.txt
5 years ago
(function (window) {
/**
* SoundManager 2: "Bar UI" player
* Copyright (c) 2014, Scott Schiller. All rights reserved.
* http://www.schillmania.com/projects/soundmanager2/
* Code provided under BSD license.
* http://schillmania.com/projects/soundmanager2/license.txt
*/
/* global console, document, navigator, soundManager, window */
'use strict';
var Player,
players = [],
// CSS selector that will get us the top-level DOM node for the player UI.
playerSelector = '.sm2-bar-ui',
playerOptions,
utils;
/**
* The following are player object event callback examples.
* Override globally by setting window.sm2BarPlayers.on = {}, or individually by window.sm2BarPlayers[0].on = {} etc.
* soundObject is provided for whileplaying() etc., but playback control should be done via the player object.
*/
players.on = {
/*
play: function(player, soundObject) {
console.log('playing', player);
},
whileplaying: function(player, soundObject) {
console.log('whileplaying', player, soundObject);
},
finish: function(player, soundObject) {
// each sound
console.log('finish', player);
},
pause: function(player, soundObject) {
console.log('pause', player);
},
error: function(player, soundObject) {
console.log('error', player);
},
end: function(player, soundObject) {
// end of playlist
console.log('end', player);
}
*/
};
playerOptions = {
// useful when multiple players are in use, or other SM2 sounds are active etc.
stopOtherSounds: true,
// CSS class to let the browser load the URL directly e.g., <a href="foo.mp3" class="sm2-exclude">download foo.mp3</a>
excludeClass: 'sm2-exclude'
};
soundManager.setup({
// trade-off: higher UI responsiveness (play/progress bar), but may use more CPU.
html5PollingInterval: 50,
flashVersion: 9
});
soundManager.onready(function () {
var nodes, i, j;
nodes = utils.dom.getAll(playerSelector);
if (nodes && nodes.length) {
for (i = 0, j = nodes.length; i < j; i++) {
players.push(new Player(nodes[i]));
}
}
});
/**
* player bits
*/
Player = function (playerNode) {
var css, dom, extras, playlistController, soundObject, actions, actionData, defaultItem, defaultVolume, firstOpen, exports;
css = {
disabled: 'disabled',
selected: 'selected',
active: 'active',
legacy: 'legacy',
noVolume: 'no-volume',
playlistOpen: 'playlist-open'
};
dom = {
o: null,
playlist: null,
playlistTarget: null,
playlistContainer: null,
time: null,
player: null,
progress: null,
progressTrack: null,
progressBar: null,
duration: null,
volume: null
};
// prepended to tracks when a sound fails to load/play
extras = {
loadFailedCharacter: '<span title="Failed to load/play." class="load-error">✖</span>'
};
function stopOtherSounds() {
if (playerOptions.stopOtherSounds) {
soundManager.stopAll();
}
}
function callback(method, oSound) {
if (method) {
// fire callback, passing current player and sound objects
if (exports.on && exports.on[method]) {
exports.on[method](exports, oSound);
} else if (players.on[method]) {
players.on[method](exports, oSound);
}
}
}
function getTime(msec, useString) {
// convert milliseconds to hh:mm:ss, return as object literal or string
var nSec = Math.floor(msec / 1000),
hh = Math.floor(nSec / 3600),
min = Math.floor(nSec / 60) - Math.floor(hh * 60),
sec = Math.floor(nSec - (hh * 3600) - (min * 60));
// if (min === 0 && sec === 0) return null; // return 0:00 as null
return (useString ? ((hh ? hh + ':' : '') + (hh && min < 10 ? '0' + min : min) + ':' + (sec < 10 ? '0' + sec : sec)) : { min: min, sec: sec });
}
function setTitle(item) {
// given a link, update the "now playing" UI.
// if this is an <li> with an inner link, grab and use the text from that.
var links = item.getElementsByTagName('a');
if (links.length) {
item = links[0];
}
// remove any failed character sequence, also
dom.playlistTarget.innerHTML = '<ul class="sm2-playlist-bd"><li>' + item.innerHTML.replace(extras.loadFailedCharacter, '') + '</li></ul>';
if (dom.playlistTarget.getElementsByTagName('li')[0].scrollWidth > dom.playlistTarget.offsetWidth) {
// this item can use <marquee>, in fact.
dom.playlistTarget.innerHTML = '<ul class="sm2-playlist-bd"><li><marquee>' + item.innerHTML + '</marquee></li></ul>';
}
}
function makeSound(url) {
var sound = soundManager.createSound({
url: url,
volume: defaultVolume,
whileplaying: function () {
//This sends a bookmark update to calibreweb every 30 seconds.
if (this.progressBuffer == undefined) {
this.progressBuffer = 0;
}
if (this.progressBuffer <= this.position) {
$.ajax(calibre.bookmarkUrl, {
method: "post",
data: { bookmark: this.position }
}).fail(function (xhr, status, error) {
console.error(error);
});
this.progressBuffer = this.progressBuffer + 30000;
}
var progressMaxLeft = 100,
left,
width;
left = Math.min(progressMaxLeft, Math.max(0, (progressMaxLeft * (this.position / this.durationEstimate)))) + '%';
width = Math.min(100, Math.max(0, (100 * (this.position / this.durationEstimate)))) + '%';
if (this.duration) {
dom.progress.style.left = left;
dom.progressBar.style.width = width;
// TODO: only write changes
dom.time.innerHTML = getTime(this.position, true);
}
callback('whileplaying', this);
},
onbufferchange: function (isBuffering) {
if (isBuffering) {
utils.css.add(dom.o, 'buffering');
} else {
utils.css.remove(dom.o, 'buffering');
}
},
onplay: function () {
utils.css.swap(dom.o, 'paused', 'playing');
callback('play', this);
},
onpause: function () {
$.ajax(calibre.bookmarkUrl, {
method: "post",
data: { bookmark: this.position }
}).fail(function (xhr, status, error) {
console.error(error);
});
utils.css.swap(dom.o, 'playing', 'paused');
callback('pause', this);
},
onresume: function () {
utils.css.swap(dom.o, 'paused', 'playing');
},
whileloading: function () {
if (!this.isHTML5) {
dom.duration.innerHTML = getTime(this.durationEstimate, true);
}
},
onload: function (ok) {
sound.setPosition(calibre.bookmark);
if (ok) {
dom.duration.innerHTML = getTime(this.duration, true);
} else if (this._iO && this._iO.onerror) {
this._iO.onerror();
}
},
onerror: function () {
// sound failed to load.
var item, element, html;
item = playlistController.getItem();
if (item) {
// note error, delay 2 seconds and advance?
// playlistTarget.innerHTML = '<ul class="sm2-playlist-bd"><li>' + item.innerHTML + '</li></ul>';
if (extras.loadFailedCharacter) {
dom.playlistTarget.innerHTML = dom.playlistTarget.innerHTML.replace('<li>', '<li>' + extras.loadFailedCharacter + ' ');
if (playlistController.data.playlist && playlistController.data.playlist[playlistController.data.selectedIndex]) {
element = playlistController.data.playlist[playlistController.data.selectedIndex].getElementsByTagName('a')[0];
html = element.innerHTML;
if (html.indexOf(extras.loadFailedCharacter) === -1) {
element.innerHTML = extras.loadFailedCharacter + ' ' + html;
}
}
}
}
callback('error', this);
// load next, possibly with delay.
if (navigator.userAgent.match(/mobile/i)) {
// mobile will likely block the next play() call if there is a setTimeout() - so don't use one here.
actions.next();
} else {
if (playlistController.data.timer) {
window.clearTimeout(playlistController.data.timer);
}
playlistController.data.timer = window.setTimeout(actions.next, 2000);
}
},
onstop: function () {
$.ajax(calibre.bookmarkUrl, {
method: "post",
data: { bookmark: this.position }
}).fail(function (xhr, status, error) {
console.error(error);
});
utils.css.remove(dom.o, 'playing');
},
onfinish: function () {
$.ajax(calibre.bookmarkUrl, {
method: "post",
data: { bookmark: this.position }
}).fail(function (xhr, status, error) {
console.error(error);
});
var lastIndex, item;
utils.css.remove(dom.o, 'playing');
dom.progress.style.left = '0%';
lastIndex = playlistController.data.selectedIndex;
callback('finish', this);
// next track?
item = playlistController.getNext();
// don't play the same item over and over again, if at end of playlist (excluding single item case.)
if (item && (playlistController.data.selectedIndex !== lastIndex || (playlistController.data.playlist.length === 1 && playlistController.data.loopMode))) {
playlistController.select(item);
setTitle(item);
stopOtherSounds();
// play next
this.play({
url: playlistController.getURL()
});
} else {
// end of playlist case
// explicitly stop?
// this.stop();
callback('end', this);
}
}
});
return sound;
}
function playLink(link) {
// if a link is OK, play it.
if (soundManager.canPlayURL(link.href)) {
// if there's a timer due to failure to play one track, cancel it.
// catches case when user may use previous/next after an error.
if (playlistController.data.timer) {
window.clearTimeout(playlistController.data.timer);
playlistController.data.timer = null;
}
if (!soundObject) {
soundObject = makeSound(link.href);
}
// required to reset pause/play state on iOS so whileplaying() works? odd.
soundObject.stop();
playlistController.select(link.parentNode);
setTitle(link.parentNode);
// reset the UI
// TODO: function that also resets/hides timing info.
dom.progress.style.left = '0px';
dom.progressBar.style.width = '0px';
stopOtherSounds();
soundObject.play({
url: link.href,
position: 0
});
}
}
function PlaylistController() {
var data;
data = {
// list of nodes?
playlist: [],
// NOTE: not implemented yet.
// shuffledIndex: [],
// shuffleMode: false,
// selection
selectedIndex: 0,
loopMode: false,
timer: null
};
function getPlaylist() {
return data.playlist;
}
function getItem(offset) {
var list,
item;
// given the current selection (or an offset), return the current item.
// if currently null, may be end of list case. bail.
if (data.selectedIndex === null) {
return offset;
}
list = getPlaylist();
// use offset if provided, otherwise take default selected.
offset = (offset !== undefined ? offset : data.selectedIndex);
// safety check - limit to between 0 and list length
offset = Math.max(0, Math.min(offset, list.length));
item = list[offset];
return item;
}
function findOffsetFromItem(item) {
// given an <li> item, find it in the playlist array and return the index.
var list,
i,
j,
offset;
offset = -1;
list = getPlaylist();
if (list) {
for (i = 0, j = list.length; i < j; i++) {
if (list[i] === item) {
offset = i;
break;
}
}
}
return offset;
}
function getNext() {
// don't increment if null.
if (data.selectedIndex !== null) {
data.selectedIndex++;
}
if (data.playlist.length > 1) {
if (data.selectedIndex >= data.playlist.length) {
if (data.loopMode) {
// loop to beginning
data.selectedIndex = 0;
} else {
// no change
data.selectedIndex--;
// end playback
// data.selectedIndex = null;
}
}
} else {
data.selectedIndex = null;
}
return getItem();
}
function getPrevious() {
data.selectedIndex--;
if (data.selectedIndex < 0) {
// wrapping around beginning of list? loop or exit.
if (data.loopMode) {
data.selectedIndex = data.playlist.length - 1;
} else {
// undo
data.selectedIndex++;
}
}
return getItem();
}
function resetLastSelected() {
// remove UI highlight(s) on selected items.
var items,
i, j;
items = utils.dom.getAll(dom.playlist, '.' + css.selected);
for (i = 0, j = items.length; i < j; i++) {
utils.css.remove(items[i], css.selected);
}
}
function select(item) {
var offset,
itemTop,
itemBottom,
containerHeight,
scrollTop,
itemPadding,
liElement;
// remove last selected, if any
resetLastSelected();
if (item) {
liElement = utils.dom.ancestor('li', item);
utils.css.add(liElement, css.selected);
itemTop = item.offsetTop;
itemBottom = itemTop + item.offsetHeight;
containerHeight = dom.playlistContainer.offsetHeight;
scrollTop = dom.playlist.scrollTop;
itemPadding = 8;
if (itemBottom > containerHeight + scrollTop) {
// bottom-align
dom.playlist.scrollTop = (itemBottom - containerHeight) + itemPadding;
} else if (itemTop < scrollTop) {
// top-align
dom.playlist.scrollTop = item.offsetTop - itemPadding;
}
}
// update selected offset, too.
offset = findOffsetFromItem(liElement);
data.selectedIndex = offset;
}
function playItemByOffset(offset) {
var item;
offset = (offset || 0);
item = getItem(offset);
if (item) {
playLink(item.getElementsByTagName('a')[0]);
}
}
function getURL() {
// return URL of currently-selected item
var item, url;
item = getItem();
if (item) {
url = item.getElementsByTagName('a')[0].href;
}
return url;
}
function refreshDOM() {
// get / update playlist from DOM
if (!dom.playlist) {
if (window.console && console.warn) {
console.warn('refreshDOM(): playlist node not found?');
}
return;
}
data.playlist = dom.playlist.getElementsByTagName('li');
}
function initDOM() {
dom.playlistTarget = utils.dom.get(dom.o, '.sm2-playlist-target');
dom.playlistContainer = utils.dom.get(dom.o, '.sm2-playlist-drawer');
dom.playlist = utils.dom.get(dom.o, '.sm2-playlist-bd');
}
function initPlaylistController() {
// inherit the default SM2 volume
defaultVolume = soundManager.defaultOptions.volume;
initDOM();
refreshDOM();
// animate playlist open, if HTML classname indicates so.
if (utils.css.has(dom.o, css.playlistOpen)) {
// hackish: run this after API has returned
window.setTimeout(function () {
actions.menu(true);
}, 1);
}
}
initPlaylistController();
return {
data: data,
refresh: refreshDOM,
getNext: getNext,
getPrevious: getPrevious,
getItem: getItem,
getURL: getURL,
playItemByOffset: playItemByOffset,
select: select
};
}
function isRightClick(e) {
// only pay attention to left clicks. old IE differs where there's no e.which, but e.button is 1 on left click.
if (e && ((e.which && e.which === 2) || (e.which === undefined && e.button !== 1))) {
// http://www.quirksmode.org/js/events_properties.html#button
return true;
}
return false;
}
function getActionData(target) {
// DOM measurements for volume slider
if (!target) {
return;
}
actionData.volume.x = utils.position.getOffX(target);
actionData.volume.y = utils.position.getOffY(target);
actionData.volume.width = target.offsetWidth;
actionData.volume.height = target.offsetHeight;
// potentially dangerous: this should, but may not be a percentage-based value.
actionData.volume.backgroundSize = parseInt(utils.style.get(target, 'background-size'), 10);
// IE gives pixels even if background-size specified as % in CSS. Boourns.
if (window.navigator.userAgent.match(/msie|trident/i)) {
actionData.volume.backgroundSize = (actionData.volume.backgroundSize / actionData.volume.width) * 100;
}
}
function handleMouseDown(e) {
var links,
target;
target = e.target || e.srcElement;
if (isRightClick(e)) {
return;
}
// normalize to <a>, if applicable.
if (target.nodeName.toLowerCase() !== 'a') {
links = target.getElementsByTagName('a');
if (links && links.length) {
target = target.getElementsByTagName('a')[0];
}
}
if (utils.css.has(target, 'sm2-volume-control')) {
// drag case for volume
getActionData(target);
utils.events.add(document, 'mousemove', actions.adjustVolume);
utils.events.add(document, 'touchmove', actions.adjustVolume);
utils.events.add(document, 'mouseup', actions.releaseVolume);
utils.events.add(document, 'touchend', actions.releaseVolume);
// and apply right away
actions.adjustVolume(e);
}
}
function handleMouse(e) {
var target, barX, barWidth, x, clientX, newPosition, sound;
target = dom.progressTrack;
barX = utils.position.getOffX(target);
barWidth = target.offsetWidth;
clientX = utils.events.getClientX(e);
x = (clientX - barX);
newPosition = (x / barWidth);
sound = soundObject;
if (sound && sound.duration) {
sound.setPosition(sound.duration * newPosition);
// a little hackish: ensure UI updates immediately with current position, even if audio is buffering and hasn't moved there yet.
if (sound._iO && sound._iO.whileplaying) {
sound._iO.whileplaying.apply(sound);
}
}
if (e.preventDefault) {
e.preventDefault();
}
return false;
}
function releaseMouse(e) {
utils.events.remove(document, 'mousemove', handleMouse);
utils.events.remove(document, 'touchmove', handleMouse);
utils.css.remove(dom.o, 'grabbing');
utils.events.remove(document, 'mouseup', releaseMouse);
utils.events.remove(document, 'touchend', releaseMouse);
utils.events.preventDefault(e);
return false;
}
function handleProgressMouseDown(e) {
if (isRightClick(e)) {
return;
}
utils.css.add(dom.o, 'grabbing');
utils.events.add(document, 'mousemove', handleMouse);
utils.events.add(document, 'touchmove', handleMouse);
utils.events.add(document, 'mouseup', releaseMouse);
utils.events.add(document, 'touchend', releaseMouse);
handleMouse(e);
}
function handleClick(e) {
var evt,
target,
offset,
targetNodeName,
methodName,
href,
handled;
evt = (e || window.event);
target = evt.target || evt.srcElement;
if (target && target.nodeName) {
targetNodeName = target.nodeName.toLowerCase();
if (targetNodeName !== 'a') {
// old IE (IE 8) might return nested elements inside the <a>, eg., <b> etc. Try to find the parent <a>.
if (target.parentNode) {
do {
target = target.parentNode;
targetNodeName = target.nodeName.toLowerCase();
} while (targetNodeName !== 'a' && target.parentNode);
if (!target) {
// something went wrong. bail.
return false;
}
}
}
if (targetNodeName === 'a') {
// yep, it's a link.
href = target.href;
if (soundManager.canPlayURL(href)) {
// not excluded
if (!utils.css.has(target, playerOptions.excludeClass)) {
// find this in the playlist
playLink(target);
handled = true;
}
} else {
// is this one of the action buttons, eg., play/pause, volume, etc.?
offset = target.href.lastIndexOf('#');
if (offset !== -1) {
methodName = target.href.substr(offset + 1);
if (methodName && actions[methodName]) {
handled = true;
actions[methodName](e);
}
}
}
// fall-through case
if (handled) {
// prevent browser fall-through
return utils.events.preventDefault(evt);
}
}
}
return true;
}
function init() {
// init DOM?
if (!playerNode && window.console && console.warn) {
console.warn('init(): No playerNode element?');
}
dom.o = playerNode;
// are we dealing with a crap browser? apply legacy CSS if so.
if (window.navigator.userAgent.match(/msie [678]/i)) {
utils.css.add(dom.o, css.legacy);
}
if (window.navigator.userAgent.match(/mobile/i)) {
// majority of mobile devices don't let HTML5 audio set volume.
utils.css.add(dom.o, css.noVolume);
}
dom.progress = utils.dom.get(dom.o, '.sm2-progress-ball');
dom.progressTrack = utils.dom.get(dom.o, '.sm2-progress-track');
dom.progressBar = utils.dom.get(dom.o, '.sm2-progress-bar');
dom.volume = utils.dom.get(dom.o, 'a.sm2-volume-control');
// measure volume control dimensions
if (dom.volume) {
getActionData(dom.volume);
}
dom.duration = utils.dom.get(dom.o, '.sm2-inline-duration');
dom.time = utils.dom.get(dom.o, '.sm2-inline-time');
playlistController = new PlaylistController();
defaultItem = playlistController.getItem(0);
playlistController.select(defaultItem);
if (defaultItem) {
setTitle(defaultItem);
}
utils.events.add(dom.o, 'mousedown', handleMouseDown);
utils.events.add(dom.o, 'touchstart', handleMouseDown);
utils.events.add(dom.o, 'click', handleClick);
utils.events.add(dom.progressTrack, 'mousedown', handleProgressMouseDown);
utils.events.add(dom.progressTrack, 'touchstart', handleProgressMouseDown);
}
// ---
actionData = {
volume: {
x: 0,
y: 0,
width: 0,
height: 0,
backgroundSize: 0
}
};
actions = {
play: function (offsetOrEvent) {
/**
* This is an overloaded function that takes mouse/touch events or offset-based item indices.
* Remember, "auto-play" will not work on mobile devices unless this function is called immediately from a touch or click event.
* If you have the link but not the offset, you can also pass a fake event object with a target of an <a> inside the playlist - e.g. { target: someMP3Link }
*/
var target,
href,
e;
if (offsetOrEvent !== undefined && !isNaN(offsetOrEvent)) {
// smells like a number.
playlistController.playItemByOffset(offsetOrEvent);
return;
}
// DRY things a bit
e = offsetOrEvent;
if (e && e.target) {
target = e.target || e.srcElement;
href = target.href;
}
// haaaack - if null due to no event, OR '#' due to play/pause link, get first link from playlist
if (!href || href.indexOf('#') !== -1) {
href = dom.playlist.getElementsByTagName('a')[0].href;
}
if (!soundObject) {
soundObject = makeSound(href);
}
// edge case: if the current sound is not playing, stop all others.
if (!soundObject.playState) {
stopOtherSounds();
}
// TODO: if user pauses + unpauses a sound that had an error, try to play next?
soundObject.togglePause();
// special case: clear "play next" timeout, if one exists.
// edge case: user pauses after a song failed to load.
if (soundObject.paused && playlistController.data.timer) {
window.clearTimeout(playlistController.data.timer);
playlistController.data.timer = null;
}
},
pause: function () {
if (soundObject && soundObject.readyState) {
soundObject.pause();
}
},
resume: function () {
if (soundObject && soundObject.readyState) {
soundObject.resume();
}
},
stop: function () {
// just an alias for pause, really.
// don't actually stop because that will mess up some UI state, i.e., dragging the slider.
return actions.pause();
},
next: function (/* e */) {
var item, lastIndex;
// special case: clear "play next" timeout, if one exists.
if (playlistController.data.timer) {
window.clearTimeout(playlistController.data.timer);
playlistController.data.timer = null;
}
lastIndex = playlistController.data.selectedIndex;
item = playlistController.getNext(true);
// don't play the same item again
if (item && playlistController.data.selectedIndex !== lastIndex) {
playLink(item.getElementsByTagName('a')[0]);
}
},
prev: function (/* e */) {
var item, lastIndex;
lastIndex = playlistController.data.selectedIndex;
item = playlistController.getPrevious();
// don't play the same item again
if (item && playlistController.data.selectedIndex !== lastIndex) {
playLink(item.getElementsByTagName('a')[0]);
}
},
shuffle: function (e) {
// NOTE: not implemented yet.
var target = (e ? e.target || e.srcElement : utils.dom.get(dom.o, '.shuffle'));
if (target && !utils.css.has(target, css.disabled)) {
utils.css.toggle(target.parentNode, css.active);
playlistController.data.shuffleMode = !playlistController.data.shuffleMode;
}
},
repeat: function (e) {
var target = (e ? e.target || e.srcElement : utils.dom.get(dom.o, '.repeat'));
if (target && !utils.css.has(target, css.disabled)) {
utils.css.toggle(target.parentNode, css.active);
playlistController.data.loopMode = !playlistController.data.loopMode;
}
},
menu: function (ignoreToggle) {
var isOpen;
isOpen = utils.css.has(dom.o, css.playlistOpen);
// hackish: reset scrollTop in default first open case. odd, but some browsers have a non-zero scroll offset the first time the playlist opens.
if (playlistController && !playlistController.data.selectedIndex && !firstOpen) {
dom.playlist.scrollTop = 0;
firstOpen = true;
}
// sniff out booleans from mouse events, as this is referenced directly by event handlers.
if (typeof ignoreToggle !== 'boolean' || !ignoreToggle) {
if (!isOpen) {
// explicitly set height:0, so the first closed -> open animation runs properly
dom.playlistContainer.style.height = '0px';
}
isOpen = utils.css.toggle(dom.o, css.playlistOpen);
}
// playlist
dom.playlistContainer.style.height = (isOpen ? dom.playlistContainer.scrollHeight : 0) + 'px';
},
adjustVolume: function (e) {
/**
* NOTE: this is the mousemove() event handler version.
* Use setVolume(50), etc., to assign volume directly.
*/
var backgroundMargin,
pixelMargin,
target,
value,
volume;
value = 0;
target = dom.volume;
// safety net
if (e === undefined) {
return false;
}
// normalize between mouse and touch events
var clientX = utils.events.getClientX(e);
if (!e || clientX === undefined) {
// called directly or with a non-mouseEvent object, etc.
// proxy to the proper method.
if (arguments.length && window.console && window.console.warn) {
console.warn('Bar UI: call setVolume(' + e + ') instead of adjustVolume(' + e + ').');
}
return actions.setVolume.apply(this, arguments);
}
// based on getStyle() result
// figure out spacing around background image based on background size, eg. 60% background size.
// 60% wide means 20% margin on each side.
backgroundMargin = (100 - actionData.volume.backgroundSize) / 2;
// relative position of mouse over element
value = Math.max(0, Math.min(1, (clientX - actionData.volume.x) / actionData.volume.width));
target.style.clip = 'rect(0px, ' + (actionData.volume.width * value) + 'px, ' + actionData.volume.height + 'px, ' + (actionData.volume.width * (backgroundMargin / 100)) + 'px)';
// determine logical volume, including background margin
pixelMargin = ((backgroundMargin / 100) * actionData.volume.width);
volume = Math.max(0, Math.min(1, ((clientX - actionData.volume.x) - pixelMargin) / (actionData.volume.width - (pixelMargin * 2)))) * 100;
// set volume
if (soundObject) {
soundObject.setVolume(volume);
}
defaultVolume = volume;
return utils.events.preventDefault(e);
},
releaseVolume: function (/* e */) {
utils.events.remove(document, 'mousemove', actions.adjustVolume);
utils.events.remove(document, 'touchmove', actions.adjustVolume);
utils.events.remove(document, 'mouseup', actions.releaseVolume);
utils.events.remove(document, 'touchend', actions.releaseVolume);
},
setVolume: function (volume) {
// set volume (0-100) and update volume slider UI.
var backgroundSize,
backgroundMargin,
backgroundOffset,
target,
from,
to;
if (volume === undefined || isNaN(volume)) {
return;
}
if (dom.volume) {
target = dom.volume;
// based on getStyle() result
backgroundSize = actionData.volume.backgroundSize;
// figure out spacing around background image based on background size, eg. 60% background size.
// 60% wide means 20% margin on each side.
backgroundMargin = (100 - backgroundSize) / 2;
// margin as pixel value relative to width
backgroundOffset = actionData.volume.width * (backgroundMargin / 100);
from = backgroundOffset;
to = from + ((actionData.volume.width - (backgroundOffset * 2)) * (volume / 100));
target.style.clip = 'rect(0px, ' + to + 'px, ' + actionData.volume.height + 'px, ' + from + 'px)';
}
// apply volume to sound, as applicable
if (soundObject) {
soundObject.setVolume(volume);
}
defaultVolume = volume;
}
};
init();
// TODO: mixin actions -> exports
exports = {
// Per-instance events: window.sm2BarPlayers[0].on = { ... } etc. See global players.on example above for reference.
on: null,
actions: actions,
dom: dom,
playlistController: playlistController
};
return exports;
};
// barebones utilities for logic, CSS, DOM, events etc.
utils = {
array: (function () {
function compare(property) {
var result;
return function (a, b) {
if (a[property] < b[property]) {
result = -1;
} else if (a[property] > b[property]) {
result = 1;
} else {
result = 0;
}
return result;
};
}
function shuffle(array) {
// Fisher-Yates shuffle algo
var i, j, temp;
for (i = array.length - 1; i > 0; i--) {
j = Math.floor(Math.random() * (i + 1));
temp = array[i];
array[i] = array[j];
array[j] = temp;
}
return array;
}
return {
compare: compare,
shuffle: shuffle
};
}()),
css: (function () {
function hasClass(o, cStr) {
return (o.className !== undefined ? new RegExp('(^|\\s)' + cStr + '(\\s|$)').test(o.className) : false);
}
function addClass(o, cStr) {
if (!o || !cStr || hasClass(o, cStr)) {
return; // safety net
}
o.className = (o.className ? o.className + ' ' : '') + cStr;
}
function removeClass(o, cStr) {
if (!o || !cStr || !hasClass(o, cStr)) {
return;
}
o.className = o.className.replace(new RegExp('( ' + cStr + ')|(' + cStr + ')', 'g'), '');
}
function swapClass(o, cStr1, cStr2) {
var tmpClass = {
className: o.className
};
removeClass(tmpClass, cStr1);
addClass(tmpClass, cStr2);
o.className = tmpClass.className;
}
function toggleClass(o, cStr) {
var found,
method;
found = hasClass(o, cStr);
method = (found ? removeClass : addClass);
method(o, cStr);
// indicate the new state...
return !found;
}
return {
has: hasClass,
add: addClass,
remove: removeClass,
swap: swapClass,
toggle: toggleClass
};
}()),
dom: (function () {
function getAll(param1, param2) {
var node,
selector,
results;
if (arguments.length === 1) {
// .selector case
node = document.documentElement;
// first param is actually the selector
selector = param1;
} else {
// node, .selector
node = param1;
selector = param2;
}
// sorry, IE 7 users; IE 8+ required.
if (node && node.querySelectorAll) {
results = node.querySelectorAll(selector);
}
return results;
}
function get(/* parentNode, selector */) {
var results = getAll.apply(this, arguments);
// hackish: if an array, return the last item.
if (results && results.length) {
return results[results.length - 1];
}
// handle "not found" case
return results && results.length === 0 ? null : results;
}
function ancestor(nodeName, element, checkCurrent) {
if (!element || !nodeName) {
return element;
}
nodeName = nodeName.toUpperCase();
// return if current node matches.
if (checkCurrent && element && element.nodeName === nodeName) {
return element;
}
while (element && element.nodeName !== nodeName && element.parentNode) {
element = element.parentNode;
}
return (element && element.nodeName === nodeName ? element : null);
}
return {
ancestor: ancestor,
get: get,
getAll: getAll
};
}()),
position: (function () {
function getOffX(o) {
// http://www.xs4all.nl/~ppk/js/findpos.html
var curleft = 0;
if (o.offsetParent) {
while (o.offsetParent) {
curleft += o.offsetLeft;
o = o.offsetParent;
}
} else if (o.x) {
curleft += o.x;
}
return curleft;
}
function getOffY(o) {
// http://www.xs4all.nl/~ppk/js/findpos.html
var curtop = 0;
if (o.offsetParent) {
while (o.offsetParent) {
curtop += o.offsetTop;
o = o.offsetParent;
}
} else if (o.y) {
curtop += o.y;
}
return curtop;
}
return {
getOffX: getOffX,
getOffY: getOffY
};
}()),
style: (function () {
function get(node, styleProp) {
// http://www.quirksmode.org/dom/getstyles.html
var value;
if (node.currentStyle) {
value = node.currentStyle[styleProp];
} else if (window.getComputedStyle) {
value = document.defaultView.getComputedStyle(node, null).getPropertyValue(styleProp);
}
return value;
}
return {
get: get
};
}()),
events: (function () {
var add, remove, preventDefault, getClientX;
add = function (o, evtName, evtHandler) {
// return an object with a convenient detach method.
var eventObject = {
detach: function () {
return remove(o, evtName, evtHandler);
}
};
if (window.addEventListener) {
o.addEventListener(evtName, evtHandler, false);
} else {
o.attachEvent('on' + evtName, evtHandler);
}
return eventObject;
};
remove = (window.removeEventListener !== undefined ? function (o, evtName, evtHandler) {
return o.removeEventListener(evtName, evtHandler, false);
} : function (o, evtName, evtHandler) {
return o.detachEvent('on' + evtName, evtHandler);
});
preventDefault = function (e) {
if (e.preventDefault) {
e.preventDefault();
} else {
e.returnValue = false;
e.cancelBubble = true;
}
return false;
};
getClientX = function (e) {
// normalize between desktop (mouse) and touch (mobile/tablet/?) events.
// note pageX for touch, which normalizes zoom/scroll/pan vs. clientX.
return (e && (e.clientX || (e.touches && e.touches[0] && e.touches[0].pageX)));
};
return {
add: add,
preventDefault: preventDefault,
remove: remove,
getClientX: getClientX
};
}()),
features: (function () {
var getAnimationFrame,
localAnimationFrame,
localFeatures,
prop,
styles,
testDiv,
transform;
testDiv = document.createElement('div');
/**
* hat tip: paul irish
* http://paulirish.com/2011/requestanimationframe-for-smart-animating/
* https://gist.github.com/838785
*/
localAnimationFrame = (window.requestAnimationFrame
|| window.webkitRequestAnimationFrame
|| window.mozRequestAnimationFrame
|| window.oRequestAnimationFrame
|| window.msRequestAnimationFrame
|| null);
// apply to window, avoid "illegal invocation" errors in Chrome
getAnimationFrame = localAnimationFrame ? function () {
return localAnimationFrame.apply(window, arguments);
} : null;
function has(propName) {
// test for feature support
return (testDiv.style[propName] !== undefined ? propName : null);
}
// note local scope.
localFeatures = {
transform: {
ie: has('-ms-transform'),
moz: has('MozTransform'),
opera: has('OTransform'),
webkit: has('webkitTransform'),
w3: has('transform'),
prop: null // the normalized property value
},
rotate: {
has3D: false,
prop: null
},
getAnimationFrame: getAnimationFrame
};
localFeatures.transform.prop = (
localFeatures.transform.w3 ||
localFeatures.transform.moz ||
localFeatures.transform.webkit ||
localFeatures.transform.ie ||
localFeatures.transform.opera
);
function attempt(style) {
try {
testDiv.style[transform] = style;
} catch (e) {
// that *definitely* didn't work.
return false;
}
// if we can read back the style, it should be cool.
return !!testDiv.style[transform];
}
if (localFeatures.transform.prop) {
// try to derive the rotate/3D support.
transform = localFeatures.transform.prop;
styles = {
css_2d: 'rotate(0deg)',
css_3d: 'rotate3d(0,0,0,0deg)'
};
if (attempt(styles.css_3d)) {
localFeatures.rotate.has3D = true;
prop = 'rotate3d';
} else if (attempt(styles.css_2d)) {
prop = 'rotate';
}
localFeatures.rotate.prop = prop;
}
testDiv = null;
return localFeatures;
}())
};
// ---
// expose to global
window.sm2BarPlayers = players;
window.sm2BarPlayerOptions = playerOptions;
window.SM2BarPlayer = Player;
}(window));