deac/chosen
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

If no id is present, generate a random.

Browse source
This commit is contained in:
pfiller 2011-07-26 15:03:13 -04:00
parent 49c7d2e0f6
commit 2f95023612
3 changed files with 56 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

33
chosen/chosen.jquery.js
View file

@ -43,7 +43,8 @@
}; };
Chosen.prototype.set_up_html = function() { Chosen.prototype.set_up_html = function() {
var container_div, dd_top, dd_width, sf_width; var container_div, dd_top, dd_width, sf_width;
this.container_id = this.form_field.id + "_chzn"; this.container_id = this.form_field.id.length ? this.form_field.id : this.generate_field_id();
this.container_id += "_chzn";
this.f_width = this.form_field_jq.width(); this.f_width = this.form_field_jq.width();
this.default_text = this.form_field_jq.attr('title') ? this.form_field_jq.attr('title') : this.default_text_default; this.default_text = this.form_field_jq.attr('title') ? this.form_field_jq.attr('title') : this.default_text_default;
container_div = $("<div />", { container_div = $("<div />", {
@ -199,7 +200,7 @@
return this.search_field.focus(); return this.search_field.focus();
}; };
Chosen.prototype.test_active_click = function(evt) { Chosen.prototype.test_active_click = function(evt) {
if ($(evt.target).parents('#' + this.container.id).length) { if ($(evt.target).parents('#' + this.container_id).length) {
return this.active_field = true; return this.active_field = true;
} else { } else {
return this.close_field(); return this.close_field();
@ -238,7 +239,7 @@
}; };
Chosen.prototype.result_add_group = function(group) { Chosen.prototype.result_add_group = function(group) {
if (!group.disabled) { if (!group.disabled) {
group.dom_id = this.form_field.id + "chzn_g_" + group.array_index; group.dom_id = this.container_id + "_g_" + group.array_index;
return '<li id="' + group.dom_id + '" class="group-result">' + $("<div />").text(group.label).html() + '</li>'; return '<li id="' + group.dom_id + '" class="group-result">' + $("<div />").text(group.label).html() + '</li>';
} else { } else {
return ""; return "";
@ -247,7 +248,7 @@
Chosen.prototype.result_add_option = function(option) { Chosen.prototype.result_add_option = function(option) {
var classes; var classes;
if (!option.disabled) { if (!option.disabled) {
option.dom_id = this.form_field.id + "chzn_o_" + option.array_index; option.dom_id = this.container_id + "_o_" + option.array_index;
classes = option.selected && this.is_multiple ? [] : ["active-result"]; classes = option.selected && this.is_multiple ? [] : ["active-result"];
if (option.selected) { if (option.selected) {
classes.push("result-selected"); classes.push("result-selected");
@ -374,7 +375,7 @@
}; };
Chosen.prototype.choice_build = function(item) { Chosen.prototype.choice_build = function(item) {
var choice_id, link; var choice_id, link;
choice_id = this.form_field.id + "_chzn_c_" + item.array_index; choice_id = this.container_id + "_c_" + item.array_index;
this.choices += 1; this.choices += 1;
this.search_container.before('<li class="search-choice" id="' + choice_id + '"><span>' + item.text + '</span><a href="javascript:void(0)" class="search-choice-close" rel="' + item.array_index + '"></a></li>'); this.search_container.before('<li class="search-choice" id="' + choice_id + '"><span>' + item.text + '</span><a href="javascript:void(0)" class="search-choice-close" rel="' + item.array_index + '"></a></li>');
link = $('#' + choice_id).find("a").first(); link = $('#' + choice_id).find("a").first();
@ -434,7 +435,7 @@
result_data = this.results_data[pos]; result_data = this.results_data[pos];
result_data.selected = false; result_data.selected = false;
this.form_field.options[result_data.options_index].selected = false; this.form_field.options[result_data.options_index].selected = false;
result = $("#" + this.form_field.id + "chzn_o_" + pos); result = $("#" + this.container_id + "_o_" + pos);
result.removeClass("result-selected").addClass("active-result").show(); result.removeClass("result-selected").addClass("active-result").show();
this.result_clear_highlight(); this.result_clear_highlight();
this.winnow_results(); this.winnow_results();
@ -677,6 +678,26 @@
}); });
} }
}; };
Chosen.prototype.generate_field_id = function() {
var new_id;
new_id = this.generate_random_id();
this.form_field.id = new_id;
return new_id;
};
Chosen.prototype.generate_random_id = function() {
var string;
string = 'sel' + this.generate_random_char() + this.generate_random_char() + this.generate_random_char();
while ($("#" + string).length > 0) {
string += this.generate_random_char();
}
return string;
};
Chosen.prototype.generate_random_char = function() {
var char, chars, random;
chars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZ";
random = Math.floor(Math.random() * chars.length);
return char = chars.substring(random, random + 1);
};
return Chosen; return Chosen;
})(); })();
get_side_border_padding = function(elmt) { get_side_border_padding = function(elmt) {

29
coffee/chosen.jquery.coffee
View file

@ -43,7 +43,8 @@ class Chosen
@choices = 0 @choices = 0
set_up_html: -> set_up_html: ->
@container_id = @form_field.id + "_chzn" @container_id = if @form_field.id.length then @form_field.id else this.generate_field_id()
@container_id += "_chzn"
@f_width = @form_field_jq.width() @f_width = @form_field_jq.width()
@ -170,7 +171,7 @@ class Chosen
test_active_click: (evt) -> test_active_click: (evt) ->
if $(evt.target).parents('#' + @container.id).length if $(evt.target).parents('#' + @container_id).length
@active_field = true @active_field = true
else else
this.close_field() this.close_field()
@ -206,14 +207,14 @@ class Chosen
result_add_group: (group) -> result_add_group: (group) ->
if not group.disabled if not group.disabled
group.dom_id = @form_field.id + "chzn_g_" + group.array_index group.dom_id = @container_id + "_g_" + group.array_index
'<li id="' + group.dom_id + '" class="group-result">' + $("<div />").text(group.label).html() + '</li>' '<li id="' + group.dom_id + '" class="group-result">' + $("<div />").text(group.label).html() + '</li>'
else else
"" ""
result_add_option: (option) -> result_add_option: (option) ->
if not option.disabled if not option.disabled
option.dom_id = @form_field.id + "chzn_o_" + option.array_index option.dom_id = @container_id + "_o_" + option.array_index
classes = if option.selected and @is_multiple then [] else ["active-result"] classes = if option.selected and @is_multiple then [] else ["active-result"]
classes.push "result-selected" if option.selected classes.push "result-selected" if option.selected
@ -318,7 +319,7 @@ class Chosen
this.results_show() this.results_show()
choice_build: (item) -> choice_build: (item) ->
choice_id = @form_field.id + "_chzn_c_" + item.array_index choice_id = @container_id + "_c_" + item.array_index
@choices += 1 @choices += 1
@search_container.before '<li class="search-choice" id="' + choice_id + '"><span>' + item.text + '</span><a href="javascript:void(0)" class="search-choice-close" rel="' + item.array_index + '"></a></li>' @search_container.before '<li class="search-choice" id="' + choice_id + '"><span>' + item.text + '</span><a href="javascript:void(0)" class="search-choice-close" rel="' + item.array_index + '"></a></li>'
link = $('#' + choice_id).find("a").first() link = $('#' + choice_id).find("a").first()
@ -380,7 +381,7 @@ class Chosen
result_data.selected = false result_data.selected = false
@form_field.options[result_data.options_index].selected = false @form_field.options[result_data.options_index].selected = false
result = $("#" + @form_field.id + "chzn_o_" + pos) result = $("#" + @container_id + "_o_" + pos)
result.removeClass("result-selected").addClass("active-result").show() result.removeClass("result-selected").addClass("active-result").show()
this.result_clear_highlight() this.result_clear_highlight()
@ -578,6 +579,22 @@ class Chosen
dd_top = @container.height() dd_top = @container.height()
@dropdown.css({"top": dd_top + "px"}) @dropdown.css({"top": dd_top + "px"})
generate_field_id: ->
new_id = this.generate_random_id()
@form_field.id = new_id
new_id
generate_random_id: ->
string = 'sel' + this.generate_random_char() + this.generate_random_char() + this.generate_random_char()
while $("#" + string).length > 0
string += this.generate_random_char()
string
generate_random_char: ->
chars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZ";
random = Math.floor(Math.random() * chars.length)
char = chars.substring random, random+1
get_side_border_padding = (elmt) -> get_side_border_padding = (elmt) ->
side_border_padding = elmt.outerWidth() - elmt.width() side_border_padding = elmt.outerWidth() - elmt.width()

12
example.jquery.html
View file

@ -306,7 +306,7 @@
</div> </div>
<div> <div>
<em>Into This</em> <em>Into This</em>
<select title="Choose a Country..." class="chzn-select" style="width:350px;" tabindex="2" id="single_example"> <select title="Choose a Country..." class="chzn-select" style="width:350px;" tabindex="2">
<option value=""></option> <option value=""></option>
<option value="United States">United States</option> <option value="United States">United States</option>
<option value="United Kingdom">United Kingdom</option> <option value="United Kingdom">United Kingdom</option>
@ -807,7 +807,7 @@
</div> </div>
<div> <div>
<em>Into This</em> <em>Into This</em>
<select title="Choose a Country..." class="chzn-select" multiple style="width:350px;" tabindex="4" id="multi_example"> <select title="Choose a Country..." class="chzn-select" multiple style="width:350px;" tabindex="4">
<option value=""></option> <option value=""></option>
<option value="United States">United States</option> <option value="United States">United States</option>
<option value="United Kingdom">United Kingdom</option> <option value="United Kingdom">United Kingdom</option>
@ -1060,7 +1060,7 @@
<div class="side-by-side clearfix"> <div class="side-by-side clearfix">
<div> <div>
<em>Single Select with Groups</em> <em>Single Select with Groups</em>
<select id="nfl_team_single" title="Your Favorite Football Team" style="width:350px;" class="chzn-select" tabindex="5"> <select title="Your Favorite Football Team" style="width:350px;" class="chzn-select" tabindex="5">
<option value=""></option> <option value=""></option>
<optgroup label="NFC East"> <optgroup label="NFC East">
<option>Dallas Cowboys</option> <option>Dallas Cowboys</option>
@ -1114,7 +1114,7 @@
</div> </div>
<div> <div>
<em>Multiple Select with Groups</em> <em>Multiple Select with Groups</em>
<select id="nfl_team_multi" title="Your Favorite Football Team" style="width:350px;" class="chzn-select" multiple tabindex="6"> <select title="Your Favorite Football Team" style="width:350px;" class="chzn-select" multiple tabindex="6">
<option value=""></option> <option value=""></option>
<optgroup label="NFC East"> <optgroup label="NFC East">
<option>Dallas Cowboys</option> <option>Dallas Cowboys</option>
@ -1173,7 +1173,7 @@
<p>Chosen automatically highlights selected options and removes disabled options.</p> <p>Chosen automatically highlights selected options and removes disabled options.</p>
<div> <div>
<em>Single Select</em> <em>Single Select</em>
<select id="bears_single" title="Your Favorite Type of Bear" style="width:350px;" class="chzn-select" tabindex="7"> <select title="Your Favorite Type of Bear" style="width:350px;" class="chzn-select" tabindex="7">
<option value=""></option> <option value=""></option>
<option>American Black Bear</option> <option>American Black Bear</option>
<option>Asiatic Black Bear</option> <option>Asiatic Black Bear</option>
@ -1187,7 +1187,7 @@
</div> </div>
<div> <div>
<em>Multiple Select with Groups</em> <em>Multiple Select with Groups</em>
<select id="bears_multiple" title="Your Favorite Types of Bear" style="width:350px;" multiple class="chzn-select" tabindex="8"> <select title="Your Favorite Types of Bear" style="width:350px;" multiple class="chzn-select" tabindex="8">
<option value=""></option> <option value=""></option>
<option>American Black Bear</option> <option>American Black Bear</option>
<option>Asiatic Black Bear</option> <option>Asiatic Black Bear</option>