--- /dev/null
+/*\r
+Copyright (c) 2003-2009, CKSource - Frederico Knabben. All rights reserved.\r
+For licensing, see LICENSE.html or http://ckeditor.com/license\r
+*/\r
+CKEDITOR.dialog.add( 'select', function( editor )\r
+{\r
+ // Add a new option to a SELECT object (combo or list).\r
+ function addOption( combo, optionText, optionValue, documentObject, index )\r
+ {\r
+ combo = getSelect( combo );\r
+ var oOption;\r
+ if ( documentObject )\r
+ oOption = documentObject.createElement( "OPTION" );\r
+ else\r
+ oOption = document.createElement( "OPTION" );\r
+\r
+ if ( combo && oOption && oOption.getName() == 'option' )\r
+ {\r
+ if ( CKEDITOR.env.ie ) {\r
+ if ( !isNaN( parseInt( index, 10) ) )\r
+ combo.$.options.add( oOption.$, index );\r
+ else\r
+ combo.$.options.add( oOption.$ );\r
+\r
+ oOption.$.innerHTML = optionText.length > 0 ? optionText : '';\r
+ oOption.$.value = optionValue;\r
+ }\r
+ else\r
+ {\r
+ if ( index !== null && index < combo.getChildCount() )\r
+ combo.getChild( index < 0 ? 0 : index ).insertBeforeMe( oOption );\r
+ else\r
+ combo.append( oOption );\r
+\r
+ oOption.setText( optionText.length > 0 ? optionText : '' );\r
+ oOption.setValue( optionValue );\r
+ }\r
+ }\r
+ else\r
+ return false;\r
+\r
+ return oOption;\r
+ }\r
+ // Remove all selected options from a SELECT object.\r
+ function removeSelectedOptions( combo )\r
+ {\r
+ combo = getSelect( combo );\r
+\r
+ // Save the selected index\r
+ var iSelectedIndex = getSelectedIndex( combo );\r
+\r
+ // Remove all selected options.\r
+ for ( var i = combo.getChildren().count() - 1 ; i >= 0 ; i-- )\r
+ {\r
+ if ( combo.getChild( i ).$.selected )\r
+ combo.getChild( i ).remove();\r
+ }\r
+\r
+ // Reset the selection based on the original selected index.\r
+ setSelectedIndex( combo, iSelectedIndex );\r
+ }\r
+ //Modify option from a SELECT object.\r
+ function modifyOption( combo, index, title, value )\r
+ {\r
+ combo = getSelect( combo );\r
+ if ( index < 0 )\r
+ return false;\r
+ var child = combo.getChild( index );\r
+ child.setText( title );\r
+ child.setValue( value );\r
+ return child;\r
+ }\r
+ function removeAllOptions( combo )\r
+ {\r
+ combo = getSelect( combo );\r
+ while( combo.getChild( 0 ) && combo.getChild( 0 ).remove() )\r
+ { /*jsl:pass*/ }\r
+ }\r
+ // Moves the selected option by a number of steps (also negative).\r
+ function changeOptionPosition( combo, steps, documentObject )\r
+ {\r
+ combo = getSelect( combo );\r
+ var iActualIndex = getSelectedIndex( combo );\r
+ if ( iActualIndex < 0 )\r
+ return false;\r
+\r
+ var iFinalIndex = iActualIndex + steps;\r
+ iFinalIndex = ( iFinalIndex < 0 ) ? 0 : iFinalIndex;\r
+ iFinalIndex = ( iFinalIndex >= combo.getChildCount() ) ? combo.getChildCount() - 1 : iFinalIndex;\r
+\r
+ if ( iActualIndex == iFinalIndex )\r
+ return false;\r
+\r
+ var oOption = combo.getChild( iActualIndex ),\r
+ sText = oOption.getText(),\r
+ sValue = oOption.getValue();\r
+\r
+ oOption.remove();\r
+\r
+ oOption = addOption( combo, sText, sValue, ( !documentObject ) ? null : documentObject, iFinalIndex );\r
+ setSelectedIndex( combo, iFinalIndex );\r
+ return oOption;\r
+ }\r
+ function getSelectedIndex( combo )\r
+ {\r
+ combo = getSelect( combo );\r
+ return combo ? combo.$.selectedIndex : -1;\r
+ }\r
+ function setSelectedIndex( combo, index )\r
+ {\r
+ combo = getSelect( combo );\r
+ if ( index < 0 )\r
+ return null;\r
+ var count = combo.getChildren().count();\r
+ combo.$.selectedIndex = ( index >= count ) ? ( count - 1 ) : index;\r
+ return combo;\r
+ }\r
+ function getOptions( combo )\r
+ {\r
+ combo = getSelect( combo );\r
+ return combo ? combo.getChildren() : false;\r
+ }\r
+ function getSelect( obj )\r
+ {\r
+ if ( obj && obj.domId && obj.getInputElement().$ ) // Dialog element.\r
+ return obj.getInputElement();\r
+ else if ( obj && obj.$ )\r
+ return obj;\r
+ return false;\r
+ }\r
+\r
+ return {\r
+ title : editor.lang.select.title,\r
+ minWidth : CKEDITOR.env.ie ? 460 : 395,\r
+ minHeight : CKEDITOR.env.ie ? 320 : 300,\r
+ onShow : function()\r
+ {\r
+ delete this.selectBox;\r
+ this.setupContent( 'clear' );\r
+ var element = this.getParentEditor().getSelection().getSelectedElement();\r
+ if ( element && element.getName() == "select" )\r
+ {\r
+ this.selectBox = element;\r
+ this.setupContent( element.getName(), element );\r
+\r
+ // Load Options into dialog.\r
+ var objOptions = getOptions( element );\r
+ for ( var i = 0 ; i < objOptions.count() ; i++ )\r
+ this.setupContent( 'option', objOptions.getItem( i ) );\r
+ }\r
+ },\r
+ onOk : function()\r
+ {\r
+ var editor = this.getParentEditor(),\r
+ element = this.selectBox,\r
+ isInsertMode = !element;\r
+\r
+ if ( isInsertMode )\r
+ element = editor.document.createElement( 'select' );\r
+ this.commitContent( element );\r
+\r
+ if ( isInsertMode )\r
+ editor.insertElement( element );\r
+ },\r
+ contents : [\r
+ {\r
+ id : 'info',\r
+ label : editor.lang.select.selectInfo,\r
+ title : editor.lang.select.selectInfo,\r
+ accessKey : '',\r
+ elements : [\r
+ {\r
+ id : 'txtName',\r
+ type : 'text',\r
+ widths : [ '25%','75%' ],\r
+ labelLayout : 'horizontal',\r
+ label : editor.lang.common.name,\r
+ 'default' : '',\r
+ accessKey : 'N',\r
+ align : 'center',\r
+ style : 'width:350px',\r
+ setup : function( name, element )\r
+ {\r
+ if ( name == 'clear' )\r
+ this.setValue( '' );\r
+ else if ( name == 'select' )\r
+ {\r
+ this.setValue(\r
+ element.getAttribute( '_cke_saved_name' ) ||\r
+ element.getAttribute( 'name' ) ||\r
+ '' );\r
+ }\r
+ },\r
+ commit : function( element )\r
+ {\r
+ if ( this.getValue() )\r
+ element.setAttribute( '_cke_saved_name', this.getValue() );\r
+ else\r
+ {\r
+ element.removeAttribute( '_cke_saved_name' ) ;\r
+ element.removeAttribute( 'name' );\r
+ }\r
+ }\r
+ },\r
+ {\r
+ id : 'txtValue',\r
+ type : 'text',\r
+ widths : [ '25%','75%' ],\r
+ labelLayout : 'horizontal',\r
+ label : editor.lang.select.value,\r
+ style : 'width:350px',\r
+ 'default' : '',\r
+ className : 'cke_disabled',\r
+ onLoad : function()\r
+ {\r
+ this.getInputElement().setAttribute( 'readOnly', true );\r
+ },\r
+ setup : function( name, element )\r
+ {\r
+ if ( name == 'clear' )\r
+ this.setValue( '' );\r
+ else if ( name == 'option' && element.getAttribute( 'selected' ) )\r
+ this.setValue( element.$.value );\r
+ }\r
+ },\r
+ {\r
+ type : 'hbox',\r
+ widths : [ '175px', '170px' ],\r
+ align : 'center',\r
+ children :\r
+ [\r
+ {\r
+ id : 'txtSize',\r
+ type : 'text',\r
+ align : 'center',\r
+ labelLayout : 'horizontal',\r
+ label : editor.lang.select.size,\r
+ 'default' : '',\r
+ accessKey : 'S',\r
+ style : 'width:175px',\r
+ validate: function()\r
+ {\r
+ var func = CKEDITOR.dialog.validate.integer( editor.lang.common.validateNumberFailed );\r
+ return ( ( this.getValue() === '' ) || func.apply( this ) );\r
+ },\r
+ setup : function( name, element )\r
+ {\r
+ if ( name == 'select' )\r
+ this.setValue( element.getAttribute( 'size' ) || '' );\r
+ },\r
+ commit : function( element )\r
+ {\r
+ if ( this.getValue() )\r
+ element.setAttribute( 'size', this.getValue() );\r
+ else\r
+ element.removeAttribute( 'size' );\r
+ }\r
+ },\r
+ {\r
+ type : 'html',\r
+ html : '<span>' + CKEDITOR.tools.htmlEncode( editor.lang.select.lines ) + '</span>'\r
+ }\r
+ ]\r
+ },\r
+ {\r
+ type : 'html',\r
+ html : '<span>' + CKEDITOR.tools.htmlEncode( editor.lang.select.opAvail ) + '</span>'\r
+ },\r
+ {\r
+ type : 'hbox',\r
+ widths : [ '115px', '115px' ,'100px' ],\r
+ align : 'top',\r
+ children :\r
+ [\r
+ {\r
+ type : 'vbox',\r
+ children :\r
+ [\r
+ {\r
+ id : 'txtOptName',\r
+ type : 'text',\r
+ label : editor.lang.select.opText,\r
+ style : 'width:115px',\r
+ setup : function( name, element )\r
+ {\r
+ if ( name == 'clear' )\r
+ this.setValue( "" );\r
+ }\r
+ },\r
+ {\r
+ type : 'select',\r
+ id : 'cmbName',\r
+ label : '',\r
+ title : '',\r
+ size : 5,\r
+ style : 'width:115px;height:75px',\r
+ items : [],\r
+ onChange : function()\r
+ {\r
+ var dialog = this.getDialog(),\r
+ values = dialog.getContentElement( 'info', 'cmbValue' ),\r
+ optName = dialog.getContentElement( 'info', 'txtOptName' ),\r
+ optValue = dialog.getContentElement( 'info', 'txtOptValue' ),\r
+ iIndex = getSelectedIndex( this );\r
+\r
+ setSelectedIndex( values, iIndex );\r
+ optName.setValue( this.getValue() );\r
+ optValue.setValue( values.getValue() );\r
+ },\r
+ setup : function( name, element )\r
+ {\r
+ if ( name == 'clear' )\r
+ removeAllOptions( this );\r
+ else if ( name == 'option' )\r
+ addOption( this, element.getText(), element.getText(),\r
+ this.getDialog().getParentEditor().document );\r
+ },\r
+ commit : function( element )\r
+ {\r
+ var dialog = this.getDialog(),\r
+ optionsNames = getOptions( this ),\r
+ optionsValues = getOptions( dialog.getContentElement( 'info', 'cmbValue' ) ),\r
+ selectValue = dialog.getContentElement( 'info', 'txtValue' ).getValue();\r
+\r
+ removeAllOptions( element );\r
+\r
+ for ( var i = 0 ; i < optionsNames.count() ; i++ )\r
+ {\r
+ var oOption = addOption( element, optionsNames.getItem( i ).getValue(),\r
+ optionsValues.getItem( i ).getValue(), dialog.getParentEditor().document );\r
+ if ( optionsValues.getItem( i ).getValue() == selectValue )\r
+ {\r
+ oOption.setAttribute( 'selected', 'selected' );\r
+ oOption.selected = true;\r
+ }\r
+ }\r
+ }\r
+ }\r
+ ]\r
+ },\r
+ {\r
+ type : 'vbox',\r
+ children :\r
+ [\r
+ {\r
+ id : 'txtOptValue',\r
+ type : 'text',\r
+ label : editor.lang.select.opValue,\r
+ style : 'width:115px',\r
+ setup : function( name, element )\r
+ {\r
+ if ( name == 'clear' )\r
+ this.setValue( "" );\r
+ }\r
+ },\r
+ {\r
+ type : 'select',\r
+ id : 'cmbValue',\r
+ label : '',\r
+ size : 5,\r
+ style : 'width:115px;height:75px',\r
+ items : [],\r
+ onChange : function()\r
+ {\r
+ var dialog = this.getDialog(),\r
+ names = dialog.getContentElement( 'info', 'cmbName' ),\r
+ optName = dialog.getContentElement( 'info', 'txtOptName' ),\r
+ optValue = dialog.getContentElement( 'info', 'txtOptValue' ),\r
+ iIndex = getSelectedIndex( this );\r
+\r
+ setSelectedIndex( names, iIndex );\r
+ optName.setValue( names.getValue() );\r
+ optValue.setValue( this.getValue() );\r
+ },\r
+ setup : function( name, element )\r
+ {\r
+ if ( name == 'clear' )\r
+ removeAllOptions( this );\r
+ else if ( name == 'option' )\r
+ {\r
+ var oValue = element.getValue();\r
+ addOption( this, oValue, oValue,\r
+ this.getDialog().getParentEditor().document );\r
+ if ( element.getAttribute( 'selected' ) == 'selected' )\r
+ this.getDialog().getContentElement( 'info', 'txtValue' ).setValue( oValue );\r
+ }\r
+ }\r
+ }\r
+ ]\r
+ },\r
+ {\r
+ type : 'vbox',\r
+ padding : 5,\r
+ children :\r
+ [\r
+ {\r
+ type : 'button',\r
+ style : '',\r
+ label : editor.lang.select.btnAdd,\r
+ title : editor.lang.select.btnAdd,\r
+ style : 'width:100%;',\r
+ onClick : function()\r
+ {\r
+ //Add new option.\r
+ var dialog = this.getDialog(),\r
+ parentEditor = dialog.getParentEditor(),\r
+ optName = dialog.getContentElement( 'info', 'txtOptName' ),\r
+ optValue = dialog.getContentElement( 'info', 'txtOptValue' ),\r
+ names = dialog.getContentElement( 'info', 'cmbName' ),\r
+ values = dialog.getContentElement( 'info', 'cmbValue' );\r
+\r
+ addOption(names, optName.getValue(), optName.getValue(), dialog.getParentEditor().document );\r
+ addOption(values, optValue.getValue(), optValue.getValue(), dialog.getParentEditor().document );\r
+\r
+ optName.setValue( "" );\r
+ optValue.setValue( "" );\r
+ }\r
+ },\r
+ {\r
+ type : 'button',\r
+ label : editor.lang.select.btnModify,\r
+ title : editor.lang.select.btnModify,\r
+ style : 'width:100%;',\r
+ onClick : function()\r
+ {\r
+ //Modify selected option.\r
+ var dialog = this.getDialog(),\r
+ optName = dialog.getContentElement( 'info', 'txtOptName' ),\r
+ optValue = dialog.getContentElement( 'info', 'txtOptValue' ),\r
+ names = dialog.getContentElement( 'info', 'cmbName' ),\r
+ values = dialog.getContentElement( 'info', 'cmbValue' ),\r
+ iIndex = getSelectedIndex( names );\r
+\r
+ if ( iIndex >= 0 )\r
+ {\r
+ modifyOption( names, iIndex, optName.getValue(), optName.getValue() );\r
+ modifyOption( values, iIndex, optValue.getValue(), optValue.getValue() );\r
+ }\r
+ }\r
+ },\r
+ {\r
+ type : 'button',\r
+ style : 'width:100%;',\r
+ label : editor.lang.select.btnUp,\r
+ title : editor.lang.select.btnUp,\r
+ onClick : function()\r
+ {\r
+ //Move up.\r
+ var dialog = this.getDialog(),\r
+ names = dialog.getContentElement( 'info', 'cmbName' ),\r
+ values = dialog.getContentElement( 'info', 'cmbValue' );\r
+\r
+ changeOptionPosition( names, -1, dialog.getParentEditor().document );\r
+ changeOptionPosition( values, -1, dialog.getParentEditor().document );\r
+ }\r
+ },\r
+ {\r
+ type : 'button',\r
+ style : 'width:100%;',\r
+ label : editor.lang.select.btnDown,\r
+ title : editor.lang.select.btnDown,\r
+ onClick : function()\r
+ {\r
+ //Move down.\r
+ var dialog = this.getDialog(),\r
+ names = dialog.getContentElement( 'info', 'cmbName' ),\r
+ values = dialog.getContentElement( 'info', 'cmbValue' );\r
+\r
+ changeOptionPosition( names, 1, dialog.getParentEditor().document );\r
+ changeOptionPosition( values, 1, dialog.getParentEditor().document );\r
+ }\r
+ }\r
+ ]\r
+ }\r
+ ]\r
+ },\r
+ {\r
+ type : 'hbox',\r
+ widths : [ '40%', '20%', '40%' ],\r
+ children :\r
+ [\r
+ {\r
+ type : 'button',\r
+ label : editor.lang.select.btnSetValue,\r
+ title : editor.lang.select.btnSetValue,\r
+ onClick : function()\r
+ {\r
+ //Set as default value.\r
+ var dialog = this.getDialog(),\r
+ values = dialog.getContentElement( 'info', 'cmbValue' ),\r
+ txtValue = dialog.getContentElement( 'info', 'txtValue' );\r
+ txtValue.setValue( values.getValue() );\r
+ }\r
+ },\r
+ {\r
+ type : 'button',\r
+ label : editor.lang.select.btnDelete,\r
+ title : editor.lang.select.btnDelete,\r
+ onClick : function()\r
+ {\r
+ // Delete option.\r
+ var dialog = this.getDialog(),\r
+ names = dialog.getContentElement( 'info', 'cmbName' ),\r
+ values = dialog.getContentElement( 'info', 'cmbValue' ),\r
+ optName = dialog.getContentElement( 'info', 'txtOptName' ),\r
+ optValue = dialog.getContentElement( 'info', 'txtOptValue' );\r
+\r
+ removeSelectedOptions( names );\r
+ removeSelectedOptions( values );\r
+\r
+ optName.setValue( "" );\r
+ optValue.setValue( "" );\r
+ }\r
+ },\r
+ {\r
+ id : 'chkMulti',\r
+ type : 'checkbox',\r
+ label : editor.lang.select.chkMulti,\r
+ 'default' : '',\r
+ accessKey : 'M',\r
+ value : "checked",\r
+ setup : function( name, element )\r
+ {\r
+ if ( name == 'select' )\r
+ this.setValue( element.getAttribute( 'multiple' ) );\r
+ },\r
+ commit : function( element )\r
+ {\r
+ if ( this.getValue() )\r
+ element.setAttribute( 'multiple', this.getValue() );\r
+ else\r
+ element.removeAttribute( 'multiple' );\r
+ }\r
+ }\r
+ ]\r
+ }\r
+ ]\r
+ }\r
+ ]\r
+ };\r
+});\r
Got questions, comments, patches, etc.? Contact Jason Woofenden