home *** CD-ROM | disk | FTP | other *** search
/ HTML Examples / WP.iso / wordpress / wp-includes / js / tinymce / plugins / wpgallery / plugin.js next >
Encoding:
JavaScript  |  2015-11-07  |  3.1 KB  |  113 lines
  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. });
  113.