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

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