diff --git a/chosen/chosen-arrows.png b/chosen/chosen-arrows.png new file mode 100644 index 0000000..01a6541 Binary files /dev/null and b/chosen/chosen-arrows.png differ diff --git a/chosen/chosen-close.png b/chosen/chosen-close.png new file mode 100644 index 0000000..69084cd Binary files /dev/null and b/chosen/chosen-close.png differ diff --git a/chosen/chosen.css b/chosen/chosen.css new file mode 100644 index 0000000..75e0f37 --- /dev/null +++ b/chosen/chosen.css @@ -0,0 +1,319 @@ +/* line 3, sass/chosen.scss */ +div.chzn-container { + font-size: 82.5%; + position: relative; +} + +div.chzn-container input { + background: #fff; + background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.85, white), color-stop(0.99, #eeeeee)); + background-image: -moz-linear-gradient(center bottom, white 85%, #eeeeee 99%); + border: 1px solid #aaa; + font-family: sans-serif; + font-size: 1em; + margin: 0px; + padding: 4px 5px; + outline: none; + -moz-border-radius: 3px; + -webkit-border-radius: 3px; + -o-border-radius: 3px; + -ms-border-radius: 3px; + -khtml-border-radius: 3px; + border-radius: 3px; +} +div.chzn-container textarea:focus { + border-color: #058cf5; + -moz-box-shadow: 0px 0px 5px #999; + -webkit-box-shadow: 0px 0px 5px #999; + box-shadow: 0px 0px 5px #999; +} + +/* line 6, sass/chosen.scss */ +div.chzn-container div.chzn-drop { + background: #FFF; + border: 1px solid #BBB; + border-width: 0 1px 1px; + left: 0; + position: absolute; + top: 29px; + -webkit-box-shadow: 0px 4px 5px rgba(0, 0, 0, 0.15); + -moz-box-shadow: 0px 4px 5px rgba(0, 0, 0, 0.15); + box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15); + z-index: 20; +} +/* line 19, sass/chosen.scss */ +div.chzn-container a.chzn-single { + background: #FFF; + background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #eeeeee), color-stop(0.5, white)); + background-image: -moz-linear-gradient(center bottom, #eeeeee 0%, white 50%); + border: 1px solid #BBB; + display: block; + overflow: hidden; + -moz-border-radius: 3px; + -webkit-border-radius: 3px; + -o-border-radius: 3px; + -ms-border-radius: 3px; + -khtml-border-radius: 3px; + border-radius: 3px; + height: 28px; + color: #666; + line-height: 28px; + padding: 0px 0px 0px 8px; + position: relative; + text-decoration: none; + z-index: 19; + white-space: nowrap; +} +/* line 35, sass/chosen.scss */ +div.chzn-container a.chzn-single span { + display: block; + margin-right: 26px; + overflow: hidden; + text-overflow: ellipsis; +} +/* line 41, sass/chosen.scss */ +div.chzn-container a.chzn-single div { + -moz-border-radius-topright: 2px; + -webkit-border-top-right-radius: 2px; + -o-border-top-right-radius: 2px; + -ms-border-top-right-radius: 2px; + -khtml-border-top-right-radius: 2px; + border-top-right-radius: 2px; + -moz-border-radius-bottomright: 2px; + -webkit-border-bottom-right-radius: 2px; + -o-border-bottom-right-radius: 2px; + -ms-border-bottom-right-radius: 2px; + -khtml-border-bottom-right-radius: 2px; + border-bottom-right-radius: 2px; + background: #EEE; + background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, white), color-stop(0.5, #eeeeee)); + background-image: -moz-linear-gradient(center bottom, white 0%, #eeeeee 50%); + border-left: 1px solid #BBB; + display: block; + height: 100%; + position: absolute; + right: 0; + top: 0; + width: 18px; +} +/* line 53, sass/chosen.scss */ +div.chzn-container a.chzn-single div b { + background: url('chosen-arrows.png') no-repeat left center; + display: block; + width: 100%; + height: 100%; +} +/* line 62, sass/chosen.scss */ +div.chzn-container div.chzn-search { + padding: 4px 3px; + margin: 0px; + white-space: nowrap; +} +/* line 66, sass/chosen.scss */ +div.chzn-container div.chzn-search input { + padding: 0 3px; + -moz-border-radius: 0px; + -webkit-border-radius: 0px; + -o-border-radius: 0px; + -ms-border-radius: 0px; + -khtml-border-radius: 0px; + border-radius: 0px; + color: #666; + background: transparent !important; + padding: 5px; + margin: 1px 0; + outline: 0; +} +/* line 78, sass/chosen.scss */ +div.chzn-container ul.chzn-choices { + background: #fff; + background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.85, white), color-stop(0.99, #eeeeee)); + background-image: -moz-linear-gradient(center bottom, white 85%, #eeeeee 99%); + margin: 0; + cursor: text; + border: 1px solid #aaa; + overflow: hidden; + height: auto !important; + height: 1%; + padding: 0; + position: relative; + -moz-border-radius: 3px; + -webkit-border-radius: 3px; + border-radius: 3px; +} +/* line 93, sass/chosen.scss */ +div.chzn-container ul.chzn-choices:focus { + border-color: #058cf5; + -moz-box-shadow: 0px 0px 5px #999; + -webkit-box-shadow: 0px 0px 5px #999; + box-shadow: 0px 0px 5px #999; +} +/* line 99, sass/chosen.scss */ +div.chzn-container ul.chzn-choices li { + float: left; + list-style-type: none; + margin: 0px; +} +/* line 103, sass/chosen.scss */ +div.chzn-container ul.chzn-choices li.search-field { + margin: 0px; + white-space: nowrap; + padding: 0px; +} +/* line 107, sass/chosen.scss */ +div.chzn-container ul.chzn-choices li.search-field input { + color: #666; + background: transparent !important; + border: 0px !important; + padding: 5px; + margin: 1px 0; + outline: 0; + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; +} +/* line 118, sass/chosen.scss */ +div.chzn-container ul.chzn-choices li.search-field input.default { + color: #999; +} +/* line 123, sass/chosen.scss */ +div.chzn-container ul.chzn-choices li.search-choice { + -moz-border-radius: 3px; + -webkit-border-radius: 3px; + border-radius: 3px; + background: #e6f0f8; + background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #dae8f3), color-stop(0.9, #e9f2fa)); + background-image: -moz-linear-gradient(center bottom, #dae8f3 0%, #e9f2fa 90%); + color: #333; + border: 1px solid #b3c9db; + font-weight: bold; + line-height: 13px; + padding: 3px 18px 3px 6px; + position: relative; + margin: 3px 0px 3px 5px; + text-shadow: 0px 1px 0px #e9f2fa; +} +/* line 138, sass/chosen.scss */ +div.chzn-container ul.chzn-choices li.search-choice span { + cursor: default; +} +/* line 141, sass/chosen.scss */ +div.chzn-container ul.chzn-choices li.search-choice.search-choice-focus { + background: #DDD; +} +/* line 144, sass/chosen.scss */ +div.chzn-container ul.chzn-choices li.search-choice a.search-choice-close { + position: absolute; + right: 4px; + top: 6px; + display: block; + width: 8px; + height: 9px; + font-size: 1px; + background: url(chosen-close.png) no-repeat; +} +/* line 153, sass/chosen.scss */ +div.chzn-container ul.chzn-choices li.search-choice a.search-choice-close:hover { + background-position: 0 -9px; +} +/* line 161, sass/chosen.scss */ +div.chzn-container ul.chzn-results { + margin: 0; + max-height: 196px; + padding: 0; + position: relative; + overflow-x: hidden; + overflow-y: auto; + z-index: 20; +} +/* line 169, sass/chosen.scss */ +div.chzn-container ul.chzn-results li { + padding: 7px 10px; + z-index: 22; + margin: 0; + list-style-type: none; +} +/* line 174, sass/chosen.scss */ +div.chzn-container ul.chzn-results li.active-result { + cursor: pointer; +} +/* line 177, sass/chosen.scss */ +div.chzn-container ul.chzn-results li em { + font-weight: bold; + font-style: normal; + background: #FEFFDC; +} +/* line 182, sass/chosen.scss */ +div.chzn-container ul.chzn-results li.highlighted { + background: #066bb9; + background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #066bb9), color-stop(0.5, #2482cb)); + background-image: -moz-linear-gradient(center bottom, #066bb9 0%, #2482cb 70%); + color: #fff; +} +/* line 187, sass/chosen.scss */ +div.chzn-container ul.chzn-results li.highlighted em { + color: #066bb9; +} +/* line 191, sass/chosen.scss */ +div.chzn-container ul.chzn-results li.no-results { + background: #F4F4F4; +} +/* line 194, sass/chosen.scss */ +div.chzn-container ul.chzn-results li.group-result { + cursor: default; + color: #999; + font-weight: bold; +} +/* line 199, sass/chosen.scss */ +div.chzn-container ul.chzn-results li.group-option { + padding-left: 20px; +} + +/* line 213, sass/chosen.scss */ +div.chzn-container-multi div.chzn-drop li.result-selected { + display: none; +} + +/* line 218, sass/chosen.scss */ +div.chzn-container-active a.chzn-single { + border-color: #058cf5; + -moz-box-shadow: 0px 0px 5px #999; + -webkit-box-shadow: 0px 0px 5px #999; + box-shadow: 0px 0px 5px #999; +} +/* line 224, sass/chosen.scss */ +div.chzn-container-active a.chzn-single-with-drop { + border: 1px solid #BBB; + border-width: 1px 1px 1px; + box-shadow: 0px 1px 0px #FFF inset; + background: #EEE; + background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, white), color-stop(0.5, #eeeeee)); + background-image: -moz-linear-gradient(center bottom, white 0%, #eeeeee 50%); + -webkit-border-bottom-left-radius: 0px; + -webkit-border-bottom-right-radius: 0px; + -moz-border-radius-bottomleft: 0px; + -moz-border-radius-bottomright: 0px; + border-bottom-left-radius: 0px; + border-bottom-right-radius: 0px; +} +/* line 237, sass/chosen.scss */ +div.chzn-container-active a.chzn-single-with-drop div { + background: transparent; + border-left: none; +} +/* line 240, sass/chosen.scss */ +div.chzn-container-active a.chzn-single-with-drop div b { + background-position: right center; +} +/* line 245, sass/chosen.scss */ +div.chzn-container-active ul.chzn-choices { + z-index: 21; + border-color: #058cf5; + -moz-box-shadow: 0px 0px 5px #999; + -webkit-box-shadow: 0px 0px 5px #999; + box-shadow: 0px 0px 5px #999; +} +/* line 247, sass/chosen.scss */ +div.chzn-container-active ul.chzn-choices input { + color: #111 !important; +} diff --git a/chosen/chosen.proto.js b/chosen/chosen.proto.js new file mode 100644 index 0000000..ee59a6d --- /dev/null +++ b/chosen/chosen.proto.js @@ -0,0 +1,687 @@ +/*! + +Chosen for Protoype.js +by Patrick Filler at Harvest + +Copyright (c) 2011 Harvest + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in +all copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN +THE SOFTWARE. + +*/ + +var Chosen; +Chosen = Class.create(); + +Chosen.prototype = { + + active_field : false, + mouse_on_container : false, + + results_showing: false, + + result_highlighted : null, + result_single_selected : null, + + choices: 0, + + // HTML Templates + single_temp : new Template('#{default}
'), + multi_temp : new Template('
'), + + choice_temp : new Template('
  • #{choice}
    • '), + no_results_temp : new Template('
  • No results match "#{terms}"
    • '), + + initialize: function(el){ + if(!Prototype.Browser.IE7 && !Prototype.Browser.IE6){ + this.form_field = el; + this.is_multiple = this.form_field.multiple; + this.form_field.observe("liszt:updated", this.results_update_field.bindAsEventListener(this)); + + this.default_text_default = (this.form_field.multiple) ? "Select Some Options" : "Select an Option"; + + this.click_test_action = this.test_active_click.bindAsEventListener(this); + + this.set_up_html(); + this.register_observers(); + } + }, + + set_up_html: function(){ + this.container_id = this.form_field.id + "_chzn"; + + this.f_width = (this.form_field.getStyle("width")) ? parseInt( this.form_field.getStyle("width"), 10 ) : this.form_field.getWidth(); + var container_props = { + 'id': this.container_id, + 'class':'chzn-container', + 'style':'width:'+ this.f_width +'px' + }; + + this.default_text = this.form_field.readAttribute('title') ? this.form_field.readAttribute('title') : this.default_text_default + + var base_template = ( this.is_multiple ) ? new Element('div', container_props).update( this.multi_temp.evaluate({ "default": this.default_text}) ) : new Element('div', container_props).update( this.single_temp.evaluate({ "default":this.default_text }) ); + + this.form_field.hide().insert({ after: base_template }); + + this.container = $(this.container_id); + this.container.addClassName( "chzn-container-" + ((this.is_multiple) ? "multi" : "single") ); + this.dropdown = this.container.down('div.chzn-drop'); + + var dd_top = this.container.getHeight(); + var dd_width = (this.f_width - get_side_border_padding(this.dropdown)); + + this.dropdown.setStyle({"width": dd_width + "px", "top": dd_top + "px"}); + + this.search_field = this.container.down('input'); + this.search_results = this.container.down('ul.chzn-results'); + this.search_field_scale(); + + this.search_no_results = this.container.down('li.no-results'); + + if( !this.is_multiple ){ + this.search_container = this.container.down('div.chzn-search'); + this.selected_item = this.container.down('.chzn-single'); + this.selected_item.observe("click", this.results_toggle.bindAsEventListener(this)); + var sf_width = (dd_width - get_side_border_padding(this.search_container) - get_side_border_padding(this.search_field)); + this.search_field.setStyle( {"width" : sf_width + "px"} ); + } + else{ + this.search_choices = this.container.down('ul.chzn-choices'); + this.search_container = this.container.down('li.search-field'); + this.search_choices.observe("click", this.choices_click.bindAsEventListener(this)); + } + + this.results_build(); + }, + + register_observers: function(){ + this.container.observe("click", this.container_click.bindAsEventListener(this)); + + this.container.observe("mouseenter", this.mouse_enter.bindAsEventListener(this)); + this.container.observe("mouseleave", this.mouse_leave.bindAsEventListener(this)); + + this.search_field.observe("blur", this.input_blur.bindAsEventListener(this)); + this.search_field.observe("keyup", this.keyup_checker.bindAsEventListener(this)); + this.search_field.observe("keydown", this.keydown_checker.bindAsEventListener(this)); + this.set_tab_index(); + + this.search_results.observe("click", this.search_results_click.bindAsEventListener(this) ); + this.search_results.observe("mouseover", this.search_results_mouseover.bindAsEventListener(this) ); + this.search_results.observe("mouseout", this.search_results_mouseout.bindAsEventListener(this) ); + + if( !this.is_multiple ){ this.selected_item.observe("focus", this.input_focus.bindAsEventListener(this)); } + this.search_field.observe("focus", this.input_focus.bindAsEventListener(this)); + }, + + set_tab_index: function(el){ + if(this.form_field.tabIndex){ + var ti = this.form_field.tabIndex; + this.form_field.tabIndex = -1; + + this.search_field.tabIndex = ti; + if( !this.is_multiple ){ this.selected_item.tabIndex = ti; } + } + }, + + container_click: function(evt){ + if(evt && evt.type=="click"){ evt.preventDefault(); } + if( !this.pending_destroy_click ){ + if(!this.active_field){ + if(this.is_multiple){ this.search_field.clear(); } + document.observe("click", this.click_test_action); + this.results_show(); + } + this.search_field.value = this.search_field.value; + this.search_field.focus(); + + this.container.addClassName("chzn-container-active"); + this.active_field = true; + } + else{ this.pending_destroy_click = false; } + }, + + mouse_enter: function(){ this.mouse_on_container = true; }, + mouse_leave: function(){ this.mouse_on_container = false; }, + + input_focus: function(evt){ + if(!this.active_field){ setTimeout( this.container_click.bind(this) , 50 ); } + }, + + input_blur: function(evt){ + if( !this.mouse_on_container ){ + this.active_field = false; + setTimeout( this.blur_test.bind(this) , 100 ); + } + }, + + blur_test: function(evt){ + if( !this.active_field && this.container.hasClassName("chzn-container-active") ){ this.close_field(); } + }, + + test_active_click: function(evt){ + if( evt.target.up( '#' + this.container.identify() ) ){ this.active_field = true; } + else{ this.close_field(); } + }, + + close_field: function(){ + document.stopObserving("click", this.click_test_action); + + if( !this.is_multiple ){ this.selected_item.tabIndex = this.search_field.tabIndex; } + + this.active_field = false; + this.results_hide(); + + this.container.removeClassName("chzn-container-active"); + this.winnow_results_clear(); + this.clear_backstroke(); + + this.show_search_field_default(); + this.search_field_scale(); + }, + + show_search_field_default: function(){ + if( this.is_multiple && this.choices < 1 && !this.active_field ){ + this.search_field.value = this.default_text; + this.search_field.addClassName("default"); + } + else{ + this.search_field.value = ""; + this.search_field.removeClassName("default"); + } + }, + + search_results_click: function(evt){ + var target = (evt.target.hasClassName("active-result")) ? evt.target : evt.target.up(".active-result"); + if( target ){ + this.result_highlight = target; + this.result_select(); + } + }, + + search_results_mouseover: function(evt){ + var target = (evt.target.hasClassName("active-result")) ? evt.target : evt.target.up(".active-result"); + if( target ){ this.result_do_highlight( target ); } + }, + + search_results_mouseout: function(evt){ + if( evt.target.hasClassName('active-result') || evt.target.up('.active-result') ){ this.result_clear_highlight(); } + }, + + results_show: function(){ + if( !this.is_multiple ){ + this.selected_item.addClassName('chzn-single-with-drop'); + if( this.result_single_selected ){ this.result_do_highlight( this.result_single_selected ); } + } + + var dd_top = (this.is_multiple) ? this.container.getHeight() : this.container.getHeight() - 1; + this.dropdown.setStyle({"top": dd_top + "px", "left":0}); + this.results_showing = true; + + if( !this.is_multiple ){ this.selected_item.tabIndex = -1; } + + this.search_field.focus(); + this.search_field.value = this.search_field.value; + + this.winnow_results(); + }, + + results_toggle: function(evt){ + evt.preventDefault(); + if( this.active_field ){ + if( this.results_showing ){ this.results_hide(); } + else{ this.results_show(); } + } + }, + + results_hide: function(){ + if( !this.is_multiple ){ this.selected_item.removeClassName('chzn-single-with-drop'); } + this.result_clear_highlight(); + this.dropdown.setStyle({"left":"-9000px"}); + this.results_showing = false; + }, + + results_build: function(){ + // TODO remove debugging + var startTime = new Date(); + + this.parsing = true; + this.results_data = select_to_array.parse( this.form_field ); + + if( this.is_multiple && this.choices > 0 ){ + this.search_choices.select("li.search-choice").invoke("remove"); + this.choices = 0; + } + + var i, content=''; + for( i = 0; i' + group.label.escapeHTML() + ''; + } + else{ return ""; } + }, + + result_add_option: function(option){ + if( !option.disabled ){ + option.dom_id = (this.form_field.id + "chzn_o_" + option.id); + + var classes = ( option.selected && this.is_multiple ) ? [] : ["active-result"]; + if( option.selected ){ classes.push("result-selected"); } + if( option.group_id >= 0 ){ classes.push("group-option"); } + + return '
  • ' + option.text.escapeHTML() + '
    • '; + } + else{ return ""; } + }, + + result_do_highlight: function(el){ + this.result_clear_highlight(); + + this.result_highlight = el; + this.result_highlight.addClassName('highlighted'); + + var maxHeight = parseInt(this.search_results.getStyle('maxHeight'), 10); + var visible_top = this.search_results.scrollTop; + var visible_bottom = maxHeight + visible_top; + + var high_top = this.result_highlight.positionedOffset().top; + var high_bottom = high_top + this.result_highlight.getHeight(); + + if( high_bottom > visible_bottom ){ this.search_results.scrollTop = (high_bottom - maxHeight > 0) ? high_bottom - maxHeight : 0; } + else if( high_top < visible_top ){ this.search_results.scrollTop = high_top; } + }, + result_clear_highlight: function(){ + if( this.result_highlight ){ + this.result_highlight.removeClassName('highlighted'); + this.result_highlight = null; + } + }, + + result_select: function(){ + if(this.result_highlight){ + var high = this.result_highlight; + this.result_clear_highlight(); + + high.addClassName("result-selected"); + if( this.is_multiple ){ this.result_deactivate(high); } + else{ this.result_single_selected = high; } + + var position = high.id.substr( high.id.lastIndexOf("_") + 1 ); + var item = this.results_data[position]; + item.selected = true; + + this.form_field.options[item.select_index].selected = true; + + if( this.is_multiple ){ this.choice_build( item ); } + else { this.selected_item.down("span").update(item.text); } + + + this.results_hide(); + this.search_field.value = ""; + + if(typeof Event.simulate === 'function'){ this.form_field.simulate("change"); } + + this.search_field_scale(); + } + }, + + result_activate: function(el){ + el.addClassName("active-result").show(); + }, + + result_deactivate: function(el){ + el.removeClassName("active-result").hide(); + }, + + result_deselect: function(pos){ + var result_data = this.results_data[pos]; + result_data.selected = false; + + this.form_field.options[result_data.select_index].selected = false; + var result = $(this.form_field.id + "chzn_o_" + pos); + result.removeClassName("result-selected").addClassName("active-result").show(); + + this.result_clear_highlight(); + this.winnow_results(); + + if(typeof Event.simulate === 'function'){ this.form_field.simulate("change"); } + + this.search_field_scale(); + }, + + results_search: function(){ + if( !this.results_showing ){ this.results_show(); } + else{ this.winnow_results(); } + }, + + winnow_results: function(){ + var startTime = new Date(); + this.no_results_clear(); + + var results = 0; + + var searchText = (this.search_field.value == this.default_text) ? "" : this.search_field.value.strip(); + var regex = new RegExp('^' + searchText.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&"), 'i'); + var zregex = new RegExp(searchText.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&"), 'i'); + + var i; + for( i = 0; i= 0 || option.text.indexOf("[") == 0){ + // TODO: replace this substitution of /\[\]/ with a list of characters to skip. + var parts = option.text.replace(/\[|\]/g, "").split(" "); + if( parts.length ){ + var j; + for( j = 0; j' + option.text.substr(startpos + searchText.length); + text = text.substr(0,startpos) + '' + text.substr(startpos); + } + else{ text = option.text; } + + if( $(result_id).innerHTML !== text ){ $(result_id).update( text ); } + + this.result_activate( $(result_id) ); + + if( option.group_id >= 0 ){ $( this.results_data[option.group_id].dom_id ).show(); } + } + else{ + if( $(result_id) === this.result_highlight ){ this.result_clear_highlight(); } + this.result_deactivate( $(result_id) ); + } + + } + } + } + + if( results < 1 && searchText.length ){ this.no_results( searchText ); } + else { this.winnow_results_set_highlight(); } + }, + + winnow_results_clear: function(){ + this.search_field.clear(); + var lis = this.search_results.select("li"); + var i; + + for( i = 0; i 0 && this.search_field.value.length < 1 ){ this.results_hide(); } + + this.result_deselect(link.readAttribute("rel")); + link.up('li').remove(); + }, + + search_field_scale: function(){ + if(this.is_multiple){ + var input = this.search_field; + + var h = 0, w = 0; + + var style_block = "position:absolute; left: -1000px; top: -1000px; display:none;"; + var styles = ['font-size','font-style', 'font-weight', 'font-family','line-height', 'text-transform', 'letter-spacing']; + styles.each(function(style){ style_block += style + ":" + input.getStyle(style) + ";"}); + + var div = new Element('div', { 'style' : style_block }).update(input.value); + document.body.appendChild(div); + + console.log( Element.measure(div, 'width') ); + w = Element.measure(div, 'width') + 25; + div.remove(); + + if( w > this.f_width-10 ){ w = this.f_width - 10; } + this.search_field.setStyle({'width':w + 'px'}); + + var dd_top = this.container.getHeight(); + this.dropdown.setStyle({"top": dd_top + "px"}); + } + }, + + keydown_arrow: function(){ + var actives = this.search_results.select("li.active-result"); + if( actives.length ){ + if( !this.result_highlight ){ this.result_do_highlight( actives.first() ); } + else if( this.results_showing ){ + var sibs = this.result_highlight.nextSiblings(); + var nexts = sibs.intersect(actives); + if( nexts.length ){ this.result_do_highlight(nexts.first()); } + } + if( !this.results_showing ){ this.results_show(); } + } + }, + + keyup_arrow: function(){ + if( !this.results_showing && !this.is_multiple ){ + this.results_show(); + } + else if( this.result_highlight ){ + var sibs = this.result_highlight.previousSiblings(); + var actives = this.search_results.select("li.active-result"); + var prevs = sibs.intersect(actives); + + if( prevs.length ){ this.result_do_highlight(prevs.first()); } + else{ + if(this.choices > 0){ this.results_hide(); } + this.result_clear_highlight(); + } + } + }, + + keydown_backstroke: function(){ + if( this.pending_backstroke ){ + this.choice_destroy( this.pending_backstroke.down("a") ); + this.clear_backstroke(); + } + else{ + this.pending_backstroke = this.search_container.siblings("li.search-choice").last(); + this.pending_backstroke.addClassName("search-choice-focus"); + } + }, + + clear_backstroke: function(){ + if( this.pending_backstroke ){ this.pending_backstroke.removeClassName("search-choice-focus"); } + this.pending_backstroke = null; + }, + + keyup_checker: function(evt){ + var stroke = evt.which || evt.keyCode; + this.search_field_scale(); + + switch(stroke){ + case 8: + if( this.is_multiple && this.backstroke_length < 1 && this.choices > 0 ) this.keydown_backstroke(); + else if( !this.pending_backstroke ){ this.results_search(); } + break; + case 13: + evt.preventDefault(); + if( this.results_showing ){ this.result_select(); } + break; + case 9: + case 13: + case 38: + case 40: + break; + default: + this.results_search(); + break; + } + }, + + keydown_checker: function(evt){ + var stroke = evt.which || evt.keyCode; + this.search_field_scale(); + + if(stroke !== 8 && this.pending_backstroke) this.clear_backstroke(); + + switch(stroke){ + case 8: + this.backstroke_length = this.search_field.value.length; + case 9: + this.mouse_on_container = false; + break; + case 13: + evt.preventDefault(); + break; + case 38: + evt.preventDefault(); + this.keyup_arrow(); + break; + case 40: + this.keydown_arrow(); + break; + } + } + +}; + +var get_side_border_padding = function(item){ + var layout = new Element.Layout(item); + return layout.get("border-left") + layout.get("border-right") + layout.get("padding-left") + layout.get("padding-right"); +} + +var select_to_array = { + parse: function(select) { + var children = select.children; + var opt_array = []; + + var group_index = 0; + var sel_index = 0; + + var i; + + for( i = 0; i0 ){ + opt_array.push( select_to_array.parse_option( children[i], opt_array.length, sel_index ) ); + sel_index += 1; + } + else { + sel_index += 1; + } + } + + return opt_array; + }, + + parse_option: function(option, opt_id, select_index, group_id, group_disabled) { + var opt = { id:opt_id, select_index:select_index, value:option.value, text:option.text, selected:option.selected, disabled:option.disabled } + if(group_id || group_id===0){ + opt.group_id = group_id; + if( group_disabled ){ opt.disabled = group_disabled; } + } + return opt; + } +}; + +document.observe('dom:loaded',function() { + $$(".chzn-select").each(function(el){ new Chosen( el ); }); +}); diff --git a/docsupport/style.css b/docsupport/style.css index a3a3151..38e49fd 100644 --- a/docsupport/style.css +++ b/docsupport/style.css @@ -21,10 +21,38 @@ pre, code, kbd, samp { font-family: monospace, sans-serif; } body { background: #EEE; color: #444; } header { background: #F36C00 url(header-bg.gif) repeat-x; height: 59px; min-width:780px; width: 100%; } -header div { margin: 0 auto; padding: 0 20px; width: 745px; } -header h1 { color:#FFF; font-size: 2em; font-weight: bold; height:59px; line-height: 59px; } -header a { color: white; float: right; line-height: 59px; } +header div { margin: 0 auto; padding: 0 40px; width: 745px; } +header h1 { color:#FFF; font-size: 2em; height:59px; line-height: 59px; } +header a { color: white; float: right; font-size: .825em; line-height: 59px; } -div#content { background: white; border: 1px solid #DDD; border-width: 0 1px 1px; margin: 0 auto; padding: 20px 20px 30px; width: 738px; } +div#content { background: white; border: 1px solid #DDD; border-width: 0 1px 1px; margin: 0 auto; padding: 20px 40px 30px; width: 738px; } -footer { color: #999; margin: 20px auto; padding: 0 20px; width: 745px; text-align:center; } \ No newline at end of file +footer { color: #999; margin: 20px auto; padding: 0 20px; width: 745px; text-align:center; } + +body { font-family: sans-serif; font-size: 1em; } + +p { margin: 1em 0; max-width: 700px; } + +h1, h2 { font-family: Georgia, Times, serif; } +h2 { font-size: 1.25em; margin: 2.5em 0 .5em; border-bottom: 1px solid #999; padding-bottom: 5px; } +h3 { font-weight: bold; } + +ul li { list-style: disc; margin-left: 1em; margin-bottom: 1em; } +ol li { margin-left: 1.25em; } + +li > p { margin-top: .25em; } + +div.side-by-side { width: 100%; margin-bottom: 1em; } +div.side-by-side > div { float: left; width: 50%; } +div.side-by-side > div > em { margin-bottom: 10px; display: block; } + +.faqs em { display: block; } + +.clearfix:after { + content: "\0020"; + display: block; + height: 0; + clear: both; + overflow: hidden; + visibility: hidden; +} \ No newline at end of file diff --git a/index.html b/index.html index 9b110cd..6abbbca 100644 --- a/index.html +++ b/index.html @@ -15,6 +15,7 @@ + @@ -26,16 +27,1049 @@
    -

    Chosen is a Javascript library designed to bring ease of use to long, unwieldy HTML select boxes.

    + +
    +

    Chosen is a javsacript plug-in for Prototype (jQuery support coming soon) that makes long, unwieldy select boxes much more user-friendly.

    + +

    Standard Select

    +
    +
    + Turns This + +
    +
    + Into This + +
    +
    + +

    Multiple Select

    +
    +
    + Turns This + +
    +
    + Into This + +
    +
    + +

    Why use Chosen?

    +
      +
    • +

      Easier to Use

      +

      Instead of forcing your users to scroll through a giant list of items, they can just start typing the name of the item they were looking for.

      +
      • +
    • +

      Progressive Enhancement

      +

      Because chosen replaces normal html select fields, you don't need to do anything special to make it work for browsers without javascript.

      +
      • +
    • +

      Lightweight

      +

      Even un-minified, Chosen's JS, CSS and Images weigh in at under 50k.

      +
      • +
    • +

      Painless Setup

      +

      Add Chosen's files to your app and then add the class chzn-select to your select box. That's it, you're done!

      +
      • +
    + +

    Setup

    +

    Using Chosen is easy as can be.

    +
      +
    1. Download the plug-in and copy the related files to your app.
      2. +
    2. Add the class chzn-select to any select box.
      3. +
    3. Disco.
      4. +
    + +

    FAQs

    +
      +
    • + Why did you build this built for Prototype? +
      • +
    • + What browsers are supported? +
      • +
        +
    + +
    Blah blah blah. © 2011 + Built by Harvest
    - - - - - \ No newline at end of file