Merge pull request #274 from harvesthq/allow_deselect

Add allow deselect option

chosen/chosen.css

@@ -57,6 +57,19 @@
   -ms-text-overflow: ellipsis;
   text-overflow: ellipsis;
 }
+.chzn-container-single .chzn-single abbr {
+  display: block;
+  position: absolute;
+  right: 26px;
+  top: 8px;
+  width: 12px;
+  height: 13px;
+  font-size: 1px;
+  background: url(chosen-sprite.png) right top no-repeat;
+}
+.chzn-container-single .chzn-single abbr:hover {
+  background-position: right -11px;
+}
 .chzn-container-single .chzn-single div {
   -webkit-border-radius: 0 4px 4px 0;
   -moz-border-radius   : 0 4px 4px 0;
@@ -191,18 +204,18 @@
 .chzn-container-multi .chzn-choices .search-choice .search-choice-close {
   display: block;
   position: absolute;
-  right: 5px;
-  top: 6px;
-  width: 8px;
-  height: 9px;
+  right: 3px;
+  top: 4px;
+  width: 12px;
+  height: 13px;
   font-size: 1px;
   background: url(chosen-sprite.png) right top no-repeat;
 }
 .chzn-container-multi .chzn-choices .search-choice .search-choice-close:hover {
-  background-position: right -9px;
+  background-position: right -11px;
 }
 .chzn-container-multi .chzn-choices .search-choice-focus .search-choice-close {
-  background-position: right -9px;
+  background-position: right -11px;
 }
 /* @end */
 

chosen/chosen.jquery.js

@@ -52,6 +52,7 @@
       this.results_showing = false;
       this.result_highlighted = null;
       this.result_single_selected = null;
+      this.allow_single_deselect = (this.options.allow_single_deselect != null) && this.form_field.options[0].text === "" ? this.options.allow_single_deselect : false;
       this.choices = 0;
       return this.results_none_found = this.options.no_results_text || "No results match";
     };
@@ -103,6 +104,9 @@
       this.container.mousedown(__bind(function(evt) {
         return this.container_mousedown(evt);
       }, this));
+      this.container.mouseup(__bind(function(evt) {
+        return this.container_mouseup(evt);
+      }, this));
       this.container.mouseenter(__bind(function(evt) {
         return this.mouse_enter(evt);
       }, this));
