WordPress.org
Get WordPress

Make WordPress Core

Changeset 27528


Ignore:
Timestamp:
03/13/2014 11:09:06 PM (13 years ago)
Author:
wonderboymusic
Message:

Add MCE Views for audio and video. Please clear your browser cache so that you get the latest TinyMCE stylesheet.

  • Move TinyMCE shortcode handling from wpgallery plugin to mce-view.js
  • Force preload="none" when rendering media in the editor to ensure fast loading (I realize this sounds illogical)
  • Move audio and video tag builder logic in media-template.php into PHP funcs that can be reused by any code passing data.model to an Underscore template
  • Pause all players when moving between editor tabs and when moving from the editor to editing in the media modal.
  • Rename wp.media.audio|video.shortcode() to the more appropriate wp.media.audio|video.update() that now returns a wp.shortcode object instead of a string.
  • Add necessary MediaElement css files to $mce_css
  • In wp.mce.View.render(), support multiple instances of the same shortcode
  • When rendering wp.mce.Views, fire a ready event that passes the current MCE View root element as context

See #27389.

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

Legend:

Unmodified
Added
Removed

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

    r27510 r27528  
    344344                                $version = 'ver=' . $GLOBALS['wp_version'];
    345345                                $dashicons = includes_url( "css/dashicons$suffix.css?$version" );
     346                                $mediaelement = includes_url( "js/mediaelement/mediaelementplayer.min.css?$version" );
     347                                $wpmediaelement = includes_url( "js/mediaelement/wp-mediaelement.css?$version" );
    346348
    347349                                // WordPress default stylesheet and dashicons
    348                                 $mce_css = array( $dashicons, self::$baseurl . '/skins/wordpress/wp-content.css' );
     350                                $mce_css = array(
     351                                        $dashicons,
     352                                        $mediaelement,
     353                                        $wpmediaelement,
     354                                        self::$baseurl . '/skins/wordpress/wp-content.css'
     355                                );
    349356
    350357                                // load editor_style.css if the current theme supports it

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

    r27408 r27528  
    1 /* global tinymce */
     1/* global tinymce, _wpmejsSettings, MediaElementPlayer */
    22
    33// Ensure the global `wp` object exists.
    … …  
    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                 *
    … …  
    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                        for (p in window.mejs.players) {
     334                                window.mejs.players[p].pause();
     335                        }
     336
     337                        data = window.decodeURIComponent( $( node ).data('wpview-text') );
     338                        frame = media.edit( data );
     339                        frame.on( 'close', function () {
     340                                frame.detach();
     341                        } );
     342                        frame.state( self.shortcode + '-details' ).on( 'update', function( selection ) {
     343                                var shortcode = wp.media[ self.shortcode ].update( selection ).string();
     344                                $( node ).attr( 'data-wpview-text', window.encodeURIComponent( shortcode ) );
     345                                wp.mce.views.refreshView( self, shortcode );
     346                                frame.detach();
     347                        } );
     348                        frame.open();
     349                }
     350        };
     351
     352        wp.mce.media.ViewMixin = wp.mce.View.extend({
     353                initialize: function( options ) {
     354                        this.shortcode = options.shortcode;
     355                        _.bindAll( this, 'setPlayer' );
     356                        $(this).on( 'ready', this.setPlayer );
     357                },
     358
     359                setPlayer: function (e, node) {
     360                        // if the ready event fires on an empty node
     361                        if ( ! node ) {
     362                                return;
     363                        }
     364
     365                        var id,
     366                                media,
     367                                settings = {},
     368                                className = '.wp-' +  this.shortcode.tag + '-shortcode';
     369
     370                        media = $( node ).find( className );
     371
     372                        if ( media.hasClass( 'rendered' ) ) {
     373                                id = media.closest( className ).attr( 'id' );
     374                                window.mejs.players[ id ].remove();
     375                        } else {
     376                                media.addClass( 'rendered' );
     377                        }
     378
     379                        media.prop( 'preload', 'none' );
     380                        media = media.get(0);
     381
     382                        if ( ! _.isUndefined( window._wpmejsSettings ) ) {
     383                                settings.pluginPath = _wpmejsSettings.pluginPath;
     384                        }
     385
     386                        media = wp.media.view.MediaDetails.prepareSrc( media );
     387                        new MediaElementPlayer( media, settings );
     388                },
     389
     390                getHtml: function() {
     391                        var attrs = this.shortcode.attrs.named;
     392                        return this.template({ model: attrs });
     393                }
     394        });
     395
     396        wp.mce.video = _.extend( {}, wp.mce.media, {
     397                shortcode: 'video',
     398                View: wp.mce.media.ViewMixin.extend({
     399                        className: 'editor-video',
     400                        template:  media.template('editor-video')
     401                })
     402        } );
     403
     404        wp.mce.views.register( 'video', wp.mce.video );
     405
     406        wp.mce.audio = _.extend( {}, wp.mce.media, {
     407                shortcode: 'audio',
     408                View: wp.mce.media.ViewMixin.extend({
     409                        className: 'editor-audio',
     410                        template:  media.template('editor-audio')
     411                })
     412        } );
     413
     414        wp.mce.views.register( 'audio', wp.mce.audio );
    305415}(jQuery));

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

    r27481 r27528  
    582582                },
    583583
    584                 shortcode : function (shortcode) {
    585                         var self = this;
    586 
    587                         _.each( wp.media.audio.defaults, function( value, key ) {
    588                                 shortcode[ key ] = self.coerce( shortcode, key );
    589 
    590                                 if ( value === shortcode[ key ] ) {
    591                                         delete shortcode[ key ];
     584                update : function (model) {
     585                        var self = this, content;
     586
     587                        _.each( this.defaults, function( value, key ) {
     588                                model[ key ] = self.coerce( model, key );
     589
     590                                if ( value === model[ key ] ) {
     591                                        delete model[ key ];
    592592                                }
    593593                        });
    594594
    595                         return wp.shortcode.string({
    596                                 tag:     'audio',
    597                                 attrs:   shortcode
     595                        content = model.content;
     596                        delete model.content;
     597
     598                        return new wp.shortcode({
     599                                tag: 'audio',
     600                                attrs: model,
     601                                content: content
    598602                        });
    599603                }
    … …  
    632636                },
    633637
    634                 shortcode : function (shortcode) {
    635                         var self = this, content = shortcode.content;
    636                         delete shortcode.content;
     638                update : function (model) {
     639                        var self = this, content = '';
    637640
    638641                        _.each( this.defaults, function( value, key ) {
    639                                 shortcode[ key ] = self.coerce( shortcode, key );
    640 
    641                                 if ( value === shortcode[ key ] ) {
    642                                         delete shortcode[ key ];
     642                                model[ key ] = self.coerce( model, key );
     643
     644                                if ( value === model[ key ] ) {
     645                                        delete model[ key ];
    643646                                }
    644647                        });
    645648
    646                         return wp.shortcode.string({
    647                                 tag:     'video',
    648                                 attrs:   shortcode,
     649                        content = model.content;
     650                        delete model.content;
     651
     652                        return new wp.shortcode({
     653                                tag: 'video',
     654                                attrs: model,
    649655                                content: content
    650656                        });
    … …  
    11121118                 */
    11131119                init: function() {
    1114                         $(document.body).on( 'click', '.insert-media', function( event ) {
    1115                                 var elem = $( event.currentTarget ),
    1116                                         editor = elem.data('editor'),
    1117                                         options = {
    1118                                                 frame:    'post',
    1119                                                 state:    'insert',
    1120                                                 title:    wp.media.view.l10n.addMedia,
    1121                                                 multiple: true
    1122                                         };
    1123 
    1124                                 event.preventDefault();
    1125 
    1126                                 // Remove focus from the `.insert-media` button.
    1127                                 // Prevents Opera from showing the outline of the button
    1128                                 // above the modal.
    1129                                 //
    1130                                 // See: http://core.trac.wordpress.org/ticket/22445
    1131                                 elem.blur();
    1132 
    1133                                 if ( elem.hasClass( 'gallery' ) ) {
    1134                                         options.state = 'gallery';
    1135                                         options.title = wp.media.view.l10n.createGalleryTitle;
    1136                                 } else if ( elem.hasClass( 'playlist' ) ) {
    1137                                         options.state = 'playlist';
    1138                                         options.title = wp.media.view.l10n.createPlaylistTitle;
    1139                                 } else if ( elem.hasClass( 'video-playlist' ) ) {
    1140                                         options.state = 'video-playlist';
    1141                                         options.title = wp.media.view.l10n.createVideoPlaylistTitle;
    1142                                 }
    1143 
    1144                                 wp.media.editor.open( editor, options );
    1145                         });
     1120                        $(document.body)
     1121                                .on( 'click', '.insert-media', function( event ) {
     1122                                        var elem = $( event.currentTarget ),
     1123                                                editor = elem.data('editor'),
     1124                                                options = {
     1125                                                        frame:    'post',
     1126                                                        state:    'insert',
     1127                                                        title:    wp.media.view.l10n.addMedia,
     1128                                                        multiple: true
     1129                                                };
     1130
     1131                                        event.preventDefault();
     1132
     1133                                        // Remove focus from the `.insert-media` button.
     1134                                        // Prevents Opera from showing the outline of the button
     1135                                        // above the modal.
     1136                                        //
     1137                                        // See: http://core.trac.wordpress.org/ticket/22445
     1138                                        elem.blur();
     1139
     1140                                        if ( elem.hasClass( 'gallery' ) ) {
     1141                                                options.state = 'gallery';
     1142                                                options.title = wp.media.view.l10n.createGalleryTitle;
     1143                                        } else if ( elem.hasClass( 'playlist' ) ) {
     1144                                                options.state = 'playlist';
     1145                                                options.title = wp.media.view.l10n.createPlaylistTitle;
     1146                                        } else if ( elem.hasClass( 'video-playlist' ) ) {
     1147                                                options.state = 'video-playlist';
     1148                                                options.title = wp.media.view.l10n.createVideoPlaylistTitle;
     1149                                        }
     1150
     1151                                        wp.media.editor.open( editor, options );
     1152                                })
     1153                                .on( 'click', '.wp-switch-editor', function () {
     1154                                        var p;
     1155                                        if ( window.mejs && window.mejs.players ) {
     1156                                                for ( p in window.mejs.players ) {
     1157                                                        window.mejs.players[p].pause();
     1158                                                }
     1159                                        }
     1160                                } );
    11461161
    11471162                        // Initialize and render the Editor drag-and-drop uploader.

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

    r27478 r27528  
    468468                        this.extension = attachment.get('filename' ).split('.').pop();
    469469
     470                        this.unset( 'src' );
    470471                        if ( _.contains( wp.media.view.settings.embedExts, this.extension ) ) {
    471472                                this.set( this.extension, this.attachment.get( 'url' ) );

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

    r27520 r27528  
    65436543                },
    65446544
     6545                removeSetting : function (e) {
     6546                        var wrap = $( e.currentTarget ).parent(), setting;
     6547
     6548                        setting = wrap.find( 'input' ).data( 'setting' );
     6549
     6550                        if ( setting ) {
     6551                                this.model.unset( setting );
     6552                                this.trigger( 'media:setting:remove', this );
     6553                        }
     6554
     6555                        wrap.remove();
     6556                },
     6557
     6558                setTracks : function () {
     6559                        var tracks = '';
     6560
     6561                        _.each( this.$('.content-track'), function (track) {
     6562                                tracks += $( track ).val();
     6563                        } );
     6564
     6565                        this.model.set( 'content', tracks );
     6566                        this.trigger( 'media:setting:remove', this );
     6567                },
     6568
     6569                setPlayer : function () {
     6570                        if ( ! this.player && this.media ) {
     6571                                this.player = new MediaElementPlayer( this.media, this.settings );
     6572                        }
     6573                },
     6574
     6575                /**
     6576                 * @abstract
     6577                 */
     6578                setMedia : function () {
     6579                        return this;
     6580                },
     6581
     6582                /**
     6583                 * Override the MediaElement method for removing a player.
     6584                 *      MediaElement tries to pull the audio/video tag out of
     6585                 *      its container and re-add it to the DOM.
     6586                 */
     6587                removePlayer: function() {
     6588                        var t = this.player, featureIndex, feature;
     6589
     6590                        // invoke features cleanup
     6591                        for ( featureIndex in t.options.features ) {
     6592                                feature = t.options.features[featureIndex];
     6593                                if ( t['clean' + feature] ) {
     6594                                        try {
     6595                                                t['clean' + feature](t);
     6596                                        } catch (e) {}
     6597                                }
     6598                        }
     6599
     6600                        if ( ! t.isDynamic ) {
     6601                                t.$node.remove();
     6602                        }
     6603
     6604                        if ( 'native' !== t.media.pluginType ) {
     6605                                t.media.remove();
     6606                        }
     6607
     6608                        delete window.mejs.players[t.id];
     6609
     6610                        t.container.remove();
     6611                        t.globalUnbind();
     6612                        delete t.node.player;
     6613                },
     6614
     6615                unsetPlayer : function() {
     6616                        var p;
     6617                        if ( this.player ) {
     6618                                for ( p in window.mejs.players ) {
     6619                                        window.mejs.players[p].pause();
     6620                                }
     6621                                this.removePlayer();
     6622                                this.player = false;
     6623                        }
     6624                },
     6625
     6626                success : function (mejs) {
     6627                        var autoplay = mejs.attributes.autoplay && 'false' !== mejs.attributes.autoplay;
     6628
     6629                        if ( 'flash' === mejs.pluginType && autoplay ) {
     6630                                mejs.addEventListener( 'canplay', function () {
     6631                                        mejs.play();
     6632                                }, false );
     6633                        }
     6634
     6635                        this.mejs = mejs;
     6636                },
     6637
     6638                render: function() {
     6639                        var self = this, settings = {
     6640                                success : this.success
     6641                        };
     6642
     6643                        if ( ! _.isUndefined( window._wpmejsSettings ) ) {
     6644                                settings.pluginPath = _wpmejsSettings.pluginPath;
     6645                        }
     6646
     6647                        media.view.Settings.AttachmentDisplay.prototype.render.apply( this, arguments );
     6648                        setTimeout( function() { self.resetFocus(); }, 10 );
     6649
     6650                        this.settings = settings;
     6651
     6652                        return this.setMedia();
     6653                },
     6654
     6655                resetFocus: function() {
     6656                        this.$( '.embed-media-settings' ).scrollTop( 0 );
     6657                }
     6658        }, {
     6659                instances : 0,
     6660
    65456661                /**
    65466662                 * When multiple players in the DOM contain the same src, things get weird.
    … …  
    65516667                prepareSrc : function (media) {
    65526668                        var i = wp.media.view.MediaDetails.instances++;
     6669                        if ( 0 === i ) {
     6670                                i = (new Date()).getTime();
     6671                        }
    65536672                        _.each( $(media).find('source'), function (source) {
    65546673                                source.src = [
    … …  
    65616680
    65626681                        return media;
    6563                 },
    6564 
    6565                 removeSetting : function (e) {
    6566                         var wrap = $( e.currentTarget ).parent(), setting;
    6567 
    6568                         setting = wrap.find( 'input' ).data( 'setting' );
    6569 
    6570                         if ( setting ) {
    6571                                 this.model.unset( setting );
    6572                                 this.trigger( 'media:setting:remove', this );
    6573                         }
    6574 
    6575                         wrap.remove();
    6576                 },
    6577 
    6578                 setTracks : function () {
    6579                         var tracks = '';
    6580 
    6581                         _.each( this.$('.content-track'), function (track) {
    6582                                 tracks += $( track ).val();
    6583                         } );
    6584 
    6585                         this.model.set( 'content', tracks );
    6586                         this.trigger( 'media:setting:remove', this );
    6587                 },
    6588 
    6589                 setPlayer : function () {
    6590                         if ( ! this.player && this.media ) {
    6591                                 this.player = new MediaElementPlayer( this.media, this.settings );
    6592                         }
    6593                 },
    6594 
    6595                 /**
    6596                  * @abstract
    6597                  */
    6598                 setMedia : function () {
    6599                         return this;
    6600                 },
    6601 
    6602                 /**
    6603                  * Override the MediaElement method for removing a player.
    6604                  *      MediaElement tries to pull the audio/video tag out of
    6605                  *      its container and re-add it to the DOM.
    6606                  */
    6607                 removePlayer: function() {
    6608                         var t = this.player, featureIndex, feature;
    6609 
    6610                         // invoke features cleanup
    6611                         for ( featureIndex in t.options.features ) {
    6612                                 feature = t.options.features[featureIndex];
    6613                                 if ( t['clean' + feature] ) {
    6614                                         try {
    6615                                                 t['clean' + feature](t);
    6616                                         } catch (e) {}
    6617                                 }
    6618                         }
    6619 
    6620                         if ( ! t.isDynamic ) {
    6621                                 t.$node.remove();
    6622                         }
    6623 
    6624                         if ( 'native' !== t.media.pluginType ) {
    6625                                 t.media.remove();
    6626                         }
    6627 
    6628                         delete window.mejs.players[t.id];
    6629 
    6630                         t.container.remove();
    6631                         t.globalUnbind();
    6632                         delete t.node.player;
    6633                 },
    6634 
    6635                 unsetPlayer : function() {
    6636                         if ( this.player ) {
    6637                                 if ( _.isUndefined( this.mejs.pluginType ) ) {
    6638                                         this.mejs.pause();
    6639                                 }
    6640                                 this.removePlayer();
    6641                                 this.player = false;
    6642                         }
    6643                 },
    6644 
    6645                 success : function (mejs) {
    6646                         var autoplay = mejs.attributes.autoplay && 'false' !== mejs.attributes.autoplay;
    6647 
    6648                         if ( 'flash' === mejs.pluginType && autoplay ) {
    6649                                 mejs.addEventListener( 'canplay', function () {
    6650                                         mejs.play();
    6651                                 }, false );
    6652                         }
    6653 
    6654                         this.mejs = mejs;
    6655                 },
    6656 
    6657                 render: function() {
    6658                         var self = this, settings = {
    6659                                 success : this.success
    6660                         };
    6661 
    6662                         if ( ! _.isUndefined( window._wpmejsSettings ) ) {
    6663                                 settings.pluginPath = _wpmejsSettings.pluginPath;
    6664                         }
    6665 
    6666                         media.view.Settings.AttachmentDisplay.prototype.render.apply( this, arguments );
    6667                         setTimeout( function() { self.resetFocus(); }, 10 );
    6668 
    6669                         this.settings = settings;
    6670 
    6671                         return this.setMedia();
    6672                 },
    6673 
    6674                 resetFocus: function() {
    6675                         this.$( '.embed-media-settings' ).scrollTop( 0 );
    6676                 }
    6677         }, {
    6678                 instances : 0
     6682                }
    66796683        });
    66806684
    … …  
    66956699
    66966700                setMedia: function() {
    6697                         var audio = this.$('.wp-audio-shortcode');
     6701                        var className = '.wp-audio-shortcode',
     6702                                audio;
     6703
     6704                        audio = this.$( className );
    66986705
    66996706                        if ( audio.find( 'source' ).length ) {
    … …  
    67016708                                        audio.show();
    67026709                                }
    6703                                 this.media = this.prepareSrc( audio.get(0) );
     6710
     6711                                audio = audio.get(0);
     6712
     6713                                if ( $( className ).length > 0 ) {
     6714                                        audio = media.view.MediaDetails.prepareSrc( audio );
     6715                                }
     6716
     6717                                this.media = audio;
    67046718                        } else {
    67056719                                audio.hide();
    … …  
    67276741
    67286742                setMedia: function() {
    6729                         var video = this.$('.wp-video-shortcode');
     6743                        var className = '.wp-video-shortcode',
     6744                                video,
     6745                                yt;
     6746
     6747                        video = this.$( className );
     6748                        yt = video.hasClass('youtube-video');
    67306749
    67316750                        if ( video.find( 'source' ).length ) {
    … …  
    67346753                                }
    67356754
    6736                                 if ( ! video.hasClass('youtube-video') ) {
    6737                                         this.media = this.prepareSrc( video.get(0) );
    6738                                 } else {
    6739                                         this.media = video.get(0);
     6755                                video = video.get(0);
     6756
     6757                                if ( ! yt ) {
     6758                                        video = media.view.MediaDetails.prepareSrc( video );
    67406759                                }
     6760
     6761                                this.media = video;
    67416762                        } else {
    67426763                                video.hide();

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

    r27481 r27528  
    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

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

    r27427 r27528  
    238238 * Gallery preview
    239239 */
    240 .wpview-type-gallery {
     240.wpview-type-gallery,
     241.wpview-type-audio,
     242.wpview-type-video {
    241243    position: relative;
    242244    padding: 0 0 12px;
    … …  
    245247}
    246248
    247  .wpview-type-gallery:after {
     249.wpview-type-audio {
     250    padding: 32px 0 0;
     251}
     252
     253.wpview-type-video {
     254    padding: 16px 0 0;
     255}
     256
     257.wpview-type-audio audio,
     258.wpview-type-video video {
     259    display: inline-block;
     260        max-width: 100%;
     261}
     262
     263 .wpview-type-gallery:after,
     264 .wpview-type-audio:after,
     265 .wpview-type-video:after {
    248266    content: '';
    249267    display: block;
    … …  
    253271}
    254272
    255  .wpview-type-gallery.selected {
     273.wpview-type-gallery.selected {
    256274        background-color: #efefef;
    257275}
    258276
    259 .wpview-type-gallery .toolbar {
     277.wpview-type-audio,
     278.wpview-type-video {
     279        background-color: #efefef;
     280}
     281
     282.wpview-type-gallery .toolbar,
     283.wpview-type-audio .toolbar,
     284.wpview-type-video .toolbar {
    260285    position: absolute;
    261286    top: 0;
    … …  
    265290    padding: 4px;
    266291        display: none;
     292        z-index: 100;
     293}
     294
     295.wpview-type-audio .toolbar,
     296.wpview-type-video .toolbar {
     297        display: block;
    267298}
    268299
    … …  
    271302}
    272303
    273 .wpview-type-gallery .toolbar span {
     304.wpview-type-gallery .toolbar span,
     305.wpview-type-audio .toolbar span
     306.wpview-type-video .toolbar span {
    274307        cursor: pointer;
    275308}

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

    r27490 r27528  
    77 * @since 3.5.0
    88 */
     9
     10/**
     11 * Output the markup for a audio tag to be used in an Underscore template
     12 *      when data.model is passed.
     13 *
     14 * @since 3.9.0
     15 */
     16function wp_underscore_audio_template() {
     17        $audio_types = wp_get_audio_extensions();
     18?>
     19<audio controls
     20        class="wp-audio-shortcode"
     21        preload="{{ _.isUndefined( data.model.preload ) ? 'none' : data.model.preload }}"
     22        <#
     23        <?php foreach ( array( 'autoplay', 'loop' ) as $attr ):
     24        ?>if ( ! _.isUndefined( data.model.<?php echo $attr ?> ) && data.model.<?php echo $attr ?> ) {
     25                #> <?php echo $attr ?><#
     26        }
     27        <?php endforeach ?>#>
     28>
     29        <# if ( ! _.isEmpty( data.model.src ) ) { #>
     30        <source src="{{ data.model.src }}" type="{{ wp.media.view.settings.embedMimes[ data.model.src.split('.').pop() ] }}" />
     31        <# } #>
     32
     33        <?php foreach ( $audio_types as $type ):
     34        ?><# if ( ! _.isEmpty( data.model.<?php echo $type ?> ) ) { #>
     35        <source src="{{ data.model.<?php echo $type ?> }}" type="{{ wp.media.view.settings.embedMimes[ '<?php echo $type ?>' ] }}" />
     36        <# } #>
     37        <?php endforeach;
     38?></audio>
     39<?php
     40}
     41
     42/**
     43 * Output the markup for a video tag to be used in an Underscore template
     44 *      when data.model is passed.
     45 *
     46 * @since 3.9.0
     47 */
     48function wp_underscore_video_template( $onload = false ) {
     49        $video_types = wp_get_video_extensions();
     50?>
     51<#
     52var isYouTube = ! _.isEmpty( data.model.src ) && data.model.src.match(/youtube|youtu\.be/);
     53        w = ! data.model.width || data.model.width > 640 ? 640 : data.model.width,
     54        h = ! data.model.height ? 360 : data.model.height;
     55
     56if ( data.model.width && w !== data.model.width ) {
     57        h = Math.ceil( ( h * w ) / data.model.width );
     58}
     59#>
     60<video controls
     61        class="wp-video-shortcode{{ isYouTube ? ' youtube-video' : '' }}"
     62        width="{{ w }}"
     63        height="{{ h }}"
     64        <?php
     65        $props = array( 'poster' => '', 'preload' => 'metadata' );
     66        foreach ( $props as $key => $value ):
     67                if ( empty( $value ) ) {
     68                ?><#
     69                if ( ! _.isUndefined( data.model.<?php echo $key ?> ) && data.model.<?php echo $key ?> ) {
     70                        #> <?php echo $key ?>="{{ data.model.<?php echo $key ?> }}"<#
     71                } #>
     72                <?php } else {
     73                        echo $key ?>="{{ _.isUndefined( data.model.<?php echo $key ?> ) ? '<?php echo $value ?>' : data.model.<?php echo $key ?> }}"<?php
     74                }
     75        endforeach;
     76        ?><#
     77        <?php foreach ( array( 'autoplay', 'loop' ) as $attr ):
     78        ?> if ( ! _.isUndefined( data.model.<?php echo $attr ?> ) && data.model.<?php echo $attr ?> ) {
     79                #> <?php echo $attr ?><#
     80        }
     81        <?php endforeach ?>#>
     82>
     83        <# if ( ! _.isEmpty( data.model.src ) ) {
     84                if ( isYouTube ) { #>
     85                <source src="{{ data.model.src }}" type="video/youtube" />
     86                <# } else { #>
     87                <source src="{{ data.model.src }}" type="{{ wp.media.view.settings.embedMimes[ data.model.src.split('.').pop() ] }}" />
     88                <# }
     89        } #>
     90
     91        <?php foreach ( $video_types as $type ):
     92        ?><# if ( data.model.<?php echo $type ?> ) { #>
     93        <source src="{{ data.model.<?php echo $type ?> }}" type="{{ wp.media.view.settings.embedMimes[ '<?php echo $type ?>' ] }}" />
     94        <# } #>
     95        <?php endforeach; ?>
     96        {{{ data.model.content }}}
     97</video>
     98<?php
     99}
    9100
    10101/**
    … …  
    677768                        <div class="embed-media-settings embed-audio-settings">
    678769                                <div class="instructions media-instructions">{{{ wp.media.view.l10n.audioDetailsText }}}</div>
    679                                 <audio controls
    680                                         class="wp-audio-shortcode"
    681                                         preload="{{ _.isUndefined( data.model.preload ) ? 'none' : data.model.preload }}"
    682                                         <#
    683                                         <?php foreach ( array( 'autoplay', 'loop' ) as $attr ):
    684                                         ?>if ( ! _.isUndefined( data.model.<?php echo $attr ?> ) && data.model.<?php echo $attr ?> ) {
    685                                                 #> <?php echo $attr ?><#
    686                                         }
    687                                         <?php endforeach ?>#>
    688                                 >
    689                                         <# if ( ! _.isEmpty( data.model.src ) ) { #>
    690                                         <source src="{{ data.model.src }}" type="{{ wp.media.view.settings.embedMimes[ data.model.src.split('.').pop() ] }}" />
    691                                         <# } #>
    692 
    693                                         <?php foreach ( $audio_types as $type ):
    694                                         ?><# if ( ! _.isEmpty( data.model.<?php echo $type ?> ) ) { #>
    695                                         <source src="{{ data.model.<?php echo $type ?> }}" type="{{ wp.media.view.settings.embedMimes[ '<?php echo $type ?>' ] }}" />
    696                                         <# } #>
    697                                         <?php endforeach;
    698                                 ?></audio>
     770                                <?php wp_underscore_audio_template() ?>
    699771                                <# if ( ! _.isEmpty( data.model.src ) ) { #>
    700772                                <label class="setting">
    … …  
    739811        </script>
    740812
     813        <script type="text/html" id="tmpl-editor-audio">
     814                <div class="toolbar">
     815                        <div class="dashicons dashicons-format-audio edit"></div>
     816                        <div class="dashicons dashicons-no-alt remove"></div>
     817                </div>
     818                <?php wp_underscore_audio_template() ?>
     819        </script>
     820
    741821        <script type="text/html" id="tmpl-video-details">
    742822                <?php $video_types = wp_get_video_extensions(); ?>
    … …  
    745825                                <div class="instructions media-instructions">{{{ wp.media.view.l10n.videoDetailsText }}}</div>
    746826                                <div class="wp-video-holder">
    747                                 <#
    748                                 var isYouTube = ! _.isEmpty( data.model.src ) && data.model.src.match(/youtube|youtu\.be/);
    749                                         w = ! data.model.width || data.model.width > 640 ? 640 : data.model.width,
    750                                         h = ! data.model.height ? 360 : data.model.height;
    751 
    752                                 if ( data.model.width && w !== data.model.width ) {
    753                                         h = Math.ceil( ( h * w ) / data.model.width );
    754                                 }
    755 
    756                                 #>
    757                                 <video controls
    758                                         class="wp-video-shortcode{{ isYouTube ? ' youtube-video' : '' }}"
    759                                         width="{{ w }}"
    760                                         height="{{ h }}"
    761                                         <?php
    762                                         $props = array( 'poster' => '', 'preload' => 'metadata' );
    763                                         foreach ( $props as $key => $value ):
    764                                                 if ( empty( $value ) ) {
    765                                                 ?><#
    766                                                 if ( ! _.isUndefined( data.model.<?php echo $key ?> ) && data.model.<?php echo $key ?> ) {
    767                                                         #> <?php echo $key ?>="{{ data.model.<?php echo $key ?> }}"<#
    768                                                 } #>
    769                                                 <?php } else {
    770                                                         echo $key ?>="{{ _.isUndefined( data.model.<?php echo $key ?> ) ? '<?php echo $value ?>' : data.model.<?php echo $key ?> }}"<?php
    771                                                 }
    772                                         endforeach;
    773                                         ?><#
    774                                         <?php foreach ( array( 'autoplay', 'loop' ) as $attr ):
    775                                         ?> if ( ! _.isUndefined( data.model.<?php echo $attr ?> ) && data.model.<?php echo $attr ?> ) {
    776                                                 #> <?php echo $attr ?><#
    777                                         }
    778                                         <?php endforeach ?>#>
    779                                 >
    780                                         <# if ( ! _.isEmpty( data.model.src ) ) {
    781                                                 if ( isYouTube ) { #>
    782                                                 <source src="{{ data.model.src }}" type="video/youtube" />
    783                                                 <# } else { #>
    784                                                 <source src="{{ data.model.src }}" type="{{ wp.media.view.settings.embedMimes[ data.model.src.split('.').pop() ] }}" />
    785                                                 <# }
    786                                         } #>
    787 
    788                                         <?php foreach ( $video_types as $type ):
    789                                         ?><# if ( data.model.<?php echo $type ?> ) { #>
    790                                         <source src="{{ data.model.<?php echo $type ?> }}" type="{{ wp.media.view.settings.embedMimes[ '<?php echo $type ?>' ] }}" />
    791                                         <# } #>
    792                                         <?php endforeach; ?>
    793                                         {{{ data.model.content }}}
    794                                 </video>
     827                                <?php wp_underscore_video_template() ?>
    795828                                <# if ( ! _.isEmpty( data.model.src ) ) { #>
    796829                                <label class="setting">
    … …  
    858891                </div>
    859892        </script>
     893
     894        <script type="text/html" id="tmpl-editor-video">
     895                <div class="toolbar">
     896                        <div class="dashicons dashicons-format-video edit"></div>
     897                        <div class="dashicons dashicons-no-alt remove"></div>
     898                </div>
     899                <?php wp_underscore_video_template() ?>
     900        </script>
    860901        <?php
    861902
Note: See TracChangeset for help on using the changeset viewer.