From a171fb6d146d387a2354c73c8ffdb83068079bf2 Mon Sep 17 00:00:00 2001
From: Anna Sidwell <anna@takkaria.org>
Date: Mon, 16 Apr 2018 12:59:48 +1000
Subject: [PATCH] Add hello overlay (closes #17)

---
 apps/map/templates/map/index.html | 151 +++++++++++++++---------------
 1 file changed, 76 insertions(+), 75 deletions(-)

diff --git a/apps/map/templates/map/index.html b/apps/map/templates/map/index.html
index dd0b660..5c545eb 100644
--- a/apps/map/templates/map/index.html
+++ b/apps/map/templates/map/index.html
@@ -32,7 +32,55 @@ html, body, #main {
 .popup-labels .label {
   font-size: 100%;
 }
+
+.hello {
+  position: fixed;
+  height: 100%;
+  width: 100%;
+  top: 0;
+  left: 0;
+  overflow: auto;
+  z-index: 1000;
+  background-color: rgba(0, 0, 0, 0.5);
+  background-image: url('data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEiIHZpZXdCb3g9IjEwMCA1IDIwMCAyNTUiPg0KICA8cGF0aCBkPSJNMjM4IDEyN2g1M2wtMjYtMTUtMjcgMTUiIGZpbGw9InJnYmEoMjUyLCAyMTEsIDI5LCAwLjUpIi8+DQogIDxwYXRoIGQ9Ik0yOTQgMTIybC0yOS01MS0yOSA1MSAyOS0xNyAyOSAxNyIgZmlsbD0icmdiYSgxMDIsIDE5OCwgODcsIDAuNSkiLz4NCiAgPHBhdGggZD0iTTIyOCAxMjRsMzItNTZoLTY0bDMyIDU2IiBmaWxsPSJyZ2JhKDIyMSwgNjgsIDU4LCAwLjUpIi8+DQogIDxwYXRoIGQ9Ik0xODYgNjNMMTUzIDdsLTMyIDU2aDY1bTExMSAxOTNsLTMyLTU2LTMyIDU2aDY0IiBmaWxsPSJyZ2JhKDEwMiwgMTk4LCA4NywgMC41KSIvPg0KICA8cGF0aCBkPSJNMjIzIDEyN2wtMzItNTYtMzMgNTZoNjUiIGZpbGw9InJnYmEoMjUyLCAyMTEsIDI5LCAwLjUpIi8+DQogIDxwYXRoIGQ9Ik0yNjAgMTkxbC0zMi01Ni0zMiA1Nmg2NCIgZmlsbD0icmdiYSgyMjEsIDY4LCA1OCwgMC41KSIvPg0KICA8cGF0aCBkPSJNMTUzIDEyNGwzMy01NmgtNjVsMzIgNTYiIGZpbGw9InJnYmEoMzcsIDE0MCwgMjEyLCAwLjUpIi8+DQogIDxwYXRoIGQ9Ik0yMjggMjUzbDMyLTU2aC02NGwzMiA1NiIgZmlsbD0icmdiYSgyNTIsIDIxMSwgMjksIDAuNSkiLz4NCiAgDQogIA0KICA8cGF0aCBkPSJNMTg2IDE5MWwtMzMtNTUtMzIgNTVoNjUiIGZpbGw9InJnYmEoMzcsIDE0MCwgMjEyLCAwLjUpIi8+DQogIA0KICANCiAgPHBhdGggZD0iTTExOSAxODRsMjctNDYtMjcgMTV2MzEiIGZpbGw9InJnYmEoMTAyLCAxOTgsIDg3LCAwLjUpIi8+DQogIDxwYXRoIGQ9Ik0xOTMgMTg0bDI3LTQ2LTI3IDE1djMxIiBmaWxsPSJyZ2JhKDM3LCAxNDAsIDIxMiwgMC41KSIvPg0KICA8cGF0aCBkPSJNMjE3IDEzM2gtNTlsMzAgNTF2LTM0bDI5LTE3IiBmaWxsPSJyZ2JhKDEwMiwgMTk4LCA4NywgMC41KSIvPg0KICA8cGF0aCBkPSJNMTg4IDIwNWwtMjcgNDYgMjctMTZ2LTMwIiBmaWxsPSJyZ2JhKDM3LCAxNDAsIDIxMiwgMC41KSIvPg0KICA8cGF0aCBkPSJNMTY0IDI1Nmg1OWwtMzAtNTF2MzRsLTI5IDE3IiBmaWxsPSJyZ2JhKDIyMSwgNjgsIDU4LCAwLjUpIi8+DQogIDxwYXRoIGQ9Ik0yMjUgMTJsLTI2IDQ2IDI2LTE2VjEyIiBmaWxsPSJyZ2JhKDI1MiwgMjExLCAyOSwgMC41KSIvPg0KICA8cGF0aCBkPSJNMjAxIDYzaDU5bC0yOS01MXYzNGwtMzAgMTciIGZpbGw9InJnYmEoMzcsIDE0MCwgMjEyLCAwLjUpIi8+DQo8L3N2Zz4=');
+  background-position: center;
+  background-blend-mode: luminosity;
+}
+
+.hello--container {
+  max-width: 40em;
+  margin: 0 auto;
+}
+
+.hello--text {
+  background-color: white;
+  margin-top: 5em;
+  margin-left: 1em;
+  margin-right: 1em;
+  margin-bottom: 1em;
+  padding: 1em;
+  z-index: 1100;
+}
+
+/* Top margin on small screns should be same as the rest */
+@media (max-width: 768px) {
+  .hello--text {
+    margin-top: 1em;
+  }
+}
+
+.hello--logo {
+  width: 200px;
+  margin-bottom: 16px;
+}
+
+.hello--logo, .hello--hide {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+}
 </style>
+
 {% endblock %}
 
 {% block title %}{% trans "Ojuso Platform Map" %}{% endblock %}
@@ -40,6 +88,20 @@ html, body, #main {
 {% block inner_content %}
   <div id="main"></div>
   <div id="modals"></div>
+
+  <div class="hello" style="display: none">
+    <div class="hello--container">
+      <div class="hello--text">
+        <img class="hello--logo" align="center" src="{% static 'map/images/ojuso-logo-black.png' %}" alt="Ojuso">
+
+        <p><b>ojuso</b>’s aim is to promote best practice in the renewable energy industry, to encourage divestment from ecologically and socially destructive projects, and to foster improvements in supply chain and lifecycle management in the sector.</p>
+        <p><b>ojuso</b> provides a platform for information exchange and cooperation between different sectors involved in the renewable energy economy and is supportive of ethical and ecologically sound practices.  This platform consists of an online map and database of positive and negative case studies, contributed by communities affected by and leading the transition, and a series of discussion fora and features, contributed by a diversity of players.</p><p>You are welcome to submit a case study through this map tool. Following submission cases will be moderated and, if successful, placed on the map. If you need any help or have any suggestions, please post messages on <a href="//forum.ojuso.org">our forum</a>.</p>
+        <p class="text-muted"><b>ojuso</b> is a project of Yansa and Gaia Foundation, with support from Swift Foundation.</p>
+        <button class="hello--hide btn btn-primary">OK</button>
+      </div>
+    </div>
+  </div>
+
 {% endblock %}
 
 {% block footer %}
@@ -48,7 +110,7 @@ html, body, #main {
 {% block scripts %}
 {% leaflet_map "main" callback="main_app_init" creatediv=False %}
 {% leaflet_js %}
-<script type="text/javascript" src="{% static 'map/plugins/leaflet-hash.js' %}"></script>
+<script src="{% static 'map/plugins/leaflet-hash.js' %}"></script>
 <script>
 
 function getLabelClass(pos_or_neg) {
@@ -85,82 +147,21 @@ function main_app_init(map, options) {
     }).addTo(map)
   });
 }
