Ox.AudioPlayer: support resize, move css declarations to Ox.UI.css
This commit is contained in:
rolux
parent
8c941edd03
commit
7ff601a0a4
2 changed files with 52 additions and 49 deletions
|
|
@ -96,18 +96,53 @@ Audio
|
|||
.OxAudioPlayer > * {
|
||||
position: absolute;
|
||||
}
|
||||
.OxAudioPlayer > .OxMuteButton {
|
||||
right: 151px;
|
||||
top: 15px;
|
||||
}
|
||||
.OxAudioPlayer > .OxPlayButtons {
|
||||
top: 15px;
|
||||
}
|
||||
.OxAudioPlayer > .OxButtonGroup.OxPlayButtons > .OxButton:first-child {
|
||||
border-top-left-radius: 0;
|
||||
}
|
||||
.OxAudioPlayer > .OxPositionLabel {
|
||||
top: 15px;
|
||||
height: 13px;
|
||||
padding-top: 1px;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
font-size: 10px;
|
||||
}
|
||||
.OxAudioPlayer > .OxPositionSlider {
|
||||
left: 46px;
|
||||
top: 15px;
|
||||
}
|
||||
.OxAudioPlayer > .OxRepeatButton {
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
.OxAudioPlayer > .OxShuffleButton {
|
||||
right: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
.OxAudioPlayer > .OxTrackLabel {
|
||||
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;
|
||||
}
|
||||
.OxAudioPlayer > .OxButtonGroup > .OxButton:first-child {
|
||||
border-top-left-radius: 0;
|
||||
.OxAudioPlayer > .OxVolumeLabel {
|
||||
top: 15px;
|
||||
height: 13px;
|
||||
padding-top: 1px;
|
||||
border-top-right-radius: 0;
|
||||
font-size: 10px;
|
||||
}
|
||||
.OxAudioPlayer > .OxVolumeSlider {
|
||||
right: 35px;
|
||||
top: 15px;
|
||||
}
|
||||
|
||||
/*
|
||||
|
|
|
|||
|
|
@ -66,16 +66,13 @@ Ox.AudioPlayer = function(options, self) {
|
|||
key_space: togglePaused
|
||||
});
|
||||
|
||||
self.positionSliderWidth = self.options.width - 262;
|
||||
self.tracks = self.options.audio.length;
|
||||
self.volume = self.options.muted ? 1 : self.options.volume;
|
||||
|
||||
self.$repeatButton = Ox.Button(
|
||||
Ox.extend({overlap: 'right', type: 'image'}, getButtonOptions('repeat'))
|
||||
)
|
||||
.css({
|
||||
borderBottomLeftRadius: 0
|
||||
})
|
||||
.addClass('OxRepeatButton')
|
||||
.bindEvent({
|
||||
click: function() {
|
||||
setRepeat(
|
||||
|
|
@ -90,10 +87,7 @@ Ox.AudioPlayer = function(options, self) {
|
|||
self.$shuffleButton = Ox.Button(
|
||||
Ox.extend({overlap: 'left', type: 'image'}, getButtonOptions('shuffle'))
|
||||
)
|
||||
.css({
|
||||
right: 0,
|
||||
borderBottomRightRadius: 0
|
||||
})
|
||||
.addClass('OxShuffleButton')
|
||||
.bindEvent({
|
||||
click: toggleShuffle
|
||||
})
|
||||
|
|
@ -102,7 +96,6 @@ Ox.AudioPlayer = function(options, self) {
|
|||
self.$trackLabel = Ox.Label({
|
||||
textAlign: 'center',
|
||||
title: '',
|
||||
width: self.options.width - 32
|
||||
})
|
||||
.addClass('OxTrackLabel')
|
||||
.appendTo(that);
|
||||
|
|
@ -124,9 +117,7 @@ Ox.AudioPlayer = function(options, self) {
|
|||
overlap: 'right',
|
||||
type: 'image',
|
||||
})
|
||||
.css({
|
||||
top: '15px'
|
||||
})
|
||||
.addClass('OxPlayButtons')
|
||||
.bindEvent({
|
||||
click: function(data) {
|
||||
if (data.id == 'current') {
|
||||
|
|
@ -140,23 +131,13 @@ Ox.AudioPlayer = function(options, self) {
|
|||
})
|
||||
.appendTo(that);
|
||||
|
||||
$(self.$playButtons.find('.OxButton')[0]).css({borderTopLeftRadius: 0});
|
||||
|
||||
self.$positionLabel = Ox.Label({
|
||||
textAlign: 'center',
|
||||
title: '00:00:00',
|
||||
tooltip: 'Show Remaining Time',
|
||||
width: 80
|
||||
})
|
||||
.css({
|
||||
left: self.positionSliderWidth + 30 + 'px',
|
||||
top: '15px',
|
||||
height: '13px',
|
||||
paddingTop: '1px',
|
||||
borderTopRightRadius: 0,
|
||||
borderBottomRightRadius: 0,
|
||||
fontSize: '10px'
|
||||
})
|
||||
.addClass('OxPositionLabel')
|
||||
.bindEvent({
|
||||
anyclick: toggleTime
|
||||
})
|
||||
|
|
@ -166,13 +147,9 @@ Ox.AudioPlayer = function(options, self) {
|
|||
changeOnDrag: true,
|
||||
max: 1,
|
||||
min: 0,
|
||||
size: self.positionSliderWidth,
|
||||
step: 0.0000001,
|
||||
})
|
||||
.css({
|
||||
left: '46px',
|
||||
top: '15px'
|
||||
})
|
||||
.addClass('OxPositionSlider')
|
||||
.bindEvent({
|
||||
change: function(data) {
|
||||
setPosition(data.value * self.duration);
|
||||
|
|
@ -186,10 +163,7 @@ Ox.AudioPlayer = function(options, self) {
|
|||
tooltip: 'Mute',
|
||||
type: 'image'
|
||||
})
|
||||
.css({
|
||||
right: '151px',
|
||||
top: '15px'
|
||||
})
|
||||
.addClass('OxMuteButton')
|
||||
.bindEvent({
|
||||
click: toggleMuted
|
||||
})
|
||||
|
|
@ -200,14 +174,7 @@ Ox.AudioPlayer = function(options, self) {
|
|||
title: ' 100%',
|
||||
width: 46
|
||||
})
|
||||
.css({
|
||||
left: self.options.width - 46 + 'px',
|
||||
top: '15px',
|
||||
height: '13px',
|
||||
paddingTop: '1px',
|
||||
borderTopRightRadius: 0,
|
||||
fontSize: '10px'
|
||||
})
|
||||
.addClass('OxVolumeLabel')
|
||||
.bindEvent({
|
||||
anyclick: function() {
|
||||
setVolume(1);
|
||||
|
|
@ -223,10 +190,7 @@ Ox.AudioPlayer = function(options, self) {
|
|||
step: 0.01,
|
||||
value: self.options.volume,
|
||||
})
|
||||
.css({
|
||||
right: '35px',
|
||||
top: '15px'
|
||||
})
|
||||
.addClass('OxVolumeSlider')
|
||||
.bindEvent({
|
||||
change: function(data) {
|
||||
setVolume(data.value);
|
||||
|
|
@ -316,7 +280,11 @@ Ox.AudioPlayer = function(options, self) {
|
|||
}
|
||||
|
||||
function setSizes() {
|
||||
|
||||
that.css({width: self.options.width + 'px'});
|
||||
self.$trackLabel.options({width: self.options.width - 32});
|
||||
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'})
|
||||
}
|
||||
|
||||
function setTime() {
|
||||
|
|
|
|||
Loading…
Reference in a new issue