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 +++++++++++++++------------------------------- web/js/map-google.js | 10 ---------- 2 files changed, 15 insertions(+), 41 deletions(-) (limited to 'web/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); diff --git a/web/js/map-google.js b/web/js/map-google.js index 0e7cd824e..5009bebac 100644 --- a/web/js/map-google.js +++ b/web/js/map-google.js @@ -119,9 +119,6 @@ function fms_map_clicked(e) { } $('#side').hide(); - if (typeof heightFix !== 'undefined') { - heightFix('#report-a-problem-sidebar', '.content', 26); - } // If we clicked the map somewhere inconvenient // TODO @@ -190,13 +187,6 @@ function fms_map_initialize() { paddingDiv.index = 0; fixmystreet.map.controls[google.maps.ControlPosition.RIGHT_TOP].push(paddingDiv); - if (fixmystreet.state_map && fixmystreet.state_map == 'full') { - // TODO Work better with window resizing, this is pretty 'set up' only at present - var q = fixmystreet_midpoint(); - // Need to try and fake the 'centre' being 75% from the edge - fixmystreet.map.panBy(-q, -25); - } - if (document.getElementById('mapForm')) { var l = google.maps.event.addListener(fixmystreet.map, 'click', fms_map_clicked); } -- cgit v1.2.3