<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>[41310] trunk/src/wp-admin/js/editor-expand.js: Docs: improve JS docs for `editor-expand.js`</title>
</head>
<body>
<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; }
#msg dl a { font-weight: bold}
#msg dl a:link { color:#fc3; }
#msg dl a:active { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg ul { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }
#logmsg > ul, #logmsg > ol { margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta" style="font-size: 105%">
<dt style="float: left; width: 6em; font-weight: bold">Revision</dt> <dd><a style="font-weight: bold" href="https://core.trac.wordpress.org/changeset/41310">41310</a><script type="application/ld+json">{"@context":"http://schema.org","@type":"EmailMessage","description":"Review this Commit","action":{"@type":"ViewAction","url":"https://core.trac.wordpress.org/changeset/41310","name":"Review Commit"}}</script></dd>
<dt style="float: left; width: 6em; font-weight: bold">Author</dt> <dd>wonderboymusic</dd>
<dt style="float: left; width: 6em; font-weight: bold">Date</dt> <dd>2017-08-24 17:47:58 +0000 (Thu, 24 Aug 2017)</dd>
</dl>
<pre style='padding-left: 1em; margin: 2em 0; border-left: 2px solid #ccc; line-height: 1.25; font-size: 105%; font-family: sans-serif'>Docs: improve JS docs for `editor-expand.js`
Props IreneYoast, terwdan.
Fixes <a href="https://core.trac.wordpress.org/ticket/41068">#41068</a>.</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunksrcwpadminjseditorexpandjs">trunk/src/wp-admin/js/editor-expand.js</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunksrcwpadminjseditorexpandjs"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-admin/js/editor-expand.js</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-admin/js/editor-expand.js 2017-08-23 17:14:25 UTC (rev 41309)
+++ trunk/src/wp-admin/js/editor-expand.js 2017-08-24 17:47:58 UTC (rev 41310)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -6,7 +6,13 @@
</span><span class="cx" style="display: block; padding: 0 10px"> $adminBar = $( '#wpadminbar' ),
</span><span class="cx" style="display: block; padding: 0 10px"> $footer = $( '#wpfooter' );
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- /* Autoresize editor. */
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ /**
+ * @summary Handles the resizing of the editor.
+ *
+ * @since 4.0.0
+ *
+ * @returns {void}
+ */
</ins><span class="cx" style="display: block; padding: 0 10px"> $( function() {
</span><span class="cx" style="display: block; padding: 0 10px"> var $wrap = $( '#postdivrich' ),
</span><span class="cx" style="display: block; padding: 0 10px"> $contentWrap = $( '#wp-content-wrap' ),
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -53,6 +59,16 @@
</span><span class="cx" style="display: block; padding: 0 10px"> sideSortablesHeight: 0
</span><span class="cx" style="display: block; padding: 0 10px"> };
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ /**
+ * @summary Resizes textarea based on scroll height and width.
+ *
+ * Resizes textarea based on scroll height and width. Doesn't shrink the
+ * editor size below the 300px auto resize minimum height.
+ *
+ * @since 4.6.1
+ *
+ * @returns {void}
+ */
</ins><span class="cx" style="display: block; padding: 0 10px"> var shrinkTextarea = window._.throttle( function() {
</span><span class="cx" style="display: block; padding: 0 10px"> var x = window.scrollX || document.documentElement.scrollLeft;
</span><span class="cx" style="display: block; padding: 0 10px"> var y = window.scrollY || document.documentElement.scrollTop;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -73,6 +89,18 @@
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> }, 300 );
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ /**
+ * @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}
+ */
</ins><span class="cx" style="display: block; padding: 0 10px"> function textEditorResize() {
</span><span class="cx" style="display: block; padding: 0 10px"> var length = textEditor.value.length;
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -94,6 +122,18 @@
</span><span class="cx" style="display: block; padding: 0 10px"> oldTextLength = length;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ /**
+ * @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}
+ */
</ins><span class="cx" style="display: block; padding: 0 10px"> function getHeights() {
</span><span class="cx" style="display: block; padding: 0 10px"> var windowWidth = $window.width();
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -110,15 +150,32 @@
</span><span class="cx" style="display: block; padding: 0 10px"> sideSortablesHeight: $sideSortables.height() || 0
</span><span class="cx" style="display: block; padding: 0 10px"> };
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- // Adjust for hidden
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ // Adjust for hidden menubar.
</ins><span class="cx" style="display: block; padding: 0 10px"> if ( heights.menuBarHeight < 3 ) {
</span><span class="cx" style="display: block; padding: 0 10px"> heights.menuBarHeight = 0;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> // We need to wait for TinyMCE to initialize.
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ /**
+ * @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}
+ */
</ins><span class="cx" style="display: block; padding: 0 10px"> $document.on( 'tinymce-editor-init.editor-expand', function( event, editor ) {
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ // VK contains the type of key pressed. VK = virtual keyboard.
</ins><span class="cx" style="display: block; padding: 0 10px"> var VK = window.tinymce.util.VK,
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ /**
+ * @summary Hides any float panel with a hover state. Additionally hides tooltips.
+ *
+ * @returns {void}
+ */
</ins><span class="cx" style="display: block; padding: 0 10px"> hideFloatPanels = _.debounce( function() {
</span><span class="cx" style="display: block; padding: 0 10px"> ! $( '.mce-floatpanel:hover' ).length && window.tinymce.ui.FloatPanel.hideAll();
</span><span class="cx" style="display: block; padding: 0 10px"> $( '.mce-tooltip' ).hide();
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -141,19 +198,31 @@
</span><span class="cx" style="display: block; padding: 0 10px"> $statusBar = $contentWrap.find( '.mce-statusbar' );
</span><span class="cx" style="display: block; padding: 0 10px"> $menuBar = $contentWrap.find( '.mce-menubar' );
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ /**
+ * @summary Gets the offset of the editor.
+ *
+ * @returns {Number|Boolean} Returns the offset of the editor
+ * or false if there is no offset height.
+ */
</ins><span class="cx" style="display: block; padding: 0 10px"> function mceGetCursorOffset() {
</span><span class="cx" style="display: block; padding: 0 10px"> var node = editor.selection.getNode(),
</span><span class="cx" style="display: block; padding: 0 10px"> range, view, offset;
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ /*
+ * If editor.wp.getView and the selection node from the editor selection
+ * are defined, use this as a view for the offset.
+ */
</ins><span class="cx" style="display: block; padding: 0 10px"> if ( editor.wp && editor.wp.getView && ( view = editor.wp.getView( node ) ) ) {
</span><span class="cx" style="display: block; padding: 0 10px"> offset = view.getBoundingClientRect();
</span><span class="cx" style="display: block; padding: 0 10px"> } else {
</span><span class="cx" style="display: block; padding: 0 10px"> range = editor.selection.getRng();
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ // Try to get the offset from a range.
</ins><span class="cx" style="display: block; padding: 0 10px"> try {
</span><span class="cx" style="display: block; padding: 0 10px"> offset = range.getClientRects()[0];
</span><span class="cx" style="display: block; padding: 0 10px"> } catch( er ) {}
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ // Get the offset from the bounding client rectangle of the node.
</ins><span class="cx" style="display: block; padding: 0 10px"> if ( ! offset ) {
</span><span class="cx" style="display: block; padding: 0 10px"> offset = node.getBoundingClientRect();
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -162,19 +231,22 @@
</span><span class="cx" style="display: block; padding: 0 10px"> return offset.height ? offset : false;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- // Make sure the cursor is always visible.
- // This is not only necessary to keep the cursor between the toolbars,
- // 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.
- // Some browsers will scroll to the middle,
- // others to the top/bottom of the *window* when moving the cursor out of the viewport.
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ /**
+ * @summary Filters the special keys that should not be used for scrolling.
+ *
+ * @since 4.0.0
+ *
+ * @param {event} event The event to get the key code from.
+ *
+ * @returns {void}
+ */
</ins><span class="cx" style="display: block; padding: 0 10px"> function mceKeyup( event ) {
</span><span class="cx" style="display: block; padding: 0 10px"> var key = event.keyCode;
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- // Bail on special keys.
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ // Bail on special keys. Key code 47 is a /
</ins><span class="cx" style="display: block; padding: 0 10px"> 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 ) ) {
</span><span class="cx" style="display: block; padding: 0 10px"> return;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- // OS keys, function keys, num lock, scroll lock
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ // 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.
</ins><span class="cx" style="display: block; padding: 0 10px"> } else if ( ( key >= 91 && key <= 93 ) || ( key >= 112 && key <= 123 ) || key === 144 || key === 145 ) {
</span><span class="cx" style="display: block; padding: 0 10px"> return;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -182,41 +254,99 @@
</span><span class="cx" style="display: block; padding: 0 10px"> mceScroll( key );
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ /**
+ * @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}
+ */
</ins><span class="cx" style="display: block; padding: 0 10px"> function mceScroll( key ) {
</span><span class="cx" style="display: block; padding: 0 10px"> var offset = mceGetCursorOffset(),
</span><span class="cx" style="display: block; padding: 0 10px"> buffer = 50,
</span><span class="cx" style="display: block; padding: 0 10px"> cursorTop, cursorBottom, editorTop, editorBottom;
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ // Don't scroll if there is no offset.
</ins><span class="cx" style="display: block; padding: 0 10px"> if ( ! offset ) {
</span><span class="cx" style="display: block; padding: 0 10px"> return;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ // Determine the cursorTop based on the offset and the top of the editor iframe.
</ins><span class="cx" style="display: block; padding: 0 10px"> cursorTop = offset.top + editor.iframeElement.getBoundingClientRect().top;
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+
+ // Determine the cursorBottom based on the cursorTop and offset height.
</ins><span class="cx" style="display: block; padding: 0 10px"> cursorBottom = cursorTop + offset.height;
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+
+ // Subtract the buffer from the cursorTop.
</ins><span class="cx" style="display: block; padding: 0 10px"> cursorTop = cursorTop - buffer;
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+
+ // Add the buffer to the cursorBottom.
</ins><span class="cx" style="display: block; padding: 0 10px"> cursorBottom = cursorBottom + buffer;
</span><span class="cx" style="display: block; padding: 0 10px"> editorTop = heights.adminBarHeight + heights.toolsHeight + heights.menuBarHeight + heights.visualTopHeight;
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+
+ /*
+ * Set the editorBottom based on the window Height, and add the bottomHeight and statusBarHeight if the
+ * advanced editor is enabled.
+ */
</ins><span class="cx" style="display: block; padding: 0 10px"> editorBottom = heights.windowHeight - ( advanced ? heights.bottomHeight + heights.statusBarHeight : 0 );
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- // Don't scroll if the node is taller than the visible part of the editor
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ // Don't scroll if the node is taller than the visible part of the editor.
</ins><span class="cx" style="display: block; padding: 0 10px"> if ( editorBottom - editorTop < offset.height ) {
</span><span class="cx" style="display: block; padding: 0 10px"> return;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ /*
+ * 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.
+ */
</ins><span class="cx" style="display: block; padding: 0 10px"> if ( cursorTop < editorTop && ( key === VK.UP || key === VK.LEFT || key === VK.BACKSPACE ) ) {
</span><span class="cx" style="display: block; padding: 0 10px"> window.scrollTo( window.pageXOffset, cursorTop + window.pageYOffset - editorTop );
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+
+ /*
+ * 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.
+ */
</ins><span class="cx" style="display: block; padding: 0 10px"> } else if ( cursorBottom > editorBottom ) {
</span><span class="cx" style="display: block; padding: 0 10px"> window.scrollTo( window.pageXOffset, cursorBottom + window.pageYOffset - editorBottom );
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ /**
+ * @summary If the editor is fullscreen, calls adjust.
+ *
+ * @since 4.1.0
+ *
+ * @param {event} event The FullscreenStateChanged event.
+ *
+ * @returns {void}
+ */
</ins><span class="cx" style="display: block; padding: 0 10px"> function mceFullscreenToggled( event ) {
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ // event.state is true if the editor is fullscreen.
</ins><span class="cx" style="display: block; padding: 0 10px"> if ( ! event.state ) {
</span><span class="cx" style="display: block; padding: 0 10px"> adjust();
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- // Adjust when switching editor modes.
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ /**
+ * @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}
+ */
</ins><span class="cx" style="display: block; padding: 0 10px"> function mceShow() {
</span><span class="cx" style="display: block; padding: 0 10px"> $window.on( 'scroll.mce-float-panels', hideFloatPanels );
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -226,6 +356,16 @@
</span><span class="cx" style="display: block; padding: 0 10px"> }, 300 );
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ /**
+ * @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}
+ */
</ins><span class="cx" style="display: block; padding: 0 10px"> function mceHide() {
</span><span class="cx" style="display: block; padding: 0 10px"> $window.off( 'scroll.mce-float-panels' );
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -243,25 +383,49 @@
</span><span class="cx" style="display: block; padding: 0 10px"> adjust();
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ /**
+ * @summary Toggles advanced states.
+ *
+ * @since 4.1.0
+ *
+ * @returns {void}
+ */
</ins><span class="cx" style="display: block; padding: 0 10px"> function toggleAdvanced() {
</span><span class="cx" style="display: block; padding: 0 10px"> advanced = ! advanced;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ /**
+ * @summary Binds events of the editor and window.
+ *
+ * @since 4.0.0
+ *
+ * @returns {void}
+ */
</ins><span class="cx" style="display: block; padding: 0 10px"> mceBind = function() {
</span><span class="cx" style="display: block; padding: 0 10px"> editor.on( 'keyup', mceKeyup );
</span><span class="cx" style="display: block; padding: 0 10px"> editor.on( 'show', mceShow );
</span><span class="cx" style="display: block; padding: 0 10px"> editor.on( 'hide', mceHide );
</span><span class="cx" style="display: block; padding: 0 10px"> editor.on( 'wp-toolbar-toggle', toggleAdvanced );
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+
</ins><span class="cx" style="display: block; padding: 0 10px"> // Adjust when the editor resizes.
</span><span class="cx" style="display: block; padding: 0 10px"> editor.on( 'setcontent wp-autoresize wp-toolbar-toggle', adjust );
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+
</ins><span class="cx" style="display: block; padding: 0 10px"> // Don't hide the caret after undo/redo.
</span><span class="cx" style="display: block; padding: 0 10px"> editor.on( 'undo redo', mceScroll );
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+
</ins><span class="cx" style="display: block; padding: 0 10px"> // Adjust when exiting TinyMCE's fullscreen mode.
</span><span class="cx" style="display: block; padding: 0 10px"> editor.on( 'FullscreenStateChanged', mceFullscreenToggled );
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> $window.off( 'scroll.mce-float-panels' ).on( 'scroll.mce-float-panels', hideFloatPanels );
</span><span class="cx" style="display: block; padding: 0 10px"> };
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ /**
+ * @summary Unbinds the events of the editor and window.
+ *
+ * @since 4.0.0
+ *
+ * @returns {void}
+ */
</ins><span class="cx" style="display: block; padding: 0 10px"> mceUnbind = function() {
</span><span class="cx" style="display: block; padding: 0 10px"> editor.off( 'keyup', mceKeyup );
</span><span class="cx" style="display: block; padding: 0 10px"> editor.off( 'show', mceShow );
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -275,15 +439,28 @@
</span><span class="cx" style="display: block; padding: 0 10px"> };
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> if ( $wrap.hasClass( 'wp-editor-expand' ) ) {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- // Adjust "immediately"
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+
+ // Adjust "immediately".
</ins><span class="cx" style="display: block; padding: 0 10px"> mceBind();
</span><span class="cx" style="display: block; padding: 0 10px"> initialResize( adjust );
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> } );
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- // Adjust the toolbars based on the active editor mode.
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ /**
+ * @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}
+ */
</ins><span class="cx" style="display: block; padding: 0 10px"> function adjust( event ) {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- // Make sure we're not in fullscreen mode.
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+
+ // Makes sure we're not in fullscreen mode.
</ins><span class="cx" style="display: block; padding: 0 10px"> if ( fullscreen && fullscreen.settings.visible ) {
</span><span class="cx" style="display: block; padding: 0 10px"> return;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -299,11 +476,15 @@
</span><span class="cx" style="display: block; padding: 0 10px"> $top, $editor, sidebarTop, footerTop, canPin,
</span><span class="cx" style="display: block; padding: 0 10px"> topPos, topHeight, editorPos, editorHeight;
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- // Refresh the heights
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ /*
+ * Refresh the heights if type isn't 'scroll'
+ * or heights.windowHeight isn't set.
+ */
</ins><span class="cx" style="display: block; padding: 0 10px"> if ( resize || ! heights.windowHeight ) {
</span><span class="cx" style="display: block; padding: 0 10px"> getHeights();
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ // Resize on resize event when the editor is in text mode.
</ins><span class="cx" style="display: block; padding: 0 10px"> if ( ! visual && type === 'resize' ) {
</span><span class="cx" style="display: block; padding: 0 10px"> textEditorResize();
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -318,7 +499,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> topHeight = heights.textTopHeight;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- // TinyMCE still initializing.
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ // Return if TinyMCE is still intializing.
</ins><span class="cx" style="display: block; padding: 0 10px"> if ( ! visual && ! $top.length ) {
</span><span class="cx" style="display: block; padding: 0 10px"> return;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -327,7 +508,10 @@
</span><span class="cx" style="display: block; padding: 0 10px"> editorPos = $editor.offset().top;
</span><span class="cx" style="display: block; padding: 0 10px"> editorHeight = $editor.outerHeight();
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- // Should we pin?
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ /*
+ * 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.
+ */
</ins><span class="cx" style="display: block; padding: 0 10px"> canPin = visual ? autoresizeMinHeight + topHeight : autoresizeMinHeight + 20; // 20px from textarea padding
</span><span class="cx" style="display: block; padding: 0 10px"> canPin = editorHeight > ( canPin + 5 );
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -357,11 +541,9 @@
</span><span class="cx" style="display: block; padding: 0 10px"> $bottom.attr( 'style', '' );
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> } else {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- // Maybe pin the top.
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ // Check if the top is not already in a fixed position.
</ins><span class="cx" style="display: block; padding: 0 10px"> if ( ( ! fixedTop || resize ) &&
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- // Handle scrolling down.
</del><span class="cx" style="display: block; padding: 0 10px"> ( windowPos >= ( topPos - heights.toolsHeight - heights.adminBarHeight ) &&
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- // Handle scrolling up.
</del><span class="cx" style="display: block; padding: 0 10px"> windowPos <= ( topPos - heights.toolsHeight - heights.adminBarHeight + editorHeight - buffer ) ) ) {
</span><span class="cx" style="display: block; padding: 0 10px"> fixedTop = true;
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -384,9 +566,8 @@
</span><span class="cx" style="display: block; padding: 0 10px"> top: heights.adminBarHeight + heights.toolsHeight + heights.menuBarHeight,
</span><span class="cx" style="display: block; padding: 0 10px"> width: contentWrapWidth - ( borderWidth * 2 ) - ( visual ? 0 : ( $top.outerWidth() - $top.width() ) )
</span><span class="cx" style="display: block; padding: 0 10px"> } );
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- // Maybe unpin the top.
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ // Check if the top is already in a fixed position.
</ins><span class="cx" style="display: block; padding: 0 10px"> } else if ( fixedTop || resize ) {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- // Handle scrolling up.
</del><span class="cx" style="display: block; padding: 0 10px"> if ( windowPos <= ( topPos - heights.toolsHeight - heights.adminBarHeight ) ) {
</span><span class="cx" style="display: block; padding: 0 10px"> fixedTop = false;
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -409,7 +590,6 @@
</span><span class="cx" style="display: block; padding: 0 10px"> top: heights.menuBarHeight,
</span><span class="cx" style="display: block; padding: 0 10px"> width: contentWrapWidth - ( borderWidth * 2 ) - ( visual ? 0 : ( $top.outerWidth() - $top.width() ) )
</span><span class="cx" style="display: block; padding: 0 10px"> } );
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- // Handle scrolling down.
</del><span class="cx" style="display: block; padding: 0 10px"> } else if ( windowPos >= ( topPos - heights.toolsHeight - heights.adminBarHeight + editorHeight - buffer ) ) {
</span><span class="cx" style="display: block; padding: 0 10px"> fixedTop = false;
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -435,9 +615,9 @@
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- // Maybe adjust the bottom bar.
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ // Check if the bottom is not already in a fixed position.
</ins><span class="cx" style="display: block; padding: 0 10px"> if ( ( ! fixedBottom || ( resize && advanced ) ) &&
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- // +[n] for the border around the .wp-editor-container.
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ // Add borderWidth for the border around the .wp-editor-container.
</ins><span class="cx" style="display: block; padding: 0 10px"> ( windowPos + heights.windowHeight ) <= ( editorPos + editorHeight + heights.bottomHeight + heights.statusBarHeight + borderWidth ) ) {
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> if ( event && event.deltaHeight > 0 && event.deltaHeight < 100 ) {
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -468,26 +648,33 @@
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- // Sidebar pinning
- if ( $postboxContainer.width() < 300 && heights.windowWidth > 600 && // sidebar position is changed with @media from CSS, make sure it is on the side
- $document.height() > ( $sideSortables.height() + postBodyTop + 120 ) && // the sidebar is not the tallest element
- heights.windowHeight < editorHeight ) { // the editor is taller than the viewport
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ // The postbox container is positioned with @media from CSS. Ensure it is pinned on the side.
+ if ( $postboxContainer.width() < 300 && heights.windowWidth > 600 &&
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ // 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 ) {
+
</ins><span class="cx" style="display: block; padding: 0 10px"> if ( ( heights.sideSortablesHeight + pinnedToolsTop + sidebarBottom ) > heights.windowHeight || fixedSideTop || fixedSideBottom ) {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- // Reset when scrolling to the top
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+
+ // Reset the sideSortables style when scrolling to the top.
</ins><span class="cx" style="display: block; padding: 0 10px"> if ( windowPos + pinnedToolsTop <= postBodyTop ) {
</span><span class="cx" style="display: block; padding: 0 10px"> $sideSortables.attr( 'style', '' );
</span><span class="cx" style="display: block; padding: 0 10px"> fixedSideTop = fixedSideBottom = false;
</span><span class="cx" style="display: block; padding: 0 10px"> } else {
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+
+ // When scrolling down.
</ins><span class="cx" style="display: block; padding: 0 10px"> if ( windowPos > lastScrollPosition ) {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- // Scrolling down
</del><span class="cx" style="display: block; padding: 0 10px"> if ( fixedSideTop ) {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- // let it scroll
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+
+ // Let it scroll.
</ins><span class="cx" style="display: block; padding: 0 10px"> fixedSideTop = false;
</span><span class="cx" style="display: block; padding: 0 10px"> sidebarTop = $sideSortables.offset().top - heights.adminBarHeight;
</span><span class="cx" style="display: block; padding: 0 10px"> footerTop = $footer.offset().top;
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- // don't get over the footer
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ // Don't get over the footer.
</ins><span class="cx" style="display: block; padding: 0 10px"> if ( footerTop < sidebarTop + heights.sideSortablesHeight + sidebarBottom ) {
</span><span class="cx" style="display: block; padding: 0 10px"> sidebarTop = footerTop - heights.sideSortablesHeight - 12;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -498,7 +685,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> bottom: ''
</span><span class="cx" style="display: block; padding: 0 10px"> });
</span><span class="cx" style="display: block; padding: 0 10px"> } else if ( ! fixedSideBottom && heights.sideSortablesHeight + $sideSortables.offset().top + sidebarBottom < windowPos + heights.windowHeight ) {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- // pin the bottom
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ // Pin the bottom.
</ins><span class="cx" style="display: block; padding: 0 10px"> fixedSideBottom = true;
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> $sideSortables.css({
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -507,15 +694,16 @@
</span><span class="cx" style="display: block; padding: 0 10px"> bottom: sidebarBottom
</span><span class="cx" style="display: block; padding: 0 10px"> });
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+
+ // When scrolling up.
</ins><span class="cx" style="display: block; padding: 0 10px"> } else if ( windowPos < lastScrollPosition ) {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- // Scrolling up
</del><span class="cx" style="display: block; padding: 0 10px"> if ( fixedSideBottom ) {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- // let it scroll
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ // Let it scroll.
</ins><span class="cx" style="display: block; padding: 0 10px"> fixedSideBottom = false;
</span><span class="cx" style="display: block; padding: 0 10px"> sidebarTop = $sideSortables.offset().top - sidebarBottom;
</span><span class="cx" style="display: block; padding: 0 10px"> footerTop = $footer.offset().top;
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- // don't get over the footer
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ // Don't get over the footer.
</ins><span class="cx" style="display: block; padding: 0 10px"> if ( footerTop < sidebarTop + heights.sideSortablesHeight + sidebarBottom ) {
</span><span class="cx" style="display: block; padding: 0 10px"> sidebarTop = footerTop - heights.sideSortablesHeight - 12;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -526,7 +714,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> bottom: ''
</span><span class="cx" style="display: block; padding: 0 10px"> });
</span><span class="cx" style="display: block; padding: 0 10px"> } else if ( ! fixedSideTop && $sideSortables.offset().top >= windowPos + pinnedToolsTop ) {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- // pin the top
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ // Pin the top.
</ins><span class="cx" style="display: block; padding: 0 10px"> fixedSideTop = true;
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> $sideSortables.css({
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -538,7 +726,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> } else {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- // if the sidebar container is smaller than the viewport, then pin/unpin the top when scrolling
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ // If the sidebar container is smaller than the viewport, then pin/unpin the top when scrolling.
</ins><span class="cx" style="display: block; padding: 0 10px"> if ( windowPos >= ( postBodyTop - pinnedToolsTop ) ) {
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> $sideSortables.css( {
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -575,25 +763,57 @@
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ /**
+ * @summary Resizes the editor and adjusts the toolbars.
+ *
+ * @since 4.0.0
+ *
+ * @returns {void}
+ */
</ins><span class="cx" style="display: block; padding: 0 10px"> function fullscreenHide() {
</span><span class="cx" style="display: block; padding: 0 10px"> textEditorResize();
</span><span class="cx" style="display: block; padding: 0 10px"> adjust();
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ /**
+ * @summary Runs the passed function with 500ms intervals.
+ *
+ * @since 4.0.0
+ *
+ * @param {function} callback The function to run in the timeout.
+ *
+ * @returns {void}
+ */
</ins><span class="cx" style="display: block; padding: 0 10px"> function initialResize( callback ) {
</span><span class="cx" style="display: block; padding: 0 10px"> for ( var i = 1; i < 6; i++ ) {
</span><span class="cx" style="display: block; padding: 0 10px"> setTimeout( callback, 500 * i );
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ /**
+ * @summary Runs adjust after 100ms.
+ *
+ * @since 4.0.0
+ *
+ * @returns {void}
+ */
</ins><span class="cx" style="display: block; padding: 0 10px"> function afterScroll() {
</span><span class="cx" style="display: block; padding: 0 10px"> clearTimeout( scrollTimer );
</span><span class="cx" style="display: block; padding: 0 10px"> scrollTimer = setTimeout( adjust, 100 );
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ /**
+ * @summary Binds editor expand events on elements.
+ *
+ * @since 4.0.0
+ *
+ * @returns {void}
+ */
</ins><span class="cx" style="display: block; padding: 0 10px"> function on() {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- // Scroll to the top when triggering this from JS.
- // Ensures toolbars are pinned properly.
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ /*
+ * Scroll to the top when triggering this from JS.
+ * Ensure the toolbars are pinned properly.
+ */
</ins><span class="cx" style="display: block; padding: 0 10px"> if ( window.pageYOffset && window.pageYOffset > pageYOffsetAtTop ) {
</span><span class="cx" style="display: block; padding: 0 10px"> window.scrollTo( window.pageXOffset, 0 );
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -606,7 +826,10 @@
</span><span class="cx" style="display: block; padding: 0 10px"> afterScroll();
</span><span class="cx" style="display: block; padding: 0 10px"> } );
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- // Adjust when collapsing the menu, changing the columns, changing the body class.
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ /*
+ * Adjust when collapsing the menu, changing the columns
+ * or changing the body class.
+ */
</ins><span class="cx" style="display: block; padding: 0 10px"> $document.on( 'wp-collapse-menu.editor-expand postboxes-columnchange.editor-expand editor-classchange.editor-expand', adjust )
</span><span class="cx" style="display: block; padding: 0 10px"> .on( 'postbox-toggled.editor-expand postbox-moved.editor-expand', function() {
</span><span class="cx" style="display: block; padding: 0 10px"> if ( ! fixedSideTop && ! fixedSideBottom && window.pageYOffset > pinnedToolsTop ) {
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -628,7 +851,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> $textEditor.on( 'focus.editor-expand input.editor-expand propertychange.editor-expand', textEditorResize );
</span><span class="cx" style="display: block; padding: 0 10px"> mceBind();
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- // Adjust when entering/exiting fullscreen mode.
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ // Adjust when entering or exiting fullscreen mode.
</ins><span class="cx" style="display: block; padding: 0 10px"> fullscreen && fullscreen.pubsub.subscribe( 'hidden', fullscreenHide );
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> if ( mceEditor ) {
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -649,6 +872,13 @@
</span><span class="cx" style="display: block; padding: 0 10px"> $document.trigger( 'editor-expand-on' );
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ /**
+ * @summary Unbinds editor expand events.
+ *
+ * @since 4.0.0
+ *
+ * @returns {void}
+ */
</ins><span class="cx" style="display: block; padding: 0 10px"> function off() {
</span><span class="cx" style="display: block; padding: 0 10px"> var height = parseInt( window.getUserSetting( 'ed_size', 300 ), 10 );
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -658,8 +888,10 @@
</span><span class="cx" style="display: block; padding: 0 10px"> height = 5000;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- // Scroll to the top when triggering this from JS.
- // Ensures toolbars are reset properly.
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ /*
+ * Scroll to the top when triggering this from JS.
+ * Ensure the toolbars are reset properly.
+ */
</ins><span class="cx" style="display: block; padding: 0 10px"> if ( window.pageYOffset && window.pageYOffset > pageYOffsetAtTop ) {
</span><span class="cx" style="display: block; padding: 0 10px"> window.scrollTo( window.pageXOffset, 0 );
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -671,7 +903,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> $textEditor.off( '.editor-expand' );
</span><span class="cx" style="display: block; padding: 0 10px"> mceUnbind();
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- // Adjust when entering/exiting fullscreen mode.
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ // Adjust when entering or exiting fullscreen mode.
</ins><span class="cx" style="display: block; padding: 0 10px"> fullscreen && fullscreen.pubsub.unsubscribe( 'hidden', fullscreenHide );
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> // Reset all css
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -694,6 +926,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ // If there is a height found in the user setting.
</ins><span class="cx" style="display: block; padding: 0 10px"> if ( height ) {
</span><span class="cx" style="display: block; padding: 0 10px"> $textEditor.height( height );
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -701,11 +934,11 @@
</span><span class="cx" style="display: block; padding: 0 10px"> $document.trigger( 'editor-expand-off' );
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- // Start on load
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ // Start on load.
</ins><span class="cx" style="display: block; padding: 0 10px"> if ( $wrap.hasClass( 'wp-editor-expand' ) ) {
</span><span class="cx" style="display: block; padding: 0 10px"> on();
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- // Ideally we need to resize just after CSS has fully loaded and QuickTags is ready.
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ // Resize just after CSS has fully loaded and QuickTags is ready.
</ins><span class="cx" style="display: block; padding: 0 10px"> if ( $contentWrap.hasClass( 'html-active' ) ) {
</span><span class="cx" style="display: block; padding: 0 10px"> initialResize( function() {
</span><span class="cx" style="display: block; padding: 0 10px"> adjust();
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -714,7 +947,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- // Show the on/off checkbox
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ // Show the on/off checkbox.
</ins><span class="cx" style="display: block; padding: 0 10px"> $( '#adv-settings .editor-expand' ).show();
</span><span class="cx" style="display: block; padding: 0 10px"> $( '#editor-expand-toggle' ).on( 'change.editor-expand', function() {
</span><span class="cx" style="display: block; padding: 0 10px"> if ( $(this).prop( 'checked' ) ) {
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -726,14 +959,20 @@
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> });
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- // Expose on() and off()
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ // Expose on() and off().
</ins><span class="cx" style="display: block; padding: 0 10px"> window.editorExpand = {
</span><span class="cx" style="display: block; padding: 0 10px"> on: on,
</span><span class="cx" style="display: block; padding: 0 10px"> off: off
</span><span class="cx" style="display: block; padding: 0 10px"> };
</span><span class="cx" style="display: block; padding: 0 10px"> } );
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- /* DFW. */
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ /**
+ * @summary Handles the distraction free writing of TinyMCE.
+ *
+ * @since 4.1.0
+ *
+ * @returns {void}
+ */
</ins><span class="cx" style="display: block; padding: 0 10px"> $( function() {
</span><span class="cx" style="display: block; padding: 0 10px"> var $body = $( document.body ),
</span><span class="cx" style="display: block; padding: 0 10px"> $wrap = $( '#wpcontent' ),
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -777,12 +1016,26 @@
</span><span class="cx" style="display: block; padding: 0 10px"> mouseY = event.pageY;
</span><span class="cx" style="display: block; padding: 0 10px"> } );
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ /**
+ * @summary Recalculates the bottom and right position of the editor in the DOM.
+ *
+ * @since 4.1.0
+ *
+ * @returns {void}
+ */
</ins><span class="cx" style="display: block; padding: 0 10px"> function recalcEditorRect() {
</span><span class="cx" style="display: block; padding: 0 10px"> editorRect = $editor.offset();
</span><span class="cx" style="display: block; padding: 0 10px"> editorRect.right = editorRect.left + $editor.outerWidth();
</span><span class="cx" style="display: block; padding: 0 10px"> editorRect.bottom = editorRect.top + $editor.outerHeight();
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ /**
+ * @summary Activates the distraction free writing mode.
+ *
+ * @since 4.1.0
+ *
+ * @returns {void}
+ */
</ins><span class="cx" style="display: block; padding: 0 10px"> function activate() {
</span><span class="cx" style="display: block; padding: 0 10px"> if ( ! _isActive ) {
</span><span class="cx" style="display: block; padding: 0 10px"> _isActive = true;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -792,6 +1045,13 @@
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ /**
+ * @summary Deactivates the distraction free writing mode.
+ *
+ * @since 4.1.0
+ *
+ * @returns {void}
+ */
</ins><span class="cx" style="display: block; padding: 0 10px"> function deactivate() {
</span><span class="cx" style="display: block; padding: 0 10px"> if ( _isActive ) {
</span><span class="cx" style="display: block; padding: 0 10px"> off();
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -803,10 +1063,24 @@
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ /**
+ * @summary Returns _isActive.
+ *
+ * @since 4.1.0
+ *
+ * @returns {boolean} Returns true is _isActive is true.
+ */
</ins><span class="cx" style="display: block; padding: 0 10px"> function isActive() {
</span><span class="cx" style="display: block; padding: 0 10px"> return _isActive;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ /**
+ * @summary Binds events on the editor for distraction free writing.
+ *
+ * @since 4.1.0
+ *
+ * @returns {void}
+ */
</ins><span class="cx" style="display: block; padding: 0 10px"> function on() {
</span><span class="cx" style="display: block; padding: 0 10px"> if ( ! _isOn && _isActive ) {
</span><span class="cx" style="display: block; padding: 0 10px"> _isOn = true;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -823,6 +1097,13 @@
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ /**
+ * @summary Unbinds events on the editor for distraction free writing.
+ *
+ * @since 4.1.0
+ *
+ * @returns {void}
+ */
</ins><span class="cx" style="display: block; padding: 0 10px"> function off() {
</span><span class="cx" style="display: block; padding: 0 10px"> if ( _isOn ) {
</span><span class="cx" style="display: block; padding: 0 10px"> _isOn = false;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -839,6 +1120,13 @@
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ /**
+ * @summary Binds or unbinds the editor expand events.
+ *
+ * @since 4.1.0
+ *
+ * @returns {void}
+ */
</ins><span class="cx" style="display: block; padding: 0 10px"> function toggle() {
</span><span class="cx" style="display: block; padding: 0 10px"> if ( _isOn ) {
</span><span class="cx" style="display: block; padding: 0 10px"> off();
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -847,10 +1135,30 @@
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ /**
+ * @summary Returns the value of _isOn.
+ *
+ * @since 4.1.0
+ *
+ * @returns {boolean} Returns true if _isOn is true.
+ */
</ins><span class="cx" style="display: block; padding: 0 10px"> function isOn() {
</span><span class="cx" style="display: block; padding: 0 10px"> return _isOn;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ /**
+ * @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}
+ */
</ins><span class="cx" style="display: block; padding: 0 10px"> function fadeOut( event ) {
</span><span class="cx" style="display: block; padding: 0 10px"> var isMac,
</span><span class="cx" style="display: block; padding: 0 10px"> key = event && event.keyCode;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -859,12 +1167,13 @@
</span><span class="cx" style="display: block; padding: 0 10px"> isMac = ( window.navigator.platform.indexOf( 'Mac' ) > -1 );
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- // fadeIn and return on Escape and keyboard shortcut Alt+Shift+W and Ctrl+Opt+W.
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ // Fade in and returns on Escape and keyboard shortcut Alt+Shift+W and Ctrl+Opt+W.
</ins><span class="cx" style="display: block; padding: 0 10px"> if ( key === 27 || ( key === 87 && event.altKey && ( ( ! isMac && event.shiftKey ) || ( isMac && event.ctrlKey ) ) ) ) {
</span><span class="cx" style="display: block; padding: 0 10px"> fadeIn( event );
</span><span class="cx" style="display: block; padding: 0 10px"> return;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ // Return if any of the following keys or combinations of keys is pressed.
</ins><span class="cx" style="display: block; padding: 0 10px"> if ( event && ( event.metaKey || ( event.ctrlKey && ! event.altKey ) || ( event.altKey && event.shiftKey ) || ( key && (
</span><span class="cx" style="display: block; padding: 0 10px"> // Special keys ( tab, ctrl, alt, esc, arrow keys... )
</span><span class="cx" style="display: block; padding: 0 10px"> ( key <= 47 && key !== 8 && key !== 13 && key !== 32 && key !== 46 ) ||
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -892,7 +1201,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> $editor.css( 'z-index', 9998 );
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> $overlay
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- // Always recalculate the editor area entering the overlay with the mouse.
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ // Always recalculate the editor area when entering the overlay with the mouse.
</ins><span class="cx" style="display: block; padding: 0 10px"> .on( 'mouseenter.focus', function() {
</span><span class="cx" style="display: block; padding: 0 10px"> recalcEditorRect();
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -959,7 +1268,8 @@
</span><span class="cx" style="display: block; padding: 0 10px"> x = nx;
</span><span class="cx" style="display: block; padding: 0 10px"> y = ny;
</span><span class="cx" style="display: block; padding: 0 10px"> } )
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- // When the overlay is touched, always fade in and cancel the event.
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+
+ // When the overlay is touched, fade in and cancel the event.
</ins><span class="cx" style="display: block; padding: 0 10px"> .on( 'touchstart.focus', function( event ) {
</span><span class="cx" style="display: block; padding: 0 10px"> event.preventDefault();
</span><span class="cx" style="display: block; padding: 0 10px"> fadeIn();
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -979,6 +1289,15 @@
</span><span class="cx" style="display: block; padding: 0 10px"> fadeOutSlug();
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ /**
+ * @summary Fades all elements back in.
+ *
+ * @since 4.1.0
+ *
+ * @param event The event that triggers this function.
+ *
+ * @returns {void}
+ */
</ins><span class="cx" style="display: block; padding: 0 10px"> function fadeIn( event ) {
</span><span class="cx" style="display: block; padding: 0 10px"> if ( faded ) {
</span><span class="cx" style="display: block; padding: 0 10px"> faded = false;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1018,6 +1337,13 @@
</span><span class="cx" style="display: block; padding: 0 10px"> fadeInSlug();
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ /**
+ * @summary Fades in if the focused element based on it position.
+ *
+ * @since 4.1.0
+ *
+ * @returns {void}
+ */
</ins><span class="cx" style="display: block; padding: 0 10px"> function maybeFadeIn() {
</span><span class="cx" style="display: block; padding: 0 10px"> setTimeout( function() {
</span><span class="cx" style="display: block; padding: 0 10px"> var position = document.activeElement.compareDocumentPosition( $editor.get( 0 ) );
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1033,6 +1359,13 @@
</span><span class="cx" style="display: block; padding: 0 10px"> }, 0 );
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ /**
+ * @summary Fades out the admin bar based on focus on the admin bar.
+ *
+ * @since 4.1.0
+ *
+ * @returns {void}
+ */
</ins><span class="cx" style="display: block; padding: 0 10px"> function fadeOutAdminBar() {
</span><span class="cx" style="display: block; padding: 0 10px"> if ( ! fadedAdminBar && faded ) {
</span><span class="cx" style="display: block; padding: 0 10px"> fadedAdminBar = true;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1047,6 +1380,13 @@
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ /**
+ * @summary Fades in the admin bar.
+ *
+ * @since 4.1.0
+ *
+ * @returns {void}
+ */
</ins><span class="cx" style="display: block; padding: 0 10px"> function fadeInAdminBar() {
</span><span class="cx" style="display: block; padding: 0 10px"> if ( fadedAdminBar ) {
</span><span class="cx" style="display: block; padding: 0 10px"> fadedAdminBar = false;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1055,6 +1395,13 @@
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ /**
+ * @summary Fades out the edit slug box.
+ *
+ * @since 4.1.0
+ *
+ * @returns {void}
+ */
</ins><span class="cx" style="display: block; padding: 0 10px"> function fadeOutSlug() {
</span><span class="cx" style="display: block; padding: 0 10px"> if ( ! fadedSlug && faded && ! $slug.find( ':focus').length ) {
</span><span class="cx" style="display: block; padding: 0 10px"> fadedSlug = true;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1065,6 +1412,13 @@
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ /**
+ * @summary Fades in the edit slug box.
+ *
+ * @since 4.1.0
+ *
+ * @returns {void}
+ */
</ins><span class="cx" style="display: block; padding: 0 10px"> function fadeInSlug() {
</span><span class="cx" style="display: block; padding: 0 10px"> if ( fadedSlug ) {
</span><span class="cx" style="display: block; padding: 0 10px"> fadedSlug = false;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1075,6 +1429,17 @@
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ /**
+ * @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}
+ */
</ins><span class="cx" style="display: block; padding: 0 10px"> function toggleViaKeyboard( event ) {
</span><span class="cx" style="display: block; padding: 0 10px"> if ( event.altKey && event.shiftKey && 87 === event.keyCode ) {
</span><span class="cx" style="display: block; padding: 0 10px"> toggle();
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1085,6 +1450,16 @@
</span><span class="cx" style="display: block; padding: 0 10px"> $content.on( 'keydown.focus-shortcut', toggleViaKeyboard );
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ /**
+ * @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}
+ */
</ins><span class="cx" style="display: block; padding: 0 10px"> $document.on( 'tinymce-editor-setup.focus', function( event, editor ) {
</span><span class="cx" style="display: block; padding: 0 10px"> editor.addButton( 'dfw', {
</span><span class="cx" style="display: block; padding: 0 10px"> active: _isOn,
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1116,6 +1491,16 @@
</span><span class="cx" style="display: block; padding: 0 10px"> editor.addShortcut( 'access+w', '', 'wpToggleDFW' );
</span><span class="cx" style="display: block; padding: 0 10px"> } );
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ /**
+ * @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}
+ */
</ins><span class="cx" style="display: block; padding: 0 10px"> $document.on( 'tinymce-editor-init.focus', function( event, editor ) {
</span><span class="cx" style="display: block; padding: 0 10px"> var mceBind, mceUnbind;
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1151,9 +1536,10 @@
</span><span class="cx" style="display: block; padding: 0 10px"> mceBind();
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ // Bind and unbind based on the distraction free writing focus.
</ins><span class="cx" style="display: block; padding: 0 10px"> $document.on( 'dfw-on.focus', mceBind ).on( 'dfw-off.focus', mceUnbind );
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- // Make sure the body focuses when clicking outside it.
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ // Focuse the editor when it is the target of the click event.
</ins><span class="cx" style="display: block; padding: 0 10px"> editor.on( 'click', function( event ) {
</span><span class="cx" style="display: block; padding: 0 10px"> if ( event.target === editor.getDoc().documentElement ) {
</span><span class="cx" style="display: block; padding: 0 10px"> editor.focus();
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1162,9 +1548,20 @@
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> } );
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ /**
+ * @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}
+ */
</ins><span class="cx" style="display: block; padding: 0 10px"> $document.on( 'quicktags-init', function( event, editor ) {
</span><span class="cx" style="display: block; padding: 0 10px"> var $button;
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ // Bind the distraction free writing events if the distraction free writing button is available.
</ins><span class="cx" style="display: block; padding: 0 10px"> if ( editor.settings.buttons && ( ',' + editor.settings.buttons + ',' ).indexOf( ',dfw,' ) !== -1 ) {
</span><span class="cx" style="display: block; padding: 0 10px"> $button = $( '#' + editor.name + '_dfw' );
</span><span class="cx" style="display: block; padding: 0 10px">
</span></span></pre>
</div>
</div>
</body>
</html>