wp-admin/js/editor-expand.js

   1 /* global tinymce */
   2
   3 window.wp = window.wp || {};
   4
   5 jQuery( document ).ready( function($) {
   6         var $window = $( window ),
   7                 $document = $( document ),
   8                 $adminBar = $( '#wpadminbar' ),
   9                 $footer = $( '#wpfooter' ),
  10                 $wrap = $( '#postdivrich' ),
  11                 $contentWrap = $( '#wp-content-wrap' ),
  12                 $tools = $( '#wp-content-editor-tools' ),
  13                 $visualTop = $(),
  14                 $visualEditor = $(),
  15                 $textTop = $( '#ed_toolbar' ),
  16                 $textEditor = $( '#content' ),
  17                 $textEditorClone = $( '<div id="content-textarea-clone"></div>' ),
  18                 $bottom = $( '#post-status-info' ),
  19                 $menuBar = $(),
  20                 $statusBar = $(),
  21                 $sideSortables = $( '#side-sortables' ),
  22                 $postboxContainer = $( '#postbox-container-1' ),
  23                 $postBody = $('#post-body'),
  24                 fullscreen = window.wp.editor && window.wp.editor.fullscreen,
  25                 mceEditor,
  26                 mceBind = function(){},
  27                 mceUnbind = function(){},
  28                 fixedTop = false,
  29                 fixedBottom = false,
  30                 fixedSideTop = false,
  31                 fixedSideBottom = false,
  32                 scrollTimer,
  33                 lastScrollPosition = 0,
  34                 pageYOffsetAtTop = 130,
  35                 pinnedToolsTop = 56,
  36                 sidebarBottom = 20,
  37                 autoresizeMinHeight = 300,
  38                 initialMode = window.getUserSetting( 'editor' ),
  39                 // These are corrected when adjust() runs, except on scrolling if already set.
  40                 heights = {
  41                         windowHeight: 0,
  42                         windowWidth: 0,
  43                         adminBarHeight: 0,
  44                         toolsHeight: 0,
  45                         menuBarHeight: 0,
  46                         visualTopHeight: 0,
  47                         textTopHeight: 0,
  48                         bottomHeight: 0,
  49                         statusBarHeight: 0,
  50                         sideSortablesHeight: 0
  51                 };
  52
  53         $textEditorClone.insertAfter( $textEditor );
  54
  55         $textEditorClone.css( {
  56                 'font-family': $textEditor.css( 'font-family' ),
  57                 'font-size': $textEditor.css( 'font-size' ),
  58                 'line-height': $textEditor.css( 'line-height' ),
  59                 'white-space': 'pre-wrap',
  60                 'word-wrap': 'break-word'
  61         } );
  62
  63         function getHeights() {
  64                 var windowWidth = $window.width();
  65
  66                 heights = {
  67                         windowHeight: $window.height(),
  68                         windowWidth: windowWidth,
  69                         adminBarHeight: ( windowWidth > 600 ? $adminBar.outerHeight() : 0 ),
  70                         toolsHeight: $tools.outerHeight() || 0,
  71                         menuBarHeight: $menuBar.outerHeight() || 0,
  72                         visualTopHeight: $visualTop.outerHeight() || 0,
  73                         textTopHeight: $textTop.outerHeight() || 0,
  74                         bottomHeight: $bottom.outerHeight() || 0,
  75                         statusBarHeight: $statusBar.outerHeight() || 0,
  76                         sideSortablesHeight: $sideSortables.height() || 0
  77                 };
  78
  79                 // Adjust for hidden
  80                 if ( heights.menuBarHeight < 3 ) {
  81                         heights.menuBarHeight = 0;
  82                 }
  83         }
  84
  85         function textEditorKeyup( event ) {
  86                 var VK = jQuery.ui.keyCode,
  87                         key = event.keyCode,
  88                         range = document.createRange(),
  89                         selStart = $textEditor[0].selectionStart,
  90                         selEnd = $textEditor[0].selectionEnd,
  91                         textNode = $textEditorClone[0].firstChild,
  92                         buffer = 10,
  93                         offset, cursorTop, cursorBottom, editorTop, editorBottom;
  94
  95                 if ( selStart && selEnd && selStart !== selEnd ) {
  96                         return;
  97                 }
  98
  99                 // These are not TinyMCE ranges.
 100                 try {
 101                         range.setStart( textNode, selStart );
 102                         range.setEnd( textNode, selEnd + 1 );
 103                 } catch ( ex ) {}
 104
 105                 offset = range.getBoundingClientRect();
 106
 107                 if ( ! offset.height ) {
 108                         return;
 109                 }
 110
 111                 cursorTop = offset.top - buffer;
 112                 cursorBottom = cursorTop + offset.height + buffer;
 113                 editorTop = heights.adminBarHeight + heights.toolsHeight + heights.textTopHeight;
 114                 editorBottom = heights.windowHeight - heights.bottomHeight;
 115
 116                 if ( cursorTop < editorTop && ( key === VK.UP || key === VK.LEFT || key === VK.BACKSPACE ) ) {
 117                         window.scrollTo( window.pageXOffset, cursorTop + window.pageYOffset - editorTop );
 118                 } else if ( cursorBottom > editorBottom ) {
 119                         window.scrollTo( window.pageXOffset, cursorBottom + window.pageYOffset - editorBottom );
 120                 }
 121         }
 122
 123         function textEditorResize() {
 124                 if ( ( mceEditor && ! mceEditor.isHidden() ) || ( ! mceEditor && initialMode === 'tinymce' ) ) {
 125                         return;
 126                 }
 127
 128                 var textEditorHeight = $textEditor.height(),
 129                         hiddenHeight;
 130
 131                 $textEditorClone.width( $textEditor.width() - 22 );
 132                 $textEditorClone.text( $textEditor.val() + '&nbsp;' );
 133
 134                 hiddenHeight = $textEditorClone.height();
 135
 136                 if ( hiddenHeight < autoresizeMinHeight ) {
 137                         hiddenHeight = autoresizeMinHeight;
 138                 }
 139
 140                 if ( hiddenHeight === textEditorHeight ) {
 141                         return;
 142                 }
 143
 144                 $textEditor.height( hiddenHeight );
 145
 146                 adjust();
 147         }
 148
 149         // We need to wait for TinyMCE to initialize.
 150         $document.on( 'tinymce-editor-init.editor-expand', function( event, editor ) {
 151                 // Make sure it's the main editor.
 152                 if ( editor.id !== 'content' ) {
 153                         return;
 154                 }
 155
 156                 // Copy the editor instance.
 157                 mceEditor = editor;
 158
 159                 // Set the minimum height to the initial viewport height.
 160                 editor.settings.autoresize_min_height = autoresizeMinHeight;
 161
 162                 // Get the necessary UI elements.
 163                 $visualTop = $contentWrap.find( '.mce-toolbar-grp' );
 164                 $visualEditor = $contentWrap.find( '.mce-edit-area' );
 165                 $statusBar = $contentWrap.find( '.mce-statusbar' );
 166                 $menuBar = $contentWrap.find( '.mce-menubar' );
 167
 168                 function mceGetCursorOffset() {
 169                         var node = editor.selection.getNode(),
 170                                 view, offset;
 171
 172                         if ( editor.plugins.wpview && ( view = editor.plugins.wpview.getView( node ) ) ) {
 173                                 offset = view.getBoundingClientRect();
 174                         } else {
 175                                 offset = node.getBoundingClientRect();
 176                         }
 177
 178                         return offset.height ? offset : false;
 179                 }
 180
 181                 // Make sure the cursor is always visible.
 182                 // This is not only necessary to keep the cursor between the toolbars,
 183                 // but also to scroll the window when the cursor moves out of the viewport to a wpview.
 184                 // Setting a buffer > 0 will prevent the browser default.
 185                 // Some browsers will scroll to the middle,
 186                 // others to the top/bottom of the *window* when moving the cursor out of the viewport.
 187                 function mceKeyup( event ) {
 188                         var VK = tinymce.util.VK,
 189                                 key = event.keyCode,
 190                                 offset = mceGetCursorOffset(),
 191                                 buffer = 10,
 192                                 cursorTop, cursorBottom, editorTop, editorBottom;
 193
 194                         if ( ! offset ) {
 195                                 return;
 196                         }
 197
 198                         // Bail on special keys.
 199                         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 ) ) {
 200                                 return;
 201                         // OS keys, function keys, num lock, scroll lock
 202                         } else if ( ( key >= 91 && key <= 93 ) || ( key >= 112 && key <= 123 ) || key === 144 || key === 145 ) {
 203                                 return;
 204                         }
 205
 206                         cursorTop = offset.top + editor.iframeElement.getBoundingClientRect().top;
 207                         cursorBottom = cursorTop + offset.height;
 208                         cursorTop = cursorTop - buffer;
 209                         cursorBottom = cursorBottom + buffer;
 210                         editorTop = heights.adminBarHeight + heights.toolsHeight + heights.menuBarHeight + heights.visualTopHeight;
 211                         editorBottom = heights.windowHeight - heights.bottomHeight - heights.statusBarHeight;
 212
 213                         // Don't scroll if the node is taller than the visible part of the editor
 214                         if ( editorBottom - editorTop < offset.height ) {
 215                                 return;
 216                         }
 217
 218                         if ( cursorTop < editorTop && ( key === VK.UP || key === VK.LEFT || key === VK.BACKSPACE ) ) {
 219                                 window.scrollTo( window.pageXOffset, cursorTop + window.pageYOffset - editorTop );
 220                         } else if ( cursorBottom > editorBottom ) {
 221                                 window.scrollTo( window.pageXOffset, cursorBottom + window.pageYOffset - editorBottom );
 222                         }
 223                 }
 224
 225                 // Adjust when switching editor modes.
 226                 function mceShow() {
 227                         setTimeout( function() {
 228                                 editor.execCommand( 'wpAutoResize' );
 229                                 adjust();
 230                         }, 300 );
 231                 }
 232
 233                 function mceHide() {
 234                         setTimeout( function() {
 235                                 var top = $contentWrap.offset().top;
 236
 237                                 if ( window.pageYOffset > top ) {
 238                                         window.scrollTo( window.pageXOffset, top - heights.adminBarHeight );
 239                                 }
 240
 241                                 textEditorResize();
 242                                 adjust();
 243                         }, 100 );
 244
 245                         adjust();
 246                 }
 247
 248                 mceBind = function() {
 249                         editor.on( 'keyup', mceKeyup );
 250                         editor.on( 'show', mceShow );
 251                         editor.on( 'hide', mceHide );
 252                         // Adjust when the editor resizes.
 253                         editor.on( 'setcontent wp-autoresize wp-toolbar-toggle', adjust );
 254                 };
 255
 256                 mceUnbind = function() {
 257                         editor.off( 'keyup', mceKeyup );
 258                         editor.off( 'show', mceShow );
 259                         editor.off( 'hide', mceHide );
 260                         editor.off( 'setcontent wp-autoresize wp-toolbar-toggle', adjust );
 261                 };
 262
 263                 if ( $wrap.hasClass( 'wp-editor-expand' ) ) {
 264                         // Adjust "immediately"
 265                         mceBind();
 266                         initialResize( adjust );
 267                 }
 268         } );
 269
 270         // Adjust the toolbars based on the active editor mode.
 271         function adjust( type ) {
 272                 // Make sure we're not in fullscreen mode.
 273                 if ( fullscreen && fullscreen.settings.visible ) {
 274                         return;
 275                 }
 276
 277                 var windowPos = $window.scrollTop(),
 278                         resize = type !== 'scroll',
 279                         visual = ( mceEditor && ! mceEditor.isHidden() ),
 280                         buffer = autoresizeMinHeight,
 281                         postBodyTop = $postBody.offset().top,
 282                         borderWidth = 1,
 283                         contentWrapWidth = $contentWrap.width(),
 284                         $top, $editor, sidebarTop, footerTop, canPin,
 285                         topPos, topHeight, editorPos, editorHeight;
 286
 287                 // Refresh the heights
 288                 if ( resize || ! heights.windowHeight ) {
 289                         getHeights();
 290                 }
 291
 292                 if ( ! visual && type === 'resize' ) {
 293                         textEditorResize();
 294                 }
 295
 296                 if ( visual ) {
 297                         $top = $visualTop;
 298                         $editor = $visualEditor;
 299                         topHeight = heights.visualTopHeight;
 300                 } else {
 301                         $top = $textTop;
 302                         $editor = $textEditor;
 303                         topHeight = heights.textTopHeight;
 304                 }
 305
 306                 topPos = $top.parent().offset().top;
 307                 editorPos = $editor.offset().top;
 308                 editorHeight = $editor.outerHeight();
 309
 310                 // Should we pin?
 311                 canPin = visual ? autoresizeMinHeight + topHeight : autoresizeMinHeight + 20; // 20px from textarea padding
 312                 canPin = editorHeight > ( canPin + 5 );
 313
 314                 if ( ! canPin ) {
 315                         if ( resize ) {
 316                                 $tools.css( {
 317                                         position: 'absolute',
 318                                         top: 0,
 319                                         width: contentWrapWidth
 320                                 } );
 321
 322                                 if ( visual && $menuBar.length ) {
 323                                         $menuBar.css( {
 324                                                 position: 'absolute',
 325                                                 top: 0,
 326                                                 width: contentWrapWidth - ( borderWidth * 2 )
 327                                         } );
 328                                 }
 329
 330                                 $top.css( {
 331                                         position: 'absolute',
 332                                         top: heights.menuBarHeight,
 333                                         width: contentWrapWidth - ( borderWidth * 2 ) - ( visual ? 0 : ( $top.outerWidth() - $top.width() ) )
 334                                 } );
 335
 336                                 $statusBar.add( $bottom ).attr( 'style', '' );
 337                         }
 338                 } else {
 339                         // Maybe pin the top.
 340                         if ( ( ! fixedTop || resize ) &&
 341                                 // Handle scrolling down.
 342                                 ( windowPos >= ( topPos - heights.toolsHeight - heights.adminBarHeight ) &&
 343                                 // Handle scrolling up.
 344                                 windowPos <= ( topPos - heights.toolsHeight - heights.adminBarHeight + editorHeight - buffer ) ) ) {
 345                                 fixedTop = true;
 346
 347                                 $tools.css( {
 348                                         position: 'fixed',
 349                                         top: heights.adminBarHeight,
 350                                         width: contentWrapWidth
 351                                 } );
 352
 353                                 if ( visual && $menuBar.length ) {
 354                                         $menuBar.css( {
 355                                                 position: 'fixed',
 356                                                 top: heights.adminBarHeight + heights.toolsHeight,
 357                                                 width: contentWrapWidth - ( borderWidth * 2 ) - ( visual ? 0 : ( $top.outerWidth() - $top.width() ) )
 358                                         } );
 359                                 }
 360
 361                                 $top.css( {
 362                                         position: 'fixed',
 363                                         top: heights.adminBarHeight + heights.toolsHeight + heights.menuBarHeight,
 364                                         width: contentWrapWidth - ( borderWidth * 2 ) - ( visual ? 0 : ( $top.outerWidth() - $top.width() ) )
 365                                 } );
 366                         // Maybe unpin the top.
 367                         } else if ( fixedTop || resize ) {
 368                                 // Handle scrolling up.
 369                                 if ( windowPos <= ( topPos - heights.toolsHeight - heights.adminBarHeight ) ) {
 370                                         fixedTop = false;
 371
 372                                         $tools.css( {
 373                                                 position: 'absolute',
 374                                                 top: 0,
 375                                                 width: contentWrapWidth
 376                                         } );
 377
 378                                         if ( visual && $menuBar.length ) {
 379                                                 $menuBar.css( {
 380                                                         position: 'absolute',
 381                                                         top: 0,
 382                                                         width: contentWrapWidth - ( borderWidth * 2 )
 383                                                 } );
 384                                         }
 385
 386                                         $top.css( {
 387                                                 position: 'absolute',
 388                                                 top: heights.menuBarHeight,
 389                                                 width: contentWrapWidth - ( borderWidth * 2 ) - ( visual ? 0 : ( $top.outerWidth() - $top.width() ) )
 390                                         } );
 391                                 // Handle scrolling down.
 392                                 } else if ( windowPos >= ( topPos - heights.toolsHeight - heights.adminBarHeight + editorHeight - buffer ) ) {
 393                                         fixedTop = false;
 394
 395                                         $tools.css( {
 396                                                 position: 'absolute',
 397                                                 top: editorHeight - buffer,
 398                                                 width: contentWrapWidth
 399                                         } );
 400
 401                                         if ( visual && $menuBar.length ) {
 402                                                 $menuBar.css( {
 403                                                         position: 'absolute',
 404                                                         top: editorHeight - buffer,
 405                                                         width: contentWrapWidth - ( borderWidth * 2 )
 406                                                 } );
 407                                         }
 408
 409                                         $top.css( {
 410                                                 position: 'absolute',
 411                                                 top: editorHeight - buffer + heights.menuBarHeight,
 412                                                 width: contentWrapWidth - ( borderWidth * 2 ) - ( visual ? 0 : ( $top.outerWidth() - $top.width() ) )
 413                                         } );
 414                                 }
 415                         }
 416
 417                         // Maybe adjust the bottom bar.
 418                         if ( ( ! fixedBottom || resize ) &&
 419                                 // +[n] for the border around the .wp-editor-container.
 420                                 ( windowPos + heights.windowHeight ) <= ( editorPos + editorHeight + heights.bottomHeight + heights.statusBarHeight + borderWidth ) ) {
 421                                 fixedBottom = true;
 422
 423                                 $statusBar.css( {
 424                                         position: 'fixed',
 425                                         bottom: heights.bottomHeight,
 426                                         width: contentWrapWidth - ( borderWidth * 2 )
 427                                 } );
 428
 429                                 $bottom.css( {
 430                                         position: 'fixed',
 431                                         bottom: 0,
 432                                         width: contentWrapWidth
 433                                 } );
 434                         } else if ( ( fixedBottom || resize ) &&
 435                                         ( windowPos + heights.windowHeight ) > ( editorPos + editorHeight + heights.bottomHeight + heights.statusBarHeight - borderWidth ) ) {
 436                                 fixedBottom = false;
 437
 438                                 $statusBar.add( $bottom ).attr( 'style', '' );
 439                         }
 440                 }
 441
 442                 // Sidebar pinning
 443                 if ( $postboxContainer.width() < 300 && heights.windowWidth > 600 && // sidebar position is changed with @media from CSS, make sure it is on the side
 444                         $document.height() > ( $sideSortables.height() + postBodyTop + 120 ) && // the sidebar is not the tallest element
 445                         heights.windowHeight < editorHeight ) { // the editor is taller than the viewport
 446
 447                         if ( ( heights.sideSortablesHeight + pinnedToolsTop + sidebarBottom ) > heights.windowHeight || fixedSideTop || fixedSideBottom ) {
 448                                 // Reset when scrolling to the top
 449                                 if ( windowPos + pinnedToolsTop <= postBodyTop ) {
 450                                         $sideSortables.attr( 'style', '' );
 451                                         fixedSideTop = fixedSideBottom = false;
 452                                 } else {
 453                                         if ( windowPos > lastScrollPosition ) {
 454                                                 // Scrolling down
 455                                                 if ( fixedSideTop ) {
 456                                                         // let it scroll
 457                                                         fixedSideTop = false;
 458                                                         sidebarTop = $sideSortables.offset().top - heights.adminBarHeight;
 459                                                         footerTop = $footer.offset().top;
 460
 461                                                         // don't get over the footer
 462                                                         if ( footerTop < sidebarTop + heights.sideSortablesHeight + sidebarBottom ) {
 463                                                                 sidebarTop = footerTop - heights.sideSortablesHeight - 12;
 464                                                         }
 465
 466                                                         $sideSortables.css({
 467                                                                 position: 'absolute',
 468                                                                 top: sidebarTop,
 469                                                                 bottom: ''
 470                                                         });
 471                                                 } else if ( ! fixedSideBottom && heights.sideSortablesHeight + $sideSortables.offset().top + sidebarBottom < windowPos + heights.windowHeight ) {
 472                                                         // pin the bottom
 473                                                         fixedSideBottom = true;
 474
 475                                                         $sideSortables.css({
 476                                                                 position: 'fixed',
 477                                                                 top: 'auto',
 478                                                                 bottom: sidebarBottom
 479                                                         });
 480                                                 }
 481                                         } else if ( windowPos < lastScrollPosition ) {
 482                                                 // Scrolling up
 483                                                 if ( fixedSideBottom ) {
 484                                                         // let it scroll
 485                                                         fixedSideBottom = false;
 486                                                         sidebarTop = $sideSortables.offset().top - sidebarBottom;
 487                                                         footerTop = $footer.offset().top;
 488
 489                                                         // don't get over the footer
 490                                                         if ( footerTop < sidebarTop + heights.sideSortablesHeight + sidebarBottom ) {
 491                                                                 sidebarTop = footerTop - heights.sideSortablesHeight - 12;
 492                                                         }
 493
 494                                                         $sideSortables.css({
 495                                                                 position: 'absolute',
 496                                                                 top: sidebarTop,
 497                                                                 bottom: ''
 498                                                         });
 499                                                 } else if ( ! fixedSideTop && $sideSortables.offset().top >= windowPos + pinnedToolsTop ) {
 500                                                         // pin the top
 501                                                         fixedSideTop = true;
 502
 503                                                         $sideSortables.css({
 504                                                                 position: 'fixed',
 505                                                                 top: pinnedToolsTop,
 506                                                                 bottom: ''
 507                                                         });
 508                                                 }
 509                                         }
 510                                 }
 511                         } else {
 512                                 // if the sidebar container is smaller than the viewport, then pin/unpin the top when scrolling
 513                                 if ( windowPos >= ( postBodyTop - pinnedToolsTop ) ) {
 514
 515                                         $sideSortables.css( {
 516                                                 position: 'fixed',
 517                                                 top: pinnedToolsTop
 518                                         } );
 519                                 } else {
 520                                         $sideSortables.attr( 'style', '' );
 521                                 }
 522
 523                                 fixedSideTop = fixedSideBottom = false;
 524                         }
 525
 526                         lastScrollPosition = windowPos;
 527                 } else {
 528                         $sideSortables.attr( 'style', '' );
 529                         fixedSideTop = fixedSideBottom = false;
 530                 }
 531
 532                 if ( resize ) {
 533                         $contentWrap.css( {
 534                                 paddingTop: heights.toolsHeight
 535                         } );
 536
 537                         if ( visual ) {
 538                                 $visualEditor.css( {
 539                                         paddingTop: heights.visualTopHeight + heights.menuBarHeight
 540                                 } );
 541                         } else {
 542                                 $textEditor.css( {
 543                                         marginTop: heights.textTopHeight
 544                                 } );
 545
 546                                 $textEditorClone.width( contentWrapWidth - 20 - ( borderWidth * 2 ) );
 547                         }
 548                 }
 549         }
 550
 551         function fullscreenHide() {
 552                 textEditorResize();
 553                 adjust();
 554         }
 555
 556         function initialResize( callback ) {
 557                 for ( var i = 1; i < 6; i++ ) {
 558                         setTimeout( callback, 500 * i );
 559                 }
 560         }
 561
 562         function afterScroll() {
 563                 clearTimeout( scrollTimer );
 564                 scrollTimer = setTimeout( adjust, 100 );
 565         }
 566
 567         function on() {
 568                 // Scroll to the top when triggering this from JS.
 569                 // Ensures toolbars are pinned properly.
 570                 if ( window.pageYOffset && window.pageYOffset > pageYOffsetAtTop ) {
 571                         window.scrollTo( window.pageXOffset, 0 );
 572                 }
 573
 574                 $wrap.addClass( 'wp-editor-expand' );
 575
 576                 // Adjust when the window is scrolled or resized.
 577                 $window.on( 'scroll.editor-expand resize.editor-expand', function( event ) {
 578                         adjust( event.type );
 579                         afterScroll();
 580                 } );
 581
 582                 // Adjust when collapsing the menu, changing the columns, changing the body class.
 583                 $document.on( 'wp-collapse-menu.editor-expand postboxes-columnchange.editor-expand editor-classchange.editor-expand', adjust )
 584                         .on( 'postbox-toggled.editor-expand', function() {
 585                                 if ( ! fixedSideTop && ! fixedSideBottom && window.pageYOffset > pinnedToolsTop ) {
 586                                         fixedSideBottom = true;
 587                                         window.scrollBy( 0, -1 );
 588                                         adjust();
 589                                         window.scrollBy( 0, 1 );
 590                                 }
 591
 592                                 adjust();
 593                         });
 594
 595                 $textEditor.on( 'focus.editor-expand input.editor-expand propertychange.editor-expand', textEditorResize );
 596                 $textEditor.on( 'keyup.editor-expand', textEditorKeyup );
 597                 mceBind();
 598
 599                 // Adjust when entering/exiting fullscreen mode.
 600                 fullscreen && fullscreen.pubsub.subscribe( 'hidden', fullscreenHide );
 601
 602                 if ( mceEditor ) {
 603                         mceEditor.settings.wp_autoresize_on = true;
 604                         mceEditor.execCommand( 'wpAutoResizeOn' );
 605
 606                         if ( ! mceEditor.isHidden() ) {
 607                                 mceEditor.execCommand( 'wpAutoResize' );
 608                         }
 609                 }
 610
 611                 if ( ! mceEditor || mceEditor.isHidden() ) {
 612                         textEditorResize();
 613                 }
 614
 615                 adjust();
 616         }
 617
 618         function off() {
 619                 var height = window.getUserSetting('ed_size');
 620
 621                 // Scroll to the top when triggering this from JS.
 622                 // Ensures toolbars are reset properly.
 623                 if ( window.pageYOffset && window.pageYOffset > pageYOffsetAtTop ) {
 624                         window.scrollTo( window.pageXOffset, 0 );
 625                 }
 626
 627                 $wrap.removeClass( 'wp-editor-expand' );
 628
 629                 $window.off( '.editor-expand' );
 630                 $document.off( '.editor-expand' );
 631                 $textEditor.off( '.editor-expand' );
 632                 mceUnbind();
 633
 634                 // Adjust when entering/exiting fullscreen mode.
 635                 fullscreen && fullscreen.pubsub.unsubscribe( 'hidden', fullscreenHide );
 636
 637                 // Reset all css
 638                 $.each( [ $visualTop, $textTop, $tools, $menuBar, $bottom, $statusBar, $contentWrap, $visualEditor, $textEditor, $sideSortables ], function( i, element ) {
 639                         element && element.attr( 'style', '' );
 640                 });
 641
 642                 fixedTop = fixedBottom = fixedSideTop = fixedSideBottom = false;
 643
 644                 if ( mceEditor ) {
 645                         mceEditor.settings.wp_autoresize_on = false;
 646                         mceEditor.execCommand( 'wpAutoResizeOff' );
 647
 648                         if ( ! mceEditor.isHidden() ) {
 649                                 $textEditor.hide();
 650
 651                                 if ( height ) {
 652                                         mceEditor.theme.resizeTo( null, height );
 653                                 }
 654                         }
 655                 }
 656
 657                 if ( height ) {
 658                         $textEditor.height( height );
 659                 }
 660         }
 661
 662         // Start on load
 663         if ( $wrap.hasClass( 'wp-editor-expand' ) ) {
 664                 on();
 665
 666                 // Ideally we need to resize just after CSS has fully loaded and QuickTags is ready.
 667                 if ( $contentWrap.hasClass( 'html-active' ) ) {
 668                         initialResize( function() {
 669                                 adjust();
 670                                 textEditorResize();
 671                         } );
 672                 }
 673         }
 674
 675         // Show the on/off checkbox
 676         $( '#adv-settings .editor-expand' ).show();
 677         $( '#editor-expand-toggle' ).on( 'change.editor-expand', function() {
 678                 if ( $(this).prop( 'checked' ) ) {
 679                         on();
 680                         window.setUserSetting( 'editor_expand', 'on' );
 681                 } else {
 682                         off();
 683                         window.setUserSetting( 'editor_expand', 'off' );
 684                 }
 685         });
 686
 687         // Expose on() and off()
 688         window.editorExpand = {
 689                 on: on,
 690                 off: off
 691         };
 692 });