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 */
23tinymce.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});
208