aboutsummaryrefslogtreecommitdiffstats
path: root/web/js
diff options
context:
space:
mode:
Diffstat (limited to 'web/js')
-rw-r--r--web/js/fixmystreet.js32
-rw-r--r--web/js/map-OpenLayers.js246
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();
-}
-