2 Copyright (c) 2003-2010, 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 var args = [ this._ ];
\r
17 for ( var i = 1 ; i < arguments.length ; i++ )
\r
18 args.push( arguments[i] );
\r
20 CKEDITOR.tools.extend.apply( CKEDITOR.tools, args );
\r
25 build : function( dialog, elementDefinition, output )
\r
27 return new CKEDITOR.ui.dialog.textInput( dialog, elementDefinition, output );
\r
32 build : function( dialog, elementDefinition, output )
\r
34 return new CKEDITOR.ui.dialog[elementDefinition.type]( dialog, elementDefinition, output );
\r
39 isChanged : function()
\r
41 return this.getValue() != this.getInitValue();
\r
46 this.setValue( this.getInitValue() );
\r
49 setInitValue : function()
\r
51 this._.initValue = this.getValue();
\r
54 resetInitValue : function()
\r
56 this._.initValue = this._['default'];
\r
59 getInitValue : function()
\r
61 return this._.initValue;
\r
64 commonEventProcessors = CKEDITOR.tools.extend( {}, CKEDITOR.ui.dialog.uiElement.prototype.eventProcessors,
\r
66 onChange : function( dialog, func )
\r
68 if ( !this._.domOnChangeRegistered )
\r
70 dialog.on( 'load', function()
\r
72 this.getInputElement().on( 'change', function(){ this.fire( 'change', { value : this.getValue() } ); }, this );
\r
74 this._.domOnChangeRegistered = true;
\r
77 this.on( 'change', func );
\r
80 eventRegex = /^on([A-Z]\w+)/,
\r
81 cleanInnerDefinition = function( def )
\r
83 // An inner UI element should not have the parent's type, title or events.
\r
84 for ( var i in def )
\r
86 if ( eventRegex.test( i ) || i == 'title' || i == 'type' )
\r
92 CKEDITOR.tools.extend( CKEDITOR.ui.dialog,
\r
93 /** @lends CKEDITOR.ui.dialog */
\r
96 * Base class for all dialog elements with a textual label on the left.
\r
99 * @extends CKEDITOR.ui.dialog.uiElement
\r
100 * @param {CKEDITOR.dialog} dialog
\r
101 * Parent dialog object.
\r
102 * @param {CKEDITOR.dialog.uiElementDefinition} elementDefinition
\r
103 * The element definition. Accepted fields:
\r
105 * <li><strong>label</strong> (Required) The label string.</li>
\r
106 * <li><strong>labelLayout</strong> (Optional) Put 'horizontal' here if the
\r
107 * label element is to be layed out horizontally. Otherwise a vertical
\r
108 * layout will be used.</li>
\r
109 * <li><strong>widths</strong> (Optional) This applies only for horizontal
\r
110 * layouts - an 2-element array of lengths to specify the widths of the
\r
111 * label and the content element.</li>
\r
113 * @param {Array} htmlList
\r
114 * List of HTML code to output to.
\r
115 * @param {Function} contentHtml
\r
116 * A function returning the HTML code string to be added inside the content
\r
119 labeledElement : function( dialog, elementDefinition, htmlList, contentHtml )
\r
121 if ( arguments.length < 4 )
\r
124 var _ = initPrivateObject.call( this, elementDefinition );
\r
125 _.labelId = CKEDITOR.tools.getNextNumber() + '_label';
\r
126 var children = this._.children = [];
\r
128 var innerHTML = function()
\r
131 if ( elementDefinition.labelLayout != 'horizontal' )
\r
132 html.push( '<div class="cke_dialog_ui_labeled_label" id="',
\r
135 elementDefinition.label,
\r
137 '<div class="cke_dialog_ui_labeled_content">',
\r
138 contentHtml( dialog, elementDefinition ),
\r
142 var hboxDefinition = {
\r
144 widths : elementDefinition.widths,
\r
150 html : '<span class="cke_dialog_ui_labeled_label" ' +
\r
151 'id="' + _.labelId + '">' + CKEDITOR.tools.htmlEncode( elementDefinition.label ) +
\r
156 html : '<span class="cke_dialog_ui_labeled_content">' +
\r
157 contentHtml( dialog, elementDefinition ) +
\r
162 CKEDITOR.dialog._.uiElementBuilders.hbox.build( dialog, hboxDefinition, html );
\r
164 return html.join( '' );
\r
166 CKEDITOR.ui.dialog.uiElement.call( this, dialog, elementDefinition, htmlList, 'div', null, null, innerHTML );
\r
170 * A text input with a label. This UI element class represents both the
\r
171 * single-line text inputs and password inputs in dialog boxes.
\r
174 * @extends CKEDITOR.ui.dialog.labeledElement
\r
175 * @param {CKEDITOR.dialog} dialog
\r
176 * Parent dialog object.
\r
177 * @param {CKEDITOR.dialog.uiElementDefinition} elementDefinition
\r
178 * The element definition. Accepted fields:
\r
180 * <li><strong>default</strong> (Optional) The default value.</li>
\r
181 * <li><strong>validate</strong> (Optional) The validation function. </li>
\r
182 * <li><strong>maxLength</strong> (Optional) The maximum length of text box
\r
184 * <li><strong>size</strong> (Optional) The size of the text box. This is
\r
185 * usually overridden by the size defined by the skin, however.</li>
\r
187 * @param {Array} htmlList
\r
188 * List of HTML code to output to.
\r
190 textInput : function( dialog, elementDefinition, htmlList )
\r
192 if ( arguments.length < 3 )
\r
195 initPrivateObject.call( this, elementDefinition );
\r
196 var domId = this._.inputId = CKEDITOR.tools.getNextNumber() + '_textInput',
\r
197 attributes = { 'class' : 'cke_dialog_ui_input_' + elementDefinition.type, id : domId, type : 'text' },
\r
200 // Set the validator, if any.
\r
201 if ( elementDefinition.validate )
\r
202 this.validate = elementDefinition.validate;
\r
204 // Set the max length and size.
\r
205 if ( elementDefinition.maxLength )
\r
206 attributes.maxlength = elementDefinition.maxLength;
\r
207 if ( elementDefinition.size )
\r
208 attributes.size = elementDefinition.size;
\r
210 // If user presses Enter in a text box, it implies clicking OK for the dialog.
\r
211 var me = this, keyPressedOnMe = false;
\r
212 dialog.on( 'load', function()
\r
214 me.getInputElement().on( 'keydown', function( evt )
\r
216 if ( evt.data.getKeystroke() == 13 )
\r
217 keyPressedOnMe = true;
\r
220 // Lower the priority this 'keyup' since 'ok' will close the dialog.(#3749)
\r
221 me.getInputElement().on( 'keyup', function( evt )
\r
223 if ( evt.data.getKeystroke() == 13 && keyPressedOnMe )
\r
225 dialog.getButton( 'ok' ) && setTimeout( function ()
\r
227 dialog.getButton( 'ok' ).click();
\r
229 keyPressedOnMe = false;
\r
231 }, null, null, 1000 );
\r
235 var innerHTML = function()
\r
237 // IE BUG: Text input fields in IE at 100% would exceed a <td> or inline
\r
238 // container's width, so need to wrap it inside a <div>.
\r
239 var html = [ '<div class="cke_dialog_ui_input_', elementDefinition.type, '"' ];
\r
241 if ( elementDefinition.width )
\r
242 html.push( 'style="width:'+ elementDefinition.width +'" ' );
\r
244 html.push( '><input ' );
\r
245 for ( var i in attributes )
\r
246 html.push( i + '="' + attributes[i] + '" ' );
\r
247 html.push( ' /></div>' );
\r
248 return html.join( '' );
\r
250 CKEDITOR.ui.dialog.labeledElement.call( this, dialog, elementDefinition, htmlList, innerHTML );
\r
254 * A text area with a label on the top or left.
\r
256 * @extends CKEDITOR.ui.dialog.labeledElement
\r
258 * @param {CKEDITOR.dialog} dialog
\r
259 * Parent dialog object.
\r
260 * @param {CKEDITOR.dialog.uiElementDefinition} elementDefinition
\r
261 * The element definition. Accepted fields:
\r
263 * <li><strong>rows</strong> (Optional) The number of rows displayed.
\r
264 * Defaults to 5 if not defined.</li>
\r
265 * <li><strong>cols</strong> (Optional) The number of cols displayed.
\r
266 * Defaults to 20 if not defined. Usually overridden by skins.</li>
\r
267 * <li><strong>default</strong> (Optional) The default value.</li>
\r
268 * <li><strong>validate</strong> (Optional) The validation function. </li>
\r
270 * @param {Array} htmlList
\r
271 * List of HTML code to output to.
\r
273 textarea : function( dialog, elementDefinition, htmlList )
\r
275 if ( arguments.length < 3 )
\r
278 initPrivateObject.call( this, elementDefinition );
\r
280 domId = this._.inputId = CKEDITOR.tools.getNextNumber() + '_textarea',
\r
283 if ( elementDefinition.validate )
\r
284 this.validate = elementDefinition.validate;
\r
286 // Generates the essential attributes for the textarea tag.
\r
287 attributes.rows = elementDefinition.rows || 5;
\r
288 attributes.cols = elementDefinition.cols || 20;
\r
291 var innerHTML = function()
\r
293 var html = [ '<div class="cke_dialog_ui_input_textarea"><textarea class="cke_dialog_ui_input_textarea" id="', domId, '" ' ];
\r
294 for ( var i in attributes )
\r
295 html.push( i + '="' + CKEDITOR.tools.htmlEncode( attributes[i] ) + '" ' );
\r
296 html.push( '>', CKEDITOR.tools.htmlEncode( me._['default'] ), '</textarea></div>' );
\r
297 return html.join( '' );
\r
299 CKEDITOR.ui.dialog.labeledElement.call( this, dialog, elementDefinition, htmlList, innerHTML );
\r
303 * A single checkbox with a label on the right.
\r
305 * @extends CKEDITOR.ui.dialog.uiElement
\r
307 * @param {CKEDITOR.dialog} dialog
\r
308 * Parent dialog object.
\r
309 * @param {CKEDITOR.dialog.uiElementDefinition} elementDefinition
\r
310 * The element definition. Accepted fields:
\r
312 * <li><strong>checked</strong> (Optional) Whether the checkbox is checked
\r
313 * on instantiation. Defaults to false.</li>
\r
314 * <li><strong>validate</strong> (Optional) The validation function.</li>
\r
315 * <li><strong>label</strong> (Optional) The checkbox label.</li>
\r
317 * @param {Array} htmlList
\r
318 * List of HTML code to output to.
\r
320 checkbox : function( dialog, elementDefinition, htmlList )
\r
322 if ( arguments.length < 3 )
\r
325 var _ = initPrivateObject.call( this, elementDefinition, { 'default' : !!elementDefinition[ 'default' ] } );
\r
327 if ( elementDefinition.validate )
\r
328 this.validate = elementDefinition.validate;
\r
331 var innerHTML = function()
\r
333 var myDefinition = CKEDITOR.tools.extend( {}, elementDefinition,
\r
335 id : elementDefinition.id ? elementDefinition.id + '_checkbox' : CKEDITOR.tools.getNextNumber() + '_checkbox'
\r
338 attributes = { 'class' : 'cke_dialog_ui_checkbox_input', type : 'checkbox' };
\r
339 cleanInnerDefinition( myDefinition );
\r
340 if ( elementDefinition[ 'default' ] )
\r
341 attributes.checked = 'checked';
\r
342 _.checkbox = new CKEDITOR.ui.dialog.uiElement( dialog, myDefinition, html, 'input', null, attributes );
\r
343 html.push( ' <label for="', attributes.id, '">',
\r
344 CKEDITOR.tools.htmlEncode( elementDefinition.label ),
\r
346 return html.join( '' );
\r
349 CKEDITOR.ui.dialog.uiElement.call( this, dialog, elementDefinition, htmlList, 'span', null, null, innerHTML );
\r
353 * A group of radio buttons.
\r
356 * @extends CKEDITOR.ui.dialog.labeledElement
\r
357 * @param {CKEDITOR.dialog} dialog
\r
358 * Parent dialog object.
\r
359 * @param {CKEDITOR.dialog.uiElementDefinition} elementDefinition
\r
360 * The element definition. Accepted fields:
\r
362 * <li><strong>default</strong> (Required) The default value.</li>
\r
363 * <li><strong>validate</strong> (Optional) The validation function.</li>
\r
364 * <li><strong>items</strong> (Required) An array of options. Each option
\r
365 * is a 1- or 2-item array of format [ 'Description', 'Value' ]. If 'Value'
\r
366 * is missing, then the value would be assumed to be the same as the
\r
367 * description.</li>
\r
369 * @param {Array} htmlList
\r
370 * List of HTML code to output to.
\r
372 radio : function( dialog, elementDefinition, htmlList )
\r
374 if ( arguments.length < 3)
\r
377 initPrivateObject.call( this, elementDefinition );
\r
378 if ( !this._['default'] )
\r
379 this._['default'] = this._.initValue = elementDefinition.items[0][1];
\r
380 if ( elementDefinition.validate )
\r
381 this.validate = elementDefinition.valdiate;
\r
382 var children = [], me = this;
\r
385 var innerHTML = function()
\r
387 var inputHtmlList = [], html = [],
\r
388 commonAttributes = { 'class' : 'cke_dialog_ui_radio_item' },
\r
389 commonName = elementDefinition.id ? elementDefinition.id + '_radio' : CKEDITOR.tools.getNextNumber() + '_radio';
\r
390 for ( var i = 0 ; i < elementDefinition.items.length ; i++ )
\r
392 var item = elementDefinition.items[i],
\r
393 title = item[2] !== undefined ? item[2] : item[0],
\r
394 value = item[1] !== undefined ? item[1] : item[0],
\r
395 inputDefinition = CKEDITOR.tools.extend( {}, elementDefinition,
\r
397 id : CKEDITOR.tools.getNextNumber() + '_radio_input',
\r
401 labelDefinition = CKEDITOR.tools.extend( {}, inputDefinition,
\r
409 'class' : 'cke_dialog_ui_radio_input',
\r
414 if ( me._['default'] == value )
\r
415 inputAttributes.checked = 'checked';
\r
416 cleanInnerDefinition( inputDefinition );
\r
417 cleanInnerDefinition( labelDefinition );
\r
418 children.push( new CKEDITOR.ui.dialog.uiElement( dialog, inputDefinition, inputHtml, 'input', null, inputAttributes ) );
\r
419 inputHtml.push( ' ' );
\r
420 new CKEDITOR.ui.dialog.uiElement( dialog, labelDefinition, inputHtml, 'label', null, { 'for' : inputAttributes.id },
\r
422 inputHtmlList.push( inputHtml.join( '' ) );
\r
424 new CKEDITOR.ui.dialog.hbox( dialog, [], inputHtmlList, html );
\r
425 return html.join( '' );
\r
428 CKEDITOR.ui.dialog.labeledElement.call( this, dialog, elementDefinition, htmlList, innerHTML );
\r
429 this._.children = children;
\r
433 * A button with a label inside.
\r
436 * @extends CKEDITOR.ui.dialog.uiElement
\r
437 * @param {CKEDITOR.dialog} dialog
\r
438 * Parent dialog object.
\r
439 * @param {CKEDITOR.dialog.uiElementDefinition} elementDefinition
\r
440 * The element definition. Accepted fields:
\r
442 * <li><strong>label</strong> (Required) The button label.</li>
\r
443 * <li><strong>disabled</strong> (Optional) Set to true if you want the
\r
444 * button to appear in disabled state.</li>
\r
446 * @param {Array} htmlList
\r
447 * List of HTML code to output to.
\r
449 button : function( dialog, elementDefinition, htmlList )
\r
451 if ( !arguments.length )
\r
454 if ( typeof elementDefinition == 'function' )
\r
455 elementDefinition = elementDefinition( dialog.getParentEditor() );
\r
457 initPrivateObject.call( this, elementDefinition, { disabled : elementDefinition.disabled || false } );
\r
459 // Add OnClick event to this input.
\r
460 CKEDITOR.event.implementOn( this );
\r
464 // Register an event handler for processing button clicks.
\r
465 dialog.on( 'load', function( eventInfo )
\r
467 var element = this.getElement();
\r
471 element.on( 'click', function( evt )
\r
473 me.fire( 'click', { dialog : me.getDialog() } );
\r
474 evt.data.preventDefault();
\r
478 element.unselectable();
\r
481 var outerDefinition = CKEDITOR.tools.extend( {}, elementDefinition );
\r
482 delete outerDefinition.style;
\r
484 CKEDITOR.ui.dialog.uiElement.call(
\r
492 style : elementDefinition.style,
\r
493 href : 'javascript:void(0)',
\r
494 title : elementDefinition.label,
\r
495 hidefocus : 'true',
\r
496 'class' : elementDefinition['class']
\r
498 '<span class="cke_dialog_ui_button">' +
\r
499 CKEDITOR.tools.htmlEncode( elementDefinition.label ) +
\r
505 * @extends CKEDITOR.ui.dialog.uiElement
\r
508 * @param {CKEDITOR.dialog} dialog
\r
509 * Parent dialog object.
\r
510 * @param {CKEDITOR.dialog.uiElementDefinition} elementDefinition
\r
511 * The element definition. Accepted fields:
\r
513 * <li><strong>default</strong> (Required) The default value.</li>
\r
514 * <li><strong>validate</strong> (Optional) The validation function.</li>
\r
515 * <li><strong>items</strong> (Required) An array of options. Each option
\r
516 * is a 1- or 2-item array of format [ 'Description', 'Value' ]. If 'Value'
\r
517 * is missing, then the value would be assumed to be the same as the
\r
518 * description.</li>
\r
519 * <li><strong>multiple</strong> (Optional) Set this to true if you'd like
\r
520 * to have a multiple-choice select box.</li>
\r
521 * <li><strong>size</strong> (Optional) The number of items to display in
\r
522 * the select box.</li>
\r
524 * @param {Array} htmlList
\r
525 * List of HTML code to output to.
\r
527 select : function( dialog, elementDefinition, htmlList )
\r
529 if ( arguments.length < 3 )
\r
532 var _ = initPrivateObject.call( this, elementDefinition );
\r
534 if ( elementDefinition.validate )
\r
535 this.validate = elementDefinition.validate;
\r
538 var innerHTML = function()
\r
540 var myDefinition = CKEDITOR.tools.extend( {}, elementDefinition,
\r
542 id : elementDefinition.id ? elementDefinition.id + '_select' : CKEDITOR.tools.getNextNumber() + '_select'
\r
546 attributes = { 'class' : 'cke_dialog_ui_input_select' };
\r
548 // Add multiple and size attributes from element definition.
\r
549 if ( elementDefinition.size != undefined )
\r
550 attributes.size = elementDefinition.size;
\r
551 if ( elementDefinition.multiple != undefined )
\r
552 attributes.multiple = elementDefinition.multiple;
\r
554 cleanInnerDefinition( myDefinition );
\r
555 for ( var i = 0, item ; i < elementDefinition.items.length && ( item = elementDefinition.items[i] ) ; i++ )
\r
557 innerHTML.push( '<option value="',
\r
558 CKEDITOR.tools.htmlEncode( item[1] !== undefined ? item[1] : item[0] ), '" /> ',
\r
559 CKEDITOR.tools.htmlEncode( item[0] ) );
\r
562 _.select = new CKEDITOR.ui.dialog.uiElement( dialog, myDefinition, html, 'select', null, attributes, innerHTML.join( '' ) );
\r
563 return html.join( '' );
\r
566 CKEDITOR.ui.dialog.labeledElement.call( this, dialog, elementDefinition, htmlList, innerHTML );
\r
570 * A file upload input.
\r
571 * @extends CKEDITOR.ui.dialog.labeledElement
\r
574 * @param {CKEDITOR.dialog} dialog
\r
575 * Parent dialog object.
\r
576 * @param {CKEDITOR.dialog.uiElementDefinition} elementDefinition
\r
577 * The element definition. Accepted fields:
\r
579 * <li><strong>validate</strong> (Optional) The validation function.</li>
\r
581 * @param {Array} htmlList
\r
582 * List of HTML code to output to.
\r
584 file : function( dialog, elementDefinition, htmlList )
\r
586 if ( arguments.length < 3 )
\r
589 if ( elementDefinition['default'] === undefined )
\r
590 elementDefinition['default'] = '';
\r
592 var _ = CKEDITOR.tools.extend( initPrivateObject.call( this, elementDefinition ), { definition : elementDefinition, buttons : [] } );
\r
594 if ( elementDefinition.validate )
\r
595 this.validate = elementDefinition.validate;
\r
598 var innerHTML = function()
\r
600 _.frameId = CKEDITOR.tools.getNextNumber() + '_fileInput';
\r
602 // Support for custom document.domain in IE.
\r
603 var isCustomDomain = CKEDITOR.env.isCustomDomain();
\r
607 ' frameborder="0"' +
\r
608 ' allowtransparency="0"' +
\r
609 ' class="cke_dialog_ui_input_file"' +
\r
610 ' id="', _.frameId, '"' +
\r
611 ' title="', elementDefinition.label, '"' +
\r
612 ' src="javascript:void(' ];
\r
617 'document.open();' +
\r
618 'document.domain=\'' + document.domain + '\';' +
\r
619 'document.close();' +
\r
628 return html.join( '' );
\r
631 // IE BUG: Parent container does not resize to contain the iframe automatically.
\r
632 dialog.on( 'load', function()
\r
634 var iframe = CKEDITOR.document.getById( _.frameId ),
\r
635 contentDiv = iframe.getParent();
\r
636 contentDiv.addClass( 'cke_dialog_ui_input_file' );
\r
639 CKEDITOR.ui.dialog.labeledElement.call( this, dialog, elementDefinition, htmlList, innerHTML );
\r
643 * A button for submitting the file in a file upload input.
\r
644 * @extends CKEDITOR.ui.dialog.button
\r
647 * @param {CKEDITOR.dialog} dialog
\r
648 * Parent dialog object.
\r
649 * @param {CKEDITOR.dialog.uiElementDefinition} elementDefinition
\r
650 * The element definition. Accepted fields:
\r
652 * <li><strong>for</strong> (Required) The file input's page and element Id
\r
653 * to associate to, in a 2-item array format: [ 'page_id', 'element_id' ].
\r
655 * <li><strong>validate</strong> (Optional) The validation function.</li>
\r
657 * @param {Array} htmlList
\r
658 * List of HTML code to output to.
\r
660 fileButton : function( dialog, elementDefinition, htmlList )
\r
662 if ( arguments.length < 3 )
\r
665 var _ = initPrivateObject.call( this, elementDefinition ),
\r
668 if ( elementDefinition.validate )
\r
669 this.validate = elementDefinition.validate;
\r
671 var myDefinition = CKEDITOR.tools.extend( {}, elementDefinition );
\r
672 var onClick = myDefinition.onClick;
\r
673 myDefinition.className = ( myDefinition.className ? myDefinition.className + ' ' : '' ) + 'cke_dialog_ui_button';
\r
674 myDefinition.onClick = function( evt )
\r
676 var target = elementDefinition[ 'for' ]; // [ pageId, elementId ]
\r
677 if ( !onClick || onClick.call( this, evt ) !== false )
\r
679 dialog.getContentElement( target[0], target[1] ).submit();
\r
684 dialog.on( 'load', function()
\r
686 dialog.getContentElement( elementDefinition[ 'for' ][0], elementDefinition[ 'for' ][1] )._.buttons.push( me );
\r
689 CKEDITOR.ui.dialog.button.call( this, dialog, myDefinition, htmlList );
\r
694 var myHtmlRe = /^\s*<[\w:]+\s+([^>]*)?>/,
\r
695 theirHtmlRe = /^(\s*<[\w:]+(?:\s+[^>]*)?)((?:.|\r|\n)+)$/,
\r
696 emptyTagRe = /\/$/;
\r
698 * A dialog element made from raw HTML code.
\r
699 * @extends CKEDITOR.ui.dialog.uiElement
\r
700 * @name CKEDITOR.ui.dialog.html
\r
701 * @param {CKEDITOR.dialog} dialog Parent dialog object.
\r
702 * @param {CKEDITOR.dialog.uiElementDefinition} elementDefinition Element definition.
\r
705 * <li><strong>html</strong> (Required) HTML code of this element.</li>
\r
707 * @param {Array} htmlList List of HTML code to be added to the dialog's content area.
\r
711 return function( dialog, elementDefinition, htmlList )
\r
713 if ( arguments.length < 3 )
\r
716 var myHtmlList = [],
\r
718 theirHtml = elementDefinition.html,
\r
719 myMatch, theirMatch;
\r
721 // If the HTML input doesn't contain any tags at the beginning, add a <span> tag around it.
\r
722 if ( theirHtml.charAt( 0 ) != '<' )
\r
723 theirHtml = '<span>' + theirHtml + '</span>';
\r
725 // Look for focus function in definition.
\r
726 if ( elementDefinition.focus )
\r
728 var oldFocus = this.focus;
\r
729 this.focus = function()
\r
731 oldFocus.call( this );
\r
732 elementDefinition.focus.call( this );
\r
733 this.fire( 'focus' );
\r
735 if ( elementDefinition.isFocusable )
\r
737 var oldIsFocusable = this.isFocusable;
\r
738 this.isFocusable = oldIsFocusable;
\r
740 this.keyboardFocusable = true;
\r
743 CKEDITOR.ui.dialog.uiElement.call( this, dialog, elementDefinition, myHtmlList, 'span', null, null, '' );
\r
745 // Append the attributes created by the uiElement call to the real HTML.
\r
746 myHtml = myHtmlList.join( '' );
\r
747 myMatch = myHtml.match( myHtmlRe );
\r
748 theirMatch = theirHtml.match( theirHtmlRe ) || [ '', '', '' ];
\r
750 if ( emptyTagRe.test( theirMatch[1] ) )
\r
752 theirMatch[1] = theirMatch[1].slice( 0, -1 );
\r
753 theirMatch[2] = '/' + theirMatch[2];
\r
756 htmlList.push( [ theirMatch[1], ' ', myMatch[1] || '', theirMatch[2] ].join( '' ) );
\r
761 CKEDITOR.ui.dialog.html.prototype = new CKEDITOR.ui.dialog.uiElement;
\r
763 CKEDITOR.ui.dialog.labeledElement.prototype = CKEDITOR.tools.extend( new CKEDITOR.ui.dialog.uiElement,
\r
764 /** @lends CKEDITOR.ui.dialog.labeledElement.prototype */
\r
767 * Sets the label text of the element.
\r
768 * @param {String} label The new label text.
\r
769 * @returns {CKEDITOR.ui.dialog.labeledElement} The current labeled element.
\r
772 setLabel : function( label )
\r
774 var node = CKEDITOR.document.getById( this._.labelId );
\r
775 if ( node.getChildCount() < 1 )
\r
776 ( new CKEDITOR.dom.text( label, CKEDITOR.document ) ).appendTo( node );
\r
778 node.getChild( 0 ).$.nodeValue = label;
\r
783 * Retrieves the current label text of the elment.
\r
784 * @returns {String} The current label text.
\r
787 getLabel : function()
\r
789 var node = CKEDITOR.document.getById( this._.labelId );
\r
790 if ( !node || node.getChildCount() < 1 )
\r
793 return node.getChild( 0 ).getText();
\r
797 * Defines the onChange event for UI element definitions.
\r
802 eventProcessors : commonEventProcessors
\r
805 CKEDITOR.ui.dialog.button.prototype = CKEDITOR.tools.extend( new CKEDITOR.ui.dialog.uiElement,
\r
806 /** @lends CKEDITOR.ui.dialog.button.prototype */
\r
809 * Simulates a click to the button.
\r
811 * @returns {Object} Return value of the 'click' event.
\r
815 if ( !this._.disabled )
\r
816 return this.fire( 'click', { dialog : this._.dialog } );
\r
817 this.getElement().$.blur();
\r
822 * Enables the button.
\r
825 enable : function()
\r
827 this._.disabled = false;
\r
828 var element = this.getElement();
\r
829 element && element.removeClass( 'disabled' );
\r
833 * Disables the button.
\r
836 disable : function()
\r
838 this._.disabled = true;
\r
839 this.getElement().addClass( 'disabled' );
\r
842 isVisible : function()
\r
844 return this.getElement().getFirst().isVisible();
\r
847 isEnabled : function()
\r
849 return !this._.disabled;
\r
853 * Defines the onChange event and onClick for button element definitions.
\r
858 eventProcessors : CKEDITOR.tools.extend( {}, CKEDITOR.ui.dialog.uiElement.prototype.eventProcessors,
\r
861 onClick : function( dialog, func )
\r
863 this.on( 'click', func );
\r
868 * Handler for the element's access key up event. Simulates a click to
\r
872 accessKeyUp : function()
\r
878 * Handler for the element's access key down event. Simulates a mouse
\r
879 * down to the button.
\r
882 accessKeyDown : function()
\r
887 keyboardFocusable : true
\r
890 CKEDITOR.ui.dialog.textInput.prototype = CKEDITOR.tools.extend( new CKEDITOR.ui.dialog.labeledElement,
\r
891 /** @lends CKEDITOR.ui.dialog.textInput.prototype */
\r
894 * Gets the text input DOM element under this UI object.
\r
896 * @returns {CKEDITOR.dom.element} The DOM element of the text input.
\r
898 getInputElement : function()
\r
900 return CKEDITOR.document.getById( this._.inputId );
\r
904 * Puts focus into the text input.
\r
909 var me = this.selectParentTab();
\r
911 // GECKO BUG: setTimeout() is needed to workaround invisible selections.
\r
912 setTimeout( function()
\r
914 var element = me.getInputElement();
\r
915 element && element.$.focus();
\r
920 * Selects all the text in the text input.
\r
923 select : function()
\r
925 var me = this.selectParentTab();
\r
927 // GECKO BUG: setTimeout() is needed to workaround invisible selections.
\r
928 setTimeout( function()
\r
930 var e = me.getInputElement();
\r
940 * Handler for the text input's access key up event. Makes a select()
\r
941 * call to the text input.
\r
944 accessKeyUp : function()
\r
950 * Sets the value of this text input object.
\r
951 * @param {Object} value The new value.
\r
952 * @returns {CKEDITOR.ui.dialog.textInput} The current UI element.
\r
954 * uiElement.setValue( 'Blamo' );
\r
956 setValue : function( value )
\r
958 value = value || '';
\r
959 return CKEDITOR.ui.dialog.uiElement.prototype.setValue.call( this, value );
\r
962 keyboardFocusable : true
\r
963 }, commonPrototype, true );
\r
965 CKEDITOR.ui.dialog.textarea.prototype = new CKEDITOR.ui.dialog.textInput();
\r
967 CKEDITOR.ui.dialog.select.prototype = CKEDITOR.tools.extend( new CKEDITOR.ui.dialog.labeledElement,
\r
968 /** @lends CKEDITOR.ui.dialog.select.prototype */
\r
971 * Gets the DOM element of the select box.
\r
972 * @returns {CKEDITOR.dom.element} The <select> element of this UI
\r
976 getInputElement : function()
\r
978 return this._.select.getElement();
\r
982 * Adds an option to the select box.
\r
983 * @param {String} label Option label.
\r
984 * @param {String} value (Optional) Option value, if not defined it'll be
\r
985 * assumed to be the same as the label.
\r
986 * @param {Number} index (Optional) Position of the option to be inserted
\r
987 * to. If not defined the new option will be inserted to the end of list.
\r
989 * @returns {CKEDITOR.ui.dialog.select} The current select UI element.
\r
991 add : function( label, value, index )
\r
993 var option = new CKEDITOR.dom.element( 'option', this.getDialog().getParentEditor().document ),
\r
994 selectElement = this.getInputElement().$;
\r
995 option.$.text = label;
\r
996 option.$.value = ( value === undefined || value === null ) ? label : value;
\r
997 if ( index === undefined || index === null )
\r
999 if ( CKEDITOR.env.ie )
\r
1000 selectElement.add( option.$ );
\r
1002 selectElement.add( option.$, null );
\r
1005 selectElement.add( option.$, index );
\r
1010 * Removes an option from the selection list.
\r
1011 * @param {Number} index Index of the option to be removed.
\r
1013 * @returns {CKEDITOR.ui.dialog.select} The current select UI element.
\r
1015 remove : function( index )
\r
1017 var selectElement = this.getInputElement().$;
\r
1018 selectElement.remove( index );
\r
1023 * Clears all options out of the selection list.
\r
1024 * @returns {CKEDITOR.ui.dialog.select} The current select UI element.
\r
1026 clear : function()
\r
1028 var selectElement = this.getInputElement().$;
\r
1029 while ( selectElement.length > 0 )
\r
1030 selectElement.remove( 0 );
\r
1034 keyboardFocusable : true
\r
1035 }, commonPrototype, true );
\r
1037 CKEDITOR.ui.dialog.checkbox.prototype = CKEDITOR.tools.extend( new CKEDITOR.ui.dialog.uiElement,
\r
1038 /** @lends CKEDITOR.ui.dialog.checkbox.prototype */
\r
1041 * Gets the checkbox DOM element.
\r
1043 * @returns {CKEDITOR.dom.element} The DOM element of the checkbox.
\r
1045 getInputElement : function()
\r
1047 return this._.checkbox.getElement();
\r
1051 * Sets the state of the checkbox.
\r
1053 * @param {Boolean} true to tick the checkbox, false to untick it.
\r
1055 setValue : function( checked )
\r
1057 this.getInputElement().$.checked = checked;
\r
1058 this.fire( 'change', { value : checked } );
\r
1062 * Gets the state of the checkbox.
\r
1064 * @returns {Boolean} true means the checkbox is ticked, false means it's not ticked.
\r
1066 getValue : function()
\r
1068 return this.getInputElement().$.checked;
\r
1072 * Handler for the access key up event. Toggles the checkbox.
\r
1075 accessKeyUp : function()
\r
1077 this.setValue( !this.getValue() );
\r
1081 * Defines the onChange event for UI element definitions.
\r
1088 onChange : function( dialog, func )
\r
1090 if ( !CKEDITOR.env.ie )
\r
1091 return commonEventProcessors.onChange.apply( this, arguments );
\r
1094 dialog.on( 'load', function()
\r
1096 var element = this._.checkbox.getElement();
\r
1097 element.on( 'propertychange', function( evt )
\r
1100 if ( evt.propertyName == 'checked' )
\r
1101 this.fire( 'change', { value : element.$.checked } );
\r
1104 this.on( 'change', func );
\r
1110 keyboardFocusable : true
\r
1111 }, commonPrototype, true );
\r
1113 CKEDITOR.ui.dialog.radio.prototype = CKEDITOR.tools.extend( new CKEDITOR.ui.dialog.uiElement,
\r
1114 /** @lends CKEDITOR.ui.dialog.radio.prototype */
\r
1117 * Checks one of the radio buttons in this button group.
\r
1119 * @param {String} value The value of the button to be chcked.
\r
1121 setValue : function( value )
\r
1123 var children = this._.children,
\r
1125 for ( var i = 0 ; ( i < children.length ) && ( item = children[i] ) ; i++ )
\r
1126 item.getElement().$.checked = ( item.getValue() == value );
\r
1127 this.fire( 'change', { value : value } );
\r
1131 * Gets the value of the currently checked radio button.
\r
1133 * @returns {String} The currently checked button's value.
\r
1135 getValue : function()
\r
1137 var children = this._.children;
\r
1138 for ( var i = 0 ; i < children.length ; i++ )
\r
1140 if ( children[i].getElement().$.checked )
\r
1141 return children[i].getValue();
\r
1147 * Handler for the access key up event. Focuses the currently
\r
1148 * selected radio button, or the first radio button if none is
\r
1152 accessKeyUp : function()
\r
1154 var children = this._.children, i;
\r
1155 for ( i = 0 ; i < children.length ; i++ )
\r
1157 if ( children[i].getElement().$.checked )
\r
1159 children[i].getElement().focus();
\r
1163 children[0].getElement().focus();
\r
1167 * Defines the onChange event for UI element definitions.
\r
1174 onChange : function( dialog, func )
\r
1176 if ( !CKEDITOR.env.ie )
\r
1177 return commonEventProcessors.onChange.apply( this, arguments );
\r
1180 dialog.on( 'load', function()
\r
1182 var children = this._.children, me = this;
\r
1183 for ( var i = 0 ; i < children.length ; i++ )
\r
1185 var element = children[i].getElement();
\r
1186 element.on( 'propertychange', function( evt )
\r
1189 if ( evt.propertyName == 'checked' && this.$.checked )
\r
1190 me.fire( 'change', { value : this.getAttribute( 'value' ) } );
\r
1194 this.on( 'change', func );
\r
1200 keyboardFocusable : true
\r
1201 }, commonPrototype, true );
\r
1203 CKEDITOR.ui.dialog.file.prototype = CKEDITOR.tools.extend( new CKEDITOR.ui.dialog.labeledElement,
\r
1205 /** @lends CKEDITOR.ui.dialog.file.prototype */
\r
1208 * Gets the <input> element of this file input.
\r
1209 * @returns {CKEDITOR.dom.element} The file input element.
\r
1212 getInputElement : function()
\r
1214 var frameDocument = CKEDITOR.document.getById( this._.frameId ).getFrameDocument();
\r
1215 return frameDocument.$.forms.length > 0 ?
\r
1216 new CKEDITOR.dom.element( frameDocument.$.forms[0].elements[0] ) :
\r
1217 this.getElement();
\r
1221 * Uploads the file in the file input.
\r
1222 * @returns {CKEDITOR.ui.dialog.file} This object.
\r
1225 submit : function()
\r
1227 this.getInputElement().getParent().$.submit();
\r
1232 * Get the action assigned to the form.
\r
1233 * @returns {String} The value of the action.
\r
1236 getAction : function( action )
\r
1238 return this.getInputElement().getParent().$.action;
\r
1242 * Redraws the file input and resets the file path in the file input.
\r
1243 * The redraw logic is necessary because non-IE browsers tend to clear
\r
1244 * the <iframe> containing the file input after closing the dialog.
\r
1247 reset : function()
\r
1249 var frameElement = CKEDITOR.document.getById( this._.frameId ),
\r
1250 frameDocument = frameElement.getFrameDocument(),
\r
1251 elementDefinition = this._.definition,
\r
1252 buttons = this._.buttons;
\r
1254 function generateFormField()
\r
1256 frameDocument.$.open();
\r
1258 // Support for custom document.domain in IE.
\r
1259 if ( CKEDITOR.env.isCustomDomain() )
\r
1260 frameDocument.$.domain = document.domain;
\r
1263 if ( elementDefinition.size )
\r
1264 size = elementDefinition.size - ( CKEDITOR.env.ie ? 7 : 0 ); // "Browse" button is bigger in IE.
\r
1266 frameDocument.$.write( [ '<html><head><title></title></head><body style="margin: 0; overflow: hidden; background: transparent;">',
\r
1267 '<form enctype="multipart/form-data" method="POST" action="',
\r
1268 CKEDITOR.tools.htmlEncode( elementDefinition.action ),
\r
1270 '<input type="file" name="',
\r
1271 CKEDITOR.tools.htmlEncode( elementDefinition.id || 'cke_upload' ),
\r
1273 CKEDITOR.tools.htmlEncode( size > 0 ? size : "" ),
\r
1276 '</body></html>' ].join( '' ) );
\r
1278 frameDocument.$.close();
\r
1280 for ( var i = 0 ; i < buttons.length ; i++ )
\r
1281 buttons[i].enable();
\r
1284 // #3465: Wait for the browser to finish rendering the dialog first.
\r
1285 if ( CKEDITOR.env.gecko )
\r
1286 setTimeout( generateFormField, 500 );
\r
1288 generateFormField();
\r
1291 getValue : function()
\r
1293 // The file path returned from the input tag is incomplete anyway, so it's
\r
1294 // safe to ignore it and prevent the confirmation dialog from appearing.
\r
1295 // (Part of #3465)
\r
1300 * Defines the onChange event for UI element definitions.
\r
1305 eventProcessors : commonEventProcessors,
\r
1307 keyboardFocusable : true
\r
1310 CKEDITOR.ui.dialog.fileButton.prototype = new CKEDITOR.ui.dialog.button;
\r
1312 CKEDITOR.dialog.addUIElement( 'text', textBuilder );
\r
1313 CKEDITOR.dialog.addUIElement( 'password', textBuilder );
\r
1314 CKEDITOR.dialog.addUIElement( 'textarea', commonBuilder );
\r
1315 CKEDITOR.dialog.addUIElement( 'checkbox', commonBuilder );
\r
1316 CKEDITOR.dialog.addUIElement( 'radio', commonBuilder );
\r
1317 CKEDITOR.dialog.addUIElement( 'button', commonBuilder );
\r
1318 CKEDITOR.dialog.addUIElement( 'select', commonBuilder );
\r
1319 CKEDITOR.dialog.addUIElement( 'file', commonBuilder );
\r
1320 CKEDITOR.dialog.addUIElement( 'fileButton', commonBuilder );
\r
1321 CKEDITOR.dialog.addUIElement( 'html', commonBuilder );
\r