projects / ckeditor.git / blob
? search:


8cdf10e29b5845ea3d07d2de4fc3d86a4529450e
[ckeditor.git] / _source / plugins / flash / dialogs / flash.js
1 /*
2 Copyright (c) 2003-2011, 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 : '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' } ]
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 var defaultToPixel = CKEDITOR.tools.cssLength;
53
54 function loadValue( objectNode, embedNode, paramMap )
55 {
56 var attributes = attributesMap[ this.id ];
57 if ( !attributes )
58 return;
59
60 var isCheckbox = ( this instanceof CKEDITOR.ui.dialog.checkbox );
61 for ( var i = 0 ; i < attributes.length ; i++ )
62 {
63 var attrDef = attributes[ i ];
64 switch ( attrDef.type )
65 {
66 case ATTRTYPE_OBJECT:
67 if ( !objectNode )
68 continue;
69 if ( objectNode.getAttribute( attrDef.name ) !== null )
70 {
71 var value = objectNode.getAttribute( attrDef.name );
72 if ( isCheckbox )
73 this.setValue( value.toLowerCase() == 'true' );
74 else
75 this.setValue( value );
76 return;
77 }
78 else if ( isCheckbox )
79 this.setValue( !!attrDef[ 'default' ] );
80 break;
81 case ATTRTYPE_PARAM:
82 if ( !objectNode )
83 continue;
84 if ( attrDef.name in paramMap )
85 {
86 value = paramMap[ attrDef.name ];
87 if ( isCheckbox )
88 this.setValue( value.toLowerCase() == 'true' );
89 else
90 this.setValue( value );
91 return;
92 }
93 else if ( isCheckbox )
94 this.setValue( !!attrDef[ 'default' ] );
95 break;
96 case ATTRTYPE_EMBED:
97 if ( !embedNode )
98 continue;
99 if ( embedNode.getAttribute( attrDef.name ) )
100 {
101 value = embedNode.getAttribute( attrDef.name );
102 if ( isCheckbox )
103 this.setValue( value.toLowerCase() == 'true' );
104 else
105 this.setValue( value );
106 return;
107 }
108 else if ( isCheckbox )
109 this.setValue( !!attrDef[ 'default' ] );
110 }
111 }
112 }
113
114 function commitValue( objectNode, embedNode, paramMap )
115 {
116 var attributes = attributesMap[ this.id ];
117 if ( !attributes )
118 return;
119
120 var isRemove = ( this.getValue() === '' ),
121 isCheckbox = ( this instanceof CKEDITOR.ui.dialog.checkbox );
122
123 for ( var i = 0 ; i < attributes.length ; i++ )
124 {
125 var attrDef = attributes[i];
126 switch ( attrDef.type )
127 {
128 case ATTRTYPE_OBJECT:
129 // Avoid applying the data attribute when not needed (#7733)
130 if ( !objectNode || ( attrDef.name == 'data' && embedNode && !objectNode.hasAttribute( 'data' ) ) )
131 continue;
132 var value = this.getValue();
133 if ( isRemove || isCheckbox && value === attrDef[ 'default' ] )
134 objectNode.removeAttribute( attrDef.name );
135 else
136 objectNode.setAttribute( attrDef.name, value );
137 break;
138 case ATTRTYPE_PARAM:
139 if ( !objectNode )
140 continue;
141 value = this.getValue();
142 if ( isRemove || isCheckbox && value === attrDef[ 'default' ] )
143 {
144 if ( attrDef.name in paramMap )
145 paramMap[ attrDef.name ].remove();
146 }
147 else
148 {
149 if ( attrDef.name in paramMap )
150 paramMap[ attrDef.name ].setAttribute( 'value', value );
151 else
152 {
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 );
157 else
158 param.insertBefore( objectNode.getFirst() );
159 }
160 }
161 break;
162 case ATTRTYPE_EMBED:
163 if ( !embedNode )
164 continue;
165 value = this.getValue();
166 if ( isRemove || isCheckbox && value === attrDef[ 'default' ])
167 embedNode.removeAttribute( attrDef.name );
168 else
169 embedNode.setAttribute( attrDef.name, value );
170 }
171 }
172 }
173
174 CKEDITOR.dialog.add( 'flash', function( editor )
175 {
176 var makeObjectTag = !editor.config.flashEmbedTagOnly,
177 makeEmbedTag = editor.config.flashAddEmbedTag || editor.config.flashEmbedTagOnly;
178
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">&nbsp;</div></div>' +
182 '<div id="cke_FlashPreviewBox' + CKEDITOR.tools.getNextNumber() + '" class="FlashPreviewBox"></div></div>';
183
184 return {
185 title : editor.lang.flash.title,
186 minWidth : 420,
187 minHeight : 310,
188 onShow : function()
189 {
190 // Clear previously saved elements.
191 this.fakeImage = this.objectNode = this.embedNode = null;
192 previewPreloader = new CKEDITOR.dom.element( 'embed', editor.document );
193
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' )
197 {
198 this.fakeImage = fakeImage;
199
200 var realElement = editor.restoreRealElement( fakeImage ),
201 objectNode = null, embedNode = null, paramMap = {};
202 if ( realElement.getName() == 'cke:object' )
203 {
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++ )
210 {
211 var item = paramList.getItem( i ),
212 name = item.getAttribute( 'name' ),
213 value = item.getAttribute( 'value' );
214 paramMap[ name ] = value;
215 }
216 }
217 else if ( realElement.getName() == 'cke:embed' )
218 embedNode = realElement;
219
220 this.objectNode = objectNode;
221 this.embedNode = embedNode;
222
223 this.setupContent( objectNode, embedNode, paramMap, fakeImage );
224 }
225 },
226 onOk : function()
227 {
228 // If there's no selected object or embed, create one. Otherwise, reuse the
229 // selected object and embed nodes.
230 var objectNode = null,
231 embedNode = null,
232 paramMap = null;
233 if ( !this.fakeImage )
234 {
235 if ( makeObjectTag )
236 {
237 objectNode = CKEDITOR.dom.element.createFromHtml( '<cke:object></cke:object>', editor.document );
238 var attributes = {
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'
241 };
242 objectNode.setAttributes( attributes );
243 }
244 if ( makeEmbedTag )
245 {
246 embedNode = CKEDITOR.dom.element.createFromHtml( '<cke:embed></cke:embed>', editor.document );
247 embedNode.setAttributes(
248 {
249 type : 'application/x-shockwave-flash',
250 pluginspage : 'http://www.macromedia.com/go/getflashplayer'
251 } );
252 if ( objectNode )
253 embedNode.appendTo( objectNode );
254 }
255 }
256 else
257 {
258 objectNode = this.objectNode;
259 embedNode = this.embedNode;
260 }
261
262 // Produce the paramMap if there's an object tag.
263 if ( objectNode )
264 {
265 paramMap = {};
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 );
269 }
270
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 );
276
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 )
282 {
283 newFakeImage.replace( this.fakeImage );
284 editor.getSelection().selectElement( newFakeImage );
285 }
286 else
287 editor.insertElement( newFakeImage );
288 },
289
290 onHide : function()
291 {
292 if ( this.preview )
293 this.preview.setHtml('');
294 },
295
296 contents : [
297 {
298 id : 'info',
299 label : editor.lang.common.generalTab,
300 accessKey : 'I',
301 elements :
302 [
303 {
304 type : 'vbox',
305 padding : 0,
306 children :
307 [
308 {
309 type : 'hbox',
310 widths : [ '280px', '110px' ],
311 align : 'right',
312 children :
313 [
314 {
315 id : 'src',
316 type : 'text',
317 label : editor.lang.common.url,
318 required : true,
319 validate : CKEDITOR.dialog.validate.notEmpty( editor.lang.flash.validateSrc ),
320 setup : loadValue,
321 commit : commitValue,
322 onLoad : function()
323 {
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>' );
331 };
332 // Preview element
333 dialog.preview = dialog.getContentElement( 'info', 'preview' ).getElement().getChild( 3 );
334
335 // Sync on inital value loaded.
336 this.on( 'change', function( evt ){
337
338 if ( evt.data && evt.data.value )
339 updatePreview( evt.data.value );
340 } );
341 // Sync when input value changed.
342 this.getInputElement().on( 'change', function( evt ){
343
344 updatePreview( this.getValue() );
345 }, this );
346 }
347 },
348 {
349 type : 'button',
350 id : 'browse',
351 filebrowser : 'info:src',
352 hidden : true,
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
357 }
358 ]
359 }
360 ]
361 },
362 {
363 type : 'hbox',
364 widths : [ '25%', '25%', '25%', '25%', '25%' ],
365 children :
366 [
367 {
368 type : 'text',
369 id : 'width',
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 ) ),
373 setup : loadValue,
374 commit : commitValue
375 },
376 {
377 type : 'text',
378 id : 'height',
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 ) ),
382 setup : loadValue,
383 commit : commitValue
384 },
385 {
386 type : 'text',
387 id : 'hSpace',
388 style : 'width:95px',
389 label : editor.lang.flash.hSpace,
390 validate : CKEDITOR.dialog.validate.integer( editor.lang.flash.validateHSpace ),
391 setup : loadValue,
392 commit : commitValue
393 },
394 {
395 type : 'text',
396 id : 'vSpace',
397 style : 'width:95px',
398 label : editor.lang.flash.vSpace,
399 validate : CKEDITOR.dialog.validate.integer( editor.lang.flash.validateVSpace ),
400 setup : loadValue,
401 commit : commitValue
402 }
403 ]
404 },
405
406 {
407 type : 'vbox',
408 children :
409 [
410 {
411 type : 'html',
412 id : 'preview',
413 style : 'width:95%;',
414 html : previewAreaHtml
415 }
416 ]
417 }
418 ]
419 },
420 {
421 id : 'Upload',
422 hidden : true,
423 filebrowser : 'uploadButton',
424 label : editor.lang.common.upload,
425 elements :
426 [
427 {
428 type : 'file',
429 id : 'upload',
430 label : editor.lang.common.upload,
431 size : 38
432 },
433 {
434 type : 'fileButton',
435 id : 'uploadButton',
436 label : editor.lang.common.uploadSubmit,
437 filebrowser : 'info:src',
438 'for' : [ 'Upload', 'upload' ]
439 }
440 ]
441 },
442 {
443 id : 'properties',
444 label : editor.lang.flash.propertiesTab,
445 elements :
446 [
447 {
448 type : 'hbox',
449 widths : [ '50%', '50%' ],
450 children :
451 [
452 {
453 id : 'scale',
454 type : 'select',
455 label : editor.lang.flash.scale,
456 'default' : '',
457 style : 'width : 100%;',
458 items :
459 [
460 [ editor.lang.common.notSet , ''],
461 [ editor.lang.flash.scaleAll, 'showall' ],
462 [ editor.lang.flash.scaleNoBorder, 'noborder' ],
463 [ editor.lang.flash.scaleFit, 'exactfit' ]
464 ],
465 setup : loadValue,
466 commit : commitValue
467 },
468 {
469 id : 'allowScriptAccess',
470 type : 'select',
471 label : editor.lang.flash.access,
472 'default' : '',
473 style : 'width : 100%;',
474 items :
475 [
476 [ editor.lang.common.notSet , ''],
477 [ editor.lang.flash.accessAlways, 'always' ],
478 [ editor.lang.flash.accessSameDomain, 'samedomain' ],
479 [ editor.lang.flash.accessNever, 'never' ]
480 ],
481 setup : loadValue,
482 commit : commitValue
483 }
484 ]
485 },
486 {
487 type : 'hbox',
488 widths : [ '50%', '50%' ],
489 children :
490 [
491 {
492 id : 'wmode',
493 type : 'select',
494 label : editor.lang.flash.windowMode,
495 'default' : '',
496 style : 'width : 100%;',
497 items :
498 [
499 [ editor.lang.common.notSet , '' ],
500 [ editor.lang.flash.windowModeWindow, 'window' ],
501 [ editor.lang.flash.windowModeOpaque, 'opaque' ],
502 [ editor.lang.flash.windowModeTransparent, 'transparent' ]
503 ],
504 setup : loadValue,
505 commit : commitValue
506 },
507 {
508 id : 'quality',
509 type : 'select',
510 label : editor.lang.flash.quality,
511 'default' : 'high',
512 style : 'width : 100%;',
513 items :
514 [
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' ]
522 ],
523 setup : loadValue,
524 commit : commitValue
525 }
526 ]
527 },
528 {
529 type : 'hbox',
530 widths : [ '50%', '50%' ],
531 children :
532 [
533 {
534 id : 'align',
535 type : 'select',
536 label : editor.lang.common.align,
537 'default' : '',
538 style : 'width : 100%;',
539 items :
540 [
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']
551 ],
552 setup : loadValue,
553 commit : function( objectNode, embedNode, paramMap, extraStyles, extraAttributes )
554 {
555 var value = this.getValue();
556 commitValue.apply( this, arguments );
557 value && ( extraAttributes.align = value );
558 }
559 },
560 {
561 type : 'html',
562 html : '<div></div>'
563 }
564 ]
565 },
566 {
567 type : 'fieldset',
568 label : CKEDITOR.tools.htmlEncode( editor.lang.flash.flashvars ),
569 children :
570 [
571 {
572 type : 'vbox',
573 padding : 0,
574 children :
575 [
576 {
577 type : 'checkbox',
578 id : 'menu',
579 label : editor.lang.flash.chkMenu,
580 'default' : true,
581 setup : loadValue,
582 commit : commitValue
583 },
584 {
585 type : 'checkbox',
586 id : 'play',
587 label : editor.lang.flash.chkPlay,
588 'default' : true,
589 setup : loadValue,
590 commit : commitValue
591 },
592 {
593 type : 'checkbox',
594 id : 'loop',
595 label : editor.lang.flash.chkLoop,
596 'default' : true,
597 setup : loadValue,
598 commit : commitValue
599 },
600 {
601 type : 'checkbox',
602 id : 'allowFullScreen',
603 label : editor.lang.flash.chkFull,
604 'default' : true,
605 setup : loadValue,
606 commit : commitValue
607 }
608 ]
609 }
610 ]
611 }
612 ]
613 },
614 {
615 id : 'advanced',
616 label : editor.lang.common.advancedTab,
617 elements :
618 [
619 {
620 type : 'hbox',
621 widths : [ '45%', '55%' ],
622 children :
623 [
624 {
625 type : 'text',
626 id : 'id',
627 label : editor.lang.common.id,
628 setup : loadValue,
629 commit : commitValue
630 },
631 {
632 type : 'text',
633 id : 'title',
634 label : editor.lang.common.advisoryTitle,
635 setup : loadValue,
636 commit : commitValue
637 }
638 ]
639 },
640 {
641 type : 'hbox',
642 widths : [ '45%', '55%' ],
643 children :
644 [
645 {
646 type : 'text',
647 id : 'bgcolor',
648 label : editor.lang.flash.bgcolor,
649 setup : loadValue,
650 commit : commitValue
651 },
652 {
653 type : 'text',
654 id : 'class',
655 label : editor.lang.common.cssClass,
656 setup : loadValue,
657 commit : commitValue
658 }
659 ]
660 },
661 {
662 type : 'text',
663 id : 'style',
664 label : editor.lang.common.cssStyle,
665 setup : loadValue,
666 commit : commitValue
667 }
668 ]
669 }
670 ]
671 };
672 } );
673 })();
ckeditor for Plinn