Ticket #30619: 30619.2.patch
File 30619.2.patch, 25.5 KB (added by , 6 years ago) |
---|
-
src/wp-includes/css/editor.css
170 170 box-sizing: border-box; 171 171 margin-bottom: 8px; 172 172 position: absolute; 173 visibility: hidden;174 173 -moz-user-select: none; 175 174 -webkit-user-select: none; 176 175 -ms-user-select: none; … … 178 177 z-index: 100100; /* Same as the other TinyMCE "panels" */ 179 178 } 180 179 181 div.mce- wp-image-toolbar> div.mce-stack-layout {180 div.mce-inline-toolbar-grp > div.mce-stack-layout { 182 181 padding: 1px; 183 182 } 184 183 … … 262 261 overflow-x: auto; 263 262 } 264 263 265 div.mce-inline-toolbar-grp-active {266 visibility: visible;267 }268 269 264 div.mce-toolbar-grp > div { 270 265 padding: 3px; 271 266 } -
src/wp-includes/js/mce-view.js
400 400 '<div class="wpview-wrap" data-wpview-text="' + this.encodedText + '" data-wpview-type="' + this.type + '">' + 401 401 '<p class="wpview-selection-before">\u00a0</p>' + 402 402 '<div class="wpview-body" contenteditable="false">' + 403 '<div class="toolbar mce-arrow-down">' +404 ( this.edit ? '<div class="dashicons dashicons-edit edit"></div>' : '' ) +405 '<div class="dashicons dashicons-no remove"></div>' +406 '</div>' +407 403 '<div class="wpview-content wpview-type-' + this.type + '"></div>' + 408 404 '</div>' + 409 405 '<p class="wpview-selection-after">\u00a0</p>' + -
src/wp-includes/js/tinymce/plugins/wordpress/plugin.js
4 4 tinymce.ui.FloatPanel.zIndex = 100100; 5 5 6 6 tinymce.PluginManager.add( 'wordpress', function( editor ) { 7 var DOM = tinymce.DOM, wpAdvButton, modKey, style, 7 var DOM = tinymce.DOM, 8 each = tinymce.each, 9 Factory = tinymce.ui.Factory, 10 settings = editor.settings, 11 wpAdvButton, modKey, style, 12 currentToolbar, currentSelection, 8 13 last = 0; 9 14 10 15 if ( typeof window.jQuery !== 'undefined' ) { … … 507 512 DOM.hide( DOM.select( '#wp_editbtns, #wp_gallerybtns' ) ); 508 513 } 509 514 515 function _createToolbar( buttons ) { 516 var toolbar, 517 toolbarItems = [], 518 buttonGroup; 519 520 each( buttons, function( item ) { 521 var itemName; 522 523 function bindSelectorChanged() { 524 var selection = editor.selection; 525 526 if ( itemName === 'bullist' ) { 527 selection.selectorChanged( 'ul > li', function( state, args ) { 528 var i = args.parents.length, 529 nodeName; 530 531 while ( i-- ) { 532 nodeName = args.parents[ i ].nodeName; 533 534 if ( nodeName === 'OL' || nodeName == 'UL' ) { 535 break; 536 } 537 } 538 539 item.active( state && nodeName === 'UL' ); 540 } ); 541 } 542 543 if ( itemName === 'numlist' ) { 544 selection.selectorChanged( 'ol > li', function( state, args ) { 545 var i = args.parents.length, 546 nodeName; 547 548 while ( i-- ) { 549 nodeName = args.parents[ i ].nodeName; 550 551 if ( nodeName === 'OL' || nodeName === 'UL' ) { 552 break; 553 } 554 } 555 556 item.active( state && nodeName === 'OL' ); 557 } ); 558 } 559 560 if ( item.settings.stateSelector ) { 561 selection.selectorChanged( item.settings.stateSelector, function( state ) { 562 item.active( state ); 563 }, true ); 564 } 565 566 if ( item.settings.disabledStateSelector ) { 567 selection.selectorChanged( item.settings.disabledStateSelector, function( state ) { 568 item.disabled( state ); 569 } ); 570 } 571 } 572 573 if ( item === '|' ) { 574 buttonGroup = null; 575 } else { 576 if ( Factory.has( item ) ) { 577 item = { 578 type: item 579 }; 580 581 if ( settings.toolbar_items_size ) { 582 item.size = settings.toolbar_items_size; 583 } 584 585 toolbarItems.push( item ); 586 587 buttonGroup = null; 588 } else { 589 if ( ! buttonGroup ) { 590 buttonGroup = { 591 type: 'buttongroup', 592 items: [] 593 }; 594 595 toolbarItems.push( buttonGroup ); 596 } 597 598 if ( editor.buttons[ item ] ) { 599 itemName = item; 600 item = editor.buttons[ itemName ]; 601 602 if ( typeof item === 'function' ) { 603 item = item(); 604 } 605 606 item.type = item.type || 'button'; 607 608 if ( settings.toolbar_items_size ) { 609 item.size = settings.toolbar_items_size; 610 } 611 612 item = Factory.create( item ); 613 614 buttonGroup.items.push( item ); 615 616 if ( editor.initialized ) { 617 bindSelectorChanged(); 618 } else { 619 editor.on( 'init', bindSelectorChanged ); 620 } 621 } 622 } 623 } 624 } ); 625 626 toolbar = Factory.create( { 627 type: 'panel', 628 layout: 'stack', 629 classes: 'toolbar-grp inline-toolbar-grp', 630 ariaRoot: true, 631 ariaRemember: true, 632 items: [ { 633 type: 'toolbar', 634 layout: 'flow', 635 items: toolbarItems 636 } ] 637 } ); 638 639 function hide() { 640 toolbar.hide(); 641 } 642 643 function reposition() { 644 var top, left, minTop, className, 645 windowPos, adminbar, mceToolbar, boundary, 646 boundaryMiddle, boundaryVerticalMiddle, spaceTop, 647 spaceBottom, windowWidth, toolbarWidth, toolbarHalf, 648 iframe, iframePos, iframeWidth, iframeHeigth, 649 toolbarNodeHeight, verticalSpaceNeeded, 650 toolbarNode = this.getEl(), 651 buffer = 5, 652 margin = 8, 653 adminbarHeight = 0; 654 655 windowPos = window.pageYOffset || document.documentElement.scrollTop; 656 adminbar = tinymce.$( '#wpadminbar' )[0]; 657 mceToolbar = tinymce.$( '.mce-toolbar-grp', editor.getContainer() )[0]; 658 boundary = currentSelection.getBoundingClientRect(); 659 boundaryMiddle = ( boundary.left + boundary.right ) / 2; 660 boundaryVerticalMiddle = ( boundary.top + boundary.bottom ) / 2; 661 spaceTop = boundary.top; 662 spaceBottom = iframeHeigth - boundary.bottom; 663 windowWidth = window.innerWidth; 664 toolbarWidth = toolbarNode.offsetWidth; 665 toolbarHalf = toolbarWidth / 2; 666 iframe = document.getElementById( editor.id + '_ifr' ); 667 iframePos = DOM.getPos( iframe ); 668 iframeWidth = iframe.offsetWidth; 669 iframeHeigth = iframe.offsetHeight; 670 toolbarNodeHeight = toolbarNode.offsetHeight; 671 verticalSpaceNeeded = toolbarNodeHeight + margin + buffer; 672 673 if ( spaceTop >= verticalSpaceNeeded ) { 674 className = ' mce-arrow-down'; 675 top = boundary.top + iframePos.y - toolbarNodeHeight - margin; 676 } else if ( spaceBottom >= verticalSpaceNeeded ) { 677 className = ' mce-arrow-up'; 678 top = boundary.bottom + iframePos.y; 679 } else { 680 top = buffer; 681 682 if ( boundaryVerticalMiddle >= verticalSpaceNeeded ) { 683 className = ' mce-arrow-down'; 684 } else { 685 className = ' mce-arrow-up'; 686 } 687 } 688 689 // Make sure the image toolbar is below the main toolbar. 690 if ( mceToolbar ) { 691 minTop = DOM.getPos( mceToolbar ).y + mceToolbar.clientHeight; 692 } else { 693 minTop = iframePos.y; 694 } 695 696 // Make sure the image toolbar is below the adminbar (if visible) or below the top of the window. 697 if ( windowPos ) { 698 if ( adminbar && adminbar.getBoundingClientRect().top === 0 ) { 699 adminbarHeight = adminbar.clientHeight; 700 } 701 702 if ( windowPos + adminbarHeight > minTop ) { 703 minTop = windowPos + adminbarHeight; 704 } 705 } 706 707 if ( top && minTop && ( minTop + buffer > top ) ) { 708 top = minTop + buffer; 709 className = ''; 710 } 711 712 left = boundaryMiddle - toolbarHalf; 713 left += iframePos.x; 714 715 if ( boundary.left < 0 || boundary.right > iframeWidth ) { 716 left = iframePos.x + ( iframeWidth - toolbarWidth ) / 2; 717 } else if ( toolbarWidth >= windowWidth ) { 718 className += ' mce-arrow-full'; 719 left = 0; 720 } else if ( ( left < 0 && boundary.left + toolbarWidth > windowWidth ) || 721 ( left + toolbarWidth > windowWidth && boundary.right - toolbarWidth < 0 ) ) { 722 723 left = ( windowWidth - toolbarWidth ) / 2; 724 } else if ( left < iframePos.x ) { 725 className += ' mce-arrow-left'; 726 left = boundary.left + iframePos.x; 727 } else if ( left + toolbarWidth > iframeWidth + iframePos.x ) { 728 className += ' mce-arrow-right'; 729 left = boundary.right - toolbarWidth + iframePos.x; 730 } 731 732 toolbarNode.className = toolbarNode.className.replace( / ?mce-arrow-[\w]+/g, '' ); 733 toolbarNode.className += className; 734 735 DOM.setStyles( toolbarNode, { 'left': left, 'top': top } ); 736 737 return this; 738 } 739 740 toolbar.on( 'show', function() { 741 currentToolbar = this; 742 this.reposition(); 743 } ); 744 745 toolbar.on( 'hide', function() { 746 currentToolbar = false; 747 } ); 748 749 toolbar.on( 'keydown', function( event ) { 750 if ( event.keyCode === 27 ) { 751 this.hide(); 752 editor.focus(); 753 } 754 } ); 755 756 toolbar.on( 'remove', function() { 757 DOM.unbind( window, 'resize scroll', hide ); 758 editor.dom.unbind( editor.getWin(), 'resize scroll', hide ); 759 editor.off( 'blur hide', hide ); 760 } ); 761 762 editor.once( 'init', function() { 763 DOM.bind( window, 'resize scroll', hide ); 764 editor.dom.bind( editor.getWin(), 'resize scroll', hide ); 765 editor.on( 'blur hide', hide ); 766 } ); 767 768 toolbar.reposition = reposition; 769 toolbar.hide().renderTo( document.body ); 770 771 return toolbar; 772 } 773 774 editor.shortcuts.add( 'alt+119', '', function() { 775 var node; 776 777 if ( currentToolbar ) { 778 node = currentToolbar.find( 'toolbar' )[0]; 779 node && node.focus( true ); 780 } 781 } ); 782 783 editor.on( 'nodechange', function( event ) { 784 var collapsed = editor.selection.isCollapsed(); 785 786 var args = { 787 element: event.element, 788 parents: event.parents, 789 collapsed: collapsed 790 }; 791 792 editor.fire( 'wptoolbar', args ); 793 794 currentSelection = args.selection || args.element; 795 796 currentToolbar && currentToolbar.hide(); 797 args.toolbar && args.toolbar.show(); 798 } ); 799 510 800 // Expose some functions (back-compat) 511 801 return { 512 802 _showButtons: _showButtons, 513 803 _hideButtons: _hideButtons, 514 804 _setEmbed: _setEmbed, 515 _getEmbed: _getEmbed 805 _getEmbed: _getEmbed, 806 _createToolbar: _createToolbar 516 807 }; 517 808 }); -
src/wp-includes/js/tinymce/plugins/wpeditimage/plugin.js
1 1 /* global tinymce */ 2 2 tinymce.PluginManager.add( 'wpeditimage', function( editor ) { 3 3 var floatingToolbar, serializer, 4 DOM = tinymce.DOM,5 settings = editor.settings,6 Factory = tinymce.ui.Factory,7 4 each = tinymce.each, 8 iOS = tinymce.Env.iOS, 9 toolbarIsHidden = true, 10 editorWrapParent = tinymce.$( '#postdivrich' ); 5 iOS = tinymce.Env.iOS; 11 6 12 7 function isPlaceholder( node ) { 13 8 return !! ( editor.dom.getAttrib( node, 'data-mce-placeholder' ) || editor.dom.getAttrib( node, 'data-mce-object' ) ); … … 64 59 } ); 65 60 } ); 66 61 67 function toolbarConfig() { 68 var toolbarItems = [], 69 buttonGroup; 70 71 each( [ 'wp_img_alignleft', 'wp_img_aligncenter', 'wp_img_alignright', 'wp_img_alignnone', 'wp_img_edit', 'wp_img_remove' ], function( item ) { 72 var itemName; 73 74 function bindSelectorChanged() { 75 var selection = editor.selection; 76 77 if ( item.settings.stateSelector ) { 78 selection.selectorChanged( item.settings.stateSelector, function( state ) { 79 item.active( state ); 80 }, true ); 81 } 82 83 if ( item.settings.disabledStateSelector ) { 84 selection.selectorChanged( item.settings.disabledStateSelector, function( state ) { 85 item.disabled( state ); 86 } ); 87 } 88 } 89 90 if ( item === '|' ) { 91 buttonGroup = null; 92 } else { 93 if ( Factory.has( item ) ) { 94 item = { 95 type: item 96 }; 97 98 if ( settings.toolbar_items_size ) { 99 item.size = settings.toolbar_items_size; 100 } 101 102 toolbarItems.push( item ); 103 104 buttonGroup = null; 105 } else { 106 if ( ! buttonGroup ) { 107 buttonGroup = { 108 type: 'buttongroup', 109 items: [] 110 }; 111 112 toolbarItems.push( buttonGroup ); 113 } 114 115 if ( editor.buttons[ item ] ) { 116 itemName = item; 117 item = editor.buttons[ itemName ]; 118 119 if ( typeof item === 'function' ) { 120 item = item(); 121 } 122 123 item.type = item.type || 'button'; 124 125 if ( settings.toolbar_items_size ) { 126 item.size = settings.toolbar_items_size; 127 } 128 129 item = Factory.create( item ); 130 buttonGroup.items.push( item ); 131 132 if ( editor.initialized ) { 133 bindSelectorChanged(); 134 } else { 135 editor.on( 'init', bindSelectorChanged ); 136 } 137 } 138 } 139 } 140 } ); 141 142 return { 143 type: 'panel', 144 layout: 'stack', 145 classes: 'toolbar-grp inline-toolbar-grp wp-image-toolbar', 146 ariaRoot: true, 147 ariaRemember: true, 148 items: [ 149 { 150 type: 'toolbar', 151 layout: 'flow', 152 items: toolbarItems 153 } 154 ] 155 }; 156 } 157 158 floatingToolbar = Factory.create( toolbarConfig() ).renderTo( document.body ).hide(); 159 160 floatingToolbar.reposition = function() { 161 var top, left, minTop, className, 162 windowPos, adminbar, mceToolbar, boundary, 163 boundaryMiddle, boundaryVerticalMiddle, spaceTop, 164 spaceBottom, windowWidth, toolbarWidth, toolbarHalf, 165 iframe, iframePos, iframeWidth, iframeHeigth, 166 toolbarNodeHeight, verticalSpaceNeeded, 167 toolbarNode = this.getEl(), 168 buffer = 5, 169 margin = 8, 170 adminbarHeight = 0, 171 imageNode = editor.selection.getNode(); 172 173 if ( ! imageNode || imageNode.nodeName !== 'IMG' ) { 174 return this; 175 } 176 177 windowPos = window.pageYOffset || document.documentElement.scrollTop; 178 adminbar = tinymce.$( '#wpadminbar' )[0]; 179 mceToolbar = tinymce.$( '.mce-toolbar-grp', editor.getContainer() )[0]; 180 boundary = imageNode.getBoundingClientRect(); 181 boundaryMiddle = ( boundary.left + boundary.right ) / 2; 182 boundaryVerticalMiddle = ( boundary.top + boundary.bottom ) / 2; 183 spaceTop = boundary.top; 184 spaceBottom = iframeHeigth - boundary.bottom; 185 windowWidth = window.innerWidth; 186 toolbarWidth = toolbarNode.offsetWidth; 187 toolbarHalf = toolbarWidth / 2; 188 iframe = document.getElementById( editor.id + '_ifr' ); 189 iframePos = DOM.getPos( iframe ); 190 iframeWidth = iframe.offsetWidth; 191 iframeHeigth = iframe.offsetHeight; 192 toolbarNodeHeight = toolbarNode.offsetHeight; 193 verticalSpaceNeeded = toolbarNodeHeight + margin + buffer; 194 195 if ( iOS ) { 196 top = boundary.top + iframePos.y + margin; 197 } else { 198 if ( spaceTop >= verticalSpaceNeeded ) { 199 className = ' mce-arrow-down'; 200 top = boundary.top + iframePos.y - toolbarNodeHeight - margin; 201 } else if ( spaceBottom >= verticalSpaceNeeded ) { 202 className = ' mce-arrow-up'; 203 top = boundary.bottom + iframePos.y; 204 } else { 205 top = buffer; 206 207 if ( boundaryVerticalMiddle >= verticalSpaceNeeded ) { 208 className = ' mce-arrow-down'; 209 } else { 210 className = ' mce-arrow-up'; 211 } 212 } 213 } 214 215 // Make sure the image toolbar is below the main toolbar. 216 if ( mceToolbar ) { 217 minTop = DOM.getPos( mceToolbar ).y + mceToolbar.clientHeight; 218 } else { 219 minTop = iframePos.y; 220 } 221 222 // Make sure the image toolbar is below the adminbar (if visible) or below the top of the window. 223 if ( windowPos ) { 224 if ( adminbar && adminbar.getBoundingClientRect().top === 0 ) { 225 adminbarHeight = adminbar.clientHeight; 226 } 227 228 if ( windowPos + adminbarHeight > minTop ) { 229 minTop = windowPos + adminbarHeight; 230 } 231 } 232 233 if ( top && minTop && ( minTop + buffer > top ) ) { 234 top = minTop + buffer; 235 className = ''; 236 } 237 238 left = boundaryMiddle - toolbarHalf; 239 left += iframePos.x; 240 241 if ( boundary.left < 0 || boundary.right > iframeWidth ) { 242 left = iframePos.x + ( iframeWidth - toolbarWidth ) / 2; 243 } else if ( toolbarWidth >= windowWidth ) { 244 className += ' mce-arrow-full'; 245 left = 0; 246 } else if ( ( left < 0 && boundary.left + toolbarWidth > windowWidth ) || 247 ( left + toolbarWidth > windowWidth && boundary.right - toolbarWidth < 0 ) ) { 248 249 left = ( windowWidth - toolbarWidth ) / 2; 250 } else if ( left < iframePos.x ) { 251 className += ' mce-arrow-left'; 252 left = boundary.left + iframePos.x; 253 } else if ( left + toolbarWidth > iframeWidth + iframePos.x ) { 254 className += ' mce-arrow-right'; 255 left = boundary.right - toolbarWidth + iframePos.x; 256 } 257 258 if ( ! iOS ) { 259 toolbarNode.className = toolbarNode.className.replace( / ?mce-arrow-[\w]+/g, '' ); 260 toolbarNode.className += className; 62 floatingToolbar = editor.plugins.wordpress._createToolbar( [ 63 'wp_img_alignleft', 64 'wp_img_aligncenter', 65 'wp_img_alignright', 66 'wp_img_alignnone', 67 'wp_img_edit', 68 'wp_img_remove' 69 ] ); 70 71 editor.on( 'wptoolbar', function( event ) { 72 if ( event.element.nodeName === 'IMG' && ! isPlaceholder( event.element ) ) { 73 event.toolbar = floatingToolbar; 261 74 } 75 } ); 262 76 263 DOM.setStyles( toolbarNode, { 'left': left, 'top': top } ); 264 265 return this; 266 }; 267 77 // Safari on iOS fails to select image nodes in contentEditoble mode on touch/click. 78 // Select them again. 268 79 if ( iOS ) { 269 // Safari on iOS fails to select image nodes in contentEditoble mode on touch/click.270 // Select them again.271 80 editor.on( 'click', function( event ) { 272 81 if ( event.target.nodeName === 'IMG' ) { 273 82 var node = event.target; 274 83 275 84 window.setTimeout( function() { 276 85 editor.selection.select( node ); 86 editor.nodeChanged(); 277 87 }, 200 ); 278 88 } else { 279 89 floatingToolbar.hide(); 280 90 } 281 }); 282 } 283 284 editor.on( 'nodechange', function( event ) { 285 var delay = iOS ? 350 : 100; 286 287 if ( event.element.nodeName !== 'IMG' || isPlaceholder( event.element ) ) { 288 floatingToolbar.hide(); 289 return; 290 } 291 292 setTimeout( function() { 293 var element = editor.selection.getNode(); 294 295 if ( element.nodeName === 'IMG' && ! isPlaceholder( element ) ) { 296 if ( floatingToolbar._visible ) { 297 floatingToolbar.reposition(); 298 } else { 299 floatingToolbar.show(); 300 } 301 } else { 302 floatingToolbar.hide(); 303 } 304 }, delay ); 305 } ); 306 307 function hide() { 308 if ( ! toolbarIsHidden ) { 309 floatingToolbar.hide(); 310 } 91 } ); 311 92 } 312 93 313 floatingToolbar.on( 'show', function() {314 toolbarIsHidden = false;315 316 if ( this._visible ) {317 this.reposition();318 DOM.addClass( this.getEl(), 'mce-inline-toolbar-grp-active' );319 }320 } );321 322 floatingToolbar.on( 'hide', function() {323 toolbarIsHidden = true;324 DOM.removeClass( this.getEl(), 'mce-inline-toolbar-grp-active' );325 } );326 327 floatingToolbar.on( 'keydown', function( event ) {328 if ( event.keyCode === 27 ) {329 hide();330 editor.focus();331 }332 } );333 334 DOM.bind( window, 'resize scroll', function() {335 if ( ! toolbarIsHidden && editorWrapParent.hasClass( 'wp-editor-expand' ) ) {336 hide();337 }338 });339 340 editor.on( 'init', function() {341 editor.dom.bind( editor.getWin(), 'scroll', hide );342 });343 344 editor.on( 'blur hide', hide );345 346 // 119 = F8347 editor.shortcuts.add( 'Alt+119', '', function() {348 var node = floatingToolbar.find( 'toolbar' )[0];349 350 if ( node ) {351 node.focus( true );352 }353 });354 355 94 function parseShortcode( content ) { 356 95 return content.replace( /(?:<p>)?\[(?:wp_)?caption([^\]]+)\]([\s\S]+?)\[\/(?:wp_)?caption\](?:<\/p>)?/g, function( a, b, c ) { 357 96 var id, align, classes, caption, img, width, -
src/wp-includes/js/tinymce/plugins/wpview/plugin.js
12 12 firstFocus = true, 13 13 _noop = function() { return false; }, 14 14 isios = /iPad|iPod|iPhone/.test( navigator.userAgent ), 15 cursorInterval, lastKeyDownNode, setViewCursorTries, focus, execCommandView, execCommandBefore; 15 cursorInterval, 16 lastKeyDownNode, 17 setViewCursorTries, 18 focus, 19 execCommandView, 20 execCommandBefore, 21 toolbar; 16 22 17 23 function getView( node ) { 18 24 return getParent( node, 'wpview-wrap' ); … … 88 94 89 95 // Adjust the toolbar position and bail if node is already selected. 90 96 if ( viewNode === selected ) { 91 adjustToolbarPosition( viewNode );92 97 return; 93 98 } 94 99 … … 100 105 deselect(); 101 106 selected = viewNode; 102 107 dom.setAttrib( viewNode, 'data-mce-selected', 1 ); 103 adjustToolbarPosition( viewNode );104 108 105 109 clipboard = dom.create( 'div', { 106 110 'class': 'wpview-clipboard', … … 124 128 editor.fire( 'wpview-selected', viewNode ); 125 129 } 126 130 127 function adjustToolbarPosition( viewNode ) {128 var delta = 0,129 toolbar = editor.$( viewNode ).find( '.toolbar' ),130 editorToolbar = tinymce.$( editor.editorContainer ).find( '.mce-toolbar-grp' )[0],131 editorToolbarBottom = ( editorToolbar && editorToolbar.getBoundingClientRect().bottom ) || 0;132 133 if ( toolbar.length && editor.iframeElement ) {134 // 48 = 43 for the toolbar + 5 buffer135 delta = viewNode.getBoundingClientRect().top + editor.iframeElement.getBoundingClientRect().top - editorToolbarBottom - 48;136 }137 138 if ( delta < 0 ) {139 toolbar.removeClass( 'mce-arrow-down' ).css({ top: ( -43 + delta * -1 ) });140 } else if ( delta > 0 && ! toolbar.hasClass( 'mce-arrow-down' ) ) {141 toolbar.addClass( 'mce-arrow-down' ).css({ top: '' });142 }143 }144 145 131 /** 146 132 * Deselect a selected view and remove clipboard 147 133 */ … … 298 284 event.stopImmediatePropagation(); 299 285 event.preventDefault(); 300 286 301 if ( ( event.type === 'touchend' || event.type === 'mousedown' ) && ! event.metaKey && ! event.ctrlKey ) {302 if ( editor.dom.hasClass( event.target, 'edit' ) ) {303 304 // In IE need to transfer focus from the non-editable view back to the editor.305 if ( Env.ie ) {306 editor.focus();307 }308 309 wp.mce.views.edit( editor, view );310 return false;311 } else if ( editor.dom.hasClass( event.target, 'remove' ) ) {312 removeView( view );313 return false;314 }315 }316 317 287 if ( event.type === 'touchend' && scrolled ) { 318 288 scrolled = false; 319 289 } else { … … 685 655 } 686 656 }); 687 657 658 editor.addButton( 'wp_view_edit', { 659 tooltip: 'Edit ', // trailing space is needed, used for context 660 icon: 'dashicon dashicons-edit', 661 onclick: function() { 662 wp.mce.views.edit( editor, getView( editor.selection.getNode() ) ); 663 } 664 } ); 665 666 editor.addButton( 'wp_view_remove', { 667 tooltip: 'Remove', 668 icon: 'dashicon dashicons-no', 669 onclick: function() { 670 removeView( getView( editor.selection.getNode() ) ); 671 } 672 } ); 673 674 toolbar = editor.plugins.wordpress._createToolbar( [ 675 'wp_view_edit', 676 'wp_view_remove' 677 ] ); 678 679 editor.on( 'wptoolbar', function( event ) { 680 if ( editor.dom.hasClass( event.element, 'wpview-clipboard' ) ) { 681 event.element = getView( event.element ); 682 event.toolbar = toolbar; 683 } 684 } ); 685 688 686 return { 689 687 getView: getView 690 688 }; -
src/wp-includes/js/tinymce/skins/wordpress/wp-content.css
319 319 display: none; 320 320 } 321 321 322 .wpview-wrap .toolbar {323 position: absolute;324 top: -43px;325 left: 45%;326 left: calc(50% - 32px);327 display: none;328 z-index: 100;329 background-color: #f5f5f5;330 border: 1px solid #aaa;331 padding: 1px;332 cursor: default;333 -webkit-border-radius: 2px;334 border-radius: 2px;335 -webkit-box-shadow: 0 1px 4px rgba( 0, 0, 0, 0.2 );336 box-shadow: 0 1px 4px rgba( 0, 0, 0, 0.2 );337 -webkit-box-sizing: border-box;338 -moz-box-sizing: border-box;339 box-sizing: border-box;340 margin-bottom: 8px;341 }342 343 .wpview-wrap[data-mce-selected] .toolbar {344 display: block;345 }346 347 .wpview-wrap .toolbar:before,348 .wpview-wrap .toolbar:after {349 position: absolute;350 left: 50%;351 display: block;352 width: 0;353 height: 0;354 border-style: solid;355 border-color: transparent;356 border-width: 9px;357 margin-left: -9px;358 content: '';359 }360 361 .wpview-wrap .toolbar:after {362 border-width: 8px;363 margin-left: -8px;364 }365 366 .wpview-wrap .toolbar.mce-arrow-down:before {367 bottom: -18px;368 border-top-color: #aaa;369 }370 371 .wpview-wrap .toolbar.mce-arrow-down:after {372 bottom: -16px;373 border-top-color: #f5f5f5;374 }375 376 .wpview-wrap .toolbar.mce-arrow-up:before {377 top: -18px;378 border-bottom-color: #aaa;379 }380 381 .wpview-wrap .toolbar.mce-arrow-up:after {382 top: -16px;383 border-bottom-color: #f5f5f5;384 }385 386 .wpview-wrap .toolbar div {387 margin: 2px;388 padding: 2px 3px;389 width: 20px;390 height: 20px;391 color: #777;392 cursor: pointer;393 font-size: 20px;394 border: 1px solid transparent;395 border-radius: 2px;396 }397 398 .wpview-wrap .toolbar div:hover {399 background-color: #fafafa;400 border-color: #999;401 color: #222;402 -webkit-box-shadow: inset 0 1px 0 #fff, 0 1px 0 rgba( 0, 0, 0, 0.08 );403 box-shadow: inset 0 1px 0 #fff, 0 1px 0 rgba( 0, 0, 0, 0.08 );404 outline: none;405 }406 407 322 .wpview-wrap .loading-placeholder { 408 323 border: 1px dashed #ccc; 409 324 padding: 10px; … … 455 370 background: transparent; 456 371 } 457 372 458 .ie8 .wpview-wrap .toolbar div,459 .ie7 .wpview-wrap .toolbar div {460 display: inline;461 padding: 4px;462 }463 464 .ie8 .dashicons-edit,465 .ie7 .dashicons-edit {466 background-image: url(images/dashicon-edit.png);467 }468 469 .ie8 .dashicons-no,470 .ie7 .dashicons-no {471 background-image: url(images/dashicon-no.png);472 }473 474 373 .wpview-error { 475 374 border: 1px solid #dedede; 476 375 padding: 1em 0; … … 497 396 font-family: 'Open Sans', sans-serif; 498 397 } 499 398 500 .wont-play {501 padding: 4px 0;502 }503 504 .wont-play p {505 font-size: 13px;506 line-height: 1.3;507 display: block;508 width: 70%;509 margin: 0 15%;510 text-align: center;511 }512 513 399 .wpview-type-gallery:after { 514 400 content: ''; 515 401 display: table; … … 536 422 margin: auto; 537 423 } 538 424 539 540 425 .gallery .gallery-item { 541 426 float: left; 542 427 margin: 0;