WordPress.org
Get WordPress

Make WordPress Core

Ticket #27389: 27389.6.diff

File 27389.6.diff, 11.3 KB (added by wonderboymusic, 10 years ago)

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

     
    1 /* global tinymce */
     1/* global tinymce, _wpmejsSettings, MediaElementPlayer */
    22
    33// Ensure the global `wp` object exists.
    44window.wp = window.wp || {};
    … …  
    3131                        var html = this.getHtml();
    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 );
    4044                }
    … …  
    178182
    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
    184188                 */
    … …  
    204208                        return instances[ encodedText ];
    205209                },
    206210
    207                 /** 
     211                /**
    208212                 * render( scope )
    209                  * 
     213                 *
    210214                 * Renders any view instances inside a DOM node `scope`.
    211215                 *
    212216                 * View instances are detected by the presence of wrapper elements.
    … …  
    302306
    303307        };
    304308        wp.mce.views.register( 'gallery', wp.mce.gallery );
     309
     310        wp.mce.media = {
     311                toView:  function( content ) {
     312                        var match = wp.shortcode.next( this.shortcode, content );
     313
     314                        if ( ! match ) {
     315                                return;
     316                        }
     317
     318                        return {
     319                                index:   match.index,
     320                                content: match.content,
     321                                options: {
     322                                        shortcode: match.shortcode
     323                                }
     324                        };
     325                },
     326
     327                edit: function( node ) {
     328                        var p,
     329                                media = wp.media[ this.shortcode ],
     330                                self = this,
     331                                frame, data;
     332
     333                        wp.media.mixin.pauseAllPlayers();
     334
     335                        data = window.decodeURIComponent( $( node ).data('wpview-text') );
     336                        frame = media.edit( data );
     337                        frame.on( 'close', function () {
     338                                frame.detach();
     339                        } );
     340                        frame.state( self.shortcode + '-details' ).on( 'update', function( selection ) {
     341                                var shortcode = wp.media[ self.shortcode ].update( selection ).string();
     342                                $( node ).attr( 'data-wpview-text', window.encodeURIComponent( shortcode ) );
     343                                wp.mce.views.refreshView( self, shortcode );
     344                                frame.detach();
     345                        } );
     346                        frame.open();
     347                }
     348        };
     349
     350        wp.mce.media.View = wp.mce.View.extend({
     351                initialize: function( options ) {
     352                        this.shortcode = options.shortcode;
     353                        _.bindAll( this, 'setPlayer' );
     354                        $(this).on( 'ready', this.setPlayer );
     355                },
     356
     357                setPlayer: function (e, node) {
     358                        // if the ready event fires on an empty node
     359                        if ( ! node ) {
     360                                return;
     361                        }
     362
     363                        var self = this,
     364                                media,
     365                                settings = {},
     366                                className = '.wp-' +  this.shortcode.tag + '-shortcode';
     367
     368                        if ( this.player ) {
     369                                this.unsetPlayer();
     370                        }
     371
     372                        media = $( node ).find( className );
     373
     374                        if ( ! _.isUndefined( window._wpmejsSettings ) ) {
     375                                settings.pluginPath = _wpmejsSettings.pluginPath;
     376                        }
     377
     378                        if ( ! this.isCompatible( media ) ) {
     379                                media.closest( '.wpview-wrap' ).addClass( 'wont-play' );
     380                                if ( ! media.parent().hasClass( 'wpview-wrap' ) ) {
     381                                        media.parent().replaceWith( media );
     382                                }
     383                                media.replaceWith( '<p>' + media.find( 'source' ).eq(0).prop( 'src' ) + '</p>' );
     384                                return;
     385                        } else {
     386                                media.closest( '.wpview-wrap' ).removeClass( 'wont-play' );
     387                                media.prop( 'preload', 'none' );
     388                        }
     389
     390                        media = wp.media.view.MediaDetails.prepareSrc( media.get(0) );
     391
     392                        // Thanks, Firefox!
     393                        setTimeout(function () {
     394                                self.player = new MediaElementPlayer( media, settings );
     395                        }, 10);
     396                },
     397
     398                getHtml: function() {
     399                        var attrs = this.shortcode.attrs.named;
     400                        return this.template({ model: attrs });
     401                }
     402        });
     403        _.extend( wp.mce.media.View.prototype, wp.media.mixin );
     404
     405        wp.mce.video = _.extend( {}, wp.mce.media, {
     406                shortcode: 'video',
     407                View: wp.mce.media.View.extend({
     408                        className: 'editor-video',
     409                        template:  media.template('editor-video')
     410                })
     411        } );
     412
     413        wp.mce.views.register( 'video', wp.mce.video );
     414
     415        wp.mce.audio = _.extend( {}, wp.mce.media, {
     416                shortcode: 'audio',
     417                View: wp.mce.media.View.extend({
     418                        className: 'editor-audio',
     419                        template:  media.template('editor-audio')
     420                })
     421        } );
     422
     423        wp.mce.views.register( 'audio', wp.mce.audio );
    305424}(jQuery));

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

     
    328328                        if ( isOpera ) {
    329329                                opera = false;
    330330                                media.find( 'source' ).each(function (i, elem) {
    331                                         if ( elem.type.match(/video\/(ogv|webm)/gi) !== null ||
     331                                        if ( elem.type.match(/video\/(ogg|webm)/gi) !== null ||
    332332                                                ( elem.type.match(/audio\/(ogg|wav)/gi) !== null ) ) {
    333333                                                opera = true;
    334334                                        }
    … …  
    705705                        return frame;
    706706                },
    707707
    708                 shortcode : function (shortcode) {
    709                         var self = this;
     708                update : function (model) {
     709                        var self = this, content;
    710710
    711                         _.each( wp.media.audio.defaults, function( value, key ) {
    712                                 shortcode[ key ] = self.coerce( shortcode, key );
     711                        _.each( this.defaults, function( value, key ) {
     712                                model[ key ] = self.coerce( model, key );
    713713
    714                                 if ( value === shortcode[ key ] ) {
    715                                         delete shortcode[ key ];
     714                                if ( value === model[ key ] ) {
     715                                        delete model[ key ];
    716716                                }
    717717                        });
    718718
    719                         return wp.shortcode.string({
    720                                 tag:     'audio',
    721                                 attrs:   shortcode
     719                        content = model.content;
     720                        delete model.content;
     721
     722                        return new wp.shortcode({
     723                                tag: 'audio',
     724                                attrs: model,
     725                                content: content
    722726                        });
    723727                }
    724728        };
    … …  
    757761                        return frame;
    758762                },
    759763
    760                 shortcode : function (shortcode) {
    761                         var self = this, content = shortcode.content;
    762                         delete shortcode.content;
     764                update : function (model) {
     765                        var self = this, content = model.content;
     766                        delete model.content;
    763767
    764768                        _.each( this.defaults, function( value, key ) {
    765                                 shortcode[ key ] = self.coerce( shortcode, key );
     769                                model[ key ] = self.coerce( model, key );
    766770
    767                                 if ( value === shortcode[ key ] ) {
    768                                         delete shortcode[ key ];
     771                                if ( value === model[ key ] ) {
     772                                        delete model[ key ];
    769773                                }
    770774                        });
    771775
    772                         return wp.shortcode.string({
    773                                 tag:     'video',
    774                                 attrs:   shortcode,
     776                        content = model.content;
     777                        delete model.content;
     778
     779                        return new wp.shortcode({
     780                                tag: 'video',
     781                                attrs: model,
    775782                                content: content
    776783                        });
    777784                }

  • 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 );
    … …  
    177152                if ( node.nodeName === 'IMG' && dom.getAttrib( node, 'data-wp-media' ) ) {
    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';
    186157                        } else if ( dom.hasClass( node, 'wp-video-playlist' ) ) {

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

     
    242242}
    243243
    244244/**
    245  * Gallery preview
     245 * Media previews
    246246 */
    247 .wpview-type-gallery {
     247.wpview-type-gallery,
     248.wpview-type-audio,
     249.wpview-type-video {
    248250    position: relative;
    249251    padding: 0 0 12px;
    250252    margin-bottom: 16px;
    … …  
    251253        cursor: pointer;
    252254}
    253255
    254  .wpview-type-gallery:after {
     256.wpview-type-audio {
     257        padding: 32px 0 0;
     258}
     259
     260.wpview-type-video {
     261        padding: 16px 0 0;
     262}
     263
     264.wont-play {
     265        padding: 8px 0;
     266}
     267
     268.wont-play p {
     269        display: block;
     270        width: 80%;
     271        margin: 0 5% 0 15%;
     272}
     273
     274.wpview-type-gallery:after {
    255275    content: '';
    256276    display: block;
    257277    height: 0;
    … …  
    259279    visibility: hidden;
    260280}
    261281
    262  .wpview-type-gallery.selected {
     282.wpview-type-gallery.selected,
     283.wpview-type-audio,
     284.wpview-type-video {
    263285        background-color: #efefef;
    264286}
    265287
    266 .wpview-type-gallery .toolbar {
     288.wpview-type-gallery .toolbar,
     289.wpview-type-audio .toolbar,
     290.wpview-type-video .toolbar {
    267291    position: absolute;
    268292    top: 0;
    269293    left: 0;
    … …  
    271295    color: white;
    272296    padding: 4px;
    273297        display: none;
     298        z-index: 100;
    274299}
    275300
     301.wpview-type-audio .toolbar,
     302.wpview-type-video .toolbar,
    276303.wpview-type-gallery.selected .toolbar {
    277304        display: block;
    278305}
    279306
     307.wpview-type-audio .toolbar span,
     308.wpview-type-video .toolbar span,
    280309.wpview-type-gallery .toolbar span {
    281310        cursor: pointer;
    282311}

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

     
    927927                        <# } ); #>
    928928                </div>
    929929        </script>
     930
     931        <script type="text/html" id="tmpl-editor-audio">
     932                <div class="toolbar">
     933                        <div class="dashicons dashicons-format-audio edit"></div>
     934                        <div class="dashicons dashicons-no-alt remove"></div>
     935                </div>
     936                <?php wp_underscore_audio_template() ?>
     937        </script>
     938
     939        <script type="text/html" id="tmpl-editor-video">
     940                <div class="toolbar">
     941                        <div class="dashicons dashicons-format-video edit"></div>
     942                        <div class="dashicons dashicons-no-alt remove"></div>
     943                </div>
     944                <?php wp_underscore_video_template() ?>
     945        </script>
     946       
    930947        <?php
    931948
    932949        /**