WordPress/wp-includes/js/tinymce/plugins/wpgallery/plugin.js
Scott Taylor 615dd5331b 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
2014-03-20 13:33:14 +00:00

131 lines
3.6 KiB
JavaScript

/* global tinymce */
tinymce.PluginManager.add('wpgallery', function( editor ) {
function replaceGalleryShortcodes( content ) {
return content.replace( /\[gallery([^\]]*)\]/g, function( match ) {
return html( 'wp-gallery', match );
});
}
function html( cls, data ) {
data = window.encodeURIComponent( data );
return '<img src="' + tinymce.Env.transparentSrc + '" class="wp-media mceItem ' + cls + '" ' +
'data-wp-media="' + data + '" data-mce-resize="false" data-mce-placeholder="1" />';
}
function restoreMediaShortcodes( content ) {
function getAttr( str, name ) {
name = new RegExp( name + '=\"([^\"]+)\"' ).exec( str );
return name ? window.decodeURIComponent( name[1] ) : '';
}
return content.replace( /(?:<p(?: [^>]+)?>)*(<img [^>]+>)(?:<\/p>)*/g, function( match, image ) {
var data = getAttr( image, 'data-wp-media' );
if ( data ) {
return '<p>' + data + '</p>';
}
return match;
});
}
function editMedia( node ) {
var gallery, frame, data;
if ( node.nodeName !== 'IMG' ) {
return;
}
// Check if the `wp.media` API exists.
if ( typeof wp === 'undefined' || ! wp.media ) {
return;
}
data = window.decodeURIComponent( editor.dom.getAttrib( node, 'data-wp-media' ) );
// Make sure we've selected a gallery node.
if ( editor.dom.hasClass( node, 'wp-gallery' ) && wp.media.gallery ) {
gallery = wp.media.gallery;
frame = gallery.edit( data );
frame.state('gallery-edit').on( 'update', function( selection ) {
var shortcode = gallery.shortcode( selection ).string();
editor.dom.setAttrib( node, 'data-wp-media', window.encodeURIComponent( shortcode ) );
frame.detach();
});
}
}
// Register the command so that it can be invoked by using tinyMCE.activeEditor.execCommand('...');
editor.addCommand( 'WP_Gallery', function() {
editMedia( editor.selection.getNode() );
});
/*
editor.on( 'init', function( e ) {
// _createButtons()
// iOS6 doesn't show the buttons properly on click, show them on 'touchstart'
if ( 'ontouchstart' in window ) {
editor.dom.events.bind( editor.getBody(), 'touchstart', function( e ) {
var target = e.target;
if ( target.nodeName == 'IMG' && editor.dom.hasClass( target, 'wp-gallery' ) ) {
editor.selection.select( target );
editor.dom.events.cancel( e );
editor.plugins.wordpress._hideButtons();
editor.plugins.wordpress._showButtons( target, 'wp_gallerybtns' );
}
});
}
});
*/
editor.on( 'mouseup', function( event ) {
var dom = editor.dom,
node = event.target;
function unselect() {
dom.removeClass( dom.select( 'img.wp-media-selected' ), 'wp-media-selected' );
}
if ( node.nodeName === 'IMG' && dom.getAttrib( node, 'data-wp-media' ) ) {
// Don't trigger on right-click
if ( event.button !== 2 ) {
if ( dom.hasClass( node, 'wp-media-selected' ) ) {
editMedia( node );
} else {
unselect();
dom.addClass( node, 'wp-media-selected' );
}
}
} else {
unselect();
}
});
// Display gallery, audio or video instead of img in the element path
editor.on( 'ResolveName', function( event ) {
var dom = editor.dom,
node = event.target;
if ( node.nodeName === 'IMG' && dom.getAttrib( node, 'data-wp-media' ) ) {
if ( dom.hasClass( node, 'wp-gallery' ) ) {
event.name = 'gallery';
}
}
});
editor.on( 'BeforeSetContent', function( event ) {
// 'wpview' handles the gallery shortcode when present
if ( ! editor.plugins.wpview ) {
event.content = replaceGalleryShortcodes( event.content );
}
});
editor.on( 'PostProcess', function( event ) {
if ( event.get ) {
event.content = restoreMediaShortcodes( event.content );
}
});
});