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
   8         function fullscreenOn() {
   9                 settings.wp_fullscreen = true;
  10                 editor.dom.addClass( editor.getDoc().documentElement, 'wp-fullscreen' );
  11                 // Start auto-resizing
  12                 editor.execCommand( 'wpAutoResizeOn' );
  13         }
  14
  15         function fullscreenOff() {
  16                 settings.wp_fullscreen = false;
  17                 editor.dom.removeClass( editor.getDoc().documentElement, 'wp-fullscreen' );
  18                 // Stop auto-resizing
  19                 editor.execCommand( 'wpAutoResizeOff' );
  20         }
  21
  22         // For use from outside the editor.
  23         editor.addCommand( 'wpFullScreenOn', fullscreenOn );
  24         editor.addCommand( 'wpFullScreenOff', fullscreenOff );
  25
  26         function getExtAPI() {
  27                 return ( typeof wp !== 'undefined' && wp.editor && wp.editor.fullscreen );
  28         }
  29
  30         // Toggle DFW mode. For use from inside the editor.
  31         function toggleFullscreen() {
  32                 var fullscreen = getExtAPI();
  33
  34                 if ( fullscreen ) {
  35                         if ( editor.getParam('wp_fullscreen') ) {
  36                                 fullscreen.off();
  37                         } else {
  38                                 fullscreen.on();
  39                         }
  40                 }
  41         }
  42
  43         editor.addCommand( 'wpFullScreen', toggleFullscreen );
  44
  45         editor.on( 'keydown', function( event ) {
  46                 var fullscreen;
  47
  48                 // Turn fullscreen off when Esc is pressed.
  49                 if ( event.keyCode === 27 && ( fullscreen = getExtAPI() ) && fullscreen.settings.visible ) {
  50                         fullscreen.off();
  51                 }
  52         });
  53
  54         editor.on( 'init', function() {
  55                 // Set the editor when initializing from whitin DFW
  56                 if ( editor.getParam('wp_fullscreen') ) {
  57                         fullscreenOn();
  58                 }
  59         });
  60
  61         // Register buttons
  62         editor.addButton( 'wp_fullscreen', {
  63                 tooltip: 'Distraction-free writing mode',
  64                 shortcut: 'Alt+Shift+W',
  65                 onclick: toggleFullscreen,
  66                 classes: 'wp-fullscreen btn widget' // This overwrites all classes on the container!
  67         });
  68
  69         editor.addMenuItem( 'wp_fullscreen', {
  70                 text: 'Distraction-free writing mode',
  71                 icon: 'wp_fullscreen',
  72                 shortcut: 'Alt+Shift+W',
  73                 context: 'view',
  74                 onclick: toggleFullscreen
  75         });
  76 });