Ticket #5084: 5084_5.patch

File 5084_5.patch, 17.5 KB (added by Garry Yao, 13 years ago)

  • _source/plugins/link/dialogs/link.js

     
    7575                        else
    7676                                element.hide();
    7777                }
     78
     79                dialog.layout();
    7880        };
    7981
    8082        // Loads the parameters in a selected link to the link dialog fields.

  • _source/plugins/dialog/plugin.js

     
    139139                        name : dialogName,
    140140                        contentSize : { width : 0, height : 0 },
    141141                        size : { width : 0, height : 0 },
    142                         updateSize : false,
    143142                        contents : {},
    144143                        buttons : {},
    145144                        accessKeyMap : {},
    … …  
    610609                                        }, this._.editor );
    611610
    612611                                this._.contentSize = { width : width, height : height };
    613                                 this._.updateSize = true;
    614612                        };
    615613                })(),
    616614
    … …  
    622620                 */
    623621                getSize : function()
    624622                {
    625                         if ( !this._.updateSize )
    626                                 return this._.size;
    627623                        var element = this._.element.getFirst();
    628                         var size = this._.size = { width : element.$.offsetWidth || 0, height : element.$.offsetHeight || 0};
    629 
    630                         // If either the offsetWidth or offsetHeight is 0, the element isn't visible.
    631                         this._.updateSize = !size.width || !size.height;
    632 
    633                         return size;
     624                        return { width : element.$.offsetWidth || 0, height : element.$.offsetHeight || 0};
    634625                },
    635626
    636627                /**
    … …  
    638629                 * @function
    639630                 * @param {Number} x The target x-coordinate.
    640631                 * @param {Number} y The target y-coordinate.
     632                 * @param {Boolean} save Flag indicate whether the dialog position should be remembered on next open up.
    641633                 * @example
    642634                 * dialogObj.move( 10, 40 );
    643635                 */
    644636                move : (function()
    645637                {
    646638                        var isFixed;
    647                         return function( x, y )
     639                        return function( x, y, save )
    648640                        {
    649641                                // The dialog may be fixed positioned or absolute positioned. Ask the
    650642                                // browser what is the current situation first.
    … …  
    671663                                                        'left'  : ( x > 0 ? x : 0 ) + 'px',
    672664                                                        'top'   : ( y > 0 ? y : 0 ) + 'px'
    673665                                                });
     666
     667                                save && ( this._.moved = 1 );
    674668                        };
    675669                })(),
    676670
    … …  
    717711
    718712
    719713                        // First, set the dialog to an appropriate size.
    720                         this.resize( definition.minWidth, definition.minHeight );
     714                        this.resize( this._.contentSize && this._.contentSize.width || definition.minWidth,
     715                                        this._.contentSize && this._.contentSize.height || definition.minHeight );
    721716
    722717                        // Reset all inputs back to their default value.
    723718                        this.reset();
    … …  
    762757                        // Reset the hasFocus state.
    763758                        this._.hasFocus = false;
    764759
    765                         // Rearrange the dialog to the middle of the window.
    766760                        CKEDITOR.tools.setTimeout( function()
    767761                                {
    768                                         var viewSize = CKEDITOR.document.getWindow().getViewPaneSize();
    769                                         var dialogSize = this.getSize();
    770 
    771                                         // We're using definition size for initial position because of
    772                                         // offten corrupted data in offsetWidth at this point. (#4084)
    773                                         this.move( ( viewSize.width - definition.minWidth ) / 2, ( viewSize.height - dialogSize.height ) / 2 );
    774 
     762                                        this.layout();
    775763                                        this.parts.dialog.setStyle( 'visibility', '' );
    776764
    777765                                        // Execute onLoad for the first show.
    … …  
    787775                },
    788776
    789777                /**
     778                 * Rearrange the dialog to its previous position or the middle of the window.
     779                 * @since 3.5
     780                 */
     781                layout : function()
     782                {
     783                        var viewSize = CKEDITOR.document.getWindow().getViewPaneSize(),
     784                                        margin = this._.editor.skin.margins || [ 0, 0, 0, 0 ],
     785                                        dialogSize = this.getSize();
     786
     787                        this.move( this._.moved ? this._.position.x : ( viewSize.width - dialogSize.width ) / 2  + margin[ 0 ],
     788                                        this._.moved ? this._.position.y : ( viewSize.height - dialogSize.height ) / 2 + margin[ 1 ] );
     789                },
     790
     791                /**
    790792                 * Executes a function for each UI element.
    791793                 * @param {Function} fn Function to execute for each UI element.
    792794                 * @returns {CKEDITOR.dialog} The current dialog object.
    … …  
    16301632                        else
    16311633                                realY = abstractDialogCoords.y;
    16321634
    1633                         dialog.move( realX, realY );
     1635                        dialog.move( realX, realY, 1 );
    16341636
    16351637                        evt.data.preventDefault();
    16361638                }
    … …  
    16501652
    16511653                dialog.parts.title.on( 'mousedown', function( evt )
    16521654                        {
    1653                                 dialog._.updateSize = true;
    1654 
    16551655                                lastCoords = { x : evt.data.$.screenX, y : evt.data.$.screenY };
    16561656
    16571657                                CKEDITOR.document.on( 'mousemove', mouseMoveHandler );
    … …  
    16711671
    16721672        function initResizeHandles( dialog )
    16731673        {
    1674                 var definition = dialog.definition,
    1675                         minWidth = definition.minWidth || 0,
    1676                         minHeight = definition.minHeight || 0,
    1677                         resizable = definition.resizable,
    1678                         margins = dialog.getParentEditor().skin.margins || [ 0, 0, 0, 0 ];
     1674                var def = dialog.definition,
     1675                        resizable = def.resizable;
    16791676
    1680                 function topSizer( coords, dy )
    1681                 {
    1682                         coords.y += dy;
    1683                 }
     1677                if ( resizable == CKEDITOR.DIALOG_RESIZE_NONE )
     1678                        return;
    16841679
    1685                 function rightSizer( coords, dx )
    1686                 {
    1687                         coords.x2 += dx;
    1688                 }
     1680                var editor = dialog.getParentEditor(),
     1681                        minHeight = def.minHeight || 0,
     1682                        minWidth = def.minWidth || 0,
     1683                        margin = editor.skin.margins || [ 0, 0, 0, 0 ],
     1684                        wrapperWidth, wrapperHeight, viewSize, origin, startSize;
    16891685
    1690                 function bottomSizer( coords, dy )
     1686                function positionDialog( right )
    16911687                {
    1692                         coords.y2 += dy;
    1693                 }
     1688                        // Maintain righthand sizing in RTL.
     1689                        if ( dialog._.moved && editor.lang.dir == 'rtl' )
     1690                        {
     1691                                var element = dialog._.element.getFirst();
     1692                                element.setStyle( 'right', right );
     1693                                element.removeStyle( 'left' );
     1694                        }
     1695                        else if ( !dialog._.moved )
     1696                                dialog.layout();
     1697                }
    16941698
    1695                 function leftSizer( coords, dx )
     1699                var mouseDownFn = CKEDITOR.tools.addFunction( function( $event )
    16961700                {
    1697                         coords.x += dx;
    1698                 }
     1701                        var dialogSize = dialog.getSize();
    16991702
    1700                 var lastCoords = null,
    1701                         abstractDialogCoords = null,
    1702                         magnetDistance = dialog._.editor.config.magnetDistance,
    1703                         parts = [ 'tl', 't', 'tr', 'l', 'r', 'bl', 'b', 'br' ];
     1703                        // Calculate the offset between content and chrome size.
     1704                        wrapperHeight = dialogSize.height - dialog.parts.contents.getSize( 'height',  ! ( CKEDITOR.env.gecko || CKEDITOR.env.opera || CKEDITOR.env.ie && CKEDITOR.env.quirks ) );
     1705                        wrapperWidth = dialogSize.width - dialog.parts.contents.getSize( 'width', 1 );
    17041706
    1705                 function mouseDownHandler( evt )
    1706                 {
    1707                         var partName = evt.listenerData.part, size = dialog.getSize();
    1708                         abstractDialogCoords = dialog.getPosition();
    1709                         CKEDITOR.tools.extend( abstractDialogCoords,
    1710                                 {
    1711                                         x2 : abstractDialogCoords.x + size.width,
    1712                                         y2 : abstractDialogCoords.y + size.height
    1713                                 } );
    1714                         lastCoords = { x : evt.data.$.screenX, y : evt.data.$.screenY };
     1707                        origin = { x : $event.screenX, y : $event.screenY };
    17151708
    1716                         CKEDITOR.document.on( 'mousemove', mouseMoveHandler, dialog, { part : partName } );
    1717                         CKEDITOR.document.on( 'mouseup', mouseUpHandler, dialog, { part : partName } );
     1709                        startSize = dialog.getSize();
    17181710
     1711                        viewSize = CKEDITOR.document.getWindow().getViewPaneSize();
     1712
     1713                        CKEDITOR.document.on( 'mousemove', mouseMoveHandler );
     1714                        CKEDITOR.document.on( 'mouseup', mouseUpHandler );
     1715
    17191716                        if ( CKEDITOR.env.ie6Compat )
    17201717                        {
    17211718                                var coverDoc = currentCover.getChild( 0 ).getFrameDocument();
    1722                                 coverDoc.on( 'mousemove', mouseMoveHandler, dialog, { part : partName } );
    1723                                 coverDoc.on( 'mouseup', mouseUpHandler, dialog, { part : partName } );
     1719                                coverDoc.on( 'mousemove', mouseMoveHandler );
     1720                                coverDoc.on( 'mouseup', mouseUpHandler );
    17241721                        }
    17251722
    1726                         evt.data.preventDefault();
    1727                 }
     1723                        $event.preventDefault && $event.preventDefault();
     1724                });
    17281725
     1726                // Prepend the grip to the dialog.
     1727                dialog.on( 'load', function()
     1728                {
     1729                        var direction = '';
     1730                        if ( resizable == CKEDITOR.DIALOG_RESIZE_WIDTH )
     1731                                direction = ' cke_resizer_horizontal';
     1732                        else if ( resizable == CKEDITOR.DIALOG_RESIZE_HEIGHT )
     1733                                direction = ' cke_resizer_vertical';
     1734                        var resizer = CKEDITOR.dom.element.createFromHtml( '<div class="cke_resizer' + direction + '"' +
     1735                                        ' title="' + CKEDITOR.tools.htmlEncode( editor.lang.resize ) + '"' +
     1736                                        ' onmousedown="CKEDITOR.tools.callFunction(' + mouseDownFn + ', event )"></div>' );
     1737                        dialog.parts.footer.append( resizer, 1 );
     1738                });
     1739                editor.on( 'destroy', function() { CKEDITOR.tools.removeFunction( mouseDownFn ); } );
     1740
    17291741                function mouseMoveHandler( evt )
    17301742                {
    1731                         var x = evt.data.$.screenX,
    1732                                 y = evt.data.$.screenY,
    1733                                 dx = x - lastCoords.x,
    1734                                 dy = y - lastCoords.y,
    1735                                 viewPaneSize = CKEDITOR.document.getWindow().getViewPaneSize(),
    1736                                 partName = evt.listenerData.part;
     1743                        var rtl = editor.lang.dir == 'rtl',
     1744                                dx = ( evt.data.$.screenX - origin.x ) * ( rtl ? -1 : 1 ),
     1745                                dy = evt.data.$.screenY - origin.y,
     1746                                width = startSize.width,
     1747                                height = startSize.height,
     1748                                internalWidth = width + dx * ( dialog._.moved ? 1 : 2 ),
     1749                                internalHeight = height + dy * ( dialog._.moved ? 1 : 2 ),
     1750                                right = rtl && dialog._.element.getFirst().getComputedStyle( 'right' ),
     1751                                position = dialog.getPosition();
    17371752
    1738                         if ( partName.search( 't' ) != -1 )
    1739                                 topSizer( abstractDialogCoords, dy );
    1740                         if ( partName.search( 'l' ) != -1 )
    1741                                 leftSizer( abstractDialogCoords, dx );
    1742                         if ( partName.search( 'b' ) != -1 )
    1743                                 bottomSizer( abstractDialogCoords, dy );
    1744                         if ( partName.search( 'r' ) != -1 )
    1745                                 rightSizer( abstractDialogCoords, dx );
     1753                        if ( internalHeight > viewSize.height - margin[1] - margin[3] )
     1754                                internalHeight = viewSize.height - margin[1] - margin[3];
     1755                        else if ( position.y + internalHeight > viewSize.height - margin[1] - margin[3] )
     1756                                internalHeight = viewSize.height - margin[3] - position.y;
    17461757
    1747                         lastCoords = { x : x, y : y };
     1758                        if ( internalWidth > viewSize.width - margin[0] - margin[2] )
     1759                                internalWidth = viewSize.width - margin[0] - margin[2];
     1760                        else if ( ( rtl ? right : position.x ) + internalWidth > viewSize.width - margin[0] - margin[2] )
     1761                                internalWidth = viewSize.width - margin[2] - ( rtl ? right : position.x );
    17481762
    1749                         var realX, realY, realX2, realY2;
     1763                        if ( resizable == CKEDITOR.DIALOG_RESIZE_WIDTH || resizable == CKEDITOR.DIALOG_RESIZE_BOTH )
     1764                                width = Math.max( minWidth, internalWidth );
    17501765
    1751                         if ( abstractDialogCoords.x + margins[3] < magnetDistance )
    1752                                 realX = - margins[3];
    1753                         else if ( partName.search( 'l' ) != -1 && abstractDialogCoords.x2 - abstractDialogCoords.x < minWidth + magnetDistance )
    1754                                 realX = abstractDialogCoords.x2 - minWidth;
    1755                         else
    1756                                 realX = abstractDialogCoords.x;
     1766                        if ( resizable == CKEDITOR.DIALOG_RESIZE_HEIGHT || resizable == CKEDITOR.DIALOG_RESIZE_BOTH )
     1767                                height = Math.max( minHeight, internalHeight );
    17571768
    1758                         if ( abstractDialogCoords.y + margins[0] < magnetDistance )
    1759                                 realY = - margins[0];
    1760                         else if ( partName.search( 't' ) != -1 && abstractDialogCoords.y2 - abstractDialogCoords.y < minHeight + magnetDistance )
    1761                                 realY = abstractDialogCoords.y2 - minHeight;
    1762                         else
    1763                                 realY = abstractDialogCoords.y;
     1769                        width = Math.max( width - wrapperWidth, 0 );
     1770                        height = Math.max( height - wrapperHeight, 0 );
    17641771
    1765                         if ( abstractDialogCoords.x2 - margins[1] > viewPaneSize.width - magnetDistance )
    1766                                 realX2 = viewPaneSize.width + margins[1] ;
    1767                         else if ( partName.search( 'r' ) != -1 && abstractDialogCoords.x2 - abstractDialogCoords.x < minWidth + magnetDistance )
    1768                                 realX2 = abstractDialogCoords.x + minWidth;
    1769                         else
    1770                                 realX2 = abstractDialogCoords.x2;
     1772                        dialog.resize( width, height );
     1773                        // The right property might get broken during resizing, so computing it before the resizing.
     1774                        positionDialog( right );
    17711775
    1772                         if ( abstractDialogCoords.y2 - margins[2] > viewPaneSize.height - magnetDistance )
    1773                                 realY2= viewPaneSize.height + margins[2] ;
    1774                         else if ( partName.search( 'b' ) != -1 && abstractDialogCoords.y2 - abstractDialogCoords.y < minHeight + magnetDistance )
    1775                                 realY2 = abstractDialogCoords.y + minHeight;
    1776                         else
    1777                                 realY2 = abstractDialogCoords.y2 ;
    1778 
    1779                         dialog.move( realX, realY );
    1780                         dialog.resize( realX2 - realX, realY2 - realY );
    1781 
    17821776                        evt.data.preventDefault();
    17831777                }
    17841778
    1785                 function mouseUpHandler( evt )
     1779                function mouseUpHandler()
    17861780                {
    17871781                        CKEDITOR.document.removeListener( 'mouseup', mouseUpHandler );
    17881782                        CKEDITOR.document.removeListener( 'mousemove', mouseMoveHandler );
    … …  
    17931787                                coverDoc.removeListener( 'mouseup', mouseUpHandler );
    17941788                                coverDoc.removeListener( 'mousemove', mouseMoveHandler );
    17951789                        }
    1796                 }
    17971790
    1798 // TODO : Simplify the resize logic, having just a single resize grip <div>.
    1799 //              var widthTest = /[lr]/,
    1800 //                      heightTest = /[tb]/;
    1801 //              for ( var i = 0 ; i < parts.length ; i++ )
    1802 //              {
    1803 //                      var element = dialog.parts[ parts[i] + '_resize' ];
    1804 //                      if ( resizable == CKEDITOR.DIALOG_RESIZE_NONE ||
    1805 //                                      resizable == CKEDITOR.DIALOG_RESIZE_HEIGHT && widthTest.test( parts[i] ) ||
    1806 //                                      resizable == CKEDITOR.DIALOG_RESIZE_WIDTH && heightTest.test( parts[i] ) )
    1807 //                      {
    1808 //                              element.hide();
    1809 //                              continue;
    1810 //                      }
    1811 //                      element.on( 'mousedown', mouseDownHandler, dialog, { part : parts[i] } );
    1812 //              }
    1813         }
     1791                        // Switch back to use the left property, if RTL is used.
     1792                        if ( editor.lang.dir == 'rtl' )
     1793                        {
     1794                                var element = dialog._.element.getFirst(),
     1795                                        left = element.getComputedStyle( 'left' );
     1796                                element.removeStyle( 'right' );
     1797                                dialog.move( parseInt( left, 10 ), parseInt( element.getComputedStyle( 'top' ), 10 ) );
     1798                        }
     1799                }
     1800        }
    18141801
    18151802        var resizeCover;
    18161803        // Caching resuable covers and allowing only one cover

  • _source/skins/v2/dialog.css

     
    197197        text-align: left;
    198198}
    199199
     200.cke_skin_v2 .cke_dialog_footer .cke_resizer {
     201        margin-top: 21px;
     202}
     203
    200204/* tabs */
    201205
    202206.cke_skin_v2 .cke_dialog_tabs

  • _source/skins/office2003/dialog.css

     
    200200        text-align: left;
    201201}
    202202
     203.cke_skin_office2003 .cke_dialog_footer .cke_resizer {
     204        margin-top: 21px;
     205}
     206
    203207/* tabs */
    204208
    205209.cke_skin_office2003 .cke_dialog_tabs

  • _source/core/dom/element.js

     
    15251525                },
    15261526
    15271527                /**
    1528                  *  Update the element's size with box model awareness.
    1529                  * @name CKEDITOR.dom.element.setSize
    1530                  * @param {String} type [width|height]
    1531                  * @param {Number} size The length unit in px.
    1532                  * @param isBorderBox Apply the {@param width} and {@param height} based on border box model.
    1533                  */
    1534                 setSize : ( function()
    1535                 {
    1536                         var sides = {
    1537                                 width : [ "border-left-width", "border-right-width","padding-left", "padding-right" ],
    1538                                 height : [ "border-top-width", "border-bottom-width", "padding-top",  "padding-bottom" ]
    1539                         };
    1540 
    1541                         return function( type, size, isBorderBox )
    1542                                 {
    1543                                         if ( typeof size == 'number' )
    1544                                         {
    1545                                                 if ( isBorderBox && !( CKEDITOR.env.ie && CKEDITOR.env.quirks ) )
    1546                                                 {
    1547                                                         var     adjustment = 0;
    1548                                                         for ( var i = 0, len = sides[ type ].length; i < len; i++ )
    1549                                                                 adjustment += parseInt( this.getComputedStyle( sides [ type ][ i ] ) || 0, 10 ) || 0;
    1550                                                         size -= adjustment;
    1551                                                 }
    1552                                                 this.setStyle( type, size + 'px' );
    1553                                         }
    1554                                 };
    1555                 })(),
    1556 
    1557                 /**
    15581528                 * Gets element's direction. Supports both CSS 'direction' prop and 'dir' attr.
    15591529                 */
    15601530                getDirection : function( useComputed )
    … …  
    15791549                                this.setAttribute( name, value );
    15801550                }
    15811551        });
     1552
     1553/**
     1554 *  Update the element's size with box model awareness.
     1555 * @name CKEDITOR.dom.element.setSize
     1556 * @param {String} type [width|height]
     1557 * @param {Number} size The length unit in px.
     1558 * @param isBorderBox Apply the {@param width} and {@param height} based on border box model.
     1559 */
     1560( function()
     1561{
     1562        var sides = {
     1563                width : [ "border-left-width", "border-right-width","padding-left", "padding-right" ],
     1564                height : [ "border-top-width", "border-bottom-width", "padding-top",  "padding-bottom" ]
     1565        };
     1566
     1567        function marginAndPaddingSize( type )
     1568        {
     1569                var adjustment = 0;
     1570                for ( var i = 0, len = sides[ type ].length; i < len; i++ )
     1571                        adjustment += parseInt( this.getComputedStyle( sides [ type ][ i ] ) || 0, 10 ) || 0;
     1572                return adjustment;
     1573        }
     1574
     1575        CKEDITOR.dom.element.prototype.setSize = function( type, size, isBorderBox )
     1576                {
     1577                        if ( typeof size == 'number' )
     1578                        {
     1579                                if ( isBorderBox && !( CKEDITOR.env.ie && CKEDITOR.env.quirks ) )
     1580                                        size -= marginAndPaddingSize.call( this, type );
     1581
     1582                                this.setStyle( type, size + 'px' );
     1583                        }
     1584                };
     1585
     1586        CKEDITOR.dom.element.prototype.getSize = function( type, contentSize )
     1587                {
     1588                        var size = Math.max( this.$[ 'offset' + CKEDITOR.tools.capitalize( type )  ],
     1589                                this.$[ 'client' + CKEDITOR.tools.capitalize( type )  ] ) || 0;
     1590
     1591                        if ( contentSize )
     1592                                size -= marginAndPaddingSize.call( this, type );
     1593
     1594                        return size;
     1595                };
     1596})()
     1597

  • _source/skins/kama/dialog.css

     
    102102        text-align: left;
    103103}
    104104
     105.cke_skin_kama .cke_dialog_footer .cke_resizer {
     106        margin-top: 20px;
     107}
     108
    105109/* tabs */
    106110
    107111.cke_skin_kama .cke_dialog_tabs
© 2003 – 2022, CKSource sp. z o.o. sp.k. All rights reserved. | Terms of use | Privacy policy