Ticket #4246: 4246.patch
File 4246.patch, 16.0 KB (added by , 14 years ago) |
---|
-
_source/lang/en.js
384 384 hSpace : 'HSpace', 385 385 vSpace : 'VSpace', 386 386 align : 'Align', 387 float : 'Float', 388 floatLeft : 'Float Left', 389 floatRight : 'Float Right', 387 390 alignLeft : 'Left', 388 391 alignAbsBottom: 'Abs Bottom', 389 392 alignAbsMiddle: 'Abs Middle', -
_source/plugins/image/dialogs/image.js
11 11 PREVIEW = 4, 12 12 CLEANUP = 8, 13 13 regexGetSize = /^\s*(\d+)((px)|\%)?\s*$/i, 14 regexGetSizeOrEmpty = /(^\s*(\d+)((px)|\%)?\s*$)|^$/i; 14 regexGetSizeOrEmpty = /(^\s*(\d+)((px)|\%)?\s*$)|^$/i, 15 pxLengthRegex = /^\d+px$/; 15 16 16 17 var onSizeChange = function() 17 18 { … … 138 139 139 140 if ( size ) 140 141 value = checkDimension( size, value ); 141 value = checkDimension( element.$.style[ dimension ], value );142 142 143 value = checkDimension( element.getStyle( dimension ), value ); 144 143 145 this.setValue( value ); 144 146 }; 145 147 … … 549 551 setup : setupDimension, 550 552 commit : function( type, element ) 551 553 { 554 var value = this.getValue(); 552 555 if ( type == IMAGE ) 553 556 { 554 var value = this.getValue();555 557 if ( value ) 556 element.setAttribute( 'width', value ); 557 else if ( !value && this.isChanged() ) 558 element.removeAttribute( 'width' ); 558 element.setStyle( 'width', CKEDITOR.tools.cssLength( value ) ); 559 else if ( !value && this.isChanged( ) ) 560 element.removeStyle( 'width' ); 561 562 element.removeAttribute( 'width' ); 559 563 } 560 564 else if ( type == PREVIEW ) 561 565 { 562 value = this.getValue();563 566 var aMatch = value.match( regexGetSize ); 564 567 if ( !aMatch ) 565 568 { … … 572 575 } 573 576 else if ( type == CLEANUP ) 574 577 { 575 element.setStyle( 'width', '0px' ); // If removeAttribute doesn't work.576 578 element.removeAttribute( 'width' ); 577 579 element.removeStyle( 'width' ); 578 580 } … … 595 597 setup : setupDimension, 596 598 commit : function( type, element ) 597 599 { 600 var value = this.getValue(); 598 601 if ( type == IMAGE ) 599 602 { 600 var value = this.getValue();601 603 if ( value ) 602 element.setAttribute( 'height', value ); 603 else if ( !value && this.isChanged() ) 604 element.removeAttribute( 'height' ); 604 element.setStyle( 'height', CKEDITOR.tools.cssLength( value ) ); 605 else if ( !value && this.isChanged( ) ) 606 element.removeStyle( 'height' ); 607 608 element.removeAttribute( 'height' ); 605 609 } 606 610 else if ( type == PREVIEW ) 607 611 { 608 value = this.getValue();609 612 var aMatch = value.match( regexGetSize ); 610 613 if ( !aMatch ) 611 614 { 612 615 var oImageOriginal = this.getDialog().originalElement; 613 616 if ( oImageOriginal.getCustomData( 'isReady' ) == 'true' ) 614 element.setStyle( 'height', oImageOriginal.$.height + 'px');617 element.setStyle( 'height', oImageOriginal.$.height + 'px' ); 615 618 } 616 619 else 617 element.setStyle( 'height', value + 'px' );620 element.setStyle( 'height', value + 'px' ); 618 621 } 619 622 else if ( type == CLEANUP ) 620 623 { 621 element.setStyle( 'height', '0px' ); // If removeAttribute doesn't work.622 624 element.removeAttribute( 'height' ); 623 625 element.removeStyle( 'height' ); 624 626 } … … 711 713 setup : function( type, element ) 712 714 { 713 715 if ( type == IMAGE ) 714 this.setValue( element.getAttribute( 'border' ) ); 716 { 717 var value, 718 borderStyle = element.getStyle( 'border-width' ); 719 720 borderStyle = borderStyle && borderStyle.match( /^(\d+px)(?: \1 \1 \1)?$/ ); 721 value = borderStyle && parseInt( borderStyle[ 1 ] ); 722 !value && ( value = element.getAttribute( 'border' ) ); 723 724 this.setValue( value ); 725 } 715 726 }, 716 727 commit : function( type, element ) 717 728 { 718 if ( type == IMAGE ) 729 var value = this.getValue(); 730 if ( type == IMAGE || type == PREVIEW ) 719 731 { 720 if ( this.getValue() || this.isChanged() ) 721 element.setAttribute( 'border', this.getValue() ); 732 if ( value ) 733 element.setStyle( 'border', CKEDITOR.tools.cssLength( value ) + ' solid' ); 734 else if ( !value && this.isChanged( ) ) 735 element.removeStyle( 'border' ); 736 737 element.removeAttribute( 'border' ); 722 738 } 723 else if ( type == PREVIEW )724 {725 var value = parseInt( this.getValue(), 10 );726 value = isNaN( value ) ? 0 : value;727 element.setAttribute( 'border', value );728 element.setStyle( 'border', value + 'px solid black' );729 }730 739 else if ( type == CLEANUP ) 731 740 { 732 741 element.removeAttribute( 'border' ); … … 754 763 { 755 764 if ( type == IMAGE ) 756 765 { 757 var value = element.getAttribute( 'hspace' ); 758 if ( value != -1 ) // In IE empty = -1. 759 this.setValue( value ); 766 var value, 767 marginLeftPx, 768 marginRightPx, 769 marginLeftStyle = element.getStyle( 'margin-left' ), 770 marginRightStyle = element.getStyle( 'margin-right' ); 771 772 marginLeftStyle = marginLeftStyle && marginLeftStyle.match( pxLengthRegex ); 773 marginRightStyle = marginRightStyle && marginRightStyle.match( pxLengthRegex ); 774 marginLeftPx = parseInt( marginLeftStyle ); 775 marginRightPx = parseInt( marginRightStyle ); 776 value = ( marginLeftPx == marginRightPx ) && marginLeftPx; 777 !value && ( value = element.getAttribute( 'hspace' ) ); 778 779 this.setValue( value ); 760 780 } 761 781 }, 762 782 commit : function( type, element ) 763 783 { 764 if ( type == IMAGE ) 784 var value = this.getValue(); 785 if ( type == IMAGE || type == PREVIEW ) 765 786 { 766 if ( this.getValue() || this.isChanged())767 element.setAttribute( 'hspace', this.getValue() );768 }769 else if ( type == PREVIEW )770 {771 var value = parseInt( this.getValue(), 10 );772 value = isNaN( value ) ? 0 : value;773 element.setAttribute( 'hspace', value);774 element.setStyle( 'margin-left', value + 'px' );775 element.setStyle( 'margin-right', value + 'px' );776 } 787 if ( value ) 788 { 789 element.setStyle( 'margin-left', CKEDITOR.tools.cssLength( value ) ); 790 element.setStyle( 'margin-right', CKEDITOR.tools.cssLength( value ) ); 791 } 792 else if ( !value && this.isChanged( ) ) 793 { 794 element.removeStyle( 'margin-left' ); 795 element.removeStyle( 'margin-right' ); 796 } 797 } 777 798 else if ( type == CLEANUP ) 778 799 { 779 800 element.removeAttribute( 'hspace' ); … … 801 822 setup : function( type, element ) 802 823 { 803 824 if ( type == IMAGE ) 804 this.setValue( element.getAttribute( 'vspace' ) ); 825 { 826 var value, 827 marginTopPx, 828 marginBottomPx, 829 marginTopStyle = element.getStyle( 'margin-top' ), 830 marginBottomStyle = element.getStyle( 'margin-bottom' ); 831 832 marginTopStyle = marginTopStyle && marginTopStyle.match( pxLengthRegex ); 833 marginBottomStyle = marginBottomStyle && marginBottomStyle.match( pxLengthRegex ); 834 marginTopPx = parseInt( marginTopStyle ); 835 marginBottomPx = parseInt( marginBottomStyle ); 836 value = ( marginTopPx == marginBottomPx ) && marginTopPx; 837 !value && ( value = element.getAttribute( 'vspace' ) ); 838 839 this.setValue( value ); 840 } 841 805 842 }, 806 843 commit : function( type, element ) 807 844 { 808 if ( type == IMAGE ) 845 var value = this.getValue(); 846 if ( type == IMAGE || type == PREVIEW ) 809 847 { 810 if ( this.getValue() || this.isChanged())811 element.setAttribute( 'vspace', this.getValue() );812 }813 else if ( type == PREVIEW )814 {815 var value = parseInt( this.getValue(), 10 );816 value = isNaN( value ) ? 0 : value;817 element.setAttribute( 'vspace', this.getValue());818 element.setStyle( 'margin-top', value + 'px' );819 element.setStyle( 'margin-bottom', value + 'px' );820 } 848 if ( value ) 849 { 850 element.setStyle( 'margin-top', CKEDITOR.tools.cssLength( value ) ); 851 element.setStyle( 'margin-bottom', CKEDITOR.tools.cssLength( value ) ); 852 } 853 else if ( !value && this.isChanged( ) ) 854 { 855 element.removeStyle( 'margin-top' ); 856 element.removeStyle( 'margin-bottom' ); 857 } 858 } 821 859 else if ( type == CLEANUP ) 822 860 { 823 861 element.removeAttribute( 'vspace' ); … … 838 876 [ 839 877 [ editor.lang.common.notSet , ''], 840 878 [ editor.lang.image.alignLeft , 'left'], 841 [ editor.lang.image.alignAbsBottom , 'absBottom'], 842 [ editor.lang.image.alignAbsMiddle , 'absMiddle'], 879 // Backward compatible with v2 on setup when specified as attribute value, 880 // while these values are no more available as select options. 881 // [ editor.lang.image.alignAbsBottom , 'absBottom'], 882 // [ editor.lang.image.alignAbsMiddle , 'absMiddle'], 843 883 [ editor.lang.image.alignBaseline , 'baseline'], 884 [ editor.lang.image.alignTextTop , 'text-top'], 844 885 [ editor.lang.image.alignBottom , 'bottom'], 845 886 [ editor.lang.image.alignMiddle , 'middle'], 846 887 [ editor.lang.image.alignRight , 'right'], 847 [ editor.lang.image.alignTextTop , 'textTop'],848 888 [ editor.lang.image.alignTop , 'top'] 849 889 ], 850 890 onChange : function() … … 854 894 setup : function( type, element ) 855 895 { 856 896 if ( type == IMAGE ) 857 this.setValue( element.getAttribute( 'align' ) ); 897 { 898 var value = element.getStyle( 'vertical-align' ); 899 900 if( !value ) 901 { 902 var alignAttr = element.getAttribute( 'align' ); 903 alignAttr && ( alignAttr = alignAttr.toLowerCase() ); 904 905 switch( alignAttr ) 906 { 907 case 'texttop' : 908 value = 'text-top'; 909 break; 910 911 // Migrate values from 'align' attribute. 912 case 'absbottom' : 913 case 'absmiddle' : 914 value = alignAttr.substring( 3, alignAttr.length ).toLowerCase(); 915 break; 916 917 // Ignore those values should handled by 'float' style. 918 case 'left': 919 case 'right': 920 value = ''; 921 } 922 } 923 924 this.setValue( value ); 925 } 858 926 }, 859 927 commit : function( type, element ) 860 928 { 861 929 var value = this.getValue(); 862 if ( type == IMAGE )930 if ( type == IMAGE || type == PREVIEW ) 863 931 { 864 if ( value || this.isChanged() ) 865 element.setAttribute( 'align', value ); 932 if ( value ) 933 element.setStyle( 'vertical-align', value ); 934 else if ( !value && this.isChanged( ) ) 935 element.removeStyle( 'vertical-align' ); 866 936 } 867 else if ( type == PREVIEW ) 868 { 869 element.setAttribute( 'align', this.getValue() ); 937 else if ( type == CLEANUP ) 938 element.removeStyle( 'vertical-align' ); 939 } 940 }, 941 { 942 id : 'cmbFloat', 943 type : 'select', 944 labelLayout : 'horizontal', 945 widths : [ '35%','65%' ], 946 style : 'width:90px', 947 label : editor.lang.image.float, 948 'default' : '', 949 items : 950 [ 951 [ editor.lang.common.notSet , ''], 952 [ editor.lang.image.floatLeft , 'left'], 953 [ editor.lang.image.floatRight , 'right'], 954 ], 955 onChange : function() 956 { 957 updatePreview( this.getDialog() ); 958 }, 959 setup : function( type, element ) 960 { 961 if ( type == IMAGE ) 962 { 963 var value, 964 floatStyle = element.getStyle( 'float' ); 870 965 871 if ( value == 'absMiddle' || value == 'middle' ) 872 element.setStyle( 'vertical-align', 'middle' ); 873 else if ( value == 'top' || value == 'textTop' ) 874 element.setStyle( 'vertical-align', 'top' ); 875 else 876 element.removeStyle( 'vertical-align' ); 966 if( floatStyle && floatStyle != 'none' ) 967 value = floatStyle; 877 968 878 if ( value == 'right' || value == 'left' ) 879 element.setStyle( 'styleFloat', value ); 880 else 881 element.removeStyle( 'styleFloat' ); 969 if( !value ) 970 { 971 var alignAttr = element.getAttribute( 'align' ); 972 if( alignAttr == 'left' || alignAttr == 'right' ) 973 value = alignAttr; 974 } 882 975 976 this.setValue( value ); 883 977 } 884 else if ( type == CLEANUP ) 885 { 886 element.removeAttribute( 'align' ); 978 }, 979 commit : function( type, element ) 980 { 981 var value = this.getValue(); 982 if ( type == IMAGE || type == PREVIEW ) 983 { 984 if ( value ) 985 element.setStyle( 'float', value ); 986 else if ( !value && this.isChanged( ) ) 987 element.removeStyle( 'float' ); 887 988 } 989 else if ( type == CLEANUP ) 990 element.removeStyle( 'float' ); 888 991 } 889 992 } 890 993 ]