1 /* 2 Copyright (c) 2003-2009, CKSource - Frederico Knabben. All rights reserved. 3 For licensing, see LICENSE.html or http://ckeditor.com/license 4 */ 5 6 (function() 7 { 8 /* 9 * It is possible to set things in three different places. 10 * 1. As attributes in the object tag. 11 * 2. As param tags under the object tag. 12 * 3. As attributes in the embed tag. 13 * It is possible for a single attribute to be present in more than one place. 14 * So let's define a mapping between a sementic attribute and its syntactic 15 * equivalents. 16 * Then we'll set and retrieve attribute values according to the mapping, 17 * instead of having to check and set each syntactic attribute every time. 18 * 19 * Reference: http://kb.adobe.com/selfservice/viewContent.do?externalId=tn_12701 20 */ 21 var ATTRTYPE_OBJECT = 1, 22 ATTRTYPE_PARAM = 2, 23 ATTRTYPE_EMBED = 4; 24 25 var attributesMap = 26 { 27 id : [ { type : ATTRTYPE_OBJECT, name : CKEDITOR.env.ie ? '_cke_saved_id' : 'id' } ], 28 classid : [ { type : ATTRTYPE_OBJECT, name : 'classid' } ], 29 codebase : [ { type : ATTRTYPE_OBJECT, name : 'codebase'} ], 30 pluginspage : [ { type : ATTRTYPE_EMBED, name : 'pluginspage' } ], 31 src : [ { type : ATTRTYPE_PARAM, name : 'movie' }, { type : ATTRTYPE_EMBED, name : 'src' } ], 32 name : [ { type : ATTRTYPE_EMBED, name : 'name' } ], 33 align : [ { type : ATTRTYPE_OBJECT, name : 'align' } ], 34 title : [ { type : ATTRTYPE_OBJECT, name : 'title' }, { type : ATTRTYPE_EMBED, name : 'title' } ], 35 'class' : [ { type : ATTRTYPE_OBJECT, name : 'class' }, { type : ATTRTYPE_EMBED, name : 'class'} ], 36 width : [ { type : ATTRTYPE_OBJECT, name : 'width' }, { type : ATTRTYPE_EMBED, name : 'width' } ], 37 height : [ { type : ATTRTYPE_OBJECT, name : 'height' }, { type : ATTRTYPE_EMBED, name : 'height' } ], 38 hSpace : [ { type : ATTRTYPE_OBJECT, name : 'hSpace' }, { type : ATTRTYPE_EMBED, name : 'hSpace' } ], 39 vSpace : [ { type : ATTRTYPE_OBJECT, name : 'vSpace' }, { type : ATTRTYPE_EMBED, name : 'vSpace' } ], 40 style : [ { type : ATTRTYPE_OBJECT, name : 'style' }, { type : ATTRTYPE_EMBED, name : 'style' } ], 41 type : [ { type : ATTRTYPE_EMBED, name : 'type' } ] 42 }; 43 44 var names = [ 'play', 'loop', 'menu', 'quality', 'scale', 'salign', 'wmode', 'bgcolor', 'base', 'flashvars', 'allowScriptAccess', 45 'allowFullScreen' ]; 46 for ( var i = 0 ; i < names.length ; i++ ) 47 attributesMap[ names[i] ] = [ { type : ATTRTYPE_EMBED, name : names[i] }, { type : ATTRTYPE_PARAM, name : names[i] } ]; 48 names = [ 'allowFullScreen', 'play', 'loop', 'menu' ]; 49 for ( i = 0 ; i < names.length ; i++ ) 50 attributesMap[ names[i] ][0]['default'] = attributesMap[ names[i] ][1]['default'] = true; 51 52 function loadValue( objectNode, embedNode, paramMap ) 53 { 54 var attributes = attributesMap[ this.id ]; 55 if ( !attributes ) 56 return; 57 58 var isCheckbox = ( this instanceof CKEDITOR.ui.dialog.checkbox ); 59 for ( var i = 0 ; i < attributes.length ; i++ ) 60 { 61 var attrDef = attributes[ i ]; 62 switch ( attrDef.type ) 63 { 64 case ATTRTYPE_OBJECT: 65 if ( !objectNode ) 66 continue; 67 if ( objectNode.getAttribute( attrDef.name ) !== null ) 68 { 69 var value = objectNode.getAttribute( attrDef.name ); 70 if ( isCheckbox ) 71 this.setValue( value.toLowerCase() == 'true' ); 72 else 73 this.setValue( value ); 74 return; 75 } 76 else if ( isCheckbox ) 77 this.setValue( !!attrDef[ 'default' ] ); 78 break; 79 case ATTRTYPE_PARAM: 80 if ( !objectNode ) 81 continue; 82 if ( attrDef.name in paramMap ) 83 { 84 value = paramMap[ attrDef.name ]; 85 if ( isCheckbox ) 86 this.setValue( value.toLowerCase() == 'true' ); 87 else 88 this.setValue( value ); 89 return; 90 } 91 else if ( isCheckbox ) 92 this.setValue( !!attrDef[ 'default' ] ); 93 break; 94 case ATTRTYPE_EMBED: 95 if ( !embedNode ) 96 continue; 97 if ( embedNode.getAttribute( attrDef.name ) ) 98 { 99 value = embedNode.getAttribute( attrDef.name ); 100 if ( isCheckbox ) 101 this.setValue( value.toLowerCase() == 'true' ); 102 else 103 this.setValue( value ); 104 return; 105 } 106 else if ( isCheckbox ) 107 this.setValue( !!attrDef[ 'default' ] ); 108 } 109 } 110 } 111 112 function commitValue( objectNode, embedNode, paramMap ) 113 { 114 var attributes = attributesMap[ this.id ]; 115 if ( !attributes ) 116 return; 117 118 var isRemove = ( this.getValue() === '' ), 119 isCheckbox = ( this instanceof CKEDITOR.ui.dialog.checkbox ); 120 121 for ( var i = 0 ; i < attributes.length ; i++ ) 122 { 123 var attrDef = attributes[i]; 124 switch ( attrDef.type ) 125 { 126 case ATTRTYPE_OBJECT: 127 if ( !objectNode ) 128 continue; 129 var value = this.getValue(); 130 if ( isRemove || isCheckbox && value === attrDef[ 'default' ] ) 131 objectNode.removeAttribute( attrDef.name ); 132 else 133 objectNode.setAttribute( attrDef.name, value ); 134 break; 135 case ATTRTYPE_PARAM: 136 if ( !objectNode ) 137 continue; 138 value = this.getValue(); 139 if ( isRemove || isCheckbox && value === attrDef[ 'default' ] ) 140 { 141 if ( attrDef.name in paramMap ) 142 paramMap[ attrDef.name ].remove(); 143 } 144 else 145 { 146 if ( attrDef.name in paramMap ) 147 paramMap[ attrDef.name ].setAttribute( 'value', value ); 148 else 149 { 150 var param = CKEDITOR.dom.element.createFromHtml( '<cke:param></cke:param>', objectNode.getDocument() ); 151 param.setAttributes( { name : attrDef.name, value : value } ); 152 if ( objectNode.getChildCount() < 1 ) 153 param.appendTo( objectNode ); 154 else 155 param.insertBefore( objectNode.getFirst() ); 156 } 157 } 158 break; 159 case ATTRTYPE_EMBED: 160 if ( !embedNode ) 161 continue; 162 value = this.getValue(); 163 if ( isRemove || isCheckbox && value === attrDef[ 'default' ]) 164 embedNode.removeAttribute( attrDef.name ); 165 else 166 embedNode.setAttribute( attrDef.name, value ); 167 } 168 } 169 } 170 171 CKEDITOR.dialog.add( 'flash', function( editor ) 172 { 173 var makeObjectTag = !editor.config.flashEmbedTagOnly, 174 makeEmbedTag = editor.config.flashAddEmbedTag || editor.config.flashEmbedTagOnly; 175 176 var previewAreaHtml = '<div>' + CKEDITOR.tools.htmlEncode( editor.lang.image.preview ) +'<br>' + 177 '<div id="FlashPreviewLoader" style="display:none"><div class="loading"> </div></div>' + 178 '<div id="FlashPreviewBox"></div></div>'; 179 180 return { 181 title : editor.lang.flash.title, 182 minWidth : 420, 183 minHeight : 310, 184 onShow : function() 185 { 186 // Clear previously saved elements. 187 this.fakeImage = this.objectNode = this.embedNode = null; 188 189 // Try to detect any embed or object tag that has Flash parameters. 190 var fakeImage = this.getSelectedElement(); 191 if ( fakeImage && fakeImage.getAttribute( '_cke_real_element_type' ) && fakeImage.getAttribute( '_cke_real_element_type' ) == 'flash' ) 192 { 193 this.fakeImage = fakeImage; 194 195 var realElement = editor.restoreRealElement( fakeImage ), 196 objectNode = null, embedNode = null, paramMap = {}; 197 if ( realElement.getName() == 'cke:object' ) 198 { 199 objectNode = realElement; 200 var embedList = objectNode.getElementsByTag( 'embed', 'cke' ); 201 if ( embedList.count() > 0 ) 202 embedNode = embedList.getItem( 0 ); 203 var paramList = objectNode.getElementsByTag( 'param', 'cke' ); 204 for ( var i = 0, length = paramList.count() ; i < length ; i++ ) 205 { 206 var item = paramList.getItem( i ), 207 name = item.getAttribute( 'name' ), 208 value = item.getAttribute( 'value' ); 209 paramMap[ name ] = value; 210 } 211 } 212 else if ( realElement.getName() == 'cke:embed' ) 213 embedNode = realElement; 214 215 this.objectNode = objectNode; 216 this.embedNode = embedNode; 217 218 this.setupContent( objectNode, embedNode, paramMap, fakeImage ); 219 } 220 }, 221 onOk : function() 222 { 223 // If there's no selected object or embed, create one. Otherwise, reuse the 224 // selected object and embed nodes. 225 var objectNode = null, 226 embedNode = null, 227 paramMap = null; 228 if ( !this.fakeImage ) 229 { 230 if ( makeObjectTag ) 231 { 232 objectNode = CKEDITOR.dom.element.createFromHtml( '<cke:object></cke:object>', editor.document ); 233 var attributes = { 234 classid : 'clsid:d27cdb6e-ae6d-11cf-96b8-444553540000', 235 codebase : 'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0' 236 }; 237 objectNode.setAttributes( attributes ); 238 } 239 if ( makeEmbedTag ) 240 { 241 embedNode = CKEDITOR.dom.element.createFromHtml( '<cke:embed></cke:embed>', editor.document ); 242 embedNode.setAttributes( 243 { 244 type : 'application/x-shockwave-flash', 245 pluginspage : 'http://www.macromedia.com/go/getflashplayer' 246 } ); 247 if ( objectNode ) 248 embedNode.appendTo( objectNode ); 249 } 250 } 251 else 252 { 253 objectNode = this.objectNode; 254 embedNode = this.embedNode; 255 } 256 257 // Produce the paramMap if there's an object tag. 258 if ( objectNode ) 259 { 260 paramMap = {}; 261 var paramList = objectNode.getElementsByTag( 'param', 'cke' ); 262 for ( var i = 0, length = paramList.count() ; i < length ; i++ ) 263 paramMap[ paramList.getItem( i ).getAttribute( 'name' ) ] = paramList.getItem( i ); 264 } 265 266 // Apply or remove flash parameters. 267 var extraStyles = {}; 268 this.commitContent( objectNode, embedNode, paramMap, extraStyles ); 269 270 // Refresh the fake image. 271 var newFakeImage = editor.createFakeElement( objectNode || embedNode, 'cke_flash', 'flash', true ); 272 newFakeImage.setStyles( extraStyles ); 273 if ( this.fakeImage ) 274 newFakeImage.replace( this.fakeImage ); 275 else 276 editor.insertElement( newFakeImage ); 277 }, 278 279 onHide : function() 280 { 281 if ( this.preview ) 282 this.preview.setHtml(''); 283 }, 284 285 contents : [ 286 { 287 id : 'info', 288 label : editor.lang.common.generalTab, 289 accessKey : 'I', 290 elements : 291 [ 292 { 293 type : 'vbox', 294 padding : 0, 295 children : 296 [ 297 { 298 type : 'html', 299 html : '<span>' + CKEDITOR.tools.htmlEncode( editor.lang.image.url ) + '</span>' 300 }, 301 { 302 type : 'hbox', 303 widths : [ '280px', '110px' ], 304 align : 'right', 305 children : 306 [ 307 { 308 id : 'src', 309 type : 'text', 310 label : '', 311 validate : CKEDITOR.dialog.validate.notEmpty( editor.lang.flash.validateSrc ), 312 setup : loadValue, 313 commit : commitValue, 314 onLoad : function() 315 { 316 var dialog = this.getDialog(), 317 updatePreview = function( src ){ 318 319 dialog.preview.setHtml( '<embed height="100%" width="100%" src="' 320 + CKEDITOR.tools.htmlEncode( src ) 321 + '" type="application/x-shockwave-flash"></embed>' ); 322 }; 323 // Preview element 324 dialog.preview = dialog.getContentElement( 'info', 'preview' ).getElement().getChild( 3 ); 325 326 // Sync on inital value loaded. 327 this.on( 'change', function( evt ){ 328 329 if ( evt.data && evt.data.value ) 330 updatePreview( evt.data.value ); 331 } ); 332 // Sync when input value changed. 333 this.getInputElement().on( 'change', function( evt ){ 334 335 updatePreview( this.getValue() ); 336 }, this ); 337 } 338 }, 339 { 340 type : 'button', 341 id : 'browse', 342 filebrowser : 'info:src', 343 hidden : true, 344 align : 'center', 345 label : editor.lang.common.browseServer 346 } 347 ] 348 } 349 ] 350 }, 351 { 352 type : 'hbox', 353 widths : [ '25%', '25%', '25%', '25%', '25%' ], 354 children : 355 [ 356 { 357 type : 'text', 358 id : 'width', 359 label : editor.lang.flash.width, 360 validate : CKEDITOR.dialog.validate.integer( editor.lang.flash.validateWidth ), 361 setup : function( objectNode, embedNode, paramMap, fakeImage ) 362 { 363 loadValue.apply( this, arguments ); 364 if ( fakeImage ) 365 { 366 var fakeImageWidth = parseInt( fakeImage.$.style.width, 10 ); 367 if ( !isNaN( fakeImageWidth ) ) 368 this.setValue( fakeImageWidth ); 369 } 370 }, 371 commit : function( objectNode, embedNode, paramMap, extraStyles ) 372 { 373 commitValue.apply( this, arguments ); 374 if ( this.getValue() ) 375 extraStyles.width = this.getValue() + 'px'; 376 } 377 }, 378 { 379 type : 'text', 380 id : 'height', 381 label : editor.lang.flash.height, 382 validate : CKEDITOR.dialog.validate.integer( editor.lang.flash.validateHeight ), 383 setup : function( objectNode, embedNode, paramMap, fakeImage ) 384 { 385 loadValue.apply( this, arguments ); 386 if ( fakeImage ) 387 { 388 var fakeImageHeight = parseInt( fakeImage.$.style.height, 10 ); 389 if ( !isNaN( fakeImageHeight ) ) 390 this.setValue( fakeImageHeight ); 391 } 392 }, 393 commit : function( objectNode, embedNode, paramMap, extraStyles ) 394 { 395 commitValue.apply( this, arguments ); 396 if ( this.getValue() ) 397 extraStyles.height = this.getValue() + 'px'; 398 } 399 }, 400 { 401 type : 'text', 402 id : 'hSpace', 403 label : editor.lang.flash.hSpace, 404 validate : CKEDITOR.dialog.validate.integer( editor.lang.flash.validateHSpace ), 405 setup : loadValue, 406 commit : commitValue 407 }, 408 { 409 type : 'text', 410 id : 'vSpace', 411 label : editor.lang.flash.vSpace, 412 validate : CKEDITOR.dialog.validate.integer( editor.lang.flash.validateVSpace ), 413 setup : loadValue, 414 commit : commitValue 415 } 416 ] 417 }, 418 419 { 420 type : 'vbox', 421 children : 422 [ 423 { 424 type : 'html', 425 id : 'preview', 426 style : 'width:95%;', 427 html : previewAreaHtml 428 } 429 ] 430 } 431 ] 432 }, 433 { 434 id : 'Upload', 435 hidden : true, 436 filebrowser : 'uploadButton', 437 label : editor.lang.common.upload, 438 elements : 439 [ 440 { 441 type : 'file', 442 id : 'upload', 443 label : editor.lang.common.upload, 444 size : 38 445 }, 446 { 447 type : 'fileButton', 448 id : 'uploadButton', 449 label : editor.lang.common.uploadSubmit, 450 filebrowser : 'info:src', 451 'for' : [ 'Upload', 'upload' ] 452 } 453 ] 454 }, 455 { 456 id : 'properties', 457 label : editor.lang.flash.propertiesTab, 458 elements : 459 [ 460 { 461 type : 'hbox', 462 widths : [ '50%', '50%' ], 463 children : 464 [ 465 { 466 id : 'scale', 467 type : 'select', 468 label : editor.lang.flash.scale, 469 'default' : '', 470 style : 'width : 100%;', 471 items : 472 [ 473 [ editor.lang.common.notSet , ''], 474 [ editor.lang.flash.scaleAll, 'showall' ], 475 [ editor.lang.flash.scaleNoBorder, 'noborder' ], 476 [ editor.lang.flash.scaleFit, 'exactfit' ] 477 ], 478 setup : loadValue, 479 commit : commitValue 480 }, 481 { 482 id : 'allowScriptAccess', 483 type : 'select', 484 label : editor.lang.flash.access, 485 'default' : '', 486 style : 'width : 100%;', 487 items : 488 [ 489 [ editor.lang.common.notSet , ''], 490 [ editor.lang.flash.accessAlways, 'always' ], 491 [ editor.lang.flash.accessSameDomain, 'samedomain' ], 492 [ editor.lang.flash.accessNever, 'never' ] 493 ], 494 setup : loadValue, 495 commit : commitValue 496 } 497 ] 498 }, 499 { 500 type : 'hbox', 501 widths : [ '50%', '50%' ], 502 children : 503 [ 504 { 505 id : 'wmode', 506 type : 'select', 507 label : editor.lang.flash.windowMode, 508 'default' : '', 509 style : 'width : 100%;', 510 items : 511 [ 512 [ editor.lang.common.notSet , '' ], 513 [ editor.lang.flash.windowModeWindow, 'window' ], 514 [ editor.lang.flash.windowModeOpaque, 'opaque' ], 515 [ editor.lang.flash.windowModeTransparent, 'transparent' ] 516 ], 517 setup : loadValue, 518 commit : commitValue 519 }, 520 { 521 id : 'quality', 522 type : 'select', 523 label : editor.lang.flash.quality, 524 'default' : 'high', 525 style : 'width : 100%;', 526 items : 527 [ 528 [ editor.lang.common.notSet , '' ], 529 [ editor.lang.flash.qualityBest, 'best' ], 530 [ editor.lang.flash.qualityHigh, 'high' ], 531 [ editor.lang.flash.qualityAutoHigh, 'autohigh' ], 532 [ editor.lang.flash.qualityMedium, 'medium' ], 533 [ editor.lang.flash.qualityAutoLow, 'autolow' ], 534 [ editor.lang.flash.qualityLow, 'low' ] 535 ], 536 setup : loadValue, 537 commit : commitValue 538 } 539 ] 540 }, 541 { 542 type : 'hbox', 543 widths : [ '50%', '50%' ], 544 children : 545 [ 546 { 547 id : 'align', 548 type : 'select', 549 label : editor.lang.flash.align, 550 'default' : '', 551 style : 'width : 100%;', 552 items : 553 [ 554 [ editor.lang.common.notSet , ''], 555 [ editor.lang.image.alignLeft , 'left'], 556 [ editor.lang.image.alignAbsBottom , 'absBottom'], 557 [ editor.lang.image.alignAbsMiddle , 'absMiddle'], 558 [ editor.lang.image.alignBaseline , 'baseline'], 559 [ editor.lang.image.alignBottom , 'bottom'], 560 [ editor.lang.image.alignMiddle , 'middle'], 561 [ editor.lang.image.alignRight , 'right'], 562 [ editor.lang.image.alignTextTop , 'textTop'], 563 [ editor.lang.image.alignTop , 'top'] 564 ], 565 setup : loadValue, 566 commit : commitValue 567 }, 568 { 569 type : 'html', 570 html : '<div></div>' 571 } 572 ] 573 }, 574 { 575 type : 'vbox', 576 padding : 0, 577 children : 578 [ 579 { 580 type : 'html', 581 html : CKEDITOR.tools.htmlEncode( editor.lang.flash.flashvars ) 582 }, 583 { 584 type : 'checkbox', 585 id : 'menu', 586 label : editor.lang.flash.chkMenu, 587 'default' : true, 588 setup : loadValue, 589 commit : commitValue 590 }, 591 { 592 type : 'checkbox', 593 id : 'play', 594 label : editor.lang.flash.chkPlay, 595 'default' : true, 596 setup : loadValue, 597 commit : commitValue 598 }, 599 { 600 type : 'checkbox', 601 id : 'loop', 602 label : editor.lang.flash.chkLoop, 603 'default' : true, 604 setup : loadValue, 605 commit : commitValue 606 }, 607 { 608 type : 'checkbox', 609 id : 'allowFullScreen', 610 label : editor.lang.flash.chkFull, 611 'default' : true, 612 setup : loadValue, 613 commit : commitValue 614 } 615 ] 616 } 617 ] 618 }, 619 { 620 id : 'advanced', 621 label : editor.lang.common.advancedTab, 622 elements : 623 [ 624 { 625 type : 'hbox', 626 widths : [ '45%', '55%' ], 627 children : 628 [ 629 { 630 type : 'text', 631 id : 'id', 632 label : editor.lang.common.id, 633 setup : loadValue, 634 commit : commitValue 635 }, 636 { 637 type : 'text', 638 id : 'title', 639 label : editor.lang.common.advisoryTitle, 640 setup : loadValue, 641 commit : commitValue 642 } 643 ] 644 }, 645 { 646 type : 'hbox', 647 widths : [ '45%', '55%' ], 648 children : 649 [ 650 { 651 type : 'text', 652 id : 'bgcolor', 653 label : editor.lang.flash.bgcolor, 654 setup : loadValue, 655 commit : commitValue 656 }, 657 { 658 type : 'text', 659 id : 'class', 660 label : editor.lang.common.cssClass, 661 setup : loadValue, 662 commit : commitValue 663 } 664 ] 665 }, 666 { 667 type : 'text', 668 id : 'style', 669 label : editor.lang.common.cssStyle, 670 setup : loadValue, 671 commit : commitValue 672 } 673 ] 674 } 675 ] 676 }; 677 } ); 678 })(); 679