Ticket #5084: 5084_6.patch
File 5084_6.patch, 17.9 KB (added by , 13 years ago) |
---|
-
_source/core/dom/element.js
1525 1525 }, 1526 1526 1527 1527 /** 1528 * Update the element's size with box model awareness.1529 * @name CKEDITOR.dom.element.setSize1530 * @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 /**1558 1528 * Gets element's direction. Supports both CSS 'direction' prop and 'dir' attr. 1559 1529 */ 1560 1530 getDirection : function( useComputed ) … … 1579 1549 this.setAttribute( name, value ); 1580 1550 } 1581 1551 }); 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
139 139 name : dialogName, 140 140 contentSize : { width : 0, height : 0 }, 141 141 size : { width : 0, height : 0 }, 142 updateSize : false,143 142 contents : {}, 144 143 buttons : {}, 145 144 accessKeyMap : {}, … … 638 637 }, this._.editor ); 639 638 640 639 this._.contentSize = { width : width, height : height }; 641 this._.updateSize = true;642 640 }; 643 641 })(), 644 642 … … 650 648 */ 651 649 getSize : function() 652 650 { 653 if ( !this._.updateSize )654 return this._.size;655 651 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 }; 662 653 }, 663 654 664 655 /** … … 666 657 * @function 667 658 * @param {Number} x The target x-coordinate. 668 659 * @param {Number} y The target y-coordinate. 660 * @param {Boolean} save Flag indicate whether the dialog position should be remembered on next open up. 669 661 * @example 670 662 * dialogObj.move( 10, 40 ); 671 663 */ 672 664 move : (function() 673 665 { 674 666 var isFixed; 675 return function( x, y )667 return function( x, y, save ) 676 668 { 677 669 // The dialog may be fixed positioned or absolute positioned. Ask the 678 670 // browser what is the current situation first. … … 699 691 'left' : ( x > 0 ? x : 0 ) + 'px', 700 692 'top' : ( y > 0 ? y : 0 ) + 'px' 701 693 }); 694 695 save && ( this._.moved = 1 ); 702 696 }; 703 697 })(), 704 698 … … 745 739 746 740 747 741 // 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 ); 749 744 750 745 // Reset all inputs back to their default value. 751 746 this.reset(); … … 790 785 // Reset the hasFocus state. 791 786 this._.hasFocus = false; 792 787 793 // Rearrange the dialog to the middle of the window.794 788 CKEDITOR.tools.setTimeout( function() 795 789 { 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(); 803 791 this.parts.dialog.setStyle( 'visibility', '' ); 804 792 805 793 // Execute onLoad for the first show. … … 815 803 }, 816 804 817 805 /** 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 /** 818 822 * Executes a function for each UI element. 819 823 * @param {Function} fn Function to execute for each UI element. 820 824 * @returns {CKEDITOR.dialog} The current dialog object. … … 1658 1662 else 1659 1663 realY = abstractDialogCoords.y; 1660 1664 1661 dialog.move( realX, realY );1665 dialog.move( realX, realY, 1 ); 1662 1666 1663 1667 evt.data.preventDefault(); 1664 1668 } … … 1678 1682 1679 1683 dialog.parts.title.on( 'mousedown', function( evt ) 1680 1684 { 1681 dialog._.updateSize = true;1682 1683 1685 lastCoords = { x : evt.data.$.screenX, y : evt.data.$.screenY }; 1684 1686 1685 1687 CKEDITOR.document.on( 'mousemove', mouseMoveHandler ); … … 1699 1701 1700 1702 function initResizeHandles( dialog ) 1701 1703 { 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; 1707 1706 1708 function topSizer( coords, dy ) 1709 { 1710 coords.y += dy; 1711 } 1707 if ( resizable == CKEDITOR.DIALOG_RESIZE_NONE ) 1708 return; 1712 1709 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; 1717 1715 1718 function bottomSizer( coords, dy)1716 function positionDialog( right ) 1719 1717 { 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(); 1721 1727 } 1722 1728 1723 function leftSizer( coords, dx)1729 var mouseDownFn = CKEDITOR.tools.addFunction( function( $event ) 1724 1730 { 1725 coords.x += dx; 1726 } 1731 startSize = dialog.getSize(); 1727 1732 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]; 1732 1736 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 }; 1743 1738 1744 CKEDITOR.document.on( 'mousemove', mouseMoveHandler, dialog, { part : partName } ); 1745 CKEDITOR.document.on( 'mouseup', mouseUpHandler, dialog, { part : partName } ); 1739 viewSize = CKEDITOR.document.getWindow().getViewPaneSize(); 1746 1740 1741 CKEDITOR.document.on( 'mousemove', mouseMoveHandler ); 1742 CKEDITOR.document.on( 'mouseup', mouseUpHandler ); 1743 1747 1744 if ( CKEDITOR.env.ie6Compat ) 1748 1745 { 1749 1746 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 ); 1752 1749 } 1753 1750 1754 evt.data.preventDefault();1755 } 1751 $event.preventDefault && $event.preventDefault(); 1752 }); 1756 1753 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 1757 1769 function mouseMoveHandler( evt ) 1758 1770 { 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(); 1765 1780 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 ); 1774 1785 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; 1776 1790 1777 var realX, realY, realX2, realY2; 1791 if ( resizable == CKEDITOR.DIALOG_RESIZE_WIDTH || resizable == CKEDITOR.DIALOG_RESIZE_BOTH ) 1792 width = Math.max( minWidth, internalWidth ); 1778 1793 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 ); 1785 1796 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 ); 1792 1799 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 ); 1799 1803 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 else1805 realY2 = abstractDialogCoords.y2 ;1806 1807 dialog.move( realX, realY );1808 dialog.resize( realX2 - realX, realY2 - realY );1809 1810 1804 evt.data.preventDefault(); 1811 1805 } 1812 1806 1813 function mouseUpHandler( evt)1807 function mouseUpHandler() 1814 1808 { 1815 1809 CKEDITOR.document.removeListener( 'mouseup', mouseUpHandler ); 1816 1810 CKEDITOR.document.removeListener( 'mousemove', mouseMoveHandler ); … … 1821 1815 coverDoc.removeListener( 'mouseup', mouseUpHandler ); 1822 1816 coverDoc.removeListener( 'mousemove', mouseMoveHandler ); 1823 1817 } 1824 }1825 1818 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 } 1841 1828 } 1842 1829 1843 1830 var resizeCover; -
_source/plugins/link/dialogs/link.js
75 75 else 76 76 element.hide(); 77 77 } 78 79 dialog.layout(); 78 80 }; 79 81 80 82 // Loads the parameters in a selected link to the link dialog fields. -
_source/skins/kama/dialog.css
102 102 text-align: left; 103 103 } 104 104 105 .cke_skin_kama .cke_dialog_footer .cke_resizer { 106 margin-top: 20px; 107 } 108 105 109 /* tabs */ 106 110 107 111 .cke_skin_kama .cke_dialog_tabs -
_source/skins/office2003/dialog.css
200 200 text-align: left; 201 201 } 202 202 203 .cke_skin_office2003 .cke_dialog_footer .cke_resizer { 204 margin-top: 21px; 205 } 206 203 207 /* tabs */ 204 208 205 209 .cke_skin_office2003 .cke_dialog_tabs -
_source/skins/v2/dialog.css
197 197 text-align: left; 198 198 } 199 199 200 .cke_skin_v2 .cke_dialog_footer .cke_resizer { 201 margin-top: 21px; 202 } 203 200 204 /* tabs */ 201 205 202 206 .cke_skin_v2 .cke_dialog_tabs