enmi-conf.org: comparison wp/wp-admin/js/editor-expand.js

Mercurial Mercurial > enmi-conf.org / comparison

summary | shortlog | changelog | graph | tags | bookmarks | branches | files | changeset | file | latest | revisions | annotate | diff | comparison | raw | help

wp/wp-admin/js/editor-expand.js

changeset 7	cf61fcea0001
parent 5	5e2f62d02dcd
child 9	177826044cd9

equal deleted inserted replaced

-:490d5cc509ed
+:cf61fcea0001
 	var $window = $( window ),
 		$document = $( document ),
 		$adminBar = $( '#wpadminbar' ),
 		$footer = $( '#wpfooter' );
-	/* Autoresize editor. */
+	/**
+	 * @summary Handles the resizing of the editor.
+	 *
+	 * @since 4.0.0
+	 *
+	 * @returns {void}
+	 */
 	$( function() {
 		var $wrap = $( '#postdivrich' ),
 			$contentWrap = $( '#wp-content-wrap' ),
 			$tools = $( '#wp-content-editor-tools' ),
 			$visualTop = $(),
 			$visualEditor = $(),
 			$textTop = $( '#ed_toolbar' ),
 			$textEditor = $( '#content' ),
-			$textEditorClone = $( '<div id="content-textarea-clone" class="wp-exclude-emoji"></div>' ),
+			textEditor = $textEditor[0],
+			oldTextLength = 0,
 			$bottom = $( '#post-status-info' ),
 			$menuBar = $(),
 			$statusBar = $(),
 			$sideSortables = $( '#side-sortables' ),
 			$postboxContainer = $( '#postbox-container-1' ),
 				bottomHeight: 0,
 				statusBarHeight: 0,
 				sideSortablesHeight: 0
 			};
-		$textEditorClone.insertAfter( $textEditor );
+		/**
+		 * @summary Resizes textarea based on scroll height and width.
-		$textEditorClone.css( {
+		 *
-			'font-family': $textEditor.css( 'font-family' ),
+		 * Resizes textarea based on scroll height and width. Doesn't shrink the
-			'font-size': $textEditor.css( 'font-size' ),
+		 * editor size below the 300px auto resize minimum height.
-			'line-height': $textEditor.css( 'line-height' ),
+		 *
-			'white-space': 'pre-wrap',
+		 * @since 4.6.1
-			'word-wrap': 'break-word'
+		 *
-		} );
+		 * @returns {void}
+		 */
+		var shrinkTextarea = window._.throttle( function() {
+			var x = window.scrollX || document.documentElement.scrollLeft;
+			var y = window.scrollY || document.documentElement.scrollTop;
+			var height = parseInt( textEditor.style.height, 10 );
+			textEditor.style.height = autoresizeMinHeight + 'px';
+			if ( textEditor.scrollHeight > autoresizeMinHeight ) {
+				textEditor.style.height = textEditor.scrollHeight + 'px';
+			}
+			if ( typeof x !== 'undefined' ) {
+				window.scrollTo( x, y );
+			}
+			if ( textEditor.scrollHeight < height ) {
+				adjust();
+			}
+		}, 300 );
+		/**
+		 * @summary Resizes the text editor depending on the old text length.
+		 *
+		 * If there is an mceEditor and it is hidden, it resizes the editor depending
+		 * on the old text length. If the current length of the text is smaller than
+		 * the old text length, it shrinks the text area. Otherwise it resizes the editor to
+		 * the scroll height.
+		 *
+		 * @since 4.6.1
+		 *
+		 * @returns {void}
+		 */
+		function textEditorResize() {
+			var length = textEditor.value.length;
+			if ( mceEditor && ! mceEditor.isHidden() ) {
+				return;
+			}
+			if ( ! mceEditor && initialMode === 'tinymce' ) {
+				return;
+			}
+			if ( length < oldTextLength ) {
+				shrinkTextarea();
+			} else if ( parseInt( textEditor.style.height, 10 ) < textEditor.scrollHeight ) {
+				textEditor.style.height = Math.ceil( textEditor.scrollHeight ) + 'px';
+				adjust();
+			}
+			oldTextLength = length;
+		}
+		/**
+		 * @summary Gets the height and widths of elements.
+		 *
+		 * Gets the heights of the window, the adminbar, the tools, the menu,
+		 * the visualTop, the textTop, the bottom, the statusbar and sideSortables
+		 * and stores these in the heights object. Defaults to 0.
+		 * Gets the width of the window and stores this in the heights object.
+		 *
+		 * @since 4.0.0
+		 *
+		 * @returns {void}
+		 */
 		function getHeights() {
 			var windowWidth = $window.width();
 			heights = {
 				windowHeight: $window.height(),
 				bottomHeight: $bottom.outerHeight() || 0,
 				statusBarHeight: $statusBar.outerHeight() || 0,
 				sideSortablesHeight: $sideSortables.height() || 0
 			};
-			// Adjust for hidden
+			// Adjust for hidden menubar.
 			if ( heights.menuBarHeight < 3 ) {
 				heights.menuBarHeight = 0;
 			}
 		}
-		function textEditorKeyup( event ) {
-			var VK = jQuery.ui.keyCode,
-				key = event.keyCode,
-				range = document.createRange(),
-				selStart = $textEditor[0].selectionStart,
-				selEnd = $textEditor[0].selectionEnd,
-				textNode = $textEditorClone[0].firstChild,
-				buffer = 10,
-				offset, cursorTop, cursorBottom, editorTop, editorBottom;
-			if ( selStart && selEnd && selStart !== selEnd ) {
-				return;
-			}
-			// These are not TinyMCE ranges.
-			try {
-				range.setStart( textNode, selStart );
-				range.setEnd( textNode, selEnd + 1 );
-			} catch ( ex ) {}
-			offset = range.getBoundingClientRect();
-			if ( ! offset.height ) {
-				return;
-			}
-			cursorTop = offset.top - buffer;
-			cursorBottom = cursorTop + offset.height + buffer;
-			editorTop = heights.adminBarHeight + heights.toolsHeight + heights.textTopHeight;
-			editorBottom = heights.windowHeight - heights.bottomHeight;
-			if ( cursorTop < editorTop && ( key === VK.UP || key === VK.LEFT || key === VK.BACKSPACE ) ) {
-				window.scrollTo( window.pageXOffset, cursorTop + window.pageYOffset - editorTop );
-			} else if ( cursorBottom > editorBottom ) {
-				window.scrollTo( window.pageXOffset, cursorBottom + window.pageYOffset - editorBottom );
-			}
-		}
-		function textEditorResize() {
-			if ( ( mceEditor && ! mceEditor.isHidden() ) || ( ! mceEditor && initialMode === 'tinymce' ) ) {
-				return;
-			}
-			var textEditorHeight = $textEditor.height(),
-				hiddenHeight;
-			$textEditorClone.width( $textEditor.width() - 22 );
-			$textEditorClone.text( $textEditor.val() + '&nbsp;' );
-			hiddenHeight = $textEditorClone.height();
-			if ( hiddenHeight < autoresizeMinHeight ) {
-				hiddenHeight = autoresizeMinHeight;
-			}
-			if ( hiddenHeight === textEditorHeight ) {
-				return;
-			}
-			$textEditor.height( hiddenHeight );
-			adjust();
-		}
 		// We need to wait for TinyMCE to initialize.
+		/**
+		 * @summary Binds all necessary functions for editor expand to the editor
+		 * when the editor is initialized.
+		 *
+		 * @since 4.0.0
+		 *
+		 * @param {event} event The TinyMCE editor init event.
+		 * @param {object} editor The editor to bind the vents on.
+		 *
+		 * @returns {void}
+		 */
 		$document.on( 'tinymce-editor-init.editor-expand', function( event, editor ) {
+			// VK contains the type of key pressed. VK = virtual keyboard.
 			var VK = window.tinymce.util.VK,
+				/**
+				 * @summary Hides any float panel with a hover state. Additionally hides tooltips.
+				 *
+				 * @returns {void}
+				 */
 				hideFloatPanels = _.debounce( function() {
 					! $( '.mce-floatpanel:hover' ).length && window.tinymce.ui.FloatPanel.hideAll();
 					$( '.mce-tooltip' ).hide();
 				}, 1000, true );
 			$visualTop = $contentWrap.find( '.mce-toolbar-grp' );
 			$visualEditor = $contentWrap.find( '.mce-edit-area' );
 			$statusBar = $contentWrap.find( '.mce-statusbar' );
 			$menuBar = $contentWrap.find( '.mce-menubar' );
+			/**
+			 * @summary Gets the offset of the editor.
+			 *
+			 * @returns {Number|Boolean} Returns the offset of the editor
+			 * or false if there is no offset height.
+			 */
 			function mceGetCursorOffset() {
 				var node = editor.selection.getNode(),
 					range, view, offset;
+				/*
+				 * If editor.wp.getView and the selection node from the editor selection
+				 * are defined, use this as a view for the offset.
+				 */
 				if ( editor.wp && editor.wp.getView && ( view = editor.wp.getView( node ) ) ) {
 					offset = view.getBoundingClientRect();
 				} else {
 					range = editor.selection.getRng();
+					// Try to get the offset from a range.
 					try {
 						offset = range.getClientRects()[0];
 					} catch( er ) {}
+					// Get the offset from the bounding client rectangle of the node.
 					if ( ! offset ) {
 						offset = node.getBoundingClientRect();
 					}
 				}
 				return offset.height ? offset : false;
 			}
-			// Make sure the cursor is always visible.
+			/**
-			// This is not only necessary to keep the cursor between the toolbars,
+			 * @summary Filters the special keys that should not be used for scrolling.
-			// but also to scroll the window when the cursor moves out of the viewport to a wpview.
+			 *
-			// Setting a buffer > 0 will prevent the browser default.
+			 * @since 4.0.0
-			// Some browsers will scroll to the middle,
+			 *
-			// others to the top/bottom of the *window* when moving the cursor out of the viewport.
+			 * @param {event} event The event to get the key code from.
+			 *
+			 * @returns {void}
+			 */
 			function mceKeyup( event ) {
 				var key = event.keyCode;
-				// Bail on special keys.
+				// Bail on special keys. Key code 47 is a /
 				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 ) ) {
 					return;
-				// OS keys, function keys, num lock, scroll lock
+				// 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.
 				} else if ( ( key >= 91 && key <= 93 ) || ( key >= 112 && key <= 123 ) || key === 144 || key === 145 ) {
 					return;
 				}
 				mceScroll( key );
 			}
+			/**
+			 * @summary Makes sure the cursor is always visible in the editor.
+			 *
+			 * Makes sure the cursor is kept between the toolbars of the editor and scrolls
+			 * the window when the cursor moves out of the viewport to a wpview.
+			 * Setting a buffer > 0 will prevent the browser default.
+			 * Some browsers will scroll to the middle,
+			 * others to the top/bottom of the *window* when moving the cursor out of the viewport.
+			 *
+			 * @since 4.1.0
+			 *
+			 * @param {string} key The key code of the pressed key.
+			 *
+			 * @returns {void}
+			 */
 			function mceScroll( key ) {
 				var offset = mceGetCursorOffset(),
 					buffer = 50,
 					cursorTop, cursorBottom, editorTop, editorBottom;
+				// Don't scroll if there is no offset.
 				if ( ! offset ) {
 					return;
 				}
+				// Determine the cursorTop based on the offset and the top of the editor iframe.
 				cursorTop = offset.top + editor.iframeElement.getBoundingClientRect().top;
+				// Determine the cursorBottom based on the cursorTop and offset height.
 				cursorBottom = cursorTop + offset.height;
+				// Subtract the buffer from the cursorTop.
 				cursorTop = cursorTop - buffer;
+				// Add the buffer to the cursorBottom.
 				cursorBottom = cursorBottom + buffer;
 				editorTop = heights.adminBarHeight + heights.toolsHeight + heights.menuBarHeight + heights.visualTopHeight;
+				/*
+				 * Set the editorBottom based on the window Height, and add the bottomHeight and statusBarHeight if the
+				 * advanced editor is enabled.
+				 */
 				editorBottom = heights.windowHeight - ( advanced ? heights.bottomHeight + heights.statusBarHeight : 0 );
-				// Don't scroll if the node is taller than the visible part of the editor
+				// Don't scroll if the node is taller than the visible part of the editor.
 				if ( editorBottom - editorTop < offset.height ) {
 					return;
 				}
+				/*
+				 * If the cursorTop is smaller than the editorTop and the up, left
+				 * or backspace key is pressed, scroll the editor to the position defined
+				 * by the cursorTop, pageYOffset and editorTop.
+				 */
 				if ( cursorTop < editorTop && ( key === VK.UP || key === VK.LEFT || key === VK.BACKSPACE ) ) {
 					window.scrollTo( window.pageXOffset, cursorTop + window.pageYOffset - editorTop );
+				/*
+				 * If any other key is pressed or the cursorTop is bigger than the editorTop,
+				 * scroll the editor to the position defined by the cursorBottom,
+				 * pageYOffset and editorBottom.
+				 */
 				} else if ( cursorBottom > editorBottom ) {
 					window.scrollTo( window.pageXOffset, cursorBottom + window.pageYOffset - editorBottom );
 				}
 			}
+			/**
+			 * @summary If the editor is fullscreen, calls adjust.
+			 *
+			 * @since 4.1.0
+			 *
+			 * @param {event} event The FullscreenStateChanged event.
+			 *
+			 * @returns {void}
+			 */
 			function mceFullscreenToggled( event ) {
+				// event.state is true if the editor is fullscreen.
 				if ( ! event.state ) {
 					adjust();
 				}
 			}
-			// Adjust when switching editor modes.
+			/**
+			 * @summary Shows the editor when scrolled.
+			 *
+			 * Binds the hideFloatPanels function on the window scroll.mce-float-panels event.
+			 * Executes the wpAutoResize on the active editor.
+			 *
+			 * @since 4.0.0
+			 *
+			 * @returns {void}
+			 */
 			function mceShow() {
 				$window.on( 'scroll.mce-float-panels', hideFloatPanels );
 				setTimeout( function() {
 					editor.execCommand( 'wpAutoResize' );
 					adjust();
 				}, 300 );
 			}
+			/**
+			 * @summary Resizes the editor.
+			 *
+			 * Removes all functions from the window scroll.mce-float-panels event.
+			 * Resizes the text editor and scrolls to a position based on the pageXOffset and adminBarHeight.
+			 *
+			 * @since 4.0.0
+			 *
+			 * @returns {void}
+			 */
 			function mceHide() {
 				$window.off( 'scroll.mce-float-panels' );
 				setTimeout( function() {
 					var top = $contentWrap.offset().top;
 				}, 100 );
 				adjust();
 			}
+			/**
+			 * @summary Toggles advanced states.
+			 *
+			 * @since 4.1.0
+			 *
+			 * @returns {void}
+			 */
 			function toggleAdvanced() {
 				advanced = ! advanced;
 			}
+			/**
+			 * @summary Binds events of the editor and window.
+			 *
+			 * @since 4.0.0
+			 *
+			 * @returns {void}
+			 */
 			mceBind = function() {
 				editor.on( 'keyup', mceKeyup );
 				editor.on( 'show', mceShow );
 				editor.on( 'hide', mceHide );
 				editor.on( 'wp-toolbar-toggle', toggleAdvanced );
 				// Adjust when the editor resizes.
 				editor.on( 'setcontent wp-autoresize wp-toolbar-toggle', adjust );
 				// Don't hide the caret after undo/redo.
 				editor.on( 'undo redo', mceScroll );
 				// Adjust when exiting TinyMCE's fullscreen mode.
 				editor.on( 'FullscreenStateChanged', mceFullscreenToggled );
 				$window.off( 'scroll.mce-float-panels' ).on( 'scroll.mce-float-panels', hideFloatPanels );
 			};
+			/**
+			 * @summary Unbinds the events of the editor and window.
+			 *
+			 * @since 4.0.0
+			 *
+			 * @returns {void}
+			 */
 			mceUnbind = function() {
 				editor.off( 'keyup', mceKeyup );
 				editor.off( 'show', mceShow );
 				editor.off( 'hide', mceHide );
 				editor.off( 'wp-toolbar-toggle', toggleAdvanced );
 				$window.off( 'scroll.mce-float-panels' );
 			};
 			if ( $wrap.hasClass( 'wp-editor-expand' ) ) {
-				// Adjust "immediately"
+				// Adjust "immediately".
 				mceBind();
 				initialResize( adjust );
 			}
 		} );
