diff options
Diffstat (limited to 'web/js')
| -rw-r--r-- | web/js/fixmystreet-admin.js | 111 | ||||
| -rw-r--r-- | web/js/map-OpenLayers.js | 57 | ||||
| -rw-r--r-- | web/js/map-google-ol.js | 18 |
3 files changed, 61 insertions, 125 deletions
diff --git a/web/js/fixmystreet-admin.js b/web/js/fixmystreet-admin.js deleted file mode 100644 index 884ad1c09..000000000 --- a/web/js/fixmystreet-admin.js +++ /dev/null @@ -1,111 +0,0 @@ -$(function(){ - // available for admin pages - - // hide the open311_only section and reveal it only when send_method is relevant - function hide_or_show_open311(e, hide_fast) { - var $form = $(this).closest("form"); - var $open311_only = $form.find('.admin-open311-only'); - - var send_method = $(this).val(); - var show_open311 = false; - if ($form.find('[name=endpoint]').val()) { - show_open311 = true; // always show the form if there is an endpoint value - } else if (send_method && !send_method.match(/^(email|noop|refused)$/i)) { - show_open311 = true; - } - if (show_open311) { - $open311_only.slideDown(); - } else { - if (hide_fast) { - $open311_only.hide(); - } else { - $open311_only.slideUp(); - } - } - } - - if ($('.admin-open311-only').length) { - // Add handler to send_method dropdowns and set initial visibility - $('[name=send_method]').on('change', hide_or_show_open311).each(function() { - hide_or_show_open311.call(this, null, true); - }); - } - - // Some lists of checkboxes have 'select all/none' links at the top - $("a[data-select-none], a[data-select-all]").click(function(e) { - e.preventDefault(); - var checked = $(this).filter('[data-select-all]').length > 0; - $(this).closest("ul").find('input[type=checkbox]').prop('checked', checked); - }); - - - // admin hints: maybe better implemented as tooltips? - $(".admin-hint").on('click', function(){ - if ($(this).hasClass('admin-hint-show')) { - $(this).removeClass('admin-hint-show'); - } else { - $(this).addClass('admin-hint-show'); - } - }); - - // on a body's page, hide/show deleted contact categories - var $table_with_deleted_contacts = $('table tr.is-deleted td.contact-category').closest('table'); - if ($table_with_deleted_contacts.length == 1) { - var $toggle_deleted_btn = $("<input type='submit' class='btn' value='Hide deleted contacts' id='toggle-deleted-contacts-btn' style='margin:1em 0;'/>"); - $table_with_deleted_contacts.before($toggle_deleted_btn); - $toggle_deleted_btn.on('click', function(e){ - e.preventDefault(); - var $cols = $table_with_deleted_contacts.find('tr.is-deleted'); - if ($cols.first().is(':visible')) { - $cols.hide(); - $(this).prop("value", 'Show deleted contacts'); - } else { - $cols.show(); - $(this).prop("value", 'Hide deleted contacts'); - } - }); - } - - $( "#start_date" ).datepicker({ - defaultDate: "-1w", - changeMonth: true, - dateFormat: 'dd/mm/yy' , - // This sets the other fields minDate to our date - onClose: function( selectedDate ) { - $( "#end_date" ).datepicker( "option", "minDate", selectedDate ); - } - }); - $( "#end_date" ).datepicker({ - /// defaultDate: "+1w", - changeMonth: true, - dateFormat: 'dd/mm/yy' , - onClose: function( selectedDate ) { - $( "#start_date" ).datepicker( "option", "maxDate", selectedDate ); - } - }); - - // On user edit page, hide the area/categories fields if body changes - $("form#user_edit select#body").change(function() { - var show_area = $(this).val() == $(this).find("[data-originally-selected]").val(); - $("form#user_edit select#area_id").closest("li").toggle(show_area); - $("form#user_edit .js-user-categories").toggle(show_area); - }); - - // On category edit page, hide the reputation input if inspection isn't required - $("form#category_edit #inspection_required").change(function() { - var $p = $("form#category_edit #reputation_threshold").closest("p"); - var $hint = $p.prevUntil().first(); - if (this.checked) { - $p.removeClass("hidden"); - if ($hint.length) { - $hint.removeClass("hidden"); - } - } else { - $p.addClass("hidden"); - if ($hint.length) { - $hint.addClass("hidden"); - } - } - }); -}); - diff --git a/web/js/map-OpenLayers.js b/web/js/map-OpenLayers.js index 49801911b..b53246279 100644 --- a/web/js/map-OpenLayers.js +++ b/web/js/map-OpenLayers.js @@ -215,14 +215,21 @@ var fixmystreet = fixmystreet || {}; } }; + /* Make sure pins aren't going to reload just because we're zooming out, + * we already have the pins when the page loaded */ function zoomToBounds(bounds) { if (!bounds) { return; } + fixmystreet.markers.strategies[0].deactivate(); var center = bounds.getCenterLonLat(); var z = fixmystreet.map.getZoomForExtent(bounds); if ( z < 13 && $('html').hasClass('mobile') ) { z = 13; } fixmystreet.map.setCenter(center, z); + // Reactivate the strategy and make it think it's done an update + fixmystreet.markers.strategies[0].activate(); + fixmystreet.markers.strategies[0].calculateBounds(); + fixmystreet.markers.strategies[0].resolution = fixmystreet.map.getResolution(); } function sidebar_highlight(problem_id) { @@ -331,6 +338,8 @@ var fixmystreet = fixmystreet || {}; ); $("#problem_northing").text(bng.y.toFixed(1)); $("#problem_easting").text(bng.x.toFixed(1)); + $("#problem_latitude").text(lonlat.y.toFixed(6)); + $("#problem_longitude").text(lonlat.x.toFixed(6)); $("form#report_inspect_form input[name=latitude]").val(lonlat.y); $("form#report_inspect_form input[name=longitude]").val(lonlat.x); }, @@ -389,7 +398,10 @@ var fixmystreet = fixmystreet || {}; f.geometry = new_geometry; this.removeAllFeatures(); this.addFeatures([f]); - zoomToBounds(extent); + var qs = parse_query_string(); + if (!qs.bbox) { + zoomToBounds(extent); + } } else { fixmystreet.map.removeLayer(this); } @@ -476,8 +488,13 @@ var fixmystreet = fixmystreet || {}; format: new OpenLayers.Format.FixMyStreet() }); } - if (fixmystreet.page == 'reports' || fixmystreet.page == 'my') { + if (fixmystreet.page == 'reports') { + pin_layer_options.strategies = [ new OpenLayers.Strategy.FixMyStreetRefreshOnZoom() ]; + } + if (fixmystreet.page == 'my') { pin_layer_options.strategies = [ new OpenLayers.Strategy.FixMyStreetFixed() ]; + } + if (fixmystreet.page == 'reports' || fixmystreet.page == 'my') { pin_layer_options.protocol = new OpenLayers.Protocol.FixMyStreet({ url: fixmystreet.original.href.split('?')[0] + '?ajax=1', format: new OpenLayers.Format.FixMyStreet() @@ -779,6 +796,25 @@ OpenLayers.Strategy.FixMyStreet = OpenLayers.Class(OpenLayers.Strategy.BBOX, { } }); +/* This strategy will call for updates whenever the zoom changes, + * unlike the parent which only will if new area is included. It + * also does not update on load, as we already have the data. */ +OpenLayers.Strategy.FixMyStreetRefreshOnZoom = OpenLayers.Class(OpenLayers.Strategy.FixMyStreet, { + resFactor: 1.5, + activate: function() { + var activated = OpenLayers.Strategy.prototype.activate.call(this); + if (activated) { + this.layer.events.on({ + "moveend": this.update, + "refresh": this.update, + "visibilitychanged": this.update, + scope: this + }); + } + return activated; + } +}); + /* Copy of Strategy.Fixed, but with no initial load */ OpenLayers.Strategy.FixMyStreetFixed = OpenLayers.Class(OpenLayers.Strategy.Fixed, { activate: function() { @@ -801,6 +837,9 @@ OpenLayers.Strategy.FixMyStreetFixed = OpenLayers.Class(OpenLayers.Strategy.Fixe // params to /ajax if the user has filtered the map. OpenLayers.Protocol.FixMyStreet = OpenLayers.Class(OpenLayers.Protocol.HTTP, { read: function(options) { + // Show the loading indicator over the map + $('#loading-indicator').removeClass('hidden'); + $('#loading-indicator').attr('aria-hidden', false); // Pass the values of the category, status, and sort fields as query params $.each({ filter_category: 'filter_categories', status: 'statuses', sort: 'sort' }, function(key, id) { var val = $('#' + id).val(); @@ -817,17 +856,9 @@ OpenLayers.Protocol.FixMyStreet = OpenLayers.Class(OpenLayers.Protocol.HTTP, { /* Pan data handler */ OpenLayers.Format.FixMyStreet = OpenLayers.Class(OpenLayers.Format.JSON, { read: function(json, filter) { - // Check we haven't received the data after the map has been clicked. - if (fixmystreet.page == 'new') { - // If we have, we want to do nothing, which means returning an - // array of the back-projected version of the current pin - var pin = fixmystreet.markers.features[0].clone(); - pin.geometry.transform( - fixmystreet.map.getProjectionObject(), - new OpenLayers.Projection("EPSG:4326") - ); - return [ pin ]; - } + // Remove loading indicator + $('#loading-indicator').addClass('hidden'); + $('#loading-indicator').attr('aria-hidden', true); if (typeof json == 'string') { obj = OpenLayers.Format.JSON.prototype.read.apply(this, [json, filter]); } else { diff --git a/web/js/map-google-ol.js b/web/js/map-google-ol.js index 96ec6fe9b..7369a8e9f 100644 --- a/web/js/map-google-ol.js +++ b/web/js/map-google-ol.js @@ -33,8 +33,24 @@ fixmystreet.maps.config = function() { zoomDuration: 10 }; + var road_layer = {}; // Empty object defaults to standard road layer + + function apply_map_styles() { + var styledMapType = new google.maps.StyledMapType(fixmystreet_google_maps_custom_style); + this.mapObject.mapTypes.set('styled', styledMapType); + this.mapObject.setMapTypeId('styled'); + } + // If you want to apply a custom style to the road map (for example from + // a service such as snazzymaps.com) then define that style as a top-level + // variable called fixmystreet_google_maps_custom_style (you might have to + // override the maps/google-ol.html template to include your own JS file) + // and it'll automatically be applied. + if (typeof fixmystreet_google_maps_custom_style !== 'undefined') { + road_layer = { type: 'styled', eventListeners: { added: apply_map_styles } }; + } + fixmystreet.layer_options = [ - {}, + road_layer, { type: google.maps.MapTypeId.HYBRID } ]; }; |