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().
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
parent
83501070d5
commit
4a2ffa917c
@ -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>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user