[Summary view] [Print] [Text view]

   1  /* global tinymce */
   2  (function() {
   3      tinymce.create('tinymce.plugins.wpGallery', {
   4  
   5          init : function(ed, url) {
   6              var t = this;
   7  
   8              t.url = url;
   9              t.editor = ed;
  10              t._createButtons();
  11  
  12              // Register the command so that it can be invoked by using tinyMCE.activeEditor.execCommand('...');
  13              ed.addCommand('WP_Gallery', function() {
  14                  if ( tinymce.isIE )
  15                      ed.selection.moveToBookmark( ed.wpGalleryBookmark );
  16  
  17                  var el = ed.selection.getNode(),
  18                      gallery = wp.media.gallery,
  19                      frame;
  20  
  21                  // Check if the `wp.media.gallery` API exists.
  22                  if ( typeof wp === 'undefined' || ! wp.media || ! wp.media.gallery )
  23                      return;
  24  
  25                  // Make sure we've selected a gallery node.
  26                  if ( el.nodeName != 'IMG' || ed.dom.getAttrib(el, 'class').indexOf('wp-gallery') == -1 )
  27                      return;
  28  
  29                  frame = gallery.edit( '[' + ed.dom.getAttrib( el, 'title' ) + ']' );
  30  
  31                  frame.state('gallery-edit').on( 'update', function( selection ) {
  32                      var shortcode = gallery.shortcode( selection ).string().slice( 1, -1 );
  33                      ed.dom.setAttrib( el, 'title', shortcode );
  34                  });
  35              });
  36  
  37              ed.onInit.add(function(ed) {
  38                  // iOS6 doesn't show the buttons properly on click, show them on 'touchstart'
  39                  if ( 'ontouchstart' in window ) {
  40                      ed.dom.events.add(ed.getBody(), 'touchstart', function(e){
  41                          var target = e.target;
  42  
  43                          if ( target.nodeName == 'IMG' && ed.dom.hasClass(target, 'wp-gallery') ) {
  44                              ed.selection.select(target);
  45                              ed.dom.events.cancel(e);
  46                              ed.plugins.wordpress._hideButtons();
  47                              ed.plugins.wordpress._showButtons(target, 'wp_gallerybtns');
  48                          }
  49                      });
  50                  }
  51              });
  52  
  53              ed.onMouseDown.add(function(ed, e) {
  54                  if ( e.target.nodeName == 'IMG' && ed.dom.hasClass(e.target, 'wp-gallery') ) {
  55                      ed.plugins.wordpress._hideButtons();
  56                      ed.plugins.wordpress._showButtons(e.target, 'wp_gallerybtns');
  57                  }
  58              });
  59  
  60              ed.onBeforeSetContent.add(function(ed, o) {
  61                  o.content = t._do_gallery(o.content);
  62              });
  63  
  64              ed.onPostProcess.add(function(ed, o) {
  65                  if (o.get)
  66                      o.content = t._get_gallery(o.content);
  67              });
  68          },
  69  
  70          _do_gallery : function(co) {
  71              return co.replace(/\[gallery([^\]]*)\]/g, function(a,b){
  72                  return '<img src="'+tinymce.baseURL+'/plugins/wpgallery/img/t.gif" class="wp-gallery mceItem" title="gallery'+tinymce.DOM.encode(b)+'" />';
  73              });
  74          },
  75  
  76          _get_gallery : function(co) {
  77  
  78  			function getAttr(s, n) {
  79                  n = new RegExp(n + '=\"([^\"]+)\"', 'g').exec(s);
  80                  return n ? tinymce.DOM.decode(n[1]) : '';
  81              }
  82  
  83              return co.replace(/(?:<p[^>]*>)*(<img[^>]+>)(?:<\/p>)*/g, function(a,im) {
  84                  var cls = getAttr(im, 'class');
  85  
  86                  if ( cls.indexOf('wp-gallery') != -1 )
  87                      return '<p>['+tinymce.trim(getAttr(im, 'title'))+']</p>';
  88  
  89                  return a;
  90              });
  91          },
  92  
  93          _createButtons : function() {
  94              var t = this, ed = tinymce.activeEditor, DOM = tinymce.DOM, editButton, dellButton, isRetina;
  95  
  96              if ( DOM.get('wp_gallerybtns') )
  97                  return;
  98  
  99              isRetina = ( window.devicePixelRatio && window.devicePixelRatio > 1 ) || // WebKit, Opera
 100                  ( window.matchMedia && window.matchMedia('(min-resolution:130dpi)').matches ); // Firefox, IE10, Opera
 101  
 102              DOM.add(document.body, 'div', {
 103                  id : 'wp_gallerybtns',
 104                  style : 'display:none;'
 105              });
 106  
 107              editButton = DOM.add('wp_gallerybtns', 'img', {
 108                  src : isRetina ? t.url+'/img/edit-2x.png' : t.url+'/img/edit.png',
 109                  id : 'wp_editgallery',
 110                  width : '24',
 111                  height : '24',
 112                  title : ed.getLang('wordpress.editgallery')
 113              });
 114  
 115              tinymce.dom.Event.add( editButton, 'mousedown', function() {
 116                  var ed = tinymce.activeEditor;
 117                  ed.wpGalleryBookmark = ed.selection.getBookmark('simple');
 118                  ed.execCommand('WP_Gallery');
 119                  ed.plugins.wordpress._hideButtons();
 120              });
 121  
 122              dellButton = DOM.add('wp_gallerybtns', 'img', {
 123                  src : isRetina ? t.url+'/img/delete-2x.png' : t.url+'/img/delete.png',
 124                  id : 'wp_delgallery',
 125                  width : '24',
 126                  height : '24',
 127                  title : ed.getLang('wordpress.delgallery')
 128              });
 129  
 130              tinymce.dom.Event.add(dellButton, 'mousedown', function(e) {
 131                  var ed = tinymce.activeEditor, el = ed.selection.getNode();
 132  
 133                  if ( el.nodeName == 'IMG' && ed.dom.hasClass(el, 'wp-gallery') ) {
 134                      ed.dom.remove(el);
 135  
 136                      ed.execCommand('mceRepaint');
 137                      ed.dom.events.cancel(e);
 138                  }
 139  
 140                  ed.plugins.wordpress._hideButtons();
 141              });
 142          },
 143  
 144          getInfo : function() {
 145              return {
 146                  longname : 'Gallery Settings',
 147                  author : 'WordPress',
 148                  authorurl : 'http://wordpress.org',
 149                  infourl : '',
 150                  version : '1.0'
 151              };
 152          }
 153      });
 154  
 155      tinymce.PluginManager.add('wpgallery', tinymce.plugins.wpGallery);
 156  })();