Changeset 41310
- Timestamp:
- 08/24/2017 05:47:58 PM (7 years ago)
- File:
-
- 1 edited
Legend:
- Unmodified
- Added
- Removed
-
trunk/src/wp-admin/js/editor-expand.js
r38893 r41310 7 7 $footer = $( '#wpfooter' ); 8 8 9 /* Autoresize editor. */ 9 /** 10 * @summary Handles the resizing of the editor. 11 * 12 * @since 4.0.0 13 * 14 * @returns {void} 15 */ 10 16 $( function() { 11 17 var $wrap = $( '#postdivrich' ), … … 54 60 }; 55 61 62 63 64 65 66 67 68 69 70 71 56 72 var shrinkTextarea = window._.throttle( function() { 57 73 var x = window.scrollX || document.documentElement.scrollLeft; … … 74 90 }, 300 ); 75 91 92 93 94 95 96 97 98 99 100 101 102 103 76 104 function textEditorResize() { 77 105 var length = textEditor.value.length; … … 95 123 } 96 124 125 126 127 128 129 130 131 132 133 134 135 136 97 137 function getHeights() { 98 138 var windowWidth = $window.width(); … … 111 151 }; 112 152 113 // Adjust for hidden 153 // Adjust for hidden 114 154 if ( heights.menuBarHeight < 3 ) { 115 155 heights.menuBarHeight = 0; … … 118 158 119 159 // We need to wait for TinyMCE to initialize. 160 161 162 163 164 165 166 167 168 169 170 120 171 $document.on( 'tinymce-editor-init.editor-expand', function( event, editor ) { 172 121 173 var VK = window.tinymce.util.VK, 174 175 176 177 178 122 179 hideFloatPanels = _.debounce( function() { 123 180 ! $( '.mce-floatpanel:hover' ).length && window.tinymce.ui.FloatPanel.hideAll(); … … 142 199 $menuBar = $contentWrap.find( '.mce-menubar' ); 143 200 201 202 203 204 205 206 144 207 function mceGetCursorOffset() { 145 208 var node = editor.selection.getNode(), 146 209 range, view, offset; 147 210 211 212 213 214 148 215 if ( editor.wp && editor.wp.getView && ( view = editor.wp.getView( node ) ) ) { 149 216 offset = view.getBoundingClientRect(); … … 151 218 range = editor.selection.getRng(); 152 219 220 153 221 try { 154 222 offset = range.getClientRects()[0]; 155 223 } catch( er ) {} 156 224 225 157 226 if ( ! offset ) { 158 227 offset = node.getBoundingClientRect(); … … 163 232 } 164 233 165 // Make sure the cursor is always visible. 166 // This is not only necessary to keep the cursor between the toolbars, 167 // but also to scroll the window when the cursor moves out of the viewport to a wpview. 168 // Setting a buffer > 0 will prevent the browser default. 169 // Some browsers will scroll to the middle, 170 // others to the top/bottom of the *window* when moving the cursor out of the viewport. 234 /** 235 * @summary Filters the special keys that should not be used for scrolling. 236 * 237 * @since 4.0.0 238 * 239 * @param {event} event The event to get the key code from. 240 * 241 * @returns {void} 242 */ 171 243 function mceKeyup( event ) { 172 244 var key = event.keyCode; 173 245 174 // Bail on special keys. 246 // Bail on special keys. 175 247 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 ) ) { 176 248 return; 177 // OS keys, function keys, num lock, scroll lock 249 // OS keys, function keys, num lock, scroll lock 178 250 } else if ( ( key >= 91 && key <= 93 ) || ( key >= 112 && key <= 123 ) || key === 144 || key === 145 ) { 179 251 return; … … 183 255 } 184 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 185 272 function mceScroll( key ) { 186 273 var offset = mceGetCursorOffset(), … … 188 275 cursorTop, cursorBottom, editorTop, editorBottom; 189 276 277 190 278 if ( ! offset ) { 191 279 return; 192 280 } 193 281 282 194 283 cursorTop = offset.top + editor.iframeElement.getBoundingClientRect().top; 284 285 195 286 cursorBottom = cursorTop + offset.height; 287 288 196 289 cursorTop = cursorTop - buffer; 290 291 197 292 cursorBottom = cursorBottom + buffer; 198 293 editorTop = heights.adminBarHeight + heights.toolsHeight + heights.menuBarHeight + heights.visualTopHeight; 294 295 296 297 298 199 299 editorBottom = heights.windowHeight - ( advanced ? heights.bottomHeight + heights.statusBarHeight : 0 ); 200 300 201 // Don't scroll if the node is taller than the visible part of the editor 301 // Don't scroll if the node is taller than the visible part of the editor 202 302 if ( editorBottom - editorTop < offset.height ) { 203 303 return; 204 304 } 205 305 306 307 308 309 310 206 311 if ( cursorTop < editorTop && ( key === VK.UP || key === VK.LEFT || key === VK.BACKSPACE ) ) { 207 312 window.scrollTo( window.pageXOffset, cursorTop + window.pageYOffset - editorTop ); 313 314 315 316 317 318 208 319 } else if ( cursorBottom > editorBottom ) { 209 320 window.scrollTo( window.pageXOffset, cursorBottom + window.pageYOffset - editorBottom ); … … 211 322 } 212 323 324 325 326 327 328 329 330 331 332 213 333 function mceFullscreenToggled( event ) { 334 214 335 if ( ! event.state ) { 215 336 adjust(); … … 217 338 } 218 339 219 // Adjust when switching editor modes. 340 /** 341 * @summary Shows the editor when scrolled. 342 * 343 * Binds the hideFloatPanels function on the window scroll.mce-float-panels event. 344 * Executes the wpAutoResize on the active editor. 345 * 346 * @since 4.0.0 347 * 348 * @returns {void} 349 */ 220 350 function mceShow() { 221 351 $window.on( 'scroll.mce-float-panels', hideFloatPanels ); … … 227 357 } 228 358 359 360 361 362 363 364 365 366 367 368 229 369 function mceHide() { 230 370 $window.off( 'scroll.mce-float-panels' ); … … 244 384 } 245 385 386 387 388 389 390 391 392 246 393 function toggleAdvanced() { 247 394 advanced = ! advanced; 248 395 } 249 396 397 398 399 400 401 402 403 250 404 mceBind = function() { 251 405 editor.on( 'keyup', mceKeyup ); … … 253 407 editor.on( 'hide', mceHide ); 254 408 editor.on( 'wp-toolbar-toggle', toggleAdvanced ); 409 255 410 // Adjust when the editor resizes. 256 411 editor.on( 'setcontent wp-autoresize wp-toolbar-toggle', adjust ); 412 257 413 // Don't hide the caret after undo/redo. 258 414 editor.on( 'undo redo', mceScroll ); 415 259 416 // Adjust when exiting TinyMCE's fullscreen mode. 260 417 editor.on( 'FullscreenStateChanged', mceFullscreenToggled ); … … 263 420 }; 264 421 422 423 424 425 426 427 428 265 429 mceUnbind = function() { 266 430 editor.off( 'keyup', mceKeyup ); … … 276 440 277 441 if ( $wrap.hasClass( 'wp-editor-expand' ) ) { 278 // Adjust "immediately" 442 443 // Adjust "immediately". 279 444 mceBind(); 280 445 initialResize( adjust ); … … 282 447 } ); 283 448 284 // Adjust the toolbars based on the active editor mode. 449 /** 450 * @summary Adjusts the toolbars heights and positions. 451 * 452 * Adjusts the toolbar heights and positions based on the scroll position on the page, 453 * the active editor mode and the heights of the editor, admin bar and side bar. 454 * 455 * @since 4.0.0 456 * 457 * @param {event} event The event that calls this function. 458 * 459 * @returns {void} 460 */ 285 461 function adjust( event ) { 286 // Make sure we're not in fullscreen mode. 462 463 // Makes sure we're not in fullscreen mode. 287 464 if ( fullscreen && fullscreen.settings.visible ) { 288 465 return; … … 300 477 topPos, topHeight, editorPos, editorHeight; 301 478 302 // Refresh the heights 479 /* 480 * Refresh the heights if type isn't 'scroll' 481 * or heights.windowHeight isn't set. 482 */ 303 483 if ( resize || ! heights.windowHeight ) { 304 484 getHeights(); 305 485 } 306 486 487 307 488 if ( ! visual && type === 'resize' ) { 308 489 textEditorResize(); … … 319 500 } 320 501 321 // TinyMCE still initializing.502 // tializing. 322 503 if ( ! visual && ! $top.length ) { 323 504 return; … … 328 509 editorHeight = $editor.outerHeight(); 329 510 330 // Should we pin? 511 /* 512 * If in visual mode, checks if the editorHeight is greater than the autoresizeMinHeight + topHeight. 513 * If not in visual mode, checks if the editorHeight is greater than the autoresizeMinHeight + 20. 514 */ 331 515 canPin = visual ? autoresizeMinHeight + topHeight : autoresizeMinHeight + 20; // 20px from textarea padding 332 516 canPin = editorHeight > ( canPin + 5 ); … … 358 542 } 359 543 } else { 360 // Maybe pin the top.544 // . 361 545 if ( ( ! fixedTop || resize ) && 362 // Handle scrolling down.363 546 ( windowPos >= ( topPos - heights.toolsHeight - heights.adminBarHeight ) && 364 // Handle scrolling up.365 547 windowPos <= ( topPos - heights.toolsHeight - heights.adminBarHeight + editorHeight - buffer ) ) ) { 366 548 fixedTop = true; … … 385 567 width: contentWrapWidth - ( borderWidth * 2 ) - ( visual ? 0 : ( $top.outerWidth() - $top.width() ) ) 386 568 } ); 387 // Maybe unpin the top.569 . 388 570 } else if ( fixedTop || resize ) { 389 // Handle scrolling up.390 571 if ( windowPos <= ( topPos - heights.toolsHeight - heights.adminBarHeight ) ) { 391 572 fixedTop = false; … … 410 591 width: contentWrapWidth - ( borderWidth * 2 ) - ( visual ? 0 : ( $top.outerWidth() - $top.width() ) ) 411 592 } ); 412 // Handle scrolling down.413 593 } else if ( windowPos >= ( topPos - heights.toolsHeight - heights.adminBarHeight + editorHeight - buffer ) ) { 414 594 fixedTop = false; … … 436 616 } 437 617 438 // Maybe adjust the bottom bar.618 // . 439 619 if ( ( ! fixedBottom || ( resize && advanced ) ) && 440 // +[n]for the border around the .wp-editor-container.620 // for the border around the .wp-editor-container. 441 621 ( windowPos + heights.windowHeight ) <= ( editorPos + editorHeight + heights.bottomHeight + heights.statusBarHeight + borderWidth ) ) { 442 622 … … 469 649 } 470 650 471 // Sidebar pinning 472 if ( $postboxContainer.width() < 300 && heights.windowWidth > 600 && // sidebar position is changed with @media from CSS, make sure it is on the side 473 $document.height() > ( $sideSortables.height() + postBodyTop + 120 ) && // the sidebar is not the tallest element 474 heights.windowHeight < editorHeight ) { // the editor is taller than the viewport 651 // The postbox container is positioned with @media from CSS. Ensure it is pinned on the side. 652 if ( $postboxContainer.width() < 300 && heights.windowWidth > 600 && 653 654 // Check if the sidebar is not taller than the document height. 655 $document.height() > ( $sideSortables.height() + postBodyTop + 120 ) && 656 657 // Check if the editor is taller than the viewport. 658 heights.windowHeight < editorHeight ) { 475 659 476 660 if ( ( heights.sideSortablesHeight + pinnedToolsTop + sidebarBottom ) > heights.windowHeight || fixedSideTop || fixedSideBottom ) { 477 // Reset when scrolling to the top 661 662 // Reset the sideSortables style when scrolling to the top. 478 663 if ( windowPos + pinnedToolsTop <= postBodyTop ) { 479 664 $sideSortables.attr( 'style', '' ); 480 665 fixedSideTop = fixedSideBottom = false; 481 666 } else { 667 668 482 669 if ( windowPos > lastScrollPosition ) { 483 // Scrolling down484 670 if ( fixedSideTop ) { 485 // let it scroll 671 672 // Let it scroll. 486 673 fixedSideTop = false; 487 674 sidebarTop = $sideSortables.offset().top - heights.adminBarHeight; 488 675 footerTop = $footer.offset().top; 489 676 490 // don't get over the footer677 // 491 678 if ( footerTop < sidebarTop + heights.sideSortablesHeight + sidebarBottom ) { 492 679 sidebarTop = footerTop - heights.sideSortablesHeight - 12; … … 499 686 }); 500 687 } else if ( ! fixedSideBottom && heights.sideSortablesHeight + $sideSortables.offset().top + sidebarBottom < windowPos + heights.windowHeight ) { 501 // pin the bottom688 // 502 689 fixedSideBottom = true; 503 690 … … 508 695 }); 509 696 } 697 698 510 699 } else if ( windowPos < lastScrollPosition ) { 511 // Scrolling up512 700 if ( fixedSideBottom ) { 513 // let it scroll701 // 514 702 fixedSideBottom = false; 515 703 sidebarTop = $sideSortables.offset().top - sidebarBottom; 516 704 footerTop = $footer.offset().top; 517 705 518 // don't get over the footer706 // 519 707 if ( footerTop < sidebarTop + heights.sideSortablesHeight + sidebarBottom ) { 520 708 sidebarTop = footerTop - heights.sideSortablesHeight - 12; … … 527 715 }); 528 716 } else if ( ! fixedSideTop && $sideSortables.offset().top >= windowPos + pinnedToolsTop ) { 529 // pin the top717 // 530 718 fixedSideTop = true; 531 719 … … 539 727 } 540 728 } else { 541 // if the sidebar container is smaller than the viewport, then pin/unpin the top when scrolling729 // 542 730 if ( windowPos >= ( postBodyTop - pinnedToolsTop ) ) { 543 731 … … 576 764 } 577 765 766 767 768 769 770 771 772 578 773 function fullscreenHide() { 579 774 textEditorResize(); … … 581 776 } 582 777 778 779 780 781 782 783 784 785 786 583 787 function initialResize( callback ) { 584 788 for ( var i = 1; i < 6; i++ ) { … … 587 791 } 588 792 793 794 795 796 797 798 799 589 800 function afterScroll() { 590 801 clearTimeout( scrollTimer ); … … 592 803 } 593 804 805 806 807 808 809 810 811 594 812 function on() { 595 // Scroll to the top when triggering this from JS. 596 // Ensures toolbars are pinned properly. 813 /* 814 * Scroll to the top when triggering this from JS. 815 * Ensure the toolbars are pinned properly. 816 */ 597 817 if ( window.pageYOffset && window.pageYOffset > pageYOffsetAtTop ) { 598 818 window.scrollTo( window.pageXOffset, 0 ); … … 607 827 } ); 608 828 609 // Adjust when collapsing the menu, changing the columns, changing the body class. 829 /* 830 * Adjust when collapsing the menu, changing the columns 831 * or changing the body class. 832 */ 610 833 $document.on( 'wp-collapse-menu.editor-expand postboxes-columnchange.editor-expand editor-classchange.editor-expand', adjust ) 611 834 .on( 'postbox-toggled.editor-expand postbox-moved.editor-expand', function() { … … 629 852 mceBind(); 630 853 631 // Adjust when entering /exiting fullscreen mode.854 // Adjust when enteringexiting fullscreen mode. 632 855 fullscreen && fullscreen.pubsub.subscribe( 'hidden', fullscreenHide ); 633 856 … … 650 873 } 651 874 875 876 877 878 879 880 881 652 882 function off() { 653 883 var height = parseInt( window.getUserSetting( 'ed_size', 300 ), 10 ); … … 659 889 } 660 890 661 // Scroll to the top when triggering this from JS. 662 // Ensures toolbars are reset properly. 891 /* 892 * Scroll to the top when triggering this from JS. 893 * Ensure the toolbars are reset properly. 894 */ 663 895 if ( window.pageYOffset && window.pageYOffset > pageYOffsetAtTop ) { 664 896 window.scrollTo( window.pageXOffset, 0 ); … … 672 904 mceUnbind(); 673 905 674 // Adjust when entering /exiting fullscreen mode.906 // Adjust when enteringexiting fullscreen mode. 675 907 fullscreen && fullscreen.pubsub.unsubscribe( 'hidden', fullscreenHide ); 676 908 … … 695 927 } 696 928 929 697 930 if ( height ) { 698 931 $textEditor.height( height ); … … 702 935 } 703 936 704 // Start on load 937 // Start on load 705 938 if ( $wrap.hasClass( 'wp-editor-expand' ) ) { 706 939 on(); 707 940 708 // Ideally we need to resize just after CSS has fully loaded and QuickTags is ready.941 // esize just after CSS has fully loaded and QuickTags is ready. 709 942 if ( $contentWrap.hasClass( 'html-active' ) ) { 710 943 initialResize( function() { … … 715 948 } 716 949 717 // Show the on/off checkbox 950 // Show the on/off checkbox 718 951 $( '#adv-settings .editor-expand' ).show(); 719 952 $( '#editor-expand-toggle' ).on( 'change.editor-expand', function() { … … 727 960 }); 728 961 729 // Expose on() and off() 962 // Expose on() and off() 730 963 window.editorExpand = { 731 964 on: on, … … 734 967 } ); 735 968 736 /* DFW. */ 969 /** 970 * @summary Handles the distraction free writing of TinyMCE. 971 * 972 * @since 4.1.0 973 * 974 * @returns {void} 975 */ 737 976 $( function() { 738 977 var $body = $( document.body ), … … 778 1017 } ); 779 1018 1019 1020 1021 1022 1023 1024 1025 780 1026 function recalcEditorRect() { 781 1027 editorRect = $editor.offset(); … … 784 1030 } 785 1031 1032 1033 1034 1035 1036 1037 1038 786 1039 function activate() { 787 1040 if ( ! _isActive ) { … … 793 1046 } 794 1047 1048 1049 1050 1051 1052 1053 1054 795 1055 function deactivate() { 796 1056 if ( _isActive ) { … … 804 1064 } 805 1065 1066 1067 1068 1069 1070 1071 1072 806 1073 function isActive() { 807 1074 return _isActive; 808 1075 } 809 1076 1077 1078 1079 1080 1081 1082 1083 810 1084 function on() { 811 1085 if ( ! _isOn && _isActive ) { … … 824 1098 } 825 1099 1100 1101 1102 1103 1104 1105 1106 826 1107 function off() { 827 1108 if ( _isOn ) { … … 840 1121 } 841 1122 1123 1124 1125 1126 1127 1128 1129 842 1130 function toggle() { 843 1131 if ( _isOn ) { … … 848 1136 } 849 1137 1138 1139 1140 1141 1142 1143 1144 850 1145 function isOn() { 851 1146 return _isOn; 852 1147 } 853 1148 1149 1150 1151 1152 1153 1154 1155 1156 1157 1158 1159 1160 1161 854 1162 function fadeOut( event ) { 855 1163 var isMac, … … 860 1168 } 861 1169 862 // fadeIn and returnon Escape and keyboard shortcut Alt+Shift+W and Ctrl+Opt+W.1170 // on Escape and keyboard shortcut Alt+Shift+W and Ctrl+Opt+W. 863 1171 if ( key === 27 || ( key === 87 && event.altKey && ( ( ! isMac && event.shiftKey ) || ( isMac && event.ctrlKey ) ) ) ) { 864 1172 fadeIn( event ); … … 866 1174 } 867 1175 1176 868 1177 if ( event && ( event.metaKey || ( event.ctrlKey && ! event.altKey ) || ( event.altKey && event.shiftKey ) || ( key && ( 869 1178 // Special keys ( tab, ctrl, alt, esc, arrow keys... ) … … 893 1202 894 1203 $overlay 895 // Always recalculate the editor area entering the overlay with the mouse.1204 // Always recalculate the editor area entering the overlay with the mouse. 896 1205 .on( 'mouseenter.focus', function() { 897 1206 recalcEditorRect(); … … 960 1269 y = ny; 961 1270 } ) 962 // When the overlay is touched, always fade in and cancel the event. 1271 1272 // When the overlay is touched, fade in and cancel the event. 963 1273 .on( 'touchstart.focus', function( event ) { 964 1274 event.preventDefault(); … … 980 1290 } 981 1291 1292 1293 1294 1295 1296 1297 1298 1299 1300 982 1301 function fadeIn( event ) { 983 1302 if ( faded ) { … … 1019 1338 } 1020 1339 1340 1341 1342 1343 1344 1345 1346 1021 1347 function maybeFadeIn() { 1022 1348 setTimeout( function() { … … 1034 1360 } 1035 1361 1362 1363 1364 1365 1366 1367 1368 1036 1369 function fadeOutAdminBar() { 1037 1370 if ( ! fadedAdminBar && faded ) { … … 1048 1381 } 1049 1382 1383 1384 1385 1386 1387 1388 1389 1050 1390 function fadeInAdminBar() { 1051 1391 if ( fadedAdminBar ) { … … 1056 1396 } 1057 1397 1398 1399 1400 1401 1402 1403 1404 1058 1405 function fadeOutSlug() { 1059 1406 if ( ! fadedSlug && faded && ! $slug.find( ':focus').length ) { … … 1066 1413 } 1067 1414 1415 1416 1417 1418 1419 1420 1421 1068 1422 function fadeInSlug() { 1069 1423 if ( fadedSlug ) { … … 1076 1430 } 1077 1431 1432 1433 1434 1435 1436 1437 1438 1439 1440 1441 1442 1078 1443 function toggleViaKeyboard( event ) { 1079 1444 if ( event.altKey && event.shiftKey && 87 === event.keyCode ) { … … 1086 1451 } 1087 1452 1453 1454 1455 1456 1457 1458 1459 1460 1461 1462 1088 1463 $document.on( 'tinymce-editor-setup.focus', function( event, editor ) { 1089 1464 editor.addButton( 'dfw', { … … 1117 1492 } ); 1118 1493 1494 1495 1496 1497 1498 1499 1500 1501 1502 1503 1119 1504 $document.on( 'tinymce-editor-init.focus', function( event, editor ) { 1120 1505 var mceBind, mceUnbind; … … 1152 1537 } 1153 1538 1539 1154 1540 $document.on( 'dfw-on.focus', mceBind ).on( 'dfw-off.focus', mceUnbind ); 1155 1541 1156 // Make sure the body focuses when clicking outside it.1542 // t. 1157 1543 editor.on( 'click', function( event ) { 1158 1544 if ( event.target === editor.getDoc().documentElement ) { … … 1163 1549 } ); 1164 1550 1551 1552 1553 1554 1555 1556 1557 1558 1559 1560 1165 1561 $document.on( 'quicktags-init', function( event, editor ) { 1166 1562 var $button; 1167 1563 1564 1168 1565 if ( editor.settings.buttons && ( ',' + editor.settings.buttons + ',' ).indexOf( ',dfw,' ) !== -1 ) { 1169 1566 $button = $( '#' + editor.name + '_dfw' );
Note: See TracChangeset
for help on using the changeset viewer.