Colour preview moved into new browse_tags_helper

In 74d2c4336b browse_helper was split int two

app/helpers/browse_tags_helper.rb

@@ -25,7 +25,8 @@ module BrowseTagsHelper
         link_to(h(p[:phone_number]), p[:url], :title => t("browse.tag_details.telephone_link", :phone_number => p[:phone_number]))
       end
       safe_join(phones, "; ")
-    else
+    elsif colour_value = colour_preview(key, 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
   end
@@ -133,4 +134,16 @@ module BrowseTagsHelper
     end
     nil
   end
+
+  def colour_preview(key, value)
+    return nil unless key =~ /^(?>.+:)?colour$/ && !value.nil? # see discussion at https://github.com/openstreetmap/openstreetmap-website/pull/1779
+    # does value look like a colour? ( 3 or 6 digit hex code or w3c colour name)
+    w3c_colors =
+      %w[aliceblue antiquewhite aqua aquamarine azure beige bisque black blanchedalmond blue blueviolet brown burlywood cadetblue chartreuse chocolate coral cornflowerblue cornsilk crimson cyan darkblue darkcyan darkgoldenrod darkgray darkgrey darkgreen darkkhaki darkmagenta darkolivegreen darkorange darkorchid darkred darksalmon darkseagreen darkslateblue darkslategray
+         darkslategrey darkturquoise darkviolet deeppink deepskyblue dimgray dimgrey dodgerblue firebrick floralwhite forestgreen fuchsia gainsboro ghostwhite gold goldenrod gray grey green greenyellow honeydew hotpink indianred indigo ivory khaki lavender lavenderblush lawngreen lemonchiffon lightblue lightcoral lightcyan lightgoldenrodyellow lightgray lightgrey lightgreen
+         lightpink lightsalmon lightseagreen lightskyblue lightslategray lightslategrey lightsteelblue lightyellow lime limegreen linen magenta maroon mediumaquamarine mediumblue mediumorchid mediumpurple mediumseagreen mediumslateblue mediumspringgreen mediumturquoise mediumvioletred midnightblue mintcream mistyrose moccasin navajowhite navy oldlace olive olivedrab orange
+         orangered orchid palegoldenrod palegreen paleturquoise palevioletred papayawhip peachpuff peru pink plum powderblue purple red rosybrown royalblue saddlebrown salmon sandybrown seagreen seashell sienna silver skyblue slateblue slategray slategrey snow springgreen steelblue tan teal thistle tomato turquoise violet wheat white whitesmoke yellow yellowgreen]
+    return nil unless value =~ /^#([0-9a-fA-F]{3}){1,2}$/ || w3c_colors.include?(value.downcase)
+    value
+  end
 end

test/helpers/browse_tags_helper_test.rb

@@ -47,6 +47,9 @@ class BrowseTagsHelperTest < ActionView::TestCase
 
     html = format_value("name:etymology:wikidata", "Q123")
     assert_dom_equal "<a title=\"The Q123 item on Wikidata\" href=\"//www.wikidata.org/entity/Q123?uselang=en\">Q123</a>", html
+
+    html = format_value("colour", "#f00")
+    assert_dom_equal %(<span class="colour-preview-box" data-colour="#f00" title="Colour #f00 preview"></span>#f00), html
   end
 
   def test_wiki_link
@@ -260,4 +263,106 @@ class BrowseTagsHelperTest < ActionView::TestCase
     assert_equal "+22(33)4455.66.7788", links[1][:phone_number]
     assert_equal "tel:+22(33)4455.66.7788", links[1][:url]
   end
+
+  def test_colour_preview
+    # basic positive tests
+    colour = colour_preview("colour", "red")
+    assert_equal "red", colour
+
+    colour = colour_preview("colour", "Red")
+    assert_equal "Red", colour
+
+    colour = colour_preview("colour", "darkRed")
+    assert_equal "darkRed", colour
+
+    colour = colour_preview("colour", "#f00")
+    assert_equal "#f00", colour
+
+    colour = colour_preview("colour", "#fF0000")
+    assert_equal "#fF0000", colour
+
+    # other tag variants:
+    colour = colour_preview("building:colour", "#f00")
+    assert_equal "#f00", colour
+
+    colour = colour_preview("ref:colour", "#f00")
+    assert_equal "#f00", colour
+
+    colour = colour_preview("int_ref:colour", "green")
+    assert_equal "green", colour
+
+    colour = colour_preview("roof:colour", "#f00")
+    assert_equal "#f00", colour
+
+    colour = colour_preview("seamark:beacon_lateral:colour", "#f00")
+    assert_equal "#f00", colour
+
+    # negative tests:
+    colour = colour_preview("colour", "")
+    assert_nil colour
+
+    colour = colour_preview("colour", "   ")
+    assert_nil colour
+
+    colour = colour_preview("colour", nil)
+    assert_nil colour
+
+    # ignore US spelling variant
+    colour = colour_preview("color", "red")
+    assert_nil colour
+
+    # irrelevant tag names
+    colour = colour_preview("building", "red")
+    assert_nil colour
+
+    colour = colour_preview("ref:colour_no", "red")
+    assert_nil colour
+
+    colour = colour_preview("ref:colour-bg", "red")
+    assert_nil colour
+
+    colour = colour_preview("int_ref", "red")
+    assert_nil colour
+
+    # invalid hex codes
+    colour = colour_preview("colour", "#")
+    assert_nil colour
+
+    colour = colour_preview("colour", "#ff")
+    assert_nil colour
+
+    colour = colour_preview("colour", "#ffff")
+    assert_nil colour
+
+    colour = colour_preview("colour", "#fffffff")
+    assert_nil colour
+
+    colour = colour_preview("colour", "#ggg")
+    assert_nil colour
+
+    colour = colour_preview("colour", "#ff 00 00")
+    assert_nil colour
+
+    # invalid w3c color names:
+    colour = colour_preview("colour", "r")
+    assert_nil colour
+
+    colour = colour_preview("colour", "ffffff")
+    assert_nil colour
+
+    colour = colour_preview("colour", "f00")
+    assert_nil colour
+
+    colour = colour_preview("colour", "xxxred")
+    assert_nil colour
+
+    colour = colour_preview("colour", "dark red")
+    assert_nil colour
+
+    colour = colour_preview("colour", "dark_red")
+    assert_nil colour
+
+    colour = colour_preview("colour", "ADarkDummyLongColourNameWithAPurpleUndertone")
+    assert_nil colour
+  end
 end