chosen-rails 1.5.2 → 1.10.0

data/vendor/assets/javascripts/chosen.proto.coffee

@@ -2,15 +2,6 @@ class @Chosen extends AbstractChosen
 
   setup: ->
     @current_selectedIndex = @form_field.selectedIndex
-    @is_rtl = @form_field.hasClassName "chosen-rtl"
-
-  set_default_values: ->
-    super()
-
-    # HTML Templates
-    @single_temp = new Template('<a class="chosen-single chosen-default"><span>#{default}</span><div><b></b></div></a><div class="chosen-drop"><div class="chosen-search"><input type="text" autocomplete="off" /></div><ul class="chosen-results"></ul></div>')
-    @multi_temp = new Template('<ul class="chosen-choices"><li class="search-field"><input type="text" value="#{default}" class="default" autocomplete="off" style="width:25px;" /></li></ul><div class="chosen-drop"><ul class="chosen-results"></ul></div>')
-    @no_results_temp = new Template('<li class="no-results">' + @results_none_found + ' "<span>#{terms}</span>"</li>')
 
   set_up_html: ->
     container_classes = ["chosen-container"]
@@ -20,12 +11,19 @@ class @Chosen extends AbstractChosen
 
     container_props =
       'class': container_classes.join ' '
-      'style': "width: #{this.container_width()};"
       'title': @form_field.title
 
     container_props.id = @form_field.id.replace(/[^\w]/g, '_') + "_chosen" if @form_field.id.length
 
-    @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 }) )
+    @container = new Element('div', container_props)
+
+    # CSP without 'unsafe-inline' doesn't allow setting the style attribute directly
+    @container.setStyle(width: this.container_width())
+
+    if @is_multiple
+      @container.update this.get_multi_html()
+    else
+      @container.update this.get_single_html()
 
     @form_field.hide().insert({ after: @container })
     @dropdown = @container.down('div.chosen-drop')
@@ -51,8 +49,8 @@ class @Chosen extends AbstractChosen
     @form_field.fire("chosen:ready", {chosen: this})
 
   register_observers: ->
-    @container.observe "touchstart", (evt) => this.container_mousedown(evt); evt.preventDefault()
-    @container.observe "touchend", (evt) => this.container_mouseup(evt); evt.preventDefault()
+    @container.observe "touchstart", (evt) => this.container_mousedown(evt)
+    @container.observe "touchend", (evt) => this.container_mouseup(evt)
 
     @container.observe "mousedown", (evt) => this.container_mousedown(evt)
     @container.observe "mouseup", (evt) => this.container_mouseup(evt)
@@ -72,7 +70,7 @@ class @Chosen extends AbstractChosen
     @form_field.observe "chosen:updated", (evt) => this.results_update_field(evt)
     @form_field.observe "chosen:activate", (evt) => this.activate_field(evt)
     @form_field.observe "chosen:open", (evt) => this.container_mousedown(evt)
-    @form_field.observe "chosen:close", (evt) => this.input_blur(evt)
+    @form_field.observe "chosen:close", (evt) => this.close_field(evt)
 
     @search_field.observe "blur", (evt) => this.input_blur(evt)
     @search_field.observe "keyup", (evt) => this.keyup_checker(evt)
@@ -89,7 +87,9 @@ class @Chosen extends AbstractChosen
   destroy: ->
     @container.ownerDocument.stopObserving "click", @click_test_action
 
-    @form_field.stopObserving()
+    for event in ['chosen:updated', 'chosen:activate', 'chosen:open', 'chosen:close']
+      @form_field.stopObserving(event)
+
     @container.stopObserving()
     @search_results.stopObserving()
     @search_field.stopObserving()
@@ -109,31 +109,38 @@ class @Chosen extends AbstractChosen
     @form_field.show()
 
   search_field_disabled: ->
-    @is_disabled = @form_field.disabled
-    if(@is_disabled)
+    @is_disabled = @form_field.disabled || @form_field.up('fieldset')?.disabled || false
+
+    if @is_disabled
       @container.addClassName 'chosen-disabled'
