WordPress.org
Get WordPress

Make WordPress Core


Ignore:
Timestamp:
03/13/2014 11:09:06 PM (12 years ago)
Author:
wonderboymusic
Message:

Add MCE Views for audio and video. Please clear your browser cache so that you get the latest TinyMCE stylesheet.

  • Move TinyMCE shortcode handling from wpgallery plugin to mce-view.js
  • Force preload="none" when rendering media in the editor to ensure fast loading (I realize this sounds illogical)
  • Move audio and video tag builder logic in media-template.php into PHP funcs that can be reused by any code passing data.model to an Underscore template
  • Pause all players when moving between editor tabs and when moving from the editor to editing in the media modal.
  • Rename wp.media.audio|video.shortcode() to the more appropriate wp.media.audio|video.update() that now returns a wp.shortcode object instead of a string.
  • Add necessary MediaElement css files to $mce_css
  • In wp.mce.View.render(), support multiple instances of the same shortcode
  • When rendering wp.mce.Views, fire a ready event that passes the current MCE View root element as context

See #27389.

File:
1 edited

Legend:

Unmodified
Added
Removed

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

    r27490 r27528  
    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( $onload = false ) {
     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<video controls
     61    class="wp-video-shortcode{{ isYouTube ? ' youtube-video' : '' }}"
     62    width="{{ w }}"
     63    height="{{ h }}"
     64    <?php
     65    $props = array( 'poster' => '', 'preload' => 'metadata' );
     66    foreach ( $props as $key => $value ):
     67        if ( empty( $value ) ) {
     68        ?><#
     69        if ( ! _.isUndefined( data.model.<?php echo $key ?> ) && data.model.<?php echo $key ?> ) {
     70            #> <?php echo $key ?>="{{ data.model.<?php echo $key ?> }}"<#
     71        } #>
     72        <?php } else {
     73            echo $key ?>="{{ _.isUndefined( data.model.<?php echo $key ?> ) ? '<?php echo $value ?>' : data.model.<?php echo $key ?> }}"<?php
     74        }
     75    endforeach;
     76    ?><#
     77    <?php foreach ( array( 'autoplay', 'loop' ) as $attr ):
     78    ?> if ( ! _.isUndefined( data.model.<?php echo $attr ?> ) && data.model.<?php echo $attr ?> ) {
     79        #> <?php echo $attr ?><#
     80    }
     81    <?php endforeach ?>#>
     82>
     83    <# if ( ! _.isEmpty( data.model.src ) ) {
     84        if ( isYouTube ) { #>
     85        <source src="{{ data.model.src }}" type="video/youtube" />
     86        <# } else { #>
     87        <source src="{{ data.model.src }}" type="{{ wp.media.view.settings.embedMimes[ data.model.src.split('.').pop() ] }}" />
     88        <# }
     89    } #>
     90
     91    <?php foreach ( $video_types as $type ):
     92    ?><# if ( data.model.<?php echo $type ?> ) { #>
     93    <source src="{{ data.model.<?php echo $type ?> }}" type="{{ wp.media.view.settings.embedMimes[ '<?php echo $type ?>' ] }}" />
     94    <# } #>
     95    <?php endforeach; ?>
     96    {{{ data.model.content }}}
     97</video>
     98<?php
     99}
    9100
    10101/**
    … …  
    677768            <div class="embed-media-settings embed-audio-settings">
    678769                <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>
     770                <?php wp_underscore_audio_template() ?>
    699771                <# if ( ! _.isEmpty( data.model.src ) ) { #>
    700772                <label class="setting">
    … …  
    739811    </script>
    740812
     813    <script type="text/html" id="tmpl-editor-audio">
     814        <div class="toolbar">
     815            <div class="dashicons dashicons-format-audio edit"></div>
     816            <div class="dashicons dashicons-no-alt remove"></div>
     817        </div>
     818        <?php wp_underscore_audio_template() ?>
     819    </script>
     820
    741821    <script type="text/html" id="tmpl-video-details">
    742822        <?php $video_types = wp_get_video_extensions(); ?>
    … …  
    745825                <div class="instructions media-instructions">{{{ wp.media.view.l10n.videoDetailsText }}}</div>
    746826                <div class="wp-video-holder">
    747                 <#
    748                 var isYouTube = ! _.isEmpty( data.model.src ) && data.model.src.match(/youtube|youtu\.be/);
    749                     w = ! data.model.width || data.model.width > 640 ? 640 : data.model.width,
    750                     h = ! data.model.height ? 360 : data.model.height;
    751 
    752                 if ( data.model.width && w !== data.model.width ) {
    753                     h = Math.ceil( ( h * w ) / data.model.width );
    754                 }
    755 
    756                 #>
    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>
     827                <?php wp_underscore_video_template() ?>
    795828                <# if ( ! _.isEmpty( data.model.src ) ) { #>
    796829                <label class="setting">
    … …  
    858891        </div>
    859892    </script>
     893
     894    <script type="text/html" id="tmpl-editor-video">
     895        <div class="toolbar">
     896            <div class="dashicons dashicons-format-video edit"></div>
     897            <div class="dashicons dashicons-no-alt remove"></div>
     898        </div>
     899        <?php wp_underscore_video_template() ?>
     900    </script>
    860901    <?php
    861902
Note: See TracChangeset for help on using the changeset viewer.