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

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>

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 %}