Merge remote-tracking branch 'openstreetmap/pull/1240'

app/assets/javascripts/index.js

@@ -161,17 +161,26 @@ $(document).ready(function () {
       map.getLayersCode(),
       map._object);
 
-    $.removeCookie("_osm_location");
+    $.removeCookie('_osm_location');
-    $.cookie("_osm_location", OSM.locationCookie(map), { expires: expiry, path: "/" });
+    $.cookie('_osm_location', OSM.locationCookie(map), { expires: expiry, path: '/' });
   });
 
   if ($.cookie('_osm_welcome') === 'hide') {
     $('.welcome').hide();
   }
 
-  $('.welcome .close').on('click', function() {
+  $('.welcome .close-wrap').on('click', function() {
     $('.welcome').hide();
-    $.cookie("_osm_welcome", 'hide', { expires: expiry });
+    $.cookie('_osm_welcome', 'hide', { expires: expiry });
+  });
+
+  $('#banner .close-wrap').on('click', function(e) {
+    var cookieId = e.target.id;
+    $('#banner').hide();
+    e.preventDefault();
+    if (cookieId) {
+      $.cookie(cookieId, 'hide', { expires: expiry });
+    }
   });
 
   if (OSM.PIWIK) {

app/assets/stylesheets/common.scss

@@ -173,6 +173,7 @@ small, aside {
 .icon.clipboard   { background-position: -160px 0; }
 .icon.link        { background-position: -180px 0; }
 .icon.close       { background-position: -200px 0; }
+.close-wrap:hover .icon.close,
 .icon.close:hover { background-position: -200px -20px; }
 .icon.check       { background-position: -220px 0; }
 .icon.note        { background-position: -240px 0; }
@@ -546,6 +547,13 @@ body.compact {
     background: #fff;
     font-size: 12px;
 
+    > div {
+      position: relative;
+      float: left;
+      clear: both;
+      width: 100%;
+    }
+
     h2 {
       padding: $lineheight $lineheight $lineheight/2;
     }
@@ -556,9 +564,24 @@ body.compact {
       font-size: 13px;
     }
 
+    .close-wrap {
+      cursor: pointer;
+      position: absolute;
+      top: 0;
+      right: 0;
+      width: 60px;
+      height: 60px;
+
+      .icon.close {
+        pointer-events: none;
+        position: absolute;
+        right: 20px;
+        top: 20px;
+      }
+    }
+
     .icon.close {
       float: right;
-      cursor: pointer;
     }
 
     p.error {
@@ -568,25 +591,26 @@ body.compact {
     }
   }
 
-  .welcome {
-    display: none;
-  }
-
   .overlay-sidebar #sidebar {
     position: absolute;
     z-index: 1000;
     height: auto;
-    border-bottom-right-radius: 5px;
     overflow: hidden;
+
+    #banner,
     .welcome {
       display: block;
     }
+
     #sidebar_content {
       display: none;
     }
   }
 
   .welcome {
+    display: none;
+    padding-bottom: 5px;
+
     p {
       padding: $lineheight/2 $lineheight $lineheight;
       font-size: 110%;
@@ -607,6 +631,15 @@ body.compact {
     }
   }
 
+  #banner {
+    display: none;
+
+    img {
+      display: block;
+      width: $sidebarWidth;
+    }
+  }
+
   #map {
     height: 100%;
     overflow: hidden;

app/helpers/banner_helper.rb

@@ -0,0 +1,47 @@
+module BannerHelper
+  def active_banners
+    BANNERS.reject do |_k, v|
+      enddate = v[:enddate]
+      begin
+        parsed = enddate && Date.parse(enddate)
+      rescue
+        parsed = nil
+      end
+      parsed.is_a?(Date) && parsed.past?
+    end
+  end
+
+  # returns the least recently seen banner that is not hidden
+  def next_banner
+    banners = active_banners
+    banner_key = nil
+    cookie_key = nil
+    min_index = 9999
+
+    banners.each do |k, v|
+      ckey = cookie_id(v[:id]).to_sym
+      cval = cookies[ckey] || 0
+      next if cval == "hide"
+
+      # rotate all banner queue positions
+      index = cval.to_i
+      cookies[ckey] = index - 1 if index > 0
+
+      # pick banner with mininum queue position
+      next if index > min_index
+
+      banner_key = k
+      cookie_key = ckey
+      min_index = index
+    end
+
+    unless banner_key.nil?
+      cookies[cookie_key] = banners.length # bump to end of queue
+      banners[banner_key]
+    end
+  end
+
+  def cookie_id(key)
+    "_osm_banner_#{key}"
+  end
+end

app/views/layouts/_banner.html.erb

@@ -0,0 +1,4 @@
+<% unless (banner = next_banner()).nil? %>
+<%= link_to (image_tag banner[:img], :alt => banner[:alt], :title => banner[:alt]), banner[:link] %>
+<div class="close-wrap" id="<%= cookie_id(banner[:id]) %>"><span class="icon close"></span></div>
+<% end %>

app/views/layouts/map.html.erb

@@ -46,12 +46,17 @@
 
     <% unless @user %>
       <div class="welcome">
-        <h2><a><span class="icon close"></span></a><%= t 'layouts.intro_header' %></h2>
+        <h2><%= t 'layouts.intro_header' %></h2>
+        <div class="close-wrap"><span class="icon close"></span></div>
         <p><%= t 'layouts.intro_text' %></p>
         <a class="button learn-more" href="<%= about_path %>"><%= t('layouts.learn_more') %></a>
         <a class="button sign-up" href="<%= user_new_path %>"><%= t('layouts.start_mapping') %></a>
       </div>
     <% end %>
+
+    <div id="banner">
+      <%= render :partial => "layouts/banner" %>
+    </div>
   </div>
 
   <noscript>

config/banners.yml

@@ -0,0 +1,13 @@
+sotmus2016:
+  id: sotmus2016
+  alt: State of the Map US 2016
+  link: http://stateofthemap.us/
+  img: banners/sotmus-2016.jpg
+  enddate: 2016-jul-23
+
+sotm2016:
+  id: sotm2016
+  alt: State of the Map 2016
+  link: http://2016.stateofthemap.org/
+  img: banners/sotm-2016.jpg
+  enddate: 2016-sep-23

config/initializers/banners.rb

@@ -0,0 +1,5 @@
+begin
+  BANNERS = YAML.load_file("#{Rails.root}/config/banners.yml").deep_symbolize_keys
+rescue
+  BANNERS = {}.freeze
+end