vhad/wordpress-develop
1
0
Fork 0
mirror of https://github.com/gosticks/wordpress-develop.git synced 2026-08-13 05:10:18 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Unifying media controls and supporting playlists in the editor:

Browse Source 
* 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.



git-svn-id: https://develop.svn.wordpress.org/trunk@27640 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Scott Taylor
2014-03-20 13:33:00 +00:00
parent 5bbb2d3951
commit 5c0f7ae4fb
8 changed files with 258 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/wp-includes/js/tinymce/plugins/wpgallery/plugin.js
-47
View File
@@ -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 ) {
src/wp-includes/js/tinymce/skins/wordpress/wp-content.css
+10 -8
View File
@@ -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;
}