From: Bryan Housel <bryan@mapbox.com>
Date: Mon, 20 Jun 2016 22:09:55 +0000 (-0400)
Subject: Add support for rotating banners, add banners for SOTM, SOTMUS
X-Git-Tag: live~3852^2~7
X-Git-Url: https://git.openstreetmap.org/rails.git/commitdiff_plain/5e27978d3cd55b267f0222d51d9e8efa26e389e9?hp=ee1cc2aa5102b3da1cb6780d111fdef01c62a1ec

Add support for rotating banners, add banners for SOTM, SOTMUS
---

diff --git a/app/assets/images/banners/.keep b/app/assets/images/banners/.keep
new file mode 100644
index 000000000..e69de29bb
diff --git a/app/assets/images/banners/sotm-2016.jpg b/app/assets/images/banners/sotm-2016.jpg
new file mode 100644
index 000000000..8f2586745
Binary files /dev/null and b/app/assets/images/banners/sotm-2016.jpg differ
diff --git a/app/assets/images/banners/sotmus-2016.jpg b/app/assets/images/banners/sotmus-2016.jpg
new file mode 100644
index 000000000..ea67d5a0d
Binary files /dev/null and b/app/assets/images/banners/sotmus-2016.jpg differ
diff --git a/app/assets/javascripts/index.js b/app/assets/javascripts/index.js
index fdbeaba22..44692eac1 100644
--- a/app/assets/javascripts/index.js
+++ b/app/assets/javascripts/index.js
@@ -161,17 +161,27 @@ $(document).ready(function () {
       map.getLayersCode(),
       map._object);
 
-    $.removeCookie("_osm_location");
-    $.cookie("_osm_location", OSM.locationCookie(map), { expires: expiry, path: "/" });
+    $.removeCookie('_osm_location');
+    $.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) {
+    debugger;
+    var cookieId = e.target.id;
+    $('#banner').hide();
+    e.preventDefault();
+    if (cookieId) {
+      $.cookie(cookieId, 'hide', { expires: expiry });
+    }
   });
 
   if (OSM.PIWIK) {
diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss
index cf687653e..fa9c51b94 100644
--- a/app/assets/stylesheets/common.scss
+++ b/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,25 @@ body.compact {
     }
   }
 
-  .welcome {
-    display: none;
-  }
-
   .overlay-sidebar #sidebar {
     position: absolute;
     z-index: 1000;
     height: auto;
-    border-bottom-right-radius: 5px;
     overflow: hidden;
+
     .welcome {
       display: block;
     }
+
     #sidebar_content {
       display: none;
     }
   }
 
   .welcome {
+    display: none;
+    padding-bottom: 5px;
+
     p {
       padding: $lineheight/2 $lineheight $lineheight;
       font-size: 110%;
@@ -607,6 +630,15 @@ body.compact {
     }
   }
 
+  #banner {
+    display: block;
+
+    img {
+      display: block;
+      width: $sidebarWidth;
+    }
+  }
+
   #map {
     height: 100%;
     overflow: hidden;
diff --git a/app/views/layouts/_banner.html.erb b/app/views/layouts/_banner.html.erb
new file mode 100644
index 000000000..94abb5c1f
--- /dev/null
+++ b/app/views/layouts/_banner.html.erb
@@ -0,0 +1,41 @@
+<% active_banners = {
+  :sotmus2016 => {
+    :alt => 'State of the Map US 2016',
+    :link => 'http://stateofthemap.us/',
+    :img => 'banners/sotmus-2016.jpg'
+  },
+  :sotm2016 => {
+    :alt => 'State of the Map 2016',
+    :link => 'http://2016.stateofthemap.org/',
+    :img => 'banners/sotm-2016.jpg'
+  }
+}
+
+bannerSym = nil
+cookieStr = nil
+queuePos = active_banners.length
+
+# pick least recently seen banner that is not hidden
+active_banners.each_key do |k|
+  c = '_osm_banner_' + k.to_s
+  val = cookies[c.to_sym] || 0
+  next if val == 'hide'
+
+  if val.to_i > 0
+    cookies[c.to_sym] = val.to_i - 1
+  end
+
+  if val.to_i <= queuePos
+    bannerSym = k
+    cookieStr = c
+    queuePos = val.to_i
+  end
+end
+
+unless bannerSym.nil?
+  banner = active_banners[bannerSym]
+  cookies[cookieStr.to_sym] = active_banners.length   # bump to end of queue
+%>
+<%= link_to (image_tag banner[:img], :alt => banner[:alt], :title => banner[:alt]), banner[:link] %>
+<div class="close-wrap" id="<%= cookieStr %>"><span class="icon close"></span></div>
+<% end %>
diff --git a/app/views/layouts/map.html.erb b/app/views/layouts/map.html.erb
index cb2fd0e07..6607bf7a5 100644
--- a/app/views/layouts/map.html.erb
+++ b/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>