sergiotarxz/Wordpress
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

When rendering Underscore templates for Audio/Video details, use 2 new PHP functions to render the markup for audio and video tags: wp_underscore_audio_template() and wp_underscore_video_template().

Browse Source 
Future JS templates can follow the convention of expecting `data` to be passed to them containing a `model` property.

See #27389.



git-svn-id: https://develop.svn.wordpress.org/trunk@27533 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Scott Taylor 2014-03-14 12:19:40 +00:00
parent 83501070d5
commit 4a2ffa917c
1 changed files with 97 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

154
src/wp-includes/media-template.php
View File

@ -7,6 +7,99 @@
* @since 3.5.0 * @since 3.5.0
*/ */
/**
* Output the markup for a audio tag to be used in an Underscore template
* when data.model is passed.
*
* @since 3.9.0
*/
function wp_underscore_audio_template() {
$audio_types = wp_get_audio_extensions();
?>
<audio controls
class="wp-audio-shortcode"
preload="{{ _.isUndefined( data.model.preload ) ? 'none' : data.model.preload }}"
<#
<?php foreach ( array( 'autoplay', 'loop' ) as $attr ):
?>if ( ! _.isUndefined( data.model.<?php echo $attr ?> ) && data.model.<?php echo $attr ?> ) {
#> <?php echo $attr ?><#
}
<?php endforeach ?>#>
>
<# if ( ! _.isEmpty( data.model.src ) ) { #>
<source src="{{ data.model.src }}" type="{{ wp.media.view.settings.embedMimes[ data.model.src.split('.').pop() ] }}" />
<# } #>
<?php foreach ( $audio_types as $type ):
?><# if ( ! _.isEmpty( data.model.<?php echo $type ?> ) ) { #>
<source src="{{ data.model.<?php echo $type ?> }}" type="{{ wp.media.view.settings.embedMimes[ '<?php echo $type ?>' ] }}" />
<# } #>
<?php endforeach;
?></audio>
<?php
}
/**
* Output the markup for a video tag to be used in an Underscore template
* when data.model is passed.
*
* @since 3.9.0
*/
function wp_underscore_video_template() {
$video_types = wp_get_video_extensions();
?>
<#
var isYouTube = ! _.isEmpty( data.model.src ) && data.model.src.match(/youtube|youtu\.be/);
w = ! data.model.width || data.model.width > 640 ? 640 : data.model.width,
h = ! data.model.height ? 360 : data.model.height;
if ( data.model.width && w !== data.model.width ) {
h = Math.ceil( ( h * w ) / data.model.width );
}
#>
<div style="max-width: 100%; width: {{ w }}px">
<video controls
class="wp-video-shortcode{{ isYouTube ? ' youtube-video' : '' }}"
width="{{ w }}"
height="{{ h }}"
<?php
$props = array( 'poster' => '', 'preload' => 'metadata' );
foreach ( $props as $key => $value ):
if ( empty( $value ) ) {
?><#
if ( ! _.isUndefined( data.model.<?php echo $key ?> ) && data.model.<?php echo $key ?> ) {
#> <?php echo $key ?>="{{ data.model.<?php echo $key ?> }}"<#
} #>
<?php } else {
echo $key ?>="{{ _.isUndefined( data.model.<?php echo $key ?> ) ? '<?php echo $value ?>' : data.model.<?php echo $key ?> }}"<?php
}
endforeach;
?><#
<?php foreach ( array( 'autoplay', 'loop' ) as $attr ):
?> if ( ! _.isUndefined( data.model.<?php echo $attr ?> ) && data.model.<?php echo $attr ?> ) {
#> <?php echo $attr ?><#
}
<?php endforeach ?>#>
>
<# if ( ! _.isEmpty( data.model.src ) ) {
if ( isYouTube ) { #>
<source src="{{ data.model.src }}" type="video/youtube" />
<# } else { #>
<source src="{{ data.model.src }}" type="{{ wp.media.view.settings.embedMimes[ data.model.src.split('.').pop() ] }}" />
<# }
} #>
<?php foreach ( $video_types as $type ):
?><# if ( data.model.<?php echo $type ?> ) { #>
<source src="{{ data.model.<?php echo $type ?> }}" type="{{ wp.media.view.settings.embedMimes[ '<?php echo $type ?>' ] }}" />
<# } #>
<?php endforeach; ?>
{{{ data.model.content }}}
</video>
</div>
<?php
}
/** /**
* Prints the templates used in the media manager. * Prints the templates used in the media manager.
* *
@ -676,26 +769,9 @@ function wp_print_media_templates() {
<div class="media-embed media-embed-details"> <div class="media-embed media-embed-details">
<div class="embed-media-settings embed-audio-settings"> <div class="embed-media-settings embed-audio-settings">
<div class="instructions media-instructions">{{{ wp.media.view.l10n.audioDetailsText }}}</div> <div class="instructions media-instructions">{{{ wp.media.view.l10n.audioDetailsText }}}</div>
<audio controls
class="wp-audio-shortcode"
preload="{{ _.isUndefined( data.model.preload ) ? 'none' : data.model.preload }}"
<#
<?php foreach ( array( 'autoplay', 'loop' ) as $attr ):
?>if ( ! _.isUndefined( data.model.<?php echo $attr ?> ) && data.model.<?php echo $attr ?> ) {
#> <?php echo $attr ?><#
}
<?php endforeach ?>#>
>
<# if ( ! _.isEmpty( data.model.src ) ) { #>
<source src="{{ data.model.src }}" type="{{ wp.media.view.settings.embedMimes[ data.model.src.split('.').pop() ] }}" />
<# } #>
<?php foreach ( $audio_types as $type ): <?php wp_underscore_audio_template() ?>
?><# if ( ! _.isEmpty( data.model.<?php echo $type ?> ) ) { #>
<source src="{{ data.model.<?php echo $type ?> }}" type="{{ wp.media.view.settings.embedMimes[ '<?php echo $type ?>' ] }}" />
<# } #>
<?php endforeach;
?></audio>
<# if ( ! _.isEmpty( data.model.src ) ) { #> <# if ( ! _.isEmpty( data.model.src ) ) { #>
<label class="setting"> <label class="setting">
<span>SRC</span> <span>SRC</span>
@ -752,46 +828,10 @@ function wp_print_media_templates() {
if ( data.model.width && w !== data.model.width ) { if ( data.model.width && w !== data.model.width ) {
h = Math.ceil( ( h * w ) / data.model.width ); h = Math.ceil( ( h * w ) / data.model.width );
} }
#> #>
<video controls
class="wp-video-shortcode{{ isYouTube ? ' youtube-video' : '' }}"
width="{{ w }}"
height="{{ h }}"
<?php
$props = array( 'poster' => '', 'preload' => 'metadata' );
foreach ( $props as $key => $value ):
if ( empty( $value ) ) {
?><#
if ( ! _.isUndefined( data.model.<?php echo $key ?> ) && data.model.<?php echo $key ?> ) {
#> <?php echo $key ?>="{{ data.model.<?php echo $key ?> }}"<#
} #>
<?php } else {
echo $key ?>="{{ _.isUndefined( data.model.<?php echo $key ?> ) ? '<?php echo $value ?>' : data.model.<?php echo $key ?> }}"<?php
}
endforeach;
?><#
<?php foreach ( array( 'autoplay', 'loop' ) as $attr ):
?> if ( ! _.isUndefined( data.model.<?php echo $attr ?> ) && data.model.<?php echo $attr ?> ) {
#> <?php echo $attr ?><#
}
<?php endforeach ?>#>
>
<# if ( ! _.isEmpty( data.model.src ) ) {
if ( isYouTube ) { #>
<source src="{{ data.model.src }}" type="video/youtube" />
<# } else { #>
<source src="{{ data.model.src }}" type="{{ wp.media.view.settings.embedMimes[ data.model.src.split('.').pop() ] }}" />
<# }
} #>
<?php foreach ( $video_types as $type ): <?php wp_underscore_video_template() ?>
?><# if ( data.model.<?php echo $type ?> ) { #>
<source src="{{ data.model.<?php echo $type ?> }}" type="{{ wp.media.view.settings.embedMimes[ '<?php echo $type ?>' ] }}" />
<# } #>
<?php endforeach; ?>
{{{ data.model.content }}}
</video>
<# if ( ! _.isEmpty( data.model.src ) ) { #> <# if ( ! _.isEmpty( data.model.src ) ) { #>
<label class="setting"> <label class="setting">
<span>SRC</span> <span>SRC</span>