From be563e73c6ecd8ef50dd6cc19122326fce2bb19e Mon Sep 17 00:00:00 2001
From: David McDonald <david.mcdonald@digital.cabinet-office.gov.uk>
Date: Thu, 3 Sep 2020 10:55:01 +0100
Subject: [PATCH] Add map in details to broadcast view

Avoided using `closest` as not supported by IE8-11
https://caniuse.com/#search=closest

Used `parentElement` supported by IE9+
https://caniuse.com/#search=parentElement

Used `className` as supported by IE9+
https://caniuse.com/#search=className

Also rearranged the javascript for maps such that figuring out the
polygon array is done first and then the time when we need to have the
details component open before closing it again is kept to minimum
---
 .../partials/area-map-javascripts.html        | 41 +++++++++++++------
 .../views/broadcast/view-message.html         | 14 +++++++
 2 files changed, 43 insertions(+), 12 deletions(-)

diff --git a/app/templates/views/broadcast/partials/area-map-javascripts.html b/app/templates/views/broadcast/partials/area-map-javascripts.html
index 65782f8db..5d1fcb37e 100644
--- a/app/templates/views/broadcast/partials/area-map-javascripts.html
+++ b/app/templates/views/broadcast/partials/area-map-javascripts.html
@@ -1,19 +1,7 @@
 <script src="{{ asset_url('javascripts/leaflet.js') }}"></script>
 <script>
-  var mapElement = document.getElementById('map');
-  mapElement.style.height = Math.max(320, window.innerHeight - mapElement.offsetTop - 100) + 'px';
-  var mymap = L.map(
-    'map',
-    {
-      scrollWheelZoom: false
-    }
-  )
   var polygons = []
 
-  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
-    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
-  }).addTo(mymap);
-
   {% for polygon in broadcast_message.simple_polygons.bleed.as_coordinate_pairs_lat_long %}
     polygons.push(
       L.polygon({{polygon}}, {
@@ -48,10 +36,39 @@
     );
   {% endfor %}
 
+
+  var mapElement = document.getElementById('map');
+
+  // if element is inside a details element then to make the map render correctly we open the details element
+  // and set up the map before closing the details map after
+  grandparent = mapElement.parentElement.parentElement;
+  if (grandparent.className.split(/\s+/).indexOf('govuk-details') > -1) {
+    details = grandparent;
+    details.open = true;
+  }
+
+  mapElement.style.height = Math.max(320, window.innerHeight - mapElement.offsetTop - 100) + 'px';
+
+  var mymap = L.map(
+    'map',
+    {
+      scrollWheelZoom: false
+    }
+  )
+
+  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+  }).addTo(mymap);
+
   var polygonGroup = L.featureGroup(polygons).addTo(mymap);
   mymap.fitBounds(
     polygonGroup.getBounds(),
     {padding: [1, 1]}
   );
 
+  // if element is inside a details element then close the details element
+  if (details) {
+    details.open = false;
+  }
+
 </script>
diff --git a/app/templates/views/broadcast/view-message.html b/app/templates/views/broadcast/view-message.html
index 8722d7eca..32fb5a771 100644
--- a/app/templates/views/broadcast/view-message.html
+++ b/app/templates/views/broadcast/view-message.html
@@ -1,5 +1,6 @@
 {% from "components/back-link/macro.njk" import govukBackLink %}
 {% from "components/button/macro.njk" import govukButton %}
+{% from "components/details/macro.njk" import govukDetails %}
 {% from "components/form.html" import form_wrapper %}
 {% from "components/banner.html" import banner %}
 {% from "components/page-header.html" import page_header %}
@@ -7,6 +8,14 @@
 
 {% extends "withnav_template.html" %}
 
+{% block extra_stylesheets %}
+  {% include "views/broadcast/partials/area-map-stylesheets.html" %}
+{% endblock %}
+
+{% block extra_javascripts %}
+  {% include "views/broadcast/partials/area-map-javascripts.html" %}
+{% endblock %}
+
 {% block service_page_title %}
   {% if broadcast_message.status == 'pending-approval' %}
     {% if broadcast_message.created_by == current_user and current_user.has_permissions('send_messages') %}
@@ -128,6 +137,11 @@
     {% endif %}
   {% endfor %}
 
+  {{ govukDetails({
+    "summaryText": "Show map",
+    "html": '<div id="map"></div>'
+  }) }}
+
   {{ broadcast_message.template|string }}
 
 {% endblock %}