wp/wp-admin/js/editor-expand.js
changeset 16 a86126ab1dd4
parent 9 177826044cd9
child 21 48c4eec2b7e6
equal deleted inserted replaced
15:3d4e9c994f10 16:a86126ab1dd4
    13 	/**
    13 	/**
    14 	 * Handles the resizing of the editor.
    14 	 * Handles the resizing of the editor.
    15 	 *
    15 	 *
    16 	 * @since 4.0.0
    16 	 * @since 4.0.0
    17 	 *
    17 	 *
    18 	 * @returns {void}
    18 	 * @return {void}
    19 	 */
    19 	 */
    20 	$( function() {
    20 	$( function() {
    21 		var $wrap = $( '#postdivrich' ),
    21 		var $wrap = $( '#postdivrich' ),
    22 			$contentWrap = $( '#wp-content-wrap' ),
    22 			$contentWrap = $( '#wp-content-wrap' ),
    23 			$tools = $( '#wp-content-editor-tools' ),
    23 			$tools = $( '#wp-content-editor-tools' ),
    68 		 *
    68 		 *
    69 		 * Doesn't shrink the editor size below the 300px auto resize minimum height.
    69 		 * Doesn't shrink the editor size below the 300px auto resize minimum height.
    70 		 *
    70 		 *
    71 		 * @since 4.6.1
    71 		 * @since 4.6.1
    72 		 *
    72 		 *
    73 		 * @returns {void}
    73 		 * @return {void}
    74 		 */
    74 		 */
    75 		var shrinkTextarea = window._.throttle( function() {
    75 		var shrinkTextarea = window._.throttle( function() {
    76 			var x = window.scrollX || document.documentElement.scrollLeft;
    76 			var x = window.scrollX || document.documentElement.scrollLeft;
    77 			var y = window.scrollY || document.documentElement.scrollTop;
    77 			var y = window.scrollY || document.documentElement.scrollTop;
    78 			var height = parseInt( textEditor.style.height, 10 );
    78 			var height = parseInt( textEditor.style.height, 10 );
   100 		 * the old text length, it shrinks the text area. Otherwise it resizes the editor to
   100 		 * the old text length, it shrinks the text area. Otherwise it resizes the editor to
   101 		 * the scroll height.
   101 		 * the scroll height.
   102 		 *
   102 		 *
   103 		 * @since 4.6.1
   103 		 * @since 4.6.1
   104 		 *
   104 		 *
   105 		 * @returns {void}
   105 		 * @return {void}
   106 		 */
   106 		 */
   107 		function textEditorResize() {
   107 		function textEditorResize() {
   108 			var length = textEditor.value.length;
   108 			var length = textEditor.value.length;
   109 
   109 
   110 			if ( mceEditor && ! mceEditor.isHidden() ) {
   110 			if ( mceEditor && ! mceEditor.isHidden() ) {
   133 		 * and stores these in the heights object. Defaults to 0.
   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.
   134 		 * Gets the width of the window and stores this in the heights object.
   135 		 *
   135 		 *
   136 		 * @since 4.0.0
   136 		 * @since 4.0.0
   137 		 *
   137 		 *
   138 		 * @returns {void}
   138 		 * @return {void}
   139 		 */
   139 		 */
   140 		function getHeights() {
   140 		function getHeights() {
   141 			var windowWidth = $window.width();
   141 			var windowWidth = $window.width();
   142 
   142 
   143 			heights = {
   143 			heights = {
   167 		 * @since 4.0.0
   167 		 * @since 4.0.0
   168 		 *
   168 		 *
   169 		 * @param {event} event The TinyMCE editor init event.
   169 		 * @param {event} event The TinyMCE editor init event.
   170 		 * @param {object} editor The editor to bind the vents on.
   170 		 * @param {object} editor The editor to bind the vents on.
   171 		 *
   171 		 *
   172 		 * @returns {void}
   172 		 * @return {void}
   173 		 */
   173 		 */
   174 		$document.on( 'tinymce-editor-init.editor-expand', function( event, editor ) {
   174 		$document.on( 'tinymce-editor-init.editor-expand', function( event, editor ) {
   175 			// VK contains the type of key pressed. VK = virtual keyboard.
   175 			// VK contains the type of key pressed. VK = virtual keyboard.
   176 			var VK = window.tinymce.util.VK,
   176 			var VK = window.tinymce.util.VK,
   177 				/**
   177 				/**
   178 				 * Hides any float panel with a hover state. Additionally hides tooltips.
   178 				 * Hides any float panel with a hover state. Additionally hides tooltips.
   179 				 *
   179 				 *
   180 				 * @returns {void}
   180 				 * @return {void}
   181 				 */
   181 				 */
   182 				hideFloatPanels = _.debounce( function() {
   182 				hideFloatPanels = _.debounce( function() {
   183 					! $( '.mce-floatpanel:hover' ).length && window.tinymce.ui.FloatPanel.hideAll();
   183 					! $( '.mce-floatpanel:hover' ).length && window.tinymce.ui.FloatPanel.hideAll();
   184 					$( '.mce-tooltip' ).hide();
   184 					$( '.mce-tooltip' ).hide();
   185 				}, 1000, true );
   185 				}, 1000, true );
   202 			$menuBar = $contentWrap.find( '.mce-menubar' );
   202 			$menuBar = $contentWrap.find( '.mce-menubar' );
   203 
   203 
   204 			/**
   204 			/**
   205 			 * Gets the offset of the editor.
   205 			 * Gets the offset of the editor.
   206 			 *
   206 			 *
   207 			 * @returns {Number|Boolean} Returns the offset of the editor
   207 			 * @return {number|boolean} Returns the offset of the editor
   208 			 * or false if there is no offset height.
   208 			 * or false if there is no offset height.
   209 			 */
   209 			 */
   210 			function mceGetCursorOffset() {
   210 			function mceGetCursorOffset() {
   211 				var node = editor.selection.getNode(),
   211 				var node = editor.selection.getNode(),
   212 					range, view, offset;
   212 					range, view, offset;
   239 			 *
   239 			 *
   240 			 * @since 4.0.0
   240 			 * @since 4.0.0
   241 			 *
   241 			 *
   242 			 * @param {event} event The event to get the key code from.
   242 			 * @param {event} event The event to get the key code from.
   243 			 *
   243 			 *
   244 			 * @returns {void}
   244 			 * @return {void}
   245 			 */
   245 			 */
   246 			function mceKeyup( event ) {
   246 			function mceKeyup( event ) {
   247 				var key = event.keyCode;
   247 				var key = event.keyCode;
   248 
   248 
   249 				// Bail on special keys. Key code 47 is a /
   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 ) ) {
   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;
   251 					return;
   252 				// OS keys, function keys, num lock, scroll lock. Key code 91-93 are OS keys. Key code 112-123 are F1 to F12. Key code 144 is num lock. Key code 145 is scroll lock.
   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.
   253 				} else if ( ( key >= 91 && key <= 93 ) || ( key >= 112 && key <= 123 ) || key === 144 || key === 145 ) {
   254 				} else if ( ( key >= 91 && key <= 93 ) || ( key >= 112 && key <= 123 ) || key === 144 || key === 145 ) {
   254 					return;
   255 					return;
   255 				}
   256 				}
   256 
   257 
   257 				mceScroll( key );
   258 				mceScroll( key );
   268 			 *
   269 			 *
   269 			 * @since 4.1.0
   270 			 * @since 4.1.0
   270 			 *
   271 			 *
   271 			 * @param {string} key The key code of the pressed key.
   272 			 * @param {string} key The key code of the pressed key.
   272 			 *
   273 			 *
   273 			 * @returns {void}
   274 			 * @return {void}
   274 			 */
   275 			 */
   275 			function mceScroll( key ) {
   276 			function mceScroll( key ) {
   276 				var offset = mceGetCursorOffset(),
   277 				var offset = mceGetCursorOffset(),
   277 					buffer = 50,
   278 					buffer = 50,
   278 					cursorTop, cursorBottom, editorTop, editorBottom;
   279 					cursorTop, cursorBottom, editorTop, editorBottom;
   329 			 *
   330 			 *
   330 			 * @since 4.1.0
   331 			 * @since 4.1.0
   331 			 *
   332 			 *
   332 			 * @param {event} event The FullscreenStateChanged event.
   333 			 * @param {event} event The FullscreenStateChanged event.
   333 			 *
   334 			 *
   334 			 * @returns {void}
   335 			 * @return {void}
   335 			 */
   336 			 */
   336 			function mceFullscreenToggled( event ) {
   337 			function mceFullscreenToggled( event ) {
   337 				// event.state is true if the editor is fullscreen.
   338 				// event.state is true if the editor is fullscreen.
   338 				if ( ! event.state ) {
   339 				if ( ! event.state ) {
   339 					adjust();
   340 					adjust();
   346 			 * Binds the hideFloatPanels function on the window scroll.mce-float-panels event.
   347 			 * Binds the hideFloatPanels function on the window scroll.mce-float-panels event.
   347 			 * Executes the wpAutoResize on the active editor.
   348 			 * Executes the wpAutoResize on the active editor.
   348 			 *
   349 			 *
   349 			 * @since 4.0.0
   350 			 * @since 4.0.0
   350 			 *
   351 			 *
   351 			 * @returns {void}
   352 			 * @return {void}
   352 			 */
   353 			 */
   353 			function mceShow() {
   354 			function mceShow() {
   354 				$window.on( 'scroll.mce-float-panels', hideFloatPanels );
   355 				$window.on( 'scroll.mce-float-panels', hideFloatPanels );
   355 
   356 
   356 				setTimeout( function() {
   357 				setTimeout( function() {
   365 			 * Removes all functions from the window scroll.mce-float-panels event.
   366 			 * Removes all functions from the window scroll.mce-float-panels event.
   366 			 * Resizes the text editor and scrolls to a position based on the pageXOffset and adminBarHeight.
   367 			 * Resizes the text editor and scrolls to a position based on the pageXOffset and adminBarHeight.
   367 			 *
   368 			 *
   368 			 * @since 4.0.0
   369 			 * @since 4.0.0
   369 			 *
   370 			 *
   370 			 * @returns {void}
   371 			 * @return {void}
   371 			 */
   372 			 */
   372 			function mceHide() {
   373 			function mceHide() {
   373 				$window.off( 'scroll.mce-float-panels' );
   374 				$window.off( 'scroll.mce-float-panels' );
   374 
   375 
   375 				setTimeout( function() {
   376 				setTimeout( function() {
   389 			/**
   390 			/**
   390 			 * Toggles advanced states.
   391 			 * Toggles advanced states.
   391 			 *
   392 			 *
   392 			 * @since 4.1.0
   393 			 * @since 4.1.0
   393 			 *
   394 			 *
   394 			 * @returns {void}
   395 			 * @return {void}
   395 			 */
   396 			 */
   396 			function toggleAdvanced() {
   397 			function toggleAdvanced() {
   397 				advanced = ! advanced;
   398 				advanced = ! advanced;
   398 			}
   399 			}
   399 
   400 
   400 			/**
   401 			/**
   401 			 * Binds events of the editor and window.
   402 			 * Binds events of the editor and window.
   402 			 *
   403 			 *
   403 			 * @since 4.0.0
   404 			 * @since 4.0.0
   404 			 *
   405 			 *
   405 			 * @returns {void}
   406 			 * @return {void}
   406 			 */
   407 			 */
   407 			mceBind = function() {
   408 			mceBind = function() {
   408 				editor.on( 'keyup', mceKeyup );
   409 				editor.on( 'keyup', mceKeyup );
   409 				editor.on( 'show', mceShow );
   410 				editor.on( 'show', mceShow );
   410 				editor.on( 'hide', mceHide );
   411 				editor.on( 'hide', mceHide );
   425 			/**
   426 			/**
   426 			 * Unbinds the events of the editor and window.
   427 			 * Unbinds the events of the editor and window.
   427 			 *
   428 			 *
   428 			 * @since 4.0.0
   429 			 * @since 4.0.0
   429 			 *
   430 			 *
   430 			 * @returns {void}
   431 			 * @return {void}
   431 			 */
   432 			 */
   432 			mceUnbind = function() {
   433 			mceUnbind = function() {
   433 				editor.off( 'keyup', mceKeyup );
   434 				editor.off( 'keyup', mceKeyup );
   434 				editor.off( 'show', mceShow );
   435 				editor.off( 'show', mceShow );
   435 				editor.off( 'hide', mceHide );
   436 				editor.off( 'hide', mceHide );
   458 		 *
   459 		 *
   459 		 * @since 4.0.0
   460 		 * @since 4.0.0
   460 		 *
   461 		 *
   461 		 * @param {event} event The event that calls this function.
   462 		 * @param {event} event The event that calls this function.
   462 		 *
   463 		 *
   463 		 * @returns {void}
   464 		 * @return {void}
   464 		 */
   465 		 */
   465 		function adjust( event ) {
   466 		function adjust( event ) {
   466 
   467 
   467 			// Makes sure we're not in fullscreen mode.
   468 			// Makes sure we're not in fullscreen mode.
   468 			if ( fullscreen && fullscreen.settings.visible ) {
   469 			if ( fullscreen && fullscreen.settings.visible ) {
   514 
   515 
   515 			/*
   516 			/*
   516 			 * If in visual mode, checks if the editorHeight is greater than the autoresizeMinHeight + topHeight.
   517 			 * If in visual mode, checks if the editorHeight is greater than the autoresizeMinHeight + topHeight.
   517 			 * If not in visual mode, checks if the editorHeight is greater than the autoresizeMinHeight + 20.
   518 			 * If not in visual mode, checks if the editorHeight is greater than the autoresizeMinHeight + 20.
   518 			 */
   519 			 */
   519 			canPin = visual ? autoresizeMinHeight + topHeight : autoresizeMinHeight + 20; // 20px from textarea padding
   520 			canPin = visual ? autoresizeMinHeight + topHeight : autoresizeMinHeight + 20; // 20px from textarea padding.
   520 			canPin = editorHeight > ( canPin + 5 );
   521 			canPin = editorHeight > ( canPin + 5 );
   521 
   522 
   522 			if ( ! canPin ) {
   523 			if ( ! canPin ) {
   523 				if ( resize ) {
   524 				if ( resize ) {
   524 					$tools.css( {
   525 					$tools.css( {
   770 		/**
   771 		/**
   771 		 * Resizes the editor and adjusts the toolbars.
   772 		 * Resizes the editor and adjusts the toolbars.
   772 		 *
   773 		 *
   773 		 * @since 4.0.0
   774 		 * @since 4.0.0
   774 		 *
   775 		 *
   775 		 * @returns {void}
   776 		 * @return {void}
   776 		 */
   777 		 */
   777 		function fullscreenHide() {
   778 		function fullscreenHide() {
   778 			textEditorResize();
   779 			textEditorResize();
   779 			adjust();
   780 			adjust();
   780 		}
   781 		}
   784 		 *
   785 		 *
   785 		 * @since 4.0.0
   786 		 * @since 4.0.0
   786 		 *
   787 		 *
   787 		 * @param {function} callback The function to run in the timeout.
   788 		 * @param {function} callback The function to run in the timeout.
   788 		 *
   789 		 *
   789 		 * @returns {void}
   790 		 * @return {void}
   790 		 */
   791 		 */
   791 		function initialResize( callback ) {
   792 		function initialResize( callback ) {
   792 			for ( var i = 1; i < 6; i++ ) {
   793 			for ( var i = 1; i < 6; i++ ) {
   793 				setTimeout( callback, 500 * i );
   794 				setTimeout( callback, 500 * i );
   794 			}
   795 			}
   797 		/**
   798 		/**
   798 		 * Runs adjust after 100ms.
   799 		 * Runs adjust after 100ms.
   799 		 *
   800 		 *
   800 		 * @since 4.0.0
   801 		 * @since 4.0.0
   801 		 *
   802 		 *
   802 		 * @returns {void}
   803 		 * @return {void}
   803 		 */
   804 		 */
   804 		function afterScroll() {
   805 		function afterScroll() {
   805 			clearTimeout( scrollTimer );
   806 			clearTimeout( scrollTimer );
   806 			scrollTimer = setTimeout( adjust, 100 );
   807 			scrollTimer = setTimeout( adjust, 100 );
   807 		}
   808 		}
   809 		/**
   810 		/**
   810 		 * Binds editor expand events on elements.
   811 		 * Binds editor expand events on elements.
   811 		 *
   812 		 *
   812 		 * @since 4.0.0
   813 		 * @since 4.0.0
   813 		 *
   814 		 *
   814 		 * @returns {void}
   815 		 * @return {void}
   815 		 */
   816 		 */
   816 		function on() {
   817 		function on() {
   817 			/*
   818 			/*
   818 			 * Scroll to the top when triggering this from JS.
   819 			 * Scroll to the top when triggering this from JS.
   819 			 * Ensure the toolbars are pinned properly.
   820 			 * Ensure the toolbars are pinned properly.
   879 		/**
   880 		/**
   880 		 * Unbinds editor expand events.
   881 		 * Unbinds editor expand events.
   881 		 *
   882 		 *
   882 		 * @since 4.0.0
   883 		 * @since 4.0.0
   883 		 *
   884 		 *
   884 		 * @returns {void}
   885 		 * @return {void}
   885 		 */
   886 		 */
   886 		function off() {
   887 		function off() {
   887 			var height = parseInt( window.getUserSetting( 'ed_size', 300 ), 10 );
   888 			var height = parseInt( window.getUserSetting( 'ed_size', 300 ), 10 );
   888 
   889 
   889 			if ( height < 50 ) {
   890 			if ( height < 50 ) {
   908 			mceUnbind();
   909 			mceUnbind();
   909 
   910 
   910 			// Adjust when entering or exiting fullscreen mode.
   911 			// Adjust when entering or exiting fullscreen mode.
   911 			fullscreen && fullscreen.pubsub.unsubscribe( 'hidden', fullscreenHide );
   912 			fullscreen && fullscreen.pubsub.unsubscribe( 'hidden', fullscreenHide );
   912 
   913 
   913 			// Reset all css
   914 			// Reset all CSS.
   914 			$.each( [ $visualTop, $textTop, $tools, $menuBar, $bottom, $statusBar, $contentWrap, $visualEditor, $textEditor, $sideSortables ], function( i, element ) {
   915 			$.each( [ $visualTop, $textTop, $tools, $menuBar, $bottom, $statusBar, $contentWrap, $visualEditor, $textEditor, $sideSortables ], function( i, element ) {
   915 				element && element.attr( 'style', '' );
   916 				element && element.attr( 'style', '' );
   916 			});
   917 			});
   917 
   918 
   918 			fixedTop = fixedBottom = fixedSideTop = fixedSideBottom = false;
   919 			fixedTop = fixedBottom = fixedSideTop = fixedSideBottom = false;
   973 	/**
   974 	/**
   974 	 * Handles the distraction free writing of TinyMCE.
   975 	 * Handles the distraction free writing of TinyMCE.
   975 	 *
   976 	 *
   976 	 * @since 4.1.0
   977 	 * @since 4.1.0
   977 	 *
   978 	 *
   978 	 * @returns {void}
   979 	 * @return {void}
   979 	 */
   980 	 */
   980 	$( function() {
   981 	$( function() {
   981 		var $body = $( document.body ),
   982 		var $body = $( document.body ),
   982 			$wrap = $( '#wpcontent' ),
   983 			$wrap = $( '#wpcontent' ),
   983 			$editor = $( '#post-body-content' ),
   984 			$editor = $( '#post-body-content' ),
  1023 		/**
  1024 		/**
  1024 		 * Recalculates the bottom and right position of the editor in the DOM.
  1025 		 * Recalculates the bottom and right position of the editor in the DOM.
  1025 		 *
  1026 		 *
  1026 		 * @since 4.1.0
  1027 		 * @since 4.1.0
  1027 		 *
  1028 		 *
  1028 		 * @returns {void}
  1029 		 * @return {void}
  1029 		 */
  1030 		 */
  1030 		function recalcEditorRect() {
  1031 		function recalcEditorRect() {
  1031 			editorRect = $editor.offset();
  1032 			editorRect = $editor.offset();
  1032 			editorRect.right = editorRect.left + $editor.outerWidth();
  1033 			editorRect.right = editorRect.left + $editor.outerWidth();
  1033 			editorRect.bottom = editorRect.top + $editor.outerHeight();
  1034 			editorRect.bottom = editorRect.top + $editor.outerHeight();
  1036 		/**
  1037 		/**
  1037 		 * Activates the distraction free writing mode.
  1038 		 * Activates the distraction free writing mode.
  1038 		 *
  1039 		 *
  1039 		 * @since 4.1.0
  1040 		 * @since 4.1.0
  1040 		 *
  1041 		 *
  1041 		 * @returns {void}
  1042 		 * @return {void}
  1042 		 */
  1043 		 */
  1043 		function activate() {
  1044 		function activate() {
  1044 			if ( ! _isActive ) {
  1045 			if ( ! _isActive ) {
  1045 				_isActive = true;
  1046 				_isActive = true;
  1046 
  1047 
  1052 		/**
  1053 		/**
  1053 		 * Deactivates the distraction free writing mode.
  1054 		 * Deactivates the distraction free writing mode.
  1054 		 *
  1055 		 *
  1055 		 * @since 4.1.0
  1056 		 * @since 4.1.0
  1056 		 *
  1057 		 *
  1057 		 * @returns {void}
  1058 		 * @return {void}
  1058 		 */
  1059 		 */
  1059 		function deactivate() {
  1060 		function deactivate() {
  1060 			if ( _isActive ) {
  1061 			if ( _isActive ) {
  1061 				off();
  1062 				off();
  1062 
  1063 
  1070 		/**
  1071 		/**
  1071 		 * Returns _isActive.
  1072 		 * Returns _isActive.
  1072 		 *
  1073 		 *
  1073 		 * @since 4.1.0
  1074 		 * @since 4.1.0
  1074 		 *
  1075 		 *
  1075 		 * @returns {boolean} Returns true is _isActive is true.
  1076 		 * @return {boolean} Returns true is _isActive is true.
  1076 		 */
  1077 		 */
  1077 		function isActive() {
  1078 		function isActive() {
  1078 			return _isActive;
  1079 			return _isActive;
  1079 		}
  1080 		}
  1080 
  1081 
  1081 		/**
  1082 		/**
  1082 		 * Binds events on the editor for distraction free writing.
  1083 		 * Binds events on the editor for distraction free writing.
  1083 		 *
  1084 		 *
  1084 		 * @since 4.1.0
  1085 		 * @since 4.1.0
  1085 		 *
  1086 		 *
  1086 		 * @returns {void}
  1087 		 * @return {void}
  1087 		 */
  1088 		 */
  1088 		function on() {
  1089 		function on() {
  1089 			if ( ! _isOn && _isActive ) {
  1090 			if ( ! _isOn && _isActive ) {
  1090 				_isOn = true;
  1091 				_isOn = true;
  1091 
  1092 
  1104 		/**
  1105 		/**
  1105 		 * Unbinds events on the editor for distraction free writing.
  1106 		 * Unbinds events on the editor for distraction free writing.
  1106 		 *
  1107 		 *
  1107 		 * @since 4.1.0
  1108 		 * @since 4.1.0
  1108 		 *
  1109 		 *
  1109 		 * @returns {void}
  1110 		 * @return {void}
  1110 		 */
  1111 		 */
  1111 		function off() {
  1112 		function off() {
  1112 			if ( _isOn ) {
  1113 			if ( _isOn ) {
  1113 				_isOn = false;
  1114 				_isOn = false;
  1114 
  1115 
  1127 		/**
  1128 		/**
  1128 		 * Binds or unbinds the editor expand events.
  1129 		 * Binds or unbinds the editor expand events.
  1129 		 *
  1130 		 *
  1130 		 * @since 4.1.0
  1131 		 * @since 4.1.0
  1131 		 *
  1132 		 *
  1132 		 * @returns {void}
  1133 		 * @return {void}
  1133 		 */
  1134 		 */
  1134 		function toggle() {
  1135 		function toggle() {
  1135 			if ( _isOn ) {
  1136 			if ( _isOn ) {
  1136 				off();
  1137 				off();
  1137 			} else {
  1138 			} else {
  1142 		/**
  1143 		/**
  1143 		 * Returns the value of _isOn.
  1144 		 * Returns the value of _isOn.
  1144 		 *
  1145 		 *
  1145 		 * @since 4.1.0
  1146 		 * @since 4.1.0
  1146 		 *
  1147 		 *
  1147 		 * @returns {boolean} Returns true if _isOn is true.
  1148 		 * @return {boolean} Returns true if _isOn is true.
  1148 		 */
  1149 		 */
  1149 		function isOn() {
  1150 		function isOn() {
  1150 			return _isOn;
  1151 			return _isOn;
  1151 		}
  1152 		}
  1152 
  1153 
  1159 		 *
  1160 		 *
  1160 		 * @since 4.1.0
  1161 		 * @since 4.1.0
  1161 		 *
  1162 		 *
  1162 		 * @param event The event that triggers this function.
  1163 		 * @param event The event that triggers this function.
  1163 		 *
  1164 		 *
  1164 		 * @returns {void}
  1165 		 * @return {void}
  1165 		 */
  1166 		 */
  1166 		function fadeOut( event ) {
  1167 		function fadeOut( event ) {
  1167 			var isMac,
  1168 			var isMac,
  1168 				key = event && event.keyCode;
  1169 				key = event && event.keyCode;
  1169 
  1170 
  1177 				return;
  1178 				return;
  1178 			}
  1179 			}
  1179 
  1180 
  1180 			// Return if any of the following keys or combinations of keys is pressed.
  1181 			// Return if any of the following keys or combinations of keys is pressed.
  1181 			if ( event && ( event.metaKey || ( event.ctrlKey && ! event.altKey ) || ( event.altKey && event.shiftKey ) || ( key && (
  1182 			if ( event && ( event.metaKey || ( event.ctrlKey && ! event.altKey ) || ( event.altKey && event.shiftKey ) || ( key && (
  1182 				// Special keys ( tab, ctrl, alt, esc, arrow keys... )
  1183 				// Special keys ( tab, ctrl, alt, esc, arrow keys... ).
  1183 				( key <= 47 && key !== 8 && key !== 13 && key !== 32 && key !== 46 ) ||
  1184 				( key <= 47 && key !== 8 && key !== 13 && key !== 32 && key !== 46 ) ||
  1184 				// Windows keys
  1185 				// Windows keys.
  1185 				( key >= 91 && key <= 93 ) ||
  1186 				( key >= 91 && key <= 93 ) ||
  1186 				// F keys
  1187 				// F keys.
  1187 				( key >= 112 && key <= 135 ) ||
  1188 				( key >= 112 && key <= 135 ) ||
  1188 				// Num Lock, Scroll Lock, OEM
  1189 				// Num Lock, Scroll Lock, OEM.
  1189 				( key >= 144 && key <= 150 ) ||
  1190 				( key >= 144 && key <= 150 ) ||
  1190 				// OEM or non-printable
  1191 				// OEM or non-printable.
  1191 				key >= 224
  1192 				key >= 224
  1192 			) ) ) ) {
  1193 			) ) ) ) {
  1193 				return;
  1194 				return;
  1194 			}
  1195 			}
  1195 
  1196 
  1298 		 *
  1299 		 *
  1299 		 * @since 4.1.0
  1300 		 * @since 4.1.0
  1300 		 *
  1301 		 *
  1301 		 * @param event The event that triggers this function.
  1302 		 * @param event The event that triggers this function.
  1302 		 *
  1303 		 *
  1303 		 * @returns {void}
  1304 		 * @return {void}
  1304 		 */
  1305 		 */
  1305 		function fadeIn( event ) {
  1306 		function fadeIn( event ) {
  1306 			if ( faded ) {
  1307 			if ( faded ) {
  1307 				faded = false;
  1308 				faded = false;
  1308 
  1309 
  1344 		/**
  1345 		/**
  1345 		 * Fades in if the focused element based on it position.
  1346 		 * Fades in if the focused element based on it position.
  1346 		 *
  1347 		 *
  1347 		 * @since 4.1.0
  1348 		 * @since 4.1.0
  1348 		 *
  1349 		 *
  1349 		 * @returns {void}
  1350 		 * @return {void}
  1350 		 */
  1351 		 */
  1351 		function maybeFadeIn() {
  1352 		function maybeFadeIn() {
  1352 			setTimeout( function() {
  1353 			setTimeout( function() {
  1353 				var position = document.activeElement.compareDocumentPosition( $editor.get( 0 ) );
  1354 				var position = document.activeElement.compareDocumentPosition( $editor.get( 0 ) );
  1354 
  1355 
  1366 		/**
  1367 		/**
  1367 		 * Fades out the admin bar based on focus on the admin bar.
  1368 		 * Fades out the admin bar based on focus on the admin bar.
  1368 		 *
  1369 		 *
  1369 		 * @since 4.1.0
  1370 		 * @since 4.1.0
  1370 		 *
  1371 		 *
  1371 		 * @returns {void}
  1372 		 * @return {void}
  1372 		 */
  1373 		 */
  1373 		function fadeOutAdminBar() {
  1374 		function fadeOutAdminBar() {
  1374 			if ( ! fadedAdminBar && faded ) {
  1375 			if ( ! fadedAdminBar && faded ) {
  1375 				fadedAdminBar = true;
  1376 				fadedAdminBar = true;
  1376 
  1377 
  1387 		/**
  1388 		/**
  1388 		 * Fades in the admin bar.
  1389 		 * Fades in the admin bar.
  1389 		 *
  1390 		 *
  1390 		 * @since 4.1.0
  1391 		 * @since 4.1.0
  1391 		 *
  1392 		 *
  1392 		 * @returns {void}
  1393 		 * @return {void}
  1393 		 */
  1394 		 */
  1394 		function fadeInAdminBar() {
  1395 		function fadeInAdminBar() {
  1395 			if ( fadedAdminBar ) {
  1396 			if ( fadedAdminBar ) {
  1396 				fadedAdminBar = false;
  1397 				fadedAdminBar = false;
  1397 
  1398 
  1402 		/**
  1403 		/**
  1403 		 * Fades out the edit slug box.
  1404 		 * Fades out the edit slug box.
  1404 		 *
  1405 		 *
  1405 		 * @since 4.1.0
  1406 		 * @since 4.1.0
  1406 		 *
  1407 		 *
  1407 		 * @returns {void}
  1408 		 * @return {void}
  1408 		 */
  1409 		 */
  1409 		function fadeOutSlug() {
  1410 		function fadeOutSlug() {
  1410 			if ( ! fadedSlug && faded && ! $slug.find( ':focus').length ) {
  1411 			if ( ! fadedSlug && faded && ! $slug.find( ':focus').length ) {
  1411 				fadedSlug = true;
  1412 				fadedSlug = true;
  1412 
  1413 
  1419 		/**
  1420 		/**
  1420 		 * Fades in the edit slug box.
  1421 		 * Fades in the edit slug box.
  1421 		 *
  1422 		 *
  1422 		 * @since 4.1.0
  1423 		 * @since 4.1.0
  1423 		 *
  1424 		 *
  1424 		 * @returns {void}
  1425 		 * @return {void}
  1425 		 */
  1426 		 */
  1426 		function fadeInSlug() {
  1427 		function fadeInSlug() {
  1427 			if ( fadedSlug ) {
  1428 			if ( fadedSlug ) {
  1428 				fadedSlug = false;
  1429 				fadedSlug = false;
  1429 
  1430 
  1440 		 *
  1441 		 *
  1441 		 * @since 4.1.0
  1442 		 * @since 4.1.0
  1442 		 *
  1443 		 *
  1443 		 * @param {event} event The event to trigger the toggle.
  1444 		 * @param {event} event The event to trigger the toggle.
  1444 		 *
  1445 		 *
  1445 		 * @returns {void}
  1446 		 * @return {void}
  1446 		 */
  1447 		 */
  1447 		function toggleViaKeyboard( event ) {
  1448 		function toggleViaKeyboard( event ) {
  1448 			if ( event.altKey && event.shiftKey && 87 === event.keyCode ) {
  1449 			if ( event.altKey && event.shiftKey && 87 === event.keyCode ) {
  1449 				toggle();
  1450 				toggle();
  1450 			}
  1451 			}
  1460 		 * @since 4.1.0
  1461 		 * @since 4.1.0
  1461 		 *
  1462 		 *
  1462 		 * @param {event} event The TinyMCE editor setup event.
  1463 		 * @param {event} event The TinyMCE editor setup event.
  1463 		 * @param {object} editor The editor to add the button to.
  1464 		 * @param {object} editor The editor to add the button to.
  1464 		 *
  1465 		 *
  1465 		 * @returns {void}
  1466 		 * @return {void}
  1466 		 */
  1467 		 */
  1467 		$document.on( 'tinymce-editor-setup.focus', function( event, editor ) {
  1468 		$document.on( 'tinymce-editor-setup.focus', function( event, editor ) {
  1468 			editor.addButton( 'dfw', {
  1469 			editor.addButton( 'dfw', {
  1469 				active: _isOn,
  1470 				active: _isOn,
  1470 				classes: 'wp-dfw btn widget',
  1471 				classes: 'wp-dfw btn widget',
  1509 		 * @since 4.1.0
  1510 		 * @since 4.1.0
  1510 		 *
  1511 		 *
  1511 		 * @param {event} event The TinyMCE editor init event.
  1512 		 * @param {event} event The TinyMCE editor init event.
  1512 		 * @param {object} editor The editor to bind events on.
  1513 		 * @param {object} editor The editor to bind events on.
  1513 		 *
  1514 		 *
  1514 		 * @returns {void}
  1515 		 * @return {void}
  1515 		 */
  1516 		 */
  1516 		$document.on( 'tinymce-editor-init.focus', function( event, editor ) {
  1517 		$document.on( 'tinymce-editor-init.focus', function( event, editor ) {
  1517 			var mceBind, mceUnbind;
  1518 			var mceBind, mceUnbind;
  1518 
  1519 
  1519 			function focus() {
  1520 			function focus() {
  1566 		 * @since 4.1.0
  1567 		 * @since 4.1.0
  1567 		 *
  1568 		 *
  1568 		 * @param {event} event The quicktags init event.
  1569 		 * @param {event} event The quicktags init event.
  1569 		 * @param {object} editor The editor to bind events on.
  1570 		 * @param {object} editor The editor to bind events on.
  1570 		 *
  1571 		 *
  1571 		 * @returns {void}
  1572 		 * @return {void}
  1572 		 */
  1573 		 */
  1573 		$document.on( 'quicktags-init', function( event, editor ) {
  1574 		$document.on( 'quicktags-init', function( event, editor ) {
  1574 			var $button;
  1575 			var $button;
  1575 
  1576 
  1576 			// Bind the distraction free writing events if the distraction free writing button is available.
  1577 			// Bind the distraction free writing events if the distraction free writing button is available.