← Back to branch summary

~canonical-sysadmins/wordpress/4.7.2

« back to all changes in this revision

Viewing changes to wp-includes/js/tinymce/plugins/wpautoresize/plugin.js

  • Committer: Jacek Nykis
  • Date: 2015-01-05 16:17:05 UTC
  • Revision ID: jacek.nykis@canonical.com-20150105161705-w544l1h5mcg7u4w9
Initial commit

Show diffs side-by-side

added added

removed removed

Lines of Context:
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 } );
 
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
});