@@ -157,11 +161,13 @@
       }
     };
     Chosen.prototype.container_mousedown = function(evt) {
+      var target_node;
       if (!this.is_disabled) {
+        target_node = evt != null ? evt.target.nodeName : null;
         if (evt && evt.type === "mousedown") {
           evt.stopPropagation();
         }
-        if (!this.pending_destroy_click) {
+        if (!this.pending_destroy_click && target_node !== "ABBR") {
           if (!this.active_field) {
             if (this.is_multiple) {
               this.search_field.val("");
@@ -178,6 +184,11 @@
         }
       }
     };
+    Chosen.prototype.container_mouseup = function(evt) {
+      if (evt.target.nodeName === "ABBR") {
+        return this.results_reset(evt);
+      }
+    };
     Chosen.prototype.mouse_enter = function() {
       return this.mouse_on_container = true;
     };
@@ -431,6 +442,15 @@
       this.result_deselect(link.attr("rel"));
       return link.parents('li').first().remove();
     };
+    Chosen.prototype.results_reset = function(evt) {
+      this.form_field.options[0].selected = true;
+      this.selected_item.find("span").text(this.default_text);
+      this.show_search_field_default();
+      $(evt.target).remove();
+      if (this.active_field) {
+        return this.results_hide();
+      }
+    };
     Chosen.prototype.result_select = function(evt) {
       var high, high_id, item, position;
       if (this.result_highlight) {
@@ -452,6 +472,9 @@
           this.choice_build(item);
         } else {
           this.selected_item.find("span").first().text(item.text);
+          if (this.allow_single_deselect) {
+            this.selected_item.find("span").first().after("<abbr></abbr>");
+          }
         }
         if (!(evt.metaKey && this.is_multiple)) {
           this.results_hide();

chosen/chosen.proto.js

@@ -38,6 +38,7 @@
       this.results_showing = false;
       this.result_highlighted = null;
       this.result_single_selected = null;
+      this.allow_single_deselect = (this.options.allow_single_deselect != null) && this.form_field.options[0].text === "" ? this.options.allow_single_deselect : false;
       this.choices = 0;
       this.results_none_found = this.options.no_results_text || "No results match";
       this.single_temp = new Template('<a href="javascript:void(0)" class="chzn-single"><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>');
@@ -94,6 +95,9 @@
       this.container.observe("mousedown", __bind(function(evt) {
         return this.container_mousedown(evt);
       }, this));
+      this.container.observe("mouseup", __bind(function(evt) {
+        return this.container_mouseup(evt);
+      }, this));
       this.container.observe("mouseenter", __bind(function(evt) {
         return this.mouse_enter(evt);
       }, this));
@@ -148,11 +152,13 @@
       }
     };
     Chosen.prototype.container_mousedown = function(evt) {
+      var target_node;
       if (!this.is_disabled) {
+        target_node = evt != null ? evt.target.nodeName : null;
         if (evt && evt.type === "mousedown") {
           evt.stop();
         }
-        if (!this.pending_destroy_click) {
+        if (!this.pending_destroy_click && target_node !== "ABBR") {
           if (!this.active_field) {
             if (this.is_multiple) {
               this.search_field.clear();
@@ -168,6 +174,11 @@
         }
       }
     };
+    Chosen.prototype.container_mouseup = function(evt) {
+      if (evt.target.nodeName === "ABBR") {
+        return this.results_reset(evt);
+      }
+    };
     Chosen.prototype.mouse_enter = function() {
       return this.mouse_on_container = true;
     };
@@ -419,6 +430,15 @@
       this.result_deselect(link.readAttribute("rel"));
       return link.up('li').remove();
     };
+    Chosen.prototype.results_reset = function(evt) {
+      this.form_field.options[0].selected = true;
+      this.selected_item.down("span").update(this.default_text);
+      this.show_search_field_default();
+      evt.target.remove();
+      if (this.active_field) {
+        return this.results_hide();
+      }
+    };
     Chosen.prototype.result_select = function(evt) {
       var high, item, position;
       if (this.result_highlight) {
@@ -439,6 +459,11 @@
           this.choice_build(item);
         } else {
           this.selected_item.down("span").update(item.html);
+          if (this.allow_single_deselect) {
+            this.selected_item.down("span").insert({
+              after: "<abbr></abbr>"
+            });
+          }
         }
         if (!(evt.metaKey && this.is_multiple)) {
           this.results_hide();

coffee/chosen.jquery.coffee

@@ -37,6 +37,7 @@ class Chosen
     @results_showing = false
     @result_highlighted = null
     @result_single_selected = null
+    @allow_single_deselect = if @options.allow_single_deselect? and @form_field.options[0].text == "" then @options.allow_single_deselect else false
     @choices = 0
     @results_none_found = @options.no_results_text or "No results match"
 
@@ -90,6 +91,7 @@ class Chosen
 
   register_observers: ->
     @container.mousedown (evt) => this.container_mousedown(evt)
+    @container.mouseup (evt) => this.container_mouseup(evt)
     @container.mouseenter (evt) => this.mouse_enter(evt)
     @container.mouseleave (evt) => this.mouse_leave(evt)
   
@@ -121,9 +123,10 @@ class Chosen
 
   container_mousedown: (evt) ->
     if !@is_disabled
+      target_node =  if evt? then evt.target.nodeName else null
       if evt and evt.type is "mousedown"
         evt.stopPropagation()
-      if not @pending_destroy_click
+      if not @pending_destroy_click and target_node != "ABBR"
         if not @active_field
           @search_field.val "" if @is_multiple
           $(document).click @click_test_action
@@ -136,6 +139,9 @@ class Chosen
       else
         @pending_destroy_click = false
 
+  container_mouseup: (evt) ->
+    this.results_reset(evt) if evt.target.nodeName is "ABBR"
+
   mouse_enter: -> @mouse_on_container = true
   mouse_leave: -> @mouse_on_container = false
 
@@ -352,6 +358,13 @@ class Chosen
     this.result_deselect (link.attr "rel")
     link.parents('li').first().remove()
 
+  results_reset: (evt) ->
+    @form_field.options[0].selected = true
+    @selected_item.find("span").text @default_text
+    this.show_search_field_default()
+    $(evt.target).remove();
+    this.results_hide() if @active_field
+
   result_select: (evt) ->
     if @result_highlight
       high = @result_highlight
@@ -377,6 +390,7 @@ class Chosen
         this.choice_build item
       else
         @selected_item.find("span").first().text item.text
+        @selected_item.find("span").first().after "<abbr></abbr>" if @allow_single_deselect
 
       this.results_hide() unless evt.metaKey and @is_multiple
 

coffee/chosen.proto.coffee

@@ -29,6 +29,7 @@ class Chosen
     @results_showing = false
     @result_highlighted = null
     @result_single_selected = null
+    @allow_single_deselect = if @options.allow_single_deselect? and @form_field.options[0].text == "" then @options.allow_single_deselect else false
     @choices = 0
 
     @results_none_found = @options.no_results_text or "No results match"
@@ -85,6 +86,7 @@ class Chosen
 
   register_observers: ->
     @container.observe "mousedown", (evt) => this.container_mousedown(evt)
+    @container.observe "mouseup", (evt) => this.container_mouseup(evt)
     @container.observe "mouseenter", (evt) => this.mouse_enter(evt)
     @container.observe "mouseleave", (evt) => this.mouse_leave(evt)
     
@@ -116,9 +118,10 @@ class Chosen
 
   container_mousedown: (evt) ->
     if !@is_disabled
+      target_node =  if evt? then evt.target.nodeName else null
       if evt and evt.type is "mousedown"
         evt.stop()
-      if not @pending_destroy_click
+      if not @pending_destroy_click and target_node != "ABBR"
         if not @active_field
           @search_field.clear() if @is_multiple
           document.observe "click", @click_test_action
@@ -130,6 +133,9 @@ class Chosen
       else
         @pending_destroy_click = false
   
+  container_mouseup: (evt) ->
+    this.results_reset(evt) if evt.target.nodeName is "ABBR"
+
   mouse_enter: -> @mouse_on_container = true
   mouse_leave: -> @mouse_on_container = false
 
@@ -347,6 +353,13 @@ class Chosen
     this.result_deselect link.readAttribute("rel")
     link.up('li').remove()
 
+  results_reset: (evt) ->
+    @form_field.options[0].selected = true
+    @selected_item.down("span").update(@default_text)
+    this.show_search_field_default()
+    evt.target.remove()
+    this.results_hide() if @active_field
+  
   result_select: (evt) ->
     if @result_highlight
       high = @result_highlight
@@ -370,6 +383,7 @@ class Chosen
         this.choice_build item
       else
         @selected_item.down("span").update(item.html)
+        @selected_item.down("span").insert { after: "<abbr></abbr>" } if @allow_single_deselect
 
       this.results_hide() unless evt.metaKey and @is_multiple