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( 'init', function( e ) {
  66         //      _createButtons()
  67
  68                 // iOS6 doesn't show the buttons properly on click, show them on 'touchstart'
  69                 if ( 'ontouchstart' in window ) {
  70                         editor.dom.events.bind( editor.getBody(), 'touchstart', function( e ) {
  71                                 var target = e.target;
  72
  73                                 if ( target.nodeName == 'IMG' && editor.dom.hasClass( target, 'wp-gallery' ) ) {
  74                                         editor.selection.select( target );
  75                                         editor.dom.events.cancel( e );
  76                                         editor.plugins.wordpress._hideButtons();
  77                                         editor.plugins.wordpress._showButtons( target, 'wp_gallerybtns' );
  78                                 }
  79                         });
  80                 }
  81         });
  82 */
  83         editor.on( 'mouseup', function( event ) {
  84                 var dom = editor.dom,
  85                         node = event.target;
  86
  87                 function unselect() {
  88                         dom.removeClass( dom.select( 'img.wp-media-selected' ), 'wp-media-selected' );
  89                 }
  90
  91                 if ( node.nodeName === 'IMG' && dom.getAttrib( node, 'data-wp-media' ) ) {
  92                         // Don't trigger on right-click
  93                         if ( event.button !== 2 ) {
  94                                 if ( dom.hasClass( node, 'wp-media-selected' ) ) {
  95                                         editMedia( node );
  96                                 } else {
  97                                         unselect();
  98                                         dom.addClass( node, 'wp-media-selected' );
  99                                 }
 100                         }
 101                 } else {
 102                         unselect();
 103                 }
 104         });
 105
 106         // Display gallery, audio or video instead of img in the element path
 107         editor.on( 'ResolveName', function( event ) {
 108                 var dom = editor.dom,
 109                         node = event.target;
 110
 111                 if ( node.nodeName === 'IMG' && dom.getAttrib( node, 'data-wp-media' ) ) {
 112                         if ( dom.hasClass( node, 'wp-gallery' ) ) {
 113                                 event.name = 'gallery';
 114                         }
 115                 }
 116         });
 117
 118         editor.on( 'BeforeSetContent', function( event ) {
 119                 // 'wpview' handles the gallery shortcode when present
 120                 if ( ! editor.plugins.wpview ) {
 121                         event.content = replaceGalleryShortcodes( event.content );
 122                 }
 123         });
 124
 125         editor.on( 'PostProcess', function( event ) {
 126                 if ( event.get ) {
 127                         event.content = restoreMediaShortcodes( event.content );
 128                 }
 129         });
 130 });