From aa39179777f3b83734ee34cacd915e1e9a0139b0 Mon Sep 17 00:00:00 2001
From: =?utf8?q?=C5=A0tefan=20Baebler?= <stefan.baebler@gmail.com>
Date: Tue, 20 Mar 2018 01:37:18 +0100
Subject: [PATCH] Using javascript and data attribute instead of inline css

---
 app/assets/javascripts/index.js    | 5 +++++
 app/helpers/browse_helper.rb       | 2 +-
 test/helpers/browse_helper_test.rb | 2 +-
 3 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/app/assets/javascripts/index.js b/app/assets/javascripts/index.js
index 4ea643b26..b6fdaea39 100644
--- 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 2f07fd2eb..c3e013650 100644
--- 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 2bfdf5cb1..89bd1566f 100644
--- 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
-- 
2.39.5