WordPress.org
Get WordPress

Make WordPress Core

Ticket #26628: 26628.4.diff

File 26628.4.diff, 10.0 KB (added by azaozz, 9 years ago)

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

     
    231231                                                'image',
    232232                                                'fullscreen',
    233233                                                'wordpress',
     234                                                'wpaudiovideo',
    234235                                                'wpeditimage',
    235236                                                'wpgallery',
    236237                                                'wplink',
    … …  
    331332                                        self::$first_init['spellchecker_language'] = self::$mce_locale;
    332333                                }
    333334
     335                                $suffix = defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ? '' : '.min';
     336                                $version = 'ver=' . $GLOBALS['wp_version'];
     337                                $dashicons = includes_url( "css/dashicons$suffix.css?$version" );
     338
    334339                                // WordPress default stylesheet
    335                                 $mce_css = array( self::$baseurl . '/skins/wordpress/wp-content.css' );
     340                                $mce_css = array( $dashicons, self::$baseurl . '/skins/wordpress/wp-content.css' );
    336341
    337342                                // load editor_style.css if the current theme supports it
    338343                                if ( ! empty( $GLOBALS['editor_styles'] ) && is_array( $GLOBALS['editor_styles'] ) ) {

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

     
     1/* global tinymce */
     2tinymce.PluginManager.add( 'wpaudiovideo', function( editor ) {
     3
     4        function parseMediaShortcode( content ) {
     5                return content.replace( /\[(audio|video)[^\]]*\][\s\S]*?\[\/\1\]/g, function( match, type ) {
     6                        var data = tinymce.DOM.encode( match.substr(1) ),
     7                                cls = 'wp-media-shortcode dashicons dashicons-format-' + type;
     8
     9                        return '<div class="' + cls + '" title="' + data + '" contenteditable="false">\u00a0</div>';
     10                });
     11        }
     12
     13        function getMediaShortcode( content ) {
     14                function getAttr( str, name ) {
     15                        name = new RegExp( name + '=\"([^\"]+)\"', 'g' ).exec( str );
     16                        return name ? tinymce.DOM.decode( name[1] ) : '';
     17                }
     18
     19                return content.replace( /<div ([^>]+)>(\u00a0| )*<\/div>/g, function( match, attr ) {
     20                        var cls = getAttr( attr, 'class' );
     21
     22                        if ( cls.indexOf('wp-media-shortcode') !== -1 ) {
     23                                return tinymce.trim( '[' + getAttr( attr, 'title' ) );
     24                        }
     25
     26                        return match;
     27                });
     28        }
     29
     30        editor.on( 'BeforeSetContent', function( e ) {
     31                e.content = parseMediaShortcode( e.content );
     32        });
     33
     34        editor.on( 'PostProcess', function( e ) {
     35                if ( e.get ) {
     36                        e.content = getMediaShortcode( e.content );
     37                }
     38        });
     39
     40        editor.on( 'init', function() {
     41                var dom = editor.dom;
     42               
     43                editor.on( 'mousedown', function( event ) {
     44                        if ( dom.hasClass( event.target, 'wp-media-shortcode' ) ) {
     45                                dom.addClass( event.target, 'wp-media-shortcode-selected' )
     46                                // Prevent IE from making the div resizable
     47                                dom.events.cancel( event );
     48                        } else {
     49                                dom.removeClass( dom.select( '.wp-media-shortcode-selected' ), 'wp-media-shortcode-selected' );
     50                        }
     51                });
     52
     53                editor.on( 'keydown', function( event ) {
     54                        var element;
     55
     56                        if ( event.keyCode !== tinymce.util.VK.DELETE && event.keyCode !== tinymce.util.VK.BACKSPACE ) {
     57                                return;
     58                        }
     59
     60                        element = dom.select( 'div.wp-media-shortcode-selected' );
     61
     62                        if ( element.length ) {
     63                                dom.events.cancel( event );
     64                                dom.remove( element[0] );
     65                                editor.nodeChanged();
     66                        }
     67                });
     68        });
     69
     70        return {
     71                parseMediaShortcode: parseMediaShortcode,
     72                getMediaShortcode: getMediaShortcode
     73        };
     74});

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

    Property changes on: src/wp-includes/js/tinymce/plugins/wpaudiovideo/plugin.js
