Using javascript and data attribute instead of inline css

diff --git a/app/assets/javascripts/index.js b/app/assets/javascripts/index.js
index 4ea643b261e68b676ae640c9e01cc9e24ba48449..b6fdaea398b4c5718d105c396efb2bc2d539b115 100644 (file)
--- a/app/assets/javascripts/index.js
+++ b/app/assets/javascripts/index.js
@@ -334,6 +334,11 @@ $(document).ready(function () {
           });
         }
       });
+      
+      $('.colour-preview-box').each(function (index, value) {
+        console.log($(this));
+        $(this).css("background-color", $(this).data("colour"));
+      });
     }
 
     page.unload = function() {

diff --git a/app/helpers/browse_helper.rb b/app/helpers/browse_helper.rb
index 2f07fd2ebe3278e45b05b1759458ea34551e4dc5..c3e013650e7dac0b2a22c16f97858d9a95ddbace 100644 (file)
--- a/app/helpers/browse_helper.rb
+++ b/app/helpers/browse_helper.rb
@@ -77,7 +77,7 @@ module BrowseHelper
     elsif url = telephone_link(key, value)
       link_to h(value), url, :title => t("browse.tag_details.telephone_link", :phone_number => value)
     elsif colour_value = colour_preview(key, value)
-      content_tag(:span, "", :class => "colour-preview-box", :style => "background-color:#{colour_value}", :title => t("browse.tag_details.colour_preview", :colour_value => colour_value)) + colour_value
+      content_tag(:span, "", :class => "colour-preview-box", :"data-colour" => colour_value, :title => t("browse.tag_details.colour_preview", :colour_value => colour_value)) + colour_value
     else
       linkify h(value)
     end

diff --git a/test/helpers/browse_helper_test.rb b/test/helpers/browse_helper_test.rb
index 2bfdf5cb1262974d1e66be49925902d6a23d6249..89bd1566f9555489b1087e84a34ad3c4f9d1087e 100644 (file)
--- a/test/helpers/browse_helper_test.rb
+++ b/test/helpers/browse_helper_test.rb
@@ -136,7 +136,7 @@ class BrowseHelperTest < ActionView::TestCase
     assert_dom_equal "<a title=\"The Q123 item on Wikidata\" href=\"//www.wikidata.org/wiki/Q123?uselang=en\">Q123</a>", html
 
     html = format_value("colour", "#f00")
-    assert_dom_equal %(<span class="colour-preview-box" style="background-color:#f00" title="Colour #f00 preview"></span>#f00), html
+    assert_dom_equal %(<span class="colour-preview-box" data-colour="#f00" title="Colour #f00 preview"></span>#f00), html
   end
 
   def test_icon_tags