Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Merge branch 'disabled-selected' of https://github.com/dingram/chosen

…into dingram-disabled-selected
  • Loading branch information...
commit aaa627e644097738aba612e0133bb8e3681f633d 2 parents 5a0a7eb + 9c9f87a
@pfiller pfiller authored
View
13 chosen/chosen.css
@@ -201,6 +201,19 @@
position: relative;
cursor: default;
}
+.chzn-container-multi .chzn-choices .search-choice.search-choice-disabled {
+ background-color: #e4e4e4;
+ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4f4f4', endColorstr='#eeeeee', GradientType=0 );
+ background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(20%, #f4f4f4), color-stop(50%, #f0f0f0), color-stop(52%, #e8e8e8), color-stop(100%, #eeeeee));
+ background-image: -webkit-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
+ background-image: -moz-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
+ background-image: -o-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
+ background-image: -ms-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
+ background-image: linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
+ color: #666;
+ border: 1px solid #cccccc;
+ padding-right: 5px;
+}
.chzn-container-multi .chzn-choices .search-choice-focus {
background: #d4d4d4;
}
View
11 coffee/chosen.jquery.coffee
@@ -299,13 +299,18 @@ class Chosen extends AbstractChosen
return false # fire event
choice_id = @container_id + "_c_" + item.array_index
@choices += 1
- @search_container.before '<li class="search-choice" id="' + choice_id + '"><span>' + item.html + '</span><a href="javascript:void(0)" class="search-choice-close" rel="' + item.array_index + '"></a></li>'
+ if item.disabled
+ html = '<li class="search-choice search-choice-disabled" id="' + choice_id + '"><span>' + item.html + '</span></li>'
+ else
+ html = '<li class="search-choice" id="' + choice_id + '"><span>' + item.html + '</span><a href="javascript:void(0)" class="search-choice-close" rel="' + item.array_index + '"></a></li>'
+ @search_container.before html
link = $('#' + choice_id).find("a").first()
link.click (evt) => this.choice_destroy_link_click(evt)
choice_destroy_link_click: (evt) ->
evt.preventDefault()
- if not @is_disabled
+ result_data = @results_data[$(evt.target).attr "rel"]
+ if not @is_disabled and not result_data.disabled
@pending_destroy_click = true
this.choice_destroy $(evt.target)
else
@@ -497,7 +502,7 @@ class Chosen extends AbstractChosen
this.choice_destroy @pending_backstroke.find("a").first()
this.clear_backstroke()
else
- @pending_backstroke = @search_container.siblings("li.search-choice").last()
+ @pending_backstroke = @search_container.siblings("li.search-choice:not(.search-choice-disabled)").last()
@pending_backstroke.addClass "search-choice-focus"
clear_backstroke: ->
View
15 coffee/chosen.proto.coffee
@@ -20,6 +20,7 @@ class Chosen extends AbstractChosen
@single_temp = new Template('<a href="javascript:void(0)" class="chzn-single chzn-default"><span>#{default}</span><div><b></b></div></a><div class="chzn-drop" style="left:-9000px;"><div class="chzn-search"><input type="text" autocomplete="off" /></div><ul class="chzn-results"></ul></div>')
@multi_temp = new Template('<ul class="chzn-choices"><li class="search-field"><input type="text" value="#{default}" class="default" autocomplete="off" style="width:25px;" /></li></ul><div class="chzn-drop" style="left:-9000px;"><ul class="chzn-results"></ul></div>')
@choice_temp = new Template('<li class="search-choice" id="#{id}"><span>#{choice}</span><a href="javascript:void(0)" class="search-choice-close" rel="#{position}"></a></li>')
+ @choice_noclose_temp = new Template('<li class="search-choice search-choice-disabled" id="#{id}"><span>#{choice}</span></li>')
@no_results_temp = new Template('<li class="no-results">' + @results_none_found + ' "<span>#{terms}</span>"</li>')
set_up_html: ->
@@ -290,16 +291,18 @@ class Chosen extends AbstractChosen
choice_id = @container_id + "_c_" + item.array_index
@choices += 1
@search_container.insert
- before: @choice_temp.evaluate
+ before: (if item.disabled then @choice_noclose_temp else @choice_temp).evaluate
id: choice_id
choice: item.html
position: item.array_index
- link = $(choice_id).down('a')
- link.observe "click", (evt) => this.choice_destroy_link_click(evt)
+ if not item.disabled
+ link = $(choice_id).down('a')
+ link.observe "click", (evt) => this.choice_destroy_link_click(evt)
choice_destroy_link_click: (evt) ->
evt.preventDefault()
- if not @is_disabled
+ result_data = @results_data[evt.target.readAttribute("rel")]
+ if not @is_disabled and not result_data.disabled
@pending_destroy_click = true
this.choice_destroy evt.target
@@ -494,8 +497,8 @@ class Chosen extends AbstractChosen
this.choice_destroy @pending_backstroke.down("a")
this.clear_backstroke()
else
- @pending_backstroke = @search_container.siblings("li.search-choice").last()
- @pending_backstroke.addClassName("search-choice-focus")
+ @pending_backstroke = @search_container.siblings().reject( (x) -> x.hasClassName("search-choice-disabled") ).last()
+ @pending_backstroke.addClassName("search-choice-focus") if @pending_backstroke
clear_backstroke: ->
@pending_backstroke.removeClassName("search-choice-focus") if @pending_backstroke
View
18 example.jquery.html
@@ -1203,6 +1203,24 @@
</div>
</div>
+ <div class="side-by-side clearfix">
+ <p>It is also possible to prevent selected options being deselected by also making them disabled.</p>
+ <div>
+ <select data-placeholder="Your Favorite Types of Bear" style="width:350px;" multiple class="chzn-select" id="test_me_paddington" name="test_me_form" tabindex="8">
+ <option value=""></option>
+ <option>American Black Bear</option>
+ <option>Asiatic Black Bear</option>
+ <option>Brown Bear</option>
+ <option>Giant Panda</option>
+ <option selected>Sloth Bear</option>
+ <option disabled>Sun Bear</option>
+ <option selected disabled>Paddington Bear</option>
+ <option selected>Polar Bear</option>
+ <option disabled>Spectacled Bear</option>
+ </select>
+ </div>
+ </div>
+
<h2>Default Text Support</h2>
<div class="side-by-side clearfix">
<p>Chosen automatically sets the default field text ("Choose a country...") by reading the select element's data-placeholder value. If no data-placeholder value is present, it will default to "Select Some Option" or "Select Some Options" depending on whether the select is single or multiple. You can change these elements in the plugin js file as you see fit.</p>
View
18 example.proto.html
@@ -1202,6 +1202,24 @@
</div>
</div>
+ <div class="side-by-side clearfix">
+ <p>It is also possible to prevent selected options being deselected by also making them disabled.</p>
+ <div>
+ <select data-placeholder="Your Favorite Types of Bear" style="width:350px;" multiple class="chzn-select" id="test_me_paddington" name="test_me_form" tabindex="8">
+ <option value=""></option>
+ <option>American Black Bear</option>
+ <option>Asiatic Black Bear</option>
+ <option>Brown Bear</option>
+ <option>Giant Panda</option>
+ <option selected>Sloth Bear</option>
+ <option disabled>Sun Bear</option>
+ <option selected disabled>Paddington Bear</option>
+ <option selected>Polar Bear</option>
+ <option disabled>Spectacled Bear</option>
+ </select>
+ </div>
+ </div>
+
<h2>Default Text Support</h2>
<div class="side-by-side clearfix">
<p>Chosen automatically sets the default field text ("Choose a country...") by reading the select element's data-placeholder value. If no data-placeholder value is present, it will default to "Select Some Option" or "Select Some Options" depending on whether the select is single or multiple. You can change these elements in the plugin js file as you see fit.</p>
Please sign in to comment.
Something went wrong with that request. Please try again.