Changeset 4459

Timestamp:

01/06/12 13:48:02 (5 months ago)

Author:

johnnyoffline

Message:

reconstructed the audio player to accommodate flexible columns

Location:

plugins/apostrophePlugin/branches/1.5

Files:

• modules/aAudioSlot/templates/_defaultPlayer.php (modified) (1 diff)
• modules/aAudioSlot/templates/_litePlayer.php (modified) (1 diff)
• web/css/a-area-slots.less (modified) (2 diffs)
• web/images/a-audio-volume.png (modified) (previous)
• web/js/a.js (modified) (13 diffs)

plugins/apostrophePlugin/branches/1.5/modules/aAudioSlot/templates/_defaultPlayer.php

@@ -30 +30 @@
                         <a href="#" class="a-audio-pause a-audio-button" id="a-audio-pause-<?php echo $uniqueID ?>"  onclick="return false;">Pause</a>
                 </div>
-                <div class="a-audio-slider-wrapper" style="width:<?php echo $width-140 ?>px;">                  
+                <div class="a-audio-slider-wrapper playback">                   
                         <div class="a-audio-loader"></div>
-                        <div class="a-audio-playback a-audio-slider" id="a-audio-playback-<?php echo $uniqueID ?>" style="width:<?php echo $width-140 ?>px;">
+                        <div class="a-audio-playback a-audio-slider" id="a-audio-playback-<?php echo $uniqueID ?>">
                                 <a href="#" class="a-audio-slider-handle ui-slider-handle">Playback</a>
                         </div>
                         <div class="a-audio-time"></div>
                 </div>
-                <div class="a-audio-slider-wrapper">
+                <div class="a-audio-slider-wrapper volume">
                         <div class="a-audio-volume a-audio-slider" id="a-audio-volume-<?php echo $uniqueID ?>">
                                 <a href="#" class="a-audio-slider-handle ui-slider-handle">Volume</a>

plugins/apostrophePlugin/branches/1.5/modules/aAudioSlot/templates/_litePlayer.php

@@ -19 +19 @@
                         <a href="#" class="a-audio-pause a-audio-button" id="a-audio-pause-<?php echo $uniqueID ?>"  onclick="return false;">Pause</a>
                 </div>
-                <div class="a-audio-slider-wrapper playhead" style="width:<?php echo $width-140 ?>px;<?php // echo ($width < 200) ? 'display:none;' : '' ?>">                   
+                <div class="a-audio-slider-wrapper playhead">                   
                         <div class="a-audio-loader"></div>
-                        <div class="a-audio-playback a-audio-slider" id="a-audio-playback-<?php echo $uniqueID ?>" style="width:<?php echo $width-140 ?>px;">
+                        <div class="a-audio-playback a-audio-slider" id="a-audio-playback-<?php echo $uniqueID ?>">
                                 <a href="#" class="a-audio-slider-handle ui-slider-handle">Playback</a>
                         </div>

plugins/apostrophePlugin/branches/1.5/web/css/a-area-slots.less

@@ -665 +665 @@
 // -------------------------------------
 
