Unifying media controls and supporting playlists in the editor:
* Support a `caption` attribute for audio and video shortcodes * In `wp.media.audio|video`, rename `update` to `shortcode` to allow these models to share the same mixins as `wp.media.collection` subclasses * When sending an audio or video shortcode to the editor, create a default caption if the user hasn't entered one. This currently only displays in the editor, not on the front end. Captions aren't tied to a specific attachment here because external sources are supported. * In the `wp.mce.media` mixin, in the `edit` method, read `attr` instead of `data` when attempting to parse the encoded shortcode. `data` does not automatically update when the attribute changes. This was a blessing to debug. * Add `wp.mce.media.PlaylistView` to support playlist views in TinyMCE * Expose `WPPlaylistView` to global scope and suppress auto-parsing of playlist nodes when in the admin. Allow `WPPlaylistView` to be passed `metadata` on creation instead of requiring a JSON blob to be parsed. * Remove all of the playlist logic from the `wpgallery` TinyMCE plugin. * In `wp_prepare_attachment_for_js()` return more data for audio/video so that playlists can have parity in the admin/front end. See #27320. Built from https://develop.svn.wordpress.org/trunk@27640 git-svn-id: http://core.svn.wordpress.org/trunk@27483 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Scott Taylor
parent
17eec3fbd6
commit
615dd5331b
|
|
@ -207,10 +207,11 @@
|
|||
|
||||
defaults : {
|
||||
id : wp.media.view.settings.post.id,
|
||||
src : '',
|
||||
loop : false,
|
||||
src : '',
|
||||
loop : false,
|
||||
autoplay : false,
|
||||
preload : 'none'
|
||||
preload : 'none',
|
||||
caption : ''
|
||||
},
|
||||
|
||||
edit : function (data) {
|
||||
|
|
@ -227,7 +228,7 @@
|
|||
return frame;
|
||||
},
|
||||
|
||||
update : function (model) {
|
||||
shortcode : function (model) {
|
||||
var self = this, content;
|
||||
|
||||
_.each( this.defaults, function( value, key ) {
|
||||
|
|
@ -266,7 +267,8 @@
|
|||
loop : false,
|
||||
autoplay : false,
|
||||
preload : 'metadata',
|
||||
content : ''
|
||||
content : '',
|
||||
caption : ''
|
||||
},
|
||||
|
||||
edit : function (data) {
|
||||
|
|
@ -287,7 +289,7 @@
|
|||
return frame;
|
||||
},
|
||||
|
||||
update : function (model) {
|
||||
shortcode : function (model) {
|
||||
var self = this, content;
|
||||
|
||||
_.each( this.defaults, function( value, key ) {
|
||||
|
|
@ -1129,13 +1131,13 @@
|
|||
|
||||
wp.media.mixin.pauseAllPlayers();
|
||||
|
||||
data = window.decodeURIComponent( $( node ).data('wpview-text') );
|
||||
data = window.decodeURIComponent( $( node ).attr('data-wpview-text') );
|
||||
frame = media.edit( data );
|
||||
frame.on( 'close', function () {
|
||||
frame.detach();
|
||||
} );
|
||||
frame.state( self.shortcode + '-details' ).on( 'update', function( selection ) {
|
||||
var shortcode = wp.media[ self.shortcode ].update( selection ).string();
|
||||
frame.state( self.state ).on( 'update', function( selection ) {
|
||||
var shortcode = wp.media[ self.shortcode ].shortcode( selection ).string();
|
||||
$( node ).attr( 'data-wpview-text', window.encodeURIComponent( shortcode ) );
|
||||
wp.mce.views.refreshView( self, shortcode );
|
||||
frame.detach();
|
||||
|
|
@ -1205,6 +1207,7 @@
|
|||
|
||||
wp.mce.video = _.extend( {}, wp.mce.media, {
|
||||
shortcode: 'video',
|
||||
state: 'video-details',
|
||||
View: wp.mce.media.View.extend({
|
||||
className: 'editor-video',
|
||||
template: media.template('editor-video')
|
||||
|
|
@ -1215,6 +1218,7 @@
|
|||
|
||||
wp.mce.audio = _.extend( {}, wp.mce.media, {
|
||||
shortcode: 'audio',
|
||||
state: 'audio-details',
|
||||
View: wp.mce.media.View.extend({
|
||||
className: 'editor-audio',
|
||||
template: media.template('editor-audio')
|
||||
|
|
@ -1223,6 +1227,138 @@
|
|||
|
||||
wp.mce.views.register( 'audio', wp.mce.audio );
|
||||
|
||||
wp.mce.media.PlaylistView = wp.mce.View.extend({
|
||||
className: 'editor-playlist',
|
||||
template: media.template('editor-playlist'),
|
||||
|
||||
initialize: function( options ) {
|
||||
this.data = {};
|
||||
this.attachments = [];
|
||||
this.shortcode = options.shortcode;
|
||||
_.bindAll( this, 'setPlayer' );
|
||||
$(this).on('ready', this.setNode);
|
||||
},
|
||||
|
||||
setNode: function (e, node) {
|
||||
this.node = node;
|
||||
this.fetch();
|
||||
},
|
||||
|
||||
fetch: function() {
|
||||
this.attachments = wp.media[ this.shortcode.tag ].attachments( this.shortcode );
|
||||
this.attachments.more().done( this.setPlayer );
|
||||
},
|
||||
|
||||
setPlayer: function () {
|
||||
var p,
|
||||
html = this.getHtml(),
|
||||
t = this.encodedText,
|
||||
self = this;
|
||||
|
||||
this.unsetPlayer();
|
||||
|
||||
_.each( tinymce.editors, function( editor ) {
|
||||
var doc;
|
||||
if ( editor.plugins.wpview ) {
|
||||
doc = editor.getDoc();
|
||||
$( doc ).find( '[data-wpview-text="' + t + '"]' ).each(function (i, elem) {
|
||||
var node = $( elem );
|
||||
node.html( html );
|
||||
self.node = elem;
|
||||
});
|
||||
}
|
||||
}, this );
|
||||
|
||||
p = new WPPlaylistView({
|
||||
el: $( self.node ).find( '.wp-playlist' ).get(0),
|
||||
metadata: this.data
|
||||
});
|
||||
|
||||
this.player = p._player;
|
||||
},
|
||||
|
||||
getHtml: function() {
|
||||
var data = this.shortcode.attrs.named,
|
||||
model = wp.media[ this.shortcode.tag ],
|
||||
type = 'playlist' === this.shortcode.tag ? 'audio' : 'video',
|
||||
options,
|
||||
attachments,
|
||||
tracks = [];
|
||||
|
||||
if ( ! this.attachments.length ) {
|
||||
return;
|
||||
}
|
||||
|
||||
_.each( model.defaults, function( value, key ) {
|
||||
data[ key ] = model.coerce( data, key );
|
||||
});
|
||||
|
||||
attachments = this.attachments.toJSON();
|
||||
|
||||
options = {
|
||||
type: type,
|
||||
style: data.style,
|
||||
tracklist: data.tracklist,
|
||||
tracknumbers: data.tracknumbers,
|
||||
images: data.images,
|
||||
artists: data.artists
|
||||
};
|
||||
|
||||
_.each( attachments, function (attachment) {
|
||||
var size = {}, track = {
|
||||
src : attachment.url,
|
||||
type : attachment.mime,
|
||||
title : attachment.title,
|
||||
caption : attachment.caption,
|
||||
description : attachment.description,
|
||||
meta : attachment.meta
|
||||
};
|
||||
|
||||
if ( 'video' === type ) {
|
||||
if ( ! options.width ) {
|
||||
options.width = attachment.width;
|
||||
options.height = attachment.height;
|
||||
}
|
||||
size.width = attachment.width;
|
||||
size.height = attachment.height;
|
||||
track.dimensions = {
|
||||
original : size,
|
||||
resized : size
|
||||
};
|
||||
} else {
|
||||
options.width = 400;
|
||||
}
|
||||
|
||||
track.image = attachment.image;
|
||||
track.thumb = attachment.thumb;
|
||||
|
||||
tracks.push( track );
|
||||
} );
|
||||
|
||||
options.tracks = tracks;
|
||||
this.data = options;
|
||||
|
||||
return this.template( options );
|
||||
}
|
||||
});
|
||||
_.extend( wp.mce.media.PlaylistView.prototype, wp.media.mixin );
|
||||
|
||||
wp.mce.playlist = _.extend( {}, wp.mce.media, {
|
||||
shortcode: 'playlist',
|
||||
state: 'playlist-edit',
|
||||
View: wp.mce.media.PlaylistView
|
||||
} );
|
||||
|
||||
wp.mce.views.register( 'playlist', wp.mce.playlist );
|
||||
|
||||
wp.mce['video-playlist'] = _.extend( {}, wp.mce.media, {
|
||||
shortcode: 'video-playlist',
|
||||
state: 'video-playlist-edit',
|
||||
View: wp.mce.media.PlaylistView
|
||||
} );
|
||||
|
||||
wp.mce.views.register( 'video-playlist', wp.mce['video-playlist'] );
|
||||
|
||||
function init() {
|
||||
$(document.body)
|
||||
.on( 'click', '.wp-switch-editor', wp.media.mixin.pauseAllPlayers )
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -198,6 +198,23 @@
|
|||
}
|
||||
}
|
||||
|
||||
if ( ! _.isEmpty( attachment.caption ) ) {
|
||||
shortcode.caption = attachment.caption;
|
||||
} else if ( attachment.meta && attachment.meta.title ) {
|
||||
shortcode.caption = '“' + attachment.meta.title + '”';
|
||||
if ( attachment.meta.album ) {
|
||||
shortcode.caption += ' from ' + attachment.meta.album;
|
||||
}
|
||||
|
||||
if ( attachment.meta.artist ) {
|
||||
shortcode.caption += ' by ' + attachment.meta.artist;
|
||||
}
|
||||
} else if ( ! _.isEmpty( attachment.description ) ) {
|
||||
shortcode.caption = attachment.description;
|
||||
} else {
|
||||
shortcode.caption = attachment.title;
|
||||
}
|
||||
|
||||
extension = attachment.filename.split('.').pop();
|
||||
|
||||
if ( _.contains( wp.media.view.settings.embedExts, extension ) ) {
|
||||
|
|
@ -387,6 +404,7 @@
|
|||
if ( attachments[this.tag] ) {
|
||||
_.extend( attrs, attachments[this.tag].toJSON() );
|
||||
}
|
||||
|
||||
// Convert all gallery shortcodes to use the `ids` property.
|
||||
// Ignore `post__in` and `post__not_in`; the attachments in
|
||||
// the collection will already reflect those properties.
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -8,10 +8,10 @@
|
|||
|
||||
itemTemplate : wp.template('wp-playlist-item'),
|
||||
|
||||
initialize : function () {
|
||||
initialize : function (options) {
|
||||
var settings = {};
|
||||
|
||||
this.data = $.parseJSON( this.$('script').html() );
|
||||
this.data = options.metadata || $.parseJSON( this.$('script').html() );
|
||||
this.playerNode = this.$( this.data.type );
|
||||
|
||||
this.tracks = new Backbone.Collection( this.data.tracks );
|
||||
|
|
@ -38,7 +38,7 @@
|
|||
}
|
||||
settings.success = this.bindPlayer;
|
||||
|
||||
new MediaElementPlayer( this.playerNode.get(0), settings );
|
||||
this._player = new MediaElementPlayer( this.playerNode.get(0), settings );
|
||||
},
|
||||
|
||||
renderCurrent : function () {
|
||||
|
|
@ -132,9 +132,13 @@
|
|||
});
|
||||
|
||||
$(document).ready(function () {
|
||||
$('.wp-playlist').each(function () {
|
||||
return new WPPlaylistView({ el: this });
|
||||
});
|
||||
if ( ! $( 'body' ).hasClass('wp-admin') ) {
|
||||
$('.wp-playlist').each(function () {
|
||||
return new WPPlaylistView({ el: this });
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
window.WPPlaylistView = WPPlaylistView;
|
||||
|
||||
}(jQuery, _, Backbone));
|
||||
|
|
@ -13,28 +13,6 @@ tinymce.PluginManager.add('wpgallery', function( editor ) {
|
|||
'data-wp-media="' + data + '" data-mce-resize="false" data-mce-placeholder="1" />';
|
||||
}
|
||||
|
||||
function replaceCallback( match, type, close ) {
|
||||
var index;
|
||||
|
||||
if ( close && close.indexOf( '[' + type ) > -1 ) {
|
||||
index = match.length - close.length;
|
||||
return html( 'wp-' + type, match.substring( 0, index ) ) + match.substring( index );
|
||||
}
|
||||
|
||||
return html( 'wp-' + type, match );
|
||||
}
|
||||
|
||||
function replaceAVShortcodes( content ) {
|
||||
var testRegex = /\[(video-playlist|playlist)[^\]]*\]/,
|
||||
replaceRegex = /\[(video-playlist|playlist)[^\]]*\]([\s\S]*?\[\/\1\])?/;
|
||||
|
||||
while ( testRegex.test( content ) ) {
|
||||
content = content.replace( replaceRegex, replaceCallback );
|
||||
}
|
||||
|
||||
return content;
|
||||
}
|
||||
|
||||
function restoreMediaShortcodes( content ) {
|
||||
function getAttr( str, name ) {
|
||||
name = new RegExp( name + '=\"([^\"]+)\"' ).exec( str );
|
||||
|
|
@ -76,25 +54,6 @@ tinymce.PluginManager.add('wpgallery', function( editor ) {
|
|||
editor.dom.setAttrib( node, 'data-wp-media', window.encodeURIComponent( shortcode ) );
|
||||
frame.detach();
|
||||
});
|
||||
} else if ( editor.dom.hasClass( node, 'wp-playlist' ) && wp.media.playlist ) {
|
||||
frame = wp.media.playlist.edit( data );
|
||||
|
||||
frame.state('playlist-edit').on( 'update', function( selection ) {
|
||||
var shortcode = wp.media.playlist.shortcode( selection ).string();
|
||||
editor.dom.setAttrib( node, 'data-wp-media', window.encodeURIComponent( shortcode ) );
|
||||
frame.detach();
|
||||
});
|
||||
} else if ( editor.dom.hasClass( node, 'wp-video-playlist' ) && wp.media['video-playlist'] ) {
|
||||
frame = wp.media['video-playlist'].edit( data );
|
||||
|
||||
frame.state('video-playlist-edit').on( 'update', function( selection ) {
|
||||
var shortcode = wp.media['video-playlist'].shortcode( selection ).string();
|
||||
editor.dom.setAttrib( node, 'data-wp-media', window.encodeURIComponent( shortcode ) );
|
||||
frame.detach();
|
||||
});
|
||||
} else {
|
||||
// temp
|
||||
window.console && window.console.log( 'Edit AV shortcode ' + data );
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -152,10 +111,6 @@ tinymce.PluginManager.add('wpgallery', function( editor ) {
|
|||
if ( node.nodeName === 'IMG' && dom.getAttrib( node, 'data-wp-media' ) ) {
|
||||
if ( dom.hasClass( node, 'wp-gallery' ) ) {
|
||||
event.name = 'gallery';
|
||||
} else if ( dom.hasClass( node, 'wp-playlist' ) ) {
|
||||
event.name = 'playlist';
|
||||
} else if ( dom.hasClass( node, 'wp-video-playlist' ) ) {
|
||||
event.name = 'video-playlist';
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
@ -165,8 +120,6 @@ tinymce.PluginManager.add('wpgallery', function( editor ) {
|
|||
if ( ! editor.plugins.wpview ) {
|
||||
event.content = replaceGalleryShortcodes( event.content );
|
||||
}
|
||||
|
||||
event.content = replaceAVShortcodes( event.content );
|
||||
});
|
||||
|
||||
editor.on( 'PostProcess', function( event ) {
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
tinymce.PluginManager.add("wpgallery",function(a){function b(a){return a.replace(/\[gallery([^\]]*)\]/g,function(a){return c("wp-gallery",a)})}function c(a,b){return b=window.encodeURIComponent(b),'<img src="'+tinymce.Env.transparentSrc+'" class="wp-media mceItem '+a+'" data-wp-media="'+b+'" data-mce-resize="false" data-mce-placeholder="1" />'}function d(a,b,d){var e;return d&&d.indexOf("["+b)>-1?(e=a.length-d.length,c("wp-"+b,a.substring(0,e))+a.substring(e)):c("wp-"+b,a)}function e(a){for(var b=/\[(video-playlist|playlist)[^\]]*\]/,c=/\[(video-playlist|playlist)[^\]]*\]([\s\S]*?\[\/\1\])?/;b.test(a);)a=a.replace(c,d);return a}function f(a){function b(a,b){return b=new RegExp(b+'="([^"]+)"').exec(a),b?window.decodeURIComponent(b[1]):""}return a.replace(/(?:<p(?: [^>]+)?>)*(<img [^>]+>)(?:<\/p>)*/g,function(a,c){var d=b(c,"data-wp-media");return d?"<p>"+d+"</p>":a})}function g(b){var c,d,e;"IMG"===b.nodeName&&"undefined"!=typeof wp&&wp.media&&(e=window.decodeURIComponent(a.dom.getAttrib(b,"data-wp-media")),a.dom.hasClass(b,"wp-gallery")&&wp.media.gallery?(c=wp.media.gallery,d=c.edit(e),d.state("gallery-edit").on("update",function(e){var f=c.shortcode(e).string();a.dom.setAttrib(b,"data-wp-media",window.encodeURIComponent(f)),d.detach()})):a.dom.hasClass(b,"wp-playlist")&&wp.media.playlist?(d=wp.media.playlist.edit(e),d.state("playlist-edit").on("update",function(c){var e=wp.media.playlist.shortcode(c).string();a.dom.setAttrib(b,"data-wp-media",window.encodeURIComponent(e)),d.detach()})):a.dom.hasClass(b,"wp-video-playlist")&&wp.media["video-playlist"]?(d=wp.media["video-playlist"].edit(e),d.state("video-playlist-edit").on("update",function(c){var e=wp.media["video-playlist"].shortcode(c).string();a.dom.setAttrib(b,"data-wp-media",window.encodeURIComponent(e)),d.detach()})):window.console&&window.console.log("Edit AV shortcode "+e))}a.addCommand("WP_Gallery",function(){g(a.selection.getNode())}),a.on("mouseup",function(b){function c(){d.removeClass(d.select("img.wp-media-selected"),"wp-media-selected")}var d=a.dom,e=b.target;"IMG"===e.nodeName&&d.getAttrib(e,"data-wp-media")?2!==b.button&&(d.hasClass(e,"wp-media-selected")?g(e):(c(),d.addClass(e,"wp-media-selected"))):c()}),a.on("ResolveName",function(b){var c=a.dom,d=b.target;"IMG"===d.nodeName&&c.getAttrib(d,"data-wp-media")&&(c.hasClass(d,"wp-gallery")?b.name="gallery":c.hasClass(d,"wp-playlist")?b.name="playlist":c.hasClass(d,"wp-video-playlist")&&(b.name="video-playlist"))}),a.on("BeforeSetContent",function(c){a.plugins.wpview||(c.content=b(c.content)),c.content=e(c.content)}),a.on("PostProcess",function(a){a.get&&(a.content=f(a.content))})});
|
||||
tinymce.PluginManager.add("wpgallery",function(a){function b(a){return a.replace(/\[gallery([^\]]*)\]/g,function(a){return c("wp-gallery",a)})}function c(a,b){return b=window.encodeURIComponent(b),'<img src="'+tinymce.Env.transparentSrc+'" class="wp-media mceItem '+a+'" data-wp-media="'+b+'" data-mce-resize="false" data-mce-placeholder="1" />'}function d(a){function b(a,b){return b=new RegExp(b+'="([^"]+)"').exec(a),b?window.decodeURIComponent(b[1]):""}return a.replace(/(?:<p(?: [^>]+)?>)*(<img [^>]+>)(?:<\/p>)*/g,function(a,c){var d=b(c,"data-wp-media");return d?"<p>"+d+"</p>":a})}function e(b){var c,d,e;"IMG"===b.nodeName&&"undefined"!=typeof wp&&wp.media&&(e=window.decodeURIComponent(a.dom.getAttrib(b,"data-wp-media")),a.dom.hasClass(b,"wp-gallery")&&wp.media.gallery&&(c=wp.media.gallery,d=c.edit(e),d.state("gallery-edit").on("update",function(e){var f=c.shortcode(e).string();a.dom.setAttrib(b,"data-wp-media",window.encodeURIComponent(f)),d.detach()})))}a.addCommand("WP_Gallery",function(){e(a.selection.getNode())}),a.on("mouseup",function(b){function c(){d.removeClass(d.select("img.wp-media-selected"),"wp-media-selected")}var d=a.dom,f=b.target;"IMG"===f.nodeName&&d.getAttrib(f,"data-wp-media")?2!==b.button&&(d.hasClass(f,"wp-media-selected")?e(f):(c(),d.addClass(f,"wp-media-selected"))):c()}),a.on("ResolveName",function(b){var c=a.dom,d=b.target;"IMG"===d.nodeName&&c.getAttrib(d,"data-wp-media")&&c.hasClass(d,"wp-gallery")&&(b.name="gallery")}),a.on("BeforeSetContent",function(c){a.plugins.wpview||(c.content=b(c.content))}),a.on("PostProcess",function(a){a.get&&(a.content=d(a.content))})});
|
||||
|
|
@ -141,14 +141,6 @@ img::selection {
|
|||
background-image: url(images/gallery.png);
|
||||
}
|
||||
|
||||
.mce-content-body img.wp-media.wp-playlist {
|
||||
background-image: url("images/playlist-audio.png");
|
||||
}
|
||||
|
||||
.mce-content-body img.wp-media.wp-video-playlist {
|
||||
background-image: url("images/playlist-video.png");
|
||||
}
|
||||
|
||||
/* Image resize handles */
|
||||
.mce-content-body div.mce-resizehandle {
|
||||
border-color: #777;
|
||||
|
|
@ -299,6 +291,16 @@ embed {
|
|||
border-color: rgba(0,0,0,0.3);
|
||||
}
|
||||
|
||||
.wpview-type-audio .track-details {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 5px;
|
||||
width: 85%;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.gallery img[data-mce-selected]:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
|
|
|||
Binary file not shown.
|
|
@ -814,7 +814,7 @@ function wp_print_media_templates() {
|
|||
<div class="setting preload">
|
||||
<span><?php _e( 'Preload' ); ?></span>
|
||||
<div class="button-group button-large" data-setting="preload">
|
||||
<button class="button" value="auto"><?php _ex( 'Auto', 'auto preload video' ); ?></button>
|
||||
<button class="button" value="auto"><?php _ex( 'Auto', 'auto preload audio' ); ?></button>
|
||||
<button class="button" value="metadata"><?php _e( 'Metadata' ); ?></button>
|
||||
<button class="button active" value="none"><?php _e( 'None' ); ?></button>
|
||||
</div>
|
||||
|
|
@ -829,6 +829,12 @@ function wp_print_media_templates() {
|
|||
<span><?php _e( 'Loop' ); ?></span>
|
||||
<input type="checkbox" data-setting="loop" />
|
||||
</label>
|
||||
|
||||
<label class="setting">
|
||||
<span><?php _e( 'Caption' ); ?></span>
|
||||
<input type="text" data-setting="caption" value="{{ data.model.caption }}" />
|
||||
</label>
|
||||
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -901,7 +907,7 @@ function wp_print_media_templates() {
|
|||
<div class="setting preload">
|
||||
<span><?php _e( 'Preload' ); ?></span>
|
||||
<div class="button-group button-large" data-setting="preload">
|
||||
<button class="button" value="auto"><?php _e( 'Auto' ); ?></button>
|
||||
<button class="button" value="auto"><?php _ex( 'Auto', 'auto preload video' ); ?></button>
|
||||
<button class="button" value="metadata"><?php _e( 'Metadata' ); ?></button>
|
||||
<button class="button active" value="none"><?php _e( 'None' ); ?></button>
|
||||
</div>
|
||||
|
|
@ -936,6 +942,11 @@ function wp_print_media_templates() {
|
|||
<# } #>
|
||||
<textarea class="hidden content-setting">{{ content }}</textarea>
|
||||
</label>
|
||||
|
||||
<label class="setting">
|
||||
<span><?php _e( 'Caption' ); ?></span>
|
||||
<input type="text" data-setting="caption" value="{{ data.model.caption }}" />
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</script>
|
||||
|
|
@ -966,6 +977,9 @@ function wp_print_media_templates() {
|
|||
<div class="dashicons dashicons-edit edit"></div>
|
||||
<div class="dashicons dashicons-no-alt remove"></div>
|
||||
</div>
|
||||
<# if ( ! _.isEmpty( data.model.caption ) ) { #>
|
||||
<div class="track-details">{{{ data.model.caption }}}</div>
|
||||
<# } #>
|
||||
<?php wp_underscore_audio_template() ?>
|
||||
</script>
|
||||
|
||||
|
|
@ -974,9 +988,31 @@ function wp_print_media_templates() {
|
|||
<div class="dashicons dashicons-edit edit"></div>
|
||||
<div class="dashicons dashicons-no-alt remove"></div>
|
||||
</div>
|
||||
<# if ( ! _.isEmpty( data.model.caption ) ) { #>
|
||||
<div class="track-details">{{{ data.model.caption }}}</div>
|
||||
<# } #>
|
||||
<?php wp_underscore_video_template() ?>
|
||||
</script>
|
||||
|
||||
<?php wp_underscore_playlist_templates() ?>
|
||||
|
||||
<script type="text/html" id="tmpl-editor-playlist">
|
||||
<div class="toolbar">
|
||||
<div class="dashicons dashicons-edit edit"></div>
|
||||
<div class="dashicons dashicons-no-alt remove"></div>
|
||||
</div>
|
||||
<div class="wp-playlist wp-{{ data.type }}-playlist wp-playlist-{{ data.style }}">
|
||||
<# if ( 'audio' === data.type ){ #>
|
||||
<div class="wp-playlist-current-item"></div>
|
||||
<# } #>
|
||||
<{{ data.type }} controls="controls" preload="none" <#
|
||||
if ( data.width ) { #> width="{{ data.width }}"<# }
|
||||
#><# if ( data.height ) { #> height="{{ data.height }}"<# } #>></{{ data.type }}>
|
||||
<div class="wp-playlist-next"></div>
|
||||
<div class="wp-playlist-prev"></div>
|
||||
</div>
|
||||
</script>
|
||||
|
||||
<?php
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -999,17 +999,12 @@ function gallery_shortcode( $attr ) {
|
|||
}
|
||||
|
||||
/**
|
||||
* Output and enqueue default scripts and styles for playlists.
|
||||
* Output the templates used by playlists
|
||||
*
|
||||
* @since 3.9.0
|
||||
*
|
||||
* @param string $type Type of playlist: "audio" or "video."
|
||||
*/
|
||||
function wp_playlist_scripts( $type ) {
|
||||
wp_enqueue_style( 'wp-mediaelement' );
|
||||
wp_enqueue_script( 'wp-playlist' );
|
||||
function wp_underscore_playlist_templates() {
|
||||
?>
|
||||
<!--[if lt IE 9]><script>document.createElement('<?php echo esc_js( $type ) ?>');</script><![endif]-->
|
||||
<script type="text/html" id="tmpl-wp-playlist-current-item">
|
||||
<# if ( data.image ) { #>
|
||||
<img src="{{{ data.thumb.src }}}"/>
|
||||
|
|
@ -1045,6 +1040,22 @@ function wp_playlist_scripts( $type ) {
|
|||
</script>
|
||||
<?php
|
||||
}
|
||||
|
||||
/**
|
||||
* Output and enqueue default scripts and styles for playlists.
|
||||
*
|
||||
* @since 3.9.0
|
||||
*
|
||||
* @param string $type Type of playlist: "audio" or "video."
|
||||
*/
|
||||
function wp_playlist_scripts( $type ) {
|
||||
wp_enqueue_style( 'wp-mediaelement' );
|
||||
wp_enqueue_script( 'wp-playlist' );
|
||||
?>
|
||||
<!--[if lt IE 9]><script>document.createElement('<?php echo esc_js( $type ) ?>');</script><![endif]-->
|
||||
<?php
|
||||
wp_underscore_playlist_templates();
|
||||
}
|
||||
add_action( 'wp_playlist_scripts', 'wp_playlist_scripts' );
|
||||
|
||||
/**
|
||||
|
|
@ -1390,6 +1401,7 @@ function wp_audio_shortcode( $attr, $content = '' ) {
|
|||
|
||||
$default_types = wp_get_audio_extensions();
|
||||
$defaults_atts = array(
|
||||
'caption' => '',
|
||||
'src' => '',
|
||||
'loop' => '',
|
||||
'autoplay' => '',
|
||||
|
|
@ -1549,6 +1561,7 @@ function wp_video_shortcode( $attr, $content = '' ) {
|
|||
|
||||
$default_types = wp_get_video_extensions();
|
||||
$defaults_atts = array(
|
||||
'caption' => '',
|
||||
'src' => '',
|
||||
'poster' => '',
|
||||
'loop' => '',
|
||||
|
|
@ -2332,6 +2345,22 @@ function wp_prepare_attachment_for_js( $attachment ) {
|
|||
if ( $meta && ( 'audio' === $type || 'video' === $type ) ) {
|
||||
if ( isset( $meta['length_formatted'] ) )
|
||||
$response['fileLength'] = $meta['length_formatted'];
|
||||
|
||||
$response['meta'] = array();
|
||||
$keys = array( 'title', 'artist', 'band', 'album', 'genre', 'year', 'length', 'length_formatted' );
|
||||
foreach ( $keys as $key ) {
|
||||
if ( ! empty( $meta[ $key ] ) ) {
|
||||
$response['meta'][ $key ] = $meta[ $key ];
|
||||
}
|
||||
}
|
||||
|
||||
$id = get_post_thumbnail_id( $attachment->ID );
|
||||
if ( ! empty( $id ) ) {
|
||||
list( $src, $width, $height ) = wp_get_attachment_image_src( $id, 'full' );
|
||||
$response['image'] = compact( 'src', 'width', 'height' );
|
||||
list( $src, $width, $height ) = wp_get_attachment_image_src( $id, 'thumbnail' );
|
||||
$response['thumb'] = compact( 'src', 'width', 'height' );
|
||||
}
|
||||
}
|
||||
|
||||
if ( function_exists('get_compat_media_markup') )
|
||||
|
|
|
|||
|
|
@ -396,7 +396,7 @@ function wp_default_scripts( &$scripts ) {
|
|||
// Both rely on numerous settings, styles, and templates to operate correctly.
|
||||
$scripts->add( 'media-views', "/wp-includes/js/media-views$suffix.js", array( 'utils', 'media-models', 'wp-plupload', 'jquery-ui-sortable', 'wp-mediaelement' ), false, 1 );
|
||||
$scripts->add( 'media-editor', "/wp-includes/js/media-editor$suffix.js", array( 'shortcode', 'media-views' ), false, 1 );
|
||||
$scripts->add( 'media-audiovideo', "/wp-includes/js/media-audiovideo$suffix.js", array( 'media-editor', 'mce-view' ), false, 1 );
|
||||
$scripts->add( 'media-audiovideo', "/wp-includes/js/media-audiovideo$suffix.js", array( 'media-editor', 'mce-view', 'wp-playlist' ), false, 1 );
|
||||
$scripts->add( 'mce-view', "/wp-includes/js/mce-view$suffix.js", array( 'shortcode', 'media-models' ), false, 1 );
|
||||
|
||||
if ( is_admin() ) {
|
||||
|
|
|
|||
Loading…
Reference in New Issue