0x2620/oxjs
2
0
Fork 1
Code Issues 172 Pull requests Releases Wiki Activity

update Ox.AudioPlayer + CSS

Browse source
This commit is contained in:
rolux 2014-08-19 10:18:35 +02:00
parent 3c71cc7a26
commit e56333523b
2 changed files with 48 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
source/Ox.UI/css/Ox.UI.css
View file

@ -115,6 +115,10 @@ Audio
.OxAudioPlayer > * { .OxAudioPlayer > * {
position: absolute; position: absolute;
} }
.OxAudioPlayer > .OxListButton {
right: 0;
border-bottom-right-radius: 0;
}
.OxAudioPlayer > .OxMuteButton { .OxAudioPlayer > .OxMuteButton {
right: 151px; right: 151px;
top: 15px; top: 15px;
@ -138,17 +142,20 @@ Audio
top: 15px; top: 15px;
} }
.OxAudioPlayer > .OxRepeatButton { .OxAudioPlayer > .OxRepeatButton {
border-bottom-left-radius: 0; right: 31px;
border-bottom-right-radius: 0;
} }
.OxAudioPlayer > .OxShuffleButton { .OxAudioPlayer > .OxShuffleButton {
right: 0; right: 15px;
border-bottom-right-radius: 0; border-bottom-right-radius: 0;
} }
.OxAudioPlayer > .OxTrackLabel { .OxAudioPlayer > .OxTrackLabel {
left: 15px; //left: 15px;
top: 0; top: 0;
height: 13px; height: 13px;
padding-top: 1px; padding-top: 1px;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
font-size: 10px; font-size: 10px;
text-overflow: ellipsis; text-overflow: ellipsis;
} }

53
source/Ox.UI/js/Audio/AudioPlayer.js
View file

@ -78,8 +78,37 @@ Ox.AudioPlayer = function(options, self) {
self.tracks = self.options.audio.length; self.tracks = self.options.audio.length;
self.volume = self.options.muted ? 1 : self.options.volume; self.volume = self.options.muted ? 1 : self.options.volume;
self.$listButton = Ox.MenuButton({
items: self.options.audio.slice(
Math.max(self.options.track - 10, 0),
Math.min(self.options.track + 11, self.tracks)
).map(function(track, index) {
index += Math.max(self.options.track - 10, 0);
return {
id: index.toString(),
title: formatTrack(track),
checked: index == self.options.track
};
}),
maxWidth: 256,
overlap: 'left',
title: 'select',
type: 'image'
})
.addClass('OxListButton')
.appendTo(that);
self.$shuffleButton = Ox.Button(
Ox.extend({overlap: 'left', type: 'image'}, getButtonOptions('shuffle'))
)
.addClass('OxShuffleButton')
.bindEvent({
click: toggleShuffle
})
.appendTo(that);
self.$repeatButton = Ox.Button( self.$repeatButton = Ox.Button(
Ox.extend({overlap: 'right', type: 'image'}, getButtonOptions('repeat')) Ox.extend({overlap: 'left', type: 'image'}, getButtonOptions('repeat'))
) )
.addClass('OxRepeatButton') .addClass('OxRepeatButton')
.bindEvent({ .bindEvent({
@ -93,15 +122,6 @@ Ox.AudioPlayer = function(options, self) {
}) })
.appendTo(that); .appendTo(that);
self.$shuffleButton = Ox.Button(
Ox.extend({overlap: 'left', type: 'image'}, getButtonOptions('shuffle'))
)
.addClass('OxShuffleButton')
.bindEvent({
click: toggleShuffle
})
.appendTo(that);
self.$trackLabel = Ox.Label({ self.$trackLabel = Ox.Label({
textAlign: 'center', textAlign: 'center',
title: '', title: '',
@ -222,6 +242,12 @@ Ox.AudioPlayer = function(options, self) {
setTrack(self.options.track); setTrack(self.options.track);
function formatTrack(data) {
return [
data.name, data.artist, data.album, data.year
].join(' · ');
}
function getButtonOptions(id) { function getButtonOptions(id) {
var options; var options;
if (id == 'mute') { if (id == 'mute') {
@ -290,7 +316,7 @@ Ox.AudioPlayer = function(options, self) {
function setSizes() { function setSizes() {
that.css({width: self.options.width + 'px'}); that.css({width: self.options.width + 'px'});
self.$trackLabel.options({width: self.options.width - 32}); self.$trackLabel.options({width: self.options.width - 46});
self.$positionSlider.options({size: self.options.width - 262}); self.$positionSlider.options({size: self.options.width - 262});
self.$positionLabel.css({left: self.options.width - 232 + 'px'}); self.$positionLabel.css({left: self.options.width - 232 + 'px'});
self.$volumeLabel.css({left: self.options.width - 46 + 'px'}) self.$volumeLabel.css({left: self.options.width - 46 + 'px'})
@ -308,12 +334,9 @@ Ox.AudioPlayer = function(options, self) {
} }
function setTrack(track) { function setTrack(track) {
var data = self.options.audio[track];
self.options.track = track; self.options.track = track;
self.$trackLabel.options({ self.$trackLabel.options({
title: [ title: formatTrack(self.options.audio[track])
data.name, data.artist, data.album, data.year
].join(' · ')
}); });
self.$audio.options({src: self.options.audio[self.options.track].file}); self.$audio.options({src: self.options.audio[self.options.track].file});
!self.options.paused && self.$audio.play(); !self.options.paused && self.$audio.play();