Ticket #32604: 32604.2.patch

src/wp-includes/js/tinymce/plugins/wordpress/plugin.js

@@ -447 +447 @@
                 var Factory = tinymce.ui.Factory,
                         settings = editor.settings,
                         currentToolbar,
-                        currentSelection;
+                        currentSelection,
+                        wpAdminbar = document.getElementById( 'wpadminbar' ),
+                        wpStatusbar = document.getElementById( 'post-status-info' ),
+                        mceIframe, mceToolbar, mceStatusbar;
+
+                editor.on( 'init', function() {
+                        mceIframe = document.getElementById( editor.id + '_ifr' );
+                        mceToolbar = tinymce.$( '.mce-toolbar-grp', editor.getContainer() )[0];
+                        mceStatusbar = tinymce.$( '.mce-statusbar', editor.getContainer() )[0];
+                } );
 
                 function create( buttons ) {
                         var toolbar,
@@ -578 +587 @@
                         }
 
                         function reposition() {
-                                var top, left, minTop, className,
-                                        windowPos, adminbar, mceToolbar, boundary,
-                                        boundaryMiddle, boundaryVerticalMiddle, spaceTop,
-                                        spaceBottom, windowWidth, toolbarWidth, toolbarHalf,
-                                        iframe, iframePos, iframeWidth, iframeHeigth,
-                                        toolbarNodeHeight, verticalSpaceNeeded,
-                                        toolbarNode = this.getEl(),
+                                var pageYOffset = window.pageYOffset || document.documentElement.scrollTop,
+                                        windowWidth = window.innerWidth,
+                                        windowHeight = window.innerHeight,
+                                        iframePos = DOM.getPos( mceIframe ),
+                                        iframeWidth = mceIframe.offsetWidth,
+                                        toolbar = this.getEl(),
+                                        toolbarWidth = toolbar.offsetWidth,
+                                        toolbarHeight = toolbar.offsetHeight,
+                                        selection = currentSelection.getBoundingClientRect(),
+                                        selectionMiddle = ( selection.left + selection.right ) / 2,
                                         buffer = 5,
                                         margin = 8,
-                                        adminbarHeight = 0;
-
-                                if ( ! currentSelection ) {
-                                        return;
-                                }
+                                        spaceNeeded = toolbarHeight + margin + buffer,
+                                        wpAdminbarBottom = wpAdminbar ? wpAdminbar.getBoundingClientRect().bottom : 0,
+                                        mceToolbarBottom = mceToolbar ? mceToolbar.getBoundingClientRect().bottom : 0,
+                                        mceStatusbarTop = mceStatusbar ? mceStatusbar.getBoundingClientRect().top : 0,
+                                        wpStatusbarTop = wpStatusbar ? wpStatusbar.getBoundingClientRect().top : 0,
+                                        blockedTop = Math.max( 0, wpAdminbarBottom, mceToolbarBottom ),
+                                        blockedBottom = Math.max( 0, windowHeight - mceStatusbarTop, windowHeight - wpStatusbarTop ),
+                                        spaceTop = selection.top + iframePos.y - pageYOffset - blockedTop,
+                                        spaceBottom = pageYOffset + windowHeight - iframePos.y - selection.bottom - blockedBottom,
+                                        editorHeight = windowHeight - blockedTop - blockedBottom,
+                                        className = '',
+                                        top, left;
 
-                                windowPos = window.pageYOffset || document.documentElement.scrollTop;
-                                adminbar = tinymce.$( '#wpadminbar' )[0];
-                                mceToolbar = tinymce.$( '.mce-toolbar-grp', editor.getContainer() )[0];
-                                boundary = currentSelection.getBoundingClientRect();
-                                boundaryMiddle = ( boundary.left + boundary.right ) / 2;
-                                boundaryVerticalMiddle = ( boundary.top + boundary.bottom ) / 2;
-                                spaceTop = boundary.top;
-                                spaceBottom = iframeHeigth - boundary.bottom;
-                                windowWidth = window.innerWidth;
-                                toolbarWidth = toolbarNode.offsetWidth;
-                                toolbarHalf = toolbarWidth / 2;
-                                iframe = document.getElementById( editor.id + '_ifr' );
-                                iframePos = DOM.getPos( iframe );
-                                iframeWidth = iframe.offsetWidth;
-                                iframeHeigth = iframe.offsetHeight;
-                                toolbarNodeHeight = toolbarNode.offsetHeight;
-                                verticalSpaceNeeded = toolbarNodeHeight + margin + buffer;
-
-                                if ( spaceTop >= verticalSpaceNeeded ) {
+                                if ( spaceTop >= spaceNeeded ) {
                                         className = ' mce-arrow-down';
-                                        top = boundary.top + iframePos.y - toolbarNodeHeight - margin;
-                                } else if ( spaceBottom >= verticalSpaceNeeded ) {
+                                        top = selection.top + iframePos.y - toolbarHeight - margin;
+                                } else if ( spaceBottom >= spaceNeeded && editorHeight / 2 > selection.bottom + iframePos.y - pageYOffset - blockedTop ) {
                                         className = ' mce-arrow-up';
-                                        top = boundary.bottom + iframePos.y;
-                                } else {
-                                        top = buffer;
-
-                                        if ( boundaryVerticalMiddle >= verticalSpaceNeeded ) {
-                                                className = ' mce-arrow-down';
-                                        } else {
-                                                className = ' mce-arrow-up';
-                                        }
+                                        top = selection.bottom + iframePos.y;
                                 }
 
-                                // Make sure the image toolbar is below the main toolbar.
-                                if ( mceToolbar ) {
-                                        minTop = DOM.getPos( mceToolbar ).y + mceToolbar.clientHeight;
-                                } else {
-                                        minTop = iframePos.y;
+                                if ( ! top ) {
+                                        top = pageYOffset + blockedTop + buffer;
                                 }
 
-                                // Make sure the image toolbar is below the adminbar (if visible) or below the top of the window.
-                                if ( windowPos ) {
-                                        if ( adminbar && adminbar.getBoundingClientRect().top === 0 ) {
-                                                adminbarHeight = adminbar.clientHeight;
-                                        }
-
-                                        if ( windowPos + adminbarHeight > minTop ) {
-                                                minTop = windowPos + adminbarHeight;
-                                        }
-                                }
+                                left = selectionMiddle - toolbarWidth / 2 + iframePos.x;
 
-                                if ( top && minTop && ( minTop + buffer > top ) ) {
-                                        top = minTop + buffer;
-                                        className = '';
-                                }
-
-                                left = boundaryMiddle - toolbarHalf;
-                                left += iframePos.x;
-
-                                if ( boundary.left < 0 || boundary.right > iframeWidth ) {
+                                if ( selection.left < 0 || selection.right > iframeWidth ) {
                                         left = iframePos.x + ( iframeWidth - toolbarWidth ) / 2;
                                 } else if ( toolbarWidth >= windowWidth ) {
                                         className += ' mce-arrow-full';
                                         left = 0;
-                                } else if ( ( left < 0 && boundary.left + toolbarWidth > windowWidth ) ||
-                                        ( left + toolbarWidth > windowWidth && boundary.right - toolbarWidth < 0 ) ) {
-
+                                } else if ( ( left < 0 && selection.left + toolbarWidth > windowWidth ) || ( left + toolbarWidth > windowWidth && selection.right - toolbarWidth < 0 ) ) {
                                         left = ( windowWidth - toolbarWidth ) / 2;
                                 } else if ( left < iframePos.x ) {
                                         className += ' mce-arrow-left';
-                                        left = boundary.left + iframePos.x;
+                                        left = selection.left + iframePos.x;
                                 } else if ( left + toolbarWidth > iframeWidth + iframePos.x ) {
                                         className += ' mce-arrow-right';
-                                        left = boundary.right - toolbarWidth + iframePos.x;
+                                        left = selection.right - toolbarWidth + iframePos.x;
                                 }
 
-                                toolbarNode.className = toolbarNode.className.replace( / ?mce-arrow-[\w]+/g, '' );
-                                toolbarNode.className += className;
+                                toolbar.className = toolbar.className.replace( / ?mce-arrow-[\w]+/g, '' );
+                                toolbar.className += className;
 
-                                DOM.setStyles( toolbarNode, { 'left': left, 'top': top } );
+                                DOM.setStyles( toolbar, {
+                                        'left': left,
+                                        'top': top
+                                } );
 
                                 return this;
                         }