wp/wp-includes/js/tinymce/plugins/wpautoresize/plugin.js
changeset 16 a86126ab1dd4
parent 5 5e2f62d02dcd
equal deleted inserted replaced
15:3d4e9c994f10 16:a86126ab1dd4
    59 		resizeHeight = settings.autoresize_min_height;
    59 		resizeHeight = settings.autoresize_min_height;
    60 
    60 
    61 		if ( ! body || ( e && e.type === 'setcontent' && e.initial ) || isFullscreen() ) {
    61 		if ( ! body || ( e && e.type === 'setcontent' && e.initial ) || isFullscreen() ) {
    62 			if ( body && docElm ) {
    62 			if ( body && docElm ) {
    63 				body.style.overflowY = 'auto';
    63 				body.style.overflowY = 'auto';
    64 				docElm.style.overflowY = 'auto'; // Old IE
    64 				docElm.style.overflowY = 'auto'; // Old IE.
    65 			}
    65 			}
    66 
    66 
    67 			return;
    67 			return;
    68 		}
    68 		}
    69 
    69 
    70 		// Calculate outer height of the body element using CSS styles
    70 		// Calculate outer height of the body element using CSS styles.
    71 		marginTop = editor.dom.getStyle( body, 'margin-top', true );
    71 		marginTop = editor.dom.getStyle( body, 'margin-top', true );
    72 		marginBottom = editor.dom.getStyle( body, 'margin-bottom', true );
    72 		marginBottom = editor.dom.getStyle( body, 'margin-bottom', true );
    73 		paddingTop = editor.dom.getStyle( body, 'padding-top', true );
    73 		paddingTop = editor.dom.getStyle( body, 'padding-top', true );
    74 		paddingBottom = editor.dom.getStyle( body, 'padding-bottom', true );
    74 		paddingBottom = editor.dom.getStyle( body, 'padding-bottom', true );
    75 		borderTop = editor.dom.getStyle( body, 'border-top-width', true );
    75 		borderTop = editor.dom.getStyle( body, 'border-top-width', true );
    81 		// IE < 11, other?
    81 		// IE < 11, other?
    82 		if ( myHeight && myHeight < docElm.offsetHeight ) {
    82 		if ( myHeight && myHeight < docElm.offsetHeight ) {
    83 			myHeight = docElm.offsetHeight;
    83 			myHeight = docElm.offsetHeight;
    84 		}
    84 		}
    85 
    85 
    86 		// Make sure we have a valid height
    86 		// Make sure we have a valid height.
    87 		if ( isNaN( myHeight ) || myHeight <= 0 ) {
    87 		if ( isNaN( myHeight ) || myHeight <= 0 ) {
    88 			// Get height differently depending on the browser used
    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 );
    89 			myHeight = tinymce.Env.ie ? body.scrollHeight : ( tinymce.Env.webkit && body.clientHeight === 0 ? 0 : body.offsetHeight );
    90 		}
    90 		}
    91 
    91 
    92 		// Don't make it smaller than the minimum height
    92 		// Don't make it smaller than the minimum height.
    93 		if ( myHeight > settings.autoresize_min_height ) {
    93 		if ( myHeight > settings.autoresize_min_height ) {
    94 			resizeHeight = myHeight;
    94 			resizeHeight = myHeight;
    95 		}
    95 		}
    96 
    96 
    97 		// If a maximum height has been defined don't exceed this height
    97 		// If a maximum height has been defined don't exceed this height.
    98 		if ( settings.autoresize_max_height && myHeight > settings.autoresize_max_height ) {
    98 		if ( settings.autoresize_max_height && myHeight > settings.autoresize_max_height ) {
    99 			resizeHeight = settings.autoresize_max_height;
    99 			resizeHeight = settings.autoresize_max_height;
   100 			body.style.overflowY = 'auto';
   100 			body.style.overflowY = 'auto';
   101 			docElm.style.overflowY = 'auto'; // Old IE
   101 			docElm.style.overflowY = 'auto'; // Old IE.
   102 		} else {
   102 		} else {
   103 			body.style.overflowY = 'hidden';
   103 			body.style.overflowY = 'hidden';
   104 			docElm.style.overflowY = 'hidden'; // Old IE
   104 			docElm.style.overflowY = 'hidden'; // Old IE.
   105 			body.scrollTop = 0;
   105 			body.scrollTop = 0;
   106 		}
   106 		}
   107 
   107 
   108 		// Resize content element
   108 		// Resize content element.
   109 		if (resizeHeight !== oldSize) {
   109 		if (resizeHeight !== oldSize) {
   110 			deltaSize = resizeHeight - oldSize;
   110 			deltaSize = resizeHeight - oldSize;
   111 			DOM.setStyle( editor.iframeElement, 'height', resizeHeight + 'px' );
   111 			DOM.setStyle( editor.iframeElement, 'height', resizeHeight + 'px' );
   112 			oldSize = resizeHeight;
   112 			oldSize = resizeHeight;
   113 
   113 
   114 			// WebKit doesn't decrease the size of the body element until the iframe gets resized
   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
   115 			// So we need to continue to resize the iframe down until the size gets fixed.
   116 			if ( tinymce.isWebKit && deltaSize < 0 ) {
   116 			if ( tinymce.isWebKit && deltaSize < 0 ) {
   117 				resize( e );
   117 				resize( e );
   118 			}
   118 			}
   119 
   119 
   120 			editor.fire( 'wp-autoresize', { height: resizeHeight, deltaHeight: e.type === 'nodechange' ? deltaSize : null } );
   120 			editor.fire( 'wp-autoresize', { height: resizeHeight, deltaHeight: e.type === 'nodechange' ? deltaSize : null } );
   135 				callback();
   135 				callback();
   136 			}
   136 			}
   137 		}, interval );
   137 		}, interval );
   138 	}
   138 	}
   139 
   139 
   140 	// Define minimum height
   140 	// Define minimum height.
   141 	settings.autoresize_min_height = parseInt(editor.getParam( 'autoresize_min_height', editor.getElement().offsetHeight), 10 );
   141 	settings.autoresize_min_height = parseInt(editor.getParam( 'autoresize_min_height', editor.getElement().offsetHeight), 10 );
   142 
   142 
   143 	// Define maximum height
   143 	// Define maximum height.
   144 	settings.autoresize_max_height = parseInt(editor.getParam( 'autoresize_max_height', 0), 10 );
   144 	settings.autoresize_max_height = parseInt(editor.getParam( 'autoresize_max_height', 0), 10 );
   145 
   145 
   146 	function on() {
   146 	function on() {
   147 		if ( ! editor.dom.hasClass( editor.getBody(), 'wp-autoresize' ) ) {
   147 		if ( ! editor.dom.hasClass( editor.getBody(), 'wp-autoresize' ) ) {
   148 			isActive = true;
   148 			isActive = true;
   149 			editor.dom.addClass( editor.getBody(), 'wp-autoresize' );
   149 			editor.dom.addClass( editor.getBody(), 'wp-autoresize' );
   150 			// Add appropriate listeners for resizing the content area
   150 			// Add appropriate listeners for resizing the content area.
   151 			editor.on( 'nodechange setcontent keyup FullscreenStateChanged', resize );
   151 			editor.on( 'nodechange setcontent keyup FullscreenStateChanged', resize );
   152 			resize();
   152 			resize();
   153 		}
   153 		}
   154 	}
   154 	}
   155 
   155 
   156 	function off() {
   156 	function off() {
   157 		var doc;
   157 		var doc;
   158 
   158 
   159 		// Don't turn off if the setting is 'on'
   159 		// Don't turn off if the setting is 'on'.
   160 		if ( ! settings.wp_autoresize_on ) {
   160 		if ( ! settings.wp_autoresize_on ) {
   161 			isActive = false;
   161 			isActive = false;
   162 			doc = editor.getDoc();
   162 			doc = editor.getDoc();
   163 			editor.dom.removeClass( editor.getBody(), 'wp-autoresize' );
   163 			editor.dom.removeClass( editor.getBody(), 'wp-autoresize' );
   164 			editor.off( 'nodechange setcontent keyup FullscreenStateChanged', resize );
   164 			editor.off( 'nodechange setcontent keyup FullscreenStateChanged', resize );
   165 			doc.body.style.overflowY = 'auto';
   165 			doc.body.style.overflowY = 'auto';
   166 			doc.documentElement.style.overflowY = 'auto'; // Old IE
   166 			doc.documentElement.style.overflowY = 'auto'; // Old IE.
   167 			oldSize = 0;
   167 			oldSize = 0;
   168 		}
   168 		}
   169 	}
   169 	}
   170 
   170 
   171 	if ( settings.wp_autoresize_on ) {
   171 	if ( settings.wp_autoresize_on ) {
   172 		// Turn resizing on when the editor loads
   172 		// Turn resizing on when the editor loads.
   173 		isActive = true;
   173 		isActive = true;
   174 
   174 
   175 		editor.on( 'init', function() {
   175 		editor.on( 'init', function() {
   176 			editor.dom.addClass( editor.getBody(), 'wp-autoresize' );
   176 			editor.dom.addClass( editor.getBody(), 'wp-autoresize' );
   177 		});
   177 		});
   182 			wait( 3, 100 );
   182 			wait( 3, 100 );
   183 		});
   183 		});
   184 
   184 
   185 		if ( editor.getParam( 'autoresize_on_init', true ) ) {
   185 		if ( editor.getParam( 'autoresize_on_init', true ) ) {
   186 			editor.on( 'init', function() {
   186 			editor.on( 'init', function() {
   187 				// Hit it 10 times in 200 ms intervals
   187 				// Hit it 10 times in 200 ms intervals.
   188 				wait( 10, 200, function() {
   188 				wait( 10, 200, function() {
   189 					// Hit it 5 times in 1 sec intervals
   189 					// Hit it 5 times in 1 sec intervals.
   190 					wait( 5, 1000 );
   190 					wait( 5, 1000 );
   191 				});
   191 				});
   192 			});
   192 			});
   193 		}
   193 		}
   194 	}
   194 	}
   195 
   195 
   196 	// Reset the stored size
   196 	// Reset the stored size.
   197 	editor.on( 'show', function() {
   197 	editor.on( 'show', function() {
   198 		oldSize = 0;
   198 		oldSize = 0;
   199 	});
   199 	});
   200 
   200 
   201 	// Register the command
   201 	// Register the command.
   202 	editor.addCommand( 'wpAutoResize', resize );
   202 	editor.addCommand( 'wpAutoResize', resize );
   203 
   203 
   204 	// On/off
   204 	// On/off.
   205 	editor.addCommand( 'wpAutoResizeOn', on );
   205 	editor.addCommand( 'wpAutoResizeOn', on );
   206 	editor.addCommand( 'wpAutoResizeOff', off );
   206 	editor.addCommand( 'wpAutoResizeOff', off );
   207 });
   207 });