Index: /CKEditor/branches/prototype/_source/plugins/forms/dialogs/select.js =================================================================== --- /CKEditor/branches/prototype/_source/plugins/forms/dialogs/select.js (revision 2709) +++ /CKEditor/branches/prototype/_source/plugins/forms/dialogs/select.js (revision 2710) @@ -21,4 +21,14 @@ CKEDITOR.dialog.add( 'select', function( editor ) { + var addChange = function( name, input ){ + var dialog = input.getDialog(); + if ( input.isChanged() || ( dialog.editMode == false && input.getValue() != '' )) + { + dialog.changedAttibutes[ name ] = input.getValue(); + return true; + } + return false; + }; + return { title : editor.lang.selectionFieldProp, @@ -26,16 +36,92 @@ minWidth : 400, minHeight : 350, - onOk: function( data ) + onShow: function() { + var parentEditor = this.getParentEditor(); + this.editMode = false; + + /* + Check selection. + Fill this.editObj if the SELECT element is selected. + */ + + var names = this.getContentElement( 'info', 'cmbName' ); + var values = this.getContentElement( 'info', 'cmbValue' ); + var namesOptions = CKEDITOR.plugins.forms.select.getOptions( names ); + var valuesOptions = CKEDITOR.plugins.forms.select.getOptions( values ); + + // Reset dialog. + for ( var i = namesOptions.length-1 ; i >=0 ; i-- ) + { + namesOptions[i].parentNode.removeChild( namesOptions[i] ); + valuesOptions[i].parentNode.removeChild( valuesOptions[i] ); + } + + + if ( this.editMode == true ) //Load existing object. + { + this.getContentElement( 'info', 'txtOptValue' ).setValue( this.editObj.getAttribute( "name" ) ); + this.getContentElement( 'info', 'txtOptValue' ).setValue( this.editObj.getAttribute( "value" ) ); + this.getContentElement( 'info', 'txtSize' ).setValue( this.editObj.getAttribute( "size" ) ); + this.getContentElement( 'info', 'chkMulti' ).setValue( this.editObj.getAttribute( "multiple" ) ); + + var objOptions = CKEDITOR.plugins.forms.select.getOptions( this.editObj ); + + //Load Options into dialog. + for ( var i = 0 ; i < objOptions.length ; i++ ) + { + var oText = objOptions[i].inerHTML; + var oValue = objOptions[i].value; + + var oTOption = CKEDITOR.plugins.forms.select.addOption( names, oText, oText, parentEditor.document ); + var oVOption = CKEDITOR.plugins.forms.select.addOption( values, oValue, oValue, parentEditor.document ); + } + } + else //New object. + this.editObj = this.getParentEditor().document.createElement( 'select' ); + + this.changedAttibutes = new Array(); + }, + onOk: function() + { + + var objOptions = CKEDITOR.plugins.forms.select.getOptions( this.editObj ); + + // Remove all options. + for ( var i = objOptions.length-1 ; i >= 0 ; i-- ) + objOptions[i].parentNode.removeChild( objOptions[i] ); + + var selectValue = this.getContentElement( 'info', 'txtValue' ).getValue(); + var optionsNames = CKEDITOR.plugins.forms.select.getOptions( this.getContentElement( 'info', 'cmbName' ) ); + var optionsValues = CKEDITOR.plugins.forms.select.getOptions( this.getContentElement( 'info', 'cmbValue' ) ); + + //Set added/changed attributes + for( var name in this.changedAttibutes ) + this.editObj.setAttribute(name, this.changedAttibutes[ name ] ); + + var parentEditor = this.getParentEditor(); + + // Add all available options. + for ( var i = 0 ; i < optionsNames.length ; i++ ) + { + var sText = optionsNames[i].value; + var sValue = optionsValues[i].value; + if ( sValue.length == 0 ) sValue = sText; + + var oOption = CKEDITOR.plugins.forms.select.addOption( this.editObj, sText, sValue, parentEditor.document ); + if ( sValue == selectValue ) + { + oOption.setAttribute( 'selected', 'selected' ); + oOption.selected = true; + } + } + + if ( this.editMode == false ) + parentEditor.insertElement( this.editObj ); + return true; }, - onCancel: function() { - }, - - onLoad: function( data ) - { - return true; }, contents : [ @@ -58,4 +144,5 @@ validate: function( data ) { + addChange( 'name', this ); return true; } @@ -97,4 +184,5 @@ return false; } + addChange( 'size', this ); } return true; @@ -105,5 +193,5 @@ align : 'center', html : '' + CKEDITOR.tools.htmlEncode( editor.lang.dlgSelectLines ) + '' - }, + } ] }, @@ -119,22 +207,14 @@ [ { - id : 'txtName', + id : 'txtOptName', type : 'text', label : editor.lang.dlgSelectOpText, - style : 'width:105px', - validate: function( data ) - { - return true; - } - }, - { - id : 'txtValue', + style : 'width:105px' + }, + { + id : 'txtOptValue', type : 'text', label : editor.lang.dlgSelectOpValue, - style : 'width:105px', - validate: function( data ) - { - return true; - } + style : 'width:105px' }, { @@ -145,4 +225,17 @@ onClick : function() { + //Add new option. + var dialog = this.getDialog(); + var name = dialog.getContentElement( 'info', 'txtOptName' ); + var value = dialog.getContentElement( 'info', 'txtOptValue' ); + + var names = dialog.getContentElement( 'info', 'cmbName' ); + var values = dialog.getContentElement( 'info', 'cmbValue' ); + + CKEDITOR.plugins.forms.select.addOption(names, name.getValue(), name.getValue() ); + CKEDITOR.plugins.forms.select.addOption(values, value.getValue(), value.getValue() ); + + name.setValue( "" ); + value.setValue( "" ); } }, @@ -153,4 +246,15 @@ onClick : function() { + //Modify selected option. + var dialog = this.getDialog(); + var name = dialog.getContentElement( 'info', 'txtOptName' ); + var value = dialog.getContentElement( 'info', 'txtOptValue' ); + + var names = dialog.getContentElement( 'info', 'cmbName' ); + var values = dialog.getContentElement( 'info', 'cmbValue' ); + + var iIndex = CKEDITOR.plugins.forms.select.getSelectedIndex( names ); + CKEDITOR.plugins.forms.select.modifyOption( names, iIndex, name.getValue(), name.getValue() ); + CKEDITOR.plugins.forms.select.modifyOption( values, iIndex, value.getValue(), value.getValue() ); } } @@ -164,26 +268,48 @@ { type : 'select', - id : 'cmbText', + id : 'cmbName', label : '', title : '', size : 5, style : 'width:105px', - items: [ - ], + items : [], onChange : function() { + var dialog = this.getDialog(); + var names = dialog.getContentElement( 'info', 'cmbName' ); + var values = dialog.getContentElement( 'info', 'cmbValue' ); + + var name = dialog.getContentElement( 'info', 'txtOptName' ); + var value = dialog.getContentElement( 'info', 'txtOptValue' ); + + var iIndex = CKEDITOR.plugins.forms.select.getSelectedIndex( names ); + CKEDITOR.plugins.forms.select.setSelectedIndex( values, iIndex ); + + name.setValue( names.getValue() ); + value.setValue( values.getValue() ); } }, { type : 'select', - id : 'cmbText', + id : 'cmbValue', label : '', title : '', size : 5, style : 'width:105px', - items: [ - ], + items : [], onChange : function() { + var dialog = this.getDialog(); + var names = dialog.getContentElement( 'info', 'cmbName' ); + var values = dialog.getContentElement( 'info', 'cmbValue' ); + + var name = dialog.getContentElement( 'info', 'txtOptName' ); + var value = dialog.getContentElement( 'info', 'txtOptValue' ); + + var iIndex = CKEDITOR.plugins.forms.select.getSelectedIndex( values ); + CKEDITOR.plugins.forms.select.setSelectedIndex( names, iIndex ); + + name.setValue( names.getValue() ); + value.setValue( values.getValue() ); } }, @@ -199,4 +325,11 @@ onClick : function() { + //Move up. + var dialog = this.getDialog(); + var names = dialog.getContentElement( 'info', 'cmbName' ); + var values = dialog.getContentElement( 'info', 'cmbValue' ); + + CKEDITOR.plugins.forms.select.changeOptionPosition( names, -1 ); + CKEDITOR.plugins.forms.select.changeOptionPosition( values, -1 ); } }, @@ -208,4 +341,11 @@ onClick : function() { + //Move down. + var dialog = this.getDialog(); + var names = dialog.getContentElement( 'info', 'cmbName' ); + var values = dialog.getContentElement( 'info', 'cmbValue' ); + + CKEDITOR.plugins.forms.select.changeOptionPosition( names, 1 ); + CKEDITOR.plugins.forms.select.changeOptionPosition( values, 1 ); } } @@ -216,5 +356,5 @@ { type : 'hbox', - widths : [ '30%', '30%', '40%' ], + widths : [ '40%', '20%', '40%' ], children : [ @@ -225,4 +365,9 @@ onClick : function() { + //Set as default value. + var dialog = this.getDialog(); + var values = dialog.getContentElement( 'info', 'cmbValue' ); + var txtValue = dialog.getContentElement( 'info', 'txtValue' ); + txtValue.setValue( values.getValue() ); } }, @@ -233,8 +378,20 @@ onClick : function() { - } - }, - { - id : 'txtType', + // Delete option. + var dialog = this.getDialog(); + var names = dialog.getContentElement( 'info', 'cmbName' ); + var values = dialog.getContentElement( 'info', 'cmbValue' ); + + CKEDITOR.plugins.forms.select.removeSelectedOptions( names ); + CKEDITOR.plugins.forms.select.removeSelectedOptions( values ); + + var name = dialog.getContentElement( 'info', 'txtOptName' ); + var value = dialog.getContentElement( 'info', 'txtOptValue' ); + name.setValue( "" ); + value.setValue( "" ); + } + }, + { + id : 'chkMulti', type : 'checkbox', label : editor.lang.dlgSelectChkMulti, @@ -243,7 +400,9 @@ validate: function( data ) { + // Multiselect checkbox. + addChange( 'multiple', this ); return true; } - }, + } ] } Index: /CKEditor/branches/prototype/_source/plugins/forms/plugin.js =================================================================== --- /CKEditor/branches/prototype/_source/plugins/forms/plugin.js (revision 2709) +++ /CKEditor/branches/prototype/_source/plugins/forms/plugin.js (revision 2710) @@ -92,2 +92,150 @@ requires : [ 'image' ] } ); + +CKEDITOR.plugins.forms = +{ + select : + { + // Add a new option to a SELECT object (combo or list). + addOption : function( combo, optionText, optionValue, documentObject, index ) + { + combo = this._getObject( combo ); + var oOption; + + if ( documentObject ) + oOption = documentObject.createElement( "OPTION" ); + else + oOption = document.createElement( "OPTION" ); + + if ( oOption.tagName && oOption.tagName.toLowerCase() == 'option' ) + { + oOptionObj = oOption; + } + else if (oOption.$ && oOption.$.tagName && oOption.$.tagName.toLowerCase() == 'option' ) + { + oOptionObj = oOption.$; + } + if ( !isNaN( parseInt( index, 10 ) ) ) + combo.options.add( oOptionObj, index ); + else + combo.options.add( oOptionObj ); + + oOptionObj.innerHTML = optionText.length > 0 ? CKEDITOR.tools.htmlEncode( optionText ) : ''; + oOptionObj.value = optionValue; + + return oOptionObj; + }, + + // Remove all selected options from a SELECT object. + removeSelectedOptions : function ( combo ) + { + combo = this._getObject( combo ); + + // Save the selected index + var iSelectedIndex = combo.selectedIndex; + + var oOptions = combo.options; + + // Remove all selected options. + for ( var i = oOptions.length - 1 ; i >= 0 ; i-- ) + { + if ( oOptions[i].selected ) combo.remove(i); + } + + // Reset the selection based on the original selected index. + if ( combo.options.length > 0 ) + { + if ( iSelectedIndex >= combo.options.length ) iSelectedIndex = combo.options.length - 1; + combo.selectedIndex = iSelectedIndex; + } + }, + + //Modify option from a SELECT object. + modifyOption : function( combo, index, title, value ) + { + combo = this._getObject( combo ); + if ( index < 0 ) return ; + + combo.options[ index ].innerHTML = CKEDITOR.tools.htmlEncode( title ) ; + combo.options[ index ].value = CKEDITOR.tools.htmlEncode( value ) ; + }, + + // Moves the selected option by a number of steps (also negative). + changeOptionPosition : function ( combo, steps ) + { + combo = this._getObject( combo ); + var iActualIndex = combo.selectedIndex; + + if ( iActualIndex < 0 ) + return; + + var iFinalIndex = iActualIndex + steps; + + if ( iFinalIndex < 0 ) + iFinalIndex = 0; + + if ( iFinalIndex > ( combo.options.length - 1 ) ) + iFinalIndex = combo.options.length - 1; + + if ( iActualIndex == iFinalIndex ) + return; + + var oOption = combo.options[ iActualIndex ]; + var sText = this._htmlDecode( oOption.innerHTML ); + var sValue = this._htmlDecode( oOption.value ); + + combo.remove( iActualIndex ); + + oOption = this.addOption( combo, sText, sValue, null, iFinalIndex ); + oOption.selected = true; + }, + getSelectedIndex : function( combo ) + { + combo = this._getObject( combo ); + + var iIndex = combo.selectedIndex; + if ( iIndex < 0 ) return ; + return iIndex; + }, + setSelectedIndex : function( combo, index ) + { + combo = this._getObject( combo ); + + if ( index < 0 ) return ; + combo.selectedIndex = index; + + return combo; + }, + getOptions : function ( combo ) + { + combo = this._getObject( combo ); + return combo.options; + }, + _getObject : function ( obj ) + { + if ( obj ){ + if ( obj.tagName && obj.tagName.toLowerCase() == 'select' ) + return obj; + else if ( obj.domId && obj.getInputElement().$ ) + return obj.getInputElement().$; + else if ( obj.$ ) + return obj.$; + } + else + return false; + }, + _htmlDecode : function( text ) + { + if ( !text ) + return ''; + + text = text.replace( />/g, '>' ); + text = text.replace( /</g, '<' ); + text = text.replace( /&/g, '&' ); + + return text; + } + } +} + +