-		// Adjust the toolbars based on the active editor mode.
+		/**
+		 * @summary Adjusts the toolbars heights and positions.
+		 *
+		 * Adjusts the toolbar heights and positions based on the scroll position on the page,
+		 * the active editor mode and the heights of the editor, admin bar and side bar.
+		 *
+		 * @since 4.0.0
+		 *
+		 * @param {event} event The event that calls this function.
+		 *
+		 * @returns {void}
+		 */
 		function adjust( event ) {
-			// Make sure we're not in fullscreen mode.
+			// Makes sure we're not in fullscreen mode.
 			if ( fullscreen && fullscreen.settings.visible ) {
 				return;
 			}
 			var windowPos = $window.scrollTop(),
 				borderWidth = 1,
 				contentWrapWidth = $contentWrap.width(),
 				$top, $editor, sidebarTop, footerTop, canPin,
 				topPos, topHeight, editorPos, editorHeight;
-			// Refresh the heights
+			/*
+			 * Refresh the heights if type isn't 'scroll'
+			 * or heights.windowHeight isn't set.
+			 */
 			if ( resize || ! heights.windowHeight ) {
 				getHeights();
 			}
+			// Resize on resize event when the editor is in text mode.
 			if ( ! visual && type === 'resize' ) {
 				textEditorResize();
 			}
 			if ( visual ) {
 				$top = $textTop;
 				$editor = $textEditor;
 				topHeight = heights.textTopHeight;
 			}
-			// TinyMCE still intializing.
+			// Return if TinyMCE is still intializing.
 			if ( ! visual && ! $top.length ) {
 				return;
 			}
 			topPos = $top.parent().offset().top;
 			editorPos = $editor.offset().top;
 			editorHeight = $editor.outerHeight();
-			// Should we pin?
+			/*
+			 * If in visual mode, checks if the editorHeight is greater than the autoresizeMinHeight + topHeight.
+			 * If not in visual mode, checks if the editorHeight is greater than the autoresizeMinHeight + 20.
+			 */
 			canPin = visual ? autoresizeMinHeight + topHeight : autoresizeMinHeight + 20; // 20px from textarea padding
 			canPin = editorHeight > ( canPin + 5 );
 			if ( ! canPin ) {
 				if ( resize ) {
 					$statusBar.attr( 'style', advanced ? '' : 'visibility: hidden;' );
 					$bottom.attr( 'style', '' );
 				}
 			} else {
-				// Maybe pin the top.
+				// Check if the top is not already in a fixed position.
 				if ( ( ! fixedTop || resize ) &&
-					// Handle scrolling down.
 					( windowPos >= ( topPos - heights.toolsHeight - heights.adminBarHeight ) &&
-					// Handle scrolling up.
 					windowPos <= ( topPos - heights.toolsHeight - heights.adminBarHeight + editorHeight - buffer ) ) ) {
 					fixedTop = true;
 					$tools.css( {
 						position: 'fixed',
 					$top.css( {
 						position: 'fixed',
 						top: heights.adminBarHeight + heights.toolsHeight + heights.menuBarHeight,
 						width: contentWrapWidth - ( borderWidth * 2 ) - ( visual ? 0 : ( $top.outerWidth() - $top.width() ) )
 					} );
-				// Maybe unpin the top.
+					// Check if the top is already in a fixed position.
 				} else if ( fixedTop || resize ) {
-					// Handle scrolling up.
 					if ( windowPos <= ( topPos - heights.toolsHeight - heights.adminBarHeight ) ) {
 						fixedTop = false;
 						$tools.css( {
 							position: 'absolute',
 						$top.css( {
 							position: 'absolute',
 							top: heights.menuBarHeight,
 							width: contentWrapWidth - ( borderWidth * 2 ) - ( visual ? 0 : ( $top.outerWidth() - $top.width() ) )
 						} );
-					// Handle scrolling down.
 					} else if ( windowPos >= ( topPos - heights.toolsHeight - heights.adminBarHeight + editorHeight - buffer ) ) {
 						fixedTop = false;
 						$tools.css( {
 							position: 'absolute',
 							width: contentWrapWidth - ( borderWidth * 2 ) - ( visual ? 0 : ( $top.outerWidth() - $top.width() ) )
 						} );
 					}
 				}
-				// Maybe adjust the bottom bar.
+				// Check if the bottom is not already in a fixed position.
 				if ( ( ! fixedBottom || ( resize && advanced ) ) &&
-						// +[n] for the border around the .wp-editor-container.
+						// Add borderWidth for the border around the .wp-editor-container.
 						( windowPos + heights.windowHeight ) <= ( editorPos + editorHeight + heights.bottomHeight + heights.statusBarHeight + borderWidth ) ) {
 					if ( event && event.deltaHeight > 0 && event.deltaHeight < 100 ) {
 						window.scrollBy( 0, event.deltaHeight );
-					} else if ( advanced ) {
+					} else if ( visual && advanced ) {
 						fixedBottom = true;
 						$statusBar.css( {
 							position: 'fixed',
 							bottom: heights.bottomHeight,
 					$statusBar.attr( 'style', advanced ? '' : 'visibility: hidden;' );
 					$bottom.attr( 'style', '' );
 				}
 			}
-			// Sidebar pinning
+			// The postbox container is positioned with @media from CSS. Ensure it is pinned on the side.
-			if ( $postboxContainer.width() < 300 && heights.windowWidth > 600 && // sidebar position is changed with @media from CSS, make sure it is on the side
+			if ( $postboxContainer.width() < 300 && heights.windowWidth > 600 &&
-				$document.height() > ( $sideSortables.height() + postBodyTop + 120 ) && // the sidebar is not the tallest element
-				heights.windowHeight < editorHeight ) { // the editor is taller than the viewport
+				// Check if the sidebar is not taller than the document height.
+				$document.height() > ( $sideSortables.height() + postBodyTop + 120 ) &&
+				// Check if the editor is taller than the viewport.
+				heights.windowHeight < editorHeight ) {
 				if ( ( heights.sideSortablesHeight + pinnedToolsTop + sidebarBottom ) > heights.windowHeight || fixedSideTop || fixedSideBottom ) {
-					// Reset when scrolling to the top
+					// Reset the sideSortables style when scrolling to the top.
 					if ( windowPos + pinnedToolsTop <= postBodyTop ) {
 						$sideSortables.attr( 'style', '' );
 						fixedSideTop = fixedSideBottom = false;
 					} else {
+						// When scrolling down.
 						if ( windowPos > lastScrollPosition ) {
-							// Scrolling down
 							if ( fixedSideTop ) {
-								// let it scroll
+								// Let it scroll.
 								fixedSideTop = false;
 								sidebarTop = $sideSortables.offset().top - heights.adminBarHeight;
 								footerTop = $footer.offset().top;
-								// don't get over the footer
+								// Don't get over the footer.
 								if ( footerTop < sidebarTop + heights.sideSortablesHeight + sidebarBottom ) {
 									sidebarTop = footerTop - heights.sideSortablesHeight - 12;
 								}
 								$sideSortables.css({
 									position: 'absolute',
 									top: sidebarTop,
 									bottom: ''
 								});
 							} else if ( ! fixedSideBottom && heights.sideSortablesHeight + $sideSortables.offset().top + sidebarBottom < windowPos + heights.windowHeight ) {
-								// pin the bottom
+								// Pin the bottom.
 								fixedSideBottom = true;
 								$sideSortables.css({
 									position: 'fixed',
 									top: 'auto',
 									bottom: sidebarBottom
 								});
 							}
+						// When scrolling up.
 						} else if ( windowPos < lastScrollPosition ) {
-							// Scrolling up
 							if ( fixedSideBottom ) {
-								// let it scroll
+								// Let it scroll.
 								fixedSideBottom = false;
 								sidebarTop = $sideSortables.offset().top - sidebarBottom;
 								footerTop = $footer.offset().top;
-								// don't get over the footer
+								// Don't get over the footer.
 								if ( footerTop < sidebarTop + heights.sideSortablesHeight + sidebarBottom ) {
 									sidebarTop = footerTop - heights.sideSortablesHeight - 12;
 								}
 								$sideSortables.css({
 									position: 'absolute',
 									top: sidebarTop,
 									bottom: ''
 								});
 							} else if ( ! fixedSideTop && $sideSortables.offset().top >= windowPos + pinnedToolsTop ) {
-								// pin the top
+								// Pin the top.
 								fixedSideTop = true;
 								$sideSortables.css({
 									position: 'fixed',
 									top: pinnedToolsTop,
 								});
 							}
 						}
 					}
 				} else {
-					// if the sidebar container is smaller than the viewport, then pin/unpin the top when scrolling
+					// If the sidebar container is smaller than the viewport, then pin/unpin the top when scrolling.
 					if ( windowPos >= ( postBodyTop - pinnedToolsTop ) ) {
 						$sideSortables.css( {
 							position: 'fixed',
 							top: pinnedToolsTop
 					} );
 				} else {
 					$textEditor.css( {
 						marginTop: heights.textTopHeight
 					} );
+				}
-					$textEditorClone.width( contentWrapWidth - 20 - ( borderWidth * 2 ) );
+			}
-				}
+		}
-			}
-		}
+		/**
+		 * @summary Resizes the editor and adjusts the toolbars.
+		 *
+		 * @since 4.0.0
+		 *
+		 * @returns {void}
+		 */
 		function fullscreenHide() {
 			textEditorResize();
 			adjust();
 		}
+		/**
+		 * @summary Runs the passed function with 500ms intervals.
+		 *
+		 * @since 4.0.0
+		 *
+		 * @param {function} callback The function to run in the timeout.
+		 *
+		 * @returns {void}
+		 */
 		function initialResize( callback ) {
 			for ( var i = 1; i < 6; i++ ) {
 				setTimeout( callback, 500 * i );
 			}
 		}
+		/**
+		 * @summary Runs adjust after 100ms.
+		 *
+		 * @since 4.0.0
+		 *
+		 * @returns {void}
+		 */
 		function afterScroll() {
 			clearTimeout( scrollTimer );
 			scrollTimer = setTimeout( adjust, 100 );
 		}
+		/**
+		 * @summary Binds editor expand events on elements.
+		 *
+		 * @since 4.0.0
+		 *
+		 * @returns {void}
+		 */
 		function on() {
-			// Scroll to the top when triggering this from JS.
+			/*
-			// Ensures toolbars are pinned properly.
+			 * Scroll to the top when triggering this from JS.
+			 * Ensure the toolbars are pinned properly.
+			 */
 			if ( window.pageYOffset && window.pageYOffset > pageYOffsetAtTop ) {
 				window.scrollTo( window.pageXOffset, 0 );
 			}
 			$wrap.addClass( 'wp-editor-expand' );
 			$window.on( 'scroll.editor-expand resize.editor-expand', function( event ) {
 				adjust( event.type );
 				afterScroll();
 			} );
-			// Adjust when collapsing the menu, changing the columns, changing the body class.
+			/*
+		 	 * Adjust when collapsing the menu, changing the columns
+		 	 * or changing the body class.
+			 */
 			$document.on( 'wp-collapse-menu.editor-expand postboxes-columnchange.editor-expand editor-classchange.editor-expand', adjust )
-				.on( 'postbox-toggled.editor-expand', function() {
+				.on( 'postbox-toggled.editor-expand postbox-moved.editor-expand', function() {
 					if ( ! fixedSideTop && ! fixedSideBottom && window.pageYOffset > pinnedToolsTop ) {
 						fixedSideBottom = true;
 						window.scrollBy( 0, -1 );
 						adjust();
 						window.scrollBy( 0, 1 );
 						textEditorResize();
 					}
 				});
 			$textEditor.on( 'focus.editor-expand input.editor-expand propertychange.editor-expand', textEditorResize );
-			$textEditor.on( 'keyup.editor-expand', textEditorKeyup );
 			mceBind();
-			// Adjust when entering/exiting fullscreen mode.
+			// Adjust when entering or exiting fullscreen mode.
 			fullscreen && fullscreen.pubsub.subscribe( 'hidden', fullscreenHide );
 			if ( mceEditor ) {
 				mceEditor.settings.wp_autoresize_on = true;
 				mceEditor.execCommand( 'wpAutoResizeOn' );
 			adjust();
 			$document.trigger( 'editor-expand-on' );
 		}
+		/**
+		 * @summary Unbinds editor expand events.
+		 *
+		 * @since 4.0.0
+		 *
+		 * @returns {void}
+		 */
 		function off() {
 			var height = parseInt( window.getUserSetting( 'ed_size', 300 ), 10 );
 			if ( height < 50 ) {
 				height = 50;
 			} else if ( height > 5000 ) {
 				height = 5000;
 			}
-			// Scroll to the top when triggering this from JS.
+			/*
-			// Ensures toolbars are reset properly.
+			 * Scroll to the top when triggering this from JS.
+			 * Ensure the toolbars are reset properly.
+			 */
 			if ( window.pageYOffset && window.pageYOffset > pageYOffsetAtTop ) {
 				window.scrollTo( window.pageXOffset, 0 );
 			}
 			$wrap.removeClass( 'wp-editor-expand' );
 			$window.off( '.editor-expand' );
 			$document.off( '.editor-expand' );
 			$textEditor.off( '.editor-expand' );
 			mceUnbind();
-			// Adjust when entering/exiting fullscreen mode.
+			// Adjust when entering or exiting fullscreen mode.
 			fullscreen && fullscreen.pubsub.unsubscribe( 'hidden', fullscreenHide );
 			// Reset all css
 			$.each( [ $visualTop, $textTop, $tools, $menuBar, $bottom, $statusBar, $contentWrap, $visualEditor, $textEditor, $sideSortables ], function( i, element ) {
 				element && element.attr( 'style', '' );
 						mceEditor.theme.resizeTo( null, height );
 					}
 				}
 			}
+			// If there is a height found in the user setting.
 			if ( height ) {
 				$textEditor.height( height );
 			}
 			$document.trigger( 'editor-expand-off' );
 		}
-		// Start on load
+		// Start on load.
 		if ( $wrap.hasClass( 'wp-editor-expand' ) ) {
 			on();
-			// Ideally we need to resize just after CSS has fully loaded and QuickTags is ready.
+			// Resize just after CSS has fully loaded and QuickTags is ready.
 			if ( $contentWrap.hasClass( 'html-active' ) ) {
 				initialResize( function() {
 					adjust();
 					textEditorResize();
 				} );
 			}
 		}
-		// Show the on/off checkbox
+		// Show the on/off checkbox.
 		$( '#adv-settings .editor-expand' ).show();
 		$( '#editor-expand-toggle' ).on( 'change.editor-expand', function() {
 			if ( $(this).prop( 'checked' ) ) {
 				on();
 				window.setUserSetting( 'editor_expand', 'on' );
 				off();
 				window.setUserSetting( 'editor_expand', 'off' );
 			}
 		});
-		// Expose on() and off()
+		// Expose on() and off().
 		window.editorExpand = {
 			on: on,
 			off: off
 		};
 	} );
-	/* DFW. */
+	/**
+	 * @summary Handles the distraction free writing of TinyMCE.
+	 *
+	 * @since 4.1.0
+	 *
+	 * @returns {void}
+	 */
 	$( function() {
 		var $body = $( document.body ),
 			$wrap = $( '#wpcontent' ),
 			$editor = $( '#post-body-content' ),
 			$title = $( '#title' ),
 		$window.on( 'mousemove.focus', function( event ) {
 			mouseY = event.pageY;
 		} );
+		/**
+		 * @summary Recalculates the bottom and right position of the editor in the DOM.
+		 *
+		 * @since 4.1.0
+		 *
+		 * @returns {void}
+		 */
 		function recalcEditorRect() {
 			editorRect = $editor.offset();
 			editorRect.right = editorRect.left + $editor.outerWidth();
 			editorRect.bottom = editorRect.top + $editor.outerHeight();
 		}
+		/**
+		 * @summary Activates the distraction free writing mode.
+		 *
+		 * @since 4.1.0
+		 *
+		 * @returns {void}
+		 */
 		function activate() {
 			if ( ! _isActive ) {
 				_isActive = true;
 				$document.trigger( 'dfw-activate' );
 				$content.on( 'keydown.focus-shortcut', toggleViaKeyboard );
 			}
 		}
+		/**
+		 * @summary Deactivates the distraction free writing mode.
+		 *
+		 * @since 4.1.0
+		 *
+		 * @returns {void}
+		 */
 		function deactivate() {
 			if ( _isActive ) {
 				off();
 				_isActive = false;
 				$document.trigger( 'dfw-deactivate' );
 				$content.off( 'keydown.focus-shortcut' );
 			}
 		}
+		/**
+		 * @summary Returns _isActive.
+		 *
+		 * @since 4.1.0
+		 *
+		 * @returns {boolean} Returns true is _isActive is true.
+		 */
 		function isActive() {
 			return _isActive;
 		}
+		/**
+		 * @summary Binds events on the editor for distraction free writing.
+		 *
+		 * @since 4.1.0
+		 *
+		 * @returns {void}
+		 */
 		function on() {
 			if ( ! _isOn && _isActive ) {
 				_isOn = true;
 				$content.on( 'keydown.focus', fadeOut );
 				$document.trigger( 'dfw-on' );
 			}
 		}
+		/**
+		 * @summary Unbinds events on the editor for distraction free writing.
+		 *
+		 * @since 4.1.0
+		 *
+		 * @returns {void}
+		 */
 		function off() {
 			if ( _isOn ) {
 				_isOn = false;
 				$title.add( $content ).off( '.focus' );
 				$document.trigger( 'dfw-off' );
 			}
 		}
+		/**
+		 * @summary Binds or unbinds the editor expand events.
+		 *
+		 * @since 4.1.0
+		 *
+		 * @returns {void}
+		 */
 		function toggle() {
 			if ( _isOn ) {
 				off();
 			} else {
 				on();
 			}
 		}
+		/**
+		 * @summary Returns the value of _isOn.
+		 *
+		 * @since 4.1.0
+		 *
+		 * @returns {boolean} Returns true if _isOn is true.
+		 */
 		function isOn() {
 			return _isOn;
 		}
+		/**
+		 * @summary Fades out all elements except for the editor.
+		 *
+		 * The fading is done based on key presses and mouse movements.
+		 * Also calls the fadeIn on certain key presses
+		 * or if the mouse leaves the editor.
+		 *
+		 * @since 4.1.0
+		 *
+		 * @param event The event that triggers this function.
+		 *
+		 * @returns {void}
+		 */
 		function fadeOut( event ) {
-			var key = event && event.keyCode;
+			var isMac,
+				key = event && event.keyCode;
-			// fadeIn and return on Escape and keyboard shortcut Alt+Shift+W.
-			if ( key === 27 || ( key === 87 && event.altKey && event.shiftKey ) ) {
+			if ( window.navigator.platform ) {
+				isMac = ( window.navigator.platform.indexOf( 'Mac' ) > -1 );
+			}
+			// Fade in and returns on Escape and keyboard shortcut Alt+Shift+W and Ctrl+Opt+W.
+			if ( key === 27 || ( key === 87 && event.altKey && ( ( ! isMac && event.shiftKey ) || ( isMac && event.ctrlKey ) ) ) ) {
 				fadeIn( event );
 				return;
 			}
+			// Return if any of the following keys or combinations of keys is pressed.
 			if ( event && ( event.metaKey || ( event.ctrlKey && ! event.altKey ) || ( event.altKey && event.shiftKey ) || ( key && (
 				// Special keys ( tab, ctrl, alt, esc, arrow keys... )
 				( key <= 47 && key !== 8 && key !== 13 && key !== 32 && key !== 46 ) ||
 				// Windows keys
 				( key >= 91 && key <= 93 ) ||
 				}, 600 );
 				$editor.css( 'z-index', 9998 );
 				$overlay
-					// Always recalculate the editor area entering the overlay with the mouse.
+					// Always recalculate the editor area when entering the overlay with the mouse.
 					.on( 'mouseenter.focus', function() {
 						recalcEditorRect();
 						$window.on( 'scroll.focus', function() {
 							var nScrollY = window.pageYOffset;
 						}
 						x = nx;
 						y = ny;
 					} )
-					// When the overlay is touched, always fade in and cancel the event.
+					// When the overlay is touched, fade in and cancel the event.
 					.on( 'touchstart.focus', function( event ) {
 						event.preventDefault();
 						fadeIn();
 					} );
 			fadeOutAdminBar();
 			fadeOutSlug();
 		}
+		/**
+		 * @summary Fades all elements back in.
+		 *
+		 * @since 4.1.0
+		 *
+		 * @param event The event that triggers this function.
+		 *
+		 * @returns {void}
+		 */
 		function fadeIn( event ) {
 			if ( faded ) {
 				faded = false;
 				clearTimeout( overlayTimer );
 			fadeInAdminBar();
 			fadeInSlug();
 		}
+		/**
+		 * @summary Fades in if the focused element based on it position.
+		 *
+		 * @since 4.1.0
+		 *
+		 * @returns {void}
+		 */
 		function maybeFadeIn() {
 			setTimeout( function() {
 				var position = document.activeElement.compareDocumentPosition( $editor.get( 0 ) );
 				function hasFocus( $el ) {
 					fadeIn();
 				}
 			}, 0 );
 		}
+		/**
+		 * @summary Fades out the admin bar based on focus on the admin bar.
+		 *
+		 * @since 4.1.0
+		 *
+		 * @returns {void}
+		 */
 		function fadeOutAdminBar() {
 			if ( ! fadedAdminBar && faded ) {
 				fadedAdminBar = true;
 				$adminBar
 						$adminBar.removeClass( 'focus-off' );
 					} );
 			}
 		}
+		/**
+		 * @summary Fades in the admin bar.
+		 *
+		 * @since 4.1.0
+		 *
+		 * @returns {void}
+		 */
 		function fadeInAdminBar() {
 			if ( fadedAdminBar ) {
 				fadedAdminBar = false;
 				$adminBar.off( '.focus' );
 			}
 		}
+		/**
+		 * @summary Fades out the edit slug box.
+		 *
+		 * @since 4.1.0
+		 *
+		 * @returns {void}
+		 */
 		function fadeOutSlug() {
 			if ( ! fadedSlug && faded && ! $slug.find( ':focus').length ) {
 				fadedSlug = true;
 				$slug.stop().fadeTo( 'fast', 0.3 ).on( 'mouseenter.focus', fadeInSlug ).off( 'mouseleave.focus' );
 				$slugFocusEl.on( 'focus.focus', fadeInSlug ).off( 'blur.focus' );
 			}
 		}
+		/**
+		 * @summary Fades in the edit slug box.
+		 *
+		 * @since 4.1.0
+		 *
+		 * @returns {void}
+		 */
 		function fadeInSlug() {
 			if ( fadedSlug ) {
 				fadedSlug = false;
 				$slug.stop().fadeTo( 'fast', 1 ).on( 'mouseleave.focus', fadeOutSlug ).off( 'mouseenter.focus' );
 				$slugFocusEl.on( 'blur.focus', fadeOutSlug ).off( 'focus.focus' );
 			}
 		}
+		/**
+		 * @summary Triggers the toggle on Alt + Shift + W.
+		 *
+		 * Keycode 87 = w.
+		 *
+		 * @since 4.1.0
+		 *
+		 * @param {event} event The event to trigger the toggle.
+		 *
+		 * @returns {void}
+		 */
 		function toggleViaKeyboard( event ) {
 			if ( event.altKey && event.shiftKey && 87 === event.keyCode ) {
 				toggle();
 			}
 		}
 		if ( $( '#postdivrich' ).hasClass( 'wp-editor-expand' ) ) {
 			$content.on( 'keydown.focus-shortcut', toggleViaKeyboard );
 		}
+		/**
+		 * @summary Adds the distraction free writing button when setting up TinyMCE.
+		 *
+		 * @since 4.1.0
+		 *
+		 * @param {event} event The TinyMCE editor setup event.
+		 * @param {object} editor The editor to add the button to.
+		 *
+		 * @returns {void}
+		 */
 		$document.on( 'tinymce-editor-setup.focus', function( event, editor ) {
 			editor.addButton( 'dfw', {
 				active: _isOn,
 				classes: 'wp-dfw btn widget',
 				disabled: ! _isActive,
 				tooltip: 'Distraction-free writing mode',
 				shortcut: 'Alt+Shift+W'
 			} );
 			editor.addCommand( 'wpToggleDFW', toggle );
-			editor.addShortcut( 'alt+shift+w', '', 'wpToggleDFW' );
+			editor.addShortcut( 'access+w', '', 'wpToggleDFW' );
 		} );
+		/**
+		 * @summary Binds and unbinds events on the editor.
+		 *
+		 * @since 4.1.0
+		 *
+		 * @param {event} event The TinyMCE editor init event.
+		 * @param {object} editor The editor to bind events on.
+		 *
+		 * @returns {void}
+		 */
 		$document.on( 'tinymce-editor-init.focus', function( event, editor ) {
 			var mceBind, mceUnbind;
 			function focus() {
 				editorHasFocus = true;
 				if ( _isOn ) {
 					mceBind();
 				}
+				// Bind and unbind based on the distraction free writing focus.
 				$document.on( 'dfw-on.focus', mceBind ).on( 'dfw-off.focus', mceUnbind );
-				// Make sure the body focuses when clicking outside it.
+				// Focuse the editor when it is the target of the click event.
-				editor.on( 'click', function( event ) {
+				editor.on( 'click', function( event ) {
 					if ( event.target === editor.getDoc().documentElement ) {
 						editor.focus();
 					}
 				} );
 			}
 		} );
+		/**
+		 * @summary  Binds events on quicktags init.
+		 *
+		 * @since 4.1.0
+		 *
+		 * @param {event} event The quicktags init event.
+		 * @param {object} editor The editor to bind events on.
+		 *
+		 * @returns {void}
+		 */
 		$document.on( 'quicktags-init', function( event, editor ) {
 			var $button;
+			// Bind the distraction free writing events if the distraction free writing button is available.
 			if ( editor.settings.buttons && ( ',' + editor.settings.buttons + ',' ).indexOf( ',dfw,' ) !== -1 ) {
 				$button = $( '#' + editor.name + '_dfw' );
 				$( document )
 				.on( 'dfw-activate', function() {

enmi-conf.org