source: trunk/filemanager/tp/ckeditor/_source/plugins/forms/dialogs/select.js @ 2000

Revision 2000, 16.6 KB checked in by amuller, 14 years ago (diff)

Ticket #597 - Implementação do módulo gerenciador de arquivos

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