| [ Index ] |
PHP Cross Reference of Drupal 6 (gatewave) |
[Summary view] [Print] [Text view]
1 /* 2 Copyright (c) 2003-2010, CKSource - Frederico Knabben. All rights reserved. 3 For licensing, see LICENSE.html or http://ckeditor.com/license 4 */ 5 6 (function() 7 { 8 var imageDialog = function( editor, dialogType ) 9 { 10 // Load image preview. 11 var IMAGE = 1, 12 LINK = 2, 13 PREVIEW = 4, 14 CLEANUP = 8, 15 regexGetSize = /^\s*(\d+)((px)|\%)?\s*$/i, 16 regexGetSizeOrEmpty = /(^\s*(\d+)((px)|\%)?\s*$)|^$/i, 17 pxLengthRegex = /^\d+px$/; 18 19 var onSizeChange = function() 20 { 21 var value = this.getValue(), // This = input element. 22 dialog = this.getDialog(), 23 aMatch = value.match( regexGetSize ); // Check value 24 if ( aMatch ) 25 { 26 if ( aMatch[2] == '%' ) // % is allowed - > unlock ratio. 27 switchLockRatio( dialog, false ); // Unlock. 28 value = aMatch[1]; 29 } 30 31 // Only if ratio is locked 32 if ( dialog.lockRatio ) 33 { 34 var oImageOriginal = dialog.originalElement; 35 if ( oImageOriginal.getCustomData( 'isReady' ) == 'true' ) 36 { 37 if ( this.id == 'txtHeight' ) 38 { 39 if ( value && value != '0' ) 40 value = Math.round( oImageOriginal.$.width * ( value / oImageOriginal.$.height ) ); 41 if ( !isNaN( value ) ) 42 dialog.setValueOf( 'info', 'txtWidth', value ); 43 } 44 else //this.id = txtWidth. 45 { 46 if ( value && value != '0' ) 47 value = Math.round( oImageOriginal.$.height * ( value / oImageOriginal.$.width ) ); 48 if ( !isNaN( value ) ) 49 dialog.setValueOf( 'info', 'txtHeight', value ); 50 } 51 } 52 } 53 updatePreview( dialog ); 54 }; 55 56 var updatePreview = function( dialog ) 57 { 58 //Don't load before onShow. 59 if ( !dialog.originalElement || !dialog.preview ) 60 return 1; 61 62 // Read attributes and update imagePreview; 63 dialog.commitContent( PREVIEW, dialog.preview ); 64 return 0; 65 }; 66 67 // Custom commit dialog logic, where we're intended to give inline style 68 // field (txtdlgGenStyle) higher priority to avoid overwriting styles contribute 69 // by other fields. 70 function commitContent() 71 { 72 var args = arguments; 73 var inlineStyleField = this.getContentElement( 'advanced', 'txtdlgGenStyle' ); 74 inlineStyleField && inlineStyleField.commit.apply( inlineStyleField, args ); 75 76 this.foreach( function( widget ) 77 { 78 if ( widget.commit && widget.id != 'txtdlgGenStyle' ) 79 widget.commit.apply( widget, args ); 80 }); 81 } 82 83 // Avoid recursions. 84 var incommit; 85 86 // Synchronous field values to other impacted fields is required, e.g. border 87 // size change should alter inline-style text as well. 88 function commitInternally( targetFields ) 89 { 90 if ( incommit ) 91 return; 92 93 incommit = 1; 94 95 var dialog = this.getDialog(), 96 element = dialog.imageElement; 97 if ( element ) 98 { 99 // Commit this field and broadcast to target fields. 100 this.commit( IMAGE, element ); 101 102 targetFields = [].concat( targetFields ); 103 var length = targetFields.length, 104 field; 105 for ( var i = 0; i < length; i++ ) 106 { 107 field = dialog.getContentElement.apply( dialog, targetFields[ i ].split( ':' ) ); 108 // May cause recursion. 109 field && field.setup( IMAGE, element ); 110 } 111 } 112 113 incommit = 0; 114 } 115 116 var switchLockRatio = function( dialog, value ) 117 { 118 var oImageOriginal = dialog.originalElement; 119 120 // Dialog may already closed. (#5505) 121 if( !oImageOriginal ) 122 return null; 123 124 var ratioButton = CKEDITOR.document.getById( btnLockSizesId ); 125 126 if ( oImageOriginal.getCustomData( 'isReady' ) == 'true' ) 127 { 128 if ( value == 'check' ) // Check image ratio and original image ratio. 129 { 130 var width = dialog.getValueOf( 'info', 'txtWidth' ), 131 height = dialog.getValueOf( 'info', 'txtHeight' ), 132 originalRatio = oImageOriginal.$.width * 1000 / oImageOriginal.$.height, 133 thisRatio = width * 1000 / height; 134 dialog.lockRatio = false; // Default: unlock ratio 135 136 if ( !width && !height ) 137 dialog.lockRatio = true; 138 else if ( !isNaN( originalRatio ) && !isNaN( thisRatio ) ) 139 { 140 if ( Math.round( originalRatio ) == Math.round( thisRatio ) ) 141 dialog.lockRatio = true; 142 } 143 } 144 else if ( value != undefined ) 145 dialog.lockRatio = value; 146 else 147 dialog.lockRatio = !dialog.lockRatio; 148 } 149 else if ( value != 'check' ) // I can't lock ratio if ratio is unknown. 150 dialog.lockRatio = false; 151 152 if ( dialog.lockRatio ) 153 ratioButton.removeClass( 'cke_btn_unlocked' ); 154 else 155 ratioButton.addClass( 'cke_btn_unlocked' ); 156 157 var lang = dialog._.editor.lang.image, 158 label = lang[ dialog.lockRatio ? 'unlockRatio' : 'lockRatio' ]; 159 160 ratioButton.setAttribute( 'title', label ); 161 ratioButton.getFirst().setText( label ); 162 163 return dialog.lockRatio; 164 }; 165 166 var resetSize = function( dialog ) 167 { 168 var oImageOriginal = dialog.originalElement; 169 if ( oImageOriginal.getCustomData( 'isReady' ) == 'true' ) 170 { 171 dialog.setValueOf( 'info', 'txtWidth', oImageOriginal.$.width ); 172 dialog.setValueOf( 'info', 'txtHeight', oImageOriginal.$.height ); 173 } 174 updatePreview( dialog ); 175 }; 176 177 var setupDimension = function( type, element ) 178 { 179 if ( type != IMAGE ) 180 return; 181 182 function checkDimension( size, defaultValue ) 183 { 184 var aMatch = size.match( regexGetSize ); 185 if ( aMatch ) 186 { 187 if ( aMatch[2] == '%' ) // % is allowed. 188 { 189 aMatch[1] += '%'; 190 switchLockRatio( dialog, false ); // Unlock ratio 191 } 192 return aMatch[1]; 193 } 194 return defaultValue; 195 } 196 197 var dialog = this.getDialog(), 198 value = '', 199 dimension = (( this.id == 'txtWidth' )? 'width' : 'height' ), 200 size = element.getAttribute( dimension ); 201 202 if ( size ) 203 value = checkDimension( size, value ); 204 value = checkDimension( element.getStyle( dimension ), value ); 205 206 this.setValue( value ); 207 }; 208 209 var previewPreloader; 210 211 var onImgLoadEvent = function() 212 { 213 // Image is ready. 214 var original = this.originalElement; 215 original.setCustomData( 'isReady', 'true' ); 216 original.removeListener( 'load', onImgLoadEvent ); 217 original.removeListener( 'error', onImgLoadErrorEvent ); 218 original.removeListener( 'abort', onImgLoadErrorEvent ); 219 220 // Hide loader 221 CKEDITOR.document.getById( imagePreviewLoaderId ).setStyle( 'display', 'none' ); 222 223 // New image -> new domensions 224 if ( !this.dontResetSize ) 225 resetSize( this ); 226 227 if ( this.firstLoad ) 228 CKEDITOR.tools.setTimeout( function(){ switchLockRatio( this, 'check' ); }, 0, this ); 229 230 this.firstLoad = false; 231 this.dontResetSize = false; 232 }; 233 234 var onImgLoadErrorEvent = function() 235 { 236 // Error. Image is not loaded. 237 var original = this.originalElement; 238 original.removeListener( 'load', onImgLoadEvent ); 239 original.removeListener( 'error', onImgLoadErrorEvent ); 240 original.removeListener( 'abort', onImgLoadErrorEvent ); 241 242 // Set Error image. 243 var noimage = CKEDITOR.getUrl( editor.skinPath + 'images/noimage.png' ); 244 245 if ( this.preview ) 246 this.preview.setAttribute( 'src', noimage ); 247 248 // Hide loader 249 CKEDITOR.document.getById( imagePreviewLoaderId ).setStyle( 'display', 'none' ); 250 switchLockRatio( this, false ); // Unlock. 251 }; 252 253 var numbering = function( id ) 254 { 255 return CKEDITOR.tools.getNextId() + '_' + id; 256 }, 257 btnLockSizesId = numbering( 'btnLockSizes' ), 258 btnResetSizeId = numbering( 'btnResetSize' ), 259 imagePreviewLoaderId = numbering( 'ImagePreviewLoader' ), 260 imagePreviewBoxId = numbering( 'ImagePreviewBox' ), 261 previewLinkId = numbering( 'previewLink' ), 262 previewImageId = numbering( 'previewImage' ); 263 264 return { 265 title : ( dialogType == 'image' ) ? editor.lang.image.title : editor.lang.image.titleButton, 266 minWidth : 420, 267 minHeight : 310, 268 onShow : function() 269 { 270 this.imageElement = false; 271 this.linkElement = false; 272 273 // Default: create a new element. 274 this.imageEditMode = false; 275 this.linkEditMode = false; 276 277 this.lockRatio = true; 278 this.dontResetSize = false; 279 this.firstLoad = true; 280 this.addLink = false; 281 282 var editor = this.getParentEditor(), 283 sel = this.getParentEditor().getSelection(), 284 element = sel.getSelectedElement(), 285 link = element && element.getAscendant( 'a' ); 286 287 //Hide loader. 288 CKEDITOR.document.getById( imagePreviewLoaderId ).setStyle( 'display', 'none' ); 289 // Create the preview before setup the dialog contents. 290 previewPreloader = new CKEDITOR.dom.element( 'img', editor.document ); 291 this.preview = CKEDITOR.document.getById( previewImageId ); 292 293 // Copy of the image 294 this.originalElement = editor.document.createElement( 'img' ); 295 this.originalElement.setAttribute( 'alt', '' ); 296 this.originalElement.setCustomData( 'isReady', 'false' ); 297 298 if ( link ) 299 { 300 this.linkElement = link; 301 this.linkEditMode = true; 302 303 // Look for Image element. 304 var linkChildren = link.getChildren(); 305 if ( linkChildren.count() == 1 ) // 1 child. 306 { 307 var childTagName = linkChildren.getItem( 0 ).getName(); 308 if ( childTagName == 'img' || childTagName == 'input' ) 309 { 310 this.imageElement = linkChildren.getItem( 0 ); 311 if ( this.imageElement.getName() == 'img' ) 312 this.imageEditMode = 'img'; 313 else if ( this.imageElement.getName() == 'input' ) 314 this.imageEditMode = 'input'; 315 } 316 } 317 // Fill out all fields. 318 if ( dialogType == 'image' ) 319 this.setupContent( LINK, link ); 320 } 321 322 if ( element && element.getName() == 'img' && !element.getAttribute( '_cke_realelement' ) 323 || element && element.getName() == 'input' && element.getAttribute( 'type' ) == 'image' ) 324 { 325 this.imageEditMode = element.getName(); 326 this.imageElement = element; 327 } 328 329 if ( this.imageEditMode ) 330 { 331 // Use the original element as a buffer from since we don't want 332 // temporary changes to be committed, e.g. if the dialog is canceled. 333 this.cleanImageElement = this.imageElement; 334 this.imageElement = this.cleanImageElement.clone( true, true ); 335 336 // Fill out all fields. 337 this.setupContent( IMAGE, this.imageElement ); 338 339 // Refresh LockRatio button 340 switchLockRatio ( this, true ); 341 } 342 else 343 this.imageElement = editor.document.createElement( 'img' ); 344 345 // Dont show preview if no URL given. 346 if ( !CKEDITOR.tools.trim( this.getValueOf( 'info', 'txtUrl' ) ) ) 347 { 348 this.preview.removeAttribute( 'src' ); 349 this.preview.setStyle( 'display', 'none' ); 350 } 351 }, 352 onOk : function() 353 { 354 // Edit existing Image. 355 if ( this.imageEditMode ) 356 { 357 var imgTagName = this.imageEditMode; 358 359 // Image dialog and Input element. 360 if ( dialogType == 'image' && imgTagName == 'input' && confirm( editor.lang.image.button2Img ) ) 361 { 362 // Replace INPUT-> IMG 363 imgTagName = 'img'; 364 this.imageElement = editor.document.createElement( 'img' ); 365 this.imageElement.setAttribute( 'alt', '' ); 366 editor.insertElement( this.imageElement ); 367 } 368 // ImageButton dialog and Image element. 369 else if ( dialogType != 'image' && imgTagName == 'img' && confirm( editor.lang.image.img2Button )) 370 { 371 // Replace IMG -> INPUT 372 imgTagName = 'input'; 373 this.imageElement = editor.document.createElement( 'input' ); 374 this.imageElement.setAttributes( 375 { 376 type : 'image', 377 alt : '' 378 } 379 ); 380 editor.insertElement( this.imageElement ); 381 } 382 else 383 { 384 // Restore the original element before all commits. 385 this.imageElement = this.cleanImageElement; 386 delete this.cleanImageElement; 387 } 388 } 389 else // Create a new image. 390 { 391 // Image dialog -> create IMG element. 392 if ( dialogType == 'image' ) 393 this.imageElement = editor.document.createElement( 'img' ); 394 else 395 { 396 this.imageElement = editor.document.createElement( 'input' ); 397 this.imageElement.setAttribute ( 'type' ,'image' ); 398 } 399 this.imageElement.setAttribute( 'alt', '' ); 400 } 401 402 // Create a new link. 403 if ( !this.linkEditMode ) 404 this.linkElement = editor.document.createElement( 'a' ); 405 406 // Set attributes. 407 this.commitContent( IMAGE, this.imageElement ); 408 this.commitContent( LINK, this.linkElement ); 409 410 // Remove empty style attribute. 411 if ( !this.imageElement.getAttribute( 'style' ) ) 412 this.imageElement.removeAttribute( 'style' ); 413 414 // Insert a new Image. 415 if ( !this.imageEditMode ) 416 { 417 if ( this.addLink ) 418 { 419 //Insert a new Link. 420 if ( !this.linkEditMode ) 421 { 422 editor.insertElement(this.linkElement); 423 this.linkElement.append(this.imageElement, false); 424 } 425 else //Link already exists, image not. 426 editor.insertElement(this.imageElement ); 427 } 428 else 429 editor.insertElement( this.imageElement ); 430 } 431 else // Image already exists. 432 { 433 //Add a new link element. 434 if ( !this.linkEditMode && this.addLink ) 435 { 436 editor.insertElement( this.linkElement ); 437 this.imageElement.appendTo( this.linkElement ); 438 } 439 //Remove Link, Image exists. 440 else if ( this.linkEditMode && !this.addLink ) 441 { 442 editor.getSelection().selectElement( this.linkElement ); 443 editor.insertElement( this.imageElement ); 444 } 445 } 446 }, 447 onLoad : function() 448 { 449 if ( dialogType != 'image' ) 450 this.hidePage( 'Link' ); //Hide Link tab. 451 var doc = this._.element.getDocument(); 452 this.addFocusable( doc.getById( btnResetSizeId ), 5 ); 453 this.addFocusable( doc.getById( btnLockSizesId ), 5 ); 454 455 this.commitContent = commitContent; 456 }, 457 onHide : function() 458 { 459 if ( this.preview ) 460 this.commitContent( CLEANUP, this.preview ); 461 462 if ( this.originalElement ) 463 { 464 this.originalElement.removeListener( 'load', onImgLoadEvent ); 465 this.originalElement.removeListener( 'error', onImgLoadErrorEvent ); 466 this.originalElement.removeListener( 'abort', onImgLoadErrorEvent ); 467 this.originalElement.remove(); 468 this.originalElement = false; // Dialog is closed. 469 } 470 471 delete this.imageElement; 472 }, 473 contents : [ 474 { 475 id : 'info', 476 label : editor.lang.image.infoTab, 477 accessKey : 'I', 478 elements : 479 [ 480 { 481 type : 'vbox', 482 padding : 0, 483 children : 484 [ 485 { 486 type : 'hbox', 487 widths : [ '280px', '110px' ], 488 align : 'right', 489 children : 490 [ 491 { 492 id : 'txtUrl', 493 type : 'text', 494 label : editor.lang.common.url, 495 required: true, 496 onChange : function() 497 { 498 var dialog = this.getDialog(), 499 newUrl = this.getValue(); 500 501 //Update original image 502 if ( newUrl.length > 0 ) //Prevent from load before onShow 503 { 504 dialog = this.getDialog(); 505 var original = dialog.originalElement; 506 507 dialog.preview.removeStyle( 'display' ); 508 509 original.setCustomData( 'isReady', 'false' ); 510 // Show loader 511 var loader = CKEDITOR.document.getById( imagePreviewLoaderId ); 512 if ( loader ) 513 loader.setStyle( 'display', '' ); 514 515 original.on( 'load', onImgLoadEvent, dialog ); 516 original.on( 'error', onImgLoadErrorEvent, dialog ); 517 original.on( 'abort', onImgLoadErrorEvent, dialog ); 518 original.setAttribute( 'src', newUrl ); 519 520 // Query the preloader to figure out the url impacted by based href. 521 previewPreloader.setAttribute( 'src', newUrl ); 522 dialog.preview.setAttribute( 'src', previewPreloader.$.src ); 523 updatePreview( dialog ); 524 } 525 // Dont show preview if no URL given. 526 else if ( dialog.preview ) 527 { 528 dialog.preview.removeAttribute( 'src' ); 529 dialog.preview.setStyle( 'display', 'none' ); 530 } 531 }, 532 setup : function( type, element ) 533 { 534 if ( type == IMAGE ) 535 { 536 var url = element.getAttribute( '_cke_saved_src' ) || element.getAttribute( 'src' ); 537 var field = this; 538 539 this.getDialog().dontResetSize = true; 540 541 field.setValue( url ); // And call this.onChange() 542 // Manually set the initial value.(#4191) 543 field.setInitValue(); 544 field.focus(); 545 } 546 }, 547 commit : function( type, element ) 548 { 549 if ( type == IMAGE && ( this.getValue() || this.isChanged() ) ) 550 { 551 element.setAttribute( '_cke_saved_src', decodeURI( this.getValue() ) ); 552 element.setAttribute( 'src', decodeURI( this.getValue() ) ); 553 } 554 else if ( type == CLEANUP ) 555 { 556 element.setAttribute( 'src', '' ); // If removeAttribute doesn't work. 557 element.removeAttribute( 'src' ); 558 } 559 }, 560 validate : CKEDITOR.dialog.validate.notEmpty( editor.lang.image.urlMissing ) 561 }, 562 { 563 type : 'button', 564 id : 'browse', 565 // v-align with the 'txtUrl' field. 566 // TODO: We need something better than a fixed size here. 567 style : 'display:inline-block;margin-top:10px;', 568 align : 'center', 569 label : editor.lang.common.browseServer, 570 hidden : true, 571 filebrowser : 'info:txtUrl' 572 } 573 ] 574 } 575 ] 576 }, 577 { 578 id : 'txtAlt', 579 type : 'text', 580 label : editor.lang.image.alt, 581 accessKey : 'T', 582 'default' : '', 583 onChange : function() 584 { 585 updatePreview( this.getDialog() ); 586 }, 587 setup : function( type, element ) 588 { 589 if ( type == IMAGE ) 590 this.setValue( element.getAttribute( 'alt' ) ); 591 }, 592 commit : function( type, element ) 593 { 594 if ( type == IMAGE ) 595 { 596 if ( this.getValue() || this.isChanged() ) 597 element.setAttribute( 'alt', this.getValue() ); 598 } 599 else if ( type == PREVIEW ) 600 { 601 element.setAttribute( 'alt', this.getValue() ); 602 } 603 else if ( type == CLEANUP ) 604 { 605 element.removeAttribute( 'alt' ); 606 } 607 } 608 }, 609 { 610 type : 'hbox', 611 widths : [ '140px', '240px' ], 612 children : 613 [ 614 { 615 type : 'vbox', 616 padding : 10, 617 children : 618 [ 619 { 620 type : 'hbox', 621 widths : [ '70%', '30%' ], 622 children : 623 [ 624 { 625 type : 'vbox', 626 padding : 1, 627 children : 628 [ 629 { 630 type : 'text', 631 width: '40px', 632 id : 'txtWidth', 633 labelLayout : 'horizontal', 634 label : editor.lang.image.width, 635 onKeyUp : onSizeChange, 636 onChange : function() 637 { 638 commitInternally.call( this, 'advanced:txtdlgGenStyle' ); 639 }, 640 validate : function() 641 { 642 var aMatch = this.getValue().match( regexGetSizeOrEmpty ); 643 if ( !aMatch ) 644 alert( editor.lang.image.validateWidth ); 645 return !!aMatch; 646 }, 647 setup : setupDimension, 648 commit : function( type, element, internalCommit ) 649 { 650 var value = this.getValue(); 651 if ( type == IMAGE ) 652 { 653 if ( value ) 654 element.setStyle( 'width', CKEDITOR.tools.cssLength( value ) ); 655 else if ( !value && this.isChanged( ) ) 656 element.removeStyle( 'width' ); 657 658 !internalCommit && element.removeAttribute( 'width' ); 659 } 660 else if ( type == PREVIEW ) 661 { 662 var aMatch = value.match( regexGetSize ); 663 if ( !aMatch ) 664 { 665 var oImageOriginal = this.getDialog().originalElement; 666 if ( oImageOriginal.getCustomData( 'isReady' ) == 'true' ) 667 element.setStyle( 'width', oImageOriginal.$.width + 'px'); 668 } 669 else 670 element.setStyle( 'width', CKEDITOR.tools.cssLength( value ) ); 671 } 672 else if ( type == CLEANUP ) 673 { 674 element.removeAttribute( 'width' ); 675 element.removeStyle( 'width' ); 676 } 677 } 678 }, 679 { 680 type : 'text', 681 id : 'txtHeight', 682 width: '40px', 683 labelLayout : 'horizontal', 684 label : editor.lang.image.height, 685 onKeyUp : onSizeChange, 686 onChange : function() 687 { 688 commitInternally.call( this, 'advanced:txtdlgGenStyle' ); 689 }, 690 validate : function() 691 { 692 var aMatch = this.getValue().match( regexGetSizeOrEmpty ); 693 if ( !aMatch ) 694 alert( editor.lang.image.validateHeight ); 695 return !!aMatch; 696 }, 697 setup : setupDimension, 698 commit : function( type, element, internalCommit ) 699 { 700 var value = this.getValue(); 701 if ( type == IMAGE ) 702 { 703 if ( value ) 704 element.setStyle( 'height', CKEDITOR.tools.cssLength( value ) ); 705 else if ( !value && this.isChanged( ) ) 706 element.removeStyle( 'height' ); 707 708 if ( !internalCommit && type == IMAGE ) 709 element.removeAttribute( 'height' ); 710 } 711 else if ( type == PREVIEW ) 712 { 713 var aMatch = value.match( regexGetSize ); 714 if ( !aMatch ) 715 { 716 var oImageOriginal = this.getDialog().originalElement; 717 if ( oImageOriginal.getCustomData( 'isReady' ) == 'true' ) 718 element.setStyle( 'height', oImageOriginal.$.height + 'px' ); 719 } 720 else 721 element.setStyle( 'height', CKEDITOR.tools.cssLength( value ) ); 722 } 723 else if ( type == CLEANUP ) 724 { 725 element.removeAttribute( 'height' ); 726 element.removeStyle( 'height' ); 727 } 728 } 729 } 730 ] 731 }, 732 { 733 type : 'html', 734 style : 'margin-top:10px;width:40px;height:40px;', 735 onLoad : function() 736 { 737 // Activate Reset button 738 var resetButton = CKEDITOR.document.getById( btnResetSizeId ), 739 ratioButton = CKEDITOR.document.getById( btnLockSizesId ); 740 if ( resetButton ) 741 { 742 resetButton.on( 'click', function(evt) 743 { 744 resetSize( this ); 745 evt.data.preventDefault(); 746 }, this.getDialog() ); 747 resetButton.on( 'mouseover', function() 748 { 749 this.addClass( 'cke_btn_over' ); 750 }, resetButton ); 751 resetButton.on( 'mouseout', function() 752 { 753 this.removeClass( 'cke_btn_over' ); 754 }, resetButton ); 755 } 756 // Activate (Un)LockRatio button 757 if ( ratioButton ) 758 { 759 ratioButton.on( 'click', function(evt) 760 { 761 var locked = switchLockRatio( this ), 762 oImageOriginal = this.originalElement, 763 width = this.getValueOf( 'info', 'txtWidth' ); 764 765 if ( oImageOriginal.getCustomData( 'isReady' ) == 'true' && width ) 766 { 767 var height = oImageOriginal.$.height / oImageOriginal.$.width * width; 768 if ( !isNaN( height ) ) 769 { 770 this.setValueOf( 'info', 'txtHeight', Math.round( height ) ); 771 updatePreview( this ); 772 } 773 } 774 evt.data.preventDefault(); 775 }, this.getDialog() ); 776 ratioButton.on( 'mouseover', function() 777 { 778 this.addClass( 'cke_btn_over' ); 779 }, ratioButton ); 780 ratioButton.on( 'mouseout', function() 781 { 782 this.removeClass( 'cke_btn_over' ); 783 }, ratioButton ); 784 } 785 }, 786 html : '<div>'+ 787 '<a href="javascript:void(0)" tabindex="-1" title="' + editor.lang.image.unlockRatio + 788 '" class="cke_btn_locked" id="' + btnLockSizesId + '" role="button"><span class="cke_label">' + editor.lang.image.unlockRatio + '</span></a>' + 789 '<a href="javascript:void(0)" tabindex="-1" title="' + editor.lang.image.resetSize + 790 '" class="cke_btn_reset" id="' + btnResetSizeId + '" role="button"><span class="cke_label">' + editor.lang.image.resetSize + '</span></a>'+ 791 '</div>' 792 } 793 ] 794 }, 795 { 796 type : 'vbox', 797 padding : 1, 798 children : 799 [ 800 { 801 type : 'text', 802 id : 'txtBorder', 803 width: '60px', 804 labelLayout : 'horizontal', 805 label : editor.lang.image.border, 806 'default' : '', 807 onKeyUp : function() 808 { 809 updatePreview( this.getDialog() ); 810 }, 811 onChange : function() 812 { 813 commitInternally.call( this, 'advanced:txtdlgGenStyle' ); 814 }, 815 validate : CKEDITOR.dialog.validate.integer( editor.lang.image.validateBorder ), 816 setup : function( type, element ) 817 { 818 if ( type == IMAGE ) 819 { 820 var value, 821 borderStyle = element.getStyle( 'border-width' ); 822 borderStyle = borderStyle && borderStyle.match( /^(\d+px)(?: \1 \1 \1)?$/ ); 823 value = borderStyle && parseInt( borderStyle[ 1 ], 10 ); 824 isNaN ( parseInt( value, 10 ) ) && ( value = element.getAttribute( 'border' ) ); 825 this.setValue( value ); 826 } 827 }, 828 commit : function( type, element, internalCommit ) 829 { 830 var value = parseInt( this.getValue(), 10 ); 831 if ( type == IMAGE || type == PREVIEW ) 832 { 833 if ( !isNaN( value ) ) 834 { 835 element.setStyle( 'border-width', CKEDITOR.tools.cssLength( value ) ); 836 element.setStyle( 'border-style', 'solid' ); 837 } 838 else if ( !value && this.isChanged() ) 839 { 840 element.removeStyle( 'border-width' ); 841 element.removeStyle( 'border-style' ); 842 element.removeStyle( 'border-color' ); 843 } 844 845 if ( !internalCommit && type == IMAGE ) 846 element.removeAttribute( 'border' ); 847 } 848 else if ( type == CLEANUP ) 849 { 850 element.removeAttribute( 'border' ); 851 element.removeStyle( 'border-width' ); 852 element.removeStyle( 'border-style' ); 853 element.removeStyle( 'border-color' ); 854 } 855 } 856 }, 857 { 858 type : 'text', 859 id : 'txtHSpace', 860 width: '60px', 861 labelLayout : 'horizontal', 862 label : editor.lang.image.hSpace, 863 'default' : '', 864 onKeyUp : function() 865 { 866 updatePreview( this.getDialog() ); 867 }, 868 onChange : function() 869 { 870 commitInternally.call( this, 'advanced:txtdlgGenStyle' ); 871 }, 872 validate : CKEDITOR.dialog.validate.integer( editor.lang.image.validateHSpace ), 873 setup : function( type, element ) 874 { 875 if ( type == IMAGE ) 876 { 877 var value, 878 marginLeftPx, 879 marginRightPx, 880 marginLeftStyle = element.getStyle( 'margin-left' ), 881 marginRightStyle = element.getStyle( 'margin-right' ); 882 883 marginLeftStyle = marginLeftStyle && marginLeftStyle.match( pxLengthRegex ); 884 marginRightStyle = marginRightStyle && marginRightStyle.match( pxLengthRegex ); 885 marginLeftPx = parseInt( marginLeftStyle, 10 ); 886 marginRightPx = parseInt( marginRightStyle, 10 ); 887 888 value = ( marginLeftPx == marginRightPx ) && marginLeftPx; 889 isNaN( parseInt( value, 10 ) ) && ( value = element.getAttribute( 'hspace' ) ); 890 891 this.setValue( value ); 892 } 893 }, 894 commit : function( type, element, internalCommit ) 895 { 896 var value = parseInt( this.getValue(), 10 ); 897 if ( type == IMAGE || type == PREVIEW ) 898 { 899 if ( !isNaN( value ) ) 900 { 901 element.setStyle( 'margin-left', CKEDITOR.tools.cssLength( value ) ); 902 element.setStyle( 'margin-right', CKEDITOR.tools.cssLength( value ) ); 903 } 904 else if ( !value && this.isChanged( ) ) 905 { 906 element.removeStyle( 'margin-left' ); 907 element.removeStyle( 'margin-right' ); 908 } 909 910 if ( !internalCommit && type == IMAGE ) 911 element.removeAttribute( 'hspace' ); 912 } 913 else if ( type == CLEANUP ) 914 { 915 element.removeAttribute( 'hspace' ); 916 element.removeStyle( 'margin-left' ); 917 element.removeStyle( 'margin-right' ); 918 } 919 } 920 }, 921 { 922 type : 'text', 923 id : 'txtVSpace', 924 width : '60px', 925 labelLayout : 'horizontal', 926 label : editor.lang.image.vSpace, 927 'default' : '', 928 onKeyUp : function() 929 { 930 updatePreview( this.getDialog() ); 931 }, 932 onChange : function() 933 { 934 commitInternally.call( this, 'advanced:txtdlgGenStyle' ); 935 }, 936 validate : CKEDITOR.dialog.validate.integer( editor.lang.image.validateVSpace ), 937 setup : function( type, element ) 938 { 939 if ( type == IMAGE ) 940 { 941 var value, 942 marginTopPx, 943 marginBottomPx, 944 marginTopStyle = element.getStyle( 'margin-top' ), 945 marginBottomStyle = element.getStyle( 'margin-bottom' ); 946 947 marginTopStyle = marginTopStyle && marginTopStyle.match( pxLengthRegex ); 948 marginBottomStyle = marginBottomStyle && marginBottomStyle.match( pxLengthRegex ); 949 marginTopPx = parseInt( marginTopStyle, 10 ); 950 marginBottomPx = parseInt( marginBottomStyle, 10 ); 951 952 value = ( marginTopPx == marginBottomPx ) && marginTopPx; 953 isNaN ( parseInt( value, 10 ) ) && ( value = element.getAttribute( 'vspace' ) ); 954 this.setValue( value ); 955 } 956 }, 957 commit : function( type, element, internalCommit ) 958 { 959 var value = parseInt( this.getValue(), 10 ); 960 if ( type == IMAGE || type == PREVIEW ) 961 { 962 if ( !isNaN( value ) ) 963 { 964 element.setStyle( 'margin-top', CKEDITOR.tools.cssLength( value ) ); 965 element.setStyle( 'margin-bottom', CKEDITOR.tools.cssLength( value ) ); 966 } 967 else if ( !value && this.isChanged( ) ) 968 { 969 element.removeStyle( 'margin-top' ); 970 element.removeStyle( 'margin-bottom' ); 971 } 972 973 if ( !internalCommit && type == IMAGE ) 974 element.removeAttribute( 'vspace' ); 975 } 976 else if ( type == CLEANUP ) 977 { 978 element.removeAttribute( 'vspace' ); 979 element.removeStyle( 'margin-top' ); 980 element.removeStyle( 'margin-bottom' ); 981 } 982 } 983 }, 984 { 985 id : 'cmbAlign', 986 type : 'select', 987 labelLayout : 'horizontal', 988 widths : [ '35%','65%' ], 989 style : 'width:90px', 990 label : editor.lang.image.align, 991 'default' : '', 992 items : 993 [ 994 [ editor.lang.common.notSet , ''], 995 [ editor.lang.image.alignLeft , 'left'], 996 [ editor.lang.image.alignRight , 'right'] 997 // Backward compatible with v2 on setup when specified as attribute value, 998 // while these values are no more available as select options. 999 // [ editor.lang.image.alignAbsBottom , 'absBottom'], 1000 // [ editor.lang.image.alignAbsMiddle , 'absMiddle'], 1001 // [ editor.lang.image.alignBaseline , 'baseline'], 1002 // [ editor.lang.image.alignTextTop , 'text-top'], 1003 // [ editor.lang.image.alignBottom , 'bottom'], 1004 // [ editor.lang.image.alignMiddle , 'middle'], 1005 // [ editor.lang.image.alignTop , 'top'] 1006 ], 1007 onChange : function() 1008 { 1009 updatePreview( this.getDialog() ); 1010 commitInternally.call( this, 'advanced:txtdlgGenStyle' ); 1011 }, 1012 setup : function( type, element ) 1013 { 1014 if ( type == IMAGE ) 1015 { 1016 var value = element.getStyle( 'float' ); 1017 switch( value ) 1018 { 1019 // Ignore those unrelated values. 1020 case 'inherit': 1021 case 'none': 1022 value = ''; 1023 } 1024 1025 !value && ( value = ( element.getAttribute( 'align' ) || '' ).toLowerCase() ); 1026 this.setValue( value ); 1027 } 1028 }, 1029 commit : function( type, element, internalCommit ) 1030 { 1031 var value = this.getValue(); 1032 if ( type == IMAGE || type == PREVIEW ) 1033 { 1034 if ( value ) 1035 element.setStyle( 'float', value ); 1036 else 1037 element.removeStyle( 'float' ); 1038 1039 if ( !internalCommit && type == IMAGE ) 1040 { 1041 value = ( element.getAttribute( 'align' ) || '' ).toLowerCase(); 1042 switch( value ) 1043 { 1044 // we should remove it only if it matches "left" or "right", 1045 // otherwise leave it intact. 1046 case 'left': 1047 case 'right': 1048 element.removeAttribute( 'align' ); 1049 } 1050 } 1051 } 1052 else if ( type == CLEANUP ) 1053 element.removeStyle( 'float' ); 1054 1055 } 1056 } 1057 ] 1058 } 1059 ] 1060 }, 1061 { 1062 type : 'vbox', 1063 height : '250px', 1064 children : 1065 [ 1066 { 1067 type : 'html', 1068 style : 'width:95%;', 1069 html : '<div>' + CKEDITOR.tools.htmlEncode( editor.lang.common.preview ) +'<br>'+ 1070 '<div id="' + imagePreviewLoaderId + '" class="ImagePreviewLoader" style="display:none"><div class="loading"> </div></div>'+ 1071 '<div id="' + imagePreviewBoxId + '" class="ImagePreviewBox"><table><tr><td>'+ 1072 '<a href="javascript:void(0)" target="_blank" onclick="return false;" id="' + previewLinkId + '">'+ 1073 '<img id="' + previewImageId + '" alt="" /></a>' + 1074 ( editor.config.image_previewText || 1075 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. '+ 1076 'Maecenas feugiat consequat diam. Maecenas metus. Vivamus diam purus, cursus a, commodo non, facilisis vitae, '+ 1077 'nulla. Aenean dictum lacinia tortor. Nunc iaculis, nibh non iaculis aliquam, orci felis euismod neque, sed ornare massa mauris sed velit. Nulla pretium mi et risus. Fusce mi pede, tempor id, cursus ac, ullamcorper nec, enim. Sed tortor. Curabitur molestie. Duis velit augue, condimentum at, ultrices a, luctus ut, orci. Donec pellentesque egestas eros. Integer cursus, augue in cursus faucibus, eros pede bibendum sem, in tempus tellus justo quis ligula. Etiam eget tortor. Vestibulum rutrum, est ut placerat elementum, lectus nisl aliquam velit, tempor aliquam eros nunc nonummy metus. In eros metus, gravida a, gravida sed, lobortis id, turpis. Ut ultrices, ipsum at venenatis fringilla, sem nulla lacinia tellus, eget aliquet turpis mauris non enim. Nam turpis. Suspendisse lacinia. Curabitur ac tortor ut ipsum egestas elementum. Nunc imperdiet gravida mauris.' ) + 1078 '</td></tr></table></div></div>' 1079 } 1080 ] 1081 } 1082 ] 1083 } 1084 ] 1085 }, 1086 { 1087 id : 'Link', 1088 label : editor.lang.link.title, 1089 padding : 0, 1090 elements : 1091 [ 1092 { 1093 id : 'txtUrl', 1094 type : 'text', 1095 label : editor.lang.common.url, 1096 style : 'width: 100%', 1097 'default' : '', 1098 setup : function( type, element ) 1099 { 1100 if ( type == LINK ) 1101 { 1102 var href = element.getAttribute( '_cke_saved_href' ); 1103 if ( !href ) 1104 href = element.getAttribute( 'href' ); 1105 this.setValue( href ); 1106 } 1107 }, 1108 commit : function( type, element ) 1109 { 1110 if ( type == LINK ) 1111 { 1112 if ( this.getValue() || this.isChanged() ) 1113 { 1114 element.setAttribute( '_cke_saved_href', decodeURI( this.getValue() ) ); 1115 element.setAttribute( 'href', 'javascript:void(0)/*' + 1116 CKEDITOR.tools.getNextNumber() + '*/' ); 1117 1118 if ( this.getValue() || !editor.config.image_removeLinkByEmptyURL ) 1119 this.getDialog().addLink = true; 1120 } 1121 } 1122 } 1123 }, 1124 { 1125 type : 'button', 1126 id : 'browse', 1127 filebrowser : 1128 { 1129 action : 'Browse', 1130 target: 'Link:txtUrl', 1131 url: editor.config.filebrowserImageBrowseLinkUrl || editor.config.filebrowserBrowseUrl 1132 }, 1133 style : 'float:right', 1134 hidden : true, 1135 label : editor.lang.common.browseServer 1136 }, 1137 { 1138 id : 'cmbTarget', 1139 type : 'select', 1140 label : editor.lang.common.target, 1141 'default' : '', 1142 items : 1143 [ 1144 [ editor.lang.common.notSet , ''], 1145 [ editor.lang.common.targetNew , '_blank'], 1146 [ editor.lang.common.targetTop , '_top'], 1147 [ editor.lang.common.targetSelf , '_self'], 1148 [ editor.lang.common.targetParent , '_parent'] 1149 ], 1150 setup : function( type, element ) 1151 { 1152 if ( type == LINK ) 1153 this.setValue( element.getAttribute( 'target' ) ); 1154 }, 1155 commit : function( type, element ) 1156 { 1157 if ( type == LINK ) 1158 { 1159 if ( this.getValue() || this.isChanged() ) 1160 element.setAttribute( 'target', this.getValue() ); 1161 } 1162 } 1163 } 1164 ] 1165 }, 1166 { 1167 id : 'Upload', 1168 hidden : true, 1169 filebrowser : 'uploadButton', 1170 label : editor.lang.image.upload, 1171 elements : 1172 [ 1173 { 1174 type : 'file', 1175 id : 'upload', 1176 label : editor.lang.image.btnUpload, 1177 style: 'height:40px', 1178 size : 38 1179 }, 1180 { 1181 type : 'fileButton', 1182 id : 'uploadButton', 1183 filebrowser : 'info:txtUrl', 1184 label : editor.lang.image.btnUpload, 1185 'for' : [ 'Upload', 'upload' ] 1186 } 1187 ] 1188 }, 1189 { 1190 id : 'advanced', 1191 label : editor.lang.common.advancedTab, 1192 elements : 1193 [ 1194 { 1195 type : 'hbox', 1196 widths : [ '50%', '25%', '25%' ], 1197 children : 1198 [ 1199 { 1200 type : 'text', 1201 id : 'linkId', 1202 label : editor.lang.common.id, 1203 setup : function( type, element ) 1204 { 1205 if ( type == IMAGE ) 1206 this.setValue( element.getAttribute( 'id' ) ); 1207 }, 1208 commit : function( type, element ) 1209 { 1210 if ( type == IMAGE ) 1211 { 1212 if ( this.getValue() || this.isChanged() ) 1213 element.setAttribute( 'id', this.getValue() ); 1214 } 1215 } 1216 }, 1217 { 1218 id : 'cmbLangDir', 1219 type : 'select', 1220 style : 'width : 100px;', 1221 label : editor.lang.common.langDir, 1222 'default' : '', 1223 items : 1224 [ 1225 [ editor.lang.common.notSet, '' ], 1226 [ editor.lang.common.langDirLtr, 'ltr' ], 1227 [ editor.lang.common.langDirRtl, 'rtl' ] 1228 ], 1229 setup : function( type, element ) 1230 { 1231 if ( type == IMAGE ) 1232 this.setValue( element.getAttribute( 'dir' ) ); 1233 }, 1234 commit : function( type, element ) 1235 { 1236 if ( type == IMAGE ) 1237 { 1238 if ( this.getValue() || this.isChanged() ) 1239 element.setAttribute( 'dir', this.getValue() ); 1240 } 1241 } 1242 }, 1243 { 1244 type : 'text', 1245 id : 'txtLangCode', 1246 label : editor.lang.common.langCode, 1247 'default' : '', 1248 setup : function( type, element ) 1249 { 1250 if ( type == IMAGE ) 1251 this.setValue( element.getAttribute( 'lang' ) ); 1252 }, 1253 commit : function( type, element ) 1254 { 1255 if ( type == IMAGE ) 1256 { 1257 if ( this.getValue() || this.isChanged() ) 1258 element.setAttribute( 'lang', this.getValue() ); 1259 } 1260 } 1261 } 1262 ] 1263 }, 1264 { 1265 type : 'text', 1266 id : 'txtGenLongDescr', 1267 label : editor.lang.common.longDescr, 1268 setup : function( type, element ) 1269 { 1270 if ( type == IMAGE ) 1271 this.setValue( element.getAttribute( 'longDesc' ) ); 1272 }, 1273 commit : function( type, element ) 1274 { 1275 if ( type == IMAGE ) 1276 { 1277 if ( this.getValue() || this.isChanged() ) 1278 element.setAttribute( 'longDesc', this.getValue() ); 1279 } 1280 } 1281 }, 1282 { 1283 type : 'hbox', 1284 widths : [ '50%', '50%' ], 1285 children : 1286 [ 1287 { 1288 type : 'text', 1289 id : 'txtGenClass', 1290 label : editor.lang.common.cssClass, 1291 'default' : '', 1292 setup : function( type, element ) 1293 { 1294 if ( type == IMAGE ) 1295 this.setValue( element.getAttribute( 'class' ) ); 1296 }, 1297 commit : function( type, element ) 1298 { 1299 if ( type == IMAGE ) 1300 { 1301 if ( this.getValue() || this.isChanged() ) 1302 element.setAttribute( 'class', this.getValue() ); 1303 } 1304 } 1305 }, 1306 { 1307 type : 'text', 1308 id : 'txtGenTitle', 1309 label : editor.lang.common.advisoryTitle, 1310 'default' : '', 1311 onChange : function() 1312 { 1313 updatePreview( this.getDialog() ); 1314 }, 1315 setup : function( type, element ) 1316 { 1317 if ( type == IMAGE ) 1318 this.setValue( element.getAttribute( 'title' ) ); 1319 }, 1320 commit : function( type, element ) 1321 { 1322 if ( type == IMAGE ) 1323 { 1324 if ( this.getValue() || this.isChanged() ) 1325 element.setAttribute( 'title', this.getValue() ); 1326 } 1327 else if ( type == PREVIEW ) 1328 { 1329 element.setAttribute( 'title', this.getValue() ); 1330 } 1331 else if ( type == CLEANUP ) 1332 { 1333 element.removeAttribute( 'title' ); 1334 } 1335 } 1336 } 1337 ] 1338 }, 1339 { 1340 type : 'text', 1341 id : 'txtdlgGenStyle', 1342 label : editor.lang.common.cssStyle, 1343 'default' : '', 1344 setup : function( type, element ) 1345 { 1346 if ( type == IMAGE ) 1347 { 1348 var genStyle = element.getAttribute( 'style' ); 1349 if ( !genStyle && element.$.style.cssText ) 1350 genStyle = element.$.style.cssText; 1351 this.setValue( genStyle ); 1352 1353 var height = element.$.style.height, 1354 width = element.$.style.width, 1355 aMatchH = ( height ? height : '' ).match( regexGetSize ), 1356 aMatchW = ( width ? width : '').match( regexGetSize ); 1357 1358 this.attributesInStyle = 1359 { 1360 height : !!aMatchH, 1361 width : !!aMatchW 1362 }; 1363 } 1364 }, 1365 onChange : function () 1366 { 1367 commitInternally.call( this, 1368 [ 'info:cmbFloat', 'info:cmbAlign', 1369 'info:txtVSpace', 'info:txtHSpace', 1370 'info:txtBorder', 1371 'info:txtWidth', 'info:txtHeight' ] ); 1372 updatePreview( this ); 1373 }, 1374 commit : function( type, element ) 1375 { 1376 if ( type == IMAGE && ( this.getValue() || this.isChanged() ) ) 1377 { 1378 element.setAttribute( 'style', this.getValue() ); 1379 } 1380 } 1381 } 1382 ] 1383 } 1384 ] 1385 }; 1386 }; 1387 1388 CKEDITOR.dialog.add( 'image', function( editor ) 1389 { 1390 return imageDialog( editor, 'image' ); 1391 }); 1392 1393 CKEDITOR.dialog.add( 'imagebutton', function( editor ) 1394 { 1395 return imageDialog( editor, 'imagebutton' ); 1396 }); 1397 })();
title
Description
Body
title
Description
Body
title
Description
Body
title
Body
| Generated: Thu Mar 24 11:18:33 2011 | Cross-referenced by PHPXref 0.7 |