WordPress.org
Get WordPress

Make WordPress Core

Changeset 27533


Ignore:
Timestamp:
03/14/2014 12:19:40 PM (11 years ago)
Author:
wonderboymusic
Message:

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.

File:
1 edited

Legend:

Unmodified
Added
Removed

  • trunk/src/wp-includes/media-template.php

    r27530 r27533  
    77 * @since 3.5.0
    88 */
     9
     10/**
     11 * Output the markup for a audio tag to be used in an Underscore template
     12 *  when data.model is passed.
     13 *
     14 * @since 3.9.0
     15 */
     16function wp_underscore_audio_template() {
     17    $audio_types = wp_get_audio_extensions();
     18?>
     19<audio controls
     20    class="wp-audio-shortcode"
     21    preload="{{ _.isUndefined( data.model.preload ) ? 'none' : data.model.preload }}"
     22    <#
     23    <?php foreach ( array( 'autoplay', 'loop' ) as $attr ):
     24    ?>if ( ! _.isUndefined( data.model.<?php echo $attr ?> ) && data.model.<?php echo $attr ?> ) {
     25        #> <?php echo $attr ?><#
     26    }
     27    <?php endforeach ?>#>
     28>
     29    <# if ( ! _.isEmpty( data.model.src ) ) { #>
     30    <source src="{{ data.model.src }}" type="{{ wp.media.view.settings.embedMimes[ data.model.src.split('.').pop() ] }}" />
     31    <# } #>
     32
     33    <?php foreach ( $audio_types as $type ):
     34    ?><# if ( ! _.isEmpty( data.model.<?php echo $type ?> ) ) { #>
     35    <source src="{{ data.model.<?php echo $type ?> }}" type="{{ wp.media.view.settings.embedMimes[ '<?php echo $type ?>' ] }}" />
     36    <# } #>
     37    <?php endforeach;
     38?></audio>
     39<?php
     40}
     41
     42/**
     43 * Output the markup for a video tag to be used in an Underscore template
     44 *  when data.model is passed.
     45 *
     46 * @since 3.9.0
     47 */
     48function wp_underscore_video_template() {
     49    $video_types = wp_get_video_extensions();
     50?>
     51<#
     52var isYouTube = ! _.isEmpty( data.model.src ) && data.model.src.match(/youtube|youtu\.be/);
     53    w = ! data.model.width || data.model.width > 640 ? 640 : data.model.width,
     54    h = ! data.model.height ? 360 : data.model.height;
     55
     56if ( data.model.width && w !== data.model.width ) {
     57    h = Math.ceil( ( h * w ) / data.model.width );
     58}
     59#>
     60<div style="max-width: 100%; width: {{ w }}px">
     61<video controls
     62    class="wp-video-shortcode{{ isYouTube ? ' youtube-video' : '' }}"
     63    width="{{ w }}"
     64    height="{{ h }}"
     65    <?php
     66    $props = array( 'poster' => '', 'preload' => 'metadata' );
     67    foreach ( $props as $key => $value ):
     68        if ( empty( $value ) ) {
     69        ?><#
     70        if ( ! _.isUndefined( data.model.<?php echo $key ?> ) && data.model.<?php echo $key ?> ) {
     71            #> <?php echo $key ?>="{{ data.model.<?php echo $key ?> }}"<#
     72        } #>
     73        <?php } else {
     74            echo $key ?>="{{ _.isUndefined( data.model.<?php echo $key ?> ) ? '<?php echo $value ?>' : data.model.<?php echo $key ?> }}"<?php
     75        }
     76    endforeach;
     77    ?><#
     78    <?php foreach ( array( 'autoplay', 'loop' ) as $attr ):
     79    ?> if ( ! _.isUndefined( data.model.<?php echo $attr ?> ) && data.model.<?php echo $attr ?> ) {
     80        #> <?php echo $attr ?><#
     81    }
     82    <?php endforeach ?>#>
     83>
     84    <# if ( ! _.isEmpty( data.model.src ) ) {
     85        if ( isYouTube ) { #>
     86        <source src="{{ data.model.src }}" type="video/youtube" />
     87        <# } else { #>
     88        <source src="{{ data.model.src }}" type="{{ wp.media.view.settings.embedMimes[ data.model.src.split('.').pop() ] }}" />
     89        <# }
     90    } #>
     91
     92    <?php foreach ( $video_types as $type ):
     93    ?><# if ( data.model.<?php echo $type ?> ) { #>
     94    <source src="{{ data.model.<?php echo $type ?> }}" type="{{ wp.media.view.settings.embedMimes[ '<?php echo $type ?>' ] }}" />
     95    <# } #>
     96    <?php endforeach; ?>
     97    {{{ data.model.content }}}
     98</video>
     99</div>
     100<?php
     101}
    9102
    10103/**
    … …  
    677770            <div class="embed-media-settings embed-audio-settings">
    678771                <div class="instructions media-instructions">{{{ wp.media.view.l10n.audioDetailsText }}}</div>
    679                 <audio controls
    680                     class="wp-audio-shortcode"
    681                     preload="{{ _.isUndefined( data.model.preload ) ? 'none' : data.model.preload }}"
    682                     <#
    683                     <?php foreach ( array( 'autoplay', 'loop' ) as $attr ):
    684                     ?>if ( ! _.isUndefined( data.model.<?php echo $attr ?> ) && data.model.<?php echo $attr ?> ) {
    685                         #> <?php echo $attr ?><#
    686                     }
    687                     <?php endforeach ?>#>
    688                 >
    689                     <# if ( ! _.isEmpty( data.model.src ) ) { #>
    690                     <source src="{{ data.model.src }}" type="{{ wp.media.view.settings.embedMimes[ data.model.src.split('.').pop() ] }}" />
    691                     <# } #>
    692 
    693                     <?php foreach ( $audio_types as $type ):
    694                     ?><# if ( ! _.isEmpty( data.model.<?php echo $type ?> ) ) { #>
    695                     <source src="{{ data.model.<?php echo $type ?> }}" type="{{ wp.media.view.settings.embedMimes[ '<?php echo $type ?>' ] }}" />
    696                     <# } #>
    697                     <?php endforeach;
    698                 ?></audio>
     772
     773                <?php wp_underscore_audio_template() ?>
     774
    699775                <# if ( ! _.isEmpty( data.model.src ) ) { #>
    700776                <label class="setting">
    … …  
    753829                    h = Math.ceil( ( h * w ) / data.model.width );
    754830                }
    755 
    756831                #>
    757                 <video controls
    758                     class="wp-video-shortcode{{ isYouTube ? ' youtube-video' : '' }}"
    759                     width="{{ w }}"
    760                     height="{{ h }}"
    761                     <?php
    762                     $props = array( 'poster' => '', 'preload' => 'metadata' );
    763                     foreach ( $props as $key => $value ):
    764                         if ( empty( $value ) ) {
    765                         ?><#
    766                         if ( ! _.isUndefined( data.model.<?php echo $key ?> ) && data.model.<?php echo $key ?> ) {
    767                             #> <?php echo $key ?>="{{ data.model.<?php echo $key ?> }}"<#
    768                         } #>
    769                         <?php } else {
    770                             echo $key ?>="{{ _.isUndefined( data.model.<?php echo $key ?> ) ? '<?php echo $value ?>' : data.model.<?php echo $key ?> }}"<?php
    771                         }
    772                     endforeach;
    773                     ?><#
    774                     <?php foreach ( array( 'autoplay', 'loop' ) as $attr ):
    775                     ?> if ( ! _.isUndefined( data.model.<?php echo $attr ?> ) && data.model.<?php echo $attr ?> ) {
    776                         #> <?php echo $attr ?><#
    777                     }
    778                     <?php endforeach ?>#>
    779                 >
    780                     <# if ( ! _.isEmpty( data.model.src ) ) {
    781                         if ( isYouTube ) { #>
    782                         <source src="{{ data.model.src }}" type="video/youtube" />
    783                         <# } else { #>
    784                         <source src="{{ data.model.src }}" type="{{ wp.media.view.settings.embedMimes[ data.model.src.split('.').pop() ] }}" />
    785                         <# }
    786                     } #>
    787 
    788                     <?php foreach ( $video_types as $type ):
    789                     ?><# if ( data.model.<?php echo $type ?> ) { #>
    790                     <source src="{{ data.model.<?php echo $type ?> }}" type="{{ wp.media.view.settings.embedMimes[ '<?php echo $type ?>' ] }}" />
    791                     <# } #>
    792                     <?php endforeach; ?>
    793                     {{{ data.model.content }}}
    794                 </video>
     832
     833                <?php wp_underscore_video_template() ?>
     834
    795835                <# if ( ! _.isEmpty( data.model.src ) ) { #>
    796836                <label class="setting">
Note: See TracChangeset for help on using the changeset viewer.