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

Ox.AudioPlayer: support resize, move css declarations to Ox.UI.css

Browse source
This commit is contained in:
rolux 2012-12-18 17:46:43 +01:00
parent 8c941edd03
commit 7ff601a0a4
2 changed files with 52 additions and 49 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -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;
}
/*

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

@ -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() {