chosen.proto.coffee in chosen-rails-0.9.13

- old
+ new

@@ -5,11 +5,11 @@
 root = this
 
 class Chosen extends AbstractChosen
 
   setup: ->
-    @current_value = @form_field.value
+    @current_selectedIndex = @form_field.selectedIndex
     @is_rtl = @form_field.hasClassName "chzn-rtl"
 
   finish_setup: ->
     @form_field.addClassName "chzn-done"
 
@@ -29,29 +29,21 @@
     container_classes = ["chzn-container"]
     container_classes.push "chzn-container-" + (if @is_multiple then "multi" else "single")
     container_classes.push @form_field.className if @inherit_select_classes && @form_field.className
     container_classes.push "chzn-rtl" if @is_rtl
 
-    @f_width = if @form_field.getStyle("width") then parseInt @form_field.getStyle("width"), 10 else @form_field.getWidth()
-
     container_props =
       'id': @container_id
       'class': container_classes.join ' '
-      'style': 'width: ' + (@f_width) + 'px' #use parens around @f_width so coffeescript doesn't think + ' px' is a function parameter
+      'style': "width: #{this.container_width()};"
       'title': @form_field.title
-    
-    base_template = if @is_multiple then new Element('div', container_props).update( @multi_temp.evaluate({ "default": @default_text}) ) else new Element('div', container_props).update( @single_temp.evaluate({ "default":@default_text }) )
 
-    @form_field.hide().insert({ after: base_template })
-    @container = $(@container_id)
+    @container = if @is_multiple then new Element('div', container_props).update( @multi_temp.evaluate({ "default": @default_text}) ) else new Element('div', container_props).update( @single_temp.evaluate({ "default":@default_text }) )
+
+    @form_field.hide().insert({ after: @container })
     @dropdown = @container.down('div.chzn-drop')
 
-    dd_top = @container.getHeight()
-    dd_width = (@f_width - get_side_border_padding(@dropdown))
-
-    @dropdown.setStyle({"width": dd_width  + "px", "top": dd_top + "px"})
-
     @search_field = @container.down('input')
     @search_results = @container.down('ul.chzn-results')
     this.search_field_scale()
 
     @search_no_results = @container.down('li.no-results')
@@ -60,15 +52,14 @@
       @search_choices = @container.down('ul.chzn-choices')
       @search_container = @container.down('li.search-field')
     else
       @search_container = @container.down('div.chzn-search')
       @selected_item = @container.down('.chzn-single')
-      sf_width = dd_width - get_side_border_padding(@search_container) - get_side_border_padding(@search_field)
-      @search_field.setStyle( {"width" : sf_width + "px"} )
 
     this.results_build()
     this.set_tab_index()
+    this.set_label_behavior()
     @form_field.fire("liszt:ready", {chosen: this})
 
   register_observers: ->
     @container.observe "mousedown", (evt) => this.container_mousedown(evt)
     @container.observe "mouseup", (evt) => this.container_mouseup(evt)
@@ -105,24 +96,22 @@
       @search_field.disabled = false
       @selected_item.observe "focus", @activate_action if !@is_multiple
 
   container_mousedown: (evt) ->
     if !@is_disabled
-      target_closelink =  if evt? then evt.target.hasClassName "search-choice-close" else false
       if evt and evt.type is "mousedown" and not @results_showing
         evt.stop()
-      if not @pending_destroy_click and not target_closelink
+
+      if not (evt? and evt.target.hasClassName "search-choice-close")
         if not @active_field
           @search_field.clear() if @is_multiple
           document.observe "click", @click_test_action
           this.results_show()
         else if not @is_multiple and evt and (evt.target is @selected_item || evt.target.up("a.chzn-single"))
           this.results_toggle()
 
         this.activate_field()
-      else
-        @pending_destroy_click = false
 
   container_mouseup: (evt) ->
     this.results_reset(evt) if evt.target.nodeName is "ABBR" and not @is_disabled
 
   blur_test: (evt) ->
