From 40c63fc35028e1278015819c265a418d473be30a Mon Sep 17 00:00:00 2001
From: Koen Punt <koen@koenpunt.nl>
Date: Sat, 15 Oct 2016 14:12:39 +0200
Subject: [PATCH] move html templates to abstract class

remove inline style from search input field
---
 coffee/chosen.jquery.coffee       | 12 +++++------
 coffee/chosen.proto.coffee        | 15 +++++++++-----
 coffee/lib/abstract-chosen.coffee | 33 +++++++++++++++++++++++++++++++
 sass/chosen.scss                  |  2 ++
 4 files changed, 51 insertions(+), 11 deletions(-)

diff --git a/coffee/chosen.jquery.coffee b/coffee/chosen.jquery.coffee
index ca120099268..2175eb45603 100644
--- 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
index 8596e52a9d9..d42a7a0cbcd 100644
--- 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
index ba20c3bce7b..102b4ee9234 100644
--- 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
index 9131cb6b2a3..ac0603ee5d1 100644
--- 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 {