___________________________________________________________________
Added: svn:eol-style
## -0,0 +1 ##
+native
\ No newline at end of property
     
     1/* global tinymce */
     2tinymce.PluginManager.add( 'wpaudiovideo', function( editor ) {
     3
     4        function parseMediaShortcode( content ) {
     5                return content.replace( /\[(audio|video)[^\]]*\][\s\S]*?\[\/\1\]/g, function( match, type ) {
     6                        var data = tinymce.DOM.encode( match.substr(1) ),
     7                                cls = 'wp-media-shortcode dashicons dashicons-format-' + type;
     8
     9                        return '<div class="' + cls + '" title="' + data + '" contenteditable="false">\u00a0</div>';
     10                });
     11        }
     12
     13        function getMediaShortcode( content ) {
     14                function getAttr( str, name ) {
     15                        name = new RegExp( name + '=\"([^\"]+)\"', 'g' ).exec( str );
     16                        return name ? tinymce.DOM.decode( name[1] ) : '';
     17                }
     18
     19                return content.replace( /<div ([^>]+)>(\u00a0| )*<\/div>/g, function( match, attr ) {
     20                        var cls = getAttr( attr, 'class' );
     21
     22                        if ( cls.indexOf('wp-media-shortcode') !== -1 ) {
     23                                return tinymce.trim( '[' + getAttr( attr, 'title' ) );
     24                        }
     25
     26                        return match;
     27                });
     28        }
     29
     30        editor.on( 'BeforeSetContent', function( e ) {
     31                e.content = parseMediaShortcode( e.content );
     32        });
     33
     34        editor.on( 'PostProcess', function( e ) {
     35                if ( e.get ) {
     36                        e.content = getMediaShortcode( e.content );
     37                }
     38        });
     39
     40        editor.on( 'init', function() {
     41                var dom = editor.dom;
     42               
     43                editor.on( 'mousedown', function( event ) {
     44                        if ( dom.hasClass( event.target, 'wp-media-shortcode' ) ) {
     45                                dom.addClass( event.target, 'wp-media-shortcode-selected' )
     46                                // Prevent IE from making the div resizable
     47                                dom.events.cancel( event );
     48                        } else {
     49                                dom.removeClass( dom.select( '.wp-media-shortcode-selected' ), 'wp-media-shortcode-selected' );
     50                        }
     51                });
     52
     53                editor.on( 'keydown', function( event ) {
     54                        var element;
     55
     56                        if ( event.keyCode !== tinymce.util.VK.DELETE && event.keyCode !== tinymce.util.VK.BACKSPACE ) {
     57                                return;
     58                        }
     59
     60                        element = dom.select( 'div.wp-media-shortcode-selected' );
     61
     62                        if ( element.length ) {
     63                                dom.events.cancel( event );
     64                                dom.remove( element[0] );
     65                                editor.nodeChanged();
     66                        }
     67                });
     68        });
     69
     70        return {
     71                parseMediaShortcode: parseMediaShortcode,
     72                getMediaShortcode: getMediaShortcode
     73        };
     74});

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

    Property changes on: src/wp-includes/js/tinymce/plugins/wpaudiovideo/plugin.js
