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