?  search:
summary | log | graphiclog1 | graphiclog2 | commit | commitdiff | tree | refs | edit | fork
blame | history | raw | HEAD
Update ckeditor to version 3.2.1
[gopost.git] / ckeditor / _source / plugins / flash / dialogs / flash.js
blob666d3c8fdd88c1f9dd801329925968d74dc4b6b9
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 /*
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' } ],
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 previewPreloader,
177 previewAreaHtml = '<div>' + CKEDITOR.tools.htmlEncode( editor.lang.common.preview ) +'<br>' +
178 '<div id="FlashPreviewLoader" style="display:none"><div class="loading">&nbsp;</div></div>' +
179 '<div id="FlashPreviewBox"></div></div>';
180
181 return {
182 title : editor.lang.flash.title,
183 minWidth : 420,
184 minHeight : 310,
185 onShow : function()
186 {
187 // Clear previously saved elements.
188 this.fakeImage = this.objectNode = this.embedNode = null;
189 previewPreloader = new CKEDITOR.dom.element( 'embeded', editor.document );
190
191 // Try to detect any embed or object tag that has Flash parameters.
192 var fakeImage = this.getSelectedElement();
193 if ( fakeImage && fakeImage.getAttribute( '_cke_real_element_type' ) && fakeImage.getAttribute( '_cke_real_element_type' ) == 'flash' )
194 {
195 this.fakeImage = fakeImage;
196
197 var realElement = editor.restoreRealElement( fakeImage ),
198 objectNode = null, embedNode = null, paramMap = {};
199 if ( realElement.getName() == 'cke:object' )
200 {
201 objectNode = realElement;
202 var embedList = objectNode.getElementsByTag( 'embed', 'cke' );
203 if ( embedList.count() > 0 )
204 embedNode = embedList.getItem( 0 );
205 var paramList = objectNode.getElementsByTag( 'param', 'cke' );
206 for ( var i = 0, length = paramList.count() ; i < length ; i++ )
207 {
208 var item = paramList.getItem( i ),
209 name = item.getAttribute( 'name' ),
210 value = item.getAttribute( 'value' );
211 paramMap[ name ] = value;
212 }
213 }
214 else if ( realElement.getName() == 'cke:embed' )
215 embedNode = realElement;
216
217 this.objectNode = objectNode;
218 this.embedNode = embedNode;
219
220 this.setupContent( objectNode, embedNode, paramMap, fakeImage );
221 }
222 },
223 onOk : function()
224 {
225 // If there's no selected object or embed, create one. Otherwise, reuse the
226 // selected object and embed nodes.
227 var objectNode = null,
228 embedNode = null,
229 paramMap = null;
230 if ( !this.fakeImage )
231 {
232 if ( makeObjectTag )
233 {
234 objectNode = CKEDITOR.dom.element.createFromHtml( '<cke:object></cke:object>', editor.document );
235 var attributes = {
236 classid : 'clsid:d27cdb6e-ae6d-11cf-96b8-444553540000',
237 codebase : 'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0'
238 };
239 objectNode.setAttributes( attributes );
240 }
241 if ( makeEmbedTag )
242 {
243 embedNode = CKEDITOR.dom.element.createFromHtml( '<cke:embed></cke:embed>', editor.document );
244 embedNode.setAttributes(
245 {
246 type : 'application/x-shockwave-flash',
247 pluginspage : 'http://www.macromedia.com/go/getflashplayer'
248 } );
249 if ( objectNode )
250 embedNode.appendTo( objectNode );
251 }
252 }
253 else
254 {
255 objectNode = this.objectNode;
256 embedNode = this.embedNode;
257 }
258
259 // Produce the paramMap if there's an object tag.
260 if ( objectNode )
261 {
262 paramMap = {};
263 var paramList = objectNode.getElementsByTag( 'param', 'cke' );
264 for ( var i = 0, length = paramList.count() ; i < length ; i++ )
265 paramMap[ paramList.getItem( i ).getAttribute( 'name' ) ] = paramList.getItem( i );
266 }
267
268 // A subset of the specified attributes/styles
269 // should also be applied on the fake element to
270 // have better visual effect. (#5240)
271 var extraStyles = {}, extraAttributes = {};
272 this.commitContent( objectNode, embedNode, paramMap, extraStyles, extraAttributes );
273
274 // Refresh the fake image.
275 var newFakeImage = editor.createFakeElement( objectNode || embedNode, 'cke_flash', 'flash', true );
276 newFakeImage.setAttributes( extraAttributes );
277 newFakeImage.setStyles( extraStyles );
278 if ( this.fakeImage )
279 {
280 newFakeImage.replace( this.fakeImage );
281 editor.getSelection().selectElement( newFakeImage );
282 }
283 else
284 editor.insertElement( newFakeImage );
285 },
286
287 onHide : function()
288 {
289 if ( this.preview )
290 this.preview.setHtml('');
291 },
292
293 contents : [
294 {
295 id : 'info',
296 label : editor.lang.common.generalTab,
297 accessKey : 'I',
298 elements :
299 [
300 {
301 type : 'vbox',
302 padding : 0,
303 children :
304 [
305 {
306 type : 'hbox',
307 widths : [ '280px', '110px' ],
308 align : 'right',
309 children :
310 [
311 {
312 id : 'src',
313 type : 'text',
314 label : editor.lang.common.url,
315 required : true,
316 validate : CKEDITOR.dialog.validate.notEmpty( editor.lang.flash.validateSrc ),
317 setup : loadValue,
318 commit : commitValue,
319 onLoad : function()
320 {
321 var dialog = this.getDialog(),
322 updatePreview = function( src ){
323 // Query the preloader to figure out the url impacted by based href.
324 previewPreloader.setAttribute( 'src', src );
325 dialog.preview.setHtml( '<embed height="100%" width="100%" src="'
326 + CKEDITOR.tools.htmlEncode( previewPreloader.getAttribute( 'src' ) )
327 + '" type="application/x-shockwave-flash"></embed>' );
328 };
329 // Preview element
330 dialog.preview = dialog.getContentElement( 'info', 'preview' ).getElement().getChild( 3 );
331
332 // Sync on inital value loaded.
333 this.on( 'change', function( evt ){
334
335 if ( evt.data && evt.data.value )
336 updatePreview( evt.data.value );
337 } );
338 // Sync when input value changed.
339 this.getInputElement().on( 'change', function( evt ){
340
341 updatePreview( this.getValue() );
342 }, this );
343 }
344 },
345 {
346 type : 'button',
347 id : 'browse',
348 filebrowser : 'info:src',
349 hidden : true,
350 // v-align with the 'src' field.
351 // TODO: We need something better than a fixed size here.
352 style : 'display:inline-block;margin-top:10px;',
353 label : editor.lang.common.browseServer
354 }
355 ]
356 }
357 ]
358 },
359 {
360 type : 'hbox',
361 widths : [ '25%', '25%', '25%', '25%', '25%' ],
362 children :
363 [
364 {
365 type : 'text',
366 id : 'width',
367 style : 'width:95px',
368 label : editor.lang.flash.width,
369 validate : CKEDITOR.dialog.validate.integer( editor.lang.flash.validateWidth ),
370 setup : function( objectNode, embedNode, paramMap, fakeImage )
371 {
372 loadValue.apply( this, arguments );
373 if ( fakeImage )
374 {
375 var fakeImageWidth = parseInt( fakeImage.$.style.width, 10 );
376 if ( !isNaN( fakeImageWidth ) )
377 this.setValue( fakeImageWidth );
378 }
379 },
380 commit : function( objectNode, embedNode, paramMap, extraStyles )
381 {
382 commitValue.apply( this, arguments );
383 if ( this.getValue() )
384 extraStyles.width = this.getValue() + 'px';
385 }
386 },
387 {
388 type : 'text',
389 id : 'height',
390 style : 'width:95px',
391 label : editor.lang.flash.height,
392 validate : CKEDITOR.dialog.validate.integer( editor.lang.flash.validateHeight ),
393 setup : function( objectNode, embedNode, paramMap, fakeImage )
394 {
395 loadValue.apply( this, arguments );
396 if ( fakeImage )
397 {
398 var fakeImageHeight = parseInt( fakeImage.$.style.height, 10 );
399 if ( !isNaN( fakeImageHeight ) )
400 this.setValue( fakeImageHeight );
401 }
402 },
403 commit : function( objectNode, embedNode, paramMap, extraStyles )
404 {
405 commitValue.apply( this, arguments );
406 if ( this.getValue() )
407 extraStyles.height = this.getValue() + 'px';
408 }
409 },
410 {
411 type : 'text',
412 id : 'hSpace',
413 style : 'width:95px',
414 label : editor.lang.flash.hSpace,
415 validate : CKEDITOR.dialog.validate.integer( editor.lang.flash.validateHSpace ),
416 setup : loadValue,
417 commit : commitValue
418 },
419 {
420 type : 'text',
421 id : 'vSpace',
422 style : 'width:95px',
423 label : editor.lang.flash.vSpace,
424 validate : CKEDITOR.dialog.validate.integer( editor.lang.flash.validateVSpace ),
425 setup : loadValue,
426 commit : commitValue
427 }
428 ]
429 },
430
431 {
432 type : 'vbox',
433 children :
434 [
435 {
436 type : 'html',
437 id : 'preview',
438 style : 'width:95%;',
439 html : previewAreaHtml
440 }
441 ]
442 }
443 ]
444 },
445 {
446 id : 'Upload',
447 hidden : true,
448 filebrowser : 'uploadButton',
449 label : editor.lang.common.upload,
450 elements :
451 [
452 {
453 type : 'file',
454 id : 'upload',
455 label : editor.lang.common.upload,
456 size : 38
457 },
458 {
459 type : 'fileButton',
460 id : 'uploadButton',
461 label : editor.lang.common.uploadSubmit,
462 filebrowser : 'info:src',
463 'for' : [ 'Upload', 'upload' ]
464 }
465 ]
466 },
467 {
468 id : 'properties',
469 label : editor.lang.flash.propertiesTab,
470 elements :
471 [
472 {
473 type : 'hbox',
474 widths : [ '50%', '50%' ],
475 children :
476 [
477 {
478 id : 'scale',
479 type : 'select',
480 label : editor.lang.flash.scale,
481 'default' : '',
482 style : 'width : 100%;',
483 items :
484 [
485 [ editor.lang.common.notSet , ''],
486 [ editor.lang.flash.scaleAll, 'showall' ],
487 [ editor.lang.flash.scaleNoBorder, 'noborder' ],
488 [ editor.lang.flash.scaleFit, 'exactfit' ]
489 ],
490 setup : loadValue,
491 commit : commitValue
492 },
493 {
494 id : 'allowScriptAccess',
495 type : 'select',
496 label : editor.lang.flash.access,
497 'default' : '',
498 style : 'width : 100%;',
499 items :
500 [
501 [ editor.lang.common.notSet , ''],
502 [ editor.lang.flash.accessAlways, 'always' ],
503 [ editor.lang.flash.accessSameDomain, 'samedomain' ],
504 [ editor.lang.flash.accessNever, 'never' ]
505 ],
506 setup : loadValue,
507 commit : commitValue
508 }
509 ]
510 },
511 {
512 type : 'hbox',
513 widths : [ '50%', '50%' ],
514 children :
515 [
516 {
517 id : 'wmode',
518 type : 'select',
519 label : editor.lang.flash.windowMode,
520 'default' : '',
521 style : 'width : 100%;',
522 items :
523 [
524 [ editor.lang.common.notSet , '' ],
525 [ editor.lang.flash.windowModeWindow, 'window' ],
526 [ editor.lang.flash.windowModeOpaque, 'opaque' ],
527 [ editor.lang.flash.windowModeTransparent, 'transparent' ]
528 ],
529 setup : loadValue,
530 commit : commitValue
531 },
532 {
533 id : 'quality',
534 type : 'select',
535 label : editor.lang.flash.quality,
536 'default' : 'high',
537 style : 'width : 100%;',
538 items :
539 [
540 [ editor.lang.common.notSet , '' ],
541 [ editor.lang.flash.qualityBest, 'best' ],
542 [ editor.lang.flash.qualityHigh, 'high' ],
543 [ editor.lang.flash.qualityAutoHigh, 'autohigh' ],
544 [ editor.lang.flash.qualityMedium, 'medium' ],
545 [ editor.lang.flash.qualityAutoLow, 'autolow' ],
546 [ editor.lang.flash.qualityLow, 'low' ]
547 ],
548 setup : loadValue,
549 commit : commitValue
550 }
551 ]
552 },
553 {
554 type : 'hbox',
555 widths : [ '50%', '50%' ],
556 children :
557 [
558 {
559 id : 'align',
560 type : 'select',
561 label : editor.lang.flash.align,
562 'default' : '',
563 style : 'width : 100%;',
564 items :
565 [
566 [ editor.lang.common.notSet , ''],
567 [ editor.lang.flash.alignLeft , 'left'],
568 [ editor.lang.flash.alignAbsBottom , 'absBottom'],
569 [ editor.lang.flash.alignAbsMiddle , 'absMiddle'],
570 [ editor.lang.flash.alignBaseline , 'baseline'],
571 [ editor.lang.flash.alignBottom , 'bottom'],
572 [ editor.lang.flash.alignMiddle , 'middle'],
573 [ editor.lang.flash.alignRight , 'right'],
574 [ editor.lang.flash.alignTextTop , 'textTop'],
575 [ editor.lang.flash.alignTop , 'top']
576 ],
577 setup : loadValue,
578 commit : function( objectNode, embedNode, paramMap, extraStyles, extraAttributes )
579 {
580 var value = this.getValue();
581 commitValue.apply( this, arguments );
582 value && ( extraAttributes.align = value );
583 }
584 },
585 {
586 type : 'html',
587 html : '<div></div>'
588 }
589 ]
590 },
591 {
592 type : 'fieldset',
593 label : CKEDITOR.tools.htmlEncode( editor.lang.flash.flashvars ),
594 children :
595 [
596 {
597 type : 'vbox',
598 padding : 0,
599 children :
600 [
601 {
602 type : 'checkbox',
603 id : 'menu',
604 label : editor.lang.flash.chkMenu,
605 'default' : true,
606 setup : loadValue,
607 commit : commitValue
608 },
609 {
610 type : 'checkbox',
611 id : 'play',
612 label : editor.lang.flash.chkPlay,
613 'default' : true,
614 setup : loadValue,
615 commit : commitValue
616 },
617 {
618 type : 'checkbox',
619 id : 'loop',
620 label : editor.lang.flash.chkLoop,
621 'default' : true,
622 setup : loadValue,
623 commit : commitValue
624 },
625 {
626 type : 'checkbox',
627 id : 'allowFullScreen',
628 label : editor.lang.flash.chkFull,
629 'default' : true,
630 setup : loadValue,
631 commit : commitValue
632 }
633 ]
634 }
635 ]
636 }
637 ]
638 },
639 {
640 id : 'advanced',
641 label : editor.lang.common.advancedTab,
642 elements :
643 [
644 {
645 type : 'hbox',
646 widths : [ '45%', '55%' ],
647 children :
648 [
649 {
650 type : 'text',
651 id : 'id',
652 label : editor.lang.common.id,
653 setup : loadValue,
654 commit : commitValue
655 },
656 {
657 type : 'text',
658 id : 'title',
659 label : editor.lang.common.advisoryTitle,
660 setup : loadValue,
661 commit : commitValue
662 }
663 ]
664 },
665 {
666 type : 'hbox',
667 widths : [ '45%', '55%' ],
668 children :
669 [
670 {
671 type : 'text',
672 id : 'bgcolor',
673 label : editor.lang.flash.bgcolor,
674 setup : loadValue,
675 commit : commitValue
676 },
677 {
678 type : 'text',
679 id : 'class',
680 label : editor.lang.common.cssClass,
681 setup : loadValue,
682 commit : commitValue
683 }
684 ]
685 },
686 {
687 type : 'text',
688 id : 'style',
689 label : editor.lang.common.cssStyle,
690 setup : loadValue,
691 commit : commitValue
692 }
693 ]
694 }
695 ]
696 };
697 } );
698 })();
spaceup