Ticket #5084: 5084_6.patch

File 5084_6.patch, 17.9 KB (added by Sa'ar Zac Elias, 13 years ago)

  • _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( function()
     1554{
     1555        var sides = {
     1556                width : [ "border-left-width", "border-right-width","padding-left", "padding-right" ],
     1557                height : [ "border-top-width", "border-bottom-width", "padding-top",  "padding-bottom" ]
     1558        };
     1559
     1560        function marginAndPaddingSize( type )
     1561        {
     1562                var adjustment = 0;
     1563                for ( var i = 0, len = sides[ type ].length; i < len; i++ )
     1564                        adjustment += parseInt( this.getComputedStyle( sides [ type ][ i ] ) || 0, 10 ) || 0;
     1565                return adjustment;
     1566        }
     1567
     1568        /**
     1569         * Update the element's size with box model awareness.
     1570         * @name CKEDITOR.dom.element.setSize
     1571         * @param {String} type [width|height]
     1572         * @param {Number} size The length unit in px.
     1573         * @param {Boolean} isBorderBox Apply the {@param width} and {@param height} based on border box model.
     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
     1587        /**
     1588         * Get the element's size, possibly with box model awareness.
     1589         * @name CKEDITOR.dom.element.getSize
     1590         * @param {String} type [width|height]
     1591         * @param {Boolean} contentSize Get the {@param width} or {@param height} based on border box model.
     1592         */
     1593        CKEDITOR.dom.element.prototype.getSize = function( type, contentSize )
     1594                {
     1595                        var size = Math.max( this.$[ 'offset' + CKEDITOR.tools.capitalize( type )  ],
     1596                                this.$[ 'client' + CKEDITOR.tools.capitalize( type )  ] ) || 0;
     1597
     1598                        if ( contentSize )
     1599                                size -= marginAndPaddingSize.call( this, type );
     1600
     1601                        return size;
     1602                };
     1603})()
     1604

  • _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 : {},
    … …  
    638637                                        }, this._.editor );
    639638
    640639                                this._.contentSize = { width : width, height : height };
    641                                 this._.updateSize = true;
    642640                        };
    643641                })(),
    644642
    … …  
    650648                 */
    651649                getSize : function()
    652650                {
    653                         if ( !this._.updateSize )
    654                                 return this._.size;
    655651                        var element = this._.element.getFirst();
    656                         var size = this._.size = { width : element.$.offsetWidth || 0, height : element.$.offsetHeight || 0};
    657 
    658                         // If either the offsetWidth or offsetHeight is 0, the element isn't visible.
    659                         this._.updateSize = !size.width || !size.height;
    660 
    661                         return size;
     652                        return { width : element.$.offsetWidth || 0, height : element.$.offsetHeight || 0 };
    662653                },
    663654
    664655                /**
    … …  
    666657                 * @function
    667658                 * @param {Number} x The target x-coordinate.
    668659                 * @param {Number} y The target y-coordinate.
     660                 * @param {Boolean} save Flag indicate whether the dialog position should be remembered on next open up.
    669661                 * @example
    670662                 * dialogObj.move( 10, 40 );
    671663                 */
    672664                move : (function()
    673665                {
    674666                        var isFixed;
    675                         return function( x, y )
     667                        return function( x, y, save )
    676668                        {
    677669                                // The dialog may be fixed positioned or absolute positioned. Ask the
    678670                                // browser what is the current situation first.
    … …  
    699691                                                        'left'  : ( x > 0 ? x : 0 ) + 'px',
    700692                                                        'top'   : ( y > 0 ? y : 0 ) + 'px'
    701693                                                });
     694
     695                                save && ( this._.moved = 1 );
    702696                        };
    703697                })(),
    704698
    … …  
    745739
    746740
    747741                        // First, set the dialog to an appropriate size.
    748                         this.resize( definition.minWidth, definition.minHeight );
     742                        this.resize( this._.contentSize && this._.contentSize.width || definition.minWidth,
     743                                        this._.contentSize && this._.contentSize.height || definition.minHeight );
    749744
    750745                        // Reset all inputs back to their default value.
    751746                        this.reset();
    … …  
    790785                        // Reset the hasFocus state.
    791786                        this._.hasFocus = false;
    792787
    793                         // Rearrange the dialog to the middle of the window.
    794788                        CKEDITOR.tools.setTimeout( function()
    795789                                {
    796                                         var viewSize = CKEDITOR.document.getWindow().getViewPaneSize();
    797                                         var dialogSize = this.getSize();
    798 
    799                                         // We're using definition size for initial position because of
    800                                         // offten corrupted data in offsetWidth at this point. (#4084)
    801                                         this.move( ( viewSize.width - definition.minWidth ) / 2, ( viewSize.height - dialogSize.height ) / 2 );
    802 
     790                                        this.layout();
    803791                                        this.parts.dialog.setStyle( 'visibility', '' );
    804792
    805793                                        // Execute onLoad for the first show.
    … …  
    815803                },
    816804
    817805                /**
     806                 * Rearrange the dialog to its previous position or the middle of the window.
     807                 * @since 3.5
     808                 * @example
     809                 * dialogObj.layout();
     810                 */
     811                layout : function()
     812                {
     813                        var viewSize = CKEDITOR.document.getWindow().getViewPaneSize(),
     814                                        margin = this._.editor.skin.margins || [ 0, 0, 0, 0 ],
     815                                        dialogSize = this.getSize();
     816
     817                        this.move( this._.moved ? this._.position.x : ( viewSize.width - dialogSize.width ) / 2  + margin[ 1 ],
     818                                        this._.moved ? this._.position.y : ( viewSize.height - dialogSize.height ) / 2 + margin[ 0 ] );
     819                },
     820
     821                /**
    818822                 * Executes a function for each UI element.
    819823                 * @param {Function} fn Function to execute for each UI element.
    820824                 * @returns {CKEDITOR.dialog} The current dialog object.
    … …  
    16581662                        else
    16591663                                realY = abstractDialogCoords.y;
    16601664
    1661                         dialog.move( realX, realY );
     1665                        dialog.move( realX, realY, 1 );
    16621666
    16631667                        evt.data.preventDefault();
    16641668                }
    … …  
    16781682
    16791683                dialog.parts.title.on( 'mousedown', function( evt )
    16801684                        {
    1681                                 dialog._.updateSize = true;
    1682 
    16831685                                lastCoords = { x : evt.data.$.screenX, y : evt.data.$.screenY };
    16841686
    16851687                                CKEDITOR.document.on( 'mousemove', mouseMoveHandler );
    … …  
    16991701
    17001702        function initResizeHandles( dialog )
    17011703        {
    1702                 var definition = dialog.definition,
    1703                         minWidth = definition.minWidth || 0,
    1704                         minHeight = definition.minHeight || 0,
    1705                         resizable = definition.resizable,
    1706                         margins = dialog.getParentEditor().skin.margins || [ 0, 0, 0, 0 ];
     1704                var def = dialog.definition,
     1705                        resizable = def.resizable;
    17071706
    1708                 function topSizer( coords, dy )
    1709                 {
    1710                         coords.y += dy;
    1711                 }
     1707                if ( resizable == CKEDITOR.DIALOG_RESIZE_NONE )
     1708                        return;
    17121709
    1713                 function rightSizer( coords, dx )
    1714                 {
    1715                         coords.x2 += dx;
    1716                 }
     1710                var editor = dialog.getParentEditor(),
     1711                        minHeight = def.minHeight || 0,
     1712                        minWidth = def.minWidth || 0,
     1713                        margin = editor.skin.margins || [ 0, 0, 0, 0 ],
     1714                        wrapperWidth, wrapperHeight, viewSize, origin, startSize;
    17171715
    1718                 function bottomSizer( coords, dy )
     1716                function positionDialog( right )
    17191717                {
    1720                         coords.y2 += dy;
     1718                        // Maintain righthand sizing in RTL.
     1719                        if ( dialog._.moved && editor.lang.dir == 'rtl' )
     1720                        {
     1721                                var element = dialog._.element.getFirst();
     1722                                element.setStyle( 'right', right );
     1723                                element.removeStyle( 'left' );
     1724                        }
     1725                        else if ( !dialog._.moved )
     1726                                dialog.layout();
    17211727                }
    17221728
    1723                 function leftSizer( coords, dx )
     1729                var mouseDownFn = CKEDITOR.tools.addFunction( function( $event )
    17241730                {
    1725                         coords.x += dx;
    1726                 }
     1731                        startSize = dialog.getSize();
    17271732
    1728                 var lastCoords = null,
    1729                         abstractDialogCoords = null,
    1730                         magnetDistance = dialog._.editor.config.magnetDistance,
    1731                         parts = [ 'tl', 't', 'tr', 'l', 'r', 'bl', 'b', 'br' ];
     1733                        // Calculate the offset between content and chrome size, don't include dialog margins (shadows).
     1734                        heightOffset = startSize.height - dialog.parts.contents.getSize( 'height',  ! ( CKEDITOR.env.gecko || CKEDITOR.env.opera || CKEDITOR.env.ie && CKEDITOR.env.quirks ) ) - margin[0] - margin[2];
     1735                        widthOffset = startSize.width - dialog.parts.contents.getSize( 'width', 1 ) - margin[1] - margin[3];
    17321736
    1733                 function mouseDownHandler( evt )
    1734                 {
    1735                         var partName = evt.listenerData.part, size = dialog.getSize();
    1736                         abstractDialogCoords = dialog.getPosition();
    1737                         CKEDITOR.tools.extend( abstractDialogCoords,
    1738                                 {
    1739                                         x2 : abstractDialogCoords.x + size.width,
    1740                                         y2 : abstractDialogCoords.y + size.height
    1741                                 } );
    1742                         lastCoords = { x : evt.data.$.screenX, y : evt.data.$.screenY };
     1737                        origin = { x : $event.screenX, y : $event.screenY };
    17431738
    1744                         CKEDITOR.document.on( 'mousemove', mouseMoveHandler, dialog, { part : partName } );
    1745                         CKEDITOR.document.on( 'mouseup', mouseUpHandler, dialog, { part : partName } );
     1739                        viewSize = CKEDITOR.document.getWindow().getViewPaneSize();
    17461740
     1741                        CKEDITOR.document.on( 'mousemove', mouseMoveHandler );
     1742                        CKEDITOR.document.on( 'mouseup', mouseUpHandler );
     1743
    17471744                        if ( CKEDITOR.env.ie6Compat )
    17481745                        {
    17491746                                var coverDoc = currentCover.getChild( 0 ).getFrameDocument();
    1750                                 coverDoc.on( 'mousemove', mouseMoveHandler, dialog, { part : partName } );
    1751                                 coverDoc.on( 'mouseup', mouseUpHandler, dialog, { part : partName } );
     1747                                coverDoc.on( 'mousemove', mouseMoveHandler );
     1748                                coverDoc.on( 'mouseup', mouseUpHandler );
    17521749                        }
    17531750
    1754                         evt.data.preventDefault();
    1755                 }
     1751                        $event.preventDefault && $event.preventDefault();
     1752                });
    17561753
     1754                // Prepend the grip to the dialog.
     1755                dialog.on( 'load', function()
     1756                {
     1757                        var direction = '';
     1758                        if ( resizable == CKEDITOR.DIALOG_RESIZE_WIDTH )
     1759                                direction = ' cke_resizer_horizontal';
     1760                        else if ( resizable == CKEDITOR.DIALOG_RESIZE_HEIGHT )
     1761                                direction = ' cke_resizer_vertical';
     1762                        var resizer = CKEDITOR.dom.element.createFromHtml( '<div class="cke_resizer' + direction + '"' +
     1763                                        ' title="' + CKEDITOR.tools.htmlEncode( editor.lang.resize ) + '"' +
     1764                                        ' onmousedown="CKEDITOR.tools.callFunction(' + mouseDownFn + ', event )"></div>' );
     1765                        dialog.parts.footer.append( resizer, 1 );
     1766                });
     1767                editor.on( 'destroy', function() { CKEDITOR.tools.removeFunction( mouseDownFn ); } );
     1768
    17571769                function mouseMoveHandler( evt )
    17581770                {
    1759                         var x = evt.data.$.screenX,
    1760                                 y = evt.data.$.screenY,
    1761                                 dx = x - lastCoords.x,
    1762                                 dy = y - lastCoords.y,
    1763                                 viewPaneSize = CKEDITOR.document.getWindow().getViewPaneSize(),
    1764                                 partName = evt.listenerData.part;
     1771                        var rtl = editor.lang.dir == 'rtl',
     1772                                dx = ( evt.data.$.screenX - origin.x ) * ( rtl ? -1 : 1 ),
     1773                                dy = evt.data.$.screenY - origin.y,
     1774                                width = startSize.width,
     1775                                height = startSize.height,
     1776                                internalWidth = width + dx * ( dialog._.moved ? 1 : 2 ),
     1777                                internalHeight = height + dy * ( dialog._.moved ? 1 : 2 ),
     1778                                right = rtl && dialog._.element.getFirst().getComputedStyle( 'right' ),
     1779                                position = dialog.getPosition();
    17651780
    1766                         if ( partName.search( 't' ) != -1 )
    1767                                 topSizer( abstractDialogCoords, dy );
    1768                         if ( partName.search( 'l' ) != -1 )
    1769                                 leftSizer( abstractDialogCoords, dx );
    1770                         if ( partName.search( 'b' ) != -1 )
    1771                                 bottomSizer( abstractDialogCoords, dy );
    1772                         if ( partName.search( 'r' ) != -1 )
    1773                                 rightSizer( abstractDialogCoords, dx );
     1781                        if ( internalWidth > viewSize.width - margin[1] - margin[3] )
     1782                                internalWidth = viewSize.width - margin[1] - margin[3];
     1783                        else if ( ( rtl ? right : position.x ) + internalWidth - margin[ rtl ? 3 : 1 ] > viewSize.width - margin[ rtl ? 1 : 3 ] )
     1784                                internalWidth = viewSize.width - margin[ rtl ? 1 : 3 ] - ( rtl ? right : position.x );
    17741785
    1775                         lastCoords = { x : x, y : y };
     1786                        if ( internalHeight > viewSize.height - margin[0] - margin[2] )
     1787                                internalHeight = viewSize.height - margin[0] - margin[2];
     1788                        else if ( position.y + internalHeight > viewSize.height - margin[2] )
     1789                                internalHeight = viewSize.height - margin[2] - position.y;
    17761790
    1777                         var realX, realY, realX2, realY2;
     1791                        if ( resizable == CKEDITOR.DIALOG_RESIZE_WIDTH || resizable == CKEDITOR.DIALOG_RESIZE_BOTH )
     1792                                width = Math.max( minWidth, internalWidth );
    17781793
    1779                         if ( abstractDialogCoords.x + margins[3] < magnetDistance )
    1780                                 realX = - margins[3];
    1781                         else if ( partName.search( 'l' ) != -1 && abstractDialogCoords.x2 - abstractDialogCoords.x < minWidth + magnetDistance )
    1782                                 realX = abstractDialogCoords.x2 - minWidth;
    1783                         else
    1784                                 realX = abstractDialogCoords.x;
     1794                        if ( resizable == CKEDITOR.DIALOG_RESIZE_HEIGHT || resizable == CKEDITOR.DIALOG_RESIZE_BOTH )
     1795                                height = Math.max( minHeight, internalHeight );
    17851796
    1786                         if ( abstractDialogCoords.y + margins[0] < magnetDistance )
    1787                                 realY = - margins[0];
    1788                         else if ( partName.search( 't' ) != -1 && abstractDialogCoords.y2 - abstractDialogCoords.y < minHeight + magnetDistance )
    1789                                 realY = abstractDialogCoords.y2 - minHeight;
    1790                         else
    1791                                 realY = abstractDialogCoords.y;
     1797                        width = Math.max( width - widthOffset, 0 );
     1798                        height = Math.max( height - heightOffset, 0 );
    17921799
    1793                         if ( abstractDialogCoords.x2 - margins[1] > viewPaneSize.width - magnetDistance )
    1794                                 realX2 = viewPaneSize.width + margins[1] ;
    1795                         else if ( partName.search( 'r' ) != -1 && abstractDialogCoords.x2 - abstractDialogCoords.x < minWidth + magnetDistance )
    1796                                 realX2 = abstractDialogCoords.x + minWidth;
    1797                         else
    1798                                 realX2 = abstractDialogCoords.x2;
     1800                        dialog.resize( width, height );
     1801                        // The right property might get broken during resizing, so computing it before the resizing.
     1802                        positionDialog( right );
    17991803
    1800                         if ( abstractDialogCoords.y2 - margins[2] > viewPaneSize.height - magnetDistance )
    1801                                 realY2= viewPaneSize.height + margins[2] ;
    1802                         else if ( partName.search( 'b' ) != -1 && abstractDialogCoords.y2 - abstractDialogCoords.y < minHeight + magnetDistance )
    1803                                 realY2 = abstractDialogCoords.y + minHeight;
    1804                         else
    1805                                 realY2 = abstractDialogCoords.y2 ;
    1806 
    1807                         dialog.move( realX, realY );
    1808                         dialog.resize( realX2 - realX, realY2 - realY );
    1809 
    18101804                        evt.data.preventDefault();
    18111805                }
    18121806
    1813                 function mouseUpHandler( evt )
     1807                function mouseUpHandler()
    18141808                {
    18151809                        CKEDITOR.document.removeListener( 'mouseup', mouseUpHandler );
    18161810                        CKEDITOR.document.removeListener( 'mousemove', mouseMoveHandler );
    … …  
    18211815                                coverDoc.removeListener( 'mouseup', mouseUpHandler );
    18221816                                coverDoc.removeListener( 'mousemove', mouseMoveHandler );
    18231817                        }
    1824                 }
    18251818
    1826 // TODO : Simplify the resize logic, having just a single resize grip <div>.
    1827 //              var widthTest = /[lr]/,
    1828 //                      heightTest = /[tb]/;
    1829 //              for ( var i = 0 ; i < parts.length ; i++ )
    1830 //              {
    1831 //                      var element = dialog.parts[ parts[i] + '_resize' ];
    1832 //                      if ( resizable == CKEDITOR.DIALOG_RESIZE_NONE ||
    1833 //                                      resizable == CKEDITOR.DIALOG_RESIZE_HEIGHT && widthTest.test( parts[i] ) ||
    1834 //                                      resizable == CKEDITOR.DIALOG_RESIZE_WIDTH && heightTest.test( parts[i] ) )
    1835 //                      {
    1836 //                              element.hide();
    1837 //                              continue;
    1838 //                      }
    1839 //                      element.on( 'mousedown', mouseDownHandler, dialog, { part : parts[i] } );
    1840 //              }
     1819                        // Switch back to use the left property, if RTL is used.
     1820                        if ( editor.lang.dir == 'rtl' )
     1821                        {
     1822                                var element = dialog._.element.getFirst(),
     1823                                        left = element.getComputedStyle( 'left' );
     1824                                element.removeStyle( 'right' );
     1825                                dialog.move( parseInt( left, 10 ), parseInt( element.getComputedStyle( 'top' ), 10 ) );
     1826                        }
     1827                }
    18411828        }
    18421829
    18431830        var resizeCover;

  • _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/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

  • _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/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
© 2003 – 2022, CKSource sp. z o.o. sp.k. All rights reserved. | Terms of use | Privacy policy