2 Copyright (c) 2003-2013, CKSource - Frederico Knabben. All rights reserved.
\r
3 For licensing, see LICENSE.html or http://ckeditor.com/license
\r
6 /** @fileoverview The "dialogui" plugin. */
\r
8 CKEDITOR.plugins.add( 'dialogui' );
\r
12 var initPrivateObject = function( elementDefinition )
\r
14 this._ || ( this._ = {} );
\r
15 this._['default'] = this._.initValue = elementDefinition['default'] || '';
\r
16 this._.required = elementDefinition[ 'required' ] || false;
\r
17 var args = [ this._ ];
\r
18 for ( var i = 1 ; i < arguments.length ; i++ )
\r
19 args.push( arguments[i] );
\r
21 CKEDITOR.tools.extend.apply( CKEDITOR.tools, args );
\r
26 build : function( dialog, elementDefinition, output )
\r
28 return new CKEDITOR.ui.dialog.textInput( dialog, elementDefinition, output );
\r
33 build : function( dialog, elementDefinition, output )
\r
35 return new CKEDITOR.ui.dialog[elementDefinition.type]( dialog, elementDefinition, output );
\r
40 build : function( dialog, elementDefinition, output )
\r
42 var children = elementDefinition.children,
\r
46 for ( var i = 0 ; ( i < children.length && ( child = children[i] ) ) ; i++ )
\r
49 childHtmlList.push( childHtml );
\r
50 childObjList.push( CKEDITOR.dialog._.uiElementBuilders[ child.type ].build( dialog, child, childHtml ) );
\r
52 return new CKEDITOR.ui.dialog[ elementDefinition.type ]( dialog, childObjList, childHtmlList, output, elementDefinition );
\r
57 isChanged : function()
\r
59 return this.getValue() != this.getInitValue();
\r
62 reset : function( noChangeEvent )
\r
64 this.setValue( this.getInitValue(), noChangeEvent );
\r
67 setInitValue : function()
\r
69 this._.initValue = this.getValue();
\r
72 resetInitValue : function()
\r
74 this._.initValue = this._['default'];
\r
77 getInitValue : function()
\r
79 return this._.initValue;
\r
82 commonEventProcessors = CKEDITOR.tools.extend( {}, CKEDITOR.ui.dialog.uiElement.prototype.eventProcessors,
\r
84 onChange : function( dialog, func )
\r
86 if ( !this._.domOnChangeRegistered )
\r
88 dialog.on( 'load', function()
\r
90 this.getInputElement().on( 'change', function()
\r
92 // Make sure 'onchange' doesn't get fired after dialog closed. (#5719)
\r
93 if ( !dialog.parts.dialog.isVisible() )
\r
96 this.fire( 'change', { value : this.getValue() } );
\r
99 this._.domOnChangeRegistered = true;
\r
102 this.on( 'change', func );
\r
105 eventRegex = /^on([A-Z]\w+)/,
\r
106 cleanInnerDefinition = function( def )
\r
108 // An inner UI element should not have the parent's type, title or events.
\r
109 for ( var i in def )
\r
111 if ( eventRegex.test( i ) || i == 'title' || i == 'type' )
\r
117 CKEDITOR.tools.extend( CKEDITOR.ui.dialog,
\r
118 /** @lends CKEDITOR.ui.dialog */
\r
121 * Base class for all dialog elements with a textual label on the left.
\r
124 * @extends CKEDITOR.ui.dialog.uiElement
\r
125 * @param {CKEDITOR.dialog} dialog
\r
126 * Parent dialog object.
\r
127 * @param {CKEDITOR.dialog.definition.uiElement} elementDefinition
\r
128 * The element definition. Accepted fields:
\r
130 * <li><strong>label</strong> (Required) The label string.</li>
\r
131 * <li><strong>labelLayout</strong> (Optional) Put 'horizontal' here if the
\r
132 * label element is to be layed out horizontally. Otherwise a vertical
\r
133 * layout will be used.</li>
\r
134 * <li><strong>widths</strong> (Optional) This applies only for horizontal
\r
135 * layouts - an 2-element array of lengths to specify the widths of the
\r
136 * label and the content element.</li>
\r
138 * @param {Array} htmlList
\r
139 * List of HTML code to output to.
\r
140 * @param {Function} contentHtml
\r
141 * A function returning the HTML code string to be added inside the content
\r
144 labeledElement : function( dialog, elementDefinition, htmlList, contentHtml )
\r
146 if ( arguments.length < 4 )
\r
149 var _ = initPrivateObject.call( this, elementDefinition );
\r
150 _.labelId = CKEDITOR.tools.getNextId() + '_label';
\r
151 var children = this._.children = [];
\r
153 var innerHTML = function()
\r
156 requiredClass = elementDefinition.required ? ' cke_required' : '' ;
\r
157 if ( elementDefinition.labelLayout != 'horizontal' )
\r
158 html.push( '<label class="cke_dialog_ui_labeled_label' + requiredClass + '" ',
\r
159 ' id="'+ _.labelId + '"',
\r
160 ( _.inputId? ' for="' + _.inputId + '"' : '' ),
\r
161 ( elementDefinition.labelStyle ? ' style="' + elementDefinition.labelStyle + '"' : '' ) +'>',
\r
162 elementDefinition.label,
\r
164 '<div class="cke_dialog_ui_labeled_content"' + ( elementDefinition.controlStyle ? ' style="' + elementDefinition.controlStyle + '"' : '' ) + ' role="presentation">',
\r
165 contentHtml.call( this, dialog, elementDefinition ),
\r
169 var hboxDefinition = {
\r
171 widths : elementDefinition.widths,
\r
177 html : '<label class="cke_dialog_ui_labeled_label' + requiredClass + '"' +
\r
178 ' id="' + _.labelId + '"' +
\r
179 ' for="' + _.inputId + '"' +
\r
180 ( elementDefinition.labelStyle ? ' style="' + elementDefinition.labelStyle + '"' : '' ) +'>' +
\r
181 CKEDITOR.tools.htmlEncode( elementDefinition.label ) +
\r
186 html : '<span class="cke_dialog_ui_labeled_content"' + ( elementDefinition.controlStyle ? ' style="' + elementDefinition.controlStyle + '"' : '' ) + '>' +
\r
187 contentHtml.call( this, dialog, elementDefinition ) +
\r
192 CKEDITOR.dialog._.uiElementBuilders.hbox.build( dialog, hboxDefinition, html );
\r
194 return html.join( '' );
\r
196 CKEDITOR.ui.dialog.uiElement.call( this, dialog, elementDefinition, htmlList, 'div', null, { role : 'presentation' }, innerHTML );
\r
200 * A text input with a label. This UI element class represents both the
\r
201 * single-line text inputs and password inputs in dialog boxes.
\r
204 * @extends CKEDITOR.ui.dialog.labeledElement
\r
205 * @param {CKEDITOR.dialog} dialog
\r
206 * Parent dialog object.
\r
207 * @param {CKEDITOR.dialog.definition.uiElement} elementDefinition
\r
208 * The element definition. Accepted fields:
\r
210 * <li><strong>default</strong> (Optional) The default value.</li>
\r
211 * <li><strong>validate</strong> (Optional) The validation function. </li>
\r
212 * <li><strong>maxLength</strong> (Optional) The maximum length of text box
\r
214 * <li><strong>size</strong> (Optional) The size of the text box. This is
\r
215 * usually overridden by the size defined by the skin, however.</li>
\r
217 * @param {Array} htmlList
\r
218 * List of HTML code to output to.
\r
220 textInput : function( dialog, elementDefinition, htmlList )
\r
222 if ( arguments.length < 3 )
\r
225 initPrivateObject.call( this, elementDefinition );
\r
226 var domId = this._.inputId = CKEDITOR.tools.getNextId() + '_textInput',
\r
227 attributes = { 'class' : 'cke_dialog_ui_input_' + elementDefinition.type, id : domId, type : elementDefinition.type },
\r
230 // Set the validator, if any.
\r
231 if ( elementDefinition.validate )
\r
232 this.validate = elementDefinition.validate;
\r
234 // Set the max length and size.
\r
235 if ( elementDefinition.maxLength )
\r
236 attributes.maxlength = elementDefinition.maxLength;
\r
237 if ( elementDefinition.size )
\r
238 attributes.size = elementDefinition.size;
\r
240 if ( elementDefinition.inputStyle )
\r
241 attributes.style = elementDefinition.inputStyle;
\r
244 var innerHTML = function()
\r
246 // IE BUG: Text input fields in IE at 100% would exceed a <td> or inline
\r
247 // container's width, so need to wrap it inside a <div>.
\r
248 var html = [ '<div class="cke_dialog_ui_input_', elementDefinition.type, '" role="presentation"' ];
\r
250 if ( elementDefinition.width )
\r
251 html.push( 'style="width:'+ elementDefinition.width +'" ' );
\r
253 html.push( '><input ' );
\r
255 attributes[ 'aria-labelledby' ] = this._.labelId;
\r
256 this._.required && ( attributes[ 'aria-required' ] = this._.required );
\r
257 for ( var i in attributes )
\r
258 html.push( i + '="' + attributes[i] + '" ' );
\r
259 html.push( ' /></div>' );
\r
260 return html.join( '' );
\r
262 CKEDITOR.ui.dialog.labeledElement.call( this, dialog, elementDefinition, htmlList, innerHTML );
\r
266 * A text area with a label on the top or left.
\r
268 * @extends CKEDITOR.ui.dialog.labeledElement
\r
270 * @param {CKEDITOR.dialog} dialog
\r
271 * Parent dialog object.
\r
272 * @param {CKEDITOR.dialog.definition.uiElement} elementDefinition
\r
273 * The element definition. Accepted fields:
\r
275 * <li><strong>rows</strong> (Optional) The number of rows displayed.
\r
276 * Defaults to 5 if not defined.</li>
\r
277 * <li><strong>cols</strong> (Optional) The number of cols displayed.
\r
278 * Defaults to 20 if not defined. Usually overridden by skins.</li>
\r
279 * <li><strong>default</strong> (Optional) The default value.</li>
\r
280 * <li><strong>validate</strong> (Optional) The validation function. </li>
\r
282 * @param {Array} htmlList
\r
283 * List of HTML code to output to.
\r
285 textarea : function( dialog, elementDefinition, htmlList )
\r
287 if ( arguments.length < 3 )
\r
290 initPrivateObject.call( this, elementDefinition );
\r
292 domId = this._.inputId = CKEDITOR.tools.getNextId() + '_textarea',
\r
295 if ( elementDefinition.validate )
\r
296 this.validate = elementDefinition.validate;
\r
298 // Generates the essential attributes for the textarea tag.
\r
299 attributes.rows = elementDefinition.rows || 5;
\r
300 attributes.cols = elementDefinition.cols || 20;
\r
302 if ( typeof elementDefinition.inputStyle != 'undefined' )
\r
303 attributes.style = elementDefinition.inputStyle;
\r
307 var innerHTML = function()
\r
309 attributes[ 'aria-labelledby' ] = this._.labelId;
\r
310 this._.required && ( attributes[ 'aria-required' ] = this._.required );
\r
311 var html = [ '<div class="cke_dialog_ui_input_textarea" role="presentation"><textarea class="cke_dialog_ui_input_textarea" id="', domId, '" ' ];
\r
312 for ( var i in attributes )
\r
313 html.push( i + '="' + CKEDITOR.tools.htmlEncode( attributes[i] ) + '" ' );
\r
314 html.push( '>', CKEDITOR.tools.htmlEncode( me._['default'] ), '</textarea></div>' );
\r
315 return html.join( '' );
\r
317 CKEDITOR.ui.dialog.labeledElement.call( this, dialog, elementDefinition, htmlList, innerHTML );
\r
321 * A single checkbox with a label on the right.
\r
323 * @extends CKEDITOR.ui.dialog.uiElement
\r
325 * @param {CKEDITOR.dialog} dialog
\r
326 * Parent dialog object.
\r
327 * @param {CKEDITOR.dialog.definition.uiElement} elementDefinition
\r
328 * The element definition. Accepted fields:
\r
330 * <li><strong>checked</strong> (Optional) Whether the checkbox is checked
\r
331 * on instantiation. Defaults to false.</li>
\r
332 * <li><strong>validate</strong> (Optional) The validation function.</li>
\r
333 * <li><strong>label</strong> (Optional) The checkbox label.</li>
\r
335 * @param {Array} htmlList
\r
336 * List of HTML code to output to.
\r
338 checkbox : function( dialog, elementDefinition, htmlList )
\r
340 if ( arguments.length < 3 )
\r
343 var _ = initPrivateObject.call( this, elementDefinition, { 'default' : !!elementDefinition[ 'default' ] } );
\r
345 if ( elementDefinition.validate )
\r
346 this.validate = elementDefinition.validate;
\r
349 var innerHTML = function()
\r
351 var myDefinition = CKEDITOR.tools.extend( {}, elementDefinition,
\r
353 id : elementDefinition.id ? elementDefinition.id + '_checkbox' : CKEDITOR.tools.getNextId() + '_checkbox'
\r
357 var labelId = CKEDITOR.tools.getNextId() + '_label';
\r
358 var attributes = { 'class' : 'cke_dialog_ui_checkbox_input', type : 'checkbox', 'aria-labelledby' : labelId };
\r
359 cleanInnerDefinition( myDefinition );
\r
360 if ( elementDefinition[ 'default' ] )
\r
361 attributes.checked = 'checked';
\r
363 if ( typeof myDefinition.inputStyle != 'undefined' )
\r
364 myDefinition.style = myDefinition.inputStyle;
\r
366 _.checkbox = new CKEDITOR.ui.dialog.uiElement( dialog, myDefinition, html, 'input', null, attributes );
\r
367 html.push( ' <label id="', labelId, '" for="', attributes.id, '"' + ( elementDefinition.labelStyle ? ' style="' + elementDefinition.labelStyle + '"' : '' ) + '>',
\r
368 CKEDITOR.tools.htmlEncode( elementDefinition.label ),
\r
370 return html.join( '' );
\r
373 CKEDITOR.ui.dialog.uiElement.call( this, dialog, elementDefinition, htmlList, 'span', null, null, innerHTML );
\r
377 * A group of radio buttons.
\r
380 * @extends CKEDITOR.ui.dialog.labeledElement
\r
381 * @param {CKEDITOR.dialog} dialog
\r
382 * Parent dialog object.
\r
383 * @param {CKEDITOR.dialog.definition.uiElement} elementDefinition
\r
384 * The element definition. Accepted fields:
\r
386 * <li><strong>default</strong> (Required) The default value.</li>
\r
387 * <li><strong>validate</strong> (Optional) The validation function.</li>
\r
388 * <li><strong>items</strong> (Required) An array of options. Each option
\r
389 * is a 1- or 2-item array of format [ 'Description', 'Value' ]. If 'Value'
\r
390 * is missing, then the value would be assumed to be the same as the
\r
391 * description.</li>
\r
393 * @param {Array} htmlList
\r
394 * List of HTML code to output to.
\r
396 radio : function( dialog, elementDefinition, htmlList )
\r
398 if ( arguments.length < 3)
\r
401 initPrivateObject.call( this, elementDefinition );
\r
402 if ( !this._['default'] )
\r
403 this._['default'] = this._.initValue = elementDefinition.items[0][1];
\r
404 if ( elementDefinition.validate )
\r
405 this.validate = elementDefinition.valdiate;
\r
406 var children = [], me = this;
\r
409 var innerHTML = function()
\r
411 var inputHtmlList = [], html = [],
\r
412 commonAttributes = { 'class' : 'cke_dialog_ui_radio_item', 'aria-labelledby' : this._.labelId },
\r
413 commonName = elementDefinition.id ? elementDefinition.id + '_radio' : CKEDITOR.tools.getNextId() + '_radio';
\r
414 for ( var i = 0 ; i < elementDefinition.items.length ; i++ )
\r
416 var item = elementDefinition.items[i],
\r
417 title = item[2] !== undefined ? item[2] : item[0],
\r
418 value = item[1] !== undefined ? item[1] : item[0],
\r
419 inputId = CKEDITOR.tools.getNextId() + '_radio_input',
\r
420 labelId = inputId + '_label',
\r
421 inputDefinition = CKEDITOR.tools.extend( {}, elementDefinition,
\r
427 labelDefinition = CKEDITOR.tools.extend( {}, inputDefinition,
\r
434 'class' : 'cke_dialog_ui_radio_input',
\r
437 'aria-labelledby' : labelId
\r
440 if ( me._['default'] == value )
\r
441 inputAttributes.checked = 'checked';
\r
442 cleanInnerDefinition( inputDefinition );
\r
443 cleanInnerDefinition( labelDefinition );
\r
445 if ( typeof inputDefinition.inputStyle != 'undefined' )
\r
446 inputDefinition.style = inputDefinition.inputStyle;
\r
448 children.push( new CKEDITOR.ui.dialog.uiElement( dialog, inputDefinition, inputHtml, 'input', null, inputAttributes ) );
\r
449 inputHtml.push( ' ' );
\r
450 new CKEDITOR.ui.dialog.uiElement( dialog, labelDefinition, inputHtml, 'label', null, { id : labelId, 'for' : inputAttributes.id },
\r
452 inputHtmlList.push( inputHtml.join( '' ) );
\r
454 new CKEDITOR.ui.dialog.hbox( dialog, children, inputHtmlList, html );
\r
455 return html.join( '' );
\r
458 CKEDITOR.ui.dialog.labeledElement.call( this, dialog, elementDefinition, htmlList, innerHTML );
\r
459 this._.children = children;
\r
463 * A button with a label inside.
\r
466 * @extends CKEDITOR.ui.dialog.uiElement
\r
467 * @param {CKEDITOR.dialog} dialog
\r
468 * Parent dialog object.
\r
469 * @param {CKEDITOR.dialog.definition.uiElement} elementDefinition
\r
470 * The element definition. Accepted fields:
\r
472 * <li><strong>label</strong> (Required) The button label.</li>
\r
473 * <li><strong>disabled</strong> (Optional) Set to true if you want the
\r
474 * button to appear in disabled state.</li>
\r
476 * @param {Array} htmlList
\r
477 * List of HTML code to output to.
\r
479 button : function( dialog, elementDefinition, htmlList )
\r
481 if ( !arguments.length )
\r
484 if ( typeof elementDefinition == 'function' )
\r
485 elementDefinition = elementDefinition( dialog.getParentEditor() );
\r
487 initPrivateObject.call( this, elementDefinition, { disabled : elementDefinition.disabled || false } );
\r
489 // Add OnClick event to this input.
\r
490 CKEDITOR.event.implementOn( this );
\r
494 // Register an event handler for processing button clicks.
\r
495 dialog.on( 'load', function( eventInfo )
\r
497 var element = this.getElement();
\r
501 element.on( 'click', function( evt )
\r
503 me.fire( 'click', { dialog : me.getDialog() } );
\r
504 evt.data.preventDefault();
\r
507 element.on( 'keydown', function( evt )
\r
509 if ( evt.data.getKeystroke() in { 32:1 } )
\r
512 evt.data.preventDefault();
\r
517 element.unselectable();
\r
520 var outerDefinition = CKEDITOR.tools.extend( {}, elementDefinition );
\r
521 delete outerDefinition.style;
\r
523 var labelId = CKEDITOR.tools.getNextId() + '_label';
\r
524 CKEDITOR.ui.dialog.uiElement.call(
\r
532 style : elementDefinition.style,
\r
533 href : 'javascript:void(0)',
\r
534 title : elementDefinition.label,
\r
535 hidefocus : 'true',
\r
536 'class' : elementDefinition['class'],
\r
538 'aria-labelledby' : labelId
\r
540 '<span id="' + labelId + '" class="cke_dialog_ui_button">' +
\r
541 CKEDITOR.tools.htmlEncode( elementDefinition.label ) +
\r
547 * @extends CKEDITOR.ui.dialog.uiElement
\r
550 * @param {CKEDITOR.dialog} dialog
\r
551 * Parent dialog object.
\r
552 * @param {CKEDITOR.dialog.definition.uiElement} elementDefinition
\r
553 * The element definition. Accepted fields:
\r
555 * <li><strong>default</strong> (Required) The default value.</li>
\r
556 * <li><strong>validate</strong> (Optional) The validation function.</li>
\r
557 * <li><strong>items</strong> (Required) An array of options. Each option
\r
558 * is a 1- or 2-item array of format [ 'Description', 'Value' ]. If 'Value'
\r
559 * is missing, then the value would be assumed to be the same as the
\r
560 * description.</li>
\r
561 * <li><strong>multiple</strong> (Optional) Set this to true if you'd like
\r
562 * to have a multiple-choice select box.</li>
\r
563 * <li><strong>size</strong> (Optional) The number of items to display in
\r
564 * the select box.</li>
\r
566 * @param {Array} htmlList
\r
567 * List of HTML code to output to.
\r
569 select : function( dialog, elementDefinition, htmlList )
\r
571 if ( arguments.length < 3 )
\r
574 var _ = initPrivateObject.call( this, elementDefinition );
\r
576 if ( elementDefinition.validate )
\r
577 this.validate = elementDefinition.validate;
\r
579 _.inputId = CKEDITOR.tools.getNextId() + '_select';
\r
581 var innerHTML = function()
\r
583 var myDefinition = CKEDITOR.tools.extend( {}, elementDefinition,
\r
585 id : elementDefinition.id ? elementDefinition.id + '_select' : CKEDITOR.tools.getNextId() + '_select'
\r
589 attributes = { 'id' : _.inputId, 'class' : 'cke_dialog_ui_input_select', 'aria-labelledby' : this._.labelId };
\r
591 // Add multiple and size attributes from element definition.
\r
592 if ( elementDefinition.size != undefined )
\r
593 attributes.size = elementDefinition.size;
\r
594 if ( elementDefinition.multiple != undefined )
\r
595 attributes.multiple = elementDefinition.multiple;
\r
597 cleanInnerDefinition( myDefinition );
\r
598 for ( var i = 0, item ; i < elementDefinition.items.length && ( item = elementDefinition.items[i] ) ; i++ )
\r
600 innerHTML.push( '<option value="',
\r
601 CKEDITOR.tools.htmlEncode( item[1] !== undefined ? item[1] : item[0] ).replace( /"/g, '"' ), '" /> ',
\r
602 CKEDITOR.tools.htmlEncode( item[0] ) );
\r
605 if ( typeof myDefinition.inputStyle != 'undefined' )
\r
606 myDefinition.style = myDefinition.inputStyle;
\r
608 _.select = new CKEDITOR.ui.dialog.uiElement( dialog, myDefinition, html, 'select', null, attributes, innerHTML.join( '' ) );
\r
609 return html.join( '' );
\r
612 CKEDITOR.ui.dialog.labeledElement.call( this, dialog, elementDefinition, htmlList, innerHTML );
\r
616 * A file upload input.
\r
617 * @extends CKEDITOR.ui.dialog.labeledElement
\r
620 * @param {CKEDITOR.dialog} dialog
\r
621 * Parent dialog object.
\r
622 * @param {CKEDITOR.dialog.definition.uiElement} elementDefinition
\r
623 * The element definition. Accepted fields:
\r
625 * <li><strong>validate</strong> (Optional) The validation function.</li>
\r
627 * @param {Array} htmlList
\r
628 * List of HTML code to output to.
\r
630 file : function( dialog, elementDefinition, htmlList )
\r
632 if ( arguments.length < 3 )
\r
635 if ( elementDefinition['default'] === undefined )
\r
636 elementDefinition['default'] = '';
\r
638 var _ = CKEDITOR.tools.extend( initPrivateObject.call( this, elementDefinition ), { definition : elementDefinition, buttons : [] } );
\r
640 if ( elementDefinition.validate )
\r
641 this.validate = elementDefinition.validate;
\r
644 var innerHTML = function()
\r
646 _.frameId = CKEDITOR.tools.getNextId() + '_fileInput';
\r
648 // Support for custom document.domain in IE.
\r
649 var isCustomDomain = CKEDITOR.env.isCustomDomain();
\r
653 ' frameborder="0"' +
\r
654 ' allowtransparency="0"' +
\r
655 ' class="cke_dialog_ui_input_file"' +
\r
656 ' role="presentation"' +
\r
657 ' id="', _.frameId, '"' +
\r
658 ' title="', elementDefinition.label, '"' +
\r
659 ' src="javascript:void(' ];
\r
664 'document.open();' +
\r
665 'document.domain=\'' + document.domain + '\';' +
\r
666 'document.close();' +
\r
675 return html.join( '' );
\r
678 // IE BUG: Parent container does not resize to contain the iframe automatically.
\r
679 dialog.on( 'load', function()
\r
681 var iframe = CKEDITOR.document.getById( _.frameId ),
\r
682 contentDiv = iframe.getParent();
\r
683 contentDiv.addClass( 'cke_dialog_ui_input_file' );
\r
686 CKEDITOR.ui.dialog.labeledElement.call( this, dialog, elementDefinition, htmlList, innerHTML );
\r
690 * A button for submitting the file in a file upload input.
\r
691 * @extends CKEDITOR.ui.dialog.button
\r
694 * @param {CKEDITOR.dialog} dialog
\r
695 * Parent dialog object.
\r
696 * @param {CKEDITOR.dialog.definition.uiElement} elementDefinition
\r
697 * The element definition. Accepted fields:
\r
699 * <li><strong>for</strong> (Required) The file input's page and element Id
\r
700 * to associate to, in a 2-item array format: [ 'page_id', 'element_id' ].
\r
702 * <li><strong>validate</strong> (Optional) The validation function.</li>
\r
704 * @param {Array} htmlList
\r
705 * List of HTML code to output to.
\r
707 fileButton : function( dialog, elementDefinition, htmlList )
\r
709 if ( arguments.length < 3 )
\r
712 var _ = initPrivateObject.call( this, elementDefinition ),
\r
715 if ( elementDefinition.validate )
\r
716 this.validate = elementDefinition.validate;
\r
718 var myDefinition = CKEDITOR.tools.extend( {}, elementDefinition );
\r
719 var onClick = myDefinition.onClick;
\r
720 myDefinition.className = ( myDefinition.className ? myDefinition.className + ' ' : '' ) + 'cke_dialog_ui_button';
\r
721 myDefinition.onClick = function( evt )
\r
723 var target = elementDefinition[ 'for' ]; // [ pageId, elementId ]
\r
724 if ( !onClick || onClick.call( this, evt ) !== false )
\r
726 dialog.getContentElement( target[0], target[1] ).submit();
\r
731 dialog.on( 'load', function()
\r
733 dialog.getContentElement( elementDefinition[ 'for' ][0], elementDefinition[ 'for' ][1] )._.buttons.push( me );
\r
736 CKEDITOR.ui.dialog.button.call( this, dialog, myDefinition, htmlList );
\r
741 var myHtmlRe = /^\s*<[\w:]+\s+([^>]*)?>/,
\r
742 theirHtmlRe = /^(\s*<[\w:]+(?:\s+[^>]*)?)((?:.|\r|\n)+)$/,
\r
743 emptyTagRe = /\/$/;
\r
745 * A dialog element made from raw HTML code.
\r
746 * @extends CKEDITOR.ui.dialog.uiElement
\r
747 * @name CKEDITOR.ui.dialog.html
\r
748 * @param {CKEDITOR.dialog} dialog Parent dialog object.
\r
749 * @param {CKEDITOR.dialog.definition.uiElement} elementDefinition Element definition.
\r
752 * <li><strong>html</strong> (Required) HTML code of this element.</li>
\r
754 * @param {Array} htmlList List of HTML code to be added to the dialog's content area.
\r
758 return function( dialog, elementDefinition, htmlList )
\r
760 if ( arguments.length < 3 )
\r
763 var myHtmlList = [],
\r
765 theirHtml = elementDefinition.html,
\r
766 myMatch, theirMatch;
\r
768 // If the HTML input doesn't contain any tags at the beginning, add a <span> tag around it.
\r
769 if ( theirHtml.charAt( 0 ) != '<' )
\r
770 theirHtml = '<span>' + theirHtml + '</span>';
\r
772 // Look for focus function in definition.
\r
773 var focus = elementDefinition.focus;
\r
776 var oldFocus = this.focus;
\r
777 this.focus = function()
\r
779 oldFocus.call( this );
\r
780 typeof focus == 'function' && focus.call( this );
\r
781 this.fire( 'focus' );
\r
783 if ( elementDefinition.isFocusable )
\r
785 var oldIsFocusable = this.isFocusable;
\r
786 this.isFocusable = oldIsFocusable;
\r
788 this.keyboardFocusable = true;
\r
791 CKEDITOR.ui.dialog.uiElement.call( this, dialog, elementDefinition, myHtmlList, 'span', null, null, '' );
\r
793 // Append the attributes created by the uiElement call to the real HTML.
\r
794 myHtml = myHtmlList.join( '' );
\r
795 myMatch = myHtml.match( myHtmlRe );
\r
796 theirMatch = theirHtml.match( theirHtmlRe ) || [ '', '', '' ];
\r
798 if ( emptyTagRe.test( theirMatch[1] ) )
\r
800 theirMatch[1] = theirMatch[1].slice( 0, -1 );
\r
801 theirMatch[2] = '/' + theirMatch[2];
\r
804 htmlList.push( [ theirMatch[1], ' ', myMatch[1] || '', theirMatch[2] ].join( '' ) );
\r
809 * Form fieldset for grouping dialog UI elements.
\r
811 * @extends CKEDITOR.ui.dialog.uiElement
\r
812 * @param {CKEDITOR.dialog} dialog Parent dialog object.
\r
813 * @param {Array} childObjList
\r
814 * Array of {@link CKEDITOR.ui.dialog.uiElement} objects inside this
\r
816 * @param {Array} childHtmlList
\r
817 * Array of HTML code that correspond to the HTML output of all the
\r
818 * objects in childObjList.
\r
819 * @param {Array} htmlList
\r
820 * Array of HTML code that this element will output to.
\r
821 * @param {CKEDITOR.dialog.definition.uiElement} elementDefinition
\r
822 * The element definition. Accepted fields:
\r
824 * <li><strong>label</strong> (Optional) The legend of the this fieldset.</li>
\r
825 * <li><strong>children</strong> (Required) An array of dialog field definitions which will be grouped inside this fieldset. </li>
\r
828 fieldset : function( dialog, childObjList, childHtmlList, htmlList, elementDefinition )
\r
830 var legendLabel = elementDefinition.label;
\r
832 var innerHTML = function()
\r
835 legendLabel && html.push( '<legend' +
\r
836 ( elementDefinition.labelStyle ? ' style="' + elementDefinition.labelStyle + '"' : '' ) +
\r
837 '>' + legendLabel + '</legend>' );
\r
838 for ( var i = 0; i < childHtmlList.length; i++ )
\r
839 html.push( childHtmlList[ i ] );
\r
840 return html.join( '' );
\r
843 this._ = { children : childObjList };
\r
844 CKEDITOR.ui.dialog.uiElement.call( this, dialog, elementDefinition, htmlList, 'fieldset', null, null, innerHTML );
\r
849 CKEDITOR.ui.dialog.html.prototype = new CKEDITOR.ui.dialog.uiElement;
\r
851 CKEDITOR.ui.dialog.labeledElement.prototype = CKEDITOR.tools.extend( new CKEDITOR.ui.dialog.uiElement,
\r
852 /** @lends CKEDITOR.ui.dialog.labeledElement.prototype */
\r
855 * Sets the label text of the element.
\r
856 * @param {String} label The new label text.
\r
857 * @returns {CKEDITOR.ui.dialog.labeledElement} The current labeled element.
\r
860 setLabel : function( label )
\r
862 var node = CKEDITOR.document.getById( this._.labelId );
\r
863 if ( node.getChildCount() < 1 )
\r
864 ( new CKEDITOR.dom.text( label, CKEDITOR.document ) ).appendTo( node );
\r
866 node.getChild( 0 ).$.nodeValue = label;
\r
871 * Retrieves the current label text of the elment.
\r
872 * @returns {String} The current label text.
\r
875 getLabel : function()
\r
877 var node = CKEDITOR.document.getById( this._.labelId );
\r
878 if ( !node || node.getChildCount() < 1 )
\r
881 return node.getChild( 0 ).getText();
\r
885 * Defines the onChange event for UI element definitions.
\r
890 eventProcessors : commonEventProcessors
\r
893 CKEDITOR.ui.dialog.button.prototype = CKEDITOR.tools.extend( new CKEDITOR.ui.dialog.uiElement,
\r
894 /** @lends CKEDITOR.ui.dialog.button.prototype */
\r
897 * Simulates a click to the button.
\r
899 * @returns {Object} Return value of the 'click' event.
\r
903 if ( !this._.disabled )
\r
904 return this.fire( 'click', { dialog : this._.dialog } );
\r
905 this.getElement().$.blur();
\r
910 * Enables the button.
\r
913 enable : function()
\r
915 this._.disabled = false;
\r
916 var element = this.getElement();
\r
917 element && element.removeClass( 'cke_disabled' );
\r
921 * Disables the button.
\r
924 disable : function()
\r
926 this._.disabled = true;
\r
927 this.getElement().addClass( 'cke_disabled' );
\r
930 isVisible : function()
\r
932 return this.getElement().getFirst().isVisible();
\r
935 isEnabled : function()
\r
937 return !this._.disabled;
\r
941 * Defines the onChange event and onClick for button element definitions.
\r
946 eventProcessors : CKEDITOR.tools.extend( {}, CKEDITOR.ui.dialog.uiElement.prototype.eventProcessors,
\r
949 onClick : function( dialog, func )
\r
951 this.on( 'click', function()
\r
953 // Some browsers (Chrome, IE8, IE7 compat mode) don't move
\r
954 // focus to clicked button. Force this.
\r
955 this.getElement().focus();
\r
956 func.apply( this, arguments );
\r
962 * Handler for the element's access key up event. Simulates a click to
\r
966 accessKeyUp : function()
\r
972 * Handler for the element's access key down event. Simulates a mouse
\r
973 * down to the button.
\r
976 accessKeyDown : function()
\r
981 keyboardFocusable : true
\r
984 CKEDITOR.ui.dialog.textInput.prototype = CKEDITOR.tools.extend( new CKEDITOR.ui.dialog.labeledElement,
\r
985 /** @lends CKEDITOR.ui.dialog.textInput.prototype */
\r
988 * Gets the text input DOM element under this UI object.
\r
990 * @returns {CKEDITOR.dom.element} The DOM element of the text input.
\r
992 getInputElement : function()
\r
994 return CKEDITOR.document.getById( this._.inputId );
\r
998 * Puts focus into the text input.
\r
1001 focus : function()
\r
1003 var me = this.selectParentTab();
\r
1005 // GECKO BUG: setTimeout() is needed to workaround invisible selections.
\r
1006 setTimeout( function()
\r
1008 var element = me.getInputElement();
\r
1009 element && element.$.focus();
\r
1014 * Selects all the text in the text input.
\r
1017 select : function()
\r
1019 var me = this.selectParentTab();
\r
1021 // GECKO BUG: setTimeout() is needed to workaround invisible selections.
\r
1022 setTimeout( function()
\r
1024 var e = me.getInputElement();
\r
1034 * Handler for the text input's access key up event. Makes a select()
\r
1035 * call to the text input.
\r
1038 accessKeyUp : function()
\r
1044 * Sets the value of this text input object.
\r
1045 * @param {Object} value The new value.
\r
1046 * @returns {CKEDITOR.ui.dialog.textInput} The current UI element.
\r
1048 * uiElement.setValue( 'Blamo' );
\r
1050 setValue : function( value )
\r
1052 !value && ( value = '' );
\r
1053 return CKEDITOR.ui.dialog.uiElement.prototype.setValue.apply( this, arguments );
\r
1056 keyboardFocusable : true
\r
1057 }, commonPrototype, true );
\r
1059 CKEDITOR.ui.dialog.textarea.prototype = new CKEDITOR.ui.dialog.textInput();
\r
1061 CKEDITOR.ui.dialog.select.prototype = CKEDITOR.tools.extend( new CKEDITOR.ui.dialog.labeledElement,
\r
1062 /** @lends CKEDITOR.ui.dialog.select.prototype */
\r
1065 * Gets the DOM element of the select box.
\r
1066 * @returns {CKEDITOR.dom.element} The <select> element of this UI
\r
1070 getInputElement : function()
\r
1072 return this._.select.getElement();
\r
1076 * Adds an option to the select box.
\r
1077 * @param {String} label Option label.
\r
1078 * @param {String} value (Optional) Option value, if not defined it'll be
\r
1079 * assumed to be the same as the label.
\r
1080 * @param {Number} index (Optional) Position of the option to be inserted
\r
1081 * to. If not defined the new option will be inserted to the end of list.
\r
1083 * @returns {CKEDITOR.ui.dialog.select} The current select UI element.
\r
1085 add : function( label, value, index )
\r
1087 var option = new CKEDITOR.dom.element( 'option', this.getDialog().getParentEditor().document ),
\r
1088 selectElement = this.getInputElement().$;
\r
1089 option.$.text = label;
\r
1090 option.$.value = ( value === undefined || value === null ) ? label : value;
\r
1091 if ( index === undefined || index === null )
\r
1093 if ( CKEDITOR.env.ie )
\r
1094 selectElement.add( option.$ );
\r
1096 selectElement.add( option.$, null );
\r
1099 selectElement.add( option.$, index );
\r
1104 * Removes an option from the selection list.
\r
1105 * @param {Number} index Index of the option to be removed.
\r
1107 * @returns {CKEDITOR.ui.dialog.select} The current select UI element.
\r
1109 remove : function( index )
\r
1111 var selectElement = this.getInputElement().$;
\r
1112 selectElement.remove( index );
\r
1117 * Clears all options out of the selection list.
\r
1118 * @returns {CKEDITOR.ui.dialog.select} The current select UI element.
\r
1120 clear : function()
\r
1122 var selectElement = this.getInputElement().$;
\r
1123 while ( selectElement.length > 0 )
\r
1124 selectElement.remove( 0 );
\r
1128 keyboardFocusable : true
\r
1129 }, commonPrototype, true );
\r
1131 CKEDITOR.ui.dialog.checkbox.prototype = CKEDITOR.tools.extend( new CKEDITOR.ui.dialog.uiElement,
\r
1132 /** @lends CKEDITOR.ui.dialog.checkbox.prototype */
\r
1135 * Gets the checkbox DOM element.
\r
1137 * @returns {CKEDITOR.dom.element} The DOM element of the checkbox.
\r
1139 getInputElement : function()
\r
1141 return this._.checkbox.getElement();
\r
1145 * Sets the state of the checkbox.
\r
1147 * @param {Boolean} true to tick the checkbox, false to untick it.
\r
1148 * @param {Boolean} noChangeEvent Internal commit, to supress 'change' event on this element.
\r
1150 setValue : function( checked, noChangeEvent )
\r
1152 this.getInputElement().$.checked = checked;
\r
1153 !noChangeEvent && this.fire( 'change', { value : checked } );
\r
1157 * Gets the state of the checkbox.
\r
1159 * @returns {Boolean} true means the checkbox is ticked, false means it's not ticked.
\r
1161 getValue : function()
\r
1163 return this.getInputElement().$.checked;
\r
1167 * Handler for the access key up event. Toggles the checkbox.
\r
1170 accessKeyUp : function()
\r
1172 this.setValue( !this.getValue() );
\r
1176 * Defines the onChange event for UI element definitions.
\r
1183 onChange : function( dialog, func )
\r
1185 if ( !CKEDITOR.env.ie || ( CKEDITOR.env.version > 8 ) )
\r
1186 return commonEventProcessors.onChange.apply( this, arguments );
\r
1189 dialog.on( 'load', function()
\r
1191 var element = this._.checkbox.getElement();
\r
1192 element.on( 'propertychange', function( evt )
\r
1195 if ( evt.propertyName == 'checked' )
\r
1196 this.fire( 'change', { value : element.$.checked } );
\r
1199 this.on( 'change', func );
\r
1205 keyboardFocusable : true
\r
1206 }, commonPrototype, true );
\r
1208 CKEDITOR.ui.dialog.radio.prototype = CKEDITOR.tools.extend( new CKEDITOR.ui.dialog.uiElement,
\r
1209 /** @lends CKEDITOR.ui.dialog.radio.prototype */
\r
1212 * Checks one of the radio buttons in this button group.
\r
1214 * @param {String} value The value of the button to be chcked.
\r
1215 * @param {Boolean} noChangeEvent Internal commit, to supress 'change' event on this element.
\r
1217 setValue : function( value, noChangeEvent )
\r
1219 var children = this._.children,
\r
1221 for ( var i = 0 ; ( i < children.length ) && ( item = children[i] ) ; i++ )
\r
1222 item.getElement().$.checked = ( item.getValue() == value );
\r
1223 !noChangeEvent && this.fire( 'change', { value : value } );
\r
1227 * Gets the value of the currently checked radio button.
\r
1229 * @returns {String} The currently checked button's value.
\r
1231 getValue : function()
\r
1233 var children = this._.children;
\r
1234 for ( var i = 0 ; i < children.length ; i++ )
\r
1236 if ( children[i].getElement().$.checked )
\r
1237 return children[i].getValue();
\r
1243 * Handler for the access key up event. Focuses the currently
\r
1244 * selected radio button, or the first radio button if none is
\r
1248 accessKeyUp : function()
\r
1250 var children = this._.children, i;
\r
1251 for ( i = 0 ; i < children.length ; i++ )
\r
1253 if ( children[i].getElement().$.checked )
\r
1255 children[i].getElement().focus();
\r
1259 children[0].getElement().focus();
\r
1263 * Defines the onChange event for UI element definitions.
\r
1270 onChange : function( dialog, func )
\r
1272 if ( !CKEDITOR.env.ie )
\r
1273 return commonEventProcessors.onChange.apply( this, arguments );
\r
1276 dialog.on( 'load', function()
\r
1278 var children = this._.children, me = this;
\r
1279 for ( var i = 0 ; i < children.length ; i++ )
\r
1281 var element = children[i].getElement();
\r
1282 element.on( 'propertychange', function( evt )
\r
1285 if ( evt.propertyName == 'checked' && this.$.checked )
\r
1286 me.fire( 'change', { value : this.getAttribute( 'value' ) } );
\r
1290 this.on( 'change', func );
\r
1296 keyboardFocusable : true
\r
1297 }, commonPrototype, true );
\r
1299 CKEDITOR.ui.dialog.file.prototype = CKEDITOR.tools.extend( new CKEDITOR.ui.dialog.labeledElement,
\r
1301 /** @lends CKEDITOR.ui.dialog.file.prototype */
\r
1304 * Gets the <input> element of this file input.
\r
1305 * @returns {CKEDITOR.dom.element} The file input element.
\r
1308 getInputElement : function()
\r
1310 var frameDocument = CKEDITOR.document.getById( this._.frameId ).getFrameDocument();
\r
1311 return frameDocument.$.forms.length > 0 ?
\r
1312 new CKEDITOR.dom.element( frameDocument.$.forms[0].elements[0] ) :
\r
1313 this.getElement();
\r
1317 * Uploads the file in the file input.
\r
1318 * @returns {CKEDITOR.ui.dialog.file} This object.
\r
1321 submit : function()
\r
1323 this.getInputElement().getParent().$.submit();
\r
1328 * Get the action assigned to the form.
\r
1329 * @returns {String} The value of the action.
\r
1332 getAction : function()
\r
1334 return this.getInputElement().getParent().$.action;
\r
1338 * The events must be applied on the inner input element, and
\r
1339 * that must be done when the iframe & form has been loaded
\r
1341 registerEvents : function( definition )
\r
1343 var regex = /^on([A-Z]\w+)/,
\r
1346 var registerDomEvent = function( uiElement, dialog, eventName, func )
\r
1348 uiElement.on( 'formLoaded', function()
\r
1350 uiElement.getInputElement().on( eventName, func, uiElement );
\r
1354 for ( var i in definition )
\r
1356 if ( !( match = i.match( regex ) ) )
\r
1359 if ( this.eventProcessors[i] )
\r
1360 this.eventProcessors[i].call( this, this._.dialog, definition[i] );
\r
1362 registerDomEvent( this, this._.dialog, match[1].toLowerCase(), definition[i] );
\r
1369 * Redraws the file input and resets the file path in the file input.
\r
1370 * The redraw logic is necessary because non-IE browsers tend to clear
\r
1371 * the <iframe> containing the file input after closing the dialog.
\r
1374 reset : function()
\r
1377 frameElement = CKEDITOR.document.getById( _.frameId ),
\r
1378 frameDocument = frameElement.getFrameDocument(),
\r
1379 elementDefinition = _.definition,
\r
1380 buttons = _.buttons,
\r
1381 callNumber = this.formLoadedNumber,
\r
1382 unloadNumber = this.formUnloadNumber,
\r
1383 langDir = _.dialog._.editor.lang.dir,
\r
1384 langCode = _.dialog._.editor.langCode;
\r
1386 // The callback function for the iframe, but we must call tools.addFunction only once
\r
1387 // so we store the function number in this.formLoadedNumber
\r
1388 if ( !callNumber )
\r
1390 callNumber = this.formLoadedNumber = CKEDITOR.tools.addFunction(
\r
1393 // Now we can apply the events to the input type=file
\r
1394 this.fire( 'formLoaded' ) ;
\r
1397 // Remove listeners attached to the content of the iframe (the file input)
\r
1398 unloadNumber = this.formUnloadNumber = CKEDITOR.tools.addFunction(
\r
1401 this.getInputElement().clearCustomData();
\r
1404 this.getDialog()._.editor.on( 'destroy', function()
\r
1406 CKEDITOR.tools.removeFunction( callNumber );
\r
1407 CKEDITOR.tools.removeFunction( unloadNumber );
\r
1411 function generateFormField()
\r
1413 frameDocument.$.open();
\r
1415 // Support for custom document.domain in IE.
\r
1416 if ( CKEDITOR.env.isCustomDomain() )
\r
1417 frameDocument.$.domain = document.domain;
\r
1420 if ( elementDefinition.size )
\r
1421 size = elementDefinition.size - ( CKEDITOR.env.ie ? 7 : 0 ); // "Browse" button is bigger in IE.
\r
1423 var inputId = _.frameId + '_input';
\r
1425 frameDocument.$.write( [ '<html dir="' + langDir + '" lang="' + langCode + '"><head><title></title></head><body style="margin: 0; overflow: hidden; background: transparent;">',
\r
1426 '<form enctype="multipart/form-data" method="POST" dir="' + langDir + '" lang="' + langCode + '" action="',
\r
1427 CKEDITOR.tools.htmlEncode( elementDefinition.action ),
\r
1429 // Replicate the field label inside of iframe.
\r
1430 '<label id="', _.labelId, '" for="', inputId, '" style="display:none">',
\r
1431 CKEDITOR.tools.htmlEncode( elementDefinition.label ),
\r
1433 '<input id="', inputId, '" aria-labelledby="', _.labelId,'" type="file" name="',
\r
1434 CKEDITOR.tools.htmlEncode( elementDefinition.id || 'cke_upload' ),
\r
1436 CKEDITOR.tools.htmlEncode( size > 0 ? size : "" ),
\r
1440 '<script>window.parent.CKEDITOR.tools.callFunction(' + callNumber + ');',
\r
1441 'window.onbeforeunload = function() {window.parent.CKEDITOR.tools.callFunction(' + unloadNumber + ')}</script>' ].join( '' ) );
\r
1443 frameDocument.$.close();
\r
1445 for ( var i = 0 ; i < buttons.length ; i++ )
\r
1446 buttons[i].enable();
\r
1449 // #3465: Wait for the browser to finish rendering the dialog first.
\r
1450 if ( CKEDITOR.env.gecko )
\r
1451 setTimeout( generateFormField, 500 );
\r
1453 generateFormField();
\r
1456 getValue : function()
\r
1458 return this.getInputElement().$.value || '';
\r
1462 * The default value of input type="file" is an empty string, but during initialization
\r
1463 * of this UI element, the iframe still isn't ready so it can't be read from that object
\r
1464 * Setting it manually prevents later issues about the current value ("") being different
\r
1465 * of the initial value (undefined as it asked for .value of a div)
\r
1467 setInitValue : function()
\r
1469 this._.initValue = '';
\r
1473 * Defines the onChange event for UI element definitions.
\r
1480 onChange : function( dialog, func )
\r
1482 // If this method is called several times (I'm not sure about how this can happen but the default
\r
1483 // onChange processor includes this protection)
\r
1484 // In order to reapply to the new element, the property is deleted at the beggining of the registerEvents method
\r
1485 if ( !this._.domOnChangeRegistered )
\r
1487 // By listening for the formLoaded event, this handler will get reapplied when a new
\r
1488 // form is created
\r
1489 this.on( 'formLoaded', function()
\r
1491 this.getInputElement().on( 'change', function(){ this.fire( 'change', { value : this.getValue() } ); }, this );
\r
1493 this._.domOnChangeRegistered = true;
\r
1496 this.on( 'change', func );
\r
1500 keyboardFocusable : true
\r
1503 CKEDITOR.ui.dialog.fileButton.prototype = new CKEDITOR.ui.dialog.button;
\r
1505 CKEDITOR.ui.dialog.fieldset.prototype = CKEDITOR.tools.clone( CKEDITOR.ui.dialog.hbox.prototype );
\r
1507 CKEDITOR.dialog.addUIElement( 'text', textBuilder );
\r
1508 CKEDITOR.dialog.addUIElement( 'password', textBuilder );
\r
1509 CKEDITOR.dialog.addUIElement( 'textarea', commonBuilder );
\r
1510 CKEDITOR.dialog.addUIElement( 'checkbox', commonBuilder );
\r
1511 CKEDITOR.dialog.addUIElement( 'radio', commonBuilder );
\r
1512 CKEDITOR.dialog.addUIElement( 'button', commonBuilder );
\r
1513 CKEDITOR.dialog.addUIElement( 'select', commonBuilder );
\r
1514 CKEDITOR.dialog.addUIElement( 'file', commonBuilder );
\r
1515 CKEDITOR.dialog.addUIElement( 'fileButton', commonBuilder );
\r
1516 CKEDITOR.dialog.addUIElement( 'html', commonBuilder );
\r
1517 CKEDITOR.dialog.addUIElement( 'fieldset', containerBuilder );
\r
1521 * Fired when the value of the uiElement is changed
\r
1522 * @name CKEDITOR.ui.dialog.uiElement#change
\r
1527 * Fired when the inner frame created by the element is ready.
\r
1528 * Each time the button is used or the dialog is loaded a new
\r
1529 * form might be created.
\r
1530 * @name CKEDITOR.ui.dialog.fileButton#formLoaded
\r