update Ox.AudioPlayer + CSS
This commit is contained in:
parent
3c71cc7a26
commit
e56333523b
2 changed files with 48 additions and 18 deletions
|
@ -115,6 +115,10 @@ Audio
|
|||
.OxAudioPlayer > * {
|
||||
position: absolute;
|
||||
}
|
||||
.OxAudioPlayer > .OxListButton {
|
||||
right: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
.OxAudioPlayer > .OxMuteButton {
|
||||
right: 151px;
|
||||
top: 15px;
|
||||
|
@ -138,17 +142,20 @@ Audio
|
|||
top: 15px;
|
||||
}
|
||||
.OxAudioPlayer > .OxRepeatButton {
|
||||
border-bottom-left-radius: 0;
|
||||
right: 31px;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
.OxAudioPlayer > .OxShuffleButton {
|
||||
right: 0;
|
||||
right: 15px;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
.OxAudioPlayer > .OxTrackLabel {
|
||||
left: 15px;
|
||||
//left: 15px;
|
||||
top: 0;
|
||||
height: 13px;
|
||||
padding-top: 1px;
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
font-size: 10px;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
|
|
@ -78,8 +78,37 @@ Ox.AudioPlayer = function(options, self) {
|
|||
self.tracks = self.options.audio.length;
|
||||
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(
|
||||
Ox.extend({overlap: 'right', type: 'image'}, getButtonOptions('repeat'))
|
||||
Ox.extend({overlap: 'left', type: 'image'}, getButtonOptions('repeat'))
|
||||
)
|
||||
.addClass('OxRepeatButton')
|
||||
.bindEvent({
|
||||
|
@ -93,15 +122,6 @@ Ox.AudioPlayer = function(options, self) {
|
|||
})
|
||||
.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({
|
||||
textAlign: 'center',
|
||||
title: '',
|
||||
|
@ -222,6 +242,12 @@ Ox.AudioPlayer = function(options, self) {
|
|||
|
||||
setTrack(self.options.track);
|
||||
|
||||
function formatTrack(data) {
|
||||
return [
|
||||
data.name, data.artist, data.album, data.year
|
||||
].join(' · ');
|
||||
}
|
||||
|
||||
function getButtonOptions(id) {
|
||||
var options;
|
||||
if (id == 'mute') {
|
||||
|
@ -290,7 +316,7 @@ Ox.AudioPlayer = function(options, self) {
|
|||
|
||||
function setSizes() {
|
||||
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.$positionLabel.css({left: self.options.width - 232 + 'px'});
|
||||
self.$volumeLabel.css({left: self.options.width - 46 + 'px'})
|
||||
|
@ -308,12 +334,9 @@ Ox.AudioPlayer = function(options, self) {
|
|||
}
|
||||
|
||||
function setTrack(track) {
|
||||
var data = self.options.audio[track];
|
||||
self.options.track = track;
|
||||
self.$trackLabel.options({
|
||||
title: [
|
||||
data.name, data.artist, data.album, data.year
|
||||
].join(' · ')
|
||||
title: formatTrack(self.options.audio[track])
|
||||
});
|
||||
self.$audio.options({src: self.options.audio[self.options.track].file});
|
||||
!self.options.paused && self.$audio.play();
|
||||
|
|
Loading…
Reference in a new issue