WordPress.org
Get WordPress

Make WordPress Core

Ticket #28905: 28905.2.diff

File 28905.2.diff, 14.9 KB (added by wonderboymusic, 10 years ago)

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

     
    104104                                }
    105105                        }, this );
    106106                },
     107
     108                /* jshint scripturl: true */
     109                createIframe: function ( content ) {
     110                        var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver,
     111                                iframe, iframeDoc, i, resize,
     112                                dom = tinymce.DOM;
     113
     114                        if ( content.indexOf( '<script' ) !== -1 ) {
     115                                iframe = dom.create( 'iframe', {
     116                                        src: tinymce.Env.ie ? 'javascript:""' : '',
     117                                        frameBorder: '0',
     118                                        allowTransparency: 'true',
     119                                        style: {
     120                                                width: '100%',
     121                                                display: 'block'
     122                                        }
     123                                } );
     124
     125                                this.setContent( iframe );
     126                                iframeDoc = iframe.contentWindow.document;
     127
     128                                iframeDoc.open();
     129                                iframeDoc.write(
     130                                        '<!DOCTYPE html>' +
     131                                        '<html>' +
     132                                                '<head>' +
     133                                                        '<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />' +
     134                                                '</head>' +
     135                                                '<body>' +
     136                                                        content +
     137                                                '</body>' +
     138                                        '</html>'
     139                                );
     140                                iframeDoc.close();
     141
     142                                resize = function() {
     143                                        $( iframe ).height( $( iframeDoc ).height() );
     144                                };
     145
     146                                if ( MutationObserver ) {
     147                                        new MutationObserver( _.debounce( function() {
     148                                                resize();
     149                                        }, 100 ) )
     150                                        .observe( iframeDoc.body, {
     151                                                attributes: true,
     152                                                childList: true,
     153                                                subtree: true
     154                                        } );
     155                                } else {
     156                                        for ( i = 1; i < 6; i++ ) {
     157                                                setTimeout( resize, i * 700 );
     158                                        }
     159                                }
     160                        } else {
     161                                this.setContent( content );
     162                        }
     163                },
     164
    107165                setError: function( message, dashicon ) {
    108166                        this.setContent(
    109167                                '<div class="wpview-error">' +
    … …  
    111169                                        '<p>' + message + '</p>' +
    112170                                '</div>'
    113171                        );
     172                },
     173
     174                getScripts: function() {
     175                        var scripts = [];
     176                        _.each( this.scripts, function( script ) {
     177                                scripts.push( '<script type="text/javascript" src="' + script + '"></script>' );
     178                        } );
     179                        return scripts.join( '' );
     180                },
     181
     182                getStyles: function() {
     183                        var styles = [];
     184                        _.each( this.styles, function( style ) {
     185                                styles.push( '<link rel="stylesheet" href="' + style + '" />' );
     186                        } );
     187                        return styles.join( '' );
    114188                }
    115189        } );
    116190
    … …  
    424498                View: _.extend( {}, wp.media.mixin, {
    425499                        overlay: true,
    426500
     501                        styles: [
     502                                _wpmejsSettings.pluginPath + 'mediaelementplayer.min.css',
     503                                _wpmejsSettings.pluginPath + 'wp-mediaelement.css'
     504                        ],
     505
     506                        scripts: [
     507                                _wpmejsSettings.includesPath + 'jquery/jquery.js',
     508                                _wpmejsSettings.pluginPath + 'mediaelement-and-player.min.js',
     509                                _wpmejsSettings.pluginPath + 'wp-mediaelement.js'
     510                        ],
     511
    427512                        initialize: function( options ) {
     513                                this.parsed = '';
    428514                                this.players = [];
    429515                                this.shortcode = options.shortcode;
    430                                 _.bindAll( this, 'setPlayer', 'pausePlayers' );
    431                                 $( this ).on( 'ready', this.setPlayer );
    432                                 $( this ).on( 'ready', function( event, editor ) {
    433                                         editor.on( 'hide', this.pausePlayers );
    434                                 } );
     516                                _.bindAll( this, 'pausePlayers' );
     517                                $( this ).on( 'ready', this.setHtml );
    435518                                $( document ).on( 'media:edit', this.pausePlayers );
    436519                        },
    437520
    438                         /**
    439                          * Creates the player instance for the current node
    440                          *
    441                          * @global MediaElementPlayer
    442                          *
    443                          * @param {Event} event
    444                          * @param {Object} editor
    445                          * @param {HTMLElement} node
    446                          */
    447                         setPlayer: function( event, editor, node ) {
    448                                 var self = this,
    449                                         media;
     521                        setHtml: function() {
     522                                var template, attrs = this.shortcode.attrs.named;
     523                                attrs.content = this.shortcode.content;
    450524
    451                                 media = $( node ).find( '.wp-' +  this.shortcode.tag + '-shortcode' );
    452 
    453                                 if ( ! this.isCompatible( media ) ) {
    454                                         media.closest( '.wpview-wrap' ).addClass( 'wont-play' );
    455                                         media.replaceWith( '<p>' + media.find( 'source' ).eq(0).prop( 'src' ) + '</p>' );
    456                                         return;
    457                                 } else {
    458                                         media.closest( '.wpview-wrap' ).removeClass( 'wont-play' );
    459                                         if ( this.ua.is( 'ff' ) ) {
    460                                                 media.prop( 'preload', 'metadata' );
    461                                         } else {
    462                                                 media.prop( 'preload', 'none' );
    463                                         }
    464                                 }
    465 
    466                                 media = wp.media.view.MediaDetails.prepareSrc( media.get(0) );
    467 
    468                                 setTimeout( function() {
    469                                         wp.mce.av.loaded = true;
    470                                         self.players.push( new MediaElementPlayer( media, self.mejsSettings ) );
    471                                 }, wp.mce.av.loaded ? 10 : 500 );
     525                                template = this.getStyles();
     526                                template += this.template( {
     527                                        scripts: true,
     528                                        model: _.defaults(
     529                                                attrs,
     530                                                wp.media[ this.shortcode.tag ].defaults
     531                                        )
     532                                } );
     533                                template += this.getScripts();
     534                                this.parsed = template;
     535                                return this.createIframe( template );
    472536                        },
    473537
    474538                        /**
    … …  
    477541                         * @returns {string}
    478542                         */
    479543                        getHtml: function() {
    480                                 var attrs = this.shortcode.attrs.named;
    481                                 attrs.content = this.shortcode.content;
    482 
    483                                 return this.template({ model: _.defaults(
    484                                         attrs,
    485                                         wp.media[ this.shortcode.tag ].defaults )
    486                                 });
     544                                if ( ! this.parsed ) {
     545                                        return this.loadingPlaceholder();
     546                                }
     547                                return this.parsed;
    487548                        },
    488549
    489550                        unbind: function() {
    … …  
    571632                                this.data = {};
    572633                                this.attachments = [];
    573634                                this.shortcode = options.shortcode;
     635                                this.dfd = false;
     636                                this.fetching = false;
    574637
    575                                 $( this ).on( 'ready', function( event, editor ) {
    576                                         editor.on( 'hide', this.pausePlayers );
    577                                 } );
    578                                 $( document ).on( 'media:edit', this.pausePlayers );
     638                                $( this ).on( 'ready', _.bind( this.setNode, this ) );
     639                        },
    579640
    580                                 this.fetch();
     641                        styles: [
     642                                _wpmejsSettings.pluginPath + 'mediaelementplayer.min.css',
     643                                _wpmejsSettings.pluginPath + 'wp-mediaelement.css'
     644                        ],
    581645
    582                                 $( this ).on( 'ready', this.setPlaylist );
     646                        scripts: [
     647                                _wpmejsSettings.includesPath + 'jquery/jquery.js',
     648                                _wpmejsSettings.includesPath + 'underscore.min.js',
     649                                _wpmejsSettings.includesPath + 'backbone.min.js',
     650                                _wpmejsSettings.includesPath + 'wp-util.js',
     651                                _wpmejsSettings.pluginPath + 'mediaelement-and-player.min.js',
     652                                _wpmejsSettings.pluginPath + 'wp-playlist.js'
     653                        ],
     654
     655                        setNode: function () {
     656                                if ( this.parsed ) {
     657                                        this.createIframe( this.parsed );
     658                                } else if ( ! this.fetching ) {
     659                                        this.fetch();
     660                                }
    583661                        },
    584662
    585663                        /**
    586664                         * Asynchronously fetch the shortcode's attachments
    587665                         */
    588                         fetch: function() {
     666                        fetch: function () {
     667                                var self = this;
     668
     669                                this.fetching = true;
     670
    589671                                this.attachments = wp.media.playlist.attachments( this.shortcode );
    590                                 this.dfd = this.attachments.more().done( _.bind( this.render, this ) );
    591                         },
     672                                this.dfd = this.attachments.more();
    592673
    593                         setPlaylist: function( event, editor, element ) {
    594                                 if ( ! this.data.tracks ) {
    595                                         return;
    596                                 }
    597 
    598                                 this.players.push( new WPPlaylistView( {
    599                                         el: $( element ).find( '.wp-playlist' ).get( 0 ),
    600                                         metadata: this.data
    601                                 } ).player );
     674                                this.dfd
     675                                        .always( function() {
     676                                                self.fetching = false;
     677                                        } )
     678                                        .done( function( response ) {
     679                                                if ( response ) {
     680                                                        self.parsed = self.setHtml( response );
     681                                                        self.createIframe( self.parsed );
     682                                                }
     683                                        } );
    602684                        },
    603685
    604686                        /**
    … …  
    607689                         *
    608690                         * @returns {string}
    609691                         */
    610                         getHtml: function() {
     692                        setHtml: function() {
    611693                                var data = this.shortcode.attrs.named,
    612694                                        model = wp.media.playlist,
    613695                                        options,
    614696                                        attachments,
    615                                         tracks = [];
     697                                        tracks = [],
     698                                        template;
    616699
    617700                                // Don't render errors while still fetching attachments
    618701                                if ( this.dfd && 'pending' === this.dfd.state() && ! this.attachments.length ) {
    619                                         return '';
     702                                        this.parsed = '';
     703                                        return;
    620704                                }
    621705
    622706                                _.each( model.defaults, function( value, key ) {
    … …  
    680764
    681765                                options.tracks = tracks;
    682766                                this.data = options;
     767                                template = this.getStyles();
     768                                template += this.template( options );
     769                                template += this.getScripts();
     770                                this.parsed = template;
     771                                return template;
     772                        },
    683773
    684                                 return this.template( options );
     774                        getHtml: function() {
     775                                if ( ! this.parsed ) {
     776                                        return this.loadingPlaceholder();
     777                                }
     778                                return this.parsed;
    685779                        },
    686780
    687781                        unbind: function() {
    … …  
    708802                                this.shortcode = options.shortcode.string();
    709803                        }
    710804
    711                         _.bindAll( this, 'setHtml', 'setNode', 'fetch' );
     805                        _.bindAll( this, 'createIframe', 'setNode', 'fetch' );
    712806                        $( this ).on( 'ready', this.setNode );
    713807                },
    714808                unbind: function() {
    … …  
    721815                },
    722816                setNode: function () {
    723817                        if ( this.parsed ) {
    724                                 this.setHtml( this.parsed );
    725                                 this.parseMediaShortcodes();
     818                                this.createIframe( this.parsed );
    726819                        } else if ( ! this.fetching ) {
    727820                                this.fetch();
    728821                        }
    … …  
    744837                        .done( function( response ) {
    745838                                if ( response ) {
    746839                                        self.parsed = response;
    747                                         self.setHtml( response );
     840                                        self.createIframe( response );
    748841                                }
    749842                        } )
    750843                        .fail( function( response ) {
    … …  
    760853                                        self.setError( response.statusText, 'admin-media' );
    761854                                }
    762855                        } );
    763                 },
    764                 /* jshint scripturl: true */
    765                 setHtml: function ( content ) {
    766                         var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver,
    767                                 iframe, iframeDoc, i, resize,
    768                                 dom = tinymce.DOM;
    769 
    770                         if ( content.indexOf( '<script' ) !== -1 ) {
    771                                 iframe = dom.create( 'iframe', {
    772                                         src: tinymce.Env.ie ? 'javascript:""' : '',
    773                                         frameBorder: '0',
    774                                         allowTransparency: 'true',
    775                                         style: {
    776                                                 width: '100%',
    777                                                 display: 'block'
    778                                         }
    779                                 } );
    780 
    781                                 this.setContent( iframe );
    782                                 iframeDoc = iframe.contentWindow.document;
    783 
    784                                 iframeDoc.open();
    785                                 iframeDoc.write(
    786                                         '<!DOCTYPE html>' +
    787                                         '<html>' +
    788                                                 '<head>' +
    789                                                         '<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />' +
    790                                                 '</head>' +
    791                                                 '<body>' +
    792                                                         content +
    793                                                 '</body>' +
    794                                         '</html>'
    795                                 );
    796                                 iframeDoc.close();
    797 
    798                                 resize = function() {
    799                                         $( iframe ).height( $( iframeDoc ).height() );
    800                                 };
    801 
    802                                 if ( MutationObserver ) {
    803                                         new MutationObserver( _.debounce( function() {
    804                                                 resize();
    805                                         }, 100 ) )
    806                                         .observe( iframeDoc.body, {
    807                                                 attributes: true,
    808                                                 childList: true,
    809                                                 subtree: true
    810                                         } );
    811                                 } else {
    812                                         for ( i = 1; i < 6; i++ ) {
    813                                                 setTimeout( resize, i * 700 );
    814                                         }
    815                                 }
    816                         } else {
    817                                 this.setContent( content );
    818                         }
    819 
    820                         this.parseMediaShortcodes();
    821                 },
    822                 parseMediaShortcodes: function () {
    823                         var self = this;
    824                         $( '.wp-audio-shortcode, .wp-video-shortcode', this.node ).each( function ( i, element ) {
    825                                 self.players.push( new MediaElementPlayer( element, self.mejsSettings ) );
    826                         } );
    827856                }
    828857        } );
    829858

  • src/wp-includes/media.php

     
    15311531                'src'      => '',
    15321532                'loop'     => '',
    15331533                'autoplay' => '',
    1534                 'preload'  => 'none'
     1534                'preload'  => 'none',
     1535                'scripts'  => false
    15351536        );
    15361537        foreach ( $default_types as $type ) {
    15371538                $defaults_atts[$type] = '';
    … …  
    15731574                array_unshift( $default_types, 'src' );
    15741575        }
    15751576
     1577        $scripts = '';
    15761578        /**
    15771579         * Filter the media library used for the audio shortcode.
    15781580         *
    … …  
    15821584         */
    15831585        $library = apply_filters( 'wp_audio_shortcode_library', 'mediaelement' );
    15841586        if ( 'mediaelement' === $library && did_action( 'init' ) ) {
    1585                 wp_enqueue_style( 'wp-mediaelement' );
    1586                 wp_enqueue_script( 'wp-mediaelement' );
     1587                if ( $atts['scripts'] ) {
     1588                        ob_start();
     1589                        wp_print_styles( 'wp-mediaelement' );
     1590                        wp_print_scripts( 'wp-mediaelement' );
     1591                        $scripts = ob_get_clean();
     1592                } else {
     1593                        wp_enqueue_style( 'wp-mediaelement' );
     1594                        wp_enqueue_script( 'wp-mediaelement' );
     1595                }
    15871596        }
    15881597
    15891598        /**
    … …  
    16371646                $html .= wp_mediaelement_fallback( $fileurl );
    16381647        }
    16391648        $html .= '</audio>';
    1640 
     1649        if ( ! empty( $scripts ) ) {
     1650                $html .= $scripts;
     1651        }
    16411652        /**
    16421653         * Filter the audio shortcode output.
    16431654         *
    … …  
    17361747                'preload'  => 'metadata',
    17371748                'width'    => 640,
    17381749                'height'   => 360,
     1750                'scripts'  => false,
    17391751        );
    17401752
    17411753        foreach ( $default_types as $type ) {
    … …  
    17961808                array_unshift( $default_types, 'src' );
    17971809        }
    17981810
     1811        $scripts = '';
    17991812        /**
    18001813         * Filter the media library used for the video shortcode.
    18011814         *
    … …  
    18051818         */
    18061819        $library = apply_filters( 'wp_video_shortcode_library', 'mediaelement' );
    18071820        if ( 'mediaelement' === $library && did_action( 'init' ) ) {
    1808                 wp_enqueue_style( 'wp-mediaelement' );
    1809                 wp_enqueue_script( 'wp-mediaelement' );
     1821                if ( $atts['scripts'] ) {
     1822                        ob_start();
     1823                        wp_print_styles( 'wp-mediaelement' );
     1824                        wp_print_scripts( 'wp-mediaelement' );
     1825                        $scripts = ob_get_clean();
     1826                } else {
     1827                        wp_enqueue_style( 'wp-mediaelement' );
     1828                        wp_enqueue_script( 'wp-mediaelement' );
     1829                }
    18101830        }
    18111831
    18121832        /**
    … …  
    18731893                $html .= wp_mediaelement_fallback( $fileurl );
    18741894        }
    18751895        $html .= '</video>';
     1896        if ( ! empty( $scripts ) ) {
     1897                $html .= $scripts;
     1898        }
    18761899
    18771900        $output = sprintf( '<div style="width: %dpx; max-width: 100%%;" class="wp-video">%s</div>', $atts['width'], $html );
    18781901
    … …  
    23242347 * @return string The embed HTML.
    23252348 */
    23262349function wp_embed_handler_audio( $matches, $attr, $url, $rawattr ) {
    2327         $audio = sprintf( '[audio src="%s" /]', esc_url( $url ) );
     2350        if ( defined( 'DOING_AJAX' ) && DOING_AJAX && 'parse-embed' === $_REQUEST['action'] ) {
     2351                $audio = sprintf( '[audio scripts="1" src="%s"]', esc_url( $url ) );
     2352        } else {
     2353                $audio = sprintf( '[audio src="%s"]', esc_url( $url ) );
     2354        }
    23282355
    23292356        /**
    23302357         * Filter the audio embed output.
    … …  
    23562383                $dimensions .= sprintf( 'width="%d" ', (int) $rawattr['width'] );
    23572384                $dimensions .= sprintf( 'height="%d" ', (int) $rawattr['height'] );
    23582385        }
    2359         $video = sprintf( '[video %s src="%s" /]', $dimensions, esc_url( $url ) );
     2386        if ( defined( 'DOING_AJAX' ) && DOING_AJAX && 'parse-embed' === $_REQUEST['action'] ) {
     2387                $video = sprintf( '[video scripts="1" %s src="%s"]', $dimensions, esc_url( $url ) );
     2388        } else {
     2389                $video = sprintf( '[video %s src="%s"]', $dimensions, esc_url( $url ) );
     2390        }
    23602391
    23612392        /**
    23622393         * Filter the video embed output.

  • src/wp-includes/script-loader.php

     
    323323
    324324        $scripts->add( 'wp-mediaelement', "/wp-includes/js/mediaelement/wp-mediaelement.js", array('mediaelement'), false, 1 );
    325325        did_action( 'init' ) && $scripts->localize( 'mediaelement', '_wpmejsSettings', array(
     326                'includesPath' => includes_url( 'js/', 'relative' ),
    326327                'pluginPath' => includes_url( 'js/mediaelement/', 'relative' ),
    327328        ) );
    328329
    … …  
    510511                $scripts->add( 'dashboard', "/wp-admin/js/dashboard$suffix.js", array( 'jquery', 'admin-comments', 'postbox' ), false, 1 );
    511512
    512513                $scripts->add( 'list-revisions', "/wp-includes/js/wp-list-revisions$suffix.js" );
    513                
     514
    514515                $scripts->add( 'media-grid', "/wp-includes/js/media-grid$suffix.js", array( 'media-editor' ), false, 1 );
    515516                $scripts->add( 'media', "/wp-admin/js/media$suffix.js", array( 'jquery' ), false, 1 );
    516517                did_action( 'init' ) && $scripts->localize( 'media', 'attachMediaBoxL10n', array(