2 Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
3 For licensing, see LICENSE.html or http://ckeditor.com/license
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
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.
19 * Reference: http://kb.adobe.com/selfservice/viewContent.do?externalId=tn_12701
21 var ATTRTYPE_OBJECT
= 1,
27 id
: [ { type
: ATTRTYPE_OBJECT
, name
: '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' }, { type
: ATTRTYPE_OBJECT
, name
: 'data' } ],
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' } ]
44 var names
= [ 'play', 'loop', 'menu', 'quality', 'scale', 'salign', 'wmode', 'bgcolor', 'base', 'flashvars', 'allowScriptAccess',
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;
52 var defaultToPixel
= CKEDITOR
.tools
.cssLength
;
54 function loadValue( objectNode
, embedNode
, paramMap
)
56 var attributes
= attributesMap
[ this.id
];
60 var isCheckbox
= ( this instanceof CKEDITOR
.ui
.dialog
.checkbox
);
61 for ( var i
= 0 ; i
< attributes
.length
; i
++ )
63 var attrDef
= attributes
[ i
];
64 switch ( attrDef
.type
)
69 if ( objectNode
.getAttribute( attrDef
.name
) !== null )
71 var value
= objectNode
.getAttribute( attrDef
.name
);
73 this.setValue( value
.toLowerCase() == 'true' );
75 this.setValue( value
);
78 else if ( isCheckbox
)
79 this.setValue( !!attrDef
[ 'default' ] );
84 if ( attrDef
.name
in paramMap
)
86 value
= paramMap
[ attrDef
.name
];
88 this.setValue( value
.toLowerCase() == 'true' );
90 this.setValue( value
);
93 else if ( isCheckbox
)
94 this.setValue( !!attrDef
[ 'default' ] );
99 if ( embedNode
.getAttribute( attrDef
.name
) )
101 value
= embedNode
.getAttribute( attrDef
.name
);
103 this.setValue( value
.toLowerCase() == 'true' );
105 this.setValue( value
);
108 else if ( isCheckbox
)
109 this.setValue( !!attrDef
[ 'default' ] );
114 function commitValue( objectNode
, embedNode
, paramMap
)
116 var attributes
= attributesMap
[ this.id
];
120 var isRemove
= ( this.getValue() === '' ),
121 isCheckbox
= ( this instanceof CKEDITOR
.ui
.dialog
.checkbox
);
123 for ( var i
= 0 ; i
< attributes
.length
; i
++ )
125 var attrDef
= attributes
[i
];
126 switch ( attrDef
.type
)
128 case ATTRTYPE_OBJECT
:
129 // Avoid applying the data attribute when not needed (#7733)
130 if ( !objectNode
|| ( attrDef
.name
== 'data' && embedNode
&& !objectNode
.hasAttribute( 'data' ) ) )
132 var value
= this.getValue();
133 if ( isRemove
|| isCheckbox
&& value
=== attrDef
[ 'default' ] )
134 objectNode
.removeAttribute( attrDef
.name
);
136 objectNode
.setAttribute( attrDef
.name
, value
);
141 value
= this.getValue();
142 if ( isRemove
|| isCheckbox
&& value
=== attrDef
[ 'default' ] )
144 if ( attrDef
.name
in paramMap
)
145 paramMap
[ attrDef
.name
].remove();
149 if ( attrDef
.name
in paramMap
)
150 paramMap
[ attrDef
.name
].setAttribute( 'value', value
);
153 var param
= CKEDITOR
.dom
.element
.createFromHtml( '<cke:param></cke:param>', objectNode
.getDocument() );
154 param
.setAttributes( { name
: attrDef
.name
, value
: value
} );
155 if ( objectNode
.getChildCount() < 1 )
156 param
.appendTo( objectNode
);
158 param
.insertBefore( objectNode
.getFirst() );
165 value
= this.getValue();
166 if ( isRemove
|| isCheckbox
&& value
=== attrDef
[ 'default' ])
167 embedNode
.removeAttribute( attrDef
.name
);
169 embedNode
.setAttribute( attrDef
.name
, value
);
174 CKEDITOR
.dialog
.add( 'flash', function( editor
)
176 var makeObjectTag
= !editor
.config
.flashEmbedTagOnly
,
177 makeEmbedTag
= editor
.config
.flashAddEmbedTag
|| editor
.config
.flashEmbedTagOnly
;
179 var previewPreloader
,
180 previewAreaHtml
= '<div>' + CKEDITOR
.tools
.htmlEncode( editor
.lang
.common
.preview
) +'<br>' +
181 '<div id="cke_FlashPreviewLoader' + CKEDITOR
.tools
.getNextNumber() + '" style="display:none"><div class="loading"> </div></div>' +
182 '<div id="cke_FlashPreviewBox' + CKEDITOR
.tools
.getNextNumber() + '" class="FlashPreviewBox"></div></div>';
185 title
: editor
.lang
.flash
.title
,
190 // Clear previously saved elements.
191 this.fakeImage
= this.objectNode
= this.embedNode
= null;
192 previewPreloader
= new CKEDITOR
.dom
.element( 'embed', editor
.document
);
194 // Try to detect any embed or object tag that has Flash parameters.
195 var fakeImage
= this.getSelectedElement();
196 if ( fakeImage
&& fakeImage
.data( 'cke-real-element-type' ) && fakeImage
.data( 'cke-real-element-type' ) == 'flash' )
198 this.fakeImage
= fakeImage
;
200 var realElement
= editor
.restoreRealElement( fakeImage
),
201 objectNode
= null, embedNode
= null, paramMap
= {};
202 if ( realElement
.getName() == 'cke:object' )
204 objectNode
= realElement
;
205 var embedList
= objectNode
.getElementsByTag( 'embed', 'cke' );
206 if ( embedList
.count() > 0 )
207 embedNode
= embedList
.getItem( 0 );
208 var paramList
= objectNode
.getElementsByTag( 'param', 'cke' );
209 for ( var i
= 0, length
= paramList
.count() ; i
< length
; i
++ )
211 var item
= paramList
.getItem( i
),
212 name
= item
.getAttribute( 'name' ),
213 value
= item
.getAttribute( 'value' );
214 paramMap
[ name
] = value
;
217 else if ( realElement
.getName() == 'cke:embed' )
218 embedNode
= realElement
;
220 this.objectNode
= objectNode
;
221 this.embedNode
= embedNode
;
223 this.setupContent( objectNode
, embedNode
, paramMap
, fakeImage
);
228 // If there's no selected object or embed, create one. Otherwise, reuse the
229 // selected object and embed nodes.
230 var objectNode
= null,
233 if ( !this.fakeImage
)
237 objectNode
= CKEDITOR
.dom
.element
.createFromHtml( '<cke:object></cke:object>', editor
.document
);
239 classid
: 'clsid:d27cdb6e-ae6d-11cf-96b8-444553540000',
240 codebase
: 'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0'
242 objectNode
.setAttributes( attributes
);
246 embedNode
= CKEDITOR
.dom
.element
.createFromHtml( '<cke:embed></cke:embed>', editor
.document
);
247 embedNode
.setAttributes(
249 type
: 'application/x-shockwave-flash',
250 pluginspage
: 'http://www.macromedia.com/go/getflashplayer'
253 embedNode
.appendTo( objectNode
);
258 objectNode
= this.objectNode
;
259 embedNode
= this.embedNode
;
262 // Produce the paramMap if there's an object tag.
266 var paramList
= objectNode
.getElementsByTag( 'param', 'cke' );
267 for ( var i
= 0, length
= paramList
.count() ; i
< length
; i
++ )
268 paramMap
[ paramList
.getItem( i
).getAttribute( 'name' ) ] = paramList
.getItem( i
);
271 // A subset of the specified attributes/styles
272 // should also be applied on the fake element to
273 // have better visual effect. (#5240)
274 var extraStyles
= {}, extraAttributes
= {};
275 this.commitContent( objectNode
, embedNode
, paramMap
, extraStyles
, extraAttributes
);
277 // Refresh the fake image.
278 var newFakeImage
= editor
.createFakeElement( objectNode
|| embedNode
, 'cke_flash', 'flash', true );
279 newFakeImage
.setAttributes( extraAttributes
);
280 newFakeImage
.setStyles( extraStyles
);
281 if ( this.fakeImage
)
283 newFakeImage
.replace( this.fakeImage
);
284 editor
.getSelection().selectElement( newFakeImage
);
287 editor
.insertElement( newFakeImage
);
293 this.preview
.setHtml('');
299 label
: editor
.lang
.common
.generalTab
,
310 widths
: [ '280px', '110px' ],
317 label
: editor
.lang
.common
.url
,
319 validate
: CKEDITOR
.dialog
.validate
.notEmpty( editor
.lang
.flash
.validateSrc
),
321 commit
: commitValue
,
324 var dialog
= this.getDialog(),
325 updatePreview = function( src
){
326 // Query the preloader to figure out the url impacted by based href.
327 previewPreloader
.setAttribute( 'src', src
);
328 dialog
.preview
.setHtml( '<embed height="100%" width="100%" src="'
329 + CKEDITOR
.tools
.htmlEncode( previewPreloader
.getAttribute( 'src' ) )
330 + '" type="application/x-shockwave-flash"></embed>' );
333 dialog
.preview
= dialog
.getContentElement( 'info', 'preview' ).getElement().getChild( 3 );
335 // Sync on inital value loaded.
336 this.on( 'change', function( evt
){
338 if ( evt
.data
&& evt
.data
.value
)
339 updatePreview( evt
.data
.value
);
341 // Sync when input value changed.
342 this.getInputElement().on( 'change', function( evt
){
344 updatePreview( this.getValue() );
351 filebrowser
: 'info:src',
353 // v-align with the 'src' field.
354 // TODO: We need something better than a fixed size here.
355 style
: 'display:inline-block;margin-top:10px;',
356 label
: editor
.lang
.common
.browseServer
364 widths
: [ '25%', '25%', '25%', '25%', '25%' ],
370 style
: 'width:95px',
371 label
: editor
.lang
.common
.width
,
372 validate
: CKEDITOR
.dialog
.validate
.htmlLength( editor
.lang
.common
.invalidHtmlLength
.replace( '%1', editor
.lang
.common
.width
) ),
379 style
: 'width:95px',
380 label
: editor
.lang
.common
.height
,
381 validate
: CKEDITOR
.dialog
.validate
.htmlLength( editor
.lang
.common
.invalidHtmlLength
.replace( '%1', editor
.lang
.common
.height
) ),
388 style
: 'width:95px',
389 label
: editor
.lang
.flash
.hSpace
,
390 validate
: CKEDITOR
.dialog
.validate
.integer( editor
.lang
.flash
.validateHSpace
),
397 style
: 'width:95px',
398 label
: editor
.lang
.flash
.vSpace
,
399 validate
: CKEDITOR
.dialog
.validate
.integer( editor
.lang
.flash
.validateVSpace
),
413 style
: 'width:95%;',
414 html
: previewAreaHtml
423 filebrowser
: 'uploadButton',
424 label
: editor
.lang
.common
.upload
,
430 label
: editor
.lang
.common
.upload
,
436 label
: editor
.lang
.common
.uploadSubmit
,
437 filebrowser
: 'info:src',
438 'for' : [ 'Upload', 'upload' ]
444 label
: editor
.lang
.flash
.propertiesTab
,
449 widths
: [ '50%', '50%' ],
455 label
: editor
.lang
.flash
.scale
,
457 style
: 'width : 100%;',
460 [ editor
.lang
.common
.notSet
, ''],
461 [ editor
.lang
.flash
.scaleAll
, 'showall' ],
462 [ editor
.lang
.flash
.scaleNoBorder
, 'noborder' ],
463 [ editor
.lang
.flash
.scaleFit
, 'exactfit' ]
469 id
: 'allowScriptAccess',
471 label
: editor
.lang
.flash
.access
,
473 style
: 'width : 100%;',
476 [ editor
.lang
.common
.notSet
, ''],
477 [ editor
.lang
.flash
.accessAlways
, 'always' ],
478 [ editor
.lang
.flash
.accessSameDomain
, 'samedomain' ],
479 [ editor
.lang
.flash
.accessNever
, 'never' ]
488 widths
: [ '50%', '50%' ],
494 label
: editor
.lang
.flash
.windowMode
,
496 style
: 'width : 100%;',
499 [ editor
.lang
.common
.notSet
, '' ],
500 [ editor
.lang
.flash
.windowModeWindow
, 'window' ],
501 [ editor
.lang
.flash
.windowModeOpaque
, 'opaque' ],
502 [ editor
.lang
.flash
.windowModeTransparent
, 'transparent' ]
510 label
: editor
.lang
.flash
.quality
,
512 style
: 'width : 100%;',
515 [ editor
.lang
.common
.notSet
, '' ],
516 [ editor
.lang
.flash
.qualityBest
, 'best' ],
517 [ editor
.lang
.flash
.qualityHigh
, 'high' ],
518 [ editor
.lang
.flash
.qualityAutoHigh
, 'autohigh' ],
519 [ editor
.lang
.flash
.qualityMedium
, 'medium' ],
520 [ editor
.lang
.flash
.qualityAutoLow
, 'autolow' ],
521 [ editor
.lang
.flash
.qualityLow
, 'low' ]
530 widths
: [ '50%', '50%' ],
536 label
: editor
.lang
.common
.align
,
538 style
: 'width : 100%;',
541 [ editor
.lang
.common
.notSet
, ''],
542 [ editor
.lang
.common
.alignLeft
, 'left'],
543 [ editor
.lang
.flash
.alignAbsBottom
, 'absBottom'],
544 [ editor
.lang
.flash
.alignAbsMiddle
, 'absMiddle'],
545 [ editor
.lang
.flash
.alignBaseline
, 'baseline'],
546 [ editor
.lang
.common
.alignBottom
, 'bottom'],
547 [ editor
.lang
.common
.alignMiddle
, 'middle'],
548 [ editor
.lang
.common
.alignRight
, 'right'],
549 [ editor
.lang
.flash
.alignTextTop
, 'textTop'],
550 [ editor
.lang
.common
.alignTop
, 'top']
553 commit : function( objectNode
, embedNode
, paramMap
, extraStyles
, extraAttributes
)
555 var value
= this.getValue();
556 commitValue
.apply( this, arguments
);
557 value
&& ( extraAttributes
.align
= value
);
568 label
: CKEDITOR
.tools
.htmlEncode( editor
.lang
.flash
.flashvars
),
579 label
: editor
.lang
.flash
.chkMenu
,
587 label
: editor
.lang
.flash
.chkPlay
,
595 label
: editor
.lang
.flash
.chkLoop
,
602 id
: 'allowFullScreen',
603 label
: editor
.lang
.flash
.chkFull
,
616 label
: editor
.lang
.common
.advancedTab
,
621 widths
: [ '45%', '55%' ],
627 label
: editor
.lang
.common
.id
,
634 label
: editor
.lang
.common
.advisoryTitle
,
642 widths
: [ '45%', '55%' ],
648 label
: editor
.lang
.flash
.bgcolor
,
655 label
: editor
.lang
.common
.cssClass
,
664 label
: editor
.lang
.common
.cssStyle
,