-      @search_field.disabled = true
-      @selected_item.stopObserving "focus", @activate_action if !@is_multiple
-      this.close_field()
     else
       @container.removeClassName 'chosen-disabled'
-      @search_field.disabled = false
-      @selected_item.observe "focus", @activate_action if !@is_multiple
+
+    @search_field.disabled = @is_disabled
+
+    unless @is_multiple
+      @selected_item.stopObserving 'focus', this.activate_field
+
+    if @is_disabled
+      this.close_field()
+    else unless @is_multiple
+      @selected_item.observe 'focus', this.activate_field
 
   container_mousedown: (evt) ->
-    if !@is_disabled
-      if evt and evt.type is "mousedown" and not @results_showing
-        evt.stop()
+    return if @is_disabled
 
-      if not (evt? and evt.target.hasClassName "search-choice-close")
-        if not @active_field
-          @search_field.clear() if @is_multiple
-          @container.ownerDocument.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.chosen-single"))
-          this.results_toggle()
+    if evt and evt.type in ['mousedown', 'touchstart'] and not @results_showing
+      evt.preventDefault()
+
+    if not (evt? and evt.target.hasClassName "search-choice-close")
+      if not @active_field
+        @search_field.clear() if @is_multiple
+        @container.ownerDocument.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.chosen-single"))
+        this.results_toggle()
 
-        this.activate_field()
+      this.activate_field()
 
   container_mouseup: (evt) ->
     this.results_reset(evt) if evt.target.nodeName is "ABBR" and not @is_disabled
@@ -159,12 +166,15 @@ class @Chosen extends AbstractChosen
 
     this.show_search_field_default()
     this.search_field_scale()
+    @search_field.blur()
 
   activate_field: ->
+    return if @is_disabled
+
     @container.addClassName "chosen-container-active"
     @active_field = true
 
-    @search_field.value = @search_field.value
+    @search_field.value = this.get_search_field_value()
     @search_field.focus()
 
   test_active_click: (evt) ->
@@ -181,7 +191,7 @@ class @Chosen extends AbstractChosen
 
     if @is_multiple
       @search_choices.select("li.search-choice").invoke("remove")
-    else if not @is_multiple
+    else
       this.single_set_selected_text()
       if @disable_search or @form_field.options.length <= @disable_search_threshold
         @search_field.readOnly = true
@@ -229,7 +239,7 @@ class @Chosen extends AbstractChosen
     @results_showing = true
 
     @search_field.focus()
-    @search_field.value = @search_field.value
+    @search_field.value = this.get_search_field_value()
 
     this.winnow_results()
     @form_field.fire("chosen:showing_dropdown", {chosen: this})
@@ -259,7 +269,7 @@ class @Chosen extends AbstractChosen
       @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()
+      @form_field_label.observe "click", this.label_click_handler
 
   show_search_field_default: ->
     if @is_multiple and this.choices_count() < 1 and not @active_field
@@ -302,9 +312,12 @@ class @Chosen extends AbstractChosen
 
   choice_destroy: (link) ->
     if this.result_deselect link.readAttribute("rel")
-      this.show_search_field_default()
+      if @active_field
+        @search_field.focus()
+      else
+        this.show_search_field_default()
 
-      this.results_hide() if @is_multiple and this.choices_count() > 0 and @search_field.value.length < 1
+      this.results_hide() if @is_multiple and this.choices_count() > 0 and this.get_search_field_value().length < 1
 
       link.up('li').remove()
 
@@ -316,7 +329,7 @@ class @Chosen extends AbstractChosen
     this.single_set_selected_text()
     this.show_search_field_default()
     this.results_reset_cleanup()
-    @form_field.simulate("change") if typeof Event.simulate is 'function'
+    this.trigger_form_field_change()
     this.results_hide() if @active_field
 
   results_reset_cleanup: ->
@@ -351,10 +364,17 @@ class @Chosen extends AbstractChosen
       else
         this.single_set_selected_text(this.choice_label(item))
 