@@ -224,13 +213,12 @@
         this.result_do_highlight( @result_single_selected )
     else if @max_selected_options <= @choices
       @form_field.fire("liszt:maxselected", {chosen: this})
       return false
 
-    dd_top = if @is_multiple then @container.getHeight() else (@container.getHeight() - 1)
     @form_field.fire("liszt:showing_dropdown", {chosen: this})
-    @dropdown.setStyle {"top":  dd_top + "px", "left":0}
+    @dropdown.setStyle {"left":0}
     @results_showing = true
 
     @search_field.focus()
     @search_field.value = @search_field.value
 
@@ -248,10 +236,18 @@
     if @form_field.tabIndex
       ti = @form_field.tabIndex
       @form_field.tabIndex = -1
       @search_field.tabIndex = ti
 
+  set_label_behavior: ->
+    @form_field_label = @form_field.up("label") # first check for a parent label
+    if not @form_field_label?
+      @form_field_label = $$("label[for=#{@form_field.id}]").first() #next check for a for=#{id}
+
+    if @form_field_label?
+      @form_field_label.observe "click", (evt) => if @is_multiple then this.container_mousedown(evt) else this.activate_field()
+
   show_search_field_default: ->
     if @is_multiple and @choices < 1 and not @active_field
       @search_field.value = @default_text
       @search_field.addClassName "default"
     else
@@ -293,13 +289,12 @@
       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
-      @pending_destroy_click = true
-      this.choice_destroy evt.target
+    evt.stopPropagation()
+    this.choice_destroy evt.target unless @is_disabled
 
   choice_destroy: (link) ->
     if this.result_deselect link.readAttribute("rel")
       @choices -= 1
       this.show_search_field_default()
@@ -318,11 +313,11 @@
     this.results_reset_cleanup()
     @form_field.simulate("change") if typeof Event.simulate is 'function'
     this.results_hide() if @active_field
 
   results_reset_cleanup: ->
-    @current_value = @form_field.value
+    @current_selectedIndex = @form_field.selectedIndex
     deselect_trigger = @selected_item.down("abbr")
     deselect_trigger.remove() if(deselect_trigger)
 
   result_select: (evt) ->
     if @result_highlight
@@ -352,12 +347,12 @@
 
       this.results_hide() unless (evt.metaKey or evt.ctrlKey) and @is_multiple
 
       @search_field.value = ""
 
-      @form_field.simulate("change") if typeof Event.simulate is 'function' && (@is_multiple || @form_field.value != @current_value)
-      @current_value = @form_field.value
+      @form_field.simulate("change") if typeof Event.simulate is 'function' && (@is_multiple || @form_field.selectedIndex != @current_selectedIndex)
+      @current_selectedIndex = @form_field.selectedIndex
 
       this.search_field_scale()
 
   result_activate: (el) ->
     el.addClassName("active-result")
@@ -551,23 +546,17 @@
       document.body.appendChild(div)
 
       w = Element.measure(div, 'width') + 25
       div.remove()
 
+      @f_width = @container.getWidth() unless @f_width
+
       if( w > @f_width-10 )
         w = @f_width - 10
 
       @search_field.setStyle({'width': w + 'px'})
 
-      dd_top = @container.getHeight()
-      @dropdown.setStyle({"top":  dd_top + "px"})
-
 root.Chosen = Chosen
-
-# Prototype does not support version numbers so we add it ourselves
-if Prototype.Browser.IE
-  if /MSIE (\d+\.\d+);/.test(navigator.userAgent)
-    Prototype.BrowserFeatures['Version'] = new Number(RegExp.$1);
 
 
 get_side_border_padding = (elmt) ->
   layout = new Element.Layout(elmt)
   side_border_padding = layout.get("border-left") + layout.get("border-right") + layout.get("padding-left") + layout.get("padding-right")