Changeset 27489

Timestamp:

03/10/2014 12:14:42 AM (12 years ago)

Author:

wonderboymusic

Message:

Add a class, wp-playlist-playing, to the currently loaded track when tracks are displayed. Add some subtle styles for light and dark playlist themes.

See #27321.

Location:

trunk/src/wp-includes/js/mediaelement

Files:

• wp-mediaelement.css (modified) (2 diffs)
• wp-playlist.js (modified) (3 diffs)

trunk/src/wp-includes/js/mediaelement/wp-mediaelement.css

@@ -125 +125 @@
 .wp-playlist-item-length {
     position: absolute;
-    right: 0;
+    right: 3px;
     top: 0;
 }
@@ -137 +137 @@
     position: relative;
     cursor: pointer;
+    padding: 0 3px;
     border-bottom: 1px solid #ccc;
+}
+
+.wp-playlist-dark .wp-playlist-item {
+    color: #dedede;
+}
+
+.wp-playlist-playing {
+    font-weight: bold;
+    background: #f7f7f7;
+}
+
+.wp-playlist-dark .wp-playlist-playing {
+    background: #000;
+    color: #fff;
 }
 

trunk/src/wp-includes/js/mediaelement/wp-playlist.js

@@ -26 +26 @@
 
             if ( this.data.tracklist ) {
+                this.playingClass = 'wp-playlist-playing';
                 this.renderTracks();
             }
@@ -58 +59 @@
 
         renderTracks : function () {
-            var that = this, i = 1, tracklist = $( '<div class="wp-playlist-tracks"></div>' );
+            var self = this, i = 1, tracklist = $( '<div class="wp-playlist-tracks"></div>' );
             this.tracks.each(function (model) {
-                if ( ! that.data.images ) {
+                if ( ! self.data.images ) {
                     model.set( 'image', false );
                 }
-                model.set( 'artists', that.data.artists );
-                model.set( 'index', that.data.tracknumbers ? i : false );
-                tracklist.append( that.itemTemplate( model.toJSON() ) );
+                model.set( 'artists', self.data.artists );
+                model.set( 'index', self.data.tracknumbers ? i : false );
+                tracklist.append( self.itemTemplate( model.toJSON() ) );
                 i += 1;
             });
             this.$el.append( tracklist );
+
+            this.$( '.wp-playlist-item' ).eq(0).addClass( this.playingClass );
         },
 
@@ -116 +119 @@
         setCurrent : function () {
             this.current = this.tracks.at( this.index );
+
+            if ( this.data.tracklist ) {
+                this.$( '.wp-playlist-item' )
+                    .removeClass( this.playingClass )
+                    .eq( this.index )
+                        .addClass( this.playingClass );
+            }
+
             this.loadCurrent();
             this.player.play();