-
 </script>
-{% endblock %}
 
-<script type="text/comment">
-
-// removed from <script> section above
-// This takes HTML as a string and returns an element
-function create(htmlStr) {
-  var frag = document.createDocumentFragment();
-  var temp = document.createElement('div');
-
-  temp.innerHTML = htmlStr;
-  while (temp.firstChild) {
-    frag.appendChild(temp.firstChild);
+<script src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script>
+<script>
+function initOverlay() {
+  var cookieName = '__welcomePage_seenBefore'
+  if (!Cookies.get(cookieName)) {
+    $('.hello').show()
+    $('.hello--hide').on('click', function(evt) {
+      $('.hello').hide()
+      Cookies.set(cookieName, "true")
+    })
   }
-
-  return frag;
 }
 
-var modalname = "case-study-" + feature.id
-
-var modal = create(
-  "<div class='modal fade' id='"+modalname+"' tabindex='-1' role='dialog' aria-labelledby='"+modalname+"-label'>"+
-    "<div class='modal-dialog' role='document'>"+
-      "<div class='modal-content'>"+
-        "<div class='modal-header'>"+
-          "<button type='button' class='close' data-dismiss='modal' aria-label='{% trans "Close" %}'>"+
-            "<span aria-hidden='true'>&times;</span>"+
-          "</button>"+
-          "<h4 class='modal-title' id='"+modalname+"-label'>"+
-            feature.properties.project_name+
-          "</h4>"+
-        "</div>"+
-        "<div class='modal-body'>"+
-          "<p>"+feature.properties.description+"</p>"+
-          "<dl class='dl-horizontal'>"+
-            "<dt>Supply Chain</dt><dd>"+feature.properties.supply_chain+"</dd>"+
-            "<dt>Generation Type</dt><dd>"+feature.properties.generation_type+"</dd>"+
-            "<dt>Associated Companies</dt><dd>"+feature.properties.associated_companies+"</dd>"+
-            "<dt>Financiers</dt><dd>"+feature.properties.financiers+"</dd>"+
-            "<dt>Important Lenders</dt><dd>"+feature.properties.important_lenders+"</dd>"+
-            "<dt>Country</dt><dd>"+feature.properties.country+"</dd>"+
-            "<dt>Affects Indigenous</dt><dd>"+feature.properties.affects_indigenous+"</dd>"+
-            "<dt>Affects Indigenous Reason</dt><dd>"+feature.properties.affects_indigenous_reason+"</dd>"+
-            "<dt>Proposed Start</dt><dd>"+feature.properties.proposed_start+"</dd>"+
-            "<dt>Proposed Completion</dt><dd>"+feature.properties.proposed_completion+"</dd>"+
-            "<dt>Link to Forum</dt><dd>"+feature.properties.link_to_forum+"</dd>"+
-            "<dt>Image</dt><dd>"+feature.properties.image+"</dd>"+
-            "<dt>References</dt><dd>"+feature.properties.references+"</dd>"+
-            "<dt>Commodities</dt><dd>"+feature.properties.commodities+"</dd>"+
-            "<dt>Like to Engage Developer</dt><dd>"+feature.properties.like_to_engage_developer+"</dd>"+
-            "<dt>Like to Engage Investors</dt><dd"+feature.properties.like_to_engage_investors+"></dd>"+
-            "<dt>Author</dt><dd>"+feature.properties.author+"</dd>"+
-          "</dl>"+
-        "</div>"+
-        "<div class='modal-footer'>"+
-          "<button type='button' class='btn btn-default' data-dismiss='modal'>"+
-            "{% trans "Close" %}"+
-          "</button>"+
-          "<button type='button' class='btn btn-primary'>"+
-            "{% trans "Save changes" %}"+
-          "</button>"+
-        "</div>"+
-      "</div>"+
-    "</div>"+
-  "</div>"
-);
-document.getElementById('modals').appendChild(modal);
-
-// Add an on-click listener for map click events. Show popup with button to submit a casestudy
-// map.on('click', function(e) {
-//   var popup = L.popup()
-//     .setLatLng(e.latlng)
-//     .setContent("<a class='btn btn-primary btn-sm' href='{% url 'create' %}?lat="+e.latlng.lat+"&lng="+e.latlng.lng+"' role='button'>{% trans "Submit a Case Study" %}</a>")
-//     .openOn(map);
-// });
-
-</script>
\ No newline at end of file
+initOverlay()
+</script>
+{% endblock %}