ru-se.com

Unnamed repository; edit this file 'description' to name the repository.
Log | Files | Refs

plugin.js (5988B)


      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 	if ( editor.settings.inline || tinymce.Env.iOS ) {
     29 		return;
     30 	}
     31 
     32 	function isFullscreen() {
     33 		return editor.plugins.fullscreen && editor.plugins.fullscreen.isFullscreen();
     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 });