-      this.results_hide() unless (evt.metaKey or evt.ctrlKey) and @is_multiple
-      this.show_search_field_default()
+      if @is_multiple && (!@hide_results_on_select || (evt.metaKey or evt.ctrlKey))
+        if evt.metaKey or evt.ctrlKey
+          this.winnow_results(skip_highlight: true)
+        else
+          @search_field.value = ""
+          this.winnow_results()
+      else
+        this.results_hide()
+        this.show_search_field_default()
 
-      @form_field.simulate("change") if typeof Event.simulate is 'function' && (@is_multiple || @form_field.selectedIndex != @current_selectedIndex)
+      this.trigger_form_field_change() if @is_multiple || @form_field.selectedIndex != @current_selectedIndex
       @current_selectedIndex = @form_field.selectedIndex
 
       evt.preventDefault()
@@ -382,7 +402,7 @@ class @Chosen extends AbstractChosen
       this.result_clear_highlight()
       this.winnow_results() if @results_showing
 
-      @form_field.simulate("change") if typeof Event.simulate is 'function'
+      this.trigger_form_field_change()
       this.search_field_scale()
       return true
     else
@@ -393,8 +413,14 @@ class @Chosen extends AbstractChosen
     @selected_item.down("span").insert { after: "<abbr class=\"search-choice-close\"></abbr>" } unless @selected_item.down("abbr")
     @selected_item.addClassName("chosen-single-with-deselect")
 
+  get_search_field_value: ->
+    @search_field.value
+
   get_search_text: ->
-    @search_field.value.strip().escapeHTML()
+    this.get_search_field_value().strip()
+
+  escape_html: (text) ->
+    text.escapeHTML()
 
   winnow_results_set_highlight: ->
     if not @is_multiple
@@ -406,7 +432,7 @@ class @Chosen extends AbstractChosen
     this.result_do_highlight do_high if do_high?
 
   no_results: (terms) ->
-    @search_results.insert @no_results_temp.evaluate( terms: terms )
+    @search_results.insert this.get_no_results_html(terms)
     @form_field.fire("chosen:no_results", {chosen: this})
 
   no_results_clear: ->
@@ -453,55 +479,45 @@ class @Chosen extends AbstractChosen
     @pending_backstroke.removeClassName("search-choice-focus") if @pending_backstroke
     @pending_backstroke = null
 
-  keydown_checker: (evt) ->
-    stroke = evt.which ? evt.keyCode
-    this.search_field_scale()
-
-    this.clear_backstroke() if stroke != 8 and this.pending_backstroke
-
-    switch stroke
-      when 8
-        @backstroke_length = this.search_field.value.length
-        break
-      when 9
-        this.result_select(evt) if this.results_showing and not @is_multiple
-        @mouse_on_container = false
-        break
-      when 13
-        evt.preventDefault() if this.results_showing
-        break
-      when 32
-        evt.preventDefault() if @disable_search
-        break
-      when 38
-        evt.preventDefault()
-        this.keyup_arrow()
-        break
-      when 40
-        evt.preventDefault()
-        this.keydown_arrow()
-        break
-
   search_field_scale: ->
