Ticket #4246: 4246_2.patch
File 4246_2.patch, 21.4 KB (added by , 14 years ago) |
---|
-
_source/lang/en.js
385 385 vSpace : 'VSpace', 386 386 align : 'Align', 387 387 alignLeft : 'Left', 388 alignAbsBottom: 'Abs Bottom',389 alignAbsMiddle: 'Abs Middle',390 alignBaseline : 'Baseline',391 alignBottom : 'Bottom',392 alignMiddle : 'Middle',393 388 alignRight : 'Right', 394 alignTextTop : 'Text Top',395 alignTop : 'Top',396 389 preview : 'Preview', 397 390 alertUrl : 'Please type the image URL', 398 391 linkTab : 'Link', -
_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 { … … 61 62 return 0; 62 63 }; 63 64 65 // Avoid recursions. 66 var incommit; 67 function commitImageStyleToFields( targetFields ) 68 { 69 if( incommit ) 70 return; 71 else 72 incommit = 1; 73 74 var dialog = this.getDialog(), 75 element = dialog.imageElement; 76 if( element ) 77 { 78 // Commit internally to update other related fields. 79 this.commit( IMAGE, element ); 80 targetFields = [].concat( targetFields ); 81 var length = targetFields.length, 82 field; 83 for ( var i = 0; i < length; i++ ) 84 { 85 field = dialog.getContentElement.apply( dialog, targetFields[ i ].split( ':' ) ); 86 // May cause recursion. 87 field && field.setup( IMAGE, element ); 88 } 89 } 90 incommit = 0; 91 } 92 64 93 var switchLockRatio = function( dialog, value ) 65 94 { 66 95 var oImageOriginal = dialog.originalElement, … … 138 167 139 168 if ( size ) 140 169 value = checkDimension( size, value ); 141 value = checkDimension( element. $.style[ dimension ], value );170 value = checkDimension( element.getStyle( dimension ), value ); 142 171 143 172 this.setValue( value ); 144 173 }; … … 252 281 if ( !this.imageElement ) 253 282 this.imageElement = element; 254 283 284 // Use clone from the original element since we don't want 285 // to temporary changes to be committed to the original when 286 // the dialog operation is finally been canceled. 287 this.originalImageElement = this.imageElement; 288 this.imageElement = this.originalImageElement.clone( true, true ); 289 255 290 // Fill out all fields. 256 291 this.setupContent( IMAGE, this.imageElement ); 257 292 … … 314 349 if ( !this.linkEditMode ) 315 350 this.linkElement = editor.document.createElement( 'a' ); 316 351 352 // Restore the original element before all commits. 353 this.imageElement = this.originalImageElement; 354 delete this.originalImageElement; 355 317 356 // Set attributes. 318 357 this.commitContent( IMAGE, this.imageElement ); 319 358 this.commitContent( LINK, this.linkElement ); … … 372 411 this.originalElement.remove(); 373 412 this.originalElement = false; // Dialog is closed. 374 413 } 414 415 delete this.imageElement; 375 416 }, 376 417 contents : [ 377 418 { … … 539 580 labelLayout : 'horizontal', 540 581 label : editor.lang.image.width, 541 582 onKeyUp : onSizeChange, 583 onChange : function() 584 { 585 commitImageStyleToFields.call( this, 'advanced:txtdlgGenStyle' ); 586 }, 542 587 validate: function() 543 588 { 544 589 var aMatch = this.getValue().match( regexGetSizeOrEmpty ); … … 547 592 return !!aMatch; 548 593 }, 549 594 setup : setupDimension, 550 commit : function( type, element )595 commit : function( type, element, internalCommit ) 551 596 { 597 var value = this.getValue(); 552 598 if ( type == IMAGE ) 553 599 { 554 var value = this.getValue();555 600 if ( value ) 556 element.setAttribute( 'width', value ); 557 else if ( !value && this.isChanged() ) 558 element.removeAttribute( 'width' ); 601 element.setStyle( 'width', CKEDITOR.tools.cssLength( value ) ); 602 else if ( !value && this.isChanged( ) ) 603 element.removeStyle( 'width' ); 604 605 !internalCommit && element.removeAttribute( 'width' ); 559 606 } 560 607 else if ( type == PREVIEW ) 561 608 { 562 value = this.getValue();563 609 var aMatch = value.match( regexGetSize ); 564 610 if ( !aMatch ) 565 611 { … … 572 618 } 573 619 else if ( type == CLEANUP ) 574 620 { 575 element.setStyle( 'width', '0px' ); // If removeAttribute doesn't work.576 621 element.removeAttribute( 'width' ); 577 622 element.removeStyle( 'width' ); 578 623 } … … 585 630 labelLayout : 'horizontal', 586 631 label : editor.lang.image.height, 587 632 onKeyUp : onSizeChange, 633 onChange : function() 634 { 635 commitImageStyleToFields.call( this, 'advanced:txtdlgGenStyle' ); 636 }, 588 637 validate: function() 589 638 { 590 639 var aMatch = this.getValue().match( regexGetSizeOrEmpty ); … … 593 642 return !!aMatch; 594 643 }, 595 644 setup : setupDimension, 596 commit : function( type, element )645 commit : function( type, element, internalCommit ) 597 646 { 647 var value = this.getValue(); 598 648 if ( type == IMAGE ) 599 649 { 600 var value = this.getValue();601 650 if ( value ) 602 element.setAttribute( 'height', value ); 603 else if ( !value && this.isChanged() ) 651 element.setStyle( 'height', CKEDITOR.tools.cssLength( value ) ); 652 else if ( !value && this.isChanged( ) ) 653 element.removeStyle( 'height' ); 654 655 if( !internalCommit && type == IMAGE ) 604 656 element.removeAttribute( 'height' ); 605 657 } 606 658 else if ( type == PREVIEW ) 607 659 { 608 value = this.getValue();609 660 var aMatch = value.match( regexGetSize ); 610 661 if ( !aMatch ) 611 662 { 612 663 var oImageOriginal = this.getDialog().originalElement; 613 664 if ( oImageOriginal.getCustomData( 'isReady' ) == 'true' ) 614 element.setStyle( 'height', oImageOriginal.$.height + 'px');665 element.setStyle( 'height', oImageOriginal.$.height + 'px' ); 615 666 } 616 667 else 617 element.setStyle( 'height', value + 'px' );668 element.setStyle( 'height', value + 'px' ); 618 669 } 619 670 else if ( type == CLEANUP ) 620 671 { 621 element.setStyle( 'height', '0px' ); // If removeAttribute doesn't work.622 672 element.removeAttribute( 'height' ); 623 673 element.removeStyle( 'height' ); 624 674 } … … 703 753 { 704 754 updatePreview( this.getDialog() ); 705 755 }, 756 onChange : function() 757 { 758 commitImageStyleToFields.call( this, 'advanced:txtdlgGenStyle' ); 759 }, 706 760 validate: function() 707 761 { 708 762 var func = CKEDITOR.dialog.validate.integer( editor.lang.common.validateNumberFailed ); … … 711 765 setup : function( type, element ) 712 766 { 713 767 if ( type == IMAGE ) 714 this.setValue( element.getAttribute( 'border' ) ); 768 { 769 var value, 770 borderStyle = element.getStyle( 'border-width' ); 771 772 borderStyle = borderStyle && borderStyle.match( /^(\d+px)(?: \1 \1 \1)?$/ ); 773 value = borderStyle && parseInt( borderStyle[ 1 ] ); 774 !value && ( value = element.getAttribute( 'border' ) ); 775 776 this.setValue( value ); 777 } 715 778 }, 716 commit : function( type, element )779 commit : function( type, element, internalCommit ) 717 780 { 718 if ( type == IMAGE ) 781 var value = parseInt( this.getValue() ); 782 if ( type == IMAGE || type == PREVIEW ) 719 783 { 720 if ( this.getValue() || this.isChanged() ) 721 element.setAttribute( 'border', this.getValue() ); 784 if ( value ) 785 element.setStyle( 'border', CKEDITOR.tools.cssLength( value ) + ' solid' ); 786 else if ( !value && this.isChanged() ) 787 element.removeStyle( 'border' ); 788 789 if( !internalCommit && type == IMAGE ) 790 element.removeAttribute( 'border' ); 722 791 } 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 792 else if ( type == CLEANUP ) 731 793 { 732 794 element.removeAttribute( 'border' ); … … 745 807 { 746 808 updatePreview( this.getDialog() ); 747 809 }, 810 onChange : function() 811 { 812 commitImageStyleToFields.call( this, 'advanced:txtdlgGenStyle' ); 813 }, 748 814 validate: function() 749 815 { 750 816 var func = CKEDITOR.dialog.validate.integer( editor.lang.common.validateNumberFailed ); … … 754 820 { 755 821 if ( type == IMAGE ) 756 822 { 757 var value = element.getAttribute( 'hspace' ); 758 if ( value != -1 ) // In IE empty = -1. 759 this.setValue( value ); 823 var value, 824 marginLeftPx, 825 marginRightPx, 826 marginLeftStyle = element.getStyle( 'margin-left' ), 827 marginRightStyle = element.getStyle( 'margin-right' ); 828 829 marginLeftStyle = marginLeftStyle && marginLeftStyle.match( pxLengthRegex ); 830 marginRightStyle = marginRightStyle && marginRightStyle.match( pxLengthRegex ); 831 marginLeftPx = parseInt( marginLeftStyle ); 832 marginRightPx = parseInt( marginRightStyle ); 833 834 value = ( marginLeftPx == marginRightPx ) && marginLeftPx; 835 !value && ( value = element.getAttribute( 'hspace' ) ); 836 837 this.setValue( value ); 760 838 } 761 839 }, 762 commit : function( type, element )840 commit : function( type, element, internalCommit ) 763 841 { 764 if ( type == IMAGE ) 842 var value = parseInt( this.getValue() ); 843 if ( type == IMAGE || type == PREVIEW ) 765 844 { 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 } 845 if ( value ) 846 { 847 element.setStyle( 'margin-left', CKEDITOR.tools.cssLength( value ) ); 848 element.setStyle( 'margin-right', CKEDITOR.tools.cssLength( value ) ); 849 } 850 else if ( !value && this.isChanged( ) ) 851 { 852 element.removeStyle( 'margin-left' ); 853 element.removeStyle( 'margin-right' ); 854 } 855 856 if( !internalCommit && type == IMAGE ) 857 element.removeAttribute( 'hspace' ); 858 } 777 859 else if ( type == CLEANUP ) 778 860 { 779 861 element.removeAttribute( 'hspace' ); … … 793 875 { 794 876 updatePreview( this.getDialog() ); 795 877 }, 878 onChange : function() 879 { 880 commitImageStyleToFields.call( this, 'advanced:txtdlgGenStyle' ); 881 }, 796 882 validate: function() 797 883 { 798 884 var func = CKEDITOR.dialog.validate.integer( editor.lang.common.validateNumberFailed ); … … 801 887 setup : function( type, element ) 802 888 { 803 889 if ( type == IMAGE ) 804 this.setValue( element.getAttribute( 'vspace' ) ); 890 { 891 var value, 892 marginTopPx, 893 marginBottomPx, 894 marginTopStyle = element.getStyle( 'margin-top' ), 895 marginBottomStyle = element.getStyle( 'margin-bottom' ); 896 897 marginTopStyle = marginTopStyle && marginTopStyle.match( pxLengthRegex ); 898 marginBottomStyle = marginBottomStyle && marginBottomStyle.match( pxLengthRegex ); 899 marginTopPx = parseInt( marginTopStyle ); 900 marginBottomPx = parseInt( marginBottomStyle ); 901 902 value = ( marginTopPx == marginBottomPx ) && marginTopPx; 903 !value && ( value = element.getAttribute( 'vspace' ) ); 904 this.setValue( value ); 905 } 906 805 907 }, 806 commit : function( type, element )908 commit : function( type, element, internalCommit ) 807 909 { 808 if ( type == IMAGE ) 910 var value = parseInt( this.getValue() ); 911 if ( type == IMAGE || type == PREVIEW ) 809 912 { 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 } 913 if ( value ) 914 { 915 element.setStyle( 'margin-top', CKEDITOR.tools.cssLength( value ) ); 916 element.setStyle( 'margin-bottom', CKEDITOR.tools.cssLength( value ) ); 917 } 918 else if ( !value && this.isChanged( ) ) 919 { 920 element.removeStyle( 'margin-top' ); 921 element.removeStyle( 'margin-bottom' ); 922 } 923 924 if( !internalCommit && type == IMAGE ) 925 element.removeAttribute( 'vspace' ); 926 } 821 927 else if ( type == CLEANUP ) 822 928 { 823 929 element.removeAttribute( 'vspace' ); … … 838 944 [ 839 945 [ editor.lang.common.notSet , ''], 840 946 [ editor.lang.image.alignLeft , 'left'], 841 [ editor.lang.image.alignAbsBottom , 'absBottom'],842 [ editor.lang.image.alignAbsMiddle , 'absMiddle'],843 [ editor.lang.image.alignBaseline , 'baseline'],844 [ editor.lang.image.alignBottom , 'bottom'],845 [ editor.lang.image.alignMiddle , 'middle'],846 947 [ editor.lang.image.alignRight , 'right'], 847 [ editor.lang.image.alignTextTop , 'textTop'], 848 [ editor.lang.image.alignTop , 'top'] 948 // Backward compatible with v2 on setup when specified as attribute value, 949 // while these values are no more available as select options. 950 // [ editor.lang.image.alignAbsBottom , 'absBottom'], 951 // [ editor.lang.image.alignAbsMiddle , 'absMiddle'], 952 // [ editor.lang.image.alignBaseline , 'baseline'], 953 // [ editor.lang.image.alignTextTop , 'text-top'], 954 // [ editor.lang.image.alignBottom , 'bottom'], 955 // [ editor.lang.image.alignMiddle , 'middle'], 956 // [ editor.lang.image.alignTop , 'top'] 849 957 ], 850 958 onChange : function() 851 959 { 852 960 updatePreview( this.getDialog() ); 961 commitImageStyleToFields.call( this, 'advanced:txtdlgGenStyle' ); 853 962 }, 854 963 setup : function( type, element ) 855 964 { 856 965 if ( type == IMAGE ) 857 this.setValue( element.getAttribute( 'align' ) ); 858 }, 859 commit : function( type, element ) 860 { 861 var value = this.getValue(); 862 if ( type == IMAGE ) 863 { 864 if ( value || this.isChanged() ) 865 element.setAttribute( 'align', value ); 866 } 867 else if ( type == PREVIEW ) 868 { 869 element.setAttribute( 'align', this.getValue() ); 966 { 967 var value = element.getStyle( 'float' ); 968 switch( value ) 969 { 970 // Ignore those unrelated values. 971 case 'inherit': 972 case 'none': 973 value = ''; 974 } 870 975 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' ); 877 878 if ( value == 'right' || value == 'left' ) 879 element.setStyle( 'styleFloat', value ); 880 else 881 element.removeStyle( 'styleFloat' ); 882 976 !value && ( value = ( element.getAttribute( 'align' ) || '' ).toLowerCase() ); 977 this.setValue( value ); 883 978 } 884 else if ( type == CLEANUP ) 885 { 886 element.removeAttribute( 'align' ); 887 } 888 } 889 } 979 }, 980 commit : function( type, element, internalCommit ) 981 { 982 var value = this.getValue(); 983 if ( type == IMAGE || type == PREVIEW ) 984 { 985 if ( value ) 986 element.setStyle( 'float', value ); 987 else if ( !value && this.isChanged( ) ) 988 element.removeStyle( 'float' ); 989 990 if( !internalCommit && type == IMAGE ) 991 { 992 value = ( element.getAttribute( 'align' ) || '' ).toLowerCase(); 993 switch( value ) 994 { 995 // we should remove it only if it matches "left" or "right", 996 // otherwise leave it intact. 997 case 'left': 998 case 'right': 999 element.removeAttribute( 'align' ); 1000 } 1001 } 1002 } 1003 else if ( type == CLEANUP ) 1004 element.removeStyle( 'float' ); 1005 1006 } 1007 } 890 1008 ] 891 1009 } 892 1010 ] … … 1188 1306 }; 1189 1307 } 1190 1308 }, 1309 onChange : function () 1310 { 1311 commitImageStyleToFields.call( this, 1312 [ 'info:cmbFloat', 'info:cmbAlign', 1313 'info:txtVSpace', 'info:txtHSpace', 1314 'info:txtBorder', 1315 'info:txtWidth', 'info:txtHeight' ] ); 1316 }, 1191 1317 commit : function( type, element ) 1192 1318 { 1193 1319 if ( type == IMAGE && ( this.getValue() || this.isChanged() ) ) 1194 1320 { 1195 1321 element.setAttribute( 'style', this.getValue() ); 1196 1197 // Set STYLE dimensions. 1198 var height = element.getAttribute( 'height' ), 1199 width = element.getAttribute( 'width' ); 1200 1201 if ( this.attributesInStyle && this.attributesInStyle.height ) 1202 { 1203 if ( height ) 1204 { 1205 if ( height.match( regexGetSize )[2] == '%' ) // % is allowed 1206 element.setStyle( 'height', height + '%' ); 1207 else 1208 element.setStyle( 'height', height + 'px' ); 1209 } 1210 else 1211 element.removeStyle( 'height' ); 1212 } 1213 if ( this.attributesInStyle && this.attributesInStyle.width ) 1214 { 1215 if ( width ) 1216 { 1217 if ( width.match( regexGetSize )[2] == '%' ) // % is allowed 1218 element.setStyle( 'width', width + '%' ); 1219 else 1220 element.setStyle( 'width', width + 'px' ); 1221 } 1222 else 1223 element.removeStyle( 'width' ); 1224 } 1225 } 1226 } 1227 } 1322 } 1323 } 1324 } 1228 1325 ] 1229 1326 } 1230 1327 ]