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

source/Ox.UI/css/Ox.UI.css

@@ -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 {
+.OxAudioPlayer > .OxVolumeLabel {
-    border-top-left-radius: 0;
+    top: 15px;
+    height: 13px;
+    padding-top: 1px;
+    border-top-right-radius: 0;
+    font-size: 10px;
+}
+.OxAudioPlayer > .OxVolumeSlider {
+    right: 35px;
+    top: 15px;
 }
 
 /*

source/Ox.UI/js/Audio/AudioPlayer.js

@@ -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({
+        .addClass('OxRepeatButton')
-            borderBottomLeftRadius: 0
-        })
         .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({
+        .addClass('OxShuffleButton')
-            right: 0,
-            borderBottomRightRadius: 0
-        })
         .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({
+        .addClass('OxPlayButtons')
-            top: '15px'
-        })
         .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({
+        .addClass('OxPositionLabel')
-            left: self.positionSliderWidth + 30 + 'px',
-            top: '15px',
-            height: '13px',
-            paddingTop: '1px',
-            borderTopRightRadius: 0,
-            borderBottomRightRadius: 0,
-            fontSize: '10px'
-        })
         .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({
+        .addClass('OxPositionSlider')
-            left: '46px',
-            top: '15px'
-        })
         .bindEvent({
             change: function(data) {
                 setPosition(data.value * self.duration);
@@ -186,10 +163,7 @@ Ox.AudioPlayer = function(options, self) {
             tooltip: 'Mute',
             type: 'image'
         })
-        .css({
+        .addClass('OxMuteButton')
-            right: '151px',
-            top: '15px'
-        })
         .bindEvent({
             click: toggleMuted
         })
@@ -200,14 +174,7 @@ Ox.AudioPlayer = function(options, self) {
             title: '  100%',
             width: 46
         })
-        .css({
+        .addClass('OxVolumeLabel')
-            left: self.options.width - 46 + 'px',
-            top: '15px',
-            height: '13px',
-            paddingTop: '1px',
-            borderTopRightRadius: 0,
-            fontSize: '10px'
-        })
         .bindEvent({
             anyclick: function() {
                 setVolume(1);
@@ -223,10 +190,7 @@ Ox.AudioPlayer = function(options, self) {
             step: 0.01,
             value: self.options.volume,
         })
-        .css({
+        .addClass('OxVolumeSlider')
-            right: '35px',
-            top: '15px'
-        })
         .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() {