___________________________________________________________________
Added: svn:eol-style
## -0,0 +1 ##
+native
\ No newline at end of property
     
    127127        border-style: solid;
    128128}
    129129
     130/* Audio/video shortcodes */
     131.mce-content-body .wp-media-shortcode {
     132        margin-bottom: 20px;
     133        border: 1px dashed #888;
     134        background: #f2f2f2;
     135        width: 99%;
     136        height: 250px;
     137        line-height: 250px;
     138        outline: 0;
     139        cursor: default;
     140        color: transparent;
     141        font-size: 48px;
     142        -webkit-user-select: none;
     143        -moz-user-select: none;
     144        user-select: none;
     145}
     146
     147.mce-content-body .wp-media-shortcode:before {
     148        color: #444;
     149}
     150
     151.mce-content-body .wp-media-shortcode.dashicons-format-audio {
     152        height: 40px;
     153        line-height: 40px;
     154        font-size: 20px;
     155}
     156
     157.mce-content-body .wp-media-shortcode-selected {
     158        background-color: #ededed;
     159        border-style: solid;
     160}
     161
    130162img.wp-oembed {
    131163        border: 1px dashed #888;
    132164        background: #f7f5f2 url("images/embedded.png") no-repeat scroll center center;

  • src/wp-includes/media.php

     
    12231223                        $html .= sprintf( $source, $type['type'], esc_url( $$fallback ) );
    12241224                }
    12251225        }
     1226
     1227        if ( ! empty( $content ) ) {
     1228                if ( false !== strpos( $content, "\n" ) )
     1229                        $content = str_replace( array( "\r", "\n", "\t" ), '', $content );
     1230
     1231                $html .= trim( $content );
     1232        }
     1233
    12261234        if ( 'mediaelement' === $library )
    12271235                $html .= wp_mediaelement_fallback( $fileurl );
    12281236        $html .= '</video>';

  • tests/phpunit/tests/media.php

     
    346346                $matches = get_media_embedded_in_content( $content, $types );
    347347                $this->assertEquals( $contents, $matches );
    348348        }
     349
     350        function test_video_shortcode_body() {
     351                $width = 640;
     352                $height = 360;
     353
     354                $video =<<<VIDEO
     355[video width="640" height="360" mp4="http://wordpress-core-develop/wp-content/uploads/2013/12/XVMwB.mp4"]
     356<!-- WebM/VP8 for Firefox4, Opera, and Chrome -->
     357<source type="video/webm" src="myvideo.webm" />
     358<!-- Ogg/Vorbis for older Firefox and Opera versions -->
     359<source type="video/ogg" src="myvideo.ogv" />
     360<!-- Optional: Add subtitles for each language -->
     361<track kind="subtitles" src="subtitles.srt" srclang="en" />
     362<!-- Optional: Add chapters -->
     363<track kind="chapters" src="chapters.srt" srclang="en" />
     364[/video]
     365VIDEO;
     366
     367                $w = $GLOBALS['content_width'];
     368                $h = ceil( ( $height * $w ) / $width );
     369
     370                $content = apply_filters( 'the_content', $video );
     371
     372                $expected = '<div style="width: ' . $w . 'px; max-width: 100%;" class="wp-video">' .
     373                                '<!--[if lt IE 9]><script>document.createElement(\'video\');</script><![endif]-->
     374<video class="wp-video-shortcode" id="video-0-1" width="' . $w . '" height="' . $h . '" preload="metadata" controls="controls">' .
     375'<source type="video/mp4" src="http://wordpress-core-develop/wp-content/uploads/2013/12/XVMwB.mp4" />' .
     376'<!-- WebM/VP8 for Firefox4, Opera, and Chrome --><source type="video/webm" src="myvideo.webm" />' .
     377'<!-- Ogg/Vorbis for older Firefox and Opera versions --><source type="video/ogg" src="myvideo.ogv" />' .
     378'<!-- Optional: Add subtitles for each language --><track kind="subtitles" src="subtitles.srt" srclang="en" />' .
     379'<!-- Optional: Add chapters --><track kind="chapters" src="chapters.srt" srclang="en" />' .
     380'<a href="http://wordpress-core-develop/wp-content/uploads/2013/12/XVMwB.mp4">' .
     381'http://wordpress-core-develop/wp-content/uploads/2013/12/XVMwB.mp4</a></video></div>
     382';
     383
     384                $this->assertEquals( $expected, $content );
     385        }
    349386}