|
1 ( function( window, $, undefined ) { |
|
2 'use strict'; |
|
3 |
|
4 var $window = $( window ), |
|
5 $document = $( document ), |
|
6 $adminBar = $( '#wpadminbar' ), |
|
7 $footer = $( '#wpfooter' ); |
|
8 |
|
9 /* Autoresize editor. */ |
|
10 $( function() { |
|
11 var $wrap = $( '#postdivrich' ), |
|
12 $contentWrap = $( '#wp-content-wrap' ), |
|
13 $tools = $( '#wp-content-editor-tools' ), |
|
14 $visualTop = $(), |
|
15 $visualEditor = $(), |
|
16 $textTop = $( '#ed_toolbar' ), |
|
17 $textEditor = $( '#content' ), |
|
18 $textEditorClone = $( '<div id="content-textarea-clone" class="wp-exclude-emoji"></div>' ), |
|
19 $bottom = $( '#post-status-info' ), |
|
20 $menuBar = $(), |
|
21 $statusBar = $(), |
|
22 $sideSortables = $( '#side-sortables' ), |
|
23 $postboxContainer = $( '#postbox-container-1' ), |
|
24 $postBody = $('#post-body'), |
|
25 fullscreen = window.wp.editor && window.wp.editor.fullscreen, |
|
26 mceEditor, |
|
27 mceBind = function(){}, |
|
28 mceUnbind = function(){}, |
|
29 fixedTop = false, |
|
30 fixedBottom = false, |
|
31 fixedSideTop = false, |
|
32 fixedSideBottom = false, |
|
33 scrollTimer, |
|
34 lastScrollPosition = 0, |
|
35 pageYOffsetAtTop = 130, |
|
36 pinnedToolsTop = 56, |
|
37 sidebarBottom = 20, |
|
38 autoresizeMinHeight = 300, |
|
39 initialMode = $contentWrap.hasClass( 'tmce-active' ) ? 'tinymce' : 'html', |
|
40 advanced = !! parseInt( window.getUserSetting( 'hidetb' ), 10 ), |
|
41 // These are corrected when adjust() runs, except on scrolling if already set. |
|
42 heights = { |
|
43 windowHeight: 0, |
|
44 windowWidth: 0, |
|
45 adminBarHeight: 0, |
|
46 toolsHeight: 0, |
|
47 menuBarHeight: 0, |
|
48 visualTopHeight: 0, |
|
49 textTopHeight: 0, |
|
50 bottomHeight: 0, |
|
51 statusBarHeight: 0, |
|
52 sideSortablesHeight: 0 |
|
53 }; |
|
54 |
|
55 $textEditorClone.insertAfter( $textEditor ); |
|
56 |
|
57 $textEditorClone.css( { |
|
58 'font-family': $textEditor.css( 'font-family' ), |
|
59 'font-size': $textEditor.css( 'font-size' ), |
|
60 'line-height': $textEditor.css( 'line-height' ), |
|
61 'white-space': 'pre-wrap', |
|
62 'word-wrap': 'break-word' |
|
63 } ); |
|
64 |
|
65 function getHeights() { |
|
66 var windowWidth = $window.width(); |
|
67 |
|
68 heights = { |
|
69 windowHeight: $window.height(), |
|
70 windowWidth: windowWidth, |
|
71 adminBarHeight: ( windowWidth > 600 ? $adminBar.outerHeight() : 0 ), |
|
72 toolsHeight: $tools.outerHeight() || 0, |
|
73 menuBarHeight: $menuBar.outerHeight() || 0, |
|
74 visualTopHeight: $visualTop.outerHeight() || 0, |
|
75 textTopHeight: $textTop.outerHeight() || 0, |
|
76 bottomHeight: $bottom.outerHeight() || 0, |
|
77 statusBarHeight: $statusBar.outerHeight() || 0, |
|
78 sideSortablesHeight: $sideSortables.height() || 0 |
|
79 }; |
|
80 |
|
81 // Adjust for hidden |
|
82 if ( heights.menuBarHeight < 3 ) { |
|
83 heights.menuBarHeight = 0; |
|
84 } |
|
85 } |
|
86 |
|
87 function textEditorKeyup( event ) { |
|
88 var VK = jQuery.ui.keyCode, |
|
89 key = event.keyCode, |
|
90 range = document.createRange(), |
|
91 selStart = $textEditor[0].selectionStart, |
|
92 selEnd = $textEditor[0].selectionEnd, |
|
93 textNode = $textEditorClone[0].firstChild, |
|
94 buffer = 10, |
|
95 offset, cursorTop, cursorBottom, editorTop, editorBottom; |
|
96 |
|
97 if ( selStart && selEnd && selStart !== selEnd ) { |
|
98 return; |
|
99 } |
|
100 |
|
101 // These are not TinyMCE ranges. |
|
102 try { |
|
103 range.setStart( textNode, selStart ); |
|
104 range.setEnd( textNode, selEnd + 1 ); |
|
105 } catch ( ex ) {} |
|
106 |
|
107 offset = range.getBoundingClientRect(); |
|
108 |
|
109 if ( ! offset.height ) { |
|
110 return; |
|
111 } |
|
112 |
|
113 cursorTop = offset.top - buffer; |
|
114 cursorBottom = cursorTop + offset.height + buffer; |
|
115 editorTop = heights.adminBarHeight + heights.toolsHeight + heights.textTopHeight; |
|
116 editorBottom = heights.windowHeight - heights.bottomHeight; |
|
117 |
|
118 if ( cursorTop < editorTop && ( key === VK.UP || key === VK.LEFT || key === VK.BACKSPACE ) ) { |
|
119 window.scrollTo( window.pageXOffset, cursorTop + window.pageYOffset - editorTop ); |
|
120 } else if ( cursorBottom > editorBottom ) { |
|
121 window.scrollTo( window.pageXOffset, cursorBottom + window.pageYOffset - editorBottom ); |
|
122 } |
|
123 } |
|
124 |
|
125 function textEditorResize() { |
|
126 if ( ( mceEditor && ! mceEditor.isHidden() ) || ( ! mceEditor && initialMode === 'tinymce' ) ) { |
|
127 return; |
|
128 } |
|
129 |
|
130 var textEditorHeight = $textEditor.height(), |
|
131 hiddenHeight; |
|
132 |
|
133 $textEditorClone.width( $textEditor.width() - 22 ); |
|
134 $textEditorClone.text( $textEditor.val() + ' ' ); |
|
135 |
|
136 hiddenHeight = $textEditorClone.height(); |
|
137 |
|
138 if ( hiddenHeight < autoresizeMinHeight ) { |
|
139 hiddenHeight = autoresizeMinHeight; |
|
140 } |
|
141 |
|
142 if ( hiddenHeight === textEditorHeight ) { |
|
143 return; |
|
144 } |
|
145 |
|
146 $textEditor.height( hiddenHeight ); |
|
147 |
|
148 adjust(); |
|
149 } |
|
150 |
|
151 // We need to wait for TinyMCE to initialize. |
|
152 $document.on( 'tinymce-editor-init.editor-expand', function( event, editor ) { |
|
153 var VK = window.tinymce.util.VK, |
|
154 hideFloatPanels = _.debounce( function() { |
|
155 ! $( '.mce-floatpanel:hover' ).length && window.tinymce.ui.FloatPanel.hideAll(); |
|
156 $( '.mce-tooltip' ).hide(); |
|
157 }, 1000, true ); |
|
158 |
|
159 // Make sure it's the main editor. |
|
160 if ( editor.id !== 'content' ) { |
|
161 return; |
|
162 } |
|
163 |
|
164 // Copy the editor instance. |
|
165 mceEditor = editor; |
|
166 |
|
167 // Set the minimum height to the initial viewport height. |
|
168 editor.settings.autoresize_min_height = autoresizeMinHeight; |
|
169 |
|
170 // Get the necessary UI elements. |
|
171 $visualTop = $contentWrap.find( '.mce-toolbar-grp' ); |
|
172 $visualEditor = $contentWrap.find( '.mce-edit-area' ); |
|
173 $statusBar = $contentWrap.find( '.mce-statusbar' ); |
|
174 $menuBar = $contentWrap.find( '.mce-menubar' ); |
|
175 |
|
176 function mceGetCursorOffset() { |
|
177 var node = editor.selection.getNode(), |
|
178 range, view, offset; |
|
179 |
|
180 if ( editor.wp && editor.wp.getView && ( view = editor.wp.getView( node ) ) ) { |
|
181 offset = view.getBoundingClientRect(); |
|
182 } else { |
|
183 range = editor.selection.getRng(); |
|
184 |
|
185 try { |
|
186 offset = range.getClientRects()[0]; |
|
187 } catch( er ) {} |
|
188 |
|
189 if ( ! offset ) { |
|
190 offset = node.getBoundingClientRect(); |
|
191 } |
|
192 } |
|
193 |
|
194 return offset.height ? offset : false; |
|
195 } |
|
196 |
|
197 // Make sure the cursor is always visible. |
|
198 // This is not only necessary to keep the cursor between the toolbars, |
|
199 // but also to scroll the window when the cursor moves out of the viewport to a wpview. |
|
200 // Setting a buffer > 0 will prevent the browser default. |
|
201 // Some browsers will scroll to the middle, |
|
202 // others to the top/bottom of the *window* when moving the cursor out of the viewport. |
|
203 function mceKeyup( event ) { |
|
204 var key = event.keyCode; |
|
205 |
|
206 // Bail on special keys. |
|
207 if ( key <= 47 && ! ( key === VK.SPACEBAR || key === VK.ENTER || key === VK.DELETE || key === VK.BACKSPACE || key === VK.UP || key === VK.LEFT || key === VK.DOWN || key === VK.UP ) ) { |
|
208 return; |
|
209 // OS keys, function keys, num lock, scroll lock |
|
210 } else if ( ( key >= 91 && key <= 93 ) || ( key >= 112 && key <= 123 ) || key === 144 || key === 145 ) { |
|
211 return; |
|
212 } |
|
213 |
|
214 mceScroll( key ); |
|
215 } |
|
216 |
|
217 function mceScroll( key ) { |
|
218 var offset = mceGetCursorOffset(), |
|
219 buffer = 50, |
|
220 cursorTop, cursorBottom, editorTop, editorBottom; |
|
221 |
|
222 if ( ! offset ) { |
|
223 return; |
|
224 } |
|
225 |
|
226 cursorTop = offset.top + editor.iframeElement.getBoundingClientRect().top; |
|
227 cursorBottom = cursorTop + offset.height; |
|
228 cursorTop = cursorTop - buffer; |
|
229 cursorBottom = cursorBottom + buffer; |
|
230 editorTop = heights.adminBarHeight + heights.toolsHeight + heights.menuBarHeight + heights.visualTopHeight; |
|
231 editorBottom = heights.windowHeight - ( advanced ? heights.bottomHeight + heights.statusBarHeight : 0 ); |
|
232 |
|
233 // Don't scroll if the node is taller than the visible part of the editor |
|
234 if ( editorBottom - editorTop < offset.height ) { |
|
235 return; |
|
236 } |
|
237 |
|
238 if ( cursorTop < editorTop && ( key === VK.UP || key === VK.LEFT || key === VK.BACKSPACE ) ) { |
|
239 window.scrollTo( window.pageXOffset, cursorTop + window.pageYOffset - editorTop ); |
|
240 } else if ( cursorBottom > editorBottom ) { |
|
241 window.scrollTo( window.pageXOffset, cursorBottom + window.pageYOffset - editorBottom ); |
|
242 } |
|
243 } |
|
244 |
|
245 function mceFullscreenToggled( event ) { |
|
246 if ( ! event.state ) { |
|
247 adjust(); |
|
248 } |
|
249 } |
|
250 |
|
251 // Adjust when switching editor modes. |
|
252 function mceShow() { |
|
253 $window.on( 'scroll.mce-float-panels', hideFloatPanels ); |
|
254 |
|
255 setTimeout( function() { |
|
256 editor.execCommand( 'wpAutoResize' ); |
|
257 adjust(); |
|
258 }, 300 ); |
|
259 } |
|
260 |
|
261 function mceHide() { |
|
262 $window.off( 'scroll.mce-float-panels' ); |
|
263 |
|
264 setTimeout( function() { |
|
265 var top = $contentWrap.offset().top; |
|
266 |
|
267 if ( window.pageYOffset > top ) { |
|
268 window.scrollTo( window.pageXOffset, top - heights.adminBarHeight ); |
|
269 } |
|
270 |
|
271 textEditorResize(); |
|
272 adjust(); |
|
273 }, 100 ); |
|
274 |
|
275 adjust(); |
|
276 } |
|
277 |
|
278 function toggleAdvanced() { |
|
279 advanced = ! advanced; |
|
280 } |
|
281 |
|
282 mceBind = function() { |
|
283 editor.on( 'keyup', mceKeyup ); |
|
284 editor.on( 'show', mceShow ); |
|
285 editor.on( 'hide', mceHide ); |
|
286 editor.on( 'wp-toolbar-toggle', toggleAdvanced ); |
|
287 // Adjust when the editor resizes. |
|
288 editor.on( 'setcontent wp-autoresize wp-toolbar-toggle', adjust ); |
|
289 // Don't hide the caret after undo/redo. |
|
290 editor.on( 'undo redo', mceScroll ); |
|
291 // Adjust when exiting TinyMCE's fullscreen mode. |
|
292 editor.on( 'FullscreenStateChanged', mceFullscreenToggled ); |
|
293 |
|
294 $window.off( 'scroll.mce-float-panels' ).on( 'scroll.mce-float-panels', hideFloatPanels ); |
|
295 }; |
|
296 |
|
297 mceUnbind = function() { |
|
298 editor.off( 'keyup', mceKeyup ); |
|
299 editor.off( 'show', mceShow ); |
|
300 editor.off( 'hide', mceHide ); |
|
301 editor.off( 'wp-toolbar-toggle', toggleAdvanced ); |
|
302 editor.off( 'setcontent wp-autoresize wp-toolbar-toggle', adjust ); |
|
303 editor.off( 'undo redo', mceScroll ); |
|
304 editor.off( 'FullscreenStateChanged', mceFullscreenToggled ); |
|
305 |
|
306 $window.off( 'scroll.mce-float-panels' ); |
|
307 }; |
|
308 |
|
309 if ( $wrap.hasClass( 'wp-editor-expand' ) ) { |
|
310 // Adjust "immediately" |
|
311 mceBind(); |
|
312 initialResize( adjust ); |
|
313 } |
|
314 } ); |
|
315 |
|
316 // Adjust the toolbars based on the active editor mode. |
|
317 function adjust( event ) { |
|
318 // Make sure we're not in fullscreen mode. |
|
319 if ( fullscreen && fullscreen.settings.visible ) { |
|
320 return; |
|
321 } |
|
322 |
|
323 var windowPos = $window.scrollTop(), |
|
324 type = event && event.type, |
|
325 resize = type !== 'scroll', |
|
326 visual = mceEditor && ! mceEditor.isHidden(), |
|
327 buffer = autoresizeMinHeight, |
|
328 postBodyTop = $postBody.offset().top, |
|
329 borderWidth = 1, |
|
330 contentWrapWidth = $contentWrap.width(), |
|
331 $top, $editor, sidebarTop, footerTop, canPin, |
|
332 topPos, topHeight, editorPos, editorHeight; |
|
333 |
|
334 // Refresh the heights |
|
335 if ( resize || ! heights.windowHeight ) { |
|
336 getHeights(); |
|
337 } |
|
338 |
|
339 if ( ! visual && type === 'resize' ) { |
|
340 textEditorResize(); |
|
341 } |
|
342 |
|
343 if ( visual ) { |
|
344 $top = $visualTop; |
|
345 $editor = $visualEditor; |
|
346 topHeight = heights.visualTopHeight; |
|
347 } else { |
|
348 $top = $textTop; |
|
349 $editor = $textEditor; |
|
350 topHeight = heights.textTopHeight; |
|
351 } |
|
352 |
|
353 // TinyMCE still intializing. |
|
354 if ( ! visual && ! $top.length ) { |
|
355 return; |
|
356 } |
|
357 |
|
358 topPos = $top.parent().offset().top; |
|
359 editorPos = $editor.offset().top; |
|
360 editorHeight = $editor.outerHeight(); |
|
361 |
|
362 // Should we pin? |
|
363 canPin = visual ? autoresizeMinHeight + topHeight : autoresizeMinHeight + 20; // 20px from textarea padding |
|
364 canPin = editorHeight > ( canPin + 5 ); |
|
365 |
|
366 if ( ! canPin ) { |
|
367 if ( resize ) { |
|
368 $tools.css( { |
|
369 position: 'absolute', |
|
370 top: 0, |
|
371 width: contentWrapWidth |
|
372 } ); |
|
373 |
|
374 if ( visual && $menuBar.length ) { |
|
375 $menuBar.css( { |
|
376 position: 'absolute', |
|
377 top: 0, |
|
378 width: contentWrapWidth - ( borderWidth * 2 ) |
|
379 } ); |
|
380 } |
|
381 |
|
382 $top.css( { |
|
383 position: 'absolute', |
|
384 top: heights.menuBarHeight, |
|
385 width: contentWrapWidth - ( borderWidth * 2 ) - ( visual ? 0 : ( $top.outerWidth() - $top.width() ) ) |
|
386 } ); |
|
387 |
|
388 $statusBar.attr( 'style', advanced ? '' : 'visibility: hidden;' ); |
|
389 $bottom.attr( 'style', '' ); |
|
390 } |
|
391 } else { |
|
392 // Maybe pin the top. |
|
393 if ( ( ! fixedTop || resize ) && |
|
394 // Handle scrolling down. |
|
395 ( windowPos >= ( topPos - heights.toolsHeight - heights.adminBarHeight ) && |
|
396 // Handle scrolling up. |
|
397 windowPos <= ( topPos - heights.toolsHeight - heights.adminBarHeight + editorHeight - buffer ) ) ) { |
|
398 fixedTop = true; |
|
399 |
|
400 $tools.css( { |
|
401 position: 'fixed', |
|
402 top: heights.adminBarHeight, |
|
403 width: contentWrapWidth |
|
404 } ); |
|
405 |
|
406 if ( visual && $menuBar.length ) { |
|
407 $menuBar.css( { |
|
408 position: 'fixed', |
|
409 top: heights.adminBarHeight + heights.toolsHeight, |
|
410 width: contentWrapWidth - ( borderWidth * 2 ) - ( visual ? 0 : ( $top.outerWidth() - $top.width() ) ) |
|
411 } ); |
|
412 } |
|
413 |
|
414 $top.css( { |
|
415 position: 'fixed', |
|
416 top: heights.adminBarHeight + heights.toolsHeight + heights.menuBarHeight, |
|
417 width: contentWrapWidth - ( borderWidth * 2 ) - ( visual ? 0 : ( $top.outerWidth() - $top.width() ) ) |
|
418 } ); |
|
419 // Maybe unpin the top. |
|
420 } else if ( fixedTop || resize ) { |
|
421 // Handle scrolling up. |
|
422 if ( windowPos <= ( topPos - heights.toolsHeight - heights.adminBarHeight ) ) { |
|
423 fixedTop = false; |
|
424 |
|
425 $tools.css( { |
|
426 position: 'absolute', |
|
427 top: 0, |
|
428 width: contentWrapWidth |
|
429 } ); |
|
430 |
|
431 if ( visual && $menuBar.length ) { |
|
432 $menuBar.css( { |
|
433 position: 'absolute', |
|
434 top: 0, |
|
435 width: contentWrapWidth - ( borderWidth * 2 ) |
|
436 } ); |
|
437 } |
|
438 |
|
439 $top.css( { |
|
440 position: 'absolute', |
|
441 top: heights.menuBarHeight, |
|
442 width: contentWrapWidth - ( borderWidth * 2 ) - ( visual ? 0 : ( $top.outerWidth() - $top.width() ) ) |
|
443 } ); |
|
444 // Handle scrolling down. |
|
445 } else if ( windowPos >= ( topPos - heights.toolsHeight - heights.adminBarHeight + editorHeight - buffer ) ) { |
|
446 fixedTop = false; |
|
447 |
|
448 $tools.css( { |
|
449 position: 'absolute', |
|
450 top: editorHeight - buffer, |
|
451 width: contentWrapWidth |
|
452 } ); |
|
453 |
|
454 if ( visual && $menuBar.length ) { |
|
455 $menuBar.css( { |
|
456 position: 'absolute', |
|
457 top: editorHeight - buffer, |
|
458 width: contentWrapWidth - ( borderWidth * 2 ) |
|
459 } ); |
|
460 } |
|
461 |
|
462 $top.css( { |
|
463 position: 'absolute', |
|
464 top: editorHeight - buffer + heights.menuBarHeight, |
|
465 width: contentWrapWidth - ( borderWidth * 2 ) - ( visual ? 0 : ( $top.outerWidth() - $top.width() ) ) |
|
466 } ); |
|
467 } |
|
468 } |
|
469 |
|
470 // Maybe adjust the bottom bar. |
|
471 if ( ( ! fixedBottom || ( resize && advanced ) ) && |
|
472 // +[n] for the border around the .wp-editor-container. |
|
473 ( windowPos + heights.windowHeight ) <= ( editorPos + editorHeight + heights.bottomHeight + heights.statusBarHeight + borderWidth ) ) { |
|
474 |
|
475 if ( event && event.deltaHeight > 0 && event.deltaHeight < 100 ) { |
|
476 window.scrollBy( 0, event.deltaHeight ); |
|
477 } else if ( advanced ) { |
|
478 fixedBottom = true; |
|
479 |
|
480 $statusBar.css( { |
|
481 position: 'fixed', |
|
482 bottom: heights.bottomHeight, |
|
483 visibility: '', |
|
484 width: contentWrapWidth - ( borderWidth * 2 ) |
|
485 } ); |
|
486 |
|
487 $bottom.css( { |
|
488 position: 'fixed', |
|
489 bottom: 0, |
|
490 width: contentWrapWidth |
|
491 } ); |
|
492 } |
|
493 } else if ( ( ! advanced && fixedBottom ) || |
|
494 ( ( fixedBottom || resize ) && |
|
495 ( windowPos + heights.windowHeight ) > ( editorPos + editorHeight + heights.bottomHeight + heights.statusBarHeight - borderWidth ) ) ) { |
|
496 fixedBottom = false; |
|
497 |
|
498 $statusBar.attr( 'style', advanced ? '' : 'visibility: hidden;' ); |
|
499 $bottom.attr( 'style', '' ); |
|
500 } |
|
501 } |
|
502 |
|
503 // Sidebar pinning |
|
504 if ( $postboxContainer.width() < 300 && heights.windowWidth > 600 && // sidebar position is changed with @media from CSS, make sure it is on the side |
|
505 $document.height() > ( $sideSortables.height() + postBodyTop + 120 ) && // the sidebar is not the tallest element |
|
506 heights.windowHeight < editorHeight ) { // the editor is taller than the viewport |
|
507 |
|
508 if ( ( heights.sideSortablesHeight + pinnedToolsTop + sidebarBottom ) > heights.windowHeight || fixedSideTop || fixedSideBottom ) { |
|
509 // Reset when scrolling to the top |
|
510 if ( windowPos + pinnedToolsTop <= postBodyTop ) { |
|
511 $sideSortables.attr( 'style', '' ); |
|
512 fixedSideTop = fixedSideBottom = false; |
|
513 } else { |
|
514 if ( windowPos > lastScrollPosition ) { |
|
515 // Scrolling down |
|
516 if ( fixedSideTop ) { |
|
517 // let it scroll |
|
518 fixedSideTop = false; |
|
519 sidebarTop = $sideSortables.offset().top - heights.adminBarHeight; |
|
520 footerTop = $footer.offset().top; |
|
521 |
|
522 // don't get over the footer |
|
523 if ( footerTop < sidebarTop + heights.sideSortablesHeight + sidebarBottom ) { |
|
524 sidebarTop = footerTop - heights.sideSortablesHeight - 12; |
|
525 } |
|
526 |
|
527 $sideSortables.css({ |
|
528 position: 'absolute', |
|
529 top: sidebarTop, |
|
530 bottom: '' |
|
531 }); |
|
532 } else if ( ! fixedSideBottom && heights.sideSortablesHeight + $sideSortables.offset().top + sidebarBottom < windowPos + heights.windowHeight ) { |
|
533 // pin the bottom |
|
534 fixedSideBottom = true; |
|
535 |
|
536 $sideSortables.css({ |
|
537 position: 'fixed', |
|
538 top: 'auto', |
|
539 bottom: sidebarBottom |
|
540 }); |
|
541 } |
|
542 } else if ( windowPos < lastScrollPosition ) { |
|
543 // Scrolling up |
|
544 if ( fixedSideBottom ) { |
|
545 // let it scroll |
|
546 fixedSideBottom = false; |
|
547 sidebarTop = $sideSortables.offset().top - sidebarBottom; |
|
548 footerTop = $footer.offset().top; |
|
549 |
|
550 // don't get over the footer |
|
551 if ( footerTop < sidebarTop + heights.sideSortablesHeight + sidebarBottom ) { |
|
552 sidebarTop = footerTop - heights.sideSortablesHeight - 12; |
|
553 } |
|
554 |
|
555 $sideSortables.css({ |
|
556 position: 'absolute', |
|
557 top: sidebarTop, |
|
558 bottom: '' |
|
559 }); |
|
560 } else if ( ! fixedSideTop && $sideSortables.offset().top >= windowPos + pinnedToolsTop ) { |
|
561 // pin the top |
|
562 fixedSideTop = true; |
|
563 |
|
564 $sideSortables.css({ |
|
565 position: 'fixed', |
|
566 top: pinnedToolsTop, |
|
567 bottom: '' |
|
568 }); |
|
569 } |
|
570 } |
|
571 } |
|
572 } else { |
|
573 // if the sidebar container is smaller than the viewport, then pin/unpin the top when scrolling |
|
574 if ( windowPos >= ( postBodyTop - pinnedToolsTop ) ) { |
|
575 |
|
576 $sideSortables.css( { |
|
577 position: 'fixed', |
|
578 top: pinnedToolsTop |
|
579 } ); |
|
580 } else { |
|
581 $sideSortables.attr( 'style', '' ); |
|
582 } |
|
583 |
|
584 fixedSideTop = fixedSideBottom = false; |
|
585 } |
|
586 |
|
587 lastScrollPosition = windowPos; |
|
588 } else { |
|
589 $sideSortables.attr( 'style', '' ); |
|
590 fixedSideTop = fixedSideBottom = false; |
|
591 } |
|
592 |
|
593 if ( resize ) { |
|
594 $contentWrap.css( { |
|
595 paddingTop: heights.toolsHeight |
|
596 } ); |
|
597 |
|
598 if ( visual ) { |
|
599 $visualEditor.css( { |
|
600 paddingTop: heights.visualTopHeight + heights.menuBarHeight |
|
601 } ); |
|
602 } else { |
|
603 $textEditor.css( { |
|
604 marginTop: heights.textTopHeight |
|
605 } ); |
|
606 |
|
607 $textEditorClone.width( contentWrapWidth - 20 - ( borderWidth * 2 ) ); |
|
608 } |
|
609 } |
|
610 } |
|
611 |
|
612 function fullscreenHide() { |
|
613 textEditorResize(); |
|
614 adjust(); |
|
615 } |
|
616 |
|
617 function initialResize( callback ) { |
|
618 for ( var i = 1; i < 6; i++ ) { |
|
619 setTimeout( callback, 500 * i ); |
|
620 } |
|
621 } |
|
622 |
|
623 function afterScroll() { |
|
624 clearTimeout( scrollTimer ); |
|
625 scrollTimer = setTimeout( adjust, 100 ); |
|
626 } |
|
627 |
|
628 function on() { |
|
629 // Scroll to the top when triggering this from JS. |
|
630 // Ensures toolbars are pinned properly. |
|
631 if ( window.pageYOffset && window.pageYOffset > pageYOffsetAtTop ) { |
|
632 window.scrollTo( window.pageXOffset, 0 ); |
|
633 } |
|
634 |
|
635 $wrap.addClass( 'wp-editor-expand' ); |
|
636 |
|
637 // Adjust when the window is scrolled or resized. |
|
638 $window.on( 'scroll.editor-expand resize.editor-expand', function( event ) { |
|
639 adjust( event.type ); |
|
640 afterScroll(); |
|
641 } ); |
|
642 |
|
643 // Adjust when collapsing the menu, changing the columns, changing the body class. |
|
644 $document.on( 'wp-collapse-menu.editor-expand postboxes-columnchange.editor-expand editor-classchange.editor-expand', adjust ) |
|
645 .on( 'postbox-toggled.editor-expand', function() { |
|
646 if ( ! fixedSideTop && ! fixedSideBottom && window.pageYOffset > pinnedToolsTop ) { |
|
647 fixedSideBottom = true; |
|
648 window.scrollBy( 0, -1 ); |
|
649 adjust(); |
|
650 window.scrollBy( 0, 1 ); |
|
651 } |
|
652 |
|
653 adjust(); |
|
654 }).on( 'wp-window-resized.editor-expand', function() { |
|
655 if ( mceEditor && ! mceEditor.isHidden() ) { |
|
656 mceEditor.execCommand( 'wpAutoResize' ); |
|
657 } else { |
|
658 textEditorResize(); |
|
659 } |
|
660 }); |
|
661 |
|
662 $textEditor.on( 'focus.editor-expand input.editor-expand propertychange.editor-expand', textEditorResize ); |
|
663 $textEditor.on( 'keyup.editor-expand', textEditorKeyup ); |
|
664 mceBind(); |
|
665 |
|
666 // Adjust when entering/exiting fullscreen mode. |
|
667 fullscreen && fullscreen.pubsub.subscribe( 'hidden', fullscreenHide ); |
|
668 |
|
669 if ( mceEditor ) { |
|
670 mceEditor.settings.wp_autoresize_on = true; |
|
671 mceEditor.execCommand( 'wpAutoResizeOn' ); |
|
672 |
|
673 if ( ! mceEditor.isHidden() ) { |
|
674 mceEditor.execCommand( 'wpAutoResize' ); |
|
675 } |
|
676 } |
|
677 |
|
678 if ( ! mceEditor || mceEditor.isHidden() ) { |
|
679 textEditorResize(); |
|
680 } |
|
681 |
|
682 adjust(); |
|
683 |
|
684 $document.trigger( 'editor-expand-on' ); |
|
685 } |
|
686 |
|
687 function off() { |
|
688 var height = parseInt( window.getUserSetting( 'ed_size', 300 ), 10 ); |
|
689 |
|
690 if ( height < 50 ) { |
|
691 height = 50; |
|
692 } else if ( height > 5000 ) { |
|
693 height = 5000; |
|
694 } |
|
695 |
|
696 // Scroll to the top when triggering this from JS. |
|
697 // Ensures toolbars are reset properly. |
|
698 if ( window.pageYOffset && window.pageYOffset > pageYOffsetAtTop ) { |
|
699 window.scrollTo( window.pageXOffset, 0 ); |
|
700 } |
|
701 |
|
702 $wrap.removeClass( 'wp-editor-expand' ); |
|
703 |
|
704 $window.off( '.editor-expand' ); |
|
705 $document.off( '.editor-expand' ); |
|
706 $textEditor.off( '.editor-expand' ); |
|
707 mceUnbind(); |
|
708 |
|
709 // Adjust when entering/exiting fullscreen mode. |
|
710 fullscreen && fullscreen.pubsub.unsubscribe( 'hidden', fullscreenHide ); |
|
711 |
|
712 // Reset all css |
|
713 $.each( [ $visualTop, $textTop, $tools, $menuBar, $bottom, $statusBar, $contentWrap, $visualEditor, $textEditor, $sideSortables ], function( i, element ) { |
|
714 element && element.attr( 'style', '' ); |
|
715 }); |
|
716 |
|
717 fixedTop = fixedBottom = fixedSideTop = fixedSideBottom = false; |
|
718 |
|
719 if ( mceEditor ) { |
|
720 mceEditor.settings.wp_autoresize_on = false; |
|
721 mceEditor.execCommand( 'wpAutoResizeOff' ); |
|
722 |
|
723 if ( ! mceEditor.isHidden() ) { |
|
724 $textEditor.hide(); |
|
725 |
|
726 if ( height ) { |
|
727 mceEditor.theme.resizeTo( null, height ); |
|
728 } |
|
729 } |
|
730 } |
|
731 |
|
732 if ( height ) { |
|
733 $textEditor.height( height ); |
|
734 } |
|
735 |
|
736 $document.trigger( 'editor-expand-off' ); |
|
737 } |
|
738 |
|
739 // Start on load |
|
740 if ( $wrap.hasClass( 'wp-editor-expand' ) ) { |
|
741 on(); |
|
742 |
|
743 // Ideally we need to resize just after CSS has fully loaded and QuickTags is ready. |
|
744 if ( $contentWrap.hasClass( 'html-active' ) ) { |
|
745 initialResize( function() { |
|
746 adjust(); |
|
747 textEditorResize(); |
|
748 } ); |
|
749 } |
|
750 } |
|
751 |
|
752 // Show the on/off checkbox |
|
753 $( '#adv-settings .editor-expand' ).show(); |
|
754 $( '#editor-expand-toggle' ).on( 'change.editor-expand', function() { |
|
755 if ( $(this).prop( 'checked' ) ) { |
|
756 on(); |
|
757 window.setUserSetting( 'editor_expand', 'on' ); |
|
758 } else { |
|
759 off(); |
|
760 window.setUserSetting( 'editor_expand', 'off' ); |
|
761 } |
|
762 }); |
|
763 |
|
764 // Expose on() and off() |
|
765 window.editorExpand = { |
|
766 on: on, |
|
767 off: off |
|
768 }; |
|
769 } ); |
|
770 |
|
771 /* DFW. */ |
|
772 $( function() { |
|
773 var $body = $( document.body ), |
|
774 $wrap = $( '#wpcontent' ), |
|
775 $editor = $( '#post-body-content' ), |
|
776 $title = $( '#title' ), |
|
777 $content = $( '#content' ), |
|
778 $overlay = $( document.createElement( 'DIV' ) ), |
|
779 $slug = $( '#edit-slug-box' ), |
|
780 $slugFocusEl = $slug.find( 'a' ) |
|
781 .add( $slug.find( 'button' ) ) |
|
782 .add( $slug.find( 'input' ) ), |
|
783 $menuWrap = $( '#adminmenuwrap' ), |
|
784 $editorWindow = $(), |
|
785 $editorIframe = $(), |
|
786 _isActive = window.getUserSetting( 'editor_expand', 'on' ) === 'on', |
|
787 _isOn = _isActive ? window.getUserSetting( 'post_dfw' ) === 'on' : false, |
|
788 traveledX = 0, |
|
789 traveledY = 0, |
|
790 buffer = 20, |
|
791 faded, fadedAdminBar, fadedSlug, |
|
792 editorRect, x, y, mouseY, scrollY, |
|
793 focusLostTimer, overlayTimer, editorHasFocus; |
|
794 |
|
795 $body.append( $overlay ); |
|
796 |
|
797 $overlay.css( { |
|
798 display: 'none', |
|
799 position: 'fixed', |
|
800 top: $adminBar.height(), |
|
801 right: 0, |
|
802 bottom: 0, |
|
803 left: 0, |
|
804 'z-index': 9997 |
|
805 } ); |
|
806 |
|
807 $editor.css( { |
|
808 position: 'relative' |
|
809 } ); |
|
810 |
|
811 $window.on( 'mousemove.focus', function( event ) { |
|
812 mouseY = event.pageY; |
|
813 } ); |
|
814 |
|
815 function recalcEditorRect() { |
|
816 editorRect = $editor.offset(); |
|
817 editorRect.right = editorRect.left + $editor.outerWidth(); |
|
818 editorRect.bottom = editorRect.top + $editor.outerHeight(); |
|
819 } |
|
820 |
|
821 function activate() { |
|
822 if ( ! _isActive ) { |
|
823 _isActive = true; |
|
824 |
|
825 $document.trigger( 'dfw-activate' ); |
|
826 $content.on( 'keydown.focus-shortcut', toggleViaKeyboard ); |
|
827 } |
|
828 } |
|
829 |
|
830 function deactivate() { |
|
831 if ( _isActive ) { |
|
832 off(); |
|
833 |
|
834 _isActive = false; |
|
835 |
|
836 $document.trigger( 'dfw-deactivate' ); |
|
837 $content.off( 'keydown.focus-shortcut' ); |
|
838 } |
|
839 } |
|
840 |
|
841 function isActive() { |
|
842 return _isActive; |
|
843 } |
|
844 |
|
845 function on() { |
|
846 if ( ! _isOn && _isActive ) { |
|
847 _isOn = true; |
|
848 |
|
849 $content.on( 'keydown.focus', fadeOut ); |
|
850 |
|
851 $title.add( $content ).on( 'blur.focus', maybeFadeIn ); |
|
852 |
|
853 fadeOut(); |
|
854 |
|
855 window.setUserSetting( 'post_dfw', 'on' ); |
|
856 |
|
857 $document.trigger( 'dfw-on' ); |
|
858 } |
|
859 } |
|
860 |
|
861 function off() { |
|
862 if ( _isOn ) { |
|
863 _isOn = false; |
|
864 |
|
865 $title.add( $content ).off( '.focus' ); |
|
866 |
|
867 fadeIn(); |
|
868 |
|
869 $editor.off( '.focus' ); |
|
870 |
|
871 window.setUserSetting( 'post_dfw', 'off' ); |
|
872 |
|
873 $document.trigger( 'dfw-off' ); |
|
874 } |
|
875 } |
|
876 |
|
877 function toggle() { |
|
878 if ( _isOn ) { |
|
879 off(); |
|
880 } else { |
|
881 on(); |
|
882 } |
|
883 } |
|
884 |
|
885 function isOn() { |
|
886 return _isOn; |
|
887 } |
|
888 |
|
889 function fadeOut( event ) { |
|
890 var key = event && event.keyCode; |
|
891 |
|
892 // fadeIn and return on Escape and keyboard shortcut Alt+Shift+W. |
|
893 if ( key === 27 || ( key === 87 && event.altKey && event.shiftKey ) ) { |
|
894 fadeIn( event ); |
|
895 return; |
|
896 } |
|
897 |
|
898 if ( event && ( event.metaKey || ( event.ctrlKey && ! event.altKey ) || ( event.altKey && event.shiftKey ) || ( key && ( |
|
899 // Special keys ( tab, ctrl, alt, esc, arrow keys... ) |
|
900 ( key <= 47 && key !== 8 && key !== 13 && key !== 32 && key !== 46 ) || |
|
901 // Windows keys |
|
902 ( key >= 91 && key <= 93 ) || |
|
903 // F keys |
|
904 ( key >= 112 && key <= 135 ) || |
|
905 // Num Lock, Scroll Lock, OEM |
|
906 ( key >= 144 && key <= 150 ) || |
|
907 // OEM or non-printable |
|
908 key >= 224 |
|
909 ) ) ) ) { |
|
910 return; |
|
911 } |
|
912 |
|
913 if ( ! faded ) { |
|
914 faded = true; |
|
915 |
|
916 clearTimeout( overlayTimer ); |
|
917 |
|
918 overlayTimer = setTimeout( function() { |
|
919 $overlay.show(); |
|
920 }, 600 ); |
|
921 |
|
922 $editor.css( 'z-index', 9998 ); |
|
923 |
|
924 $overlay |
|
925 // Always recalculate the editor area entering the overlay with the mouse. |
|
926 .on( 'mouseenter.focus', function() { |
|
927 recalcEditorRect(); |
|
928 |
|
929 $window.on( 'scroll.focus', function() { |
|
930 var nScrollY = window.pageYOffset; |
|
931 |
|
932 if ( ( |
|
933 scrollY && mouseY && |
|
934 scrollY !== nScrollY |
|
935 ) && ( |
|
936 mouseY < editorRect.top - buffer || |
|
937 mouseY > editorRect.bottom + buffer |
|
938 ) ) { |
|
939 fadeIn(); |
|
940 } |
|
941 |
|
942 scrollY = nScrollY; |
|
943 } ); |
|
944 } ) |
|
945 .on( 'mouseleave.focus', function() { |
|
946 x = y = null; |
|
947 traveledX = traveledY = 0; |
|
948 |
|
949 $window.off( 'scroll.focus' ); |
|
950 } ) |
|
951 // Fade in when the mouse moves away form the editor area. |
|
952 .on( 'mousemove.focus', function( event ) { |
|
953 var nx = event.clientX, |
|
954 ny = event.clientY, |
|
955 pageYOffset = window.pageYOffset, |
|
956 pageXOffset = window.pageXOffset; |
|
957 |
|
958 if ( x && y && ( nx !== x || ny !== y ) ) { |
|
959 if ( |
|
960 ( ny <= y && ny < editorRect.top - pageYOffset ) || |
|
961 ( ny >= y && ny > editorRect.bottom - pageYOffset ) || |
|
962 ( nx <= x && nx < editorRect.left - pageXOffset ) || |
|
963 ( nx >= x && nx > editorRect.right - pageXOffset ) |
|
964 ) { |
|
965 traveledX += Math.abs( x - nx ); |
|
966 traveledY += Math.abs( y - ny ); |
|
967 |
|
968 if ( ( |
|
969 ny <= editorRect.top - buffer - pageYOffset || |
|
970 ny >= editorRect.bottom + buffer - pageYOffset || |
|
971 nx <= editorRect.left - buffer - pageXOffset || |
|
972 nx >= editorRect.right + buffer - pageXOffset |
|
973 ) && ( |
|
974 traveledX > 10 || |
|
975 traveledY > 10 |
|
976 ) ) { |
|
977 fadeIn(); |
|
978 |
|
979 x = y = null; |
|
980 traveledX = traveledY = 0; |
|
981 |
|
982 return; |
|
983 } |
|
984 } else { |
|
985 traveledX = traveledY = 0; |
|
986 } |
|
987 } |
|
988 |
|
989 x = nx; |
|
990 y = ny; |
|
991 } ) |
|
992 // When the overlay is touched, always fade in and cancel the event. |
|
993 .on( 'touchstart.focus', function( event ) { |
|
994 event.preventDefault(); |
|
995 fadeIn(); |
|
996 } ); |
|
997 |
|
998 $editor.off( 'mouseenter.focus' ); |
|
999 |
|
1000 if ( focusLostTimer ) { |
|
1001 clearTimeout( focusLostTimer ); |
|
1002 focusLostTimer = null; |
|
1003 } |
|
1004 |
|
1005 $body.addClass( 'focus-on' ).removeClass( 'focus-off' ); |
|
1006 } |
|
1007 |
|
1008 fadeOutAdminBar(); |
|
1009 fadeOutSlug(); |
|
1010 } |
|
1011 |
|
1012 function fadeIn( event ) { |
|
1013 if ( faded ) { |
|
1014 faded = false; |
|
1015 |
|
1016 clearTimeout( overlayTimer ); |
|
1017 |
|
1018 overlayTimer = setTimeout( function() { |
|
1019 $overlay.hide(); |
|
1020 }, 200 ); |
|
1021 |
|
1022 $editor.css( 'z-index', '' ); |
|
1023 |
|
1024 $overlay.off( 'mouseenter.focus mouseleave.focus mousemove.focus touchstart.focus' ); |
|
1025 |
|
1026 /* |
|
1027 * When fading in, temporarily watch for refocus and fade back out - helps |
|
1028 * with 'accidental' editor exits with the mouse. When fading in and the event |
|
1029 * is a key event (Escape or Alt+Shift+W) don't watch for refocus. |
|
1030 */ |
|
1031 if ( 'undefined' === typeof event ) { |
|
1032 $editor.on( 'mouseenter.focus', function() { |
|
1033 if ( $.contains( $editor.get( 0 ), document.activeElement ) || editorHasFocus ) { |
|
1034 fadeOut(); |
|
1035 } |
|
1036 } ); |
|
1037 } |
|
1038 |
|
1039 focusLostTimer = setTimeout( function() { |
|
1040 focusLostTimer = null; |
|
1041 $editor.off( 'mouseenter.focus' ); |
|
1042 }, 1000 ); |
|
1043 |
|
1044 $body.addClass( 'focus-off' ).removeClass( 'focus-on' ); |
|
1045 } |
|
1046 |
|
1047 fadeInAdminBar(); |
|
1048 fadeInSlug(); |
|
1049 } |
|
1050 |
|
1051 function maybeFadeIn() { |
|
1052 setTimeout( function() { |
|
1053 var position = document.activeElement.compareDocumentPosition( $editor.get( 0 ) ); |
|
1054 |
|
1055 function hasFocus( $el ) { |
|
1056 return $.contains( $el.get( 0 ), document.activeElement ); |
|
1057 } |
|
1058 |
|
1059 // The focused node is before or behind the editor area, and not outside the wrap. |
|
1060 if ( ( position === 2 || position === 4 ) && ( hasFocus( $menuWrap ) || hasFocus( $wrap ) || hasFocus( $footer ) ) ) { |
|
1061 fadeIn(); |
|
1062 } |
|
1063 }, 0 ); |
|
1064 } |
|
1065 |
|
1066 function fadeOutAdminBar() { |
|
1067 if ( ! fadedAdminBar && faded ) { |
|
1068 fadedAdminBar = true; |
|
1069 |
|
1070 $adminBar |
|
1071 .on( 'mouseenter.focus', function() { |
|
1072 $adminBar.addClass( 'focus-off' ); |
|
1073 } ) |
|
1074 .on( 'mouseleave.focus', function() { |
|
1075 $adminBar.removeClass( 'focus-off' ); |
|
1076 } ); |
|
1077 } |
|
1078 } |
|
1079 |
|
1080 function fadeInAdminBar() { |
|
1081 if ( fadedAdminBar ) { |
|
1082 fadedAdminBar = false; |
|
1083 |
|
1084 $adminBar.off( '.focus' ); |
|
1085 } |
|
1086 } |
|
1087 |
|
1088 function fadeOutSlug() { |
|
1089 if ( ! fadedSlug && faded && ! $slug.find( ':focus').length ) { |
|
1090 fadedSlug = true; |
|
1091 |
|
1092 $slug.stop().fadeTo( 'fast', 0.3 ).on( 'mouseenter.focus', fadeInSlug ).off( 'mouseleave.focus' ); |
|
1093 |
|
1094 $slugFocusEl.on( 'focus.focus', fadeInSlug ).off( 'blur.focus' ); |
|
1095 } |
|
1096 } |
|
1097 |
|
1098 function fadeInSlug() { |
|
1099 if ( fadedSlug ) { |
|
1100 fadedSlug = false; |
|
1101 |
|
1102 $slug.stop().fadeTo( 'fast', 1 ).on( 'mouseleave.focus', fadeOutSlug ).off( 'mouseenter.focus' ); |
|
1103 |
|
1104 $slugFocusEl.on( 'blur.focus', fadeOutSlug ).off( 'focus.focus' ); |
|
1105 } |
|
1106 } |
|
1107 |
|
1108 function toggleViaKeyboard( event ) { |
|
1109 if ( event.altKey && event.shiftKey && 87 === event.keyCode ) { |
|
1110 toggle(); |
|
1111 } |
|
1112 } |
|
1113 |
|
1114 if ( $( '#postdivrich' ).hasClass( 'wp-editor-expand' ) ) { |
|
1115 $content.on( 'keydown.focus-shortcut', toggleViaKeyboard ); |
|
1116 } |
|
1117 |
|
1118 $document.on( 'tinymce-editor-setup.focus', function( event, editor ) { |
|
1119 editor.addButton( 'dfw', { |
|
1120 active: _isOn, |
|
1121 classes: 'wp-dfw btn widget', |
|
1122 disabled: ! _isActive, |
|
1123 onclick: toggle, |
|
1124 onPostRender: function() { |
|
1125 var button = this; |
|
1126 |
|
1127 $document |
|
1128 .on( 'dfw-activate.focus', function() { |
|
1129 button.disabled( false ); |
|
1130 } ) |
|
1131 .on( 'dfw-deactivate.focus', function() { |
|
1132 button.disabled( true ); |
|
1133 } ) |
|
1134 .on( 'dfw-on.focus', function() { |
|
1135 button.active( true ); |
|
1136 } ) |
|
1137 .on( 'dfw-off.focus', function() { |
|
1138 button.active( false ); |
|
1139 } ); |
|
1140 }, |
|
1141 tooltip: 'Distraction-free writing mode', |
|
1142 shortcut: 'Alt+Shift+W' |
|
1143 } ); |
|
1144 |
|
1145 editor.addCommand( 'wpToggleDFW', toggle ); |
|
1146 editor.addShortcut( 'alt+shift+w', '', 'wpToggleDFW' ); |
|
1147 } ); |
|
1148 |
|
1149 $document.on( 'tinymce-editor-init.focus', function( event, editor ) { |
|
1150 var mceBind, mceUnbind; |
|
1151 |
|
1152 function focus() { |
|
1153 editorHasFocus = true; |
|
1154 } |
|
1155 |
|
1156 function blur() { |
|
1157 editorHasFocus = false; |
|
1158 } |
|
1159 |
|
1160 if ( editor.id === 'content' ) { |
|
1161 $editorWindow = $( editor.getWin() ); |
|
1162 $editorIframe = $( editor.getContentAreaContainer() ).find( 'iframe' ); |
|
1163 |
|
1164 mceBind = function() { |
|
1165 editor.on( 'keydown', fadeOut ); |
|
1166 editor.on( 'blur', maybeFadeIn ); |
|
1167 editor.on( 'focus', focus ); |
|
1168 editor.on( 'blur', blur ); |
|
1169 editor.on( 'wp-autoresize', recalcEditorRect ); |
|
1170 }; |
|
1171 |
|
1172 mceUnbind = function() { |
|
1173 editor.off( 'keydown', fadeOut ); |
|
1174 editor.off( 'blur', maybeFadeIn ); |
|
1175 editor.off( 'focus', focus ); |
|
1176 editor.off( 'blur', blur ); |
|
1177 editor.off( 'wp-autoresize', recalcEditorRect ); |
|
1178 }; |
|
1179 |
|
1180 if ( _isOn ) { |
|
1181 mceBind(); |
|
1182 } |
|
1183 |
|
1184 $document.on( 'dfw-on.focus', mceBind ).on( 'dfw-off.focus', mceUnbind ); |
|
1185 |
|
1186 // Make sure the body focuses when clicking outside it. |
|
1187 editor.on( 'click', function( event ) { |
|
1188 if ( event.target === editor.getDoc().documentElement ) { |
|
1189 editor.focus(); |
|
1190 } |
|
1191 } ); |
|
1192 } |
|
1193 } ); |
|
1194 |
|
1195 $document.on( 'quicktags-init', function( event, editor ) { |
|
1196 var $button; |
|
1197 |
|
1198 if ( editor.settings.buttons && ( ',' + editor.settings.buttons + ',' ).indexOf( ',dfw,' ) !== -1 ) { |
|
1199 $button = $( '#' + editor.name + '_dfw' ); |
|
1200 |
|
1201 $( document ) |
|
1202 .on( 'dfw-activate', function() { |
|
1203 $button.prop( 'disabled', false ); |
|
1204 } ) |
|
1205 .on( 'dfw-deactivate', function() { |
|
1206 $button.prop( 'disabled', true ); |
|
1207 } ) |
|
1208 .on( 'dfw-on', function() { |
|
1209 $button.addClass( 'active' ); |
|
1210 } ) |
|
1211 .on( 'dfw-off', function() { |
|
1212 $button.removeClass( 'active' ); |
|
1213 } ); |
|
1214 } |
|
1215 } ); |
|
1216 |
|
1217 $document.on( 'editor-expand-on.focus', activate ).on( 'editor-expand-off.focus', deactivate ); |
|
1218 |
|
1219 if ( _isOn ) { |
|
1220 $content.on( 'keydown.focus', fadeOut ); |
|
1221 |
|
1222 $title.add( $content ).on( 'blur.focus', maybeFadeIn ); |
|
1223 } |
|
1224 |
|
1225 window.wp = window.wp || {}; |
|
1226 window.wp.editor = window.wp.editor || {}; |
|
1227 window.wp.editor.dfw = { |
|
1228 activate: activate, |
|
1229 deactivate: deactivate, |
|
1230 isActive: isActive, |
|
1231 on: on, |
|
1232 off: off, |
|
1233 toggle: toggle, |
|
1234 isOn: isOn |
|
1235 }; |
|
1236 } ); |
|
1237 } )( window, window.jQuery ); |