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