Added ability to flip colors on a map [Finishes #4899]

app/models/map.rb

@@ -1,6 +1,7 @@
 class Map < ActiveRecord::Base
   attr_accessor :extent
   attr_accessor :color_palette
+  attr_accessor :flip_colors
 
   validates_presence_of :title, :original_csv_data
   validates_presence_of :location_column_name, :location_column_type
@@ -12,6 +13,10 @@ def provider
     "Acetate" # "OpenStreetMap (Road)"  "Yahoo Road", "Google Hybrid", "Google Terrain"
   end
 
+  def flip_colors?
+    flip_colors.present?
+  end
+
   def to_param
     slug = title.gsub(/\W/, " ").strip.gsub(/\s+/, "-").downcase if title
     [token, slug].compact.join("-")

app/models/map_observer.rb

@@ -69,7 +69,7 @@ def map_extent(map)
 
   def layer_details(map)
     return if map.color_palette.blank?
-    styles = MapStyles.choropleth(map.color_palette)
+    styles = MapStyles.choropleth(map.color_palette, map.flip_colors?)
     return if styles.nil?
     styles[:fill][:selectedAttribute] = safe(map.data_column_name)
     {

app/stylesheets/_maps.sass

@@ -224,10 +224,19 @@ $map-control-active-color: rgb(47, 153, 102)
         .dialog
           width: 180px
           padding: 14px 0 0 14px
+          h3
+            font-size: 11px
+            line-height: 11px
+            margin: 0 28px 14px 0
+            font-weight: bold
+            a.flip-colors
+              float: right
+              font-weight: normal
+              color: $map-control-active-color
+              text-decoration: underline
           .white
             width: 120px
-          .extra
-            +clearfix
+            float: left
         .palette
           width: 16px
           float: left

app/views/maps/_color_palettes.html.haml

@@ -1,3 +1,6 @@
+%h3
+  = link_to "Flip", "#", :class => "flip-colors"
+  Colors
 .white
   - MapStyles::WHITE_PALETTES.each do |name, colors|
     = render :partial => "color_palette", :locals => { :name => name, :colors => colors }

app/views/maps/show.html.haml

@@ -34,6 +34,7 @@
           = form_for @map do |f|
             = f.hidden_field :extent
             = f.hidden_field :color_palette
+            = f.hidden_field :flip_colors
             %button{ :type => "submit" } Save Changes
 
 = javascript_tag do

lib/map_styles.rb

@@ -26,15 +26,15 @@ def self.random_choropleth
     choropleth(random_color_palette)
   end
 
-  def self.choropleth(color_palette)
+  def self.choropleth(color_palette, flip_colors = false)
     colors = COLOR_PALETTES[color_palette]
     {
       :type => "CHOROPLETH",
       :fill => {
         :opacity            => 0.75,
         :classificationType => "Equal Interval",
         :categories         => colors.length,
-        :colors             => colors,
+        :colors             => flip_colors ? colors.reverse : colors,
       }
     }
   end

public/javascripts/application.js

@@ -40,8 +40,12 @@ function initializeMapWhenReady() {
     // before sniffing for extents
     // map.onMapReady(function() { 
       $("#maps.show .palette").changeMapStyleOnClick(map);
+      $("#maps.show .flip-colors").flipColors(map);
       $("#maps.show #save-control form").prepareMapUpdate(map);
       $(map).handleMapChanges();
+      $("#maps.show #style-control button").click(function() {
+        $("#maps.show .palette").guessMapStyle(map);
+      });
       setTimeout(function() { $(map).sniffExtentChanges(); }, 5000);
     // });
   }                    
@@ -265,18 +269,61 @@ $.fn.manageControls = function() {
   });
 };
 
+function updateMapColors(map) {
+  var palette = $("#maps.show .palette.active");
+  var colors = $.parseJSON(palette.attr("data-palette-colors"));
+  var style = map.getLayer(0).styles;
+  style.fill.colors = isFlipColors() ? colors.reverse() : colors;
+  map.setLayerStyle(0, style);
+  $(map).trigger("map-changed");
+}
+
+function setMapFormStyleValues(map, palette, flipColors) {
+  $(palette).addClass("active").siblings().removeClass("active");
+  var name = $(palette).attr("data-palette-name");
+  $("#map_color_palette").val(name);
+  $("#map_flip_colors").val(flipColors ? "1" : "");
+}
+
+function isFlipColors() {
+  return !!parseInt($("#map_flip_colors").val());
+}
+
+
+$.fn.guessMapStyle = function(map) {
+  if (!map.getLayer(0)) { return this; }
+  return this.each(function() {
+    var style = map.getLayer(0).styles;
+    var palette = $(this);
+    var colors = $.parseJSON(palette.attr("data-palette-colors"));
+    var firstColor = style.fill.color;
+    var firstMatch = firstColor == colors[0];
+    var lastMatch  = firstColor == colors[colors.length-1];
+    if (firstMatch || lastMatch) {
+      setMapFormStyleValues(map, palette, false);
+      if (lastMatch) { $("#maps.show .flip-colors").click(); }; 
+    }
+  });
+};
+
 $.fn.changeMapStyleOnClick = function(map) {
   return this.click(function() {
     var palette = $(this);
-    var colors = $.parseJSON(palette.attr("data-palette-colors"));
-    var style = map.getLayer(0).styles;
-    style.fill.colors = colors;
-    map.setLayerStyle(0, style);
-    palette.addClass("active").siblings().removeClass("active");
+    setMapFormStyleValues(map, palette, isFlipColors());
+    updateMapColors(map);
+  });
+};
 
-    var name = palette.attr("data-palette-name");
-    $("#map_color_palette").val(name);
-    $(map).trigger("map-changed");
+$.fn.flipColors = function(map) {
+  return this.click(function(event) { 
+    event.preventDefault();
+    $("#maps.show .palette").each(function() {
+      var colors = $(this).find("tr");
+      var parent = colors.parent();
+      parent.html(colors.reverse());
+    });
+    $("#map_flip_colors").val(isFlipColors() ? "" : "1");
+    updateMapColors(map);
   });
 };
 
@@ -444,6 +491,9 @@ $.fn.valueChangeObserver = function(interval, valueFn, callback) {
   });
 };
 
+// Reverse a jQuery wrapped set
+$.fn.reverse = [].reverse;
+
 }(jQuery));
 
 // protection against accidental left-over console.log statements

test/functional/maps_controller_test.rb

@@ -184,7 +184,7 @@ class MapsControllerTest < ActionController::TestCase
     context "and given a session owning that map" do
       setup { session[:owned_maps] = [@map.id] }
 
-      on_put :update, lambda {{ :id => @map.to_param, :map => { :extent => "1,2,3,4", :color_palette => "diverging" } }} do
+      on_put :update, lambda {{ :id => @map.to_param, :map => { :extent => "1,2,3,4", :color_palette => "diverging", :flip_colors => "1" } }} do
         should assign_to :map
         should redirect_to("map path") { @map }
       end