Playlists:

* Add an action, `wp_playlist_scripts`, where a user can turn off all default script and style loading for playlists and roll their own.
* Move the script and style loading for playlists to a function, `wp_playlist_scripts( $type )`, that hooks into `wp_playlist_scripts`.
* Make the `<noscript>` playlist output an `<ol>`, instead of a list of links with no surrounding markup.

See #26631.



git-svn-id: https://develop.svn.wordpress.org/trunk@27486 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Scott Taylor 2014-03-09 22:44:22 +00:00
parent bfbb7ee78a
commit c87fc83bf8
1 changed files with 63 additions and 45 deletions

View File

@ -998,6 +998,55 @@ function gallery_shortcode( $attr ) {
return $output; return $output;
} }
/**
* Output and enqueue default scripts and styles for playlists.
*
* @since 3.9.0
*
* @param string $type Type of playlist: "audio" or "video."
*/
function wp_playlist_scripts( $type ) {
wp_enqueue_style( 'wp-mediaelement' );
wp_enqueue_script( 'wp-playlist' );
?>
<!--[if lt IE 9]><script>document.createElement('<?php echo esc_js( $type ) ?>');</script><![endif]-->
<script type="text/html" id="tmpl-wp-playlist-current-item">
<# if ( data.image ) { #>
<img src="{{{ data.thumb.src }}}"/>
<# } #>
<# if ( data.meta.title ) { #>
<div class="wp-playlist-caption">
<span class="wp-caption-meta wp-caption-title">&#8220;{{{ data.meta.title }}}&#8221;</span>
<span class="wp-caption-meta wp-caption-album">{{{ data.meta.album }}}</span>
<span class="wp-caption-meta wp-caption-artist">{{{ data.meta.artist }}}</span>
</div>
<# } else { #>
<div class="wp-playlist-caption">{{{ data.caption ? data.caption : data.title }}}</div>
<# } #>
</script>
<script type="text/html" id="tmpl-wp-playlist-item">
<div class="wp-playlist-item">
<# if ( ( data.title || data.meta.title ) && ( ! data.artists || data.meta.artist ) ) { #>
<div class="wp-playlist-caption">
{{{ data.index ? ( data.index + '.&nbsp;' ) : '' }}}
<span class="wp-caption-title">&#8220;{{{ data.title ? data.title : data.meta.title }}}&#8221;</span>
<# if ( data.artists ) { #>
<span class="wp-caption-by"><?php _e( 'by' ) ?></span>
<span class="wp-caption-artist">{{{ data.meta.artist }}}</span>
<# } #>
</div>
<# } else { #>
<div class="wp-playlist-caption">{{{ data.index ? ( data.index + '.' ) : '' }}} {{{ data.caption ? data.caption : data.title }}}</div>
<# } #>
<# if ( data.meta.length_formatted ) { #>
<div class="wp-playlist-item-length">{{{ data.meta.length_formatted }}}</div>
<# } #>
</div>
</script>
<?php
}
add_action( 'wp_playlist_scripts', 'wp_playlist_scripts' );
/** /**
* The Playlist shortcode. * The Playlist shortcode.
* *
@ -1195,45 +1244,17 @@ function wp_get_playlist( $attr, $type ) {
ob_start(); ob_start();
if ( 1 === $instance ): if ( 1 === $instance ) {
wp_enqueue_style( 'wp-mediaelement' ); /**
wp_enqueue_script( 'wp-playlist' ); * Hook to print and enqueue playlist scripts, styles, and JavaScript templates.
?> *
<!--[if lt IE 9]><script>document.createElement('<?php echo esc_js( $type ) ?>');</script><![endif]--> * @since 3.9.0
<script type="text/html" id="tmpl-wp-playlist-current-item"> *
<# if ( data.image ) { #> * @param string $type Type of playlist: "audio" or "video."
<img src="{{{ data.thumb.src }}}"/> * @param string $style The "theme" for the playlist. Core provides "light" and "dark."
<# } #> */
<# if ( data.meta.title ) { #> do_action( 'wp_playlist_scripts', $type, $style );
<div class="wp-playlist-caption"> } ?>
<span class="wp-caption-meta wp-caption-title">&#8220;{{{ data.meta.title }}}&#8221;</span>
<span class="wp-caption-meta wp-caption-album">{{{ data.meta.album }}}</span>
<span class="wp-caption-meta wp-caption-artist">{{{ data.meta.artist }}}</span>
</div>
<# } else { #>
<div class="wp-playlist-caption">{{{ data.caption ? data.caption : data.title }}}</div>
<# } #>
</script>
<script type="text/html" id="tmpl-wp-playlist-item">
<div class="wp-playlist-item">
<# if ( ( data.title || data.meta.title ) && ( ! data.artists || data.meta.artist ) ) { #>
<div class="wp-playlist-caption">
{{{ data.index ? ( data.index + '.&nbsp;' ) : '' }}}
<span class="wp-caption-title">&#8220;{{{ data.title ? data.title : data.meta.title }}}&#8221;</span>
<# if ( data.artists ) { #>
<span class="wp-caption-by"><?php _e( 'by' ) ?></span>
<span class="wp-caption-artist">{{{ data.meta.artist }}}</span>
<# } #>
</div>
<# } else { #>
<div class="wp-playlist-caption">{{{ data.index ? ( data.index + '.' ) : '' }}} {{{ data.caption ? data.caption : data.title }}}</div>
<# } #>
<# if ( data.meta.length_formatted ) { #>
<div class="wp-playlist-item-length">{{{ data.meta.length_formatted }}}</div>
<# } #>
</div>
</script>
<?php endif ?>
<div class="wp-playlist wp-<?php echo $safe_type ?>-playlist wp-playlist-<?php echo $safe_style ?>"> <div class="wp-playlist wp-<?php echo $safe_type ?>-playlist wp-playlist-<?php echo $safe_style ?>">
<?php if ( 'audio' === $type ): ?> <?php if ( 'audio' === $type ): ?>
<div class="wp-playlist-current-item"></div> <div class="wp-playlist-current-item"></div>
@ -1246,14 +1267,11 @@ function wp_get_playlist( $attr, $type ) {
<div class="wp-playlist-next"></div> <div class="wp-playlist-next"></div>
<div class="wp-playlist-prev"></div> <div class="wp-playlist-prev"></div>
<noscript> <noscript>
<?php <ol><?php
$output = "\n";
foreach ( $attachments as $att_id => $attachment ) { foreach ( $attachments as $att_id => $attachment ) {
$output .= wp_get_attachment_link( $att_id ) . "\n"; printf( '<li>%s</li>', wp_get_attachment_link( $att_id ) );
} }
?></ol>
echo $output;
?>
</noscript> </noscript>
<script type="application/json"><?php echo json_encode( $data ) ?></script> <script type="application/json"><?php echo json_encode( $data ) ?></script>
</div> </div>