Merge pull request #1779 from stefanb/tag-colour-preview

Added color preview box in tag browser sidebar

diff --git a/app/assets/javascripts/index.js b/app/assets/javascripts/index.js
index 2c7d70e11ad99603056546396c017cc7e1711ddc..039cc0ef66b5ccb4c6da47ec98ae0c21dcd0e1d8 100644 (file)
--- a/app/assets/javascripts/index.js
+++ b/app/assets/javascripts/index.js
@@ -347,6 +347,10 @@ $(document).ready(function () {
           });
         }
       });
+
+      $(".colour-preview-box").each(function () {
+        $(this).css("background-color", $(this).data("colour"));
+      });
     }
 
     page.unload = function () {

diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss
index d3488fe73766cc15e3f04bbdc8fa9d604223d3dd..40c5eaa2a8e91f4362b4852ea389bfefa1085608 100644 (file)
--- a/app/assets/stylesheets/common.scss
+++ b/app/assets/stylesheets/common.scss
@@ -1230,6 +1230,15 @@ tr.turn:hover {
       border-left: 1px solid #ddd;
       background-color: #fff;
     }
+
+    .colour-preview-box {
+      float: right;
+      width: 12px;
+      height: 12px;
+      margin: 4px 0px;
+      border: 1px solid rgba(0, 0, 0, .1); 
+      // add color via inline css on element: background-color: <tag value>;
+    }
   }
 
   .warning {

diff --git a/app/helpers/browse_tags_helper.rb b/app/helpers/browse_tags_helper.rb
index 90e75e90a4766e0b8d366b65bec11b5a053da9a9..375300e14cb67527b0e466d0ec91b6b87bce304a 100644 (file)
--- a/app/helpers/browse_tags_helper.rb
+++ b/app/helpers/browse_tags_helper.rb
@@ -25,6 +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, "; ")
+    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
@@ -133,4 +135,25 @@ 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

diff --git a/config/locales/en.yml b/config/locales/en.yml
index e8a36f945f7866ebe73fcc726183822a813122c1..c6ed0f628f7276534428bec1b66aa0ddaa5a3b43 100644 (file)
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -279,6 +279,7 @@ en:
       wikidata_link: "The %{page} item on Wikidata"
       wikipedia_link: "The %{page} article on Wikipedia"
       telephone_link: "Call %{phone_number}"
+      colour_preview: "Colour %{colour_value} preview"
     note:
       title: "Note: %{id}"
       new_note: "New Note"

diff --git a/test/helpers/browse_tags_helper_test.rb b/test/helpers/browse_tags_helper_test.rb
index 195bd69de0185fa852a30ccaa0ce9e8979c3f527..222c7c6692678af91a4a8eedfd5ba3335d039cba 100644 (file)
--- a/test/helpers/browse_tags_helper_test.rb
+++ b/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