From 32a794aacd2605eda02d3d6bf7b6a71951983d3d Mon Sep 17 00:00:00 2001
From: David McDonald <david.mcdonald@digital.cabinet-office.gov.uk>
Date: Thu, 3 Sep 2020 10:18:28 +0100
Subject: [PATCH 1/3] Move styling into separate files for reuse

---
 .../partials/area-map-javascripts.html        | 57 ++++++++++++++++
 .../partials/area-map-stylesheets.html        |  8 +++
 .../views/broadcast/preview-areas.html        | 67 +------------------
 3 files changed, 67 insertions(+), 65 deletions(-)
 create mode 100644 app/templates/views/broadcast/partials/area-map-javascripts.html
 create mode 100644 app/templates/views/broadcast/partials/area-map-stylesheets.html

diff --git a/app/templates/views/broadcast/partials/area-map-javascripts.html b/app/templates/views/broadcast/partials/area-map-javascripts.html
new file mode 100644
index 000000000..65782f8db
--- /dev/null
+++ b/app/templates/views/broadcast/partials/area-map-javascripts.html
@@ -0,0 +1,57 @@
+<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}}, {
+        opacity: 0.5,
+        color: '#2B8CC4', // $light-blue
+        fillColor: '#2B8CC4', // $light-blue
+        fillOpacity: 0.2,
+        weight: 2
+      })
+    );
+  {% endfor %}
+
+  {% for polygon in broadcast_message.simple_polygons.as_coordinate_pairs_lat_long %}
+    polygons.push(
+      L.polygon({{polygon}}, {
+        opacity: 0.1,
+        color: '#2B8CC4', // $black
+        fillColor: '#2B8CC4', // $light-blue
+        fillOpacity: 0.4,
+        weight: 1
+      })
+    );
+  {% endfor %}
+
+  {% for polygon in broadcast_message.polygons.as_coordinate_pairs_lat_long %}
+    polygons.push(
+      L.polygon({{polygon}}, {
+        color: '#0b0b0c', // $black
+        fillOpacity: 0,
+        weight: 2
+      })
+    );
+  {% endfor %}
+
+  var polygonGroup = L.featureGroup(polygons).addTo(mymap);
+  mymap.fitBounds(
+    polygonGroup.getBounds(),
+    {padding: [1, 1]}
+  );
+
+</script>
diff --git a/app/templates/views/broadcast/partials/area-map-stylesheets.html b/app/templates/views/broadcast/partials/area-map-stylesheets.html
new file mode 100644
index 000000000..cb1333424
--- /dev/null
+++ b/app/templates/views/broadcast/partials/area-map-stylesheets.html
@@ -0,0 +1,8 @@
+<link rel="stylesheet" href="{{ asset_url('stylesheets/leaflet.css') }}" />
+<style>
+  #map {
+    z-index: 50;
+    margin-bottom: 30px;
+    border: 1px solid #b1b4b6;
+  }
+</style>
diff --git a/app/templates/views/broadcast/preview-areas.html b/app/templates/views/broadcast/preview-areas.html
index 76d773887..acc5dc2fa 100644
--- a/app/templates/views/broadcast/preview-areas.html
+++ b/app/templates/views/broadcast/preview-areas.html
@@ -9,74 +9,11 @@
 {% endblock %}
 
 {% block extra_stylesheets %}
-  <link rel="stylesheet" href="{{ asset_url('stylesheets/leaflet.css') }}" />
-  <style>
-    #map {
-      z-index: 50;
-      margin-bottom: 30px;
-      border: 1px solid #b1b4b6;
-    }
-  </style>
+  {% include "views/broadcast/partials/area-map-stylesheets.html" %}
 {% endblock %}
 
 {% block extra_javascripts %}
-  <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}}, {
-          opacity: 0.5,
-          color: '#2B8CC4', // $light-blue
-          fillColor: '#2B8CC4', // $light-blue
-          fillOpacity: 0.2,
-          weight: 2
-        })
-      );
-    {% endfor %}
-
-    {% for polygon in broadcast_message.simple_polygons.as_coordinate_pairs_lat_long %}
-      polygons.push(
-        L.polygon({{polygon}}, {
-          opacity: 0.1,
-          color: '#2B8CC4', // $black
-          fillColor: '#2B8CC4', // $light-blue
-          fillOpacity: 0.4,
-          weight: 1
-        })
-      );
-    {% endfor %}
-
-    {% for polygon in broadcast_message.polygons.as_coordinate_pairs_lat_long %}
-      polygons.push(
-        L.polygon({{polygon}}, {
-          color: '#0b0b0c', // $black
-          fillOpacity: 0,
-          weight: 2
-        })
-      );
-    {% endfor %}
-
-    var polygonGroup = L.featureGroup(polygons).addTo(mymap);
-    mymap.fitBounds(
-      polygonGroup.getBounds(),
-      {padding: [1, 1]}
-    );
-
-  </script>
+  {% include "views/broadcast/partials/area-map-javascripts.html" %}
 {% endblock %}
 
 {% block maincolumn_content %}

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 2/3] 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 %}

From bf5ee37d6ce0363b0ee07e8d57fcd99479dc290c Mon Sep 17 00:00:00 2001
From: David McDonald <david.mcdonald@digital.cabinet-office.gov.uk>
Date: Fri, 4 Sep 2020 10:27:19 +0100
Subject: [PATCH 3/3] Add margin to area list above map as looks cleaner

---
 app/templates/views/broadcast/view-message.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/templates/views/broadcast/view-message.html b/app/templates/views/broadcast/view-message.html
index 32fb5a771..29db61202 100644
--- a/app/templates/views/broadcast/view-message.html
+++ b/app/templates/views/broadcast/view-message.html
@@ -127,7 +127,7 @@
 
   {% for area in broadcast_message.areas %}
     {% if loop.first %}
-      <ul class="area-list">
+      <ul class="area-list govuk-!-margin-bottom-4">
     {% endif %}
         <li class="area-list-item area-list-item--unremoveable">
           {{ area.name }}