WordPress-C
/
WordPress
mirror of https://github.com/WordPress/WordPress.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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.


Built from https://develop.svn.wordpress.org/trunk@27489


git-svn-id: http://core.svn.wordpress.org/trunk@27333 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Scott Taylor 2014-03-10 00:15:14 +00:00
parent d2c0cdc5de
commit 394feb8f91
2 changed files with 32 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
wp-includes/js/mediaelement/wp-mediaelement.css
View File

@ -124,7 +124,7 @@
.wp-playlist-item-length {
position: absolute;
right: 0;
right: 3px;
top: 0;
}
@ -136,9 +136,24 @@
.wp-playlist-item {
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;
}
.wp-playlist-current-item {
overflow: hidden;
margin-bottom: 10px;

21
wp-includes/js/mediaelement/wp-playlist.js
View File

@ -25,6 +25,7 @@
this.renderCurrent();
if ( this.data.tracklist ) {
this.playingClass = 'wp-playlist-playing';
this.renderTracks();
}
@ -57,17 +58,19 @@
},
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 );
},
events : {
@ -115,6 +118,14 @@
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();
}