move html templates to abstract class

remove inline style from search input field
harvesthq · Oct 15, 2016 · 40c63fc · 40c63fc
1 parent 8906335
commit 40c63fc
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 11 deletions.
diff --git a/coffee/chosen.jquery.coffee b/coffee/chosen.jquery.coffee
@@ -33,17 +33,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 = ($ "<div />", container_props)
 
+    # CSP without 'unsafe-inline' doesn't allow setting the style attribute directly
+    @container.width this.container_width()
+
     if @is_multiple
-      @container.html '<ul class="chosen-choices"><li class="search-field"><input type="text" value="' + @default_text + '" class="default" autocomplete="off" style="width:25px;" /></li></ul><div class="chosen-drop"><ul class="chosen-results"></ul></div>'
+      @container.html this.get_multi_template()
     else
-      @container.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 type="text" autocomplete="off" /></div><ul class="chosen-results"></ul></div>'
+      @container.html this.get_single_template()
 
     @form_field_jq.hide().after @container
     @dropdown = @container.find('div.chosen-drop').first()
@@ -421,9 +423,7 @@ class Chosen extends AbstractChosen
     this.result_do_highlight do_high if do_high?
 
   no_results: (terms) ->
-    no_results_html = $('<li class="no-results">' + @results_none_found + ' "<span></span>"</li>')
-    no_results_html.find("span").first().html(terms)
-
+    no_results_html = this.get_no_results_template(terms)
     @search_results.append no_results_html
     @form_field_jq.trigger("chosen:no_results", {chosen:this})
 

diff --git a/coffee/chosen.proto.coffee b/coffee/chosen.proto.coffee
@@ -7,9 +7,7 @@ class @Chosen extends AbstractChosen
     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>')
+    @no_results_temp = new Template(this.get_no_results_template('#{terms}'))
 
   set_up_html: ->
     container_classes = ["chosen-container"]
@@ -19,12 +17,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_template()
+    else
+      @container.update this.get_single_template()
 
     @form_field.hide().insert({ after: @container })
     @dropdown = @container.down('div.chosen-drop')

diff --git a/coffee/lib/abstract-chosen.coffee b/coffee/lib/abstract-chosen.coffee
@@ -326,6 +326,39 @@ class AbstractChosen
     tmp.appendChild(element)
     tmp.innerHTML
 
+  get_single_template: ->
+    """
+      <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_template: ->
+    """
+      <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_template: (terms) ->
+    """
+      <li class="no-results">
+        #{@results_none_found} <span>#{terms}</span>
+      </li>
+    """
+
   # class methods and variables ============================================================
 
   @browser_is_supported: ->

diff --git a/sass/chosen.scss b/sass/chosen.scss
@@ -115,6 +115,7 @@ $chosen-sprite-retina: url('chosen-sprite@2x.png') !default;
     margin: 0;
     padding: 3px 4px;
     white-space: nowrap;
+
     input[type="text"] {
       margin: 1px 0;
       padding: 4px 20px 4px 5px;
@@ -228,6 +229,7 @@ $chosen-sprite-retina: url('chosen-sprite@2x.png') !default;
         font-family: sans-serif;
         line-height: normal;
         border-radius: 0;
+        width: 25px;
       }
     }
     &.search-choice {