Changeset 7368


Ignore:
Timestamp:
03/06/12 16:52:11 (2 years ago)
Author:
garry.yao
Message:

#8629: Smarter panel layout algorithm when viewport doesn't have enough spaces.

Location:
CKEditor/trunk
Files:
2 edited

Legend:

Unmodified
Added
Removed
  • CKEditor/trunk/CHANGES.html

    r7366 r7368  
    4949                <li><a href="http://dev.ckeditor.com/ticket/8699">#8699</a> : Now focus is moved to clicked button in all browsers and back to colorpicker dialog opener (button) after dialog is closed.</li> 
    5050                <li><a href="http://dev.ckeditor.com/ticket/8132">#8132</a> : [IE9] Fix link line get broken when containing BRs.</li> 
     51                <li><a href="http://dev.ckeditor.com/ticket/8629">#8629</a> : Optimized float panel layout when there's no enough spaces in viewport.</li> 
    5152        </ul> 
    5253        <h3> 
  • CKEditor/trunk/_source/plugins/floatpanel/plugin.js

    r7037 r7368  
    199199                                CKEDITOR.tools.setTimeout( function() 
    200200                                        { 
    201                                                 if ( rtl ) 
    202                                                         left -= element.$.offsetWidth; 
    203  
    204201                                                var panelLoad = CKEDITOR.tools.bind( function () 
    205202                                                { 
     
    248245                                                                target.removeStyle( 'height' ); 
    249246 
     247                                                        // Flip panel layout horizontally in RTL with known width. 
     248                                                        if ( rtl ) 
     249                                                                left -= element.$.offsetWidth; 
     250 
     251                                                        // Pop the style now for measurement. 
     252                                                        element.setStyle( 'left', left + 'px' ); 
     253 
     254                                                        /* panel layout smartly fit the viewport size. */ 
    250255                                                        var panelElement = panel.element, 
    251256                                                                panelWindow = panelElement.getWindow(), 
    252                                                                 windowScroll = panelWindow.getScrollPosition(), 
    253                                                                 viewportSize = panelWindow.getViewPaneSize(), 
    254                                                                 panelSize = 
     257                                                                rect = element.$.getBoundingClientRect(), 
     258                                                                viewportSize = panelWindow.getViewPaneSize(); 
     259 
     260                                                        // Compensation for browsers that dont support "width" and "height". 
     261                                                        var rectWidth = rect.width || rect.right - rect.left, 
     262                                                        rectHeight = rect.height || rect.bottom - rect.top; 
     263 
     264                                                        // Check if default horizontal layout is impossible. 
     265                                                        var spaceAfter = rtl ? rect.right : viewportSize.width - rect.left, 
     266                                                                spaceBefore = rtl ? viewportSize.width - rect.right : rect.left; 
     267 
     268                                                        if ( rtl ) 
     269                                                        { 
     270                                                                if ( spaceAfter < rectWidth ) 
    255271                                                                { 
    256                                                                         'height' : panelElement.$.offsetHeight, 
    257                                                                         'width' : panelElement.$.offsetWidth 
    258                                                                 }; 
    259  
    260                                                         // If the menu is horizontal off, shift it toward 
    261                                                         // the opposite language direction. 
    262                                                         if ( rtl ? left < 0 : left + panelSize.width > viewportSize.width + windowScroll.x ) 
    263                                                                 left += ( panelSize.width * ( rtl ? 1 : -1 ) ); 
    264  
    265                                                         // Vertical off screen is simpler. 
    266                                                         if ( top + panelSize.height > viewportSize.height + windowScroll.y ) 
    267                                                                 top -= panelSize.height; 
     272                                                                        // Flip to show on right. 
     273                                                                        if ( spaceBefore > rectWidth ) 
     274                                                                                left += rectWidth; 
     275                                                                        // Align to window left. 
     276                                                                        else if ( viewportSize.width > rectWidth ) 
     277                                                                                left = left - rect.left; 
     278                                                                        // Align to window right, never cutting the panel at right. 
     279                                                                        else 
     280                                                                                left = left - rect.right + viewportSize.width; 
     281                                                                } 
     282                                                        } 
     283                                                        else if ( spaceAfter < rectWidth ) 
     284                                                        { 
     285                                                                        // Flip to show on left. 
     286                                                                        if ( spaceBefore > rectWidth ) 
     287                                                                                left -= rectWidth; 
     288                                                                        // Align to window right. 
     289                                                                        else if ( viewportSize.width > rectWidth ) 
     290                                                                                left = left - rect.right + viewportSize.width; 
     291                                                                        // Align to window left, never cutting the panel at left. 
     292                                                                        else 
     293                                                                                left = left - rect.left; 
     294                                                                } 
     295 
     296 
     297                                                        // Check if the default vertical layout is possible. 
     298                                                        var spaceBelow = viewportSize.height - rect.top, 
     299                                                                spaceAbove = rect.top; 
     300 
     301                                                        if ( spaceBelow < rectHeight ) 
     302                                                        { 
     303                                                                // Flip to show above. 
     304                                                                if ( spaceAbove > rectHeight ) 
     305                                                                        top -= rectHeight; 
     306                                                                // Align to window bottom. 
     307                                                                else if ( viewportSize.height > rectHeight ) 
     308                                                                        top = top - rect.bottom + viewportSize.height; 
     309                                                                // Align to top, never cutting the panel at top. 
     310                                                                else 
     311                                                                        top = top - rect.top; 
     312                                                        } 
    268313 
    269314                                                        // If IE is in RTL, we have troubles with absolute 
Note: See TracChangeset for help on using the changeset viewer.
© 2003 – 2012 CKSource – Frederico Knabben. All rights reserved. | Terms of use | Privacy policy