Commit cbf6084e authored by Andrew Ozz's avatar Andrew Ozz
Browse files

TinyMCE: add image based placeholders for audio and video shortcodes. Props... 

TinyMCE: add image based placeholders for audio and video shortcodes. Props wonderboymusic, see #27016.
Built from https://develop.svn.wordpress.org/trunk@27169


git-svn-id: https://core.svn.wordpress.org/trunk@27034 1a063a9b-81f0-0310-95a4-ce76da25c4cd
parent e04e9486

wp-includes/js/tinymce/plugins/wpgallery/plugin.js

+71 −46
Original line number Diff line number Diff line 
/* global tinymce */

tinymce.PluginManager.add('wpgallery', function( editor ) {



	function parseGallery( content ) {

		return content.replace( /\[gallery([^\]]*)\]/g, function( match, attr ) {

			var data = tinymce.DOM.encode( attr );

	function replaceGalleryShortcodes( content ) {

		return content.replace( /\[gallery([^\]]*)\]/g, function( match ) {

			var data = window.encodeURIComponent( match );



			return '<img src="' + tinymce.Env.transparentSrc + '" class="wp-gallery mceItem" ' +

				'title="gallery' + data + '" data-mce-resize="false" data-mce-placeholder="1" />';

			return '<img src="' + tinymce.Env.transparentSrc + '" class="wp-media wp-gallery mceItem" ' +

				'data-wp-media="' + data + '" data-mce-resize="false" data-mce-placeholder="1" />';

		});

	}



	function getGallery( content ) {

	function replaceAVShortcodes( content ) {

		return content.replace( /\[(audio|video)[^\]]*\][\s\S]*?\[\/\1\]/g, function( match, type ) {

			var data = window.encodeURIComponent( match ),

				cls = 'wp-media mceItem wp-' + type;



			return '<img src="' + tinymce.Env.transparentSrc + '" class="' + cls + '" ' +

				'data-wp-media="' + data + '" data-mce-resize="false" data-mce-placeholder="1" />';

		});

	}



	function restoreMediaShortcodes( content ) {

		function getAttr( str, name ) {

			name = new RegExp( name + '=\"([^\"]+)\"', 'g' ).exec( str );

			return name ? tinymce.DOM.decode( name[1] ) : '';

			name = new RegExp( name + '=\"([^\"]+)\"' ).exec( str );

			return name ? window.decodeURIComponent( name[1] ) : '';

		}



		return content.replace( /(?:<p[^>]*>)*(<img[^>]+>)(?:<\/p>)*/g, function( match, image ) {

			var cls = getAttr( image, 'class' );

		return content.replace( /(?:<p(?: [^>]+)?>)*(<img [^>]+>)(?:<\/p>)*/g, function( match, image ) {

			var data = getAttr( image, 'data-wp-media' );



			if ( cls.indexOf('wp-gallery') !== -1 ) {

				return '<p>['+ tinymce.trim( getAttr( image, 'title' ) ) +']</p>';

			if ( data ) {

				return '<p>' + data + '</p>';

			}



			return match;

		});

	}



	// Register the command so that it can be invoked by using tinyMCE.activeEditor.execCommand('...');

	editor.addCommand( 'WP_Gallery', function() {

		var gallery, frame, node;

	function editMedia( node ) {

		var gallery, frame, data;



		if ( node.nodeName !== 'IMG' ) {

			return;

		}



		// Check if the `wp.media.gallery` API exists.

		if ( typeof wp === 'undefined' || ! wp.media || ! wp.media.gallery ) {

			return;

		}



		node = editor.selection.getNode();

		gallery = wp.media.gallery;



		// Make sure we've selected a gallery node.

		if ( node.nodeName === 'IMG' && editor.dom.hasClass( node, 'wp-gallery' ) ) {

			frame = gallery.edit( '[' + editor.dom.getAttrib( node, 'title' ) + ']' );

		if ( editor.dom.hasClass( node, 'wp-gallery' ) ) {

			gallery = wp.media.gallery;

			data = window.decodeURIComponent( editor.dom.getAttrib( node, 'data-wp-media' ) );

			frame = gallery.edit( data );



			frame.state('gallery-edit').on( 'update', function( selection ) {

				var shortcode = gallery.shortcode( selection ).string().slice( 1, -1 );

				editor.dom.setAttrib( node, 'title', shortcode );

				var shortcode = gallery.shortcode( selection ).string();

				editor.dom.setAttrib( node, 'data-wp-media', window.encodeURIComponent( shortcode ) );

			});

		} else {

			// temp

			window.console && console.log( 'Edit AV shortcode ' + window.decodeURIComponent( editor.dom.getAttrib( node, 'data-wp-media' ) ) );

		}

	}



	// 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 ) {
@@ -68,44 +88,49 @@ tinymce.PluginManager.add('wpgallery', function( editor ) { 
		}

	});

*/

	editor.on( 'mouseup', function( e ) {

		if ( e.target.nodeName === 'IMG' && editor.dom.hasClass( e.target, 'wp-gallery' ) ) {

	editor.on( 'mouseup', function( event ) {

		var dom = editor.dom,

			node = event.target;



		if ( node.nodeName === 'IMG' && dom.getAttrib( node, 'data-wp-media' ) ) {

			// Don't trigger on right-click

			if ( e.button !== 2 ) {

				if ( editor.dom.hasClass( e.target, 'wp-gallery-selected' ) ) {

					editor.execCommand('WP_Gallery');

					editor.dom.removeClass( e.target, 'wp-gallery-selected' );

			if ( event.button !== 2 ) {

				if ( dom.hasClass( node, 'wp-media-selected' ) ) {

					editMedia( node );

					dom.removeClass( node, 'wp-media-selected' );

				} else {

					editor.dom.addClass( e.target, 'wp-gallery-selected' );

					dom.addClass( node, 'wp-media-selected' );

				}

			}

		} else {

			editor.dom.removeClass( editor.dom.select( 'img.wp-gallery-selected' ), 'wp-gallery-selected' );

			dom.removeClass( dom.select( 'img.wp-media-selected' ), 'wp-media-selected' );

		}

	});



	// Display 'gallery' instead of img in element path

	editor.on( 'ResolveName', function( e ) {

	// Display gallery, audio or video instead of img in the element path

	editor.on( 'ResolveName', function( event ) {

		var dom = editor.dom,

			target = e.target;



		if ( target.nodeName === 'IMG' && dom.hasClass( target, 'wp-gallery' ) ) {

			e.name = 'gallery';

			node = event.target;



		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-video' ) ) {

				event.name = 'video';

			} else if ( dom.hasClass( node, 'wp-audio' ) ) {

				event.name = 'audio';

			}

		}

	});



	editor.on( 'BeforeSetContent', function( e ) {

		e.content = parseGallery( e.content );

	editor.on( 'BeforeSetContent', function( event ) {

		event.content = replaceGalleryShortcodes( event.content );

		event.content = replaceAVShortcodes( event.content );

	});



	editor.on( 'PostProcess', function( e ) {

		if ( e.get ) {

			e.content = getGallery( e.content );

	editor.on( 'PostProcess', function( event ) {

		if ( event.get ) {

			event.content = restoreMediaShortcodes( event.content );

		}

	});



	return {

		_do_gallery: parseGallery,

		_get_gallery: getGallery

	};

});

wp-includes/js/tinymce/plugins/wpgallery/plugin.min.js

+1 −1
Original line number Diff line number Diff line 
tinymce.PluginManager.add("wpgallery",function(a){function b(a){return a.replace(/\[gallery([^\]]*)\]/g,function(a,b){var c=tinymce.DOM.encode(b);return'<img src="'+tinymce.Env.transparentSrc+'" class="wp-gallery mceItem" title="gallery'+c+'" data-mce-resize="false" data-mce-placeholder="1" />'})}function c(a){function b(a,b){return b=new RegExp(b+'="([^"]+)"',"g").exec(a),b?tinymce.DOM.decode(b[1]):""}return a.replace(/(?:<p[^>]*>)*(<img[^>]+>)(?:<\/p>)*/g,function(a,c){var d=b(c,"class");return-1!==d.indexOf("wp-gallery")?"<p>["+tinymce.trim(b(c,"title"))+"]</p>":a})}return a.addCommand("WP_Gallery",function(){var b,c,d;"undefined"!=typeof wp&&wp.media&&wp.media.gallery&&(d=a.selection.getNode(),b=wp.media.gallery,"IMG"===d.nodeName&&a.dom.hasClass(d,"wp-gallery")&&(c=b.edit("["+a.dom.getAttrib(d,"title")+"]"),c.state("gallery-edit").on("update",function(c){var e=b.shortcode(c).string().slice(1,-1);a.dom.setAttrib(d,"title",e)})))}),a.on("mouseup",function(b){"IMG"===b.target.nodeName&&a.dom.hasClass(b.target,"wp-gallery")?2!==b.button&&(a.dom.hasClass(b.target,"wp-gallery-selected")?(a.execCommand("WP_Gallery"),a.dom.removeClass(b.target,"wp-gallery-selected")):a.dom.addClass(b.target,"wp-gallery-selected")):a.dom.removeClass(a.dom.select("img.wp-gallery-selected"),"wp-gallery-selected")}),a.on("ResolveName",function(b){var c=a.dom,d=b.target;"IMG"===d.nodeName&&c.hasClass(d,"wp-gallery")&&(b.name="gallery")}),a.on("BeforeSetContent",function(a){a.content=b(a.content)}),a.on("PostProcess",function(a){a.get&&(a.content=c(a.content))}),{_do_gallery:b,_get_gallery:c}});
 
 No newline at end of file
 
tinymce.PluginManager.add("wpgallery",function(a){function b(a){return a.replace(/\[gallery([^\]]*)\]/g,function(a){var b=window.encodeURIComponent(a);return'<img src="'+tinymce.Env.transparentSrc+'" class="wp-media wp-gallery mceItem" data-wp-media="'+b+'" data-mce-resize="false" data-mce-placeholder="1" />'})}function c(a){return a.replace(/\[(audio|video)[^\]]*\][\s\S]*?\[\/\1\]/g,function(a,b){var c=window.encodeURIComponent(a),d="wp-media mceItem wp-"+b;return'<img src="'+tinymce.Env.transparentSrc+'" class="'+d+'" data-wp-media="'+c+'" 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&&wp.media.gallery&&(a.dom.hasClass(b,"wp-gallery")?(c=wp.media.gallery,e=window.decodeURIComponent(a.dom.getAttrib(b,"data-wp-media")),d=c.edit(e),d.state("gallery-edit").on("update",function(d){var e=c.shortcode(d).string();a.dom.setAttrib(b,"data-wp-media",window.encodeURIComponent(e))})):window.console&&console.log("Edit AV shortcode "+window.decodeURIComponent(a.dom.getAttrib(b,"data-wp-media"))))}a.addCommand("WP_Gallery",function(){e(a.selection.getNode())}),a.on("mouseup",function(b){var c=a.dom,d=b.target;"IMG"===d.nodeName&&c.getAttrib(d,"data-wp-media")?2!==b.button&&(c.hasClass(d,"wp-media-selected")?(e(d),c.removeClass(d,"wp-media-selected")):c.addClass(d,"wp-media-selected")):c.removeClass(c.select("img.wp-media-selected"),"wp-media-selected")}),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-video")?b.name="video":c.hasClass(d,"wp-audio")&&(b.name="audio"))}),a.on("BeforeSetContent",function(a){a.content=b(a.content),a.content=c(a.content)}),a.on("PostProcess",function(a){a.get&&(a.content=d(a.content))})});
 
 No newline at end of file

wp-includes/js/tinymce/skins/wordpress/images/audio.png

0 → 100644
+944 B
Loading image diff...

wp-includes/js/tinymce/skins/wordpress/images/video.png

0 → 100644
+887 B
Loading image diff...

wp-includes/js/tinymce/skins/wordpress/wp-content.css

+29 −13
Original line number Diff line number Diff line
@@ -108,15 +108,41 @@ img::selection { 
    border-top: 3px dotted #bbb;

}



.mce-content-body img.wp-gallery {

	border: 1px dashed #888;

	background: #f2f2f2 url("images/gallery.png") no-repeat scroll center center;

/* Gallery, audio, vudeo placeholders */

.mce-content-body img.wp-media {

	border: 1px solid #aaa;

	background-color: #f2f2f2;

	background-repeat: no-repeat;

	background-position: center center;

	width: 99%;

	height: 250px;

	outline: 0;

	cursor: pointer;

}



.mce-content-body img.wp-media:hover {

	background-color: #ededed;

	border-color: #777;

}



.mce-content-body img.wp-media.wp-media-selected {

	background-color: #d8d8d8;

	border-color: #777;

}



.mce-content-body img.wp-media.wp-gallery {

	background-image: url("images/gallery.png");

}



.mce-content-body img.wp-media.wp-video {

	background-image: url("images/video.png");

}



.mce-content-body img.wp-media.wp-audio {

	height: 70px;

	background-image: url("images/audio.png");

}



#wp-image-toolbar {

	position: absolute;

}
@@ -157,16 +183,6 @@ img::selection { 
	outline: 1px solid #777;

}



.mce-content-body img.wp-gallery:hover {

	background-color: #ededed;

	border-style: solid;

}



.mce-content-body img.wp-gallery.wp-gallery-selected {

	background-color: #d8d8d8;

	border-style: solid;

}



img.wp-oembed {

	border: 1px dashed #888;

	background: #f7f5f2 url("images/embedded.png") no-repeat scroll center center;