1 ( function( window, $, undefined ) {
4 var $window = $( window ),
5 $document = $( document ),
6 $adminBar = $( '#wpadminbar' ),
7 $footer = $( '#wpfooter' );
9 /* Autoresize editor. */
11 var $wrap = $( '#postdivrich' ),
12 $contentWrap = $( '#wp-content-wrap' ),
13 $tools = $( '#wp-content-editor-tools' ),
16 $textTop = $( '#ed_toolbar' ),
17 $textEditor = $( '#content' ),
18 $textEditorClone = $( '<div id="content-textarea-clone"></div>' ),
19 $bottom = $( '#post-status-info' ),
22 $sideSortables = $( '#side-sortables' ),
23 $postboxContainer = $( '#postbox-container-1' ),
24 $postBody = $('#post-body'),
25 fullscreen = window.wp.editor && window.wp.editor.fullscreen,
27 mceBind = function(){},
28 mceUnbind = function(){},
32 fixedSideBottom = false,
34 lastScrollPosition = 0,
35 pageYOffsetAtTop = 130,
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.
52 sideSortablesHeight: 0
55 $textEditorClone.insertAfter( $textEditor );
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'
65 function getHeights() {
66 var windowWidth = $window.width();
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
82 if ( heights.menuBarHeight < 3 ) {
83 heights.menuBarHeight = 0;
87 function textEditorKeyup( event ) {
88 var VK = jQuery.ui.keyCode,
90 range = document.createRange(),
91 selStart = $textEditor[0].selectionStart,
92 selEnd = $textEditor[0].selectionEnd,
93 textNode = $textEditorClone[0].firstChild,
95 offset, cursorTop, cursorBottom, editorTop, editorBottom;
97 if ( selStart && selEnd && selStart !== selEnd ) {
101 // These are not TinyMCE ranges.
103 range.setStart( textNode, selStart );
104 range.setEnd( textNode, selEnd + 1 );
107 offset = range.getBoundingClientRect();
109 if ( ! offset.height ) {
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;
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 );
125 function textEditorResize() {
126 if ( ( mceEditor && ! mceEditor.isHidden() ) || ( ! mceEditor && initialMode === 'tinymce' ) ) {
130 var textEditorHeight = $textEditor.height(),
133 $textEditorClone.width( $textEditor.width() - 22 );
134 $textEditorClone.text( $textEditor.val() + ' ' );
136 hiddenHeight = $textEditorClone.height();
138 if ( hiddenHeight < autoresizeMinHeight ) {
139 hiddenHeight = autoresizeMinHeight;
142 if ( hiddenHeight === textEditorHeight ) {
146 $textEditor.height( hiddenHeight );
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();
159 // Make sure it's the main editor.
160 if ( editor.id !== 'content' ) {
164 // Copy the editor instance.
167 // Set the minimum height to the initial viewport height.
168 editor.settings.autoresize_min_height = autoresizeMinHeight;
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' );
176 function mceGetCursorOffset() {
177 var node = editor.selection.getNode(),
180 if ( editor.wp && editor.wp.getView && ( view = editor.wp.getView( node ) ) ) {
181 offset = view.getBoundingClientRect();
183 range = editor.selection.getRng();
186 offset = range.getClientRects()[0];
190 offset = node.getBoundingClientRect();
194 return offset.height ? offset : false;
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;
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 ) ) {
209 // OS keys, function keys, num lock, scroll lock
210 } else if ( ( key >= 91 && key <= 93 ) || ( key >= 112 && key <= 123 ) || key === 144 || key === 145 ) {
217 function mceScroll( key ) {
218 var offset = mceGetCursorOffset(),
220 cursorTop, cursorBottom, editorTop, editorBottom;
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 );
233 // Don't scroll if the node is taller than the visible part of the editor
234 if ( editorBottom - editorTop < offset.height ) {
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 );
245 function mceFullscreenToggled( event ) {
246 if ( ! event.state ) {
251 // Adjust when switching editor modes.
253 $window.on( 'scroll.mce-float-panels', hideFloatPanels );
255 setTimeout( function() {
256 editor.execCommand( 'wpAutoResize' );
262 $window.off( 'scroll.mce-float-panels' );
264 setTimeout( function() {
265 var top = $contentWrap.offset().top;
267 if ( window.pageYOffset > top ) {
268 window.scrollTo( window.pageXOffset, top - heights.adminBarHeight );
278 function toggleAdvanced() {
279 advanced = ! advanced;
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 );
294 $window.off( 'scroll.mce-float-panels' ).on( 'scroll.mce-float-panels', hideFloatPanels );
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 );
306 $window.off( 'scroll.mce-float-panels' );
309 if ( $wrap.hasClass( 'wp-editor-expand' ) ) {
310 // Adjust "immediately"
312 initialResize( adjust );
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 ) {
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,
330 contentWrapWidth = $contentWrap.width(),
331 $top, $editor, sidebarTop, footerTop, canPin,
332 topPos, topHeight, editorPos, editorHeight;
334 // Refresh the heights
335 if ( resize || ! heights.windowHeight ) {
339 if ( ! visual && type === 'resize' ) {
345 $editor = $visualEditor;
346 topHeight = heights.visualTopHeight;
349 $editor = $textEditor;
350 topHeight = heights.textTopHeight;
353 // TinyMCE still intializing.
354 if ( ! visual && ! $top.length ) {
358 topPos = $top.parent().offset().top;
359 editorPos = $editor.offset().top;
360 editorHeight = $editor.outerHeight();
363 canPin = visual ? autoresizeMinHeight + topHeight : autoresizeMinHeight + 20; // 20px from textarea padding
364 canPin = editorHeight > ( canPin + 5 );
369 position: 'absolute',
371 width: contentWrapWidth
374 if ( visual && $menuBar.length ) {
376 position: 'absolute',
378 width: contentWrapWidth - ( borderWidth * 2 )
383 position: 'absolute',
384 top: heights.menuBarHeight,
385 width: contentWrapWidth - ( borderWidth * 2 ) - ( visual ? 0 : ( $top.outerWidth() - $top.width() ) )
388 $statusBar.attr( 'style', advanced ? '' : 'visibility: hidden;' );
389 $bottom.attr( 'style', '' );
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 ) ) ) {
402 top: heights.adminBarHeight,
403 width: contentWrapWidth
406 if ( visual && $menuBar.length ) {
409 top: heights.adminBarHeight + heights.toolsHeight,
410 width: contentWrapWidth - ( borderWidth * 2 ) - ( visual ? 0 : ( $top.outerWidth() - $top.width() ) )
416 top: heights.adminBarHeight + heights.toolsHeight + heights.menuBarHeight,
417 width: contentWrapWidth - ( borderWidth * 2 ) - ( visual ? 0 : ( $top.outerWidth() - $top.width() ) )
419 // Maybe unpin the top.
420 } else if ( fixedTop || resize ) {
421 // Handle scrolling up.
422 if ( windowPos <= ( topPos - heights.toolsHeight - heights.adminBarHeight ) ) {
426 position: 'absolute',
428 width: contentWrapWidth
431 if ( visual && $menuBar.length ) {
433 position: 'absolute',
435 width: contentWrapWidth - ( borderWidth * 2 )
440 position: 'absolute',
441 top: heights.menuBarHeight,
442 width: contentWrapWidth - ( borderWidth * 2 ) - ( visual ? 0 : ( $top.outerWidth() - $top.width() ) )
444 // Handle scrolling down.
445 } else if ( windowPos >= ( topPos - heights.toolsHeight - heights.adminBarHeight + editorHeight - buffer ) ) {
449 position: 'absolute',
450 top: editorHeight - buffer,
451 width: contentWrapWidth
454 if ( visual && $menuBar.length ) {
456 position: 'absolute',
457 top: editorHeight - buffer,
458 width: contentWrapWidth - ( borderWidth * 2 )
463 position: 'absolute',
464 top: editorHeight - buffer + heights.menuBarHeight,
465 width: contentWrapWidth - ( borderWidth * 2 ) - ( visual ? 0 : ( $top.outerWidth() - $top.width() ) )
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 ) ) {
475 if ( event && event.deltaHeight > 0 && event.deltaHeight < 100 ) {
476 window.scrollBy( 0, event.deltaHeight );
477 } else if ( advanced ) {
482 bottom: heights.bottomHeight,
484 width: contentWrapWidth - ( borderWidth * 2 )
490 width: contentWrapWidth
493 } else if ( ( ! advanced && fixedBottom ) ||
494 ( ( fixedBottom || resize ) &&
495 ( windowPos + heights.windowHeight ) > ( editorPos + editorHeight + heights.bottomHeight + heights.statusBarHeight - borderWidth ) ) ) {
498 $statusBar.attr( 'style', advanced ? '' : 'visibility: hidden;' );
499 $bottom.attr( 'style', '' );
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
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;
514 if ( windowPos > lastScrollPosition ) {
516 if ( fixedSideTop ) {
518 fixedSideTop = false;
519 sidebarTop = $sideSortables.offset().top - heights.adminBarHeight;
520 footerTop = $footer.offset().top;
522 // don't get over the footer
523 if ( footerTop < sidebarTop + heights.sideSortablesHeight + sidebarBottom ) {
524 sidebarTop = footerTop - heights.sideSortablesHeight - 12;
528 position: 'absolute',
532 } else if ( ! fixedSideBottom && heights.sideSortablesHeight + $sideSortables.offset().top + sidebarBottom < windowPos + heights.windowHeight ) {
534 fixedSideBottom = true;
539 bottom: sidebarBottom
542 } else if ( windowPos < lastScrollPosition ) {
544 if ( fixedSideBottom ) {
546 fixedSideBottom = false;
547 sidebarTop = $sideSortables.offset().top - sidebarBottom;
548 footerTop = $footer.offset().top;
550 // don't get over the footer
551 if ( footerTop < sidebarTop + heights.sideSortablesHeight + sidebarBottom ) {
552 sidebarTop = footerTop - heights.sideSortablesHeight - 12;
556 position: 'absolute',
560 } else if ( ! fixedSideTop && $sideSortables.offset().top >= windowPos + pinnedToolsTop ) {
573 // if the sidebar container is smaller than the viewport, then pin/unpin the top when scrolling
574 if ( windowPos >= ( postBodyTop - pinnedToolsTop ) ) {
576 $sideSortables.css( {
581 $sideSortables.attr( 'style', '' );
584 fixedSideTop = fixedSideBottom = false;
587 lastScrollPosition = windowPos;
589 $sideSortables.attr( 'style', '' );
590 fixedSideTop = fixedSideBottom = false;
595 paddingTop: heights.toolsHeight
600 paddingTop: heights.visualTopHeight + heights.menuBarHeight
604 marginTop: heights.textTopHeight
607 $textEditorClone.width( contentWrapWidth - 20 - ( borderWidth * 2 ) );
612 function fullscreenHide() {
617 function initialResize( callback ) {
618 for ( var i = 1; i < 6; i++ ) {
619 setTimeout( callback, 500 * i );
623 function afterScroll() {
624 clearTimeout( scrollTimer );
625 scrollTimer = setTimeout( adjust, 100 );
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 );
635 $wrap.addClass( 'wp-editor-expand' );
637 // Adjust when the window is scrolled or resized.
638 $window.on( 'scroll.editor-expand resize.editor-expand', function( event ) {
639 adjust( event.type );
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 );
650 window.scrollBy( 0, 1 );
654 }).on( 'wp-window-resized.editor-expand', function() {
655 if ( mceEditor && ! mceEditor.isHidden() ) {
656 mceEditor.execCommand( 'wpAutoResize' );
662 $textEditor.on( 'focus.editor-expand input.editor-expand propertychange.editor-expand', textEditorResize );
663 $textEditor.on( 'keyup.editor-expand', textEditorKeyup );
666 // Adjust when entering/exiting fullscreen mode.
667 fullscreen && fullscreen.pubsub.subscribe( 'hidden', fullscreenHide );
670 mceEditor.settings.wp_autoresize_on = true;
671 mceEditor.execCommand( 'wpAutoResizeOn' );
673 if ( ! mceEditor.isHidden() ) {
674 mceEditor.execCommand( 'wpAutoResize' );
678 if ( ! mceEditor || mceEditor.isHidden() ) {
684 $document.trigger( 'editor-expand-on' );
688 var height = parseInt( window.getUserSetting( 'ed_size', 300 ), 10 );
692 } else if ( height > 5000 ) {
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 );
702 $wrap.removeClass( 'wp-editor-expand' );
704 $window.off( '.editor-expand' );
705 $document.off( '.editor-expand' );
706 $textEditor.off( '.editor-expand' );
709 // Adjust when entering/exiting fullscreen mode.
710 fullscreen && fullscreen.pubsub.unsubscribe( 'hidden', fullscreenHide );
713 $.each( [ $visualTop, $textTop, $tools, $menuBar, $bottom, $statusBar, $contentWrap, $visualEditor, $textEditor, $sideSortables ], function( i, element ) {
714 element && element.attr( 'style', '' );
717 fixedTop = fixedBottom = fixedSideTop = fixedSideBottom = false;
720 mceEditor.settings.wp_autoresize_on = false;
721 mceEditor.execCommand( 'wpAutoResizeOff' );
723 if ( ! mceEditor.isHidden() ) {
727 mceEditor.theme.resizeTo( null, height );
733 $textEditor.height( height );
736 $document.trigger( 'editor-expand-off' );
740 if ( $wrap.hasClass( 'wp-editor-expand' ) ) {
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() {
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' ) ) {
757 window.setUserSetting( 'editor_expand', 'on' );
760 window.setUserSetting( 'editor_expand', 'off' );
764 // Expose on() and off()
765 window.editorExpand = {
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' ),
786 _isActive = window.getUserSetting( 'editor_expand', 'on' ) === 'on',
787 _isOn = _isActive ? window.getUserSetting( 'post_dfw' ) === 'on' : false,
791 faded, fadedAdminBar, fadedSlug,
792 editorRect, x, y, mouseY, scrollY,
793 focusLostTimer, overlayTimer, editorHasFocus;
795 $body.append( $overlay );
800 top: $adminBar.height(),
811 $window.on( 'mousemove.focus', function( event ) {
812 mouseY = event.pageY;
815 function recalcEditorRect() {
816 editorRect = $editor.offset();
817 editorRect.right = editorRect.left + $editor.outerWidth();
818 editorRect.bottom = editorRect.top + $editor.outerHeight();
821 function activate() {
825 $document.trigger( 'dfw-activate' );
826 $content.on( 'keydown.focus-shortcut', toggleViaKeyboard );
830 function deactivate() {
836 $document.trigger( 'dfw-deactivate' );
837 $content.off( 'keydown.focus-shortcut' );
841 function isActive() {
846 if ( ! _isOn && _isActive ) {
849 $content.on( 'keydown.focus', fadeOut );
851 $title.add( $content ).on( 'blur.focus', maybeFadeIn );
855 window.setUserSetting( 'post_dfw', 'on' );
857 $document.trigger( 'dfw-on' );
865 $title.add( $content ).off( '.focus' );
869 $editor.off( '.focus' );
871 window.setUserSetting( 'post_dfw', 'off' );
873 $document.trigger( 'dfw-off' );
889 function fadeOut( event ) {
890 var key = event && event.keyCode;
892 // fadeIn and return on Escape and keyboard shortcut Alt+Shift+W.
893 if ( key === 27 || ( key === 87 && event.altKey && event.shiftKey ) ) {
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 ) ||
902 ( key >= 91 && key <= 93 ) ||
904 ( key >= 112 && key <= 135 ) ||
905 // Num Lock, Scroll Lock, OEM
906 ( key >= 144 && key <= 150 ) ||
907 // OEM or non-printable
916 clearTimeout( overlayTimer );
918 overlayTimer = setTimeout( function() {
922 $editor.css( 'z-index', 9998 );
925 // Always recalculate the editor area entering the overlay with the mouse.
926 .on( 'mouseenter.focus', function() {
929 $window.on( 'scroll.focus', function() {
930 var nScrollY = window.pageYOffset;
936 mouseY < editorRect.top - buffer ||
937 mouseY > editorRect.bottom + buffer
945 .on( 'mouseleave.focus', function() {
947 traveledX = traveledY = 0;
949 $window.off( 'scroll.focus' );
951 // Fade in when the mouse moves away form the editor area.
952 .on( 'mousemove.focus', function( event ) {
953 var nx = event.clientX,
955 pageYOffset = window.pageYOffset,
956 pageXOffset = window.pageXOffset;
958 if ( x && y && ( nx !== x || ny !== y ) ) {
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 )
965 traveledX += Math.abs( x - nx );
966 traveledY += Math.abs( y - ny );
969 ny <= editorRect.top - buffer - pageYOffset ||
970 ny >= editorRect.bottom + buffer - pageYOffset ||
971 nx <= editorRect.left - buffer - pageXOffset ||
972 nx >= editorRect.right + buffer - pageXOffset
980 traveledX = traveledY = 0;
985 traveledX = traveledY = 0;
992 // When the overlay is touched, always fade in and cancel the event.
993 .on( 'touchstart.focus', function( event ) {
994 event.preventDefault();
998 $editor.off( 'mouseenter.focus' );
1000 if ( focusLostTimer ) {
1001 clearTimeout( focusLostTimer );
1002 focusLostTimer = null;
1005 $body.addClass( 'focus-on' ).removeClass( 'focus-off' );
1012 function fadeIn( event ) {
1016 clearTimeout( overlayTimer );
1018 overlayTimer = setTimeout( function() {
1022 $editor.css( 'z-index', '' );
1024 $overlay.off( 'mouseenter.focus mouseleave.focus mousemove.focus touchstart.focus' );
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.
1031 if ( 'undefined' === typeof event ) {
1032 $editor.on( 'mouseenter.focus', function() {
1033 if ( $.contains( $editor.get( 0 ), document.activeElement ) || editorHasFocus ) {
1039 focusLostTimer = setTimeout( function() {
1040 focusLostTimer = null;
1041 $editor.off( 'mouseenter.focus' );
1044 $body.addClass( 'focus-off' ).removeClass( 'focus-on' );
1051 function maybeFadeIn() {
1052 setTimeout( function() {
1053 var position = document.activeElement.compareDocumentPosition( $editor.get( 0 ) );
1055 function hasFocus( $el ) {
1056 return $.contains( $el.get( 0 ), document.activeElement );
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 ) ) ) {
1066 function fadeOutAdminBar() {
1067 if ( ! fadedAdminBar && faded ) {
1068 fadedAdminBar = true;
1071 .on( 'mouseenter.focus', function() {
1072 $adminBar.addClass( 'focus-off' );
1074 .on( 'mouseleave.focus', function() {
1075 $adminBar.removeClass( 'focus-off' );
1080 function fadeInAdminBar() {
1081 if ( fadedAdminBar ) {
1082 fadedAdminBar = false;
1084 $adminBar.off( '.focus' );
1088 function fadeOutSlug() {
1089 if ( ! fadedSlug && faded && ! $slug.find( ':focus').length ) {
1092 $slug.stop().fadeTo( 'fast', 0.3 ).on( 'mouseenter.focus', fadeInSlug ).off( 'mouseleave.focus' );
1094 $slugFocusEl.on( 'focus.focus', fadeInSlug ).off( 'blur.focus' );
1098 function fadeInSlug() {
1102 $slug.stop().fadeTo( 'fast', 1 ).on( 'mouseleave.focus', fadeOutSlug ).off( 'mouseenter.focus' );
1104 $slugFocusEl.on( 'blur.focus', fadeOutSlug ).off( 'focus.focus' );
1108 function toggleViaKeyboard( event ) {
1109 if ( event.altKey && event.shiftKey && 87 === event.keyCode ) {
1114 if ( $( '#postdivrich' ).hasClass( 'wp-editor-expand' ) ) {
1115 $content.on( 'keydown.focus-shortcut', toggleViaKeyboard );
1118 $document.on( 'tinymce-editor-setup.focus', function( event, editor ) {
1119 editor.addButton( 'dfw', {
1121 classes: 'wp-dfw btn widget',
1122 disabled: ! _isActive,
1124 onPostRender: function() {
1128 .on( 'dfw-activate.focus', function() {
1129 button.disabled( false );
1131 .on( 'dfw-deactivate.focus', function() {
1132 button.disabled( true );
1134 .on( 'dfw-on.focus', function() {
1135 button.active( true );
1137 .on( 'dfw-off.focus', function() {
1138 button.active( false );
1141 tooltip: 'Distraction-free writing mode',
1142 shortcut: 'Alt+Shift+W'
1145 editor.addCommand( 'wpToggleDFW', toggle );
1146 editor.addShortcut( 'alt+shift+w', '', 'wpToggleDFW' );
1149 $document.on( 'tinymce-editor-init.focus', function( event, editor ) {
1150 var mceBind, mceUnbind;
1153 editorHasFocus = true;
1157 editorHasFocus = false;
1160 if ( editor.id === 'content' ) {
1161 $editorWindow = $( editor.getWin() );
1162 $editorIframe = $( editor.getContentAreaContainer() ).find( 'iframe' );
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 );
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 );
1184 $document.on( 'dfw-on.focus', mceBind ).on( 'dfw-off.focus', mceUnbind );
1186 // Make sure the body focuses when clicking outside it.
1187 editor.on( 'click', function( event ) {
1188 if ( event.target === editor.getDoc().documentElement ) {
1195 $document.on( 'quicktags-init', function( event, editor ) {
1198 if ( editor.settings.buttons && ( ',' + editor.settings.buttons + ',' ).indexOf( ',dfw,' ) !== -1 ) {
1199 $button = $( '#' + editor.name + '_dfw' );
1202 .on( 'dfw-activate', function() {
1203 $button.prop( 'disabled', false );
1205 .on( 'dfw-deactivate', function() {
1206 $button.prop( 'disabled', true );
1208 .on( 'dfw-on', function() {
1209 $button.addClass( 'active' );
1211 .on( 'dfw-off', function() {
1212 $button.removeClass( 'active' );
1217 $document.on( 'editor-expand-on.focus', activate ).on( 'editor-expand-off.focus', deactivate );
1220 $content.on( 'keydown.focus', fadeOut );
1222 $title.add( $content ).on( 'blur.focus', maybeFadeIn );
1225 window.wp = window.wp || {};
1226 window.wp.editor = window.wp.editor || {};
1227 window.wp.editor.dfw = {
1229 deactivate: deactivate,
1237 } )( window, window.jQuery );