]>
Commit | Line | Data |
---|---|---|
7adcb81e IB |
1 | /**\r |
2 | * @license Copyright (c) 2003-2015, CKSource - Frederico Knabben. All rights reserved.\r | |
3 | * For licensing, see LICENSE.md or http://ckeditor.com/license\r | |
4 | */\r | |
5 | CKEDITOR.dialog.add( 'select', function( editor ) {\r | |
6 | // Add a new option to a SELECT object (combo or list).\r | |
7 | function addOption( combo, optionText, optionValue, documentObject, index ) {\r | |
8 | combo = getSelect( combo );\r | |
9 | var oOption;\r | |
10 | if ( documentObject )\r | |
11 | oOption = documentObject.createElement( 'OPTION' );\r | |
12 | else\r | |
13 | oOption = document.createElement( 'OPTION' );\r | |
14 | \r | |
15 | if ( combo && oOption && oOption.getName() == 'option' ) {\r | |
16 | if ( CKEDITOR.env.ie ) {\r | |
17 | if ( !isNaN( parseInt( index, 10 ) ) )\r | |
18 | combo.$.options.add( oOption.$, index );\r | |
19 | else\r | |
20 | combo.$.options.add( oOption.$ );\r | |
21 | \r | |
22 | oOption.$.innerHTML = optionText.length > 0 ? optionText : '';\r | |
23 | oOption.$.value = optionValue;\r | |
24 | } else {\r | |
25 | if ( index !== null && index < combo.getChildCount() )\r | |
26 | combo.getChild( index < 0 ? 0 : index ).insertBeforeMe( oOption );\r | |
27 | else\r | |
28 | combo.append( oOption );\r | |
29 | \r | |
30 | oOption.setText( optionText.length > 0 ? optionText : '' );\r | |
31 | oOption.setValue( optionValue );\r | |
32 | }\r | |
33 | } else {\r | |
34 | return false;\r | |
35 | }\r | |
36 | \r | |
37 | return oOption;\r | |
38 | }\r | |
39 | // Remove all selected options from a SELECT object.\r | |
40 | function removeSelectedOptions( combo ) {\r | |
41 | combo = getSelect( combo );\r | |
42 | \r | |
43 | // Save the selected index\r | |
44 | var iSelectedIndex = getSelectedIndex( combo );\r | |
45 | \r | |
46 | // Remove all selected options.\r | |
47 | for ( var i = combo.getChildren().count() - 1; i >= 0; i-- ) {\r | |
48 | if ( combo.getChild( i ).$.selected )\r | |
49 | combo.getChild( i ).remove();\r | |
50 | }\r | |
51 | \r | |
52 | // Reset the selection based on the original selected index.\r | |
53 | setSelectedIndex( combo, iSelectedIndex );\r | |
54 | }\r | |
55 | //Modify option from a SELECT object.\r | |
56 | function modifyOption( combo, index, title, value ) {\r | |
57 | combo = getSelect( combo );\r | |
58 | if ( index < 0 )\r | |
59 | return false;\r | |
60 | var child = combo.getChild( index );\r | |
61 | child.setText( title );\r | |
62 | child.setValue( value );\r | |
63 | return child;\r | |
64 | }\r | |
65 | \r | |
66 | function removeAllOptions( combo ) {\r | |
67 | combo = getSelect( combo );\r | |
68 | while ( combo.getChild( 0 ) && combo.getChild( 0 ).remove() ) {\r | |
69 | \r | |
70 | }\r | |
71 | }\r | |
72 | // Moves the selected option by a number of steps (also negative).\r | |
73 | function changeOptionPosition( combo, steps, documentObject ) {\r | |
74 | combo = getSelect( combo );\r | |
75 | var iActualIndex = getSelectedIndex( combo );\r | |
76 | if ( iActualIndex < 0 )\r | |
77 | return false;\r | |
78 | \r | |
79 | var iFinalIndex = iActualIndex + steps;\r | |
80 | iFinalIndex = ( iFinalIndex < 0 ) ? 0 : iFinalIndex;\r | |
81 | iFinalIndex = ( iFinalIndex >= combo.getChildCount() ) ? combo.getChildCount() - 1 : iFinalIndex;\r | |
82 | \r | |
83 | if ( iActualIndex == iFinalIndex )\r | |
84 | return false;\r | |
85 | \r | |
86 | var oOption = combo.getChild( iActualIndex ),\r | |
87 | sText = oOption.getText(),\r | |
88 | sValue = oOption.getValue();\r | |
89 | \r | |
90 | oOption.remove();\r | |
91 | \r | |
92 | oOption = addOption( combo, sText, sValue, ( !documentObject ) ? null : documentObject, iFinalIndex );\r | |
93 | setSelectedIndex( combo, iFinalIndex );\r | |
94 | return oOption;\r | |
95 | }\r | |
96 | \r | |
97 | function getSelectedIndex( combo ) {\r | |
98 | combo = getSelect( combo );\r | |
99 | return combo ? combo.$.selectedIndex : -1;\r | |
100 | }\r | |
101 | \r | |
102 | function setSelectedIndex( combo, index ) {\r | |
103 | combo = getSelect( combo );\r | |
104 | if ( index < 0 )\r | |
105 | return null;\r | |
106 | var count = combo.getChildren().count();\r | |
107 | combo.$.selectedIndex = ( index >= count ) ? ( count - 1 ) : index;\r | |
108 | return combo;\r | |
109 | }\r | |
110 | \r | |
111 | function getOptions( combo ) {\r | |
112 | combo = getSelect( combo );\r | |
113 | return combo ? combo.getChildren() : false;\r | |
114 | }\r | |
115 | \r | |
116 | function getSelect( obj ) {\r | |
117 | if ( obj && obj.domId && obj.getInputElement().$ ) // Dialog element.\r | |
118 | return obj.getInputElement();\r | |
119 | else if ( obj && obj.$ )\r | |
120 | return obj;\r | |
121 | return false;\r | |
122 | }\r | |
123 | \r | |
124 | return {\r | |
125 | title: editor.lang.forms.select.title,\r | |
126 | minWidth: CKEDITOR.env.ie ? 460 : 395,\r | |
127 | minHeight: CKEDITOR.env.ie ? 320 : 300,\r | |
128 | onShow: function() {\r | |
129 | delete this.selectBox;\r | |
130 | this.setupContent( 'clear' );\r | |
131 | var element = this.getParentEditor().getSelection().getSelectedElement();\r | |
132 | if ( element && element.getName() == 'select' ) {\r | |
133 | this.selectBox = element;\r | |
134 | this.setupContent( element.getName(), element );\r | |
135 | \r | |
136 | // Load Options into dialog.\r | |
137 | var objOptions = getOptions( element );\r | |
138 | for ( var i = 0; i < objOptions.count(); i++ )\r | |
139 | this.setupContent( 'option', objOptions.getItem( i ) );\r | |
140 | }\r | |
141 | },\r | |
142 | onOk: function() {\r | |
143 | var editor = this.getParentEditor(),\r | |
144 | element = this.selectBox,\r | |
145 | isInsertMode = !element;\r | |
146 | \r | |
147 | if ( isInsertMode )\r | |
148 | element = editor.document.createElement( 'select' );\r | |
149 | this.commitContent( element );\r | |
150 | \r | |
151 | if ( isInsertMode ) {\r | |
152 | editor.insertElement( element );\r | |
153 | if ( CKEDITOR.env.ie ) {\r | |
154 | var sel = editor.getSelection(),\r | |
155 | bms = sel.createBookmarks();\r | |
156 | setTimeout( function() {\r | |
157 | sel.selectBookmarks( bms );\r | |
158 | }, 0 );\r | |
159 | }\r | |
160 | }\r | |
161 | },\r | |
162 | contents: [ {\r | |
163 | id: 'info',\r | |
164 | label: editor.lang.forms.select.selectInfo,\r | |
165 | title: editor.lang.forms.select.selectInfo,\r | |
166 | accessKey: '',\r | |
167 | elements: [ {\r | |
168 | id: 'txtName',\r | |
169 | type: 'text',\r | |
170 | widths: [ '25%', '75%' ],\r | |
171 | labelLayout: 'horizontal',\r | |
172 | label: editor.lang.common.name,\r | |
173 | 'default': '',\r | |
174 | accessKey: 'N',\r | |
175 | style: 'width:350px',\r | |
176 | setup: function( name, element ) {\r | |
177 | if ( name == 'clear' )\r | |
178 | this.setValue( this[ 'default' ] || '' );\r | |
179 | else if ( name == 'select' )\r | |
180 | this.setValue( element.data( 'cke-saved-name' ) || element.getAttribute( 'name' ) || '' );\r | |
181 | \r | |
182 | },\r | |
183 | commit: function( element ) {\r | |
184 | if ( this.getValue() )\r | |
185 | element.data( 'cke-saved-name', this.getValue() );\r | |
186 | else {\r | |
187 | element.data( 'cke-saved-name', false );\r | |
188 | element.removeAttribute( 'name' );\r | |
189 | }\r | |
190 | }\r | |
191 | },\r | |
192 | {\r | |
193 | id: 'txtValue',\r | |
194 | type: 'text',\r | |
195 | widths: [ '25%', '75%' ],\r | |
196 | labelLayout: 'horizontal',\r | |
197 | label: editor.lang.forms.select.value,\r | |
198 | style: 'width:350px',\r | |
199 | 'default': '',\r | |
200 | className: 'cke_disabled',\r | |
201 | onLoad: function() {\r | |
202 | this.getInputElement().setAttribute( 'readOnly', true );\r | |
203 | },\r | |
204 | setup: function( name, element ) {\r | |
205 | if ( name == 'clear' )\r | |
206 | this.setValue( '' );\r | |
207 | else if ( name == 'option' && element.getAttribute( 'selected' ) )\r | |
208 | this.setValue( element.$.value );\r | |
209 | }\r | |
210 | },\r | |
211 | {\r | |
212 | type: 'hbox',\r | |
213 | widths: [ '175px', '170px' ],\r | |
214 | children: [ {\r | |
215 | id: 'txtSize',\r | |
216 | type: 'text',\r | |
217 | labelLayout: 'horizontal',\r | |
218 | label: editor.lang.forms.select.size,\r | |
219 | 'default': '',\r | |
220 | accessKey: 'S',\r | |
221 | style: 'width:175px',\r | |
222 | validate: function() {\r | |
223 | var func = CKEDITOR.dialog.validate.integer( editor.lang.common.validateNumberFailed );\r | |
224 | return ( ( this.getValue() === '' ) || func.apply( this ) );\r | |
225 | },\r | |
226 | setup: function( name, element ) {\r | |
227 | if ( name == 'select' )\r | |
228 | this.setValue( element.getAttribute( 'size' ) || '' );\r | |
229 | if ( CKEDITOR.env.webkit )\r | |
230 | this.getInputElement().setStyle( 'width', '86px' );\r | |
231 | },\r | |
232 | commit: function( element ) {\r | |
233 | if ( this.getValue() )\r | |
234 | element.setAttribute( 'size', this.getValue() );\r | |
235 | else\r | |
236 | element.removeAttribute( 'size' );\r | |
237 | }\r | |
238 | },\r | |
239 | {\r | |
240 | type: 'html',\r | |
241 | html: '<span>' + CKEDITOR.tools.htmlEncode( editor.lang.forms.select.lines ) + '</span>'\r | |
242 | } ]\r | |
243 | },\r | |
244 | {\r | |
245 | type: 'html',\r | |
246 | html: '<span>' + CKEDITOR.tools.htmlEncode( editor.lang.forms.select.opAvail ) + '</span>'\r | |
247 | },\r | |
248 | {\r | |
249 | type: 'hbox',\r | |
250 | widths: [ '115px', '115px', '100px' ],\r | |
251 | children: [ {\r | |
252 | type: 'vbox',\r | |
253 | children: [ {\r | |
254 | id: 'txtOptName',\r | |
255 | type: 'text',\r | |
256 | label: editor.lang.forms.select.opText,\r | |
257 | style: 'width:115px',\r | |
258 | setup: function( name ) {\r | |
259 | if ( name == 'clear' )\r | |
260 | this.setValue( '' );\r | |
261 | }\r | |
262 | },\r | |
263 | {\r | |
264 | type: 'select',\r | |
265 | id: 'cmbName',\r | |
266 | label: '',\r | |
267 | title: '',\r | |
268 | size: 5,\r | |
269 | style: 'width:115px;height:75px',\r | |
270 | items: [],\r | |
271 | onChange: function() {\r | |
272 | var dialog = this.getDialog(),\r | |
273 | values = dialog.getContentElement( 'info', 'cmbValue' ),\r | |
274 | optName = dialog.getContentElement( 'info', 'txtOptName' ),\r | |
275 | optValue = dialog.getContentElement( 'info', 'txtOptValue' ),\r | |
276 | iIndex = getSelectedIndex( this );\r | |
277 | \r | |
278 | setSelectedIndex( values, iIndex );\r | |
279 | optName.setValue( this.getValue() );\r | |
280 | optValue.setValue( values.getValue() );\r | |
281 | },\r | |
282 | setup: function( name, element ) {\r | |
283 | if ( name == 'clear' )\r | |
284 | removeAllOptions( this );\r | |
285 | else if ( name == 'option' )\r | |
286 | addOption( this, element.getText(), element.getText(), this.getDialog().getParentEditor().document );\r | |
287 | },\r | |
288 | commit: function( element ) {\r | |
289 | var dialog = this.getDialog(),\r | |
290 | optionsNames = getOptions( this ),\r | |
291 | optionsValues = getOptions( dialog.getContentElement( 'info', 'cmbValue' ) ),\r | |
292 | selectValue = dialog.getContentElement( 'info', 'txtValue' ).getValue();\r | |
293 | \r | |
294 | removeAllOptions( element );\r | |
295 | \r | |
296 | for ( var i = 0; i < optionsNames.count(); i++ ) {\r | |
297 | var oOption = addOption( element, optionsNames.getItem( i ).getValue(), optionsValues.getItem( i ).getValue(), dialog.getParentEditor().document );\r | |
298 | if ( optionsValues.getItem( i ).getValue() == selectValue ) {\r | |
299 | oOption.setAttribute( 'selected', 'selected' );\r | |
300 | oOption.selected = true;\r | |
301 | }\r | |
302 | }\r | |
303 | }\r | |
304 | } ]\r | |
305 | },\r | |
306 | {\r | |
307 | type: 'vbox',\r | |
308 | children: [ {\r | |
309 | id: 'txtOptValue',\r | |
310 | type: 'text',\r | |
311 | label: editor.lang.forms.select.opValue,\r | |
312 | style: 'width:115px',\r | |
313 | setup: function( name ) {\r | |
314 | if ( name == 'clear' )\r | |
315 | this.setValue( '' );\r | |
316 | }\r | |
317 | },\r | |
318 | {\r | |
319 | type: 'select',\r | |
320 | id: 'cmbValue',\r | |
321 | label: '',\r | |
322 | size: 5,\r | |
323 | style: 'width:115px;height:75px',\r | |
324 | items: [],\r | |
325 | onChange: function() {\r | |
326 | var dialog = this.getDialog(),\r | |
327 | names = dialog.getContentElement( 'info', 'cmbName' ),\r | |
328 | optName = dialog.getContentElement( 'info', 'txtOptName' ),\r | |
329 | optValue = dialog.getContentElement( 'info', 'txtOptValue' ),\r | |
330 | iIndex = getSelectedIndex( this );\r | |
331 | \r | |
332 | setSelectedIndex( names, iIndex );\r | |
333 | optName.setValue( names.getValue() );\r | |
334 | optValue.setValue( this.getValue() );\r | |
335 | },\r | |
336 | setup: function( name, element ) {\r | |
337 | if ( name == 'clear' )\r | |
338 | removeAllOptions( this );\r | |
339 | else if ( name == 'option' ) {\r | |
340 | var oValue = element.getValue();\r | |
341 | addOption( this, oValue, oValue, this.getDialog().getParentEditor().document );\r | |
342 | if ( element.getAttribute( 'selected' ) == 'selected' )\r | |
343 | this.getDialog().getContentElement( 'info', 'txtValue' ).setValue( oValue );\r | |
344 | }\r | |
345 | }\r | |
346 | } ]\r | |
347 | },\r | |
348 | {\r | |
349 | type: 'vbox',\r | |
350 | padding: 5,\r | |
351 | children: [ {\r | |
352 | type: 'button',\r | |
353 | id: 'btnAdd',\r | |
354 | label: editor.lang.forms.select.btnAdd,\r | |
355 | title: editor.lang.forms.select.btnAdd,\r | |
356 | style: 'width:100%;',\r | |
357 | onClick: function() {\r | |
358 | //Add new option.\r | |
359 | var dialog = this.getDialog(),\r | |
360 | optName = dialog.getContentElement( 'info', 'txtOptName' ),\r | |
361 | optValue = dialog.getContentElement( 'info', 'txtOptValue' ),\r | |
362 | names = dialog.getContentElement( 'info', 'cmbName' ),\r | |
363 | values = dialog.getContentElement( 'info', 'cmbValue' );\r | |
364 | \r | |
365 | addOption( names, optName.getValue(), optName.getValue(), dialog.getParentEditor().document );\r | |
366 | addOption( values, optValue.getValue(), optValue.getValue(), dialog.getParentEditor().document );\r | |
367 | \r | |
368 | optName.setValue( '' );\r | |
369 | optValue.setValue( '' );\r | |
370 | }\r | |
371 | },\r | |
372 | {\r | |
373 | type: 'button',\r | |
374 | id: 'btnModify',\r | |
375 | label: editor.lang.forms.select.btnModify,\r | |
376 | title: editor.lang.forms.select.btnModify,\r | |
377 | style: 'width:100%;',\r | |
378 | onClick: function() {\r | |
379 | //Modify selected option.\r | |
380 | var dialog = this.getDialog(),\r | |
381 | optName = dialog.getContentElement( 'info', 'txtOptName' ),\r | |
382 | optValue = dialog.getContentElement( 'info', 'txtOptValue' ),\r | |
383 | names = dialog.getContentElement( 'info', 'cmbName' ),\r | |
384 | values = dialog.getContentElement( 'info', 'cmbValue' ),\r | |
385 | iIndex = getSelectedIndex( names );\r | |
386 | \r | |
387 | if ( iIndex >= 0 ) {\r | |
388 | modifyOption( names, iIndex, optName.getValue(), optName.getValue() );\r | |
389 | modifyOption( values, iIndex, optValue.getValue(), optValue.getValue() );\r | |
390 | }\r | |
391 | }\r | |
392 | },\r | |
393 | {\r | |
394 | type: 'button',\r | |
395 | id: 'btnUp',\r | |
396 | style: 'width:100%;',\r | |
397 | label: editor.lang.forms.select.btnUp,\r | |
398 | title: editor.lang.forms.select.btnUp,\r | |
399 | onClick: function() {\r | |
400 | //Move up.\r | |
401 | var dialog = this.getDialog(),\r | |
402 | names = dialog.getContentElement( 'info', 'cmbName' ),\r | |
403 | values = dialog.getContentElement( 'info', 'cmbValue' );\r | |
404 | \r | |
405 | changeOptionPosition( names, -1, dialog.getParentEditor().document );\r | |
406 | changeOptionPosition( values, -1, dialog.getParentEditor().document );\r | |
407 | }\r | |
408 | },\r | |
409 | {\r | |
410 | type: 'button',\r | |
411 | id: 'btnDown',\r | |
412 | style: 'width:100%;',\r | |
413 | label: editor.lang.forms.select.btnDown,\r | |
414 | title: editor.lang.forms.select.btnDown,\r | |
415 | onClick: function() {\r | |
416 | //Move down.\r | |
417 | var dialog = this.getDialog(),\r | |
418 | names = dialog.getContentElement( 'info', 'cmbName' ),\r | |
419 | values = dialog.getContentElement( 'info', 'cmbValue' );\r | |
420 | \r | |
421 | changeOptionPosition( names, 1, dialog.getParentEditor().document );\r | |
422 | changeOptionPosition( values, 1, dialog.getParentEditor().document );\r | |
423 | }\r | |
424 | } ]\r | |
425 | } ]\r | |
426 | },\r | |
427 | {\r | |
428 | type: 'hbox',\r | |
429 | widths: [ '40%', '20%', '40%' ],\r | |
430 | children: [ {\r | |
431 | type: 'button',\r | |
432 | id: 'btnSetValue',\r | |
433 | label: editor.lang.forms.select.btnSetValue,\r | |
434 | title: editor.lang.forms.select.btnSetValue,\r | |
435 | onClick: function() {\r | |
436 | //Set as default value.\r | |
437 | var dialog = this.getDialog(),\r | |
438 | values = dialog.getContentElement( 'info', 'cmbValue' ),\r | |
439 | txtValue = dialog.getContentElement( 'info', 'txtValue' );\r | |
440 | txtValue.setValue( values.getValue() );\r | |
441 | }\r | |
442 | },\r | |
443 | {\r | |
444 | type: 'button',\r | |
445 | id: 'btnDelete',\r | |
446 | label: editor.lang.forms.select.btnDelete,\r | |
447 | title: editor.lang.forms.select.btnDelete,\r | |
448 | onClick: function() {\r | |
449 | // Delete option.\r | |
450 | var dialog = this.getDialog(),\r | |
451 | names = dialog.getContentElement( 'info', 'cmbName' ),\r | |
452 | values = dialog.getContentElement( 'info', 'cmbValue' ),\r | |
453 | optName = dialog.getContentElement( 'info', 'txtOptName' ),\r | |
454 | optValue = dialog.getContentElement( 'info', 'txtOptValue' );\r | |
455 | \r | |
456 | removeSelectedOptions( names );\r | |
457 | removeSelectedOptions( values );\r | |
458 | \r | |
459 | optName.setValue( '' );\r | |
460 | optValue.setValue( '' );\r | |
461 | }\r | |
462 | },\r | |
463 | {\r | |
464 | type: 'vbox',\r | |
465 | children: [ {\r | |
466 | id: 'chkMulti',\r | |
467 | type: 'checkbox',\r | |
468 | label: editor.lang.forms.select.chkMulti,\r | |
469 | 'default': '',\r | |
470 | accessKey: 'M',\r | |
471 | value: 'checked',\r | |
472 | setup: function( name, element ) {\r | |
473 | if ( name == 'select' )\r | |
474 | this.setValue( element.getAttribute( 'multiple' ) );\r | |
475 | },\r | |
476 | commit: function( element ) {\r | |
477 | if ( this.getValue() )\r | |
478 | element.setAttribute( 'multiple', this.getValue() );\r | |
479 | else\r | |
480 | element.removeAttribute( 'multiple' );\r | |
481 | }\r | |
482 | },\r | |
483 | {\r | |
484 | id: 'required',\r | |
485 | type: 'checkbox',\r | |
486 | label: editor.lang.forms.select.required,\r | |
487 | 'default': '',\r | |
488 | accessKey: 'Q',\r | |
489 | value: 'checked',\r | |
490 | setup: function( name, element ) {\r | |
491 | if ( name == 'select' )\r | |
492 | this.setValue( element.getAttribute( 'required' ) );\r | |
493 | },\r | |
494 | commit: function( element ) {\r | |
495 | if ( this.getValue() )\r | |
496 | element.setAttribute( 'required', 'required' );\r | |
497 | else\r | |
498 | element.removeAttribute( 'required' );\r | |
499 | }\r | |
500 | } ]\r | |
501 | } ]\r | |
502 | } ]\r | |
503 | } ]\r | |
504 | };\r | |
505 | } );\r |