1/**
  2 * @output wp-admin/js/editor-expand.js
  3 */
  4
  5( function( window, $, undefined ) {
  6	'use strict';
  7
  8	var $window = $( window ),
  9		$document = $( document ),
 10		$adminBar = $( '#wpadminbar' ),
 11		$footer = $( '#wpfooter' );
 12
 13	/**
 14	 * Handles the resizing of the editor.
 15	 *
 16	 * @since 4.0.0
 17	 *
 18	 * @return {void}
 19	 */
 20	$( function() {
 21		var $wrap = $( '#postdivrich' ),
 22			$contentWrap = $( '#wp-content-wrap' ),
 23			$tools = $( '#wp-content-editor-tools' ),
 24			$visualTop = $(),
 25			$visualEditor = $(),
 26			$textTop = $( '#ed_toolbar' ),
 27			$textEditor = $( '#content' ),
 28			textEditor = $textEditor[0],
 29			oldTextLength = 0,
 30			$bottom = $( '#post-status-info' ),
 31			$menuBar = $(),
 32			$statusBar = $(),
 33			$sideSortables = $( '#side-sortables' ),
 34			$postboxContainer = $( '#postbox-container-1' ),
 35			$postBody = $('#post-body'),
 36			fullscreen = window.wp.editor && window.wp.editor.fullscreen,
 37			mceEditor,
 38			mceBind = function(){},
 39			mceUnbind = function(){},
 40			fixedTop = false,
 41			fixedBottom = false,
 42			fixedSideTop = false,
 43			fixedSideBottom = false,
 44			scrollTimer,
 45			lastScrollPosition = 0,
 46			pageYOffsetAtTop = 130,
 47			pinnedToolsTop = 56,
 48			sidebarBottom = 20,
 49			autoresizeMinHeight = 300,
 50			initialMode = $contentWrap.hasClass( 'tmce-active' ) ? 'tinymce' : 'html',
 51			advanced = !! parseInt( window.getUserSetting( 'hidetb' ), 10 ),
 52			// These are corrected when adjust() runs, except on scrolling if already set.
 53			heights = {
 54				windowHeight: 0,
 55				windowWidth: 0,
 56				adminBarHeight: 0,
 57				toolsHeight: 0,
 58				menuBarHeight: 0,
 59				visualTopHeight: 0,
 60				textTopHeight: 0,
 61				bottomHeight: 0,
 62				statusBarHeight: 0,
 63				sideSortablesHeight: 0
 64			};
 65
 66		/**
 67		 * Resizes textarea based on scroll height and width.
 68		 *
 69		 * Doesn't shrink the editor size below the 300px auto resize minimum height.
 70		 *
 71		 * @since 4.6.1
 72		 *
 73		 * @return {void}
 74		 */
 75		var shrinkTextarea = window._.throttle( function() {
 76			var x = window.scrollX || document.documentElement.scrollLeft;
 77			var y = window.scrollY || document.documentElement.scrollTop;
 78			var height = parseInt( textEditor.style.height, 10 );
 79
 80			textEditor.style.height = autoresizeMinHeight + 'px';
 81
 82			if ( textEditor.scrollHeight > autoresizeMinHeight ) {
 83				textEditor.style.height = textEditor.scrollHeight + 'px';
 84			}
 85
 86			if ( typeof x !== 'undefined' ) {
 87				window.scrollTo( x, y );
 88			}
 89
 90			if ( textEditor.scrollHeight < height ) {
 91				adjust();
 92			}
 93		}, 300 );
 94
 95		/**
 96		 * Resizes the text editor depending on the old text length.
 97		 *
 98		 * If there is an mceEditor and it is hidden, it resizes the editor depending
 99		 * on the old text length. If the current length of the text is smaller than
100		 * the old text length, it shrinks the text area. Otherwise it resizes the editor to
101		 * the scroll height.
102		 *
103		 * @since 4.6.1
104		 *
105		 * @return {void}
106		 */
107		function textEditorResize() {
108			var length = textEditor.value.length;
109
110			if ( mceEditor && ! mceEditor.isHidden() ) {
111				return;
112			}
113
114			if ( ! mceEditor && initialMode === 'tinymce' ) {
115				return;
116			}
117
118			if ( length < oldTextLength ) {
119				shrinkTextarea();
120			} else if ( parseInt( textEditor.style.height, 10 ) < textEditor.scrollHeight ) {
121				textEditor.style.height = Math.ceil( textEditor.scrollHeight ) + 'px';
122				adjust();
123			}
124
125			oldTextLength = length;
126		}
127
128		/**
129		 * Gets the height and widths of elements.
130		 *
131		 * Gets the heights of the window, the adminbar, the tools, the menu,
132		 * the visualTop, the textTop, the bottom, the statusbar and sideSortables
133		 * and stores these in the heights object. Defaults to 0.
134		 * Gets the width of the window and stores this in the heights object.
135		 *
136		 * @since 4.0.0
137		 *
138		 * @return {void}
139		 */
140		function getHeights() {
141			var windowWidth = $window.width();
142
143			heights = {
144				windowHeight: $window.height(),
145				windowWidth: windowWidth,
146				adminBarHeight: ( windowWidth > 600 ? $adminBar.outerHeight() : 0 ),
147				toolsHeight: $tools.outerHeight() || 0,
148				menuBarHeight: $menuBar.outerHeight() || 0,
149				visualTopHeight: $visualTop.outerHeight() || 0,
150				textTopHeight: $textTop.outerHeight() || 0,
151				bottomHeight: $bottom.outerHeight() || 0,
152				statusBarHeight: $statusBar.outerHeight() || 0,
153				sideSortablesHeight: $sideSortables.height() || 0
154			};
155
156			// Adjust for hidden menubar.
157			if ( heights.menuBarHeight < 3 ) {
158				heights.menuBarHeight = 0;
159			}
160		}
161
162		// We need to wait for TinyMCE to initialize.
163		/**
164		 * Binds all necessary functions for editor expand to the editor when the editor
165		 * is initialized.
166		 *
167		 * @since 4.0.0
168		 *
169		 * @param {event} event The TinyMCE editor init event.
170		 * @param {object} editor The editor to bind the vents on.
171		 *
172		 * @return {void}
173		 */
174		$document.on( 'tinymce-editor-init.editor-expand', function( event, editor ) {
175			// VK contains the type of key pressed. VK = virtual keyboard.
176			var VK = window.tinymce.util.VK,
177				/**
178				 * Hides any float panel with a hover state. Additionally hides tooltips.
179				 *
180				 * @return {void}
181				 */
182				hideFloatPanels = _.debounce( function() {
183					! $( '.mce-floatpanel:hover' ).length && window.tinymce.ui.FloatPanel.hideAll();
184					$( '.mce-tooltip' ).hide();
185				}, 1000, true );
186
187			// Make sure it's the main editor.
188			if ( editor.id !== 'content' ) {
189				return;
190			}
191
192			// Copy the editor instance.
193			mceEditor = editor;
194
195			// Set the minimum height to the initial viewport height.
196			editor.settings.autoresize_min_height = autoresizeMinHeight;
197
198			// Get the necessary UI elements.
199			$visualTop = $contentWrap.find( '.mce-toolbar-grp' );
200			$visualEditor = $contentWrap.find( '.mce-edit-area' );
201			$statusBar = $contentWrap.find( '.mce-statusbar' );
202			$menuBar = $contentWrap.find( '.mce-menubar' );
203
204			/**
205			 * Gets the offset of the editor.
206			 *
207			 * @return {number|boolean} Returns the offset of the editor
208			 * or false if there is no offset height.
209			 */
210			function mceGetCursorOffset() {
211				var node = editor.selection.getNode(),
212					range, view, offset;
213
214				/*
215				 * If editor.wp.getView and the selection node from the editor selection
216				 * are defined, use this as a view for the offset.
217				 */
218				if ( editor.wp && editor.wp.getView && ( view = editor.wp.getView( node ) ) ) {
219					offset = view.getBoundingClientRect();
220				} else {
221					range = editor.selection.getRng();
222
223					// Try to get the offset from a range.
224					try {
225						offset = range.getClientRects()[0];
226					} catch( er ) {}
227
228					// Get the offset from the bounding client rectangle of the node.
229					if ( ! offset ) {
230						offset = node.getBoundingClientRect();
231					}
232				}
233
234				return offset.height ? offset : false;
235			}
236
237			/**
238			 * Filters the special keys that should not be used for scrolling.
239			 *
240			 * @since 4.0.0
241			 *
242			 * @param {event} event The event to get the key code from.
243			 *
244			 * @return {void}
245			 */
246			function mceKeyup( event ) {
247				var key = event.keyCode;
248
249				// Bail on special keys. Key code 47 is a '/'.
250				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 ) ) {
251					return;
252				// OS keys, function keys, num lock, scroll lock. Key code 91-93 are OS keys.
253				// Key code 112-123 are F1 to F12. Key code 144 is num lock. Key code 145 is scroll lock.
254				} else if ( ( key >= 91 && key <= 93 ) || ( key >= 112 && key <= 123 ) || key === 144 || key === 145 ) {
255					return;
256				}
257
258				mceScroll( key );
259			}
260
261			/**
262			 * Makes sure the cursor is always visible in the editor.
263			 *
264			 * Makes sure the cursor is kept between the toolbars of the editor and scrolls
265			 * the window when the cursor moves out of the viewport to a wpview.
266			 * Setting a buffer > 0 will prevent the browser default.
267			 * Some browsers will scroll to the middle,
268			 * others to the top/bottom of the *window* when moving the cursor out of the viewport.
269			 *
270			 * @since 4.1.0
271			 *
272			 * @param {string} key The key code of the pressed key.
273			 *
274			 * @return {void}
275			 */
276			function mceScroll( key ) {
277				var offset = mceGetCursorOffset(),
278					buffer = 50,
279					cursorTop, cursorBottom, editorTop, editorBottom;
280
281				// Don't scroll if there is no offset.
282				if ( ! offset ) {
283					return;
284				}
285
286				// Determine the cursorTop based on the offset and the top of the editor iframe.
287				cursorTop = offset.top + editor.iframeElement.getBoundingClientRect().top;
288
289				// Determine the cursorBottom based on the cursorTop and offset height.
290				cursorBottom = cursorTop + offset.height;
291
292				// Subtract the buffer from the cursorTop.
293				cursorTop = cursorTop - buffer;
294
295				// Add the buffer to the cursorBottom.
296				cursorBottom = cursorBottom + buffer;
297				editorTop = heights.adminBarHeight + heights.toolsHeight + heights.menuBarHeight + heights.visualTopHeight;
298
299				/*
300				 * Set the editorBottom based on the window Height, and add the bottomHeight and statusBarHeight if the
301				 * advanced editor is enabled.
302				 */
303				editorBottom = heights.windowHeight - ( advanced ? heights.bottomHeight + heights.statusBarHeight : 0 );
304
305				// Don't scroll if the node is taller than the visible part of the editor.
306				if ( editorBottom - editorTop < offset.height ) {
307					return;
308				}
309
310				/*
311				 * If the cursorTop is smaller than the editorTop and the up, left
312				 * or backspace key is pressed, scroll the editor to the position defined
313				 * by the cursorTop, pageYOffset and editorTop.
314				 */
315				if ( cursorTop < editorTop && ( key === VK.UP || key === VK.LEFT || key === VK.BACKSPACE ) ) {
316					window.scrollTo( window.pageXOffset, cursorTop + window.pageYOffset - editorTop );
317
318				/*
319				 * If any other key is pressed or the cursorTop is bigger than the editorTop,
320				 * scroll the editor to the position defined by the cursorBottom,
321				 * pageYOffset and editorBottom.
322				 */
323				} else if ( cursorBottom > editorBottom ) {
324					window.scrollTo( window.pageXOffset, cursorBottom + window.pageYOffset - editorBottom );
325				}
326			}
327
328			/**
329			 * If the editor is fullscreen, calls adjust.
330			 *
331			 * @since 4.1.0
332			 *
333			 * @param {event} event The FullscreenStateChanged event.
334			 *
335			 * @return {void}
336			 */
337			function mceFullscreenToggled( event ) {
338				// event.state is true if the editor is fullscreen.
339				if ( ! event.state ) {
340					adjust();
341				}
342			}
343
344			/**
345			 * Shows the editor when scrolled.
346			 *
347			 * Binds the hideFloatPanels function on the window scroll.mce-float-panels event.
348			 * Executes the wpAutoResize on the active editor.
349			 *
350			 * @since 4.0.0
351			 *
352			 * @return {void}
353			 */
354			function mceShow() {
355				$window.on( 'scroll.mce-float-panels', hideFloatPanels );
356
357				setTimeout( function() {
358					editor.execCommand( 'wpAutoResize' );
359					adjust();
360				}, 300 );
361			}
362
363			/**
364			 * Resizes the editor.
365			 *
366			 * Removes all functions from the window scroll.mce-float-panels event.
367			 * Resizes the text editor and scrolls to a position based on the pageXOffset and adminBarHeight.
368			 *
369			 * @since 4.0.0
370			 *
371			 * @return {void}
372			 */
373			function mceHide() {
374				$window.off( 'scroll.mce-float-panels' );
375
376				setTimeout( function() {
377					var top = $contentWrap.offset().top;
378
379					if ( window.pageYOffset > top ) {
380						window.scrollTo( window.pageXOffset, top - heights.adminBarHeight );
381					}
382
383					textEditorResize();
384					adjust();
385				}, 100 );
386
387				adjust();
388			}
389
390			/**
391			 * Toggles advanced states.
392			 *
393			 * @since 4.1.0
394			 *
395			 * @return {void}
396			 */
397			function toggleAdvanced() {
398				advanced = ! advanced;
399			}
400
401			/**
402			 * Binds events of the editor and window.
403			 *
404			 * @since 4.0.0
405			 *
406			 * @return {void}
407			 */
408			mceBind = function() {
409				editor.on( 'keyup', mceKeyup );
410				editor.on( 'show', mceShow );
411				editor.on( 'hide', mceHide );
412				editor.on( 'wp-toolbar-toggle', toggleAdvanced );
413
414				// Adjust when the editor resizes.
415				editor.on( 'setcontent wp-autoresize wp-toolbar-toggle', adjust );
416
417				// Don't hide the caret after undo/redo.
418				editor.on( 'undo redo', mceScroll );
419
420				// Adjust when exiting TinyMCE's fullscreen mode.
421				editor.on( 'FullscreenStateChanged', mceFullscreenToggled );
422
423				$window.off( 'scroll.mce-float-panels' ).on( 'scroll.mce-float-panels', hideFloatPanels );
424			};
425
426			/**
427			 * Unbinds the events of the editor and window.
428			 *
429			 * @since 4.0.0
430			 *
431			 * @return {void}
432			 */
433			mceUnbind = function() {
434				editor.off( 'keyup', mceKeyup );
435				editor.off( 'show', mceShow );
436				editor.off( 'hide', mceHide );
437				editor.off( 'wp-toolbar-toggle', toggleAdvanced );
438				editor.off( 'setcontent wp-autoresize wp-toolbar-toggle', adjust );
439				editor.off( 'undo redo', mceScroll );
440				editor.off( 'FullscreenStateChanged', mceFullscreenToggled );
441
442				$window.off( 'scroll.mce-float-panels' );
443			};
444
445			if ( $wrap.hasClass( 'wp-editor-expand' ) ) {
446
447				// Adjust "immediately".
448				mceBind();
449				initialResize( adjust );
450			}
451		} );
452
453		/**
454		 * Adjusts the toolbars heights and positions.
455		 *
456		 * Adjusts the toolbars heights and positions based on the scroll position on
457		 * the page, the active editor mode and the heights of the editor, admin bar and
458		 * side bar.
459		 *
460		 * @since 4.0.0
461		 *
462		 * @param {event} event The event that calls this function.
463		 *
464		 * @return {void}
465		 */
466		function adjust( event ) {
467
468			// Makes sure we're not in fullscreen mode.
469			if ( fullscreen && fullscreen.settings.visible ) {
470				return;
471			}
472
473			var windowPos = $window.scrollTop(),
474				type = event && event.type,
475				resize = type !== 'scroll',
476				visual = mceEditor && ! mceEditor.isHidden(),
477				buffer = autoresizeMinHeight,
478				postBodyTop = $postBody.offset().top,
479				borderWidth = 1,
480				contentWrapWidth = $contentWrap.width(),
481				$top, $editor, sidebarTop, footerTop, canPin,
482				topPos, topHeight, editorPos, editorHeight;
483
484			/*
485			 * Refresh the heights if type isn't 'scroll'
486			 * or heights.windowHeight isn't set.
487			 */
488			if ( resize || ! heights.windowHeight ) {
489				getHeights();
490			}
491
492			// Resize on resize event when the editor is in text mode.
493			if ( ! visual && type === 'resize' ) {
494				textEditorResize();
495			}
496
497			if ( visual ) {
498				$top = $visualTop;
499				$editor = $visualEditor;
500				topHeight = heights.visualTopHeight;
501			} else {
502				$top = $textTop;
503				$editor = $textEditor;
504				topHeight = heights.textTopHeight;
505			}
506
507			// Return if TinyMCE is still initializing.
508			if ( ! visual && ! $top.length ) {
509				return;
510			}
511
512			topPos = $top.parent().offset().top;
513			editorPos = $editor.offset().top;
514			editorHeight = $editor.outerHeight();
515
516			/*
517			 * If in visual mode, checks if the editorHeight is greater than the autoresizeMinHeight + topHeight.
518			 * If not in visual mode, checks if the editorHeight is greater than the autoresizeMinHeight + 20.
519			 */
520			canPin = visual ? autoresizeMinHeight + topHeight : autoresizeMinHeight + 20; // 20px from textarea padding.
521			canPin = editorHeight > ( canPin + 5 );
522
523			if ( ! canPin ) {
524				if ( resize ) {
525					$tools.css( {
526						position: 'absolute',
527						top: 0,
528						width: contentWrapWidth
529					} );
530
531					if ( visual && $menuBar.length ) {
532						$menuBar.css( {
533							position: 'absolute',
534							top: 0,
535							width: contentWrapWidth - ( borderWidth * 2 )
536						} );
537					}
538
539					$top.css( {
540						position: 'absolute',
541						top: heights.menuBarHeight,
542						width: contentWrapWidth - ( borderWidth * 2 ) - ( visual ? 0 : ( $top.outerWidth() - $top.width() ) )
543					} );
544
545					$statusBar.attr( 'style', advanced ? '' : 'visibility: hidden;' );
546					$bottom.attr( 'style', '' );
547				}
548			} else {
549				// Check if the top is not already in a fixed position.
550				if ( ( ! fixedTop || resize ) &&
551					( windowPos >= ( topPos - heights.toolsHeight - heights.adminBarHeight ) &&
552					windowPos <= ( topPos - heights.toolsHeight - heights.adminBarHeight + editorHeight - buffer ) ) ) {
553					fixedTop = true;
554
555					$tools.css( {
556						position: 'fixed',
557						top: heights.adminBarHeight,
558						width: contentWrapWidth
559					} );
560
561					if ( visual && $menuBar.length ) {
562						$menuBar.css( {
563							position: 'fixed',
564							top: heights.adminBarHeight + heights.toolsHeight,
565							width: contentWrapWidth - ( borderWidth * 2 ) - ( visual ? 0 : ( $top.outerWidth() - $top.width() ) )
566						} );
567					}
568
569					$top.css( {
570						position: 'fixed',
571						top: heights.adminBarHeight + heights.toolsHeight + heights.menuBarHeight,
572						width: contentWrapWidth - ( borderWidth * 2 ) - ( visual ? 0 : ( $top.outerWidth() - $top.width() ) )
573					} );
574					// Check if the top is already in a fixed position.
575				} else if ( fixedTop || resize ) {
576					if ( windowPos <= ( topPos - heights.toolsHeight - heights.adminBarHeight ) ) {
577						fixedTop = false;
578
579						$tools.css( {
580							position: 'absolute',
581							top: 0,
582							width: contentWrapWidth
583						} );
584
585						if ( visual && $menuBar.length ) {
586							$menuBar.css( {
587								position: 'absolute',
588								top: 0,
589								width: contentWrapWidth - ( borderWidth * 2 )
590							} );
591						}
592
593						$top.css( {
594							position: 'absolute',
595							top: heights.menuBarHeight,
596							width: contentWrapWidth - ( borderWidth * 2 ) - ( visual ? 0 : ( $top.outerWidth() - $top.width() ) )
597						} );
598					} else if ( windowPos >= ( topPos - heights.toolsHeight - heights.adminBarHeight + editorHeight - buffer ) ) {
599						fixedTop = false;
600
601						$tools.css( {
602							position: 'absolute',
603							top: editorHeight - buffer,
604							width: contentWrapWidth
605						} );
606
607						if ( visual && $menuBar.length ) {
608							$menuBar.css( {
609								position: 'absolute',
610								top: editorHeight - buffer,
611								width: contentWrapWidth - ( borderWidth * 2 )
612							} );
613						}
614
615						$top.css( {
616							position: 'absolute',
617							top: editorHeight - buffer + heights.menuBarHeight,
618							width: contentWrapWidth - ( borderWidth * 2 ) - ( visual ? 0 : ( $top.outerWidth() - $top.width() ) )
619						} );
620					}
621				}
622
623				// Check if the bottom is not already in a fixed position.
624				if ( ( ! fixedBottom || ( resize && advanced ) ) &&
625						// Add borderWidth for the border around the .wp-editor-container.
626						( windowPos + heights.windowHeight ) <= ( editorPos + editorHeight + heights.bottomHeight + heights.statusBarHeight + borderWidth ) ) {
627
628					if ( event && event.deltaHeight > 0 && event.deltaHeight < 100 ) {
629						window.scrollBy( 0, event.deltaHeight );
630					} else if ( visual && advanced ) {
631						fixedBottom = true;
632
633						$statusBar.css( {
634							position: 'fixed',
635							bottom: heights.bottomHeight,
636							visibility: '',
637							width: contentWrapWidth - ( borderWidth * 2 )
638						} );
639
640						$bottom.css( {
641							position: 'fixed',
642							bottom: 0,
643							width: contentWrapWidth
644						} );
645					}
646				} else if ( ( ! advanced && fixedBottom ) ||
647						( ( fixedBottom || resize ) &&
648						( windowPos + heights.windowHeight ) > ( editorPos + editorHeight + heights.bottomHeight + heights.statusBarHeight - borderWidth ) ) ) {
649					fixedBottom = false;
650
651					$statusBar.attr( 'style', advanced ? '' : 'visibility: hidden;' );
652					$bottom.attr( 'style', '' );
653				}
654			}
655
656			// The postbox container is positioned with @media from CSS. Ensure it is pinned on the side.
657			if ( $postboxContainer.width() < 300 && heights.windowWidth > 600 &&
658
659				// Check if the sidebar is not taller than the document height.
660				$document.height() > ( $sideSortables.height() + postBodyTop + 120 ) &&
661
662				// Check if the editor is taller than the viewport.
663				heights.windowHeight < editorHeight ) {
664
665				if ( ( heights.sideSortablesHeight + pinnedToolsTop + sidebarBottom ) > heights.windowHeight || fixedSideTop || fixedSideBottom ) {
666
667					// Reset the sideSortables style when scrolling to the top.
668					if ( windowPos + pinnedToolsTop <= postBodyTop ) {
669						$sideSortables.attr( 'style', '' );
670						fixedSideTop = fixedSideBottom = false;
671					} else {
672
673						// When scrolling down.
674						if ( windowPos > lastScrollPosition ) {
675							if ( fixedSideTop ) {
676
677								// Let it scroll.
678								fixedSideTop = false;
679								sidebarTop = $sideSortables.offset().top - heights.adminBarHeight;
680								footerTop = $footer.offset().top;
681
682								// Don't get over the footer.
683								if ( footerTop < sidebarTop + heights.sideSortablesHeight + sidebarBottom ) {
684									sidebarTop = footerTop - heights.sideSortablesHeight - 12;
685								}
686
687								$sideSortables.css({
688									position: 'absolute',
689									top: sidebarTop,
690									bottom: ''
691								});
692							} else if ( ! fixedSideBottom && heights.sideSortablesHeight + $sideSortables.offset().top + sidebarBottom < windowPos + heights.windowHeight ) {
693								// Pin the bottom.
694								fixedSideBottom = true;
695
696								$sideSortables.css({
697									position: 'fixed',
698									top: 'auto',
699									bottom: sidebarBottom
700								});
701							}
702
703						// When scrolling up.
704						} else if ( windowPos < lastScrollPosition ) {
705							if ( fixedSideBottom ) {
706								// Let it scroll.
707								fixedSideBottom = false;
708								sidebarTop = $sideSortables.offset().top - sidebarBottom;
709								footerTop = $footer.offset().top;
710
711								// Don't get over the footer.
712								if ( footerTop < sidebarTop + heights.sideSortablesHeight + sidebarBottom ) {
713									sidebarTop = footerTop - heights.sideSortablesHeight - 12;
714								}
715
716								$sideSortables.css({
717									position: 'absolute',
718									top: sidebarTop,
719									bottom: ''
720								});
721							} else if ( ! fixedSideTop && $sideSortables.offset().top >= windowPos + pinnedToolsTop ) {
722								// Pin the top.
723								fixedSideTop = true;
724
725								$sideSortables.css({
726									position: 'fixed',
727									top: pinnedToolsTop,
728									bottom: ''
729								});
730							}
731						}
732					}
733				} else {
734					// If the sidebar container is smaller than the viewport, then pin/unpin the top when scrolling.
735					if ( windowPos >= ( postBodyTop - pinnedToolsTop ) ) {
736
737						$sideSortables.css( {
738							position: 'fixed',
739							top: pinnedToolsTop
740						} );
741					} else {
742						$sideSortables.attr( 'style', '' );
743					}
744
745					fixedSideTop = fixedSideBottom = false;
746				}
747
748				lastScrollPosition = windowPos;
749			} else {
750				$sideSortables.attr( 'style', '' );
751				fixedSideTop = fixedSideBottom = false;
752			}
753
754			if ( resize ) {
755				$contentWrap.css( {
756					paddingTop: heights.toolsHeight
757				} );
758
759				if ( visual ) {
760					$visualEditor.css( {
761						paddingTop: heights.visualTopHeight + heights.menuBarHeight
762					} );
763				} else {
764					$textEditor.css( {
765						marginTop: heights.textTopHeight
766					} );
767				}
768			}
769		}
770
771		/**
772		 * Resizes the editor and adjusts the toolbars.
773		 *
774		 * @since 4.0.0
775		 *
776		 * @return {void}
777		 */
778		function fullscreenHide() {
779			textEditorResize();
780			adjust();
781		}
782
783		/**
784		 * Runs the passed function with 500ms intervals.
785		 *
786		 * @since 4.0.0
787		 *
788		 * @param {function} callback The function to run in the timeout.
789		 *
790		 * @return {void}
791		 */
792		function initialResize( callback ) {
793			for ( var i = 1; i < 6; i++ ) {
794				setTimeout( callback, 500 * i );
795			}
796		}
797
798		/**
799		 * Runs adjust after 100ms.
800		 *
801		 * @since 4.0.0
802		 *
803		 * @return {void}
804		 */
805		function afterScroll() {
806			clearTimeout( scrollTimer );
807			scrollTimer = setTimeout( adjust, 100 );
808		}
809
810		/**
811		 * Binds editor expand events on elements.
812		 *
813		 * @since 4.0.0
814		 *
815		 * @return {void}
816		 */
817		function on() {
818			/*
819			 * Scroll to the top when triggering this from JS.
820			 * Ensure the toolbars are pinned properly.
821			 */
822			if ( window.pageYOffset && window.pageYOffset > pageYOffsetAtTop ) {
823				window.scrollTo( window.pageXOffset, 0 );
824			}
825
826			$wrap.addClass( 'wp-editor-expand' );
827
828			// Adjust when the window is scrolled or resized.
829			$window.on( 'scroll.editor-expand resize.editor-expand', function( event ) {
830				adjust( event.type );
831				afterScroll();
832			} );
833
834			/*
835		 	 * Adjust when collapsing the menu, changing the columns
836		 	 * or changing the body class.
837			 */
838			$document.on( 'wp-collapse-menu.editor-expand postboxes-columnchange.editor-expand editor-classchange.editor-expand', adjust )
839				.on( 'postbox-toggled.editor-expand postbox-moved.editor-expand', function() {
840					if ( ! fixedSideTop && ! fixedSideBottom && window.pageYOffset > pinnedToolsTop ) {
841						fixedSideBottom = true;
842						window.scrollBy( 0, -1 );
843						adjust();
844						window.scrollBy( 0, 1 );
845					}
846
847					adjust();
848				}).on( 'wp-window-resized.editor-expand', function() {
849					if ( mceEditor && ! mceEditor.isHidden() ) {
850						mceEditor.execCommand( 'wpAutoResize' );
851					} else {
852						textEditorResize();
853					}
854				});
855
856			$textEditor.on( 'focus.editor-expand input.editor-expand propertychange.editor-expand', textEditorResize );
857			mceBind();
858
859			// Adjust when entering or exiting fullscreen mode.
860			fullscreen && fullscreen.pubsub.subscribe( 'hidden', fullscreenHide );
861
862			if ( mceEditor ) {
863				mceEditor.settings.wp_autoresize_on = true;
864				mceEditor.execCommand( 'wpAutoResizeOn' );
865
866				if ( ! mceEditor.isHidden() ) {
867					mceEditor.execCommand( 'wpAutoResize' );
868				}
869			}
870
871			if ( ! mceEditor || mceEditor.isHidden() ) {
872				textEditorResize();
873			}
874
875			adjust();
876
877			$document.trigger( 'editor-expand-on' );
878		}
879
880		/**
881		 * Unbinds editor expand events.
882		 *
883		 * @since 4.0.0
884		 *
885		 * @return {void}
886		 */
887		function off() {
888			var height = parseInt( window.getUserSetting( 'ed_size', 300 ), 10 );
889
890			if ( height < 50 ) {
891				height = 50;
892			} else if ( height > 5000 ) {
893				height = 5000;
894			}
895
896			/*
897			 * Scroll to the top when triggering this from JS.
898			 * Ensure the toolbars are reset properly.
899			 */
900			if ( window.pageYOffset && window.pageYOffset > pageYOffsetAtTop ) {
901				window.scrollTo( window.pageXOffset, 0 );
902			}
903
904			$wrap.removeClass( 'wp-editor-expand' );
905
906			$window.off( '.editor-expand' );
907			$document.off( '.editor-expand' );
908			$textEditor.off( '.editor-expand' );
909			mceUnbind();
910
911			// Adjust when entering or exiting fullscreen mode.
912			fullscreen && fullscreen.pubsub.unsubscribe( 'hidden', fullscreenHide );
913
914			// Reset all CSS.
915			$.each( [ $visualTop, $textTop, $tools, $menuBar, $bottom, $statusBar, $contentWrap, $visualEditor, $textEditor, $sideSortables ], function( i, element ) {
916				element && element.attr( 'style', '' );
917			});
918
919			fixedTop = fixedBottom = fixedSideTop = fixedSideBottom = false;
920
921			if ( mceEditor ) {
922				mceEditor.settings.wp_autoresize_on = false;
923				mceEditor.execCommand( 'wpAutoResizeOff' );
924
925				if ( ! mceEditor.isHidden() ) {
926					$textEditor.hide();
927
928					if ( height ) {
929						mceEditor.theme.resizeTo( null, height );
930					}
931				}
932			}
933
934			// If there is a height found in the user setting.
935			if ( height ) {
936				$textEditor.height( height );
937			}
938
939			$document.trigger( 'editor-expand-off' );
940		}
941
942		// Start on load.
943		if ( $wrap.hasClass( 'wp-editor-expand' ) ) {
944			on();
945
946			// Resize just after CSS has fully loaded and QuickTags is ready.
947			if ( $contentWrap.hasClass( 'html-active' ) ) {
948				initialResize( function() {
949					adjust();
950					textEditorResize();
951				} );
952			}
953		}
954
955		// Show the on/off checkbox.
956		$( '#adv-settings .editor-expand' ).show();
957		$( '#editor-expand-toggle' ).on( 'change.editor-expand', function() {
958			if ( $(this).prop( 'checked' ) ) {
959				on();
960				window.setUserSetting( 'editor_expand', 'on' );
961			} else {
962				off();
963				window.setUserSetting( 'editor_expand', 'off' );
964			}
965		});
966
967		// Expose on() and off().
968		window.editorExpand = {
969			on: on,
970			off: off
971		};
972	} );
973
974	/**
975	 * Handles the distraction free writing of TinyMCE.
976	 *
977	 * @since 4.1.0
978	 *
979	 * @return {void}
980	 */
981	$( function() {
982		var $body = $( document.body ),
983			$wrap = $( '#wpcontent' ),
984			$editor = $( '#post-body-content' ),
985			$title = $( '#title' ),
986			$content = $( '#content' ),
987			$overlay = $( document.createElement( 'DIV' ) ),
988			$slug = $( '#edit-slug-box' ),
989			$slugFocusEl = $slug.find( 'a' )
990				.add( $slug.find( 'button' ) )
991				.add( $slug.find( 'input' ) ),
992			$menuWrap = $( '#adminmenuwrap' ),
993			$editorWindow = $(),
994			$editorIframe = $(),
995			_isActive = window.getUserSetting( 'editor_expand', 'on' ) === 'on',
996			_isOn = _isActive ? window.getUserSetting( 'post_dfw' ) === 'on' : false,
997			traveledX = 0,
998			traveledY = 0,
999			buffer = 20,
1000			faded, fadedAdminBar, fadedSlug,
1001			editorRect, x, y, mouseY, scrollY,
1002			focusLostTimer, overlayTimer, editorHasFocus;
1003
1004		$body.append( $overlay );
1005
1006		$overlay.css( {
1007			display: 'none',
1008			position: 'fixed',
1009			top: $adminBar.height(),
1010			right: 0,
1011			bottom: 0,
1012			left: 0,
1013			'z-index': 9997
1014		} );
1015
1016		$editor.css( {
1017			position: 'relative'
1018		} );
1019
1020		$window.on( 'mousemove.focus', function( event ) {
1021			mouseY = event.pageY;
1022		} );
1023
1024		/**
1025		 * Recalculates the bottom and right position of the editor in the DOM.
1026		 *
1027		 * @since 4.1.0
1028		 *
1029		 * @return {void}
1030		 */
1031		function recalcEditorRect() {
1032			editorRect = $editor.offset();
1033			editorRect.right = editorRect.left + $editor.outerWidth();
1034			editorRect.bottom = editorRect.top + $editor.outerHeight();
1035		}
1036
1037		/**
1038		 * Activates the distraction free writing mode.
1039		 *
1040		 * @since 4.1.0
1041		 *
1042		 * @return {void}
1043		 */
1044		function activate() {
1045			if ( ! _isActive ) {
1046				_isActive = true;
1047
1048				$document.trigger( 'dfw-activate' );
1049				$content.on( 'keydown.focus-shortcut', toggleViaKeyboard );
1050			}
1051		}
1052
1053		/**
1054		 * Deactivates the distraction free writing mode.
1055		 *
1056		 * @since 4.1.0
1057		 *
1058		 * @return {void}
1059		 */
1060		function deactivate() {
1061			if ( _isActive ) {
1062				off();
1063
1064				_isActive = false;
1065
1066				$document.trigger( 'dfw-deactivate' );
1067				$content.off( 'keydown.focus-shortcut' );
1068			}
1069		}
1070
1071		/**
1072		 * Returns _isActive.
1073		 *
1074		 * @since 4.1.0
1075		 *
1076		 * @return {boolean} Returns true is _isActive is true.
1077		 */
1078		function isActive() {
1079			return _isActive;
1080		}
1081
1082		/**
1083		 * Binds events on the editor for distraction free writing.
1084		 *
1085		 * @since 4.1.0
1086		 *
1087		 * @return {void}
1088		 */
1089		function on() {
1090			if ( ! _isOn && _isActive ) {
1091				_isOn = true;
1092
1093				$content.on( 'keydown.focus', fadeOut );
1094
1095				$title.add( $content ).on( 'blur.focus', maybeFadeIn );
1096
1097				fadeOut();
1098
1099				window.setUserSetting( 'post_dfw', 'on' );
1100
1101				$document.trigger( 'dfw-on' );
1102			}
1103		}
1104
1105		/**
1106		 * Unbinds events on the editor for distraction free writing.
1107		 *
1108		 * @since 4.1.0
1109		 *
1110		 * @return {void}
1111		 */
1112		function off() {
1113			if ( _isOn ) {
1114				_isOn = false;
1115
1116				$title.add( $content ).off( '.focus' );
1117
1118				fadeIn();
1119
1120				$editor.off( '.focus' );
1121
1122				window.setUserSetting( 'post_dfw', 'off' );
1123
1124				$document.trigger( 'dfw-off' );
1125			}
1126		}
1127
1128		/**
1129		 * Binds or unbinds the editor expand events.
1130		 *
1131		 * @since 4.1.0
1132		 *
1133		 * @return {void}
1134		 */
1135		function toggle() {
1136			if ( _isOn ) {
1137				off();
1138			} else {
1139				on();
1140			}
1141		}
1142
1143		/**
1144		 * Returns the value of _isOn.
1145		 *
1146		 * @since 4.1.0
1147		 *
1148		 * @return {boolean} Returns true if _isOn is true.
1149		 */
1150		function isOn() {
1151			return _isOn;
1152		}
1153
1154		/**
1155		 * Fades out all elements except for the editor.
1156		 *
1157		 * The fading is done based on key presses and mouse movements.
1158		 * Also calls the fadeIn on certain key presses
1159		 * or if the mouse leaves the editor.
1160		 *
1161		 * @since 4.1.0
1162		 *
1163		 * @param event The event that triggers this function.
1164		 *
1165		 * @return {void}
1166		 */
1167		function fadeOut( event ) {
1168			var isMac,
1169				key = event && event.keyCode;
1170
1171			if ( window.navigator.platform ) {
1172				isMac = ( window.navigator.platform.indexOf( 'Mac' ) > -1 );
1173			}
1174
1175			// Fade in and returns on Escape and keyboard shortcut Alt+Shift+W and Ctrl+Opt+W.
1176			if ( key === 27 || ( key === 87 && event.altKey && ( ( ! isMac && event.shiftKey ) || ( isMac && event.ctrlKey ) ) ) ) {
1177				fadeIn( event );
1178				return;
1179			}
1180
1181			// Return if any of the following keys or combinations of keys is pressed.
1182			if ( event && ( event.metaKey || ( event.ctrlKey && ! event.altKey ) || ( event.altKey && event.shiftKey ) || ( key && (
1183				// Special keys ( tab, ctrl, alt, esc, arrow keys... ).
1184				( key <= 47 && key !== 8 && key !== 13 && key !== 32 && key !== 46 ) ||
1185				// Windows keys.
1186				( key >= 91 && key <= 93 ) ||
1187				// F keys.
1188				( key >= 112 && key <= 135 ) ||
1189				// Num Lock, Scroll Lock, OEM.
1190				( key >= 144 && key <= 150 ) ||
1191				// OEM or non-printable.
1192				key >= 224
1193			) ) ) ) {
1194				return;
1195			}
1196
1197			if ( ! faded ) {
1198				faded = true;
1199
1200				clearTimeout( overlayTimer );
1201
1202				overlayTimer = setTimeout( function() {
1203					$overlay.show();
1204				}, 600 );
1205
1206				$editor.css( 'z-index', 9998 );
1207
1208				$overlay
1209					// Always recalculate the editor area when entering the overlay with the mouse.
1210					.on( 'mouseenter.focus', function() {
1211						recalcEditorRect();
1212
1213						$window.on( 'scroll.focus', function() {
1214							var nScrollY = window.pageYOffset;
1215
1216							if ( (
1217								scrollY && mouseY &&
1218								scrollY !== nScrollY
1219							) && (
1220								mouseY < editorRect.top - buffer ||
1221								mouseY > editorRect.bottom + buffer
1222							) ) {
1223								fadeIn();
1224							}
1225
1226							scrollY = nScrollY;
1227						} );
1228					} )
1229					.on( 'mouseleave.focus', function() {
1230						x = y =  null;
1231						traveledX = traveledY = 0;
1232
1233						$window.off( 'scroll.focus' );
1234					} )
1235					// Fade in when the mouse moves away form the editor area.
1236					.on( 'mousemove.focus', function( event ) {
1237						var nx = event.clientX,
1238							ny = event.clientY,
1239							pageYOffset = window.pageYOffset,
1240							pageXOffset = window.pageXOffset;
1241
1242						if ( x && y && ( nx !== x || ny !== y ) ) {
1243							if (
1244								( ny <= y && ny < editorRect.top - pageYOffset ) ||
1245								( ny >= y && ny > editorRect.bottom - pageYOffset ) ||
1246								( nx <= x && nx < editorRect.left - pageXOffset ) ||
1247								( nx >= x && nx > editorRect.right - pageXOffset )
1248							) {
1249								traveledX += Math.abs( x - nx );
1250								traveledY += Math.abs( y - ny );
1251
1252								if ( (
1253									ny <= editorRect.top - buffer - pageYOffset ||
1254									ny >= editorRect.bottom + buffer - pageYOffset ||
1255									nx <= editorRect.left - buffer - pageXOffset ||
1256									nx >= editorRect.right + buffer - pageXOffset
1257								) && (
1258									traveledX > 10 ||
1259									traveledY > 10
1260								) ) {
1261									fadeIn();
1262
1263									x = y =  null;
1264									traveledX = traveledY = 0;
1265
1266									return;
1267								}
1268							} else {
1269								traveledX = traveledY = 0;
1270							}
1271						}
1272
1273						x = nx;
1274						y = ny;
1275					} )
1276
1277					// When the overlay is touched, fade in and cancel the event.
1278					.on( 'touchstart.focus', function( event ) {
1279						event.preventDefault();
1280						fadeIn();
1281					} );
1282
1283				$editor.off( 'mouseenter.focus' );
1284
1285				if ( focusLostTimer ) {
1286					clearTimeout( focusLostTimer );
1287					focusLostTimer = null;
1288				}
1289
1290				$body.addClass( 'focus-on' ).removeClass( 'focus-off' );
1291			}
1292
1293			fadeOutAdminBar();
1294			fadeOutSlug();
1295		}
1296
1297		/**
1298		 * Fades all elements back in.
1299		 *
1300		 * @since 4.1.0
1301		 *
1302		 * @param event The event that triggers this function.
1303		 *
1304		 * @return {void}
1305		 */
1306		function fadeIn( event ) {
1307			if ( faded ) {
1308				faded = false;
1309
1310				clearTimeout( overlayTimer );
1311
1312				overlayTimer = setTimeout( function() {
1313					$overlay.hide();
1314				}, 200 );
1315
1316				$editor.css( 'z-index', '' );
1317
1318				$overlay.off( 'mouseenter.focus mouseleave.focus mousemove.focus touchstart.focus' );
1319
1320				/*
1321				 * When fading in, temporarily watch for refocus and fade back out - helps
1322				 * with 'accidental' editor exits with the mouse. When fading in and the event
1323				 * is a key event (Escape or Alt+Shift+W) don't watch for refocus.
1324				 */
1325				if ( 'undefined' === typeof event ) {
1326					$editor.on( 'mouseenter.focus', function() {
1327						if ( $.contains( $editor.get( 0 ), document.activeElement ) || editorHasFocus ) {
1328							fadeOut();
1329						}
1330					} );
1331				}
1332
1333				focusLostTimer = setTimeout( function() {
1334					focusLostTimer = null;
1335					$editor.off( 'mouseenter.focus' );
1336				}, 1000 );
1337
1338				$body.addClass( 'focus-off' ).removeClass( 'focus-on' );
1339			}
1340
1341			fadeInAdminBar();
1342			fadeInSlug();
1343		}
1344
1345		/**
1346		 * Fades in if the focused element based on it position.
1347		 *
1348		 * @since 4.1.0
1349		 *
1350		 * @return {void}
1351		 */
1352		function maybeFadeIn() {
1353			setTimeout( function() {
1354				var position = document.activeElement.compareDocumentPosition( $editor.get( 0 ) );
1355
1356				function hasFocus( $el ) {
1357					return $.contains( $el.get( 0 ), document.activeElement );
1358				}
1359
1360				// The focused node is before or behind the editor area, and not outside the wrap.
1361				if ( ( position === 2 || position === 4 ) && ( hasFocus( $menuWrap ) || hasFocus( $wrap ) || hasFocus( $footer ) ) ) {
1362					fadeIn();
1363				}
1364			}, 0 );
1365		}
1366
1367		/**
1368		 * Fades out the admin bar based on focus on the admin bar.
1369		 *
1370		 * @since 4.1.0
1371		 *
1372		 * @return {void}
1373		 */
1374		function fadeOutAdminBar() {
1375			if ( ! fadedAdminBar && faded ) {
1376				fadedAdminBar = true;
1377
1378				$adminBar
1379					.on( 'mouseenter.focus', function() {
1380						$adminBar.addClass( 'focus-off' );
1381					} )
1382					.on( 'mouseleave.focus', function() {
1383						$adminBar.removeClass( 'focus-off' );
1384					} );
1385			}
1386		}
1387
1388		/**
1389		 * Fades in the admin bar.
1390		 *
1391		 * @since 4.1.0
1392		 *
1393		 * @return {void}
1394		 */
1395		function fadeInAdminBar() {
1396			if ( fadedAdminBar ) {
1397				fadedAdminBar = false;
1398
1399				$adminBar.off( '.focus' );
1400			}
1401		}
1402
1403		/**
1404		 * Fades out the edit slug box.
1405		 *
1406		 * @since 4.1.0
1407		 *
1408		 * @return {void}
1409		 */
1410		function fadeOutSlug() {
1411			if ( ! fadedSlug && faded && ! $slug.find( ':focus').length ) {
1412				fadedSlug = true;
1413
1414				$slug.stop().fadeTo( 'fast', 0.3 ).on( 'mouseenter.focus', fadeInSlug ).off( 'mouseleave.focus' );
1415
1416				$slugFocusEl.on( 'focus.focus', fadeInSlug ).off( 'blur.focus' );
1417			}
1418		}
1419
1420		/**
1421		 * Fades in the edit slug box.
1422		 *
1423		 * @since 4.1.0
1424		 *
1425		 * @return {void}
1426		 */
1427		function fadeInSlug() {
1428			if ( fadedSlug ) {
1429				fadedSlug = false;
1430
1431				$slug.stop().fadeTo( 'fast', 1 ).on( 'mouseleave.focus', fadeOutSlug ).off( 'mouseenter.focus' );
1432
1433				$slugFocusEl.on( 'blur.focus', fadeOutSlug ).off( 'focus.focus' );
1434			}
1435		}
1436
1437		/**
1438		 * Triggers the toggle on Alt + Shift + W.
1439		 *
1440		 * Keycode 87 = w.
1441		 *
1442		 * @since 4.1.0
1443		 *
1444		 * @param {event} event The event to trigger the toggle.
1445		 *
1446		 * @return {void}
1447		 */
1448		function toggleViaKeyboard( event ) {
1449			if ( event.altKey && event.shiftKey && 87 === event.keyCode ) {
1450				toggle();
1451			}
1452		}
1453
1454		if ( $( '#postdivrich' ).hasClass( 'wp-editor-expand' ) ) {
1455			$content.on( 'keydown.focus-shortcut', toggleViaKeyboard );
1456		}
1457
1458		/**
1459		 * Adds the distraction free writing button when setting up TinyMCE.
1460		 *
1461		 * @since 4.1.0
1462		 *
1463		 * @param {event} event The TinyMCE editor setup event.
1464		 * @param {object} editor The editor to add the button to.
1465		 *
1466		 * @return {void}
1467		 */
1468		$document.on( 'tinymce-editor-setup.focus', function( event, editor ) {
1469			editor.addButton( 'dfw', {
1470				active: _isOn,
1471				classes: 'wp-dfw btn widget',
1472				disabled: ! _isActive,
1473				onclick: toggle,
1474				onPostRender: function() {
1475					var button = this;
1476
1477					editor.on( 'init', function() {
1478						if ( button.disabled() ) {
1479							button.hide();
1480						}
1481					} );
1482
1483					$document
1484					.on( 'dfw-activate.focus', function() {
1485						button.disabled( false );
1486						button.show();
1487					} )
1488					.on( 'dfw-deactivate.focus', function() {
1489						button.disabled( true );
1490						button.hide();
1491					} )
1492					.on( 'dfw-on.focus', function() {
1493						button.active( true );
1494					} )
1495					.on( 'dfw-off.focus', function() {
1496						button.active( false );
1497					} );
1498				},
1499				tooltip: 'Distraction-free writing mode',
1500				shortcut: 'Alt+Shift+W'
1501			} );
1502
1503			editor.addCommand( 'wpToggleDFW', toggle );
1504			editor.addShortcut( 'access+w', '', 'wpToggleDFW' );
1505		} );
1506
1507		/**
1508		 * Binds and unbinds events on the editor.
1509		 *
1510		 * @since 4.1.0
1511		 *
1512		 * @param {event} event The TinyMCE editor init event.
1513		 * @param {object} editor The editor to bind events on.
1514		 *
1515		 * @return {void}
1516		 */
1517		$document.on( 'tinymce-editor-init.focus', function( event, editor ) {
1518			var mceBind, mceUnbind;
1519
1520			function focus() {
1521				editorHasFocus = true;
1522			}
1523
1524			function blur() {
1525				editorHasFocus = false;
1526			}
1527
1528			if ( editor.id === 'content' ) {
1529				$editorWindow = $( editor.getWin() );
1530				$editorIframe = $( editor.getContentAreaContainer() ).find( 'iframe' );
1531
1532				mceBind = function() {
1533					editor.on( 'keydown', fadeOut );
1534					editor.on( 'blur', maybeFadeIn );
1535					editor.on( 'focus', focus );
1536					editor.on( 'blur', blur );
1537					editor.on( 'wp-autoresize', recalcEditorRect );
1538				};
1539
1540				mceUnbind = function() {
1541					editor.off( 'keydown', fadeOut );
1542					editor.off( 'blur', maybeFadeIn );
1543					editor.off( 'focus', focus );
1544					editor.off( 'blur', blur );
1545					editor.off( 'wp-autoresize', recalcEditorRect );
1546				};
1547
1548				if ( _isOn ) {
1549					mceBind();
1550				}
1551
1552				// Bind and unbind based on the distraction free writing focus.
1553				$document.on( 'dfw-on.focus', mceBind ).on( 'dfw-off.focus', mceUnbind );
1554
1555				// Focus the editor when it is the target of the click event.
1556				editor.on( 'click', function( event ) {
1557					if ( event.target === editor.getDoc().documentElement ) {
1558						editor.focus();
1559					}
1560				} );
1561			}
1562		} );
1563
1564		/**
1565		 *  Binds events on quicktags init.
1566		 *
1567		 * @since 4.1.0
1568		 *
1569		 * @param {event} event The quicktags init event.
1570		 * @param {object} editor The editor to bind events on.
1571		 *
1572		 * @return {void}
1573		 */
1574		$document.on( 'quicktags-init', function( event, editor ) {
1575			var $button;
1576
1577			// Bind the distraction free writing events if the distraction free writing button is available.
1578			if ( editor.settings.buttons && ( ',' + editor.settings.buttons + ',' ).indexOf( ',dfw,' ) !== -1 ) {
1579				$button = $( '#' + editor.name + '_dfw' );
1580
1581				$( document )
1582				.on( 'dfw-activate', function() {
1583					$button.prop( 'disabled', false );
1584				} )
1585				.on( 'dfw-deactivate', function() {
1586					$button.prop( 'disabled', true );
1587				} )
1588				.on( 'dfw-on', function() {
1589					$button.addClass( 'active' );
1590				} )
1591				.on( 'dfw-off', function() {
1592					$button.removeClass( 'active' );
1593				} );
1594			}
1595		} );
1596
1597		$document.on( 'editor-expand-on.focus', activate ).on( 'editor-expand-off.focus', deactivate );
1598
1599		if ( _isOn ) {
1600			$content.on( 'keydown.focus', fadeOut );
1601
1602			$title.add( $content ).on( 'blur.focus', maybeFadeIn );
1603		}
1604
1605		window.wp = window.wp || {};
1606		window.wp.editor = window.wp.editor || {};
1607		window.wp.editor.dfw = {
1608			activate: activate,
1609			deactivate: deactivate,
1610			isActive: isActive,
1611			on: on,
1612			off: off,
1613			toggle: toggle,
1614			isOn: isOn
1615		};
1616	} );
1617} )( window, window.jQuery );
1618