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

   1 /* global tinymce */
   2 /**
   3  * WP Fullscreen (Distraction Free Writing) TinyMCE plugin
   4  */
   5 tinymce.PluginManager.add( 'wpfullscreen', function( editor ) {
   6         var settings = editor.settings,
   7                 oldSize = 0;
   8
   9         function resize( e ) {
  10                 var deltaSize, myHeight,
  11                         d = editor.getDoc(),
  12                         body = d.body,
  13                         DOM = tinymce.DOM,
  14                         resizeHeight = 250;
  15
  16                 if ( ( e && e.type === 'setcontent' && e.initial ) || editor.settings.inline ) {
  17                         return;
  18                 }
  19
  20                 // Get height differently depending on the browser used
  21                 myHeight = tinymce.Env.ie ? body.scrollHeight : ( tinymce.Env.webkit && body.clientHeight === 0 ? 0 : body.offsetHeight );
  22
  23                 // Don't make it smaller than 250px
  24                 if ( myHeight > 250 ) {
  25                         resizeHeight = myHeight;
  26                 }
  27
  28                 body.scrollTop = 0;
  29
  30                 // Resize content element
  31                 if ( resizeHeight !== oldSize ) {
  32                         deltaSize = resizeHeight - oldSize;
  33                         DOM.setStyle( DOM.get( editor.id + '_ifr' ), 'height', resizeHeight + 'px' );
  34                         oldSize = resizeHeight;
  35
  36                         // WebKit doesn't decrease the size of the body element until the iframe gets resized
  37                         // So we need to continue to resize the iframe down until the size gets fixed
  38                         if ( tinymce.isWebKit && deltaSize < 0 ) {
  39                                 resize( e );
  40                         }
  41                 }
  42         }
  43
  44         // Register the command
  45         editor.addCommand( 'wpAutoResize', resize );
  46
  47         function fullscreenOn() {
  48                 settings.wp_fullscreen = true;
  49                 editor.dom.addClass( editor.getDoc().documentElement, 'wp-fullscreen' );
  50                 // Add listeners for auto-resizing
  51                 editor.on( 'change setcontent paste keyup', resize );
  52         }
  53
  54         function fullscreenOff() {
  55                 settings.wp_fullscreen = false;
  56                 editor.dom.removeClass( editor.getDoc().documentElement, 'wp-fullscreen' );
  57                 // Remove listeners for auto-resizing
  58                 editor.off( 'change setcontent paste keyup', resize );
  59                 oldSize = 0;
  60         }
  61
  62         // For use from outside the editor.
  63         editor.addCommand( 'wpFullScreenOn', fullscreenOn );
  64         editor.addCommand( 'wpFullScreenOff', fullscreenOff );
  65
  66         function toggleFullscreen() {
  67                 // Toggle DFW mode. For use from inside the editor.
  68                 if ( typeof wp === 'undefined' || ! wp.editor || ! wp.editor.fullscreen ) {
  69                         return;
  70                 }
  71
  72                 if ( editor.getParam('wp_fullscreen') ) {
  73                         wp.editor.fullscreen.off();
  74                 } else {
  75                         wp.editor.fullscreen.on();
  76                 }
  77         }
  78
  79         editor.addCommand( 'wpFullScreen', toggleFullscreen );
  80
  81         editor.on( 'init', function() {
  82                 // Set the editor when initializing from whitin DFW
  83                 if ( editor.getParam('wp_fullscreen') ) {
  84                         fullscreenOn();
  85                 }
  86
  87                 editor.addShortcut( 'alt+shift+w', '', 'wpFullScreen' );
  88         });
  89
  90         // Register buttons
  91         editor.addButton( 'wp_fullscreen', {
  92                 tooltip: 'Distraction Free Writing',
  93                 shortcut: 'Alt+Shift+W',
  94                 onclick: toggleFullscreen,
  95                 classes: 'wp-fullscreen btn widget' // This overwrites all classes on the container!
  96         });
  97
  98         editor.addMenuItem( 'wp_fullscreen', {
  99                 text: 'Distraction Free Writing',
 100                 icon: 'wp_fullscreen',
 101                 shortcut: 'Alt+Shift+W',
 102                 context: 'view',
 103                 onclick: toggleFullscreen
 104         });
 105 });