WordPress.org
Get WordPress

Make WordPress Core

Changeset 27615


Ignore:
Timestamp:
03/19/2014 07:01:56 AM (11 years ago)
Author:
wonderboymusic
Message:

Add MCE views for audio and video shortcodes. When the shortcode does not contain a source that supports native playback, just show the filename.

  • Remove the audio/video shortcode parsing from the wpgallery plugin.
  • Make mce-view a dependency of media-audiovideo
  • Introduce wp.mce.video, wp.mce.audio, wp.mce.media, and wp.mce.media.View
  • Rename wp.media.audio|video.shortcode() to wp.media.audio|video.update() since it is called on Update and returns a wp.shortcode object now.
  • In wp.mce.View.render(), fire a ready event when the placeholder is being parsed and pass the current node to the event handler.

See #27389, #27437.

Location:
trunk/src/wp-includes
Files:
6 edited

Legend:

Unmodified
Added
Removed

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

    r27581 r27615  
    3232            // Search all tinymce editor instances and update the placeholders
    3333            _.each( tinymce.editors, function( editor ) {
    34                 var doc;
     34                var doc, self = this;
    3535                if ( editor.plugins.wpview ) {
    3636                    doc = editor.getDoc();
    37                     $( doc ).find( '[data-wpview-text="' + this.encodedText + '"]' ).html( html );
     37                    $( doc ).find( '[data-wpview-text="' + this.encodedText + '"]' ).each(function (i, elem) {
     38                        var node = $( elem );
     39                        node.html( html );
     40                        $( self ).trigger( 'ready', elem );
     41                    });
    3842                }
    3943            }, this );
    … …  
    179183        /**
    180184         * Refresh views after an update is made
    181          * 
     185         *
    182186         * @param view {object} being refreshed
    183187         * @param text {string} textual representation of the view
    … …  
    205209        },
    206210
    207         /** 
     211        /**
    208212         * render( scope )
    209          * 
     213         *
    210214         * Renders any view instances inside a DOM node `scope`.
    211215         *

  • trunk/src/wp-includes/js/media-audiovideo.js

    r27608 r27615  
    1 /* global _wpMediaViewsL10n */
     1/* global _wpMediaViewsL10n, _wpmejsSettings, MediaElementPlayer */
    22
    33(function ($, _, Backbone) {
    … …  
    6262            },
    6363            'chrome' : {
    64                 audio: ['ogg', 'mpeg', 'x-ms-wma'],
     64                audio: ['ogg', 'mpeg'],
    6565                video: ['ogg', 'webm', 'mp4', 'm4v', 'mpeg']
    6666            },
    … …  
    228228        },
    229229
    230         shortcode : function (shortcode) {
    231             var self = this;
    232 
    233             _.each( wp.media.audio.defaults, function( value, key ) {
    234                 shortcode[ key ] = self.coerce( shortcode, key );
    235 
    236                 if ( value === shortcode[ key ] ) {
    237                     delete shortcode[ key ];
     230        update : function (model) {
     231            var self = this, content;
     232
     233            _.each( this.defaults, function( value, key ) {
     234                model[ key ] = self.coerce( model, key );
     235
     236                if ( value === model[ key ] ) {
     237                    delete model[ key ];
    238238                }
    239239            });
    240240
    241             return wp.shortcode.string({
    242                 tag:     'audio',
    243                 attrs:   shortcode
     241            content = model.content;
     242            delete model.content;
     243
     244            return new wp.shortcode({
     245                tag: 'audio',
     246                attrs: model,
     247                content: content
    244248            });
    245249        }
    … …  
    284288        },
    285289
    286         shortcode : function (shortcode) {
    287             var self = this, content = shortcode.content;
    288             delete shortcode.content;
     290        update : function (model) {
     291            var self = this, content;
    289292
    290293            _.each( this.defaults, function( value, key ) {
    291                 shortcode[ key ] = self.coerce( shortcode, key );
    292 
    293                 if ( value === shortcode[ key ] ) {
    294                     delete shortcode[ key ];
     294                model[ key ] = self.coerce( model, key );
     295
     296                if ( value === model[ key ] ) {
     297                    delete model[ key ];
    295298                }
    296299            });
    297300
    298             return wp.shortcode.string({
    299                 tag:     'video',
    300                 attrs:   shortcode,
     301            content = model.content;
     302            delete model.content;
     303
     304            return new wp.shortcode({
     305                tag: 'video',
     306                attrs: model,
    301307                content: content
    302308            });
    … …  
    973979    } );
    974980
     981    wp.mce.media = {
     982        toView:  function( content ) {
     983            var match = wp.shortcode.next( this.shortcode, content );
     984
     985            if ( ! match ) {
     986                return;
     987            }
     988
     989            return {
     990                index:   match.index,
     991                content: match.content,
     992                options: {
     993                    shortcode: match.shortcode
     994                }
     995            };
     996        },
     997
     998        edit: function( node ) {
     999            var p,
     1000                media = wp.media[ this.shortcode ],
     1001                self = this,
     1002                frame, data;
     1003
     1004            wp.media.mixin.pauseAllPlayers();
     1005
     1006            data = window.decodeURIComponent( $( node ).data('wpview-text') );
     1007            frame = media.edit( data );
     1008            frame.on( 'close', function () {
     1009                frame.detach();
     1010            } );
     1011            frame.state( self.shortcode + '-details' ).on( 'update', function( selection ) {
     1012                var shortcode = wp.media[ self.shortcode ].update( selection ).string();
     1013                $( node ).attr( 'data-wpview-text', window.encodeURIComponent( shortcode ) );
     1014                wp.mce.views.refreshView( self, shortcode );
     1015                frame.detach();
     1016            } );
     1017            frame.open();
     1018        }
     1019    };
     1020
     1021    wp.mce.media.View = wp.mce.View.extend({
     1022        initialize: function( options ) {
     1023            this.shortcode = options.shortcode;
     1024            _.bindAll( this, 'setPlayer' );
     1025            $(this).on( 'ready', this.setPlayer );
     1026        },
     1027
     1028        setPlayer: function (e, node) {
     1029            // if the ready event fires on an empty node
     1030            if ( ! node ) {
     1031                return;
     1032            }
     1033
     1034            var self = this,
     1035                media,
     1036                settings = {},
     1037                className = '.wp-' +  this.shortcode.tag + '-shortcode';
     1038
     1039            if ( this.player ) {
     1040                this.unsetPlayer();
     1041            }
     1042
     1043            media = $( node ).find( className );
     1044
     1045            if ( ! _.isUndefined( window._wpmejsSettings ) ) {
     1046                settings.pluginPath = _wpmejsSettings.pluginPath;
     1047            }
     1048
     1049            if ( ! this.isCompatible( media ) ) {
     1050                media.closest( '.wpview-wrap' ).addClass( 'wont-play' );
     1051                if ( ! media.parent().hasClass( 'wpview-wrap' ) ) {
     1052                    media.parent().replaceWith( media );
     1053                }
     1054                media.replaceWith( '<p>' + media.find( 'source' ).eq(0).prop( 'src' ) + '</p>' );
     1055                return;
     1056            } else {
     1057                media.closest( '.wpview-wrap' ).removeClass( 'wont-play' );
     1058                if ( this.ua.is( 'ff' ) ) {
     1059                    media.prop( 'preload', 'metadata' );
     1060                } else {
     1061                    media.prop( 'preload', 'none' );
     1062                }
     1063            }
     1064
     1065            media = wp.media.view.MediaDetails.prepareSrc( media.get(0) );
     1066
     1067            // Thanks, Firefox!
     1068            setTimeout(function () {
     1069                self.player = new MediaElementPlayer( media, settings );
     1070            }, 50);
     1071        },
     1072
     1073        getHtml: function() {
     1074            var attrs = this.shortcode.attrs.named;
     1075            return this.template({ model: attrs });
     1076        }
     1077    });
     1078    _.extend( wp.mce.media.View.prototype, wp.media.mixin );
     1079
     1080    wp.mce.video = _.extend( {}, wp.mce.media, {
     1081        shortcode: 'video',
     1082        View: wp.mce.media.View.extend({
     1083            className: 'editor-video',
     1084            template:  media.template('editor-video')
     1085        })
     1086    } );
     1087
     1088    wp.mce.views.register( 'video', wp.mce.video );
     1089
     1090    wp.mce.audio = _.extend( {}, wp.mce.media, {
     1091        shortcode: 'audio',
     1092        View: wp.mce.media.View.extend({
     1093            className: 'editor-audio',
     1094            template:  media.template('editor-audio')
     1095        })
     1096    } );
     1097
     1098    wp.mce.views.register( 'audio', wp.mce.audio );
     1099
    9751100    function init() {
    9761101        $(document.body)

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

    r27530 r27615  
    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 ) ) {
    … …  
    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
    … …  
    178153            if ( dom.hasClass( node, 'wp-gallery' ) ) {
    179154                event.name = 'gallery';
    180             } else if ( dom.hasClass( node, 'wp-video' ) ) {
    181                 event.name = 'video';
    182             } else if ( dom.hasClass( node, 'wp-audio' ) ) {
    183                 event.name = 'audio';
    184155            } else if ( dom.hasClass( node, 'wp-playlist' ) ) {
    185156                event.name = 'playlist';

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

    r27601 r27615  
    142142}
    143143
    144 .mce-content-body img.wp-media.wp-video {
    145     background-image: url(images/video.png);
    146 }
    147 
    148 .mce-content-body img.wp-media.wp-audio {
    149     height: 70px;
    150     background-image: url(images/audio.png);
    151 }
    152 
    153144.mce-content-body img.wp-media.wp-playlist {
    154145    background-image: url("images/playlist-audio.png");
    … …  
    224215
    225216/**
    226  * Gallery preview
     217 * Media previews
    227218 */
    228 .wpview-type-gallery {
     219.wpview-type-gallery,
     220.wpview-type-audio,
     221.wpview-type-video {
    229222    position: relative;
    230223    margin-bottom: 16px;
    … …  
    233226}
    234227
    235  .wpview-type-gallery:after {
     228.wpview-type-audio {
     229    padding: 24px 0 0;
     230}
     231
     232.wpview-type-video {
     233    padding: 0;
     234}
     235
     236.wont-play {
     237    padding: 4px 0;
     238}
     239
     240.wont-play p {
     241    font-size: 13px;
     242    line-height: 1.3;
     243    display: block;
     244    width: 70%;
     245    margin: 0 15%;
     246    text-align: center;
     247}
     248
     249.wpview-type-gallery:after {
    236250    content: '';
    237251    display: table;
    … …  
    239253}
    240254
    241  .wpview-type-gallery.selected {
     255.wpview-type-gallery.selected,
     256.wpview-type-audio,
     257.wpview-type-video {
    242258    background-color: #f2f8ff;
    243259    border-color: #777;
    244260}
    245261
    246 .wpview-type-gallery .toolbar {
    247     position: absolute;
    248     top: 0;
    249     right: 0;
    250     background-color: #333;
    251     color: white;
     262.wpview-type-gallery .toolbar,
     263.wpview-type-audio .toolbar,
     264.wpview-type-video .toolbar {
     265    position: absolute;
     266    top: 0;
     267    right: 0;
     268    background-color: #333;
     269    color: white;
    252270    display: none;
    253 }
    254 
     271    z-index: 100;
     272}
     273
     274.wpview-type-video .toolbar div,
    255275.wpview-type-gallery .toolbar div,
    256276#wp-image-toolbar div {
    … …  
    258278}
    259279
     280.wpview-type-audio .toolbar div {
     281    margin: 2px 5px;
     282}
     283
     284.wpview-type-audio .toolbar,
     285.wpview-type-video .toolbar,
    260286.wpview-type-gallery.selected .toolbar {
    261287    display: block;
    262288}
    263289
     290.wpview-type-audio .toolbar span,
     291.wpview-type-video .toolbar span,
    264292.wpview-type-gallery .toolbar span {
    265293    cursor: pointer;

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

    r27608 r27615  
    962962        </div>
    963963    </script>
     964
     965    <script type="text/html" id="tmpl-editor-audio">
     966        <div class="toolbar">
     967            <div class="dashicons dashicons-format-audio edit"></div>
     968            <div class="dashicons dashicons-no-alt remove"></div>
     969        </div>
     970        <?php wp_underscore_audio_template() ?>
     971    </script>
     972
     973    <script type="text/html" id="tmpl-editor-video">
     974        <div class="toolbar">
     975            <div class="dashicons dashicons-format-video edit"></div>
     976            <div class="dashicons dashicons-no-alt remove"></div>
     977        </div>
     978        <?php wp_underscore_video_template() ?>
     979    </script>
     980
    964981    <?php
    965982

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

    r27608 r27615  
    397397    $scripts->add( 'media-views',  "/wp-includes/js/media-views$suffix.js",  array( 'utils', 'media-models', 'wp-plupload', 'jquery-ui-sortable', 'wp-mediaelement', 'image-edit' ), false, 1 );
    398398    $scripts->add( 'media-editor', "/wp-includes/js/media-editor$suffix.js", array( 'shortcode', 'media-views' ), false, 1 );
    399     $scripts->add( 'media-audiovideo', "/wp-includes/js/media-audiovideo$suffix.js", array( 'media-editor' ), false, 1 );
     399    $scripts->add( 'media-audiovideo', "/wp-includes/js/media-audiovideo$suffix.js", array( 'media-editor', 'mce-view' ), false, 1 );
    400400    $scripts->add( 'mce-view', "/wp-includes/js/mce-view$suffix.js", array( 'shortcode', 'media-models' ), false, 1 );
    401401
Note: See TracChangeset for help on using the changeset viewer.