-    if @is_multiple
-      h = 0
-      w = 0
-
-      style_block = "position:absolute; left: -1000px; top: -1000px; display:none;"
-      styles = ['font-size','font-style', 'font-weight', 'font-family','line-height', 'text-transform', 'letter-spacing']
-
-      for style in styles
-        style_block += style + ":" + @search_field.getStyle(style) + ";"
-
-      div = new Element('div', { 'style' : style_block }).update(@search_field.value.escapeHTML())
-      document.body.appendChild(div)
-
-      w = Element.measure(div, 'width') + 25
-      div.remove()
-
-      f_width = @container.getWidth()
-
-      if( w > f_width-10 )
-        w = f_width - 10
-
-      @search_field.setStyle({'width': w + 'px'})
+    return unless @is_multiple
+
+    style_block =
+      position: 'absolute'
+      left: '-1000px'
+      top: '-1000px'
+      display: 'none'
+      whiteSpace: 'pre'
+
+    styles = ['fontSize', 'fontStyle', 'fontWeight', 'fontFamily', 'lineHeight', 'textTransform', 'letterSpacing']
+
+    for style in styles
+      style_block[style] = @search_field.getStyle(style)
+
+    div = new Element('div').update(this.escape_html(this.get_search_field_value()))
+    # CSP without 'unsafe-inline' doesn't allow setting the style attribute directly
+    div.setStyle(style_block)
+    document.body.appendChild(div)
+
+    width = div.measure('width') + 25
+    div.remove()
+
+    if container_width = @container.getWidth()
+      width = Math.min(container_width - 10, width)
+
+    @search_field.setStyle(width: width + 'px')
+
+  trigger_form_field_change:  ->
+    triggerHtmlEvent @form_field, 'input'
+    triggerHtmlEvent @form_field, 'change'
+
+  triggerHtmlEvent = (element, eventType) ->
+    if element.dispatchEvent  # Modern way:
+      try
+        evt = new Event(eventType, bubbles: true, cancelable: true)
+      catch
+        evt = document.createEvent('HTMLEvents')
+        evt.initEvent(eventType, true, true);
+      element.dispatchEvent(evt)
+    else # Old IE:
+      element.fireEvent("on#{eventType}", document.createEventObject());

data/vendor/assets/javascripts/lib/abstract-chosen.coffee

@@ -20,6 +20,7 @@ class AbstractChosen
     @mouse_on_container = false
     @results_showing = false
     @result_highlighted = null
+    @is_rtl = @options.rtl || /\bchosen-rtl\b/.test(@form_field.className)
     @allow_single_deselect = if @options.allow_single_deselect? and @form_field.options[0]? and @form_field.options[0].text is "" then @options.allow_single_deselect else false
     @disable_search_threshold = @options.disable_search_threshold || 0
     @disable_search = @options.disable_search || false
@@ -34,6 +35,7 @@ class AbstractChosen
     @include_group_label_in_selected = @options.include_group_label_in_selected || false
     @max_shown_results = @options.max_shown_results || Number.POSITIVE_INFINITY
     @case_sensitive_search = @options.case_sensitive_search || false
+    @hide_results_on_select = if @options.hide_results_on_select? then @options.hide_results_on_select else true
 
   set_default_text: ->
     if @form_field.getAttribute("data-placeholder")
@@ -43,11 +45,13 @@ class AbstractChosen
     else
       @default_text = @options.placeholder_text_single || @options.placeholder_text || AbstractChosen.default_single_text
 
+    @default_text = this.escape_html(@default_text)
+
     @results_none_found = @form_field.getAttribute("data-no_results_text") || @options.no_results_text || AbstractChosen.default_no_result_text
 
   choice_label: (item) ->
     if @include_group_label_in_selected and item.group_label?
-      "<b class='group-name'>#{item.group_label}</b>#{item.html}"
+      "<b class='group-name'>#{this.escape_html(item.group_label)}</b>#{item.html}"
     else
       item.html
 
@@ -65,6 +69,12 @@ class AbstractChosen
       @active_field = false
       setTimeout (=> this.blur_test()), 100
 
+  label_click_handler: (evt) =>
+    if @is_multiple
+      this.container_mousedown(evt)
+    else
+      this.activate_field()
+
   results_option_build: (options) ->
     content = ''
     shown_results = 0
@@ -104,9 +114,9 @@ class AbstractChosen
 
     option_el = document.createElement("li")
     option_el.className = classes.join(" ")
-    option_el.style.cssText = option.style
+    option_el.style.cssText = option.style if option.style
     option_el.setAttribute("data-option-array-index", option.array_index)
-    option_el.innerHTML = option.search_text
+    option_el.innerHTML = option.highlighted_html or option.html
     option_el.title = option.title if option.title
 
     this.outerHTML(option_el)
@@ -121,7 +131,7 @@ class AbstractChosen
 
     group_el = document.createElement("li")
     group_el.className = classes.join(" ")
