diff options
Diffstat (limited to 'web/js')
-rw-r--r-- | web/js/fixmystreet.js | 32 | ||||
-rw-r--r-- | web/js/map-OpenLayers.js | 246 |
2 files changed, 146 insertions, 132 deletions
diff --git a/web/js/fixmystreet.js b/web/js/fixmystreet.js index 524bcdafa..b1a8f1889 100644 --- a/web/js/fixmystreet.js +++ b/web/js/fixmystreet.js @@ -10,11 +10,11 @@ function form_category_onchange() { }; if ( typeof fixmystreet !== 'undefined' ) { - args['latitude'] = fixmystreet.latitude; - args['longitude'] = fixmystreet.longitude; + args.latitude = fixmystreet.latitude; + args.longitude = fixmystreet.longitude; } else { - args['latitude'] = $('input[name="latitude"]').val(); - args['longitude'] = $('input[name="longitude"]').val(); + args.latitude = $('input[name="latitude"]').val(); + args.longitude = $('input[name="longitude"]').val(); } $.getJSON('/report/new/category_extras', args, function(data) { @@ -66,13 +66,14 @@ $(function(){ // FIXME - needs to use translated string jQuery.validator.addMethod('validCategory', function(value, element) { - return this.optional(element) || value != '-- Pick a category --'; }, validation_strings['category'] ); + return this.optional(element) || value != '-- Pick a category --'; }, validation_strings.category ); jQuery.validator.addMethod('validName', function(value, element) { var validNamePat = /\ba\s*n+on+((y|o)mo?u?s)?(ly)?\b/i; - return this.optional(element) || value.length > 5 && value.match( /\S/ ) && !value.match( validNamePat ) }, validation_strings['category'] ); + return this.optional(element) || value.length > 5 && value.match( /\S/ ) && !value.match( validNamePat ); }, validation_strings.category ); var form_submitted = 0; + var submitted = false; $("form.validate").validate({ rules: { @@ -87,17 +88,9 @@ $(function(){ errorElement: 'div', errorClass: 'form-error', // we do this to stop things jumping around on blur - success: function (err) { if ( form_submitted ) { err.addClass('label-valid').html( ' ' ); } else { err.addClass('label-valid-hidden'); } }, + success: function (err) { if ( form_submitted ) { err.addClass('label-valid').removeClass('label-valid-hidden').html( ' ' ); } else { err.addClass('label-valid-hidden'); } }, errorPlacement: function( error, element ) { - /* And all because the .before thing doesn't seem to work in - mobile safari on iOS 5. However outerHTML is not cross - browser so we have to have two solutions :( */ - if ( element[0].outerHTML ) { - var html = element.parent('div').html(); - element.parent('div').html( error[0].outerHTML + html ); - } else { - element.parent('div').before( error ); - } + element.parent('div').before( error ); }, submitHandler: function(form) { if (form.submit_problem) { @@ -108,7 +101,9 @@ $(function(){ }, // make sure we can see the error message when we focus on invalid elements showErrors: function( errorMap, errorList ) { - submitted && errorList.length && $(window).scrollTop( $(errorList[0].element).offset().top - 40 ); + if ( submitted && errorList.length ) { + $(window).scrollTop( $(errorList[0].element).offset().top - 40 ); + } this.defaultShowErrors(); submitted = false; }, @@ -140,8 +135,9 @@ $(function(){ } ); $('#email_alert').click(function(e) { - if (!$('#email_alert_box').length) + if (!$('#email_alert_box').length) { return true; + } e.preventDefault(); if ($('#email_alert_box').is(':visible')) { email_alert_close(); diff --git a/web/js/map-OpenLayers.js b/web/js/map-OpenLayers.js index c8bdb85df..fa93c2f4c 100644 --- a/web/js/map-OpenLayers.js +++ b/web/js/map-OpenLayers.js @@ -1,65 +1,46 @@ -$(function(){ - - var perm = new OpenLayers.Control.Permalink(); - set_map_config(perm); - - fixmystreet.map = new OpenLayers.Map("map", { - controls: fixmystreet.controls, - displayProjection: new OpenLayers.Projection("EPSG:4326") - }); - - fixmystreet.layer_options = OpenLayers.Util.extend({ - zoomOffset: fixmystreet.zoomOffset, - transitionEffect: 'resize', - numZoomLevels: fixmystreet.numZoomLevels - }, fixmystreet.layer_options); - var layer = new fixmystreet.map_type("", fixmystreet.layer_options); - fixmystreet.map.addLayer(layer); - - if (!fixmystreet.map.getCenter()) { - var centre = new OpenLayers.LonLat( fixmystreet.longitude, fixmystreet.latitude ); - centre.transform( - new OpenLayers.Projection("EPSG:4326"), - fixmystreet.map.getProjectionObject() - ); - fixmystreet.map.setCenter(centre, fixmystreet.zoom || 3); - } - - if (document.getElementById('mapForm')) { - var click = new OpenLayers.Control.Click(); - fixmystreet.map.addControl(click); - click.activate(); - } - - /* To let permalink not be caught by the Click layer, answer found - * at http://www.mail-archive.com/users@openlayers.org/msg12958.html - * Not sure why you can't use eventListeners or events.register... - */ - OpenLayers.Event.observe( perm.element, "click", function(e) { - OpenLayers.Event.stop(e); - location.href = OpenLayers.Event.element(e).href; - return false; - }); +// 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( + fixmystreet.map.getProjectionObject(), + new OpenLayers.Projection("EPSG:4326") + ); + document.getElementById('fixmystreet.latitude').value = lonlat.lat || lonlat.y; + document.getElementById('fixmystreet.longitude').value = lonlat.lon || lonlat.x; +} - $(window).hashchange(function(){ - if (location.hash) return; - // Okay, back to around view. - fixmystreet.bbox_strategy.activate(); - fixmystreet.markers.refresh( { force: true } ); - fixmystreet.drag.deactivate(); - $('#side-form').hide(); - $('#side').show(); - $('#sub_map_links').show(); - fixmystreet.page = 'around'; - }); +function fixmystreet_activate_drag() { + fixmystreet.drag = new OpenLayers.Control.DragFeature( fixmystreet.markers, { + onComplete: function(feature, e) { + fixmystreet_update_pin( feature.geometry.clone() ); + } + } ); + fixmystreet.map.addControl( fixmystreet.drag ); + fixmystreet.drag.activate(); +} - // Vector layers must be added onload as IE sucks - if ($.browser.msie) { - $(window).load(fixmystreet_onload); - } else { - fixmystreet_onload(); +function fms_markers_list(pins, transform) { + var cols = { 'red':'R', 'green':'G', 'blue':'B', 'purple':'P' }; + var markers = []; + for (var i=0; i<pins.length; i++) { + var pin = pins[i]; + var loc = new OpenLayers.Geometry.Point(pin[1], pin[0]); + if (transform) { + // The Strategy does this for us, so don't do it in that case. + loc.transform( + new OpenLayers.Projection("EPSG:4326"), + fixmystreet.map.getProjectionObject() + ); + } + var marker = new OpenLayers.Feature.Vector(loc, { + type: cols[pin[2]], + id: pin[3], + title: pin[4] || '' + }); + markers.push( marker ); } -}); + return markers; +} function fixmystreet_onload() { if ( fixmystreet.area ) { @@ -78,15 +59,25 @@ function fixmystreet_onload() { } var pin_layer_options = { + rendererOptions: { + yOrdering: true + }, styleMap: new OpenLayers.StyleMap({ 'default': new OpenLayers.Style({ - externalGraphic: "/i/pin${type}.gif", + externalGraphic: "/i/pin${type}.png", graphicTitle: "${title}", - graphicWidth: 32, - graphicHeight: 59, + graphicWidth: 44, + graphicHeight: 58, graphicOpacity: 1, - graphicXOffset: -2, - graphicYOffset: -59 + graphicXOffset: -22, + graphicYOffset: -58, + backgroundGraphic: "/i/pin-shadow.png", + backgroundWidth: 50, + backgroundHeight: 19, + backgroundXOffset: -7, + backgroundYOffset: -19, + graphicZIndex: 11, + backgroundGraphicZIndex: 10 }) }) }; @@ -173,28 +164,68 @@ function fixmystreet_onload() { } -function fms_markers_list(pins, transform) { - var cols = { 'red':'R', 'green':'G', 'blue':'B', 'purple':'P' }; - var markers = []; - for (var i=0; i<pins.length; i++) { - var pin = pins[i]; - var loc = new OpenLayers.Geometry.Point(pin[1], pin[0]); - if (transform) { - // The Strategy does this for us, so don't do it in that case. - loc.transform( - new OpenLayers.Projection("EPSG:4326"), - fixmystreet.map.getProjectionObject() - ); - } - var marker = new OpenLayers.Feature.Vector(loc, { - type: cols[pin[2]], - id: pin[3], - title: pin[4] - }); - markers.push( marker ); +$(function(){ + + var perm = new OpenLayers.Control.Permalink(); + set_map_config(perm); + + fixmystreet.map = new OpenLayers.Map("map", { + controls: fixmystreet.controls, + displayProjection: new OpenLayers.Projection("EPSG:4326") + }); + + fixmystreet.layer_options = OpenLayers.Util.extend({ + zoomOffset: fixmystreet.zoomOffset, + transitionEffect: 'resize', + numZoomLevels: fixmystreet.numZoomLevels + }, fixmystreet.layer_options); + var layer = new fixmystreet.map_type("", fixmystreet.layer_options); + fixmystreet.map.addLayer(layer); + + if (!fixmystreet.map.getCenter()) { + var centre = new OpenLayers.LonLat( fixmystreet.longitude, fixmystreet.latitude ); + centre.transform( + new OpenLayers.Projection("EPSG:4326"), + fixmystreet.map.getProjectionObject() + ); + fixmystreet.map.setCenter(centre, fixmystreet.zoom || 3); + } + + if (document.getElementById('mapForm')) { + var click = new OpenLayers.Control.Click(); + fixmystreet.map.addControl(click); + click.activate(); } - return markers; -} + + /* To let permalink not be caught by the Click layer, answer found + * at http://www.mail-archive.com/users@openlayers.org/msg12958.html + * Not sure why you can't use eventListeners or events.register... + */ + OpenLayers.Event.observe( perm.element, "click", function(e) { + OpenLayers.Event.stop(e); + location.href = OpenLayers.Event.element(e).href; + return false; + }); + + $(window).hashchange(function(){ + if (location.hash) { return; } + // Okay, back to around view. + fixmystreet.bbox_strategy.activate(); + fixmystreet.markers.refresh( { force: true } ); + fixmystreet.drag.deactivate(); + $('#side-form').hide(); + $('#side').show(); + $('#sub_map_links').show(); + fixmystreet.page = 'around'; + }); + + // Vector layers must be added onload as IE sucks + if ($.browser.msie) { + $(window).load(fixmystreet_onload); + } else { + fixmystreet_onload(); + } +}); /* Overridding the buttonDown function of PanZoom so that it does zoomTo(0) rather than zoomToMaxExtent() @@ -261,10 +292,13 @@ OpenLayers.Format.FixMyStreet = OpenLayers.Class(OpenLayers.Format.JSON, { } else { obj = json; } - if (typeof(obj.current) != 'undefined') - document.getElementById('current').innerHTML = obj.current; - if (typeof(obj.current_near) != 'undefined') - document.getElementById('current_near').innerHTML = obj.current_near; + var current, current_near; + if (typeof(obj.current) != 'undefined' && (current = document.getElementById('current'))) { + current.innerHTML = obj.current; + } + if (typeof(obj.current_near) != 'undefined' && (current_near = document.getElementById('current_near'))) { + current_near.innerHTML = obj.current_near; + } var markers = fms_markers_list( obj.pins, false ); return markers; }, @@ -283,16 +317,14 @@ OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control, { initialize: function(options) { this.handlerOptions = OpenLayers.Util.extend( - {}, this.defaultHandlerOptions - ); + {}, this.defaultHandlerOptions); OpenLayers.Control.prototype.initialize.apply( this, arguments ); this.handler = new OpenLayers.Handler.Click( this, { 'click': this.trigger - }, this.handlerOptions - ); + }, this.handlerOptions); }, trigger: function(e) { @@ -330,6 +362,13 @@ OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control, { } }); $('#side-form').show(); + /* 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() */ + if ( navigator.userAgent.match(/like Mac OS X/i)) { + document.getElementById('side-form').style.display = 'block'; + } $('#side').hide(); $('#sub_map_links').hide(); fixmystreet.page = 'new'; @@ -337,24 +376,3 @@ OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control, { } }); -// 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( - fixmystreet.map.getProjectionObject(), - new OpenLayers.Projection("EPSG:4326") - ); - document.getElementById('fixmystreet.latitude').value = lonlat.lat || lonlat.y; - document.getElementById('fixmystreet.longitude').value = lonlat.lon || lonlat.x; -} - -function fixmystreet_activate_drag() { - fixmystreet.drag = new OpenLayers.Control.DragFeature( fixmystreet.markers, { - onComplete: function(feature, e) { - fixmystreet_update_pin( feature.geometry.clone() ); - } - } ); - fixmystreet.map.addControl( fixmystreet.drag ); - fixmystreet.drag.activate(); -} - |