WordPress.org
Get WordPress

Make WordPress Core

Ticket #27389: 27389.diff

File 27389.diff, 17.5 KB (added by wonderboymusic, 11 years ago)

  • src/wp-includes/class-wp-editor.php

     
    343343                                $suffix = defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ? '' : '.min';
    344344                                $version = 'ver=' . $GLOBALS['wp_version'];
    345345                                $dashicons = includes_url( "css/dashicons$suffix.css?$version" );
     346                                $mediaelement = includes_url( "js/mediaelement/mediaelementplayer.min.css?$version" );
     347                                $wpmediaelement = includes_url( "js/mediaelement/wp-mediaelement.css?$version" );
    346348
    347349                                // WordPress default stylesheet and dashicons
    348                                 $mce_css = array( $dashicons, self::$baseurl . '/skins/wordpress/wp-content.css' );
     350                                $mce_css = array(
     351                                        $dashicons,
     352                                        $mediaelement,
     353                                        $wpmediaelement,
     354                                        self::$baseurl . '/skins/wordpress/wp-content.css'
     355                                );
    349356
    350357                                // load editor_style.css if the current theme supports it
    351358                                if ( ! empty( $GLOBALS['editor_styles'] ) && is_array( $GLOBALS['editor_styles'] ) ) {

  • src/wp-includes/js/mce-view.js

     
    178178
    179179                /**
    180180                 * Refresh views after an update is made
    181                  * 
     181                 *
    182182                 * @param view {object} being refreshed
    183183                 * @param text {string} textual representation of the view
    184184                 */
    … …  
    204204                        return instances[ encodedText ];
    205205                },
    206206
    207                 /** 
     207                /**
    208208                 * render( scope )
    209                  * 
     209                 *
    210210                 * Renders any view instances inside a DOM node `scope`.
    211211                 *
    212212                 * View instances are detected by the presence of wrapper elements.
    … …  
    302302
    303303        };
    304304        wp.mce.views.register( 'gallery', wp.mce.gallery );
     305
     306        wp.mce.media = {
     307                success: function(mejs) {
     308                        this.mejs = mejs;
     309                },
     310
     311                bootstrap: function (node) {
     312                        var media = $(node), settings = {
     313                                success: this.success
     314                        };
     315                        if ( ! _.isUndefined( window._wpmejsSettings ) ) {
     316                                settings.pluginPath = _wpmejsSettings.pluginPath;
     317                        }
     318                        media = wp.media.view.MediaDetails.prepareSrc( media.get(0) );
     319                        this.player = new MediaElementPlayer( media, settings );
     320                },
     321
     322                toView:  function( content ) {
     323                        var match = wp.shortcode.next( this.shortcode, content );
     324
     325                        if ( ! match ) {
     326                                return;
     327                        }
     328
     329                        return {
     330                                index:   match.index,
     331                                content: match.content,
     332                                options: {
     333                                        shortcode: match.shortcode
     334                                }
     335                        };
     336                },
     337
     338                edit: function( node ) {
     339                        var m = wp.media[ this.shortcode ],
     340                                self = this,
     341                                frame, data;
     342
     343                        this.player.pause();
     344
     345                        data = window.decodeURIComponent( $( node ).data('wpview-text') );
     346                        frame = m.edit( data );
     347                        frame.on( 'close', function () {
     348                                frame.detach();
     349                        } );
     350                        frame.state( this.shortcode + '-edit' ).on( self.states, function( selection ) {
     351                                var shortcode = m.shortcode( selection ).string();
     352                                $( node ).attr( 'data-wpview-text', window.encodeURIComponent( shortcode ) );
     353                                wp.mce.views.refreshView( self, shortcode );
     354                                frame.detach();
     355                        } );
     356                        frame.open();
     357                }
     358        };
     359
     360        wp.mce.video = _.extend({}, wp.mce.media, {
     361                shortcode: 'video',
     362                states: 'update replace add-source select-poster-image add-track',
     363                View: wp.mce.View.extend({
     364                        className: 'editor-video',
     365                        template:  media.template('editor-video'),
     366
     367                        initialize: function( options ) {
     368                                this.shortcode = options.shortcode;
     369                        },
     370
     371                        getHtml: function() {
     372                                var attrs = this.shortcode.attrs.named;
     373                                return this.template({ model: attrs });
     374                        }
     375                })
     376        });
     377        wp.mce.views.register( 'video', wp.mce.video );
     378
     379        wp.mce.audio = _.extend({}, wp.mce.media, {
     380                shortcode: 'audio',
     381                states : 'update replace add-source',
     382                View: wp.mce.View.extend({
     383                        className: 'editor-audio',
     384                        template:  media.template('editor-audio'),
     385
     386                        initialize: function( options ) {
     387                                this.shortcode = options.shortcode;
     388                        },
     389
     390                        getHtml: function() {
     391                                var attrs = this.shortcode.attrs.named;
     392                                return this.template({ model: attrs });
     393                        }
     394                })
     395        });
     396        wp.mce.views.register( 'audio', wp.mce.audio );
    305397}(jQuery));

  • src/wp-includes/js/media-views.js

     
    65426542                        }, this.options );
    65436543                },
    65446544
    6545                 /**
    6546                  * When multiple players in the DOM contain the same src, things get weird.
    6547                  *
    6548                  * @param {HTMLElement} media
    6549                  * @returns {HTMLElement}
    6550                  */
    6551                 prepareSrc : function (media) {
    6552                         var i = wp.media.view.MediaDetails.instances++;
    6553                         _.each( $(media).find('source'), function (source) {
    6554                                 source.src = [
    6555                                         source.src,
    6556                                         source.src.indexOf('?') > -1 ? '&' : '?',
    6557                                         '_=',
    6558                                         i
    6559                                 ].join('');
    6560                         });
    6561 
    6562                         return media;
    6563                 },
    6564 
    65656545                removeSetting : function (e) {
    65666546                        var wrap = $( e.currentTarget ).parent(), setting;
    65676547
    … …  
    66756655                        this.$( '.embed-media-settings' ).scrollTop( 0 );
    66766656                }
    66776657        }, {
    6678                 instances : 0
     6658                instances : 0,
     6659
     6660                /**
     6661                 * When multiple players in the DOM contain the same src, things get weird.
     6662                 *
     6663                 * @param {HTMLElement} media
     6664                 * @returns {HTMLElement}
     6665                 */
     6666                prepareSrc : function (media) {
     6667                        var i = wp.media.view.MediaDetails.instances++;
     6668                        _.each( $(media).find('source'), function (source) {
     6669                                source.src = [
     6670                                        source.src,
     6671                                        source.src.indexOf('?') > -1 ? '&' : '?',
     6672                                        '_=',
     6673                                        i
     6674                                ].join('');
     6675                        });
     6676
     6677                        return media;
     6678                }
    66796679        });
    66806680
    66816681        /**
    … …  
    67006700                                if ( audio.is(':hidden') ) {
    67016701                                        audio.show();
    67026702                                }
    6703                                 this.media = this.prepareSrc( audio.get(0) );
     6703                                this.media = media.view.MediaDetails.prepareSrc( audio.get(0) );
    67046704                        } else {
    67056705                                audio.hide();
    67066706                                this.media = false;
    … …  
    67346734                                }
    67356735
    67366736                                if ( ! video.hasClass('youtube-video') ) {
    6737                                         this.media = this.prepareSrc( video.get(0) );
     6737                                        this.media = media.view.MediaDetails.prepareSrc( video.get(0) );
    67386738                                } else {
    67396739                                        this.media = video.get(0);
    67406740                                }

  • src/wp-includes/js/tinymce/plugins/wpgallery/plugin.js

     
    2525        }
    2626
    2727        function replaceAVShortcodes( content ) {
    28                 var testRegex = /\[(video-playlist|audio|video|playlist)[^\]]*\]/,
    29                         replaceRegex = /\[(video-playlist|audio|video|playlist)[^\]]*\]([\s\S]*?\[\/\1\])?/;
     28                var testRegex = /\[(video-playlist|playlist)[^\]]*\]/,
     29                        replaceRegex = /\[(video-playlist|playlist)[^\]]*\]([\s\S]*?\[\/\1\])?/;
    3030
    3131                while ( testRegex.test( content ) ) {
    3232                        content = content.replace( replaceRegex, replaceCallback );
    … …  
    9292                                editor.dom.setAttrib( node, 'data-wp-media', window.encodeURIComponent( shortcode ) );
    9393                                frame.detach();
    9494                        });
    95                 } else if ( editor.dom.hasClass( node, 'wp-video' ) ) {
    96                         frame = wp.media.video.edit( data );
    97                         frame.on( 'close', function () {
    98                                 frame.detach();
    99                         } );
    100                         frame.state( 'video-details' ).on(
    101                                 'update replace add-source select-poster-image add-track',
    102                                 function ( selection ) {
    103                                         var shortcode = wp.media.video.shortcode( selection );
    104                                         editor.dom.setAttrib( node, 'data-wp-media', window.encodeURIComponent( shortcode ) );
    105                                         frame.detach();
    106                                 }
    107                         );
    108                         frame.open();
    109                 } else if ( editor.dom.hasClass( node, 'wp-audio' ) ) {
    110                         frame = wp.media.audio.edit( data );
    111                         frame.on( 'close', function () {
    112                                 frame.detach();
    113                         } );
    114                         frame.state( 'audio-details' ).on( 'update replace add-source', function ( selection ) {
    115                                 var shortcode = wp.media.audio.shortcode( selection );
    116                                 editor.dom.setAttrib( node, 'data-wp-media', window.encodeURIComponent( shortcode ) );
    117                                 frame.detach();
    118                         } );
    119                         frame.open();
    12095                } else {
    12196                        // temp
    12297                        window.console && window.console.log( 'Edit AV shortcode ' + data );

  • src/wp-includes/js/tinymce/skins/wordpress/wp-content.css

     
    237237/**
    238238 * Gallery preview
    239239 */
    240 .wpview-type-gallery {
     240.wpview-type-gallery,
     241.wpview-type-audio,
     242.wpview-type-video {
    241243    position: relative;
    242244    padding: 0 0 12px;
    243245    margin-bottom: 16px;
    … …  
    244246        cursor: pointer;
    245247}
    246248
    247  .wpview-type-gallery:after {
     249.wpview-type-audio,
     250.wpview-type-video {
     251    padding: 32px 0 0;
     252}
     253
     254.wpview-type-audio audio,
     255.wpview-type-video video {
     256    display: inline-block;
     257        max-width: 100%;
     258}
     259
     260 .wpview-type-gallery:after,
     261 .wpview-type-audio:after,
     262 .wpview-type-video:after {
    248263    content: '';
    249264    display: block;
    250265    height: 0;
    … …  
    252267    visibility: hidden;
    253268}
    254269
    255  .wpview-type-gallery.selected {
     270.wpview-type-gallery.selected {
    256271        background-color: #efefef;
    257272}
    258273
    259 .wpview-type-gallery .toolbar {
     274.wpview-type-audio,
     275.wpview-type-video {
     276        background-color: #efefef;
     277}
     278
     279.wpview-type-gallery .toolbar,
     280.wpview-type-audio .toolbar,
     281.wpview-type-video .toolbar {
    260282    position: absolute;
    261283    top: 0;
    262284    left: 0;
    … …  
    266288        display: none;
    267289}
    268290
     291.wpview-type-audio .toolbar,
     292.wpview-type-video .toolbar {
     293        display: block;
     294}
     295
    269296.wpview-type-gallery.selected .toolbar {
    270297        display: block;
    271298}
    272299
    273 .wpview-type-gallery .toolbar span {
     300.wpview-type-gallery .toolbar span,
     301.wpview-type-audio .toolbar span
     302.wpview-type-video .toolbar span {
    274303        cursor: pointer;
    275304}
    276305

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

     
    88 */
    99
    1010/**
     11 * Output the markup for a audio tag to be used in an Underscore template
     12 *      when data.model is passed.
     13 *
     14 * @param boolean $onload Whether to call the parent window's bootstrap method
     15 */
     16function wp_underscore_audio_template( $onload = false ) {
     17        $audio_types = wp_get_audio_extensions();
     18?>
     19<audio controls
     20        class="wp-audio-shortcode" <?php echo empty( $onload ) ? '' : 'onloadstart="window.parent.wp.mce.audio.bootstrap(this)"' ?>
     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 * @param boolean $onload Whether to call the parent window's bootstrap method
     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 <?php echo empty( $onload ) ? '' : 'oncanplay="window.parent.wp.mce.video.bootstrap(this)"' ?>
     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}
     100
     101/**
    11102 * Prints the templates used in the media manager.
    12103 *
    13104 * @since 3.5.0
    … …  
    676767                <div class="media-embed media-embed-details">
    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">
    701773                                        <span>SRC</span>
    … …  
    738810                </div>
    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( true ) ?>
     819        </script>
     820
    741821        <script type="text/html" id="tmpl-video-details">
    742822                <?php $video_types = wp_get_video_extensions(); ?>
    743823                <div class="media-embed media-embed-details">
    … …  
    744824                        <div class="embed-media-settings embed-video-settings">
    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">
    797830                                        <span>SRC</span>
    … …  
    857890                        </div>
    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( true ) ?>
     900        </script>
    860901        <?php
    861902
    862903                //TODO: do we want to deal with the fact that the elements used for gallery items are filterable and can be overriden via shortcode attributes