/** * @file elSelect.js * @downloaded from http://www.cult-f.net/2007/12/14/elselect/ * @author Sergey Korzhov aka elPas0 * @site http://www.cult-f.net * @date December 14, 2007 * */ var elSelect = new Class({ options: { container: false, baseClass : 'elSelect', baseWidthClass : 'elSelect300wide', onChangeEventFunction : '', maxHeightBeforeScroll : 250 }, source : false, selected : false, _select : false, current : false, selectedOption : false, dropDown : false, optionsContainer : false, hiddenInput : false, /* pass the options, create html and inject into container */ initialize: function(options){ this.setOptions(options) if ( !this.options.container ) return this.selected = false this.source = $(this.options.container).getElement('select') this.buildFrameWork() $(this.source).getElements('option').each( this.addOption, this ) $(this.options.container).setHTML('') this._select.injectInside($(this.options.container)) this.otherOption.injectInside($(this.options.container)) this.bindEvents() }, buildFrameWork : function() { this._select = new Element('div').addClass( this.options.baseClass ).addClass( this.options.baseWidthClass ) //this._select.addStyle('width', this.options.baseWidth) this.current = new Element('div').addClass('selected').injectInside($(this._select)) this.selectedOption = new Element('div').addClass('selectedOption').injectInside($(this.current)) this.dropDown = new Element('div').addClass('dropDown').injectInside($(this.current)) new Element('div').addClass('clear').injectInside($(this._select)) this.optionsContainer = new Element('div').addClass('optionsContainer').injectInside($(this._select)) //ie6 cannot work out how wide the div should be. if (window.ie6) { this.optionsContainer.setStyle('width', '250px'); } var t = new Element('div').addClass('optionsContainerTop').injectInside($(this.optionsContainer)) var o = new Element('div').injectInside($(t)) var p = new Element('div').injectInside($(o)) var t = new Element('div').addClass('optionsContainerBottom').injectInside($(this.optionsContainer)) var o = new Element('div').injectInside($(t)) var p = new Element('div').injectInside($(o)) //this had to be changed to injectInside this._select. this.hiddenInput = new Element('input').setProperties({ type : 'hidden', name : this.source.getProperty('name'), id : this.source.getProperty('name') }).injectInside($(this._select)); //this.hiddenInput.setProperty('value', 'ttt'); //this.hiddenInput.setValue('fsfdds'); this.hiddenInputOther = new Element('input').setProperties({ type : 'hidden', name : this.source.getProperty('name')+'_other', id : this.source.getProperty('name')+'_other' }).injectInside($(this._select)) //create other option. this.otherOption = new Element('div').addClass('elselect-other-option'); //create close btn. new Element('a').addClass('sample-ordering-other-close-button').injectInside(this.otherOption).addEvent('click', function(e) { new Event(e).stop(); this.getParent().addClass('elselect-other-option').removeClass('elselect-other-option-show'); }) //create paragraph txt. new Element('p').setHTML('Please specify number of pages').injectInside(this.otherOption); //create textbox. this.otherOptionTextBox = new Element('input').setProperties({id: this.source.getProperty('name')+'_other_tb', name: this.source.getProperty('name')+'_other_tb'}).addClass('elselect-other-option-show-textbox').injectInside(this.otherOption); this.otherOptionAdd = new Element('a').addClass('sample-ordering-other-ok-button').setProperties({ id: this.source.getProperty('name')+'_other_btn', name: this.source.getProperty('name')+'_other_btn'} ).injectInside(this.otherOption).addEvent('click', function(e) { var event = new Event(e); var id = this.id; id = id.replace('cboTextPage', ''); id = id.replace('_other_btn', ''); var new_pages = $('cboTextPage'+id+'_other_tb').getValue(); //reset selected text. this.getParent().getParent().getElement('.selected').getElement('.selectedOption').setHTML(new_pages); //update hidden field. $('cboTextPage'+id+'_other').value = new_pages; //close popup this.getParent().addClass('elselect-other-option').removeClass('elselect-other-option-show'); }); //alert(this.source.getProperty('name')); }, bindEvents : function() { document.addEvent('click', function() { if ( this.optionsContainer.getStyle('display') == 'block') this.onDropDown() }.bind(this)); $(this.options.container).addEvent( 'click', function(e) { new Event(e).stop(); } ) this.current.addEvent('click', this.onDropDown.bindWithEvent(this) ) }, //add single option to select addOption: function( option ){ var o = new Element('div').addClass('option').setProperty('value',option.value) if ( option.disabled ) { o.addClass('disabled') } else { o.addEvents( { 'click': this.onOptionClick.bindWithEvent(this), 'mouseout': this.onOptionMouseout.bindWithEvent(this), 'mouseover': this.onOptionMouseover.bindWithEvent(this) }) } if ( $defined(option.getProperty('class')) && $chk(option.getProperty('class')) ) o.addClass(option.getProperty('class')) if ( option.selected ) { if ( this.selected) this.selected.removeClass('selected'); this.selected = o o.addClass('selected') this.selectedOption.setText(option.text); this.hiddenInput.setProperty('value',option.value); } o.setText(option.text) o.injectBefore($(this.optionsContainer).getLast()) }, onDropDown : function( e ) { if ( this.optionsContainer.getStyle('display') == 'block') { this.optionsContainer.setStyle('display','none'); if ($('fileRef')) { $('fileRef').disabled = false; //if (window.ie) { $('cmdBrowseBtn').setStyle('visibility', 'visible'); $('fileRef').setStyle('visibility', 'visible'); //} } } else { btnHideBrowseBtn = false; //envelopes. if ($('kwdoggettformname')) { if ($('kwdoggettformname').getValue() == 'envelopes') { if ($('cboSamplePaperName5') && this.source.getProperty('name') == 'cboSamplePaperName5') { btnHideBrowseBtn = true; } else if (!$('cboSamplePaperName5') && $('cboSamplePaperName4') && this.source.getProperty('name') == 'cboSamplePaperName4') { btnHideBrowseBtn = true; } else if (!$('cboSamplePaperName4') && $('cboSamplePaperName3') && this.source.getProperty('name') == 'cboSamplePaperName3') { btnHideBrowseBtn = true; } else if (!$('cboSamplePaperName3') && $('cboSamplePaperName2') && this.source.getProperty('name') == 'cboSamplePaperName2') { btnHideBrowseBtn = true; } else if (!$('cboSamplePaperName2') && $('cboSamplePaperName1') && this.source.getProperty('name') == 'cboSamplePaperName1') { btnHideBrowseBtn = true; } } //labels. if ($('kwdoggettformname').getValue() == 'labels') { if ($('cboSampleFacesheets5') && this.source.getProperty('name') == 'cboSampleFacesheets5') { btnHideBrowseBtn = true; } else if (!$('cboSampleFacesheets5') && $('cboSampleFacesheets4') && this.source.getProperty('name') == 'cboSampleFacesheets4') { btnHideBrowseBtn = true; } else if (!$('cboSampleFacesheets4') && $('cboSampleFacesheets3') && this.source.getProperty('name') == 'cboSampleFacesheets3') { btnHideBrowseBtn = true; } else if (!$('cboSampleFacesheets3') && $('cboSampleFacesheets2') && this.source.getProperty('name') == 'cboSampleFacesheets2') { btnHideBrowseBtn = true; } else if (!$('cboSampleFacesheets2') && $('cboSampleFacesheets1') && this.source.getProperty('name') == 'cboSampleFacesheets1') { btnHideBrowseBtn = true; } } //papers if ($('kwdoggettformname').getValue() == 'papers') { if (!$('cboTextPagerName2_1')) { if ($('cboTextPagerName1_5') && this.source.getProperty('name') == 'cboTextPagerName1_5') { btnHideBrowseBtn = true; } else if (!$('cboTextPagerName1_5') && $('cboTextPagerName1_4') && this.source.getProperty('name') == 'cboTextPagerName1_4') { btnHideBrowseBtn = true; } else if (!$('cboTextPagerName1_4') && $('cboTextPagerName1_3') && this.source.getProperty('name') == 'cboTextPagerName1_3') { btnHideBrowseBtn = true; } else if (!$('cboTextPagerName1_3') && $('cboTextPagerName1_2') && this.source.getProperty('name') == 'cboTextPagerName1_2') { btnHideBrowseBtn = true; } else if (!$('cboTextPagerName1_2') && $('cboTextPagerName1_1') && this.source.getProperty('name') == 'cboTextPagerName1_1') { btnHideBrowseBtn = true; } } if (!$('cboTextPagerName3_1')) { if ($('cboTextPagerName2_5') && this.source.getProperty('name') == 'cboTextPagerName2_5') { btnHideBrowseBtn = true; } else if (!$('cboTextPagerName2_5') && $('cboTextPagerName2_4') && this.source.getProperty('name') == 'cboTextPagerName2_4') { btnHideBrowseBtn = true; } else if (!$('cboTextPagerName2_4') && $('cboTextPagerName2_3') && this.source.getProperty('name') == 'cboTextPagerName2_3') { btnHideBrowseBtn = true; } else if (!$('cboTextPagerName2_3') && $('cboTextPagerName2_2') && this.source.getProperty('name') == 'cboTextPagerName2_2') { btnHideBrowseBtn = true; } else if (!$('cboTextPagerName2_2') && $('cboTextPagerName2_1') && this.source.getProperty('name') == 'cboTextPagerName2_1') { btnHideBrowseBtn = true; } } if (!$('cboTextPagerName4_1')) { if ($('cboTextPagerName3_5') && this.source.getProperty('name') == 'cboTextPagerName3_5') { btnHideBrowseBtn = true; } else if (!$('cboTextPagerName3_5') && $('cboTextPagerName3_4') && this.source.getProperty('name') == 'cboTextPagerName3_4') { btnHideBrowseBtn = true; } else if (!$('cboTextPagerName3_4') && $('cboTextPagerName3_3') && this.source.getProperty('name') == 'cboTextPagerName3_3') { btnHideBrowseBtn = true; } else if (!$('cboTextPagerName3_3') && $('cboTextPagerName3_2') && this.source.getProperty('name') == 'cboTextPagerName3_2') { btnHideBrowseBtn = true; } else if (!$('cboTextPagerName3_2') && $('cboTextPagerName3_1') && this.source.getProperty('name') == 'cboTextPagerName3_1') { btnHideBrowseBtn = true; } } if (!$('cboTextPagerName5_1')) { if ($('cboTextPagerName4_5') && this.source.getProperty('name') == 'cboTextPagerName4_5') { btnHideBrowseBtn = true; } else if (!$('cboTextPagerName4_5') && $('cboTextPagerName4_4') && this.source.getProperty('name') == 'cboTextPagerName4_4') { btnHideBrowseBtn = true; } else if (!$('cboTextPagerName4_4') && $('cboTextPagerName4_3') && this.source.getProperty('name') == 'cboTextPagerName4_3') { btnHideBrowseBtn = true; } else if (!$('cboTextPagerName4_3') && $('cboTextPagerName4_2') && this.source.getProperty('name') == 'cboTextPagerName4_2') { btnHideBrowseBtn = true; } else if (!$('cboTextPagerName4_2') && $('cboTextPagerName4_1') && this.source.getProperty('name') == 'cboTextPagerName4_1') { btnHideBrowseBtn = true; } } if ($('cboTextPagerName5_5') && this.source.getProperty('name') == 'cboTextPagerName5_5') { btnHideBrowseBtn = true; } else if (!$('cboTextPagerName5_5') && $('cboTextPagerName5_4') && this.source.getProperty('name') == 'cboTextPagerName5_4') { btnHideBrowseBtn = true; } else if (!$('cboTextPagerName5_4') && $('cboTextPagerName5_3') && this.source.getProperty('name') == 'cboTextPagerName5_3') { btnHideBrowseBtn = true; } else if (!$('cboTextPagerName5_3') && $('cboTextPagerName5_2') && this.source.getProperty('name') == 'cboTextPagerName5_2') { btnHideBrowseBtn = true; } else if (!$('cboTextPagerName5_2') && $('cboTextPagerName5_1') && this.source.getProperty('name') == 'cboTextPagerName5_1') { btnHideBrowseBtn = true; } } } if ($('fileRef') && btnHideBrowseBtn) { $('fileRef').disabled = true; //if (window.ie) { $('cmdBrowseBtn').setStyle('visibility', 'hidden'); $('fileRef').setStyle('visibility', 'hidden'); //} } var t_all = document.getElementsByTagName("div"); for (var i_all = 0; i_all < t_all.length; i_all++) { if (t_all.item(i_all).className == 'optionsContainer') t_all.item(i_all).setStyle('display','none') } this.optionsContainer.setStyle('display','block') //do height thing. var temp_height = this.optionsContainer.getStyle('height'); temp_height = temp_height.replace('px', ''); if (parseInt(temp_height) > parseInt(this.options.maxHeightBeforeScroll)) { this.optionsContainer.setStyle('max-height', this.options.maxHeightBeforeScroll+'px'); this.optionsContainer.setStyle('overflow-y', 'scroll'); this.optionsContainer.setStyle('overflow-x', 'hidden'); } this.selected.addClass('selected') //needed to fix min-width in ie6 var width = this.optionsContainer.getStyle('width').toInt() > this._select.getStyle('width').toInt() ? this.optionsContainer.getStyle('width') : this._select.getStyle('width') this.optionsContainer.setStyle('width', width) this.optionsContainer.getFirst().setStyle('width', width) this.optionsContainer.getLast().setStyle('width', width) } }, onOptionClick : function(e) { var event = new Event(e) if ( this.selected != event.target ) { this.selected.removeClass('selected') event.target.addClass('selected') this.selected = event.target //alert(this.id); if (this.selected.getProperty('value') == 'Other') { //give a textbox so user can type other. //var new_value = prompt('Please enter text'); this.otherOption.removeClass('elselect-other-option').addClass('elselect-other-option-show'); //var cloak_div = $('cloak-div'); /* a.addEvent('click', function(e) { //alert($('sample-sheets-pages-other').value); //var id = a.id; //id = id.replace('delete-button-', ''); //we want to remove the hidden field and the paragraph. //$('sample-sheets-p-'+id).remove(); //$('sample_sheets_'+id).remove(); //resize container. //samplesheetsselected_slider.slideIn(); //alert(this.id); var p = this.getParent().getParent(); alert(p.id); p.selected = event.target; p.selectedOption.setText($('sample-sheets-pages-other').value); p.hiddenInput.setProperty('value', $('sample-sheets-pages-other').value); })*/ } else { this.selectedOption.setText(this.selected.getText()); this.hiddenInput.setProperty('value',this.selected.getProperty('value')); this.hiddenInputOther.setProperty('value', ''); } //alert(this.selected.getProperty('value')); if (this.options.onChangeEventFunction) { //alert(this.options.onChangeEventFunction); var temp = this.options.onChangeEventFunction; temp(this.selected.getProperty('value')); } } this.onDropDown() }, onOptionMouseover : function(e){ var event = new Event(e) this.selected.removeClass('selected') event.target.addClass('selected') }, onOptionMouseout : function(e){ var event = new Event(e) event.target.removeClass('selected') } }); elSelect.implement(new Events); elSelect.implement(new Options);