Factor out most inline JavaScript.

No need for a special no-map case in the filters case, as all pages now
have fixmystreet.page set if needed.

10 files changed, 109 insertions, 77 deletions

diff --git a/templates/web/base/front/javascript.html b/templates/web/base/front/javascript.html
index c3f527947..2795829a5 100644
--- a/templates/web/base/front/javascript.html
+++ b/templates/web/base/front/javascript.html
@@ -1,15 +1,7 @@
 [%# Assume using OpenStreetMap maps %]
 <script src="[% version('/js/yepnope.js') %]"></script>
-<script>
-yepnope.addPrefix( 'preload', function ( resource ) {
-    resource.noexec = true;
-    return resource;
-});
-yepnope({
-    load: [
-        "preload![% version('/js/OpenLayers/OpenLayers.fixmystreet.js') %]",
-        "preload![% version('/js/map-OpenLayers.js') %]",
-        "preload![% version('/js/map-OpenStreetMap.js') %]",
-    ]
-});
-</script>
+<script id="script_front" src="[% version('/cobrands/fixmystreet/front.js') %]"
+    data-scripts="
+        [%~ version('/js/OpenLayers/OpenLayers.fixmystreet.js') %],
+        [%~ version('/js/map-OpenLayers.js') %],
+        [%~ version('/js/map-OpenStreetMap.js') %]"></script>
diff --git a/templates/web/base/maps/noscript_map.html b/templates/web/base/maps/noscript_map.html
index f35f152e8..6ef2f813a 100644
--- a/templates/web/base/maps/noscript_map.html
+++ b/templates/web/base/maps/noscript_map.html
@@ -56,7 +56,14 @@
 [% IF pin.id %]
 <a title="[% pin.title | html %]" href="[% c.cobrand.base_url_for_report( pin.problem ) %][% pin.problem.url %]">
 [%- END -%]
-<img border="0" class="pin" src="[% start %][% c.cobrand.path_to_pin_icons _ 'pin-' _ pin.colour _ '.png' %]"
+<img border="0" src="[% start %][% c.cobrand.path_to_pin_icons _ 'pin-' _ pin.colour _ '.png' %]"
+[% IF js -%]
+    class="pin js-pin" data-lat="[% pin.latitude %]" data-lon="[% pin.longitude %]"
+    data-colour="[% pin.colour %]" data-id="[% pin.id %]"
+    data-title="[% pin.title | html %]" data-type="[% pin.type %]"
+[% ELSE -%]
+    class="pin"
+[% END -%]
     alt="[% loc('Problem') %]" style="top:[% pin.py - 64 %]px; left:[% pin.px - 24 %]px; position: absolute;">
 [%- IF pin.id -%]
 </a>
diff --git a/templates/web/base/maps/openlayers.html b/templates/web/base/maps/openlayers.html
index 3c00c479c..b9dc0747c 100644
--- a/templates/web/base/maps/openlayers.html
+++ b/templates/web/base/maps/openlayers.html
@@ -5,34 +5,32 @@
 [% END %]
 
 <input type="hidden" name="zoom" value="[% map.zoom %]">
-<script type="text/javascript">
-var fixmystreet = fixmystreet || {};
-$.extend(fixmystreet, {
-    'area': [ [% map.area.join(',') %] ],
-    'all_pins': '[% all_pins %]',
-    'latitude': [% map.latitude %],
-    'longitude': [% map.longitude %],
+<div id="js-map-data"
+    data-area="[% map.area.join(',') %]"
+    data-all_pins='[% all_pins %]'
+    data-latitude=[% map.latitude %]
+    data-longitude=[% map.longitude %]
 [% IF map.any_zoom -%]
-    'zoomToBounds': 1,
+    data-zoomToBounds=1
 [%- END %]
 [% IF map.zoom -%]
-    'zoom': [% map.zoom %],
+    data-zoom=[% map.zoom %]
 [%- END %]
-    'pin_prefix': '[% c.config.ADMIN_BASE_URL IF admin %][% c.cobrand.path_to_pin_icons %]',
-    'numZoomLevels': [% map.numZoomLevels %],
-    'zoomOffset': [% map.zoomOffset %],
-    'map_type': [% map.map_type %],
+    data-pin_prefix='[% c.config.ADMIN_BASE_URL IF admin %][% c.cobrand.path_to_pin_icons %]',
+    data-numZoomLevels=[% map.numZoomLevels %]
+    data-zoomOffset=[% map.zoomOffset %]
+    data-map_type=[% map.map_type %]
 [% IF include_key -%]
-    'key': '[% c.config.BING_MAPS_API_KEY %]',
+    data-key='[% c.config.BING_MAPS_API_KEY %]'
 [%- END %]
-    'pins': [% INCLUDE maps/pins_js.html %]
-});
-</script>
+>
+</div>
 <div id="map_box" aria-hidden="true">
     [% pre_map %]
     <div id="map">
-      [% INCLUDE 'maps/noscript_map.html' %]
+      [% INCLUDE 'maps/noscript_map.html' js = 1 %]
     </div>
+    <script src="[% version('/cobrands/fixmystreet/map.js') %]"></script>
     [% IF map.copyright %]
     <div class="olControlAttribution" style="position: absolute;">[% map.copyright %]</div>
     [% END %]
diff --git a/templates/web/base/my/_problem-list.html b/templates/web/base/my/_problem-list.html
index 8b9f51dad..31100a676 100644
--- a/templates/web/base/my/_problem-list.html
+++ b/templates/web/base/my/_problem-list.html
@@ -9,17 +9,3 @@
         </li>
     [% END %]
 </ul>
-
-[% IF ! problems.size %]
-<!-- Preserve behaviour of map filters despite map not being shown -->
-<script type="text/javascript">
-    (function($) {
-        $(function() {
-            $(".report-list-filters [type=submit]").hide();
-            $(".report-list-filters select").change(function() {
-                $(this).closest("form").submit();
-            });
-        })
-    })(window.jQuery);
-</script>
-[% END %]
diff --git a/templates/web/base/reports/index.html b/templates/web/base/reports/index.html
index 4b8c27b92..4a7d5a9c9 100755
--- a/templates/web/base/reports/index.html
+++ b/templates/web/base/reports/index.html
@@ -1,3 +1,6 @@
+[% extra_js = BLOCK %]
+    <script src="[% version('/js/jquery.fixedthead.js') %]"></script>
+[% END -%]
 [% INCLUDE 'header.html', title = loc('Summary reports'), bodyclass => 'fullwidthpage' %]
 
 <h1>[% loc('All Reports') %]</h1>
@@ -44,11 +47,4 @@
 </tbody>
 </table>
 
-<script type="text/javascript" src="[% version('/js/jquery.fixedthead.js') %]"></script>
-<script type="text/javascript">
-$(function(){
-    $('.nicetable thead').fixedThead();
-});
-</script>
-
 [% INCLUDE 'footer.html', pagefooter = 'yes' %]
diff --git a/templates/web/fixmystreet.com/front/javascript.html b/templates/web/fixmystreet.com/front/javascript.html
index 26ac5f908..ac9faa309 100644
--- a/templates/web/fixmystreet.com/front/javascript.html
+++ b/templates/web/fixmystreet.com/front/javascript.html
@@ -1,15 +1,7 @@
 <script src="[% version('/js/yepnope.js') %]"></script>
-<script>
-yepnope.addPrefix( 'preload', function ( resource ) {
-    resource.noexec = true;
-    return resource;
-});
-yepnope({
-    load: [
-        "preload![% version('/js/OpenLayers/OpenLayers.fixmystreet.js') %]",
-        "preload![% version('/js/map-OpenLayers.js') %]",
-        "preload![% version('/js/map-bing-ol.js') %]",
-        "preload![% version('/js/map-fms.js') %]",
-    ]
-});
-</script>
+<script id="script_front" src="[% version('/cobrands/fixmystreet/front.js') %]"
+    data-scripts="
+        [%~ version('/js/OpenLayers/OpenLayers.fixmystreet.js') %],
+        [%~ version('/js/map-OpenLayers.js') %],
+        [%~ version('/js/map-bing-ol.js') %],
+        [%~ version('/js/map-fms.js') %]"></script>
diff --git a/web/cobrands/fixmystreet/fixmystreet.js b/web/cobrands/fixmystreet/fixmystreet.js
index 09d387506..689ad2755 100644
--- a/web/cobrands/fixmystreet/fixmystreet.js
+++ b/web/cobrands/fixmystreet/fixmystreet.js
@@ -510,6 +510,25 @@ $.extend(fixmystreet.set_up, {
     }
   },
 
+  fixed_thead: function() {
+    var thead = $('.nicetable thead');
+    if (thead.fixedThead) {
+        thead.fixedThead();
+    }
+  },
+
+  report_list_filters: function() {
+    // Hide the pin filter submit button. Not needed because we'll use JS
+    // to refresh the map when the filter inputs are changed.
+    $(".report-list-filters [type=submit]").hide();
+
+    if (fixmystreet.page == "my" || fixmystreet.page == "reports") {
+        $(".report-list-filters select").change(function() {
+            $(this).closest("form").submit();
+        });
+    }
+  },
+
   mobile_ui_tweaks: function() {
     //move 'skip this step' link on mobile
     $('.mobile #skip-this-step').addClass('chevron').wrap('<li>').parent().appendTo('#key-tools');
diff --git a/web/cobrands/fixmystreet/front.js b/web/cobrands/fixmystreet/front.js
new file mode 100644
index 000000000..8fc5db214
--- /dev/null
+++ b/web/cobrands/fixmystreet/front.js
@@ -0,0 +1,12 @@
+yepnope.addPrefix( 'preload', function ( resource ) {
+    resource.noexec = true;
+    return resource;
+});
+
+$(function(){
+    var scripts = document.getElementById('script_front').getAttribute('data-scripts').split(',');
+    for (var i=0; i<scripts.length; i++) {
+        scripts[i] = 'preload!' + scripts[i];
+    }
+    yepnope({ load: scripts });
+});
diff --git a/web/cobrands/fixmystreet/map.js b/web/cobrands/fixmystreet/map.js
new file mode 100644
index 000000000..b822864f7
--- /dev/null
+++ b/web/cobrands/fixmystreet/map.js
@@ -0,0 +1,40 @@
+var fixmystreet = fixmystreet || {};
+
+(function(){
+
+    var map_data = document.getElementById('js-map-data'),
+        map_keys = [ 'area', 'all_pins', 'latitude', 'longitude', 'zoomToBounds', 'zoom', 'pin_prefix', 'numZoomLevels', 'zoomOffset', 'map_type', 'key' ],
+        numeric = { zoom: 1, numZoomLevels: 1, zoomOffset: 1 },
+        pin_keys = [ 'lat', 'lon', 'colour', 'id', 'title', 'type' ];
+
+    if (!map_data) {
+        return;
+    }
+
+    $.each(map_keys, function(i, v) {
+        fixmystreet[v] = map_data.getAttribute('data-' + v);
+        if (numeric[v]) {
+            fixmystreet[v] = +fixmystreet[v];
+        }
+    });
+
+    fixmystreet.area = fixmystreet.area ? fixmystreet.area.split(',') : [];
+    if (fixmystreet.map_type) {
+        var s = fixmystreet.map_type.split('.');
+        var obj = window;
+        for (var i=0; i<s.length; i++) {
+            obj = obj[s[i]];
+        }
+        fixmystreet.map_type = obj;
+    }
+
+    fixmystreet.pins = [];
+    $('.js-pin').each(function(i, pin) {
+        var arr = [];
+        $.each(pin_keys, function(i, v) {
+            arr.push(pin.getAttribute('data-' + v));
+        });
+        fixmystreet.pins.push(arr);
+    });
+
+})();
diff --git a/web/js/map-OpenLayers.js b/web/js/map-OpenLayers.js
index f110dec26..f202e1392 100644
--- a/web/js/map-OpenLayers.js
+++ b/web/js/map-OpenLayers.js
@@ -508,16 +508,6 @@ var fixmystreet = fixmystreet || {};
             click.activate();
         }
 
-        // Hide the pin filter submit button. Not needed because we'll use JS
-        // to refresh the map when the filter inputs are changed.
-        $(".report-list-filters [type=submit]").hide();
-
-        if (fixmystreet.page == "my" || fixmystreet.page == "reports") {
-            $(".report-list-filters select").change(function() {
-                $(this).closest("form").submit();
-            });
-        }
-
         // Vector layers must be added onload as IE sucks
         if ($.browser.msie) {
             $(window).load(onload);