WordPress.org
Get WordPress

Make WordPress Core

Ticket #27389: 27389.7.diff

File 27389.7.diff, 10.5 KB (added by wonderboymusic, 11 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                }
    … …  
    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

     
    724724                        return frame;
    725725                },
    726726
    727                 shortcode : function (shortcode) {
    728                         var self = this;
     727                update : function (model) {
     728                        var self = this, content;
    729729
    730                         _.each( wp.media.audio.defaults, function( value, key ) {
    731                                 shortcode[ key ] = self.coerce( shortcode, key );
     730                        _.each( this.defaults, function( value, key ) {
     731                                model[ key ] = self.coerce( model, key );
    732732
    733                                 if ( value === shortcode[ key ] ) {
    734                                         delete shortcode[ key ];
     733                                if ( value === model[ key ] ) {
     734                                        delete model[ key ];
    735735                                }
    736736                        });
    737737
    738                         return wp.shortcode.string({
    739                                 tag:     'audio',
    740                                 attrs:   shortcode
     738                        content = model.content;
     739                        delete model.content;
     740
     741                        return new wp.shortcode({
     742                                tag: 'audio',
     743                                attrs: model,
     744                                content: content
    741745                        });
    742746                }
    743747        };
    … …  
    776780                        return frame;
    777781                },
    778782
    779                 shortcode : function (shortcode) {
    780                         var self = this, content = shortcode.content;
    781                         delete shortcode.content;
     783                update : function (model) {
     784                        var self = this, content = model.content;
     785                        delete model.content;
    782786
    783787                        _.each( this.defaults, function( value, key ) {
    784                                 shortcode[ key ] = self.coerce( shortcode, key );
     788                                model[ key ] = self.coerce( model, key );
    785789
    786                                 if ( value === shortcode[ key ] ) {
    787                                         delete shortcode[ key ];
     790                                if ( value === model[ key ] ) {
     791                                        delete model[ key ];
    788792                                }
    789793                        });
    790794
    791                         return wp.shortcode.string({
    792                                 tag:     'video',
    793                                 attrs:   shortcode,
     795                        content = model.content;
     796                        delete model.content;
     797
     798                        return new wp.shortcode({
     799                                tag: 'video',
     800                                attrs: model,
    794801                                content: content
    795802                        });
    796803                }

  • 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        /**