-.a-ui.a-audio-player-container { position: relative; overflow: hidden; clear:both; }
-
-.a-ui .a-audio-meta { float: left; width: 100%; clear: both; margin: 0 0 10px 0; }
-
-.a-ui .a-audio-player-interface
-{
-overflow: hidden;
-position: relative;
-width: auto;
-background-color: #888;
-padding: 10px;
--moz-border-radius: 4px;
--webkit-border-radius: 4px;
-border-radius: 4px;
-margin: 10px 0;
-}
-
-
-.a-ui.a-audio-player-container .a-audio-player-interface.a-loading * { visibility: hidden; }
-
-.a-ui.a-audio-player-container .a-audio-player-interface.a-loading .a-audio-loading { visibility: visible; display: block; padding:  0 0 0 20px; background: url({@a-asset-path}/apostrophePlugin/images/a-icon-loader-2.gif) 0 50% no-repeat; line-height: 20px; height: 20px;}
-.a-ui.a-audio-player-container .a-audio-player-interface .a-audio-loading { display: none; position: absolute; top: 50%; margin-top: -10px; left: 10px; color: #fff;}
-
-.a-ui.a-audio-player-container .a-audio-controls .a-audio-button
-{
-float: left;
-width: 30px;
-height: 20px;
-background-color: #fff;
--moz-border-radius: 2px;
--webkit-border-radius: 2px;
-border-radius: 2px;
-text-indent: -9999px;
-cursor: pointer;
-}
-
-.a-ui.a-audio-player-container .a-audio-button:hover { background-color: #ddd; }
-
-.a-ui.a-audio-player-container .a-audio-play  { background: #fff url({@a-asset-path}/apostrophePlugin/images/a-icon-alt-play.png) no-repeat 6px 0; }
-
-.a-ui.a-audio-player-container .a-audio-pause { background: #fff url({@a-asset-path}/apostrophePlugin/images/a-icon-alt-pause.png) no-repeat 6px 0; display: none; }
-
-.a-ui.a-audio-player-container .a-audio-controls { float: left; clear: none; }
+.a-ui.a-audio-player-container 
+{
+  position: relative; 
+  overflow: hidden; 
+  clear:both; 
+  
+  .a-audio-meta 
+  { 
+    float: left; 
+    width: 100%; 
+    clear: both; 
+    margin: 0 0 10px 0; 
+  }
+
+  .a-audio-player-interface
+  {
+    overflow: hidden;
+    position: relative;
+    width: auto;
+    background-color: #888;
+    padding: 10px;
+    -moz-border-radius: 4px;
+    -webkit-border-radius: 4px;
+    border-radius: 4px;
+    margin: 10px 0;
+    &.a-loading  
+    {
+      *
+      {
+        visibility: hidden;         
+      }
+      .a-audio-loading 
+      { 
+        visibility: visible; display: block; padding:  0 0 0 20px; background: url({@a-asset-path}/apostrophePlugin/images/a-icon-loader-2.gif) 0 50% no-repeat; line-height: 20px; height: 20px;
+      }      
+    }
+  } // .a-audio-player-interface
+
+  .a-audio-loading { display: none; position: absolute; top: 50%; margin-top: -10px; left: 10px; color: #fff;}
+  
+  .a-audio-controls
+  {
+    float: left; 
+    clear: none; 
+    
+    .a-audio-button
+    {
+      float: left;
+      width: 30px;
+      height: 20px;
+      background-color: #fff;
+      text-indent: -9999px;
+      cursor: pointer;
+      @a-border-radius(2px);
+      &:hover,
+      &:focus
+      {
+        @a-opacity(0.65);
+      }
+    }
+    
+    .a-audio-play  { background: #fff url({@a-asset-path}/apostrophePlugin/images/a-icon-alt-play.png) no-repeat 6px 0; }
+    .a-audio-pause { background: #fff url({@a-asset-path}/apostrophePlugin/images/a-icon-alt-pause.png) no-repeat 6px 0; display: none; }
+    
+  } // .a-audio-controls
+
+} // .a-ui.a-audio-player-container 
+
 
 .a-ui.a-audio-player-container .a-audio-volume { float: right; background: #888; width: 72px; }
@@ -758 +783 @@
 .a-ui .a-audio-slider-wrapper
 {
-float: left;
-padding: 1px;
-border: 1px solid #fff;
-margin: 0 0 0 5px;
--moz-border-radius: 2px;
--webkit-border-radius: 2px;
-border-radius: 2px;
-position: relative;
-height: 16px;
+  float: left;
+  padding: 1px;
+  border: 1px solid #fff;
+  margin: 0 0 0 5px;
+  -moz-border-radius: 2px;
+  -webkit-border-radius: 2px;
+  border-radius: 2px;
+  position: relative;
+  height: 16px;
+  &.playback
+  {
+    float: none;
+    margin: 0 80px 0 34px;
+  }
+  &.volume
+  {
+    float: right;
+    margin-top: -20px;
+  }
 }
 

plugins/apostrophePlugin/branches/1.5/web/js/a.js

@@ -1139 +1139 @@
     mediaSlotEnhancements -- Logged-in editing enhancements for media slots. Makes the placeholder a clickable button redundant functionality for the 'Choose' button
   */
-  this.mediaSlotEnhancements = function() 
+  this.mediaSlotEnhancements = function()
   {
     apostrophe.log('apostorphe.mediaSlotEnhancements');
@@ -1204 +1204 @@
                                 $singleton = $slot.closest('.a-area.singleton'),
                                 $slotContent = $(options['slot-content']);
-                                
+
                 // apostrophe.log('apostrophe.slotEnableForm -- form : ' + options['slot-form']);
                 $slotForm.submit(function() {
@@ -1234 +1234 @@
                                 $saveButton = $(options['save']);
 
-                // Note: The selectors are rigid here because slots can be nested inside of other slots. 
+                // Note: The selectors are rigid here because slots can be nested inside of other slots.
                 // We have to use .children() -- .find() won't work here.
 
@@ -2217 +2217 @@
         {
           apostrophe.log('apostrophe.smartCSS');
-          
+
           var aBody = $('body'),
                     target = 'body';
-                    
+
                 if (options && options['target'])
                 {
@@ -2227 +2227 @@
 
     // Enhancements that we only need to execute these enhancements when we are logged in
-    if (aBody.hasClass('logged-in')) 
+    if (aBody.hasClass('logged-in'))
     {
       apostrophe.mediaSlotEnhancements();
@@ -2250 +2250 @@
       // Utility for finding malformed buttons in old code
       // Most likely has no affect anymore
-      
+
                 var aBtns = $(target).find('.a-btn,.a-submit,.a-cancel');
                 aBtns.each(function() {
@@ -2329 +2329 @@
                         var aAudioPlayer = aAudioContainer.find('.a-audio-player');
                         var aAudioInterface = aAudioContainer.find('.a-audio-player-interface');
+
+      // It's unfortunate, but the jquery ui playback works a lot better if it has a pixel value applied to the parent container. 
+      // We don't need this for the player to look right, it just helps the playback feel better.
+                        aAudioContainer.unbind('setSize.audioPlayer').bind('setSize.audioPlayer', function(){
+                          var loader = aAudioContainer.find('.a-audio-loader'),
+                              playback = aAudioContainer.find('.a-audio-playback'),
+                              newWidth = loader.parent().width();
+              loader.css({
+                width : newWidth
+              });
+              playback.css({
+                width : newWidth
+              });
+                        });
+
+                        aAudioContainer.trigger('setSize.audioPlayer');
+
+                        $(window).unbind('resize.audioPlayer').bind('resize.audioPlayer', function(){
+                          aAudioContainer.trigger('setSize.audioPlayer');
+                        });
+
                         aAudioPlayer.jPlayer({
                                 ready: function ()
@@ -2395 +2416 @@
                 else
                 {
-                        throw "Cannot find DOM Element for Audio Player.";
+                        throw "Cannot find Audio Player.";
                 }
         };
@@ -2753 +2774 @@
         {
           apostrophe.log('apostrophe.enhanceAdmin');
-          
+
           // Sortable Label Buttons
         var sortLabel = $("a.a-sort-label").parent().parent();
-        if (sortLabel.length) 
+        if (sortLabel.length)
         {
         sortLabel.unbind('click.sortLabel').bind('click.sortLabel', function() {
@@ -2769 +2790 @@
         });
         return false;
-      });         
+      });
         };
-    
+
     // Batch Checkbox Toggle
     $('#a-admin-list-batch-checkbox-toggle').unbind('click.batchToggle').bind('click.batchToggle', function(){
@@ -2780 +2801 @@
                 });
         };
-        
+
 
         // Private methods callable only from the above (no this.foo = bar)
@@ -2978 +2999 @@
 */
 function aCall(callback) {
-  if (typeof(callback) === 'function') 
+  if (typeof(callback) === 'function')
   {
     callback();
@@ -2985 +3006 @@
 
 /**
-  aLog -- Utility for 
+  aLog -- Utility for
 */
 function aLog(output) {