From 7f135798a6523ba7e7e0125007550abc9cc6916c Mon Sep 17 00:00:00 2001 From: Zarino Zappia Date: Fri, 1 Apr 2016 15:36:49 +0100 Subject: Stop PanZoom giving controls hard-coded positions. We previously used !important to override them in the CSS, but better to prevent them being set in the JavaScript in the first place. --- web/js/map-OpenLayers.js | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) (limited to 'web/js/map-OpenLayers.js') diff --git a/web/js/map-OpenLayers.js b/web/js/map-OpenLayers.js index 267643898..bef9bd58f 100644 --- a/web/js/map-OpenLayers.js +++ b/web/js/map-OpenLayers.js @@ -547,6 +547,22 @@ OpenLayers.Control.PanZoomFMS = OpenLayers.Class(OpenLayers.Control.PanZoom, { break; } } + }, + moveTo: function(){}, + draw: function(px) { + // A customised version of .draw() that doesn't specify + // and dimensions/positions for the buttons, since we + // size and position them all using CSS. + OpenLayers.Control.prototype.draw.apply(this, arguments); + this.buttons = []; + this._addButton("panup", "north-mini.png"); + this._addButton("panleft", "west-mini.png"); + this._addButton("panright", "east-mini.png"); + this._addButton("pandown", "south-mini.png"); + this._addButton("zoomin", "zoom-plus-mini.png"); + this._addButton("zoomworld", "zoom-world-mini.png"); + this._addButton("zoomout", "zoom-minus-mini.png"); + return this.div; } }); -- cgit v1.2.3 From f87d065b307e4b952071836788d1acfc79fd63c6 Mon Sep 17 00:00:00 2001 From: Zarino Zappia Date: Mon, 4 Apr 2016 16:34:34 +0100 Subject: Allow scroll wheel to zoom map. --- web/js/map-OpenLayers.js | 3 --- 1 file changed, 3 deletions(-) (limited to 'web/js/map-OpenLayers.js') diff --git a/web/js/map-OpenLayers.js b/web/js/map-OpenLayers.js index bef9bd58f..b3f3a38d1 100644 --- a/web/js/map-OpenLayers.js +++ b/web/js/map-OpenLayers.js @@ -700,9 +700,6 @@ OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control, { trigger: function(e) { var cobrand = $('meta[name="cobrand"]').attr('content'); - if (typeof fixmystreet.nav_control != 'undefined') { - fixmystreet.nav_control.disableZoomWheel(); - } var lonlat = fixmystreet.map.getLonLatFromViewPortPx(e.xy); if (fixmystreet.page == 'new') { /* Already have a pin */ -- cgit v1.2.3 From 95c278025f06a08c22e490269d8784cda774b577 Mon Sep 17 00:00:00 2001 From: Zarino Zappia Date: Thu, 21 Apr 2016 16:50:22 +0100 Subject: Centre map on pin location when creating a report. Always centre the map on the new point when creating a new report. This will be helpful when the map element can change width to accommodate the .with-notes variant, is easier than the previous method, and feels very natural. --- web/js/map-OpenLayers.js | 48 +++++++++++++++++++----------------------------- 1 file changed, 19 insertions(+), 29 deletions(-) (limited to 'web/js/map-OpenLayers.js') diff --git a/web/js/map-OpenLayers.js b/web/js/map-OpenLayers.js index b3f3a38d1..e089a0bab 100644 --- a/web/js/map-OpenLayers.js +++ b/web/js/map-OpenLayers.js @@ -1,7 +1,7 @@ // This function might be passed either an OpenLayers.LonLat (so has // lon and lat) or an OpenLayers.Geometry.Point (so has x and y) function fixmystreet_update_pin(lonlat) { - lonlat.transform( + lonlat = lonlat.clone().transform( fixmystreet.map.getProjectionObject(), new OpenLayers.Projection("EPSG:4326") ); @@ -57,7 +57,7 @@ function fixmystreet_update_pin(lonlat) { function fixmystreet_activate_drag() { fixmystreet.drag = new OpenLayers.Control.DragFeature( fixmystreet.markers, { onComplete: function(feature, e) { - fixmystreet_update_pin( feature.geometry.clone() ); + fixmystreet_update_pin( feature.geometry ); } } ); fixmystreet.map.addControl( fixmystreet.drag ); @@ -723,16 +723,25 @@ OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control, { // Store pin location in form fields, and check coverage of point fixmystreet_update_pin(lonlat); - // Already did this first time map was clicked, so no need to do it again. + // It's possible to invoke the OpenLayers.Control `trigger` callback + // multiple times in a row (eg: by clicking on the map multiple times, + // to reposition your report). + // But there is some stuff we only want to happen the first time you + // switch from the "around" view to the "new" report view. + // So, here we check whether we've already transitioned into the "new" + // report view, and if so, we return from the callback early, + // skipping the remainder of the setup stuff. if (fixmystreet.page == 'new') { + fixmystreet.map.panDuration = 100; + fixmystreet.map.panTo(lonlat); + fixmystreet.map.panDuration = 50; return; } - fixmystreet.map.updateSize(); // might have done, and otherwise Firefox gets confused. /* For some reason on IOS5 if you use the jQuery show method it * doesn't display the JS validation error messages unless you do this * or you cause a screen redraw by changing the phone orientation. - * NB: This has to happen after the call to show() */ + * NB: This has to happen after the call to show() in fixmystreet_update_pin */ if ( navigator.userAgent.match(/like Mac OS X/i)) { document.getElementById('side-form').style.display = 'block'; } @@ -741,30 +750,11 @@ OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control, { heightFix('#report-a-problem-sidebar', '.content', 26); } - // If we clicked the map somewhere inconvenient - var sidebar = $('#report-a-problem-sidebar'); - if (sidebar.css('position') == 'absolute') { - var w = sidebar.width(), h = sidebar.height(), - o = sidebar.offset(), - $map_boxx = $('#map_box'), bo = $map_boxx.offset(); - // e.xy is relative to top left of map, which might not be top left of page - e.xy.x += bo.left; - e.xy.y += bo.top; - - // 24 and 64 is the width and height of the marker pin - if (e.xy.y <= o.top || (e.xy.x >= o.left && e.xy.x <= o.left + w + 24 && e.xy.y >= o.top && e.xy.y <= o.top + h + 64)) { - // top of the page, pin hidden by header; - // or underneath where the new sidebar will appear - lonlat.transform( - new OpenLayers.Projection("EPSG:4326"), - fixmystreet.map.getProjectionObject() - ); - var p = fixmystreet.map.getViewPortPxFromLonLat(lonlat); - p.x -= midpoint_box_excluding_column(o, w, bo, $map_boxx.width()); - lonlat = fixmystreet.map.getLonLatFromViewPortPx(p); - fixmystreet.map.panTo(lonlat); - } - } + fixmystreet.map.updateSize(); // might have done, and otherwise Firefox gets confused. + + fixmystreet.map.panDuration = 100; + fixmystreet.map.panTo(lonlat); + fixmystreet.map.panDuration = 50; $('#sub_map_links').hide(); if ($('html').hasClass('mobile')) { -- cgit v1.2.3 From 50c61f97568b59d6430c32fdcde7b76ac9f6f6f3 Mon Sep 17 00:00:00 2001 From: Zarino Zappia Date: Fri, 11 Mar 2016 16:33:10 +0000 Subject: Absolutely position map pages. This simplifies the page layout and code. We add a new #map_sidebar for sidebar positioning, and a $mappage-header-height (defaulting to 4em) variable. We no longer need: * position_map_box; * map_fix; * special visual centre calculation; or * custom pan zoom positioning. As the sidebar now scrolls by itself and nothing can extend outside: * The big-green-banner is set to 100% width (with negative margins no longer required); * For cobrands that have an overhanging sidebar (e.g. Zurich), we add a .with-notes variant that adds a second column to the sidebar, perfect for containing secondary notes about the form. The resizing of the banner also required some tweaking to the size of the chevron-white SVG images. Update the $.fn.drawer() method for the new layout. Works well in IE7+8, and degrades gracefully in IE6. For IE7, we remove the existing z-index hacks, and put a new, simpler, one in, and fix a CSS bug that was hiding the map. Various cobrands are updated to adapt to the changes. --- web/js/map-OpenLayers.js | 46 +++++++++++++++------------------------------- 1 file changed, 15 insertions(+), 31 deletions(-) (limited to 'web/js/map-OpenLayers.js') diff --git a/web/js/map-OpenLayers.js b/web/js/map-OpenLayers.js index e089a0bab..f5f5f2934 100644 --- a/web/js/map-OpenLayers.js +++ b/web/js/map-OpenLayers.js @@ -18,6 +18,7 @@ function fixmystreet_update_pin(lonlat) { } $('#side-form-error').html('

' + translation_strings.reporting_a_problem + '

' + data.error + '

').show(); $('#side-form').hide(); + $('body').removeClass('with-notes'); return; } $('#side-form, #site-logo').show(); @@ -72,9 +73,6 @@ function fixmystreet_zoomToBounds(bounds) { z = 13; } fixmystreet.map.setCenter(center, z); - if (fixmystreet.state_map && fixmystreet.state_map == 'full') { - fixmystreet.map.pan(-fixmystreet_midpoint(), -25, { animate: false }); - } } function fms_markers_list(pins, transform) { @@ -396,13 +394,10 @@ $(function(){ }, fixmystreet.map_options) ); - // Need to do this here, after the map is created - if ($('html').hasClass('mobile')) { - if (fixmystreet.page == 'around') { - $('#fms_pan_zoom').css({ top: '2.75em' }); - } - } else { - $('#fms_pan_zoom').css({ top: '4.75em' }); + // Need to do this here, after the map is created (might not have been when + // resize() called) + if ($('html').hasClass('mobile') && fixmystreet.page == 'around') { + $('#fms_pan_zoom').css({ top: '2.75em' }); } // Set it up our way @@ -440,10 +435,6 @@ $(function(){ fixmystreet.map.setCenter(centre, fixmystreet.zoom || 3); } - if (fixmystreet.state_map && fixmystreet.state_map == 'full') { - fixmystreet.map.pan(-fixmystreet_midpoint(), -25, { animate: false }); - } - if (document.getElementById('mapForm')) { var click = new OpenLayers.Control.Click(); fixmystreet.map.addControl(click); @@ -470,6 +461,8 @@ $(function(){ fixmystreet.drag.deactivate(); $('#side-form').hide(); $('#side').show(); + $('body').removeClass('with-notes'); + fixmystreet.map.updateSize(); // required after changing the size of the map element $('#sub_map_links').show(); //only on mobile $('#mob_sub_map_links').remove(); @@ -529,12 +522,8 @@ OpenLayers.Control.PanZoomFMS = OpenLayers.Class(OpenLayers.Control.PanZoom, { case "zoomin": case "zoomout": case "zoomworld": - var mid_point = 0; - if (fixmystreet.state_map && fixmystreet.state_map == 'full') { - mid_point = fixmystreet_midpoint(); - } var size = this.map.getSize(), - xy = { x: size.w / 2 + mid_point, y: size.h / 2 }; + xy = { x: size.w / 2, y: size.h / 2 }; switch (btn.action) { case "zoomin": this.map.zoomTo(this.map.getZoom() + 1, xy); @@ -576,14 +565,6 @@ OpenLayers.Control.PermalinkFMS = OpenLayers.Class(OpenLayers.Control.Permalink, } var center = this.map.getCenter(); - if ( center && fixmystreet.state_map && fixmystreet.state_map == 'full' ) { - // Translate the permalink co-ords so that 'centre' is accurate - var mid_point = fixmystreet_midpoint(); - var p = this.map.getViewPortPxFromLonLat(center); - p.x += mid_point; - p.y += 25; - center = this.map.getLonLatFromViewPortPx(p); - } var zoom = this.map.getZoom(); if ( alter_zoom ) { @@ -738,6 +719,12 @@ OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control, { return; } + // If there are notes to be displayed, add the .with-notes class + // to make the sidebar wider. + if ($('#report-a-problem-sidebar').length) { + $('body').addClass('with-notes'); + } + /* For some reason on IOS5 if you use the jQuery show method it * doesn't display the JS validation error messages unless you do this * or you cause a screen redraw by changing the phone orientation. @@ -746,11 +733,8 @@ OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control, { document.getElementById('side-form').style.display = 'block'; } $('#side').hide(); - if (typeof heightFix !== 'undefined') { - heightFix('#report-a-problem-sidebar', '.content', 26); - } - fixmystreet.map.updateSize(); // might have done, and otherwise Firefox gets confused. + fixmystreet.map.updateSize(); // required after changing the size of the map element fixmystreet.map.panDuration = 100; fixmystreet.map.panTo(lonlat); -- cgit v1.2.3