Ticket #5084: 5084_9.patch
| File 5084_9.patch, 18.6 KB (added by , 13 years ago) |
|---|
-
_source/core/dom/element.js
1538 1538 }, 1539 1539 1540 1540 /** 1541 * Update the element's size with box model awareness.1542 * @name CKEDITOR.dom.element.setSize1543 * @param {String} type [width|height]1544 * @param {Number} size The length unit in px.1545 * @param isBorderBox Apply the {@param width} and {@param height} based on border box model.1546 */1547 setSize : ( function()1548 {1549 var sides = {1550 width : [ "border-left-width", "border-right-width","padding-left", "padding-right" ],1551 height : [ "border-top-width", "border-bottom-width", "padding-top", "padding-bottom" ]1552 };1553 1554 return function( type, size, isBorderBox )1555 {1556 if ( typeof size == 'number' )1557 {1558 if ( isBorderBox && !( CKEDITOR.env.ie && CKEDITOR.env.quirks ) )1559 {1560 var adjustment = 0;1561 for ( var i = 0, len = sides[ type ].length; i < len; i++ )1562 adjustment += parseInt( this.getComputedStyle( sides [ type ][ i ] ) || 0, 10 ) || 0;1563 size -= adjustment;1564 }1565 this.setStyle( type, size + 'px' );1566 }1567 };1568 })(),1569 1570 /**1571 1541 * Gets element's direction. Supports both CSS 'direction' prop and 'dir' attr. 1572 1542 */ 1573 1543 getDirection : function( useComputed ) … … 1592 1562 this.setAttribute( name, value ); 1593 1563 } 1594 1564 }); 1565 1566 ( function() 1567 { 1568 var sides = { 1569 width : [ "border-left-width", "border-right-width","padding-left", "padding-right" ], 1570 height : [ "border-top-width", "border-bottom-width", "padding-top", "padding-bottom" ] 1571 }; 1572 1573 function marginAndPaddingSize( type ) 1574 { 1575 var adjustment = 0; 1576 for ( var i = 0, len = sides[ type ].length; i < len; i++ ) 1577 adjustment += parseInt( this.getComputedStyle( sides [ type ][ i ] ) || 0, 10 ) || 0; 1578 return adjustment; 1579 } 1580 1581 /** 1582 * Update the element's size with box model awareness. 1583 * @name CKEDITOR.dom.element.setSize 1584 * @param {String} type [width|height] 1585 * @param {Number} size The length unit in px. 1586 * @param isBorderBox Apply the {@param width} and {@param height} based on border box model. 1587 */ 1588 CKEDITOR.dom.element.prototype.setSize = function( type, size, isBorderBox ) 1589 { 1590 if ( typeof size == 'number' ) 1591 { 1592 if ( isBorderBox && !( CKEDITOR.env.ie && CKEDITOR.env.quirks ) ) 1593 size -= marginAndPaddingSize.call( this, type ); 1594 1595 this.setStyle( type, size + 'px' ); 1596 } 1597 }; 1598 1599 /** 1600 * Get the element's size, possibly with box model awareness. 1601 * @name CKEDITOR.dom.element.getSize 1602 * @param {String} type [width|height] 1603 * @param {Boolean} contentSize Get the {@param width} or {@param height} based on border box model. 1604 */ 1605 CKEDITOR.dom.element.prototype.getSize = function( type, contentSize ) 1606 { 1607 var size = Math.max( this.$[ 'offset' + CKEDITOR.tools.capitalize( type ) ], 1608 this.$[ 'client' + CKEDITOR.tools.capitalize( type ) ] ) || 0; 1609 1610 if ( contentSize ) 1611 size -= marginAndPaddingSize.call( this, type ); 1612 1613 return size; 1614 }; 1615 })(); -
_source/plugins/dialog/plugin.js
126 126 // functions. 127 127 definition = new definitionObject( this, definition ); 128 128 129 130 129 var doc = CKEDITOR.document; 131 130 132 131 var themeBuilt = editor.theme.buildDialog( editor ); … … 139 138 name : dialogName, 140 139 contentSize : { width : 0, height : 0 }, 141 140 size : { width : 0, height : 0 }, 142 updateSize : false,143 141 contents : {}, 144 142 buttons : {}, 145 143 accessKeyMap : {}, … … 638 636 }, this._.editor ); 639 637 640 638 this._.contentSize = { width : width, height : height }; 641 this._.updateSize = true;642 639 }; 643 640 })(), 644 641 … … 650 647 */ 651 648 getSize : function() 652 649 { 653 if ( !this._.updateSize )654 return this._.size;655 650 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; 651 return { width : element.$.offsetWidth || 0, height : element.$.offsetHeight || 0}; 662 652 }, 663 653 664 654 /** … … 666 656 * @function 667 657 * @param {Number} x The target x-coordinate. 668 658 * @param {Number} y The target y-coordinate. 659 * @param {Boolean} save Flag indicate whether the dialog position should be remembered on next open up. 669 660 * @example 670 661 * dialogObj.move( 10, 40 ); 671 662 */ 672 663 move : (function() 673 664 { 674 665 var isFixed; 675 return function( x, y )666 return function( x, y, save ) 676 667 { 677 668 // The dialog may be fixed positioned or absolute positioned. Ask the 678 669 // browser what is the current situation first. … … 699 690 'left' : ( x > 0 ? x : 0 ) + 'px', 700 691 'top' : ( y > 0 ? y : 0 ) + 'px' 701 692 }); 693 694 save && ( this._.moved = 1 ); 702 695 }; 703 696 })(), 704 697 … … 746 739 747 740 748 741 // First, set the dialog to an appropriate size. 749 this.resize( definition.minWidth, definition.minHeight ); 742 this.resize( this._.contentSize && this._.contentSize.width || definition.minWidth, 743 this._.contentSize && this._.contentSize.height || definition.minHeight ); 750 744 751 745 // Reset all inputs back to their default value. 752 746 this.reset(); … … 791 785 // Reset the hasFocus state. 792 786 this._.hasFocus = false; 793 787 794 // Rearrange the dialog to the middle of the window.795 788 CKEDITOR.tools.setTimeout( function() 796 789 { 797 var viewSize = CKEDITOR.document.getWindow().getViewPaneSize(); 798 var dialogSize = this.getSize(); 799 800 // We're using definition size for initial position because of 801 // offten corrupted data in offsetWidth at this point. (#4084) 802 this.move( ( viewSize.width - definition.minWidth ) / 2, ( viewSize.height - dialogSize.height ) / 2 ); 803 790 this.layout(); 804 791 this.parts.dialog.setStyle( 'visibility', '' ); 805 792 806 793 // Execute onLoad for the first show. … … 816 803 }, 817 804 818 805 /** 806 * Rearrange the dialog to its previous position or the middle of the window. 807 * @since 3.5 808 */ 809 layout : function() 810 { 811 var viewSize = CKEDITOR.document.getWindow().getViewPaneSize(), 812 dialogSize = this.getSize(); 813 814 this.move( this._.moved ? this._.position.x : ( viewSize.width - dialogSize.width ) / 2, 815 this._.moved ? this._.position.y : ( viewSize.height - dialogSize.height ) / 2 ); 816 }, 817 818 /** 819 819 * Executes a function for each UI element. 820 820 * @param {Function} fn Function to execute for each UI element. 821 821 * @returns {CKEDITOR.dialog} The current dialog object. … … 1648 1648 if ( abstractDialogCoords.x + margins[3] < magnetDistance ) 1649 1649 realX = - margins[3]; 1650 1650 else if ( abstractDialogCoords.x - margins[1] > viewPaneSize.width - dialogSize.width - magnetDistance ) 1651 realX = viewPaneSize.width - dialogSize.width + margins[1];1651 realX = viewPaneSize.width - dialogSize.width + ( editor.lang.dir == 'rtl' ? 0 : margins[1] ); 1652 1652 else 1653 1653 realX = abstractDialogCoords.x; 1654 1654 … … 1659 1659 else 1660 1660 realY = abstractDialogCoords.y; 1661 1661 1662 dialog.move( realX, realY );1662 dialog.move( realX, realY, 1 ); 1663 1663 1664 1664 evt.data.preventDefault(); 1665 1665 } … … 1679 1679 1680 1680 dialog.parts.title.on( 'mousedown', function( evt ) 1681 1681 { 1682 dialog._.updateSize = true;1683 1684 1682 lastCoords = { x : evt.data.$.screenX, y : evt.data.$.screenY }; 1685 1683 1686 1684 CKEDITOR.document.on( 'mousemove', mouseMoveHandler ); … … 1700 1698 1701 1699 function initResizeHandles( dialog ) 1702 1700 { 1703 var definition = dialog.definition, 1704 minWidth = definition.minWidth || 0, 1705 minHeight = definition.minHeight || 0, 1706 resizable = definition.resizable, 1707 margins = dialog.getParentEditor().skin.margins || [ 0, 0, 0, 0 ]; 1701 var def = dialog.definition, 1702 resizable = def.resizable; 1708 1703 1709 function topSizer( coords, dy ) 1710 { 1711 coords.y += dy; 1712 } 1704 if ( resizable == CKEDITOR.DIALOG_RESIZE_NONE ) 1705 return; 1713 1706 1714 function rightSizer( coords, dx ) 1715 { 1716 coords.x2 += dx; 1717 } 1707 var editor = dialog.getParentEditor(); 1708 var wrapperWidth, wrapperHeight, viewSize, origin, startSize; 1718 1709 1719 function bottomSizer( coords, dy)1710 function positionDialog( right ) 1720 1711 { 1721 coords.y2 += dy; 1712 // Maintain righthand sizing in RTL. 1713 if ( dialog._.moved && editor.lang.dir == 'rtl' ) 1714 { 1715 var element = dialog._.element.getFirst(); 1716 element.setStyle( 'right', right + "px" ); 1717 element.removeStyle( 'left' ); 1718 } 1719 else if ( !dialog._.moved ) 1720 dialog.layout(); 1722 1721 } 1723 1722 1724 function leftSizer( coords, dx)1723 var mouseDownFn = CKEDITOR.tools.addFunction( function( $event ) 1725 1724 { 1726 coords.x += dx; 1727 } 1725 startSize = dialog.getSize(); 1728 1726 1729 var lastCoords = null, 1730 abstractDialogCoords = null, 1731 magnetDistance = dialog._.editor.config.magnetDistance, 1732 parts = [ 'tl', 't', 'tr', 'l', 'r', 'bl', 'b', 'br' ]; 1727 // Calculate the offset between content and chrome size. 1728 wrapperHeight = startSize.height - dialog.parts.contents.getSize( 'height', ! ( CKEDITOR.env.gecko || CKEDITOR.env.opera || CKEDITOR.env.ie && CKEDITOR.env.quirks ) ); 1729 wrapperWidth = startSize.width - dialog.parts.contents.getSize( 'width', 1 ); 1733 1730 1734 function mouseDownHandler( evt ) 1735 { 1736 var partName = evt.listenerData.part, size = dialog.getSize(); 1737 abstractDialogCoords = dialog.getPosition(); 1738 CKEDITOR.tools.extend( abstractDialogCoords, 1739 { 1740 x2 : abstractDialogCoords.x + size.width, 1741 y2 : abstractDialogCoords.y + size.height 1742 } ); 1743 lastCoords = { x : evt.data.$.screenX, y : evt.data.$.screenY }; 1731 origin = { x : $event.screenX, y : $event.screenY }; 1744 1732 1745 CKEDITOR.document.on( 'mousemove', mouseMoveHandler, dialog, { part : partName } ); 1746 CKEDITOR.document.on( 'mouseup', mouseUpHandler, dialog, { part : partName } ); 1733 viewSize = CKEDITOR.document.getWindow().getViewPaneSize(); 1747 1734 1735 CKEDITOR.document.on( 'mousemove', mouseMoveHandler ); 1736 CKEDITOR.document.on( 'mouseup', mouseUpHandler ); 1737 1748 1738 if ( CKEDITOR.env.ie6Compat ) 1749 1739 { 1750 1740 var coverDoc = currentCover.getChild( 0 ).getFrameDocument(); 1751 coverDoc.on( 'mousemove', mouseMoveHandler , dialog, { part : partName });1752 coverDoc.on( 'mouseup', mouseUpHandler , dialog, { part : partName });1741 coverDoc.on( 'mousemove', mouseMoveHandler ); 1742 coverDoc.on( 'mouseup', mouseUpHandler ); 1753 1743 } 1754 1744 1755 evt.data.preventDefault();1756 } 1745 $event.preventDefault && $event.preventDefault(); 1746 }); 1757 1747 1748 // Prepend the grip to the dialog. 1749 dialog.on( 'load', function() 1750 { 1751 var direction = ''; 1752 if ( resizable == CKEDITOR.DIALOG_RESIZE_WIDTH ) 1753 direction = ' cke_resizer_horizontal'; 1754 else if ( resizable == CKEDITOR.DIALOG_RESIZE_HEIGHT ) 1755 direction = ' cke_resizer_vertical'; 1756 var resizer = CKEDITOR.dom.element.createFromHtml( '<div class="cke_resizer' + direction + '"' + 1757 ' title="' + CKEDITOR.tools.htmlEncode( editor.lang.resize ) + '"' + 1758 ' onmousedown="CKEDITOR.tools.callFunction(' + mouseDownFn + ', event )"></div>' ); 1759 dialog.parts.footer.append( resizer, 1 ); 1760 }); 1761 editor.on( 'destroy', function() { CKEDITOR.tools.removeFunction( mouseDownFn ); } ); 1762 1758 1763 function mouseMoveHandler( evt ) 1759 1764 { 1760 var x = evt.data.$.screenX, 1761 y = evt.data.$.screenY, 1762 dx = x - lastCoords.x, 1763 dy = y - lastCoords.y, 1764 viewPaneSize = CKEDITOR.document.getWindow().getViewPaneSize(), 1765 partName = evt.listenerData.part; 1765 var rtl = editor.lang.dir == 'rtl', 1766 dx = ( evt.data.$.screenX - origin.x ) * ( rtl ? -1 : 1 ), 1767 dy = evt.data.$.screenY - origin.y, 1768 width = startSize.width, 1769 height = startSize.height, 1770 internalWidth = width + dx * ( dialog._.moved ? 1 : 2 ), 1771 internalHeight = height + dy * ( dialog._.moved ? 1 : 2 ), 1772 element = dialog._.element.getFirst(), 1773 right = rtl && element.getComputedStyle( 'right' ), 1774 position = dialog.getPosition(); 1766 1775 1767 if ( partName.search( 't' ) != -1 ) 1768 topSizer( abstractDialogCoords, dy ); 1769 if ( partName.search( 'l' ) != -1 ) 1770 leftSizer( abstractDialogCoords, dx ); 1771 if ( partName.search( 'b' ) != -1 ) 1772 bottomSizer( abstractDialogCoords, dy ); 1773 if ( partName.search( 'r' ) != -1 ) 1774 rightSizer( abstractDialogCoords, dx ); 1776 // IE might return "auto", we need exact position. 1777 if ( right ) 1778 right = right == 'auto' ? viewSize.width - ( position.x || 0 ) - element.getSize( 'width' ) : parseInt( right, 10 ); 1775 1779 1776 lastCoords = { x : x, y : y }; 1780 if ( position.y + internalHeight > viewSize.height ) 1781 internalHeight = viewSize.height - position.y; 1777 1782 1778 var realX, realY, realX2, realY2; 1783 if ( ( rtl ? right : position.x ) + internalWidth > viewSize.width ) 1784 internalWidth = viewSize.width - ( rtl ? right : position.x ); 1779 1785 1780 if ( abstractDialogCoords.x + margins[3] < magnetDistance ) 1781 realX = - margins[3]; 1782 else if ( partName.search( 'l' ) != -1 && abstractDialogCoords.x2 - abstractDialogCoords.x < minWidth + magnetDistance ) 1783 realX = abstractDialogCoords.x2 - minWidth; 1784 else 1785 realX = abstractDialogCoords.x; 1786 // Make sure the dialog will not be resized to the wrong side when it's in the leftmost position for RTL. 1787 if ( ( resizable == CKEDITOR.DIALOG_RESIZE_WIDTH || resizable == CKEDITOR.DIALOG_RESIZE_BOTH ) && !( rtl && dx > 0 && !position.x ) ) 1788 width = Math.max( def.minWidth || 0, internalWidth - wrapperWidth ); 1786 1789 1787 if ( abstractDialogCoords.y + margins[0] < magnetDistance ) 1788 realY = - margins[0]; 1789 else if ( partName.search( 't' ) != -1 && abstractDialogCoords.y2 - abstractDialogCoords.y < minHeight + magnetDistance ) 1790 realY = abstractDialogCoords.y2 - minHeight; 1791 else 1792 realY = abstractDialogCoords.y; 1790 if ( resizable == CKEDITOR.DIALOG_RESIZE_HEIGHT || resizable == CKEDITOR.DIALOG_RESIZE_BOTH ) 1791 height = Math.max( def.minHeight || 0, internalHeight - wrapperHeight ); 1793 1792 1794 if ( abstractDialogCoords.x2 - margins[1] > viewPaneSize.width - magnetDistance ) 1795 realX2 = viewPaneSize.width + margins[1] ; 1796 else if ( partName.search( 'r' ) != -1 && abstractDialogCoords.x2 - abstractDialogCoords.x < minWidth + magnetDistance ) 1797 realX2 = abstractDialogCoords.x + minWidth; 1798 else 1799 realX2 = abstractDialogCoords.x2; 1793 dialog.resize( width, height ); 1794 // The right property might get broken during resizing, so computing it before the resizing. 1795 positionDialog( right ); 1800 1796 1801 if ( abstractDialogCoords.y2 - margins[2] > viewPaneSize.height - magnetDistance )1802 realY2= viewPaneSize.height + margins[2] ;1803 else if ( partName.search( 'b' ) != -1 && abstractDialogCoords.y2 - abstractDialogCoords.y < minHeight + magnetDistance )1804 realY2 = abstractDialogCoords.y + minHeight;1805 else1806 realY2 = abstractDialogCoords.y2 ;1807 1808 dialog.move( realX, realY );1809 dialog.resize( realX2 - realX, realY2 - realY );1810 1811 1797 evt.data.preventDefault(); 1812 1798 } 1813 1799 1814 function mouseUpHandler( evt)1800 function mouseUpHandler() 1815 1801 { 1816 1802 CKEDITOR.document.removeListener( 'mouseup', mouseUpHandler ); 1817 1803 CKEDITOR.document.removeListener( 'mousemove', mouseMoveHandler ); … … 1822 1808 coverDoc.removeListener( 'mouseup', mouseUpHandler ); 1823 1809 coverDoc.removeListener( 'mousemove', mouseMoveHandler ); 1824 1810 } 1825 }1826 1811 1827 // TODO : Simplify the resize logic, having just a single resize grip <div>. 1828 // var widthTest = /[lr]/, 1829 // heightTest = /[tb]/; 1830 // for ( var i = 0 ; i < parts.length ; i++ ) 1831 // { 1832 // var element = dialog.parts[ parts[i] + '_resize' ]; 1833 // if ( resizable == CKEDITOR.DIALOG_RESIZE_NONE || 1834 // resizable == CKEDITOR.DIALOG_RESIZE_HEIGHT && widthTest.test( parts[i] ) || 1835 // resizable == CKEDITOR.DIALOG_RESIZE_WIDTH && heightTest.test( parts[i] ) ) 1836 // { 1837 // element.hide(); 1838 // continue; 1839 // } 1840 // element.on( 'mousedown', mouseDownHandler, dialog, { part : parts[i] } ); 1841 // } 1812 // Switch back to use the left property, if RTL is used. 1813 if ( editor.lang.dir == 'rtl' ) 1814 { 1815 var element = dialog._.element.getFirst(), 1816 left = element.getComputedStyle( 'left' ); 1817 1818 // IE might return "auto", we need exact position. 1819 if ( left == 'auto' ) 1820 left = viewSize.width - parseInt( element.getStyle( 'right' ), 10 ) - dialog.getSize().width; 1821 else 1822 left = parseInt( left, 10 ); 1823 1824 element.removeStyle( 'right' ); 1825 // Make sure the left property gets applied, even if it is the same as previously. 1826 dialog._.position.x += 1; 1827 dialog.move( left, dialog._.position.y ); 1828 } 1829 } 1842 1830 } 1843 1831 1844 1832 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 { 107 margin-top: 20px; 108 } 109 .cke_skin_kama .cke_browser_iequirks .cke_dialog_footer .cke_resizer, 110 .cke_skin_kama .cke_browser_ie6 .cke_dialog_footer .cke_resizer 111 { 112 margin-top: 27px; 113 } 114 105 115 /* tabs */ 106 116 107 117 .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
