balmet.com

Unnamed repository; edit this file 'description' to name the repository.
Log | Files | Refs

plugin.js (3183B)


      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" 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 });