-    group_el.innerHTML = group.search_text
+    group_el.innerHTML = group.highlighted_html or this.escape_html(group.label)
     group_el.title = group.title if group.title
 
     this.outerHTML(group_el)
@@ -149,20 +159,21 @@ class AbstractChosen
     else
       this.results_show()
 
-  winnow_results: ->
+  winnow_results: (options) ->
     this.no_results_clear()
 
     results = 0
 
-    searchText = this.get_search_text()
-    escapedSearchText = searchText.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&")
-    zregex = new RegExp(escapedSearchText, 'i')
-    regex = this.get_search_regex(escapedSearchText)
+    query = this.get_search_text()
+    escapedQuery = query.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&")
+    regex = this.get_search_regex(escapedQuery)
 
     for option in @results_data
 
       option.search_match = false
       results_group = null
+      search_match = null
+      option.highlighted_html = ''
 
       if this.include_option_in_results(option)
 
@@ -175,17 +186,21 @@ class AbstractChosen
           results += 1 if results_group.active_options is 0 and results_group.search_match
           results_group.active_options += 1
 
-        option.search_text = if option.group then option.label else option.html
+        text = if option.group then option.label else option.text
 
         unless option.group and not @group_search
-          option.search_match = this.search_string_match(option.search_text, regex)
+          search_match = this.search_string_match(text, regex)
+          option.search_match = search_match?
+
           results += 1 if option.search_match and not option.group
 
           if option.search_match
-            if searchText.length
-              startpos = option.search_text.search zregex
-              text = option.search_text.substr(0, startpos + searchText.length) + '</em>' + option.search_text.substr(startpos + searchText.length)
-              option.search_text = text.substr(0, startpos) + '<em>' + text.substr(startpos)
+            if query.length
+              startpos = search_match.index
+              prefix = text.slice(0, startpos)
+              fix    = text.slice(startpos, startpos + query.length)
+              suffix = text.slice(startpos + query.length)
+              option.highlighted_html = "#{this.escape_html(prefix)}<em>#{this.escape_html(fix)}</em>#{this.escape_html(suffix)}"
 
             results_group.group_match = true if results_group?
 
@@ -194,28 +209,23 @@ class AbstractChosen
 
     this.result_clear_highlight()
 
-    if results < 1 and searchText.length
+    if results < 1 and query.length
       this.update_results_content ""
-      this.no_results searchText
+      this.no_results query
     else
       this.update_results_content this.results_option_build()
-      this.winnow_results_set_highlight()
+      this.winnow_results_set_highlight() unless options?.skip_highlight
 
   get_search_regex: (escaped_search_string) ->
-    regex_anchor = if @search_contains then "" else "^"
+    regex_string = if @search_contains then escaped_search_string else "(^|\\s|\\b)#{escaped_search_string}[^\\s]*"
+    regex_string = "^#{regex_string}" unless @enable_split_word_search or @search_contains
     regex_flag = if @case_sensitive_search then "" else "i"
-    new RegExp(regex_anchor + escaped_search_string, regex_flag)
+    new RegExp(regex_string, regex_flag)
 
   search_string_match: (search_string, regex) ->
-    if regex.test search_string
-      return true
-    else if @enable_split_word_search and (search_string.indexOf(" ") >= 0 or search_string.indexOf("[") == 0)
-      #TODO: replace this substitution of /\[\]/ with a list of characters to skip.
-      parts = search_string.replace(/\[|\]/g, "").split(" ")
-      if parts.length
-        for part in parts
-          if regex.test part
-            return true
+    match = regex.exec(search_string)
+    match.index += 1 if !@search_contains && match?[1] # make up for lack of lookbehind operator in regex
+    match
 
   choices_count: ->
     return @selected_option_count if @selected_option_count?
@@ -228,30 +238,68 @@ class AbstractChosen
 
   choices_click: (evt) ->
     evt.preventDefault()
+    this.activate_field()
     this.results_show() unless @results_showing or @is_disabled
 
+  keydown_checker: (evt) ->
+    stroke = evt.which ? evt.keyCode
+    this.search_field_scale()
+
+    this.clear_backstroke() if stroke != 8 and @pending_backstroke
+
+    switch stroke
+      when 8 # backspace
+        @backstroke_length = this.get_search_field_value().length
+        break
+      when 9 # tab
+        this.result_select(evt) if @results_showing and not @is_multiple
+        @mouse_on_container = false
+        break
+      when 13 # enter
+        evt.preventDefault() if @results_showing
+        break
+      when 27 # escape
+        evt.preventDefault() if @results_showing
+        break
+      when 32 # space
+        evt.preventDefault() if @disable_search
+        break
+      when 38 # up arrow
+        evt.preventDefault()
+        this.keyup_arrow()
+        break
+      when 40 # down arrow
+        evt.preventDefault()
+        this.keydown_arrow()
+        break
+
   keyup_checker: (evt) ->
     stroke = evt.which ? evt.keyCode
     this.search_field_scale()
 
     switch stroke
-      when 8
+      when 8 # backspace
         if @is_multiple and @backstroke_length < 1 and this.choices_count() > 0
           this.keydown_backstroke()
         else if not @pending_backstroke
           this.result_clear_highlight()
           this.results_search()
-      when 13
+        break
+      when 13 # enter
         evt.preventDefault()
         this.result_select(evt) if this.results_showing
-      when 27
+        break
+      when 27 # escape
         this.results_hide() if @results_showing
-        return true
-      when 9, 38, 40, 16, 91, 17, 18
+        break
+      when 9, 16, 17, 18, 38, 40, 91
         # don't do anything on these keys
-      else this.results_search()
+      else
+        this.results_search()
+        break
 
   clipboard_event_checker: (evt) ->
+    return if @is_disabled
     setTimeout (=> this.results_search()), 50
 
   container_width: ->
@@ -281,6 +329,39 @@ class AbstractChosen
     tmp.appendChild(element)
     tmp.innerHTML
 
+  get_single_html: ->
+    """
+      <a class="chosen-single chosen-default">
+        <span>#{@default_text}</span>
+        <div><b></b></div>
+      </a>
+      <div class="chosen-drop">
+        <div class="chosen-search">
+          <input class="chosen-search-input" type="text" autocomplete="off" />
+        </div>
+        <ul class="chosen-results"></ul>
+      </div>
+    """
+
+  get_multi_html: ->
+    """
+      <ul class="chosen-choices">
+        <li class="search-field">
+          <input class="chosen-search-input" type="text" autocomplete="off" value="#{@default_text}" />
+        </li>
+      </ul>
+      <div class="chosen-drop">
+        <ul class="chosen-results"></ul>
+      </div>
+    """
+
+  get_no_results_html: (terms) ->
+    """
+      <li class="no-results">
+        #{@results_none_found} <span>#{this.escape_html(terms)}</span>
+      </li>
+    """
+
   # class methods and variables ============================================================
 
   @browser_is_supported: ->

data/vendor/assets/javascripts/lib/select-parser.coffee

@@ -15,7 +15,7 @@ class SelectParser
     @parsed.push
       array_index: group_position
       group: true
-      label: this.escapeExpression(group.label)
+      label: group.label
       title: group.title if group.title
       children: 0
       disabled: group.disabled,
@@ -47,21 +47,6 @@ class SelectParser
           empty: true
       @options_index += 1
 
-  escapeExpression: (text) ->
-    if not text? or text is false
-      return ""
-    unless /[\&\<\>\"\'\`]/.test(text)
-      return text
-    map =
-      "<": "&lt;"
-      ">": "&gt;"
-      '"': "&quot;"
-      "'": "&#x27;"
-      "`": "&#x60;"
-    unsafe_chars = /&(?!\w+;)|[\<\>\"\'\`]/g
-    text.replace unsafe_chars, (chr) ->
-      map[chr] || "&amp;"
-
 SelectParser.select_to_array = (select) ->
   parser = new SelectParser()
   parser.add_node( child ) for child in select.childNodes