2 Copyright (c) 2003-2013, CKSource - Frederico Knabben. All rights reserved.
\r
3 For licensing, see LICENSE.html or http://ckeditor.com/license
\r
9 * It is possible to set things in three different places.
\r
10 * 1. As attributes in the object tag.
\r
11 * 2. As param tags under the object tag.
\r
12 * 3. As attributes in the embed tag.
\r
13 * It is possible for a single attribute to be present in more than one place.
\r
14 * So let's define a mapping between a sementic attribute and its syntactic
\r
16 * Then we'll set and retrieve attribute values according to the mapping,
\r
17 * instead of having to check and set each syntactic attribute every time.
\r
19 * Reference: http://kb.adobe.com/selfservice/viewContent.do?externalId=tn_12701
\r
21 var ATTRTYPE_OBJECT = 1,
\r
27 id : [ { type : ATTRTYPE_OBJECT, name : 'id' } ],
\r
28 classid : [ { type : ATTRTYPE_OBJECT, name : 'classid' } ],
\r
29 codebase : [ { type : ATTRTYPE_OBJECT, name : 'codebase'} ],
\r
30 pluginspage : [ { type : ATTRTYPE_EMBED, name : 'pluginspage' } ],
\r
31 src : [ { type : ATTRTYPE_PARAM, name : 'movie' }, { type : ATTRTYPE_EMBED, name : 'src' }, { type : ATTRTYPE_OBJECT, name : 'data' } ],
\r
32 name : [ { type : ATTRTYPE_EMBED, name : 'name' } ],
\r
33 align : [ { type : ATTRTYPE_OBJECT, name : 'align' } ],
\r
34 'class' : [ { type : ATTRTYPE_OBJECT, name : 'class' }, { type : ATTRTYPE_EMBED, name : 'class'} ],
\r
35 width : [ { type : ATTRTYPE_OBJECT, name : 'width' }, { type : ATTRTYPE_EMBED, name : 'width' } ],
\r
36 height : [ { type : ATTRTYPE_OBJECT, name : 'height' }, { type : ATTRTYPE_EMBED, name : 'height' } ],
\r
37 hSpace : [ { type : ATTRTYPE_OBJECT, name : 'hSpace' }, { type : ATTRTYPE_EMBED, name : 'hSpace' } ],
\r
38 vSpace : [ { type : ATTRTYPE_OBJECT, name : 'vSpace' }, { type : ATTRTYPE_EMBED, name : 'vSpace' } ],
\r
39 style : [ { type : ATTRTYPE_OBJECT, name : 'style' }, { type : ATTRTYPE_EMBED, name : 'style' } ],
\r
40 type : [ { type : ATTRTYPE_EMBED, name : 'type' } ]
\r
43 var names = [ 'play', 'loop', 'menu', 'quality', 'scale', 'salign', 'wmode', 'bgcolor', 'base', 'flashvars', 'allowScriptAccess',
\r
44 'allowFullScreen' ];
\r
45 for ( var i = 0 ; i < names.length ; i++ )
\r
46 attributesMap[ names[i] ] = [ { type : ATTRTYPE_EMBED, name : names[i] }, { type : ATTRTYPE_PARAM, name : names[i] } ];
\r
47 names = [ 'allowFullScreen', 'play', 'loop', 'menu' ];
\r
48 for ( i = 0 ; i < names.length ; i++ )
\r
49 attributesMap[ names[i] ][0]['default'] = attributesMap[ names[i] ][1]['default'] = true;
\r
51 var defaultToPixel = CKEDITOR.tools.cssLength;
\r
53 function loadValue( objectNode, embedNode, paramMap )
\r
55 var attributes = attributesMap[ this.id ];
\r
59 var isCheckbox = ( this instanceof CKEDITOR.ui.dialog.checkbox );
\r
60 for ( var i = 0 ; i < attributes.length ; i++ )
\r
62 var attrDef = attributes[ i ];
\r
63 switch ( attrDef.type )
\r
65 case ATTRTYPE_OBJECT:
\r
68 if ( objectNode.getAttribute( attrDef.name ) !== null )
\r
70 var value = objectNode.getAttribute( attrDef.name );
\r
72 this.setValue( value.toLowerCase() == 'true' );
\r
74 this.setValue( value );
\r
77 else if ( isCheckbox )
\r
78 this.setValue( !!attrDef[ 'default' ] );
\r
80 case ATTRTYPE_PARAM:
\r
83 if ( attrDef.name in paramMap )
\r
85 value = paramMap[ attrDef.name ];
\r
87 this.setValue( value.toLowerCase() == 'true' );
\r
89 this.setValue( value );
\r
92 else if ( isCheckbox )
\r
93 this.setValue( !!attrDef[ 'default' ] );
\r
95 case ATTRTYPE_EMBED:
\r
98 if ( embedNode.getAttribute( attrDef.name ) )
\r
100 value = embedNode.getAttribute( attrDef.name );
\r
102 this.setValue( value.toLowerCase() == 'true' );
\r
104 this.setValue( value );
\r
107 else if ( isCheckbox )
\r
108 this.setValue( !!attrDef[ 'default' ] );
\r
113 function commitValue( objectNode, embedNode, paramMap )
\r
115 var attributes = attributesMap[ this.id ];
\r
119 var isRemove = ( this.getValue() === '' ),
\r
120 isCheckbox = ( this instanceof CKEDITOR.ui.dialog.checkbox );
\r
122 for ( var i = 0 ; i < attributes.length ; i++ )
\r
124 var attrDef = attributes[i];
\r
125 switch ( attrDef.type )
\r
127 case ATTRTYPE_OBJECT:
\r
128 // Avoid applying the data attribute when not needed (#7733)
\r
129 if ( !objectNode || ( attrDef.name == 'data' && embedNode && !objectNode.hasAttribute( 'data' ) ) )
\r
131 var value = this.getValue();
\r
132 if ( isRemove || isCheckbox && value === attrDef[ 'default' ] )
\r
133 objectNode.removeAttribute( attrDef.name );
\r
135 objectNode.setAttribute( attrDef.name, value );
\r
137 case ATTRTYPE_PARAM:
\r
140 value = this.getValue();
\r
141 if ( isRemove || isCheckbox && value === attrDef[ 'default' ] )
\r
143 if ( attrDef.name in paramMap )
\r
144 paramMap[ attrDef.name ].remove();
\r
148 if ( attrDef.name in paramMap )
\r
149 paramMap[ attrDef.name ].setAttribute( 'value', value );
\r
152 var param = CKEDITOR.dom.element.createFromHtml( '<cke:param></cke:param>', objectNode.getDocument() );
\r
153 param.setAttributes( { name : attrDef.name, value : value } );
\r
154 if ( objectNode.getChildCount() < 1 )
\r
155 param.appendTo( objectNode );
\r
157 param.insertBefore( objectNode.getFirst() );
\r
161 case ATTRTYPE_EMBED:
\r
164 value = this.getValue();
\r
165 if ( isRemove || isCheckbox && value === attrDef[ 'default' ])
\r
166 embedNode.removeAttribute( attrDef.name );
\r
168 embedNode.setAttribute( attrDef.name, value );
\r
173 CKEDITOR.dialog.add( 'flash', function( editor )
\r
175 var makeObjectTag = !editor.config.flashEmbedTagOnly,
\r
176 makeEmbedTag = editor.config.flashAddEmbedTag || editor.config.flashEmbedTagOnly;
\r
178 var previewPreloader,
\r
179 previewAreaHtml = '<div>' + CKEDITOR.tools.htmlEncode( editor.lang.common.preview ) +'<br>' +
\r
180 '<div id="cke_FlashPreviewLoader' + CKEDITOR.tools.getNextNumber() + '" style="display:none"><div class="loading"> </div></div>' +
\r
181 '<div id="cke_FlashPreviewBox' + CKEDITOR.tools.getNextNumber() + '" class="FlashPreviewBox"></div></div>';
\r
184 title : editor.lang.flash.title,
\r
187 onShow : function()
\r
189 // Clear previously saved elements.
\r
190 this.fakeImage = this.objectNode = this.embedNode = null;
\r
191 previewPreloader = new CKEDITOR.dom.element( 'embed', editor.document );
\r
193 // Try to detect any embed or object tag that has Flash parameters.
\r
194 var fakeImage = this.getSelectedElement();
\r
195 if ( fakeImage && fakeImage.data( 'cke-real-element-type' ) && fakeImage.data( 'cke-real-element-type' ) == 'flash' )
\r
197 this.fakeImage = fakeImage;
\r
199 var realElement = editor.restoreRealElement( fakeImage ),
\r
200 objectNode = null, embedNode = null, paramMap = {};
\r
201 if ( realElement.getName() == 'cke:object' )
\r
203 objectNode = realElement;
\r
204 var embedList = objectNode.getElementsByTag( 'embed', 'cke' );
\r
205 if ( embedList.count() > 0 )
\r
206 embedNode = embedList.getItem( 0 );
\r
207 var paramList = objectNode.getElementsByTag( 'param', 'cke' );
\r
208 for ( var i = 0, length = paramList.count() ; i < length ; i++ )
\r
210 var item = paramList.getItem( i ),
\r
211 name = item.getAttribute( 'name' ),
\r
212 value = item.getAttribute( 'value' );
\r
213 paramMap[ name ] = value;
\r
216 else if ( realElement.getName() == 'cke:embed' )
\r
217 embedNode = realElement;
\r
219 this.objectNode = objectNode;
\r
220 this.embedNode = embedNode;
\r
222 this.setupContent( objectNode, embedNode, paramMap, fakeImage );
\r
227 // If there's no selected object or embed, create one. Otherwise, reuse the
\r
228 // selected object and embed nodes.
\r
229 var objectNode = null,
\r
232 if ( !this.fakeImage )
\r
234 if ( makeObjectTag )
\r
236 objectNode = CKEDITOR.dom.element.createFromHtml( '<cke:object></cke:object>', editor.document );
\r
238 classid : 'clsid:d27cdb6e-ae6d-11cf-96b8-444553540000',
\r
239 codebase : 'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0'
\r
241 objectNode.setAttributes( attributes );
\r
243 if ( makeEmbedTag )
\r
245 embedNode = CKEDITOR.dom.element.createFromHtml( '<cke:embed></cke:embed>', editor.document );
\r
246 embedNode.setAttributes(
\r
248 type : 'application/x-shockwave-flash',
\r
249 pluginspage : 'http://www.macromedia.com/go/getflashplayer'
\r
252 embedNode.appendTo( objectNode );
\r
257 objectNode = this.objectNode;
\r
258 embedNode = this.embedNode;
\r
261 // Produce the paramMap if there's an object tag.
\r
265 var paramList = objectNode.getElementsByTag( 'param', 'cke' );
\r
266 for ( var i = 0, length = paramList.count() ; i < length ; i++ )
\r
267 paramMap[ paramList.getItem( i ).getAttribute( 'name' ) ] = paramList.getItem( i );
\r
270 // A subset of the specified attributes/styles
\r
271 // should also be applied on the fake element to
\r
272 // have better visual effect. (#5240)
\r
273 var extraStyles = {}, extraAttributes = {};
\r
274 this.commitContent( objectNode, embedNode, paramMap, extraStyles, extraAttributes );
\r
276 // Refresh the fake image.
\r
277 var newFakeImage = editor.createFakeElement( objectNode || embedNode, 'cke_flash', 'flash', true );
\r
278 newFakeImage.setAttributes( extraAttributes );
\r
279 newFakeImage.setStyles( extraStyles );
\r
280 if ( this.fakeImage )
\r
282 newFakeImage.replace( this.fakeImage );
\r
283 editor.getSelection().selectElement( newFakeImage );
\r
286 editor.insertElement( newFakeImage );
\r
289 onHide : function()
\r
291 if ( this.preview )
\r
292 this.preview.setHtml('');
\r
298 label : editor.lang.common.generalTab,
\r
309 widths : [ '280px', '110px' ],
\r
316 label : editor.lang.common.url,
\r
318 validate : CKEDITOR.dialog.validate.notEmpty( editor.lang.flash.validateSrc ),
\r
320 commit : commitValue,
\r
321 onLoad : function()
\r
323 var dialog = this.getDialog(),
\r
324 updatePreview = function( src ){
\r
325 // Query the preloader to figure out the url impacted by based href.
\r
326 previewPreloader.setAttribute( 'src', src );
\r
327 dialog.preview.setHtml( '<embed height="100%" width="100%" src="'
\r
328 + CKEDITOR.tools.htmlEncode( previewPreloader.getAttribute( 'src' ) )
\r
329 + '" type="application/x-shockwave-flash"></embed>' );
\r
332 dialog.preview = dialog.getContentElement( 'info', 'preview' ).getElement().getChild( 3 );
\r
334 // Sync on inital value loaded.
\r
335 this.on( 'change', function( evt ){
\r
337 if ( evt.data && evt.data.value )
\r
338 updatePreview( evt.data.value );
\r
340 // Sync when input value changed.
\r
341 this.getInputElement().on( 'change', function( evt ){
\r
343 updatePreview( this.getValue() );
\r
350 filebrowser : 'info:src',
\r
352 // v-align with the 'src' field.
\r
353 // TODO: We need something better than a fixed size here.
\r
354 style : 'display:inline-block;margin-top:10px;',
\r
355 label : editor.lang.common.browseServer
\r
363 widths : [ '25%', '25%', '25%', '25%', '25%' ],
\r
369 style : 'width:95px',
\r
370 label : editor.lang.common.width,
\r
371 validate : CKEDITOR.dialog.validate.htmlLength( editor.lang.common.invalidHtmlLength.replace( '%1', editor.lang.common.width ) ),
\r
373 commit : commitValue
\r
378 style : 'width:95px',
\r
379 label : editor.lang.common.height,
\r
380 validate : CKEDITOR.dialog.validate.htmlLength( editor.lang.common.invalidHtmlLength.replace( '%1', editor.lang.common.height ) ),
\r
382 commit : commitValue
\r
387 style : 'width:95px',
\r
388 label : editor.lang.flash.hSpace,
\r
389 validate : CKEDITOR.dialog.validate.integer( editor.lang.flash.validateHSpace ),
\r
391 commit : commitValue
\r
396 style : 'width:95px',
\r
397 label : editor.lang.flash.vSpace,
\r
398 validate : CKEDITOR.dialog.validate.integer( editor.lang.flash.validateVSpace ),
\r
400 commit : commitValue
\r
412 style : 'width:95%;',
\r
413 html : previewAreaHtml
\r
422 filebrowser : 'uploadButton',
\r
423 label : editor.lang.common.upload,
\r
429 label : editor.lang.common.upload,
\r
433 type : 'fileButton',
\r
434 id : 'uploadButton',
\r
435 label : editor.lang.common.uploadSubmit,
\r
436 filebrowser : 'info:src',
\r
437 'for' : [ 'Upload', 'upload' ]
\r
443 label : editor.lang.flash.propertiesTab,
\r
448 widths : [ '50%', '50%' ],
\r
454 label : editor.lang.flash.scale,
\r
456 style : 'width : 100%;',
\r
459 [ editor.lang.common.notSet , ''],
\r
460 [ editor.lang.flash.scaleAll, 'showall' ],
\r
461 [ editor.lang.flash.scaleNoBorder, 'noborder' ],
\r
462 [ editor.lang.flash.scaleFit, 'exactfit' ]
\r
465 commit : commitValue
\r
468 id : 'allowScriptAccess',
\r
470 label : editor.lang.flash.access,
\r
472 style : 'width : 100%;',
\r
475 [ editor.lang.common.notSet , ''],
\r
476 [ editor.lang.flash.accessAlways, 'always' ],
\r
477 [ editor.lang.flash.accessSameDomain, 'samedomain' ],
\r
478 [ editor.lang.flash.accessNever, 'never' ]
\r
481 commit : commitValue
\r
487 widths : [ '50%', '50%' ],
\r
493 label : editor.lang.flash.windowMode,
\r
495 style : 'width : 100%;',
\r
498 [ editor.lang.common.notSet , '' ],
\r
499 [ editor.lang.flash.windowModeWindow, 'window' ],
\r
500 [ editor.lang.flash.windowModeOpaque, 'opaque' ],
\r
501 [ editor.lang.flash.windowModeTransparent, 'transparent' ]
\r
504 commit : commitValue
\r
509 label : editor.lang.flash.quality,
\r
510 'default' : 'high',
\r
511 style : 'width : 100%;',
\r
514 [ editor.lang.common.notSet , '' ],
\r
515 [ editor.lang.flash.qualityBest, 'best' ],
\r
516 [ editor.lang.flash.qualityHigh, 'high' ],
\r
517 [ editor.lang.flash.qualityAutoHigh, 'autohigh' ],
\r
518 [ editor.lang.flash.qualityMedium, 'medium' ],
\r
519 [ editor.lang.flash.qualityAutoLow, 'autolow' ],
\r
520 [ editor.lang.flash.qualityLow, 'low' ]
\r
523 commit : commitValue
\r
529 widths : [ '50%', '50%' ],
\r
535 label : editor.lang.common.align,
\r
537 style : 'width : 100%;',
\r
540 [ editor.lang.common.notSet , ''],
\r
541 [ editor.lang.common.alignLeft , 'left'],
\r
542 [ editor.lang.flash.alignAbsBottom , 'absBottom'],
\r
543 [ editor.lang.flash.alignAbsMiddle , 'absMiddle'],
\r
544 [ editor.lang.flash.alignBaseline , 'baseline'],
\r
545 [ editor.lang.common.alignBottom , 'bottom'],
\r
546 [ editor.lang.common.alignMiddle , 'middle'],
\r
547 [ editor.lang.common.alignRight , 'right'],
\r
548 [ editor.lang.flash.alignTextTop , 'textTop'],
\r
549 [ editor.lang.common.alignTop , 'top']
\r
552 commit : function( objectNode, embedNode, paramMap, extraStyles, extraAttributes )
\r
554 var value = this.getValue();
\r
555 commitValue.apply( this, arguments );
\r
556 value && ( extraAttributes.align = value );
\r
561 html : '<div></div>'
\r
567 label : CKEDITOR.tools.htmlEncode( editor.lang.flash.flashvars ),
\r
578 label : editor.lang.flash.chkMenu,
\r
581 commit : commitValue
\r
586 label : editor.lang.flash.chkPlay,
\r
589 commit : commitValue
\r
594 label : editor.lang.flash.chkLoop,
\r
597 commit : commitValue
\r
601 id : 'allowFullScreen',
\r
602 label : editor.lang.flash.chkFull,
\r
605 commit : commitValue
\r
615 label : editor.lang.common.advancedTab,
\r
625 label : editor.lang.common.id,
\r
627 commit : commitValue
\r
633 widths : [ '45%', '55%' ],
\r
639 label : editor.lang.flash.bgcolor,
\r
641 commit : commitValue
\r
646 label : editor.lang.common.cssClass,
\r
648 commit : commitValue
\r
655 validate : CKEDITOR.dialog.validate.inlineStyle( editor.lang.common.invalidInlineStyle ),
\r
656 label : editor.lang.common.cssStyle,
\r
658 commit : commitValue
\r