WordPress.org
Get WordPress

Make WordPress Core

Changeset 27528


Ignore:
Timestamp:
03/13/2014 11:09:06 PM (11 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.