1/* global tinymce */
  2tinymce.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" alt="" />';
 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});
113