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

   1 /**
   2  * plugin.js
   3  *
   4  * Copyright, Moxiecode Systems AB
   5  * Released under LGPL License.
   6  *
   7  * License: http://www.tinymce.com/license
   8  * Contributing: http://www.tinymce.com/contributing
   9  */
  10
  11 // Forked for WordPress so it can be turned on/off after loading.
  12
  13 /*global tinymce:true */
  14 /*eslint no-nested-ternary:0 */
  15
  16 /**
  17  * Auto Resize
  18  *
  19  * This plugin automatically resizes the content area to fit its content height.
  20  * It will retain a minimum height, which is the height of the content area when
  21  * it's initialized.
  22  */
  23 tinymce.PluginManager.add( 'wpautoresize', function( editor ) {
  24         var settings = editor.settings,
  25                 oldSize = 300,
  26                 isActive = false;
  27
  28         function isFullscreen() {
  29                 return editor.plugins.fullscreen && editor.plugins.fullscreen.isFullscreen();
  30         }
  31
  32         if ( editor.settings.inline ) {
  33                 return;
  34         }
  35
  36         function getInt( n ) {
  37                 return parseInt( n, 10 ) || 0;
  38         }
  39
  40         /**
  41          * This method gets executed each time the editor needs to resize.
  42          */
  43         function resize( e ) {
  44                 var deltaSize, doc, body, docElm, DOM = tinymce.DOM, resizeHeight, myHeight,
  45                         marginTop, marginBottom, paddingTop, paddingBottom, borderTop, borderBottom;
  46
  47                 if ( ! isActive ) {
  48                         return;
  49                 }
  50
  51                 doc = editor.getDoc();
  52                 if ( ! doc ) {
  53                         return;
  54                 }
  55
  56                 e = e || {};
  57                 body = doc.body;
  58                 docElm = doc.documentElement;
  59                 resizeHeight = settings.autoresize_min_height;
  60
  61                 if ( ! body || ( e && e.type === 'setcontent' && e.initial ) || isFullscreen() ) {
  62                         if ( body && docElm ) {
  63                                 body.style.overflowY = 'auto';
  64                                 docElm.style.overflowY = 'auto'; // Old IE
  65                         }
  66
  67                         return;
  68                 }
  69
  70                 // Calculate outer height of the body element using CSS styles
  71                 marginTop = editor.dom.getStyle( body, 'margin-top', true );
  72                 marginBottom = editor.dom.getStyle( body, 'margin-bottom', true );
  73                 paddingTop = editor.dom.getStyle( body, 'padding-top', true );
  74                 paddingBottom = editor.dom.getStyle( body, 'padding-bottom', true );
  75                 borderTop = editor.dom.getStyle( body, 'border-top-width', true );
  76                 borderBottom = editor.dom.getStyle( body, 'border-bottom-width', true );
  77                 myHeight = body.offsetHeight + getInt( marginTop ) + getInt( marginBottom ) +
  78                         getInt( paddingTop ) + getInt( paddingBottom ) +
  79                         getInt( borderTop ) + getInt( borderBottom );
  80
  81                 // IE < 11, other?
  82                 if ( myHeight && myHeight < docElm.offsetHeight ) {
  83                         myHeight = docElm.offsetHeight;
  84                 }
  85
  86                 // Make sure we have a valid height
  87                 if ( isNaN( myHeight ) || myHeight <= 0 ) {
  88                         // Get height differently depending on the browser used
  89                         myHeight = tinymce.Env.ie ? body.scrollHeight : ( tinymce.Env.webkit && body.clientHeight === 0 ? 0 : body.offsetHeight );
  90                 }
  91
  92                 // Don't make it smaller than the minimum height
  93                 if ( myHeight > settings.autoresize_min_height ) {
  94                         resizeHeight = myHeight;
  95                 }
  96
  97                 // If a maximum height has been defined don't exceed this height
  98                 if ( settings.autoresize_max_height && myHeight > settings.autoresize_max_height ) {
  99                         resizeHeight = settings.autoresize_max_height;
 100                         body.style.overflowY = 'auto';
 101                         docElm.style.overflowY = 'auto'; // Old IE
 102                 } else {
 103                         body.style.overflowY = 'hidden';
 104                         docElm.style.overflowY = 'hidden'; // Old IE
 105                         body.scrollTop = 0;
 106                 }
 107
 108                 // Resize content element
 109                 if (resizeHeight !== oldSize) {
 110                         deltaSize = resizeHeight - oldSize;
 111                         DOM.setStyle( editor.iframeElement, 'height', resizeHeight + 'px' );
 112                         oldSize = resizeHeight;
 113
 114                         // WebKit doesn't decrease the size of the body element until the iframe gets resized
 115                         // So we need to continue to resize the iframe down until the size gets fixed
 116                         if ( tinymce.isWebKit && deltaSize < 0 ) {
 117                                 resize( e );
 118                         }
 119
 120                         editor.fire( 'wp-autoresize', { height: resizeHeight, deltaHeight: e.type === 'nodechange' ? deltaSize : null } );
 121                 }
 122         }
 123
 124         /**
 125          * Calls the resize x times in 100ms intervals. We can't wait for load events since
 126          * the CSS files might load async.
 127          */
 128         function wait( times, interval, callback ) {
 129                 setTimeout( function() {
 130                         resize();
 131
 132                         if ( times-- ) {
 133                                 wait( times, interval, callback );
 134                         } else if ( callback ) {
 135                                 callback();
 136                         }
 137                 }, interval );
 138         }
 139
 140         // Define minimum height
 141         settings.autoresize_min_height = parseInt(editor.getParam( 'autoresize_min_height', editor.getElement().offsetHeight), 10 );
 142
 143         // Define maximum height
 144         settings.autoresize_max_height = parseInt(editor.getParam( 'autoresize_max_height', 0), 10 );
 145
 146         function on() {
 147                 if ( ! editor.dom.hasClass( editor.getBody(), 'wp-autoresize' ) ) {
 148                         isActive = true;
 149                         editor.dom.addClass( editor.getBody(), 'wp-autoresize' );
 150                         // Add appropriate listeners for resizing the content area
 151                         editor.on( 'nodechange setcontent keyup FullscreenStateChanged', resize );
 152                         resize();
 153                 }
 154         }
 155
 156         function off() {
 157                 var doc;
 158
 159                 // Don't turn off if the setting is 'on'
 160                 if ( ! settings.wp_autoresize_on ) {
 161                         isActive = false;
 162                         doc = editor.getDoc();
 163                         editor.dom.removeClass( editor.getBody(), 'wp-autoresize' );
 164                         editor.off( 'nodechange setcontent keyup FullscreenStateChanged', resize );
 165                         doc.body.style.overflowY = 'auto';
 166                         doc.documentElement.style.overflowY = 'auto'; // Old IE
 167                         oldSize = 0;
 168                 }
 169         }
 170
 171         if ( settings.wp_autoresize_on ) {
 172                 // Turn resizing on when the editor loads
 173                 isActive = true;
 174
 175                 editor.on( 'init', function() {
 176                         editor.dom.addClass( editor.getBody(), 'wp-autoresize' );
 177                 });
 178
 179                 editor.on( 'nodechange keyup FullscreenStateChanged', resize );
 180
 181                 editor.on( 'setcontent', function() {
 182                         wait( 3, 100 );
 183                 });
 184
 185                 if ( editor.getParam( 'autoresize_on_init', true ) ) {
 186                         editor.on( 'init', function() {
 187                                 // Hit it 10 times in 200 ms intervals
 188                                 wait( 10, 200, function() {
 189                                         // Hit it 5 times in 1 sec intervals
 190                                         wait( 5, 1000 );
 191                                 });
 192                         });
 193                 }
 194         }
 195
 196         // Reset the stored size
 197         editor.on( 'show', function() {
 198                 oldSize = 0;
 199         });
 200
 201         // Register the command
 202         editor.addCommand( 'wpAutoResize', resize );
 203
 204         // On/off
 205         editor.addCommand( 'wpAutoResizeOn', on );
 206         editor.addCommand( 'wpAutoResizeOff', off );
 207 });