wp/wp-includes/js/tinymce/plugins/wpgallery/plugin.js
changeset 5 5e2f62d02dcd
child 7 cf61fcea0001
equal deleted inserted replaced
4:346c88efed21 5:5e2f62d02dcd
       
     1 /* global tinymce */
       
     2 tinymce.PluginManager.add('wpgallery', function( editor ) {
       
     3 
       
     4 	function replaceGalleryShortcodes( content ) {
       
     5 		return content.replace( /\[gallery([^\]]*)\]/g, function( match ) {
       
     6 			return html( 'wp-gallery', match );
       
     7 		});
       
     8 	}
       
     9 
       
    10 	function html( cls, data ) {
       
    11 		data = window.encodeURIComponent( data );
       
    12 		return '<img src="' + tinymce.Env.transparentSrc + '" class="wp-media mceItem ' + cls + '" ' +
       
    13 			'data-wp-media="' + data + '" data-mce-resize="false" data-mce-placeholder="1" />';
       
    14 	}
       
    15 
       
    16 	function restoreMediaShortcodes( content ) {
       
    17 		function getAttr( str, name ) {
       
    18 			name = new RegExp( name + '=\"([^\"]+)\"' ).exec( str );
       
    19 			return name ? window.decodeURIComponent( name[1] ) : '';
       
    20 		}
       
    21 
       
    22 		return content.replace( /(?:<p(?: [^>]+)?>)*(<img [^>]+>)(?:<\/p>)*/g, function( match, image ) {
       
    23 			var data = getAttr( image, 'data-wp-media' );
       
    24 
       
    25 			if ( data ) {
       
    26 				return '<p>' + data + '</p>';
       
    27 			}
       
    28 
       
    29 			return match;
       
    30 		});
       
    31 	}
       
    32 
       
    33 	function editMedia( node ) {
       
    34 		var gallery, frame, data;
       
    35 
       
    36 		if ( node.nodeName !== 'IMG' ) {
       
    37 			return;
       
    38 		}
       
    39 
       
    40 		// Check if the `wp.media` API exists.
       
    41 		if ( typeof wp === 'undefined' || ! wp.media ) {
       
    42 			return;
       
    43 		}
       
    44 
       
    45 		data = window.decodeURIComponent( editor.dom.getAttrib( node, 'data-wp-media' ) );
       
    46 
       
    47 		// Make sure we've selected a gallery node.
       
    48 		if ( editor.dom.hasClass( node, 'wp-gallery' ) && wp.media.gallery ) {
       
    49 			gallery = wp.media.gallery;
       
    50 			frame = gallery.edit( data );
       
    51 
       
    52 			frame.state('gallery-edit').on( 'update', function( selection ) {
       
    53 				var shortcode = gallery.shortcode( selection ).string();
       
    54 				editor.dom.setAttrib( node, 'data-wp-media', window.encodeURIComponent( shortcode ) );
       
    55 				frame.detach();
       
    56 			});
       
    57 		}
       
    58 	}
       
    59 
       
    60 	// Register the command so that it can be invoked by using tinyMCE.activeEditor.execCommand('...');
       
    61 	editor.addCommand( 'WP_Gallery', function() {
       
    62 		editMedia( editor.selection.getNode() );
       
    63 	});
       
    64 
       
    65 	editor.on( 'mouseup', function( event ) {
       
    66 		var dom = editor.dom,
       
    67 			node = event.target;
       
    68 
       
    69 		function unselect() {
       
    70 			dom.removeClass( dom.select( 'img.wp-media-selected' ), 'wp-media-selected' );
       
    71 		}
       
    72 
       
    73 		if ( node.nodeName === 'IMG' && dom.getAttrib( node, 'data-wp-media' ) ) {
       
    74 			// Don't trigger on right-click
       
    75 			if ( event.button !== 2 ) {
       
    76 				if ( dom.hasClass( node, 'wp-media-selected' ) ) {
       
    77 					editMedia( node );
       
    78 				} else {
       
    79 					unselect();
       
    80 					dom.addClass( node, 'wp-media-selected' );
       
    81 				}
       
    82 			}
       
    83 		} else {
       
    84 			unselect();
       
    85 		}
       
    86 	});
       
    87 
       
    88 	// Display gallery, audio or video instead of img in the element path
       
    89 	editor.on( 'ResolveName', function( event ) {
       
    90 		var dom = editor.dom,
       
    91 			node = event.target;
       
    92 
       
    93 		if ( node.nodeName === 'IMG' && dom.getAttrib( node, 'data-wp-media' ) ) {
       
    94 			if ( dom.hasClass( node, 'wp-gallery' ) ) {
       
    95 				event.name = 'gallery';
       
    96 			}
       
    97 		}
       
    98 	});
       
    99 
       
   100 	editor.on( 'BeforeSetContent', function( event ) {
       
   101 		// 'wpview' handles the gallery shortcode when present
       
   102 		if ( ! editor.plugins.wpview || typeof wp === 'undefined' || ! wp.mce ) {
       
   103 			event.content = replaceGalleryShortcodes( event.content );
       
   104 		}
       
   105 	});
       
   106 
       
   107 	editor.on( 'PostProcess', function( event ) {
       
   108 		if ( event.get ) {
       
   109 			event.content = restoreMediaShortcodes( event.content );
       
   110 		}
       
   111 	});
       
   112 });