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 textEditor = $textEditor[0],
20 $bottom = $( '#post-status-info' ),
23 $sideSortables = $( '#side-sortables' ),
24 $postboxContainer = $( '#postbox-container-1' ),
25 $postBody = $('#post-body'),
26 fullscreen = window.wp.editor && window.wp.editor.fullscreen,
28 mceBind = function(){},
29 mceUnbind = function(){},
33 fixedSideBottom = false,
35 lastScrollPosition = 0,
36 pageYOffsetAtTop = 130,
39 autoresizeMinHeight = 300,
40 initialMode = $contentWrap.hasClass( 'tmce-active' ) ? 'tinymce' : 'html',
41 advanced = !! parseInt( window.getUserSetting( 'hidetb' ), 10 ),
42 // These are corrected when adjust() runs, except on scrolling if already set.
53 sideSortablesHeight: 0
56 var shrinkTextarea = window._.throttle( function() {
57 var x = window.scrollX || document.documentElement.scrollLeft;
58 var y = window.scrollY || document.documentElement.scrollTop;
59 var height = parseInt( textEditor.style.height, 10 );
61 textEditor.style.height = autoresizeMinHeight + 'px';
63 if ( textEditor.scrollHeight > autoresizeMinHeight ) {
64 textEditor.style.height = textEditor.scrollHeight + 'px';
67 if ( typeof x !== 'undefined' ) {
68 window.scrollTo( x, y );
71 if ( textEditor.scrollHeight < height ) {
76 function textEditorResize() {
77 var length = textEditor.value.length;
79 if ( mceEditor && ! mceEditor.isHidden() ) {
83 if ( ! mceEditor && initialMode === 'tinymce' ) {
87 if ( length < oldTextLength ) {
89 } else if ( parseInt( textEditor.style.height, 10 ) < textEditor.scrollHeight ) {
90 textEditor.style.height = Math.ceil( textEditor.scrollHeight ) + 'px';
94 oldTextLength = length;
97 function getHeights() {
98 var windowWidth = $window.width();
101 windowHeight: $window.height(),
102 windowWidth: windowWidth,
103 adminBarHeight: ( windowWidth > 600 ? $adminBar.outerHeight() : 0 ),
104 toolsHeight: $tools.outerHeight() || 0,
105 menuBarHeight: $menuBar.outerHeight() || 0,
106 visualTopHeight: $visualTop.outerHeight() || 0,
107 textTopHeight: $textTop.outerHeight() || 0,
108 bottomHeight: $bottom.outerHeight() || 0,
109 statusBarHeight: $statusBar.outerHeight() || 0,
110 sideSortablesHeight: $sideSortables.height() || 0
114 if ( heights.menuBarHeight < 3 ) {
115 heights.menuBarHeight = 0;
119 // We need to wait for TinyMCE to initialize.
120 $document.on( 'tinymce-editor-init.editor-expand', function( event, editor ) {
121 var VK = window.tinymce.util.VK,
122 hideFloatPanels = _.debounce( function() {
123 ! $( '.mce-floatpanel:hover' ).length && window.tinymce.ui.FloatPanel.hideAll();
124 $( '.mce-tooltip' ).hide();
127 // Make sure it's the main editor.
128 if ( editor.id !== 'content' ) {
132 // Copy the editor instance.
135 // Set the minimum height to the initial viewport height.
136 editor.settings.autoresize_min_height = autoresizeMinHeight;
138 // Get the necessary UI elements.
139 $visualTop = $contentWrap.find( '.mce-toolbar-grp' );
140 $visualEditor = $contentWrap.find( '.mce-edit-area' );
141 $statusBar = $contentWrap.find( '.mce-statusbar' );
142 $menuBar = $contentWrap.find( '.mce-menubar' );
144 function mceGetCursorOffset() {
145 var node = editor.selection.getNode(),
148 if ( editor.wp && editor.wp.getView && ( view = editor.wp.getView( node ) ) ) {
149 offset = view.getBoundingClientRect();
151 range = editor.selection.getRng();
154 offset = range.getClientRects()[0];
158 offset = node.getBoundingClientRect();
162 return offset.height ? offset : false;
165 // Make sure the cursor is always visible.
166 // This is not only necessary to keep the cursor between the toolbars,
167 // but also to scroll the window when the cursor moves out of the viewport to a wpview.
168 // Setting a buffer > 0 will prevent the browser default.
169 // Some browsers will scroll to the middle,
170 // others to the top/bottom of the *window* when moving the cursor out of the viewport.
171 function mceKeyup( event ) {
172 var key = event.keyCode;
174 // Bail on special keys.
175 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 ) ) {
177 // OS keys, function keys, num lock, scroll lock
178 } else if ( ( key >= 91 && key <= 93 ) || ( key >= 112 && key <= 123 ) || key === 144 || key === 145 ) {
185 function mceScroll( key ) {
186 var offset = mceGetCursorOffset(),
188 cursorTop, cursorBottom, editorTop, editorBottom;
194 cursorTop = offset.top + editor.iframeElement.getBoundingClientRect().top;
195 cursorBottom = cursorTop + offset.height;
196 cursorTop = cursorTop - buffer;
197 cursorBottom = cursorBottom + buffer;
198 editorTop = heights.adminBarHeight + heights.toolsHeight + heights.menuBarHeight + heights.visualTopHeight;
199 editorBottom = heights.windowHeight - ( advanced ? heights.bottomHeight + heights.statusBarHeight : 0 );
201 // Don't scroll if the node is taller than the visible part of the editor
202 if ( editorBottom - editorTop < offset.height ) {
206 if ( cursorTop < editorTop && ( key === VK.UP || key === VK.LEFT || key === VK.BACKSPACE ) ) {
207 window.scrollTo( window.pageXOffset, cursorTop + window.pageYOffset - editorTop );
208 } else if ( cursorBottom > editorBottom ) {
209 window.scrollTo( window.pageXOffset, cursorBottom + window.pageYOffset - editorBottom );
213 function mceFullscreenToggled( event ) {
214 if ( ! event.state ) {
219 // Adjust when switching editor modes.
221 $window.on( 'scroll.mce-float-panels', hideFloatPanels );
223 setTimeout( function() {
224 editor.execCommand( 'wpAutoResize' );
230 $window.off( 'scroll.mce-float-panels' );
232 setTimeout( function() {
233 var top = $contentWrap.offset().top;
235 if ( window.pageYOffset > top ) {
236 window.scrollTo( window.pageXOffset, top - heights.adminBarHeight );
246 function toggleAdvanced() {
247 advanced = ! advanced;
250 mceBind = function() {
251 editor.on( 'keyup', mceKeyup );
252 editor.on( 'show', mceShow );
253 editor.on( 'hide', mceHide );
254 editor.on( 'wp-toolbar-toggle', toggleAdvanced );
255 // Adjust when the editor resizes.
256 editor.on( 'setcontent wp-autoresize wp-toolbar-toggle', adjust );
257 // Don't hide the caret after undo/redo.
258 editor.on( 'undo redo', mceScroll );
259 // Adjust when exiting TinyMCE's fullscreen mode.
260 editor.on( 'FullscreenStateChanged', mceFullscreenToggled );
262 $window.off( 'scroll.mce-float-panels' ).on( 'scroll.mce-float-panels', hideFloatPanels );
265 mceUnbind = function() {
266 editor.off( 'keyup', mceKeyup );
267 editor.off( 'show', mceShow );
268 editor.off( 'hide', mceHide );
269 editor.off( 'wp-toolbar-toggle', toggleAdvanced );
270 editor.off( 'setcontent wp-autoresize wp-toolbar-toggle', adjust );
271 editor.off( 'undo redo', mceScroll );
272 editor.off( 'FullscreenStateChanged', mceFullscreenToggled );
274 $window.off( 'scroll.mce-float-panels' );
277 if ( $wrap.hasClass( 'wp-editor-expand' ) ) {
278 // Adjust "immediately"
280 initialResize( adjust );
284 // Adjust the toolbars based on the active editor mode.
285 function adjust( event ) {
286 // Make sure we're not in fullscreen mode.
287 if ( fullscreen && fullscreen.settings.visible ) {
291 var windowPos = $window.scrollTop(),
292 type = event && event.type,
293 resize = type !== 'scroll',
294 visual = mceEditor && ! mceEditor.isHidden(),
295 buffer = autoresizeMinHeight,
296 postBodyTop = $postBody.offset().top,
298 contentWrapWidth = $contentWrap.width(),
299 $top, $editor, sidebarTop, footerTop, canPin,
300 topPos, topHeight, editorPos, editorHeight;
302 // Refresh the heights
303 if ( resize || ! heights.windowHeight ) {
307 if ( ! visual && type === 'resize' ) {
313 $editor = $visualEditor;
314 topHeight = heights.visualTopHeight;
317 $editor = $textEditor;
318 topHeight = heights.textTopHeight;
321 // TinyMCE still initializing.
322 if ( ! visual && ! $top.length ) {
326 topPos = $top.parent().offset().top;
327 editorPos = $editor.offset().top;
328 editorHeight = $editor.outerHeight();
331 canPin = visual ? autoresizeMinHeight + topHeight : autoresizeMinHeight + 20; // 20px from textarea padding
332 canPin = editorHeight > ( canPin + 5 );
337 position: 'absolute',
339 width: contentWrapWidth
342 if ( visual && $menuBar.length ) {
344 position: 'absolute',
346 width: contentWrapWidth - ( borderWidth * 2 )
351 position: 'absolute',
352 top: heights.menuBarHeight,
353 width: contentWrapWidth - ( borderWidth * 2 ) - ( visual ? 0 : ( $top.outerWidth() - $top.width() ) )
356 $statusBar.attr( 'style', advanced ? '' : 'visibility: hidden;' );
357 $bottom.attr( 'style', '' );
360 // Maybe pin the top.
361 if ( ( ! fixedTop || resize ) &&
362 // Handle scrolling down.
363 ( windowPos >= ( topPos - heights.toolsHeight - heights.adminBarHeight ) &&
364 // Handle scrolling up.
365 windowPos <= ( topPos - heights.toolsHeight - heights.adminBarHeight + editorHeight - buffer ) ) ) {
370 top: heights.adminBarHeight,
371 width: contentWrapWidth
374 if ( visual && $menuBar.length ) {
377 top: heights.adminBarHeight + heights.toolsHeight,
378 width: contentWrapWidth - ( borderWidth * 2 ) - ( visual ? 0 : ( $top.outerWidth() - $top.width() ) )
384 top: heights.adminBarHeight + heights.toolsHeight + heights.menuBarHeight,
385 width: contentWrapWidth - ( borderWidth * 2 ) - ( visual ? 0 : ( $top.outerWidth() - $top.width() ) )
387 // Maybe unpin the top.
388 } else if ( fixedTop || resize ) {
389 // Handle scrolling up.
390 if ( windowPos <= ( topPos - heights.toolsHeight - heights.adminBarHeight ) ) {
394 position: 'absolute',
396 width: contentWrapWidth
399 if ( visual && $menuBar.length ) {
401 position: 'absolute',
403 width: contentWrapWidth - ( borderWidth * 2 )
408 position: 'absolute',
409 top: heights.menuBarHeight,
410 width: contentWrapWidth - ( borderWidth * 2 ) - ( visual ? 0 : ( $top.outerWidth() - $top.width() ) )
412 // Handle scrolling down.
413 } else if ( windowPos >= ( topPos - heights.toolsHeight - heights.adminBarHeight + editorHeight - buffer ) ) {
417 position: 'absolute',
418 top: editorHeight - buffer,
419 width: contentWrapWidth
422 if ( visual && $menuBar.length ) {
424 position: 'absolute',
425 top: editorHeight - buffer,
426 width: contentWrapWidth - ( borderWidth * 2 )
431 position: 'absolute',
432 top: editorHeight - buffer + heights.menuBarHeight,
433 width: contentWrapWidth - ( borderWidth * 2 ) - ( visual ? 0 : ( $top.outerWidth() - $top.width() ) )
438 // Maybe adjust the bottom bar.
439 if ( ( ! fixedBottom || ( resize && advanced ) ) &&
440 // +[n] for the border around the .wp-editor-container.
441 ( windowPos + heights.windowHeight ) <= ( editorPos + editorHeight + heights.bottomHeight + heights.statusBarHeight + borderWidth ) ) {
443 if ( event && event.deltaHeight > 0 && event.deltaHeight < 100 ) {
444 window.scrollBy( 0, event.deltaHeight );
445 } else if ( visual && advanced ) {
450 bottom: heights.bottomHeight,
452 width: contentWrapWidth - ( borderWidth * 2 )
458 width: contentWrapWidth
461 } else if ( ( ! advanced && fixedBottom ) ||
462 ( ( fixedBottom || resize ) &&
463 ( windowPos + heights.windowHeight ) > ( editorPos + editorHeight + heights.bottomHeight + heights.statusBarHeight - borderWidth ) ) ) {
466 $statusBar.attr( 'style', advanced ? '' : 'visibility: hidden;' );
467 $bottom.attr( 'style', '' );
472 if ( $postboxContainer.width() < 300 && heights.windowWidth > 600 && // sidebar position is changed with @media from CSS, make sure it is on the side
473 $document.height() > ( $sideSortables.height() + postBodyTop + 120 ) && // the sidebar is not the tallest element
474 heights.windowHeight < editorHeight ) { // the editor is taller than the viewport
476 if ( ( heights.sideSortablesHeight + pinnedToolsTop + sidebarBottom ) > heights.windowHeight || fixedSideTop || fixedSideBottom ) {
477 // Reset when scrolling to the top
478 if ( windowPos + pinnedToolsTop <= postBodyTop ) {
479 $sideSortables.attr( 'style', '' );
480 fixedSideTop = fixedSideBottom = false;
482 if ( windowPos > lastScrollPosition ) {
484 if ( fixedSideTop ) {
486 fixedSideTop = false;
487 sidebarTop = $sideSortables.offset().top - heights.adminBarHeight;
488 footerTop = $footer.offset().top;
490 // don't get over the footer
491 if ( footerTop < sidebarTop + heights.sideSortablesHeight + sidebarBottom ) {
492 sidebarTop = footerTop - heights.sideSortablesHeight - 12;
496 position: 'absolute',
500 } else if ( ! fixedSideBottom && heights.sideSortablesHeight + $sideSortables.offset().top + sidebarBottom < windowPos + heights.windowHeight ) {
502 fixedSideBottom = true;
507 bottom: sidebarBottom
510 } else if ( windowPos < lastScrollPosition ) {
512 if ( fixedSideBottom ) {
514 fixedSideBottom = false;
515 sidebarTop = $sideSortables.offset().top - sidebarBottom;
516 footerTop = $footer.offset().top;
518 // don't get over the footer
519 if ( footerTop < sidebarTop + heights.sideSortablesHeight + sidebarBottom ) {
520 sidebarTop = footerTop - heights.sideSortablesHeight - 12;
524 position: 'absolute',
528 } else if ( ! fixedSideTop && $sideSortables.offset().top >= windowPos + pinnedToolsTop ) {
541 // if the sidebar container is smaller than the viewport, then pin/unpin the top when scrolling
542 if ( windowPos >= ( postBodyTop - pinnedToolsTop ) ) {
544 $sideSortables.css( {
549 $sideSortables.attr( 'style', '' );
552 fixedSideTop = fixedSideBottom = false;
555 lastScrollPosition = windowPos;
557 $sideSortables.attr( 'style', '' );
558 fixedSideTop = fixedSideBottom = false;
563 paddingTop: heights.toolsHeight
568 paddingTop: heights.visualTopHeight + heights.menuBarHeight
572 marginTop: heights.textTopHeight
578 function fullscreenHide() {
583 function initialResize( callback ) {
584 for ( var i = 1; i < 6; i++ ) {
585 setTimeout( callback, 500 * i );
589 function afterScroll() {
590 clearTimeout( scrollTimer );
591 scrollTimer = setTimeout( adjust, 100 );
595 // Scroll to the top when triggering this from JS.
596 // Ensures toolbars are pinned properly.
597 if ( window.pageYOffset && window.pageYOffset > pageYOffsetAtTop ) {
598 window.scrollTo( window.pageXOffset, 0 );
601 $wrap.addClass( 'wp-editor-expand' );
603 // Adjust when the window is scrolled or resized.
604 $window.on( 'scroll.editor-expand resize.editor-expand', function( event ) {
605 adjust( event.type );
609 // Adjust when collapsing the menu, changing the columns, changing the body class.
610 $document.on( 'wp-collapse-menu.editor-expand postboxes-columnchange.editor-expand editor-classchange.editor-expand', adjust )
611 .on( 'postbox-toggled.editor-expand postbox-moved.editor-expand', function() {
612 if ( ! fixedSideTop && ! fixedSideBottom && window.pageYOffset > pinnedToolsTop ) {
613 fixedSideBottom = true;
614 window.scrollBy( 0, -1 );
616 window.scrollBy( 0, 1 );
620 }).on( 'wp-window-resized.editor-expand', function() {
621 if ( mceEditor && ! mceEditor.isHidden() ) {
622 mceEditor.execCommand( 'wpAutoResize' );
628 $textEditor.on( 'focus.editor-expand input.editor-expand propertychange.editor-expand', textEditorResize );
631 // Adjust when entering/exiting fullscreen mode.
632 fullscreen && fullscreen.pubsub.subscribe( 'hidden', fullscreenHide );
635 mceEditor.settings.wp_autoresize_on = true;
636 mceEditor.execCommand( 'wpAutoResizeOn' );
638 if ( ! mceEditor.isHidden() ) {
639 mceEditor.execCommand( 'wpAutoResize' );
643 if ( ! mceEditor || mceEditor.isHidden() ) {
649 $document.trigger( 'editor-expand-on' );
653 var height = parseInt( window.getUserSetting( 'ed_size', 300 ), 10 );
657 } else if ( height > 5000 ) {
661 // Scroll to the top when triggering this from JS.
662 // Ensures toolbars are reset properly.
663 if ( window.pageYOffset && window.pageYOffset > pageYOffsetAtTop ) {
664 window.scrollTo( window.pageXOffset, 0 );
667 $wrap.removeClass( 'wp-editor-expand' );
669 $window.off( '.editor-expand' );
670 $document.off( '.editor-expand' );
671 $textEditor.off( '.editor-expand' );
674 // Adjust when entering/exiting fullscreen mode.
675 fullscreen && fullscreen.pubsub.unsubscribe( 'hidden', fullscreenHide );
678 $.each( [ $visualTop, $textTop, $tools, $menuBar, $bottom, $statusBar, $contentWrap, $visualEditor, $textEditor, $sideSortables ], function( i, element ) {
679 element && element.attr( 'style', '' );
682 fixedTop = fixedBottom = fixedSideTop = fixedSideBottom = false;
685 mceEditor.settings.wp_autoresize_on = false;
686 mceEditor.execCommand( 'wpAutoResizeOff' );
688 if ( ! mceEditor.isHidden() ) {
692 mceEditor.theme.resizeTo( null, height );
698 $textEditor.height( height );
701 $document.trigger( 'editor-expand-off' );
705 if ( $wrap.hasClass( 'wp-editor-expand' ) ) {
708 // Ideally we need to resize just after CSS has fully loaded and QuickTags is ready.
709 if ( $contentWrap.hasClass( 'html-active' ) ) {
710 initialResize( function() {
717 // Show the on/off checkbox
718 $( '#adv-settings .editor-expand' ).show();
719 $( '#editor-expand-toggle' ).on( 'change.editor-expand', function() {
720 if ( $(this).prop( 'checked' ) ) {
722 window.setUserSetting( 'editor_expand', 'on' );
725 window.setUserSetting( 'editor_expand', 'off' );
729 // Expose on() and off()
730 window.editorExpand = {
738 var $body = $( document.body ),
739 $wrap = $( '#wpcontent' ),
740 $editor = $( '#post-body-content' ),
741 $title = $( '#title' ),
742 $content = $( '#content' ),
743 $overlay = $( document.createElement( 'DIV' ) ),
744 $slug = $( '#edit-slug-box' ),
745 $slugFocusEl = $slug.find( 'a' )
746 .add( $slug.find( 'button' ) )
747 .add( $slug.find( 'input' ) ),
748 $menuWrap = $( '#adminmenuwrap' ),
751 _isActive = window.getUserSetting( 'editor_expand', 'on' ) === 'on',
752 _isOn = _isActive ? window.getUserSetting( 'post_dfw' ) === 'on' : false,
756 faded, fadedAdminBar, fadedSlug,
757 editorRect, x, y, mouseY, scrollY,
758 focusLostTimer, overlayTimer, editorHasFocus;
760 $body.append( $overlay );
765 top: $adminBar.height(),
776 $window.on( 'mousemove.focus', function( event ) {
777 mouseY = event.pageY;
780 function recalcEditorRect() {
781 editorRect = $editor.offset();
782 editorRect.right = editorRect.left + $editor.outerWidth();
783 editorRect.bottom = editorRect.top + $editor.outerHeight();
786 function activate() {
790 $document.trigger( 'dfw-activate' );
791 $content.on( 'keydown.focus-shortcut', toggleViaKeyboard );
795 function deactivate() {
801 $document.trigger( 'dfw-deactivate' );
802 $content.off( 'keydown.focus-shortcut' );
806 function isActive() {
811 if ( ! _isOn && _isActive ) {
814 $content.on( 'keydown.focus', fadeOut );
816 $title.add( $content ).on( 'blur.focus', maybeFadeIn );
820 window.setUserSetting( 'post_dfw', 'on' );
822 $document.trigger( 'dfw-on' );
830 $title.add( $content ).off( '.focus' );
834 $editor.off( '.focus' );
836 window.setUserSetting( 'post_dfw', 'off' );
838 $document.trigger( 'dfw-off' );
854 function fadeOut( event ) {
856 key = event && event.keyCode;
858 if ( window.navigator.platform ) {
859 isMac = ( window.navigator.platform.indexOf( 'Mac' ) > -1 );
862 // fadeIn and return on Escape and keyboard shortcut Alt+Shift+W and Ctrl+Opt+W.
863 if ( key === 27 || ( key === 87 && event.altKey && ( ( ! isMac && event.shiftKey ) || ( isMac && event.ctrlKey ) ) ) ) {
868 if ( event && ( event.metaKey || ( event.ctrlKey && ! event.altKey ) || ( event.altKey && event.shiftKey ) || ( key && (
869 // Special keys ( tab, ctrl, alt, esc, arrow keys... )
870 ( key <= 47 && key !== 8 && key !== 13 && key !== 32 && key !== 46 ) ||
872 ( key >= 91 && key <= 93 ) ||
874 ( key >= 112 && key <= 135 ) ||
875 // Num Lock, Scroll Lock, OEM
876 ( key >= 144 && key <= 150 ) ||
877 // OEM or non-printable
886 clearTimeout( overlayTimer );
888 overlayTimer = setTimeout( function() {
892 $editor.css( 'z-index', 9998 );
895 // Always recalculate the editor area entering the overlay with the mouse.
896 .on( 'mouseenter.focus', function() {
899 $window.on( 'scroll.focus', function() {
900 var nScrollY = window.pageYOffset;
906 mouseY < editorRect.top - buffer ||
907 mouseY > editorRect.bottom + buffer
915 .on( 'mouseleave.focus', function() {
917 traveledX = traveledY = 0;
919 $window.off( 'scroll.focus' );
921 // Fade in when the mouse moves away form the editor area.
922 .on( 'mousemove.focus', function( event ) {
923 var nx = event.clientX,
925 pageYOffset = window.pageYOffset,
926 pageXOffset = window.pageXOffset;
928 if ( x && y && ( nx !== x || ny !== y ) ) {
930 ( ny <= y && ny < editorRect.top - pageYOffset ) ||
931 ( ny >= y && ny > editorRect.bottom - pageYOffset ) ||
932 ( nx <= x && nx < editorRect.left - pageXOffset ) ||
933 ( nx >= x && nx > editorRect.right - pageXOffset )
935 traveledX += Math.abs( x - nx );
936 traveledY += Math.abs( y - ny );
939 ny <= editorRect.top - buffer - pageYOffset ||
940 ny >= editorRect.bottom + buffer - pageYOffset ||
941 nx <= editorRect.left - buffer - pageXOffset ||
942 nx >= editorRect.right + buffer - pageXOffset
950 traveledX = traveledY = 0;
955 traveledX = traveledY = 0;
962 // When the overlay is touched, always fade in and cancel the event.
963 .on( 'touchstart.focus', function( event ) {
964 event.preventDefault();
968 $editor.off( 'mouseenter.focus' );
970 if ( focusLostTimer ) {
971 clearTimeout( focusLostTimer );
972 focusLostTimer = null;
975 $body.addClass( 'focus-on' ).removeClass( 'focus-off' );
982 function fadeIn( event ) {
986 clearTimeout( overlayTimer );
988 overlayTimer = setTimeout( function() {
992 $editor.css( 'z-index', '' );
994 $overlay.off( 'mouseenter.focus mouseleave.focus mousemove.focus touchstart.focus' );
997 * When fading in, temporarily watch for refocus and fade back out - helps
998 * with 'accidental' editor exits with the mouse. When fading in and the event
999 * is a key event (Escape or Alt+Shift+W) don't watch for refocus.
1001 if ( 'undefined' === typeof event ) {
1002 $editor.on( 'mouseenter.focus', function() {
1003 if ( $.contains( $editor.get( 0 ), document.activeElement ) || editorHasFocus ) {
1009 focusLostTimer = setTimeout( function() {
1010 focusLostTimer = null;
1011 $editor.off( 'mouseenter.focus' );
1014 $body.addClass( 'focus-off' ).removeClass( 'focus-on' );
1021 function maybeFadeIn() {
1022 setTimeout( function() {
1023 var position = document.activeElement.compareDocumentPosition( $editor.get( 0 ) );
1025 function hasFocus( $el ) {
1026 return $.contains( $el.get( 0 ), document.activeElement );
1029 // The focused node is before or behind the editor area, and not outside the wrap.
1030 if ( ( position === 2 || position === 4 ) && ( hasFocus( $menuWrap ) || hasFocus( $wrap ) || hasFocus( $footer ) ) ) {
1036 function fadeOutAdminBar() {
1037 if ( ! fadedAdminBar && faded ) {
1038 fadedAdminBar = true;
1041 .on( 'mouseenter.focus', function() {
1042 $adminBar.addClass( 'focus-off' );
1044 .on( 'mouseleave.focus', function() {
1045 $adminBar.removeClass( 'focus-off' );
1050 function fadeInAdminBar() {
1051 if ( fadedAdminBar ) {
1052 fadedAdminBar = false;
1054 $adminBar.off( '.focus' );
1058 function fadeOutSlug() {
1059 if ( ! fadedSlug && faded && ! $slug.find( ':focus').length ) {
1062 $slug.stop().fadeTo( 'fast', 0.3 ).on( 'mouseenter.focus', fadeInSlug ).off( 'mouseleave.focus' );
1064 $slugFocusEl.on( 'focus.focus', fadeInSlug ).off( 'blur.focus' );
1068 function fadeInSlug() {
1072 $slug.stop().fadeTo( 'fast', 1 ).on( 'mouseleave.focus', fadeOutSlug ).off( 'mouseenter.focus' );
1074 $slugFocusEl.on( 'blur.focus', fadeOutSlug ).off( 'focus.focus' );
1078 function toggleViaKeyboard( event ) {
1079 if ( event.altKey && event.shiftKey && 87 === event.keyCode ) {
1084 if ( $( '#postdivrich' ).hasClass( 'wp-editor-expand' ) ) {
1085 $content.on( 'keydown.focus-shortcut', toggleViaKeyboard );
1088 $document.on( 'tinymce-editor-setup.focus', function( event, editor ) {
1089 editor.addButton( 'dfw', {
1091 classes: 'wp-dfw btn widget',
1092 disabled: ! _isActive,
1094 onPostRender: function() {
1098 .on( 'dfw-activate.focus', function() {
1099 button.disabled( false );
1101 .on( 'dfw-deactivate.focus', function() {
1102 button.disabled( true );
1104 .on( 'dfw-on.focus', function() {
1105 button.active( true );
1107 .on( 'dfw-off.focus', function() {
1108 button.active( false );
1111 tooltip: 'Distraction-free writing mode',
1112 shortcut: 'Alt+Shift+W'
1115 editor.addCommand( 'wpToggleDFW', toggle );
1116 editor.addShortcut( 'access+w', '', 'wpToggleDFW' );
1119 $document.on( 'tinymce-editor-init.focus', function( event, editor ) {
1120 var mceBind, mceUnbind;
1123 editorHasFocus = true;
1127 editorHasFocus = false;
1130 if ( editor.id === 'content' ) {
1131 $editorWindow = $( editor.getWin() );
1132 $editorIframe = $( editor.getContentAreaContainer() ).find( 'iframe' );
1134 mceBind = function() {
1135 editor.on( 'keydown', fadeOut );
1136 editor.on( 'blur', maybeFadeIn );
1137 editor.on( 'focus', focus );
1138 editor.on( 'blur', blur );
1139 editor.on( 'wp-autoresize', recalcEditorRect );
1142 mceUnbind = function() {
1143 editor.off( 'keydown', fadeOut );
1144 editor.off( 'blur', maybeFadeIn );
1145 editor.off( 'focus', focus );
1146 editor.off( 'blur', blur );
1147 editor.off( 'wp-autoresize', recalcEditorRect );
1154 $document.on( 'dfw-on.focus', mceBind ).on( 'dfw-off.focus', mceUnbind );
1156 // Make sure the body focuses when clicking outside it.
1157 editor.on( 'click', function( event ) {
1158 if ( event.target === editor.getDoc().documentElement ) {
1165 $document.on( 'quicktags-init', function( event, editor ) {
1168 if ( editor.settings.buttons && ( ',' + editor.settings.buttons + ',' ).indexOf( ',dfw,' ) !== -1 ) {
1169 $button = $( '#' + editor.name + '_dfw' );
1172 .on( 'dfw-activate', function() {
1173 $button.prop( 'disabled', false );
1175 .on( 'dfw-deactivate', function() {
1176 $button.prop( 'disabled', true );
1178 .on( 'dfw-on', function() {
1179 $button.addClass( 'active' );
1181 .on( 'dfw-off', function() {
1182 $button.removeClass( 'active' );
1187 $document.on( 'editor-expand-on.focus', activate ).on( 'editor-expand-off.focus', deactivate );
1190 $content.on( 'keydown.focus', fadeOut );
1192 $title.add( $content ).on( 'blur.focus', maybeFadeIn );
1195 window.wp = window.wp || {};
1196 window.wp.editor = window.wp.editor || {};
1197 window.wp.editor.dfw = {
1199 deactivate: deactivate,
1207 } )( window, window.jQuery );