aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--www/around.html5
-rw-r--r--www/css/base.css7
-rw-r--r--www/css/mobile.css26
-rw-r--r--www/frontpage-form.html35
-rw-r--r--www/frontpage-map.html125
-rw-r--r--www/index.html8
-rw-r--r--www/js/fixmystreet.js29
-rw-r--r--www/js/map-OpenLayers.js45
-rw-r--r--www/old-index.html112
9 files changed, 386 insertions, 6 deletions
diff --git a/www/around.html b/www/around.html
index edf1393..cdc84bf 100644
--- a/www/around.html
+++ b/www/around.html
@@ -1,6 +1,10 @@
<div id="around-page" class="wrapper" data-role="page">
+
<div class="table-cell">
<div class="container" data-enhance="false">
+ <a id="mark-here">
+ Mark this point
+ </a>
<div class="content" role="main">
<input type="hidden" name="zoom" value="2">
<form action="" method="post" name="mapForm" id="mapForm" enctype="multipart/form-data" class="validate">
@@ -28,6 +32,7 @@
$('#fixmystreet\\.longitude').val( localStorage.longitude );
$('#pc').val( localStorage.pc );
</script>
+
<div id="map_box">
<div id="map"></div>
<p id="sub_map_links">
diff --git a/www/css/base.css b/www/css/base.css
index fe7568e..93d971b 100644
--- a/www/css/base.css
+++ b/www/css/base.css
@@ -1640,6 +1640,13 @@ a:hover.button-left {
top: 44px !important;
}
+#fms_pan_zoom_panleft,
+#fms_pan_zoom_panright,
+#fms_pan_zoom_panup,
+#fms_pan_zoom_pandown {
+ display: none
+}
+
#sub_map_links {
position: absolute;
left: 0;
diff --git a/www/css/mobile.css b/www/css/mobile.css
index 7924a33..402b00b 100644
--- a/www/css/mobile.css
+++ b/www/css/mobile.css
@@ -137,3 +137,29 @@ input.green-btn:hover {
border-left: #BCEF58;
border-right: #BCEF58;
}
+
+#mark-here {
+ font-size: 1.2em;
+ -moz-border-radius: 0.25em;
+ -webkit-border-radius: 0.25em;
+ -o-border-radius: 0.25em;
+ -ms-border-radius: 0.25em;
+ -khtml-border-radius: 0.25em;
+ border-radius: 0.25em;
+ margin-top: 0.5em;
+ background: #9fde23;
+ border-top: #CAEF80;
+ border-left: #BCEF58;
+ border-right: #BCEF58;
+
+ position: absolute;
+ top: 360px;
+ left: 60px;
+ z-index: 2000;
+ display: block;
+ padding: 10px;
+}
+
+#OpenLayers_Control_Crosshairs_crosshairs {
+ pointer-events: none
+}
diff --git a/www/frontpage-form.html b/www/frontpage-form.html
new file mode 100644
index 0000000..4d746eb
--- /dev/null
+++ b/www/frontpage-form.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title></title>
+
+ <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
+ <meta charset="utf-8">
+
+ <link rel="stylesheet" href="css/base.css">
+ <link rel="stylesheet" href="css/mobile.css">
+
+ <script type="text/javascript" src="js/jquery-1.7.0.min.js"></script>
+ <script type="text/javascript" src="cordova-independent.js"></script>
+
+ <script type="text/javascript">
+
+ function onLoad() {
+ document.addEventListener("deviceready", onDeviceReady, false);
+ }
+
+ function onDeviceReady() {
+ var connectionType = navigator.network.connection.type;
+
+ }
+
+ </script>
+
+ </head>
+ <body id="container" class="frontpage fullwidthpage" onload="onLoad()" ontouchmove="touchmove(event);">
+
+ <p>The front page with a form.</p>
+
+ </body>
+</html>
+</html>
diff --git a/www/frontpage-map.html b/www/frontpage-map.html
new file mode 100644
index 0000000..3346b15
--- /dev/null
+++ b/www/frontpage-map.html
@@ -0,0 +1,125 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title></title>
+
+ <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
+ <meta charset="utf-8">
+
+ <link rel="stylesheet" href="css/base.css">
+ <link rel="stylesheet" href="css/mobile.css">
+
+ <script type="text/javascript" src="js/jquery-1.7.0.min.js"></script>
+ <script type="text/javascript" src="cordova-independent.js"></script>
+
+ <script type="text/javascript" src="js/json2.js"></script>
+ <script type="text/javascript" src="js/config.js"></script>
+ <script src="js/jquery.validate.min.js" type="text/javascript" charset="utf-8"></script>
+
+ <script type="text/javascript" src="js/geo.min.js"></script>
+ <script type="text/javascript" src="js/fixmystreet.js"></script>
+ <script type="text/javascript" src="js/mobile.js"></script>
+ <script type="text/javascript" src="js/OpenLayers.fixmystreet.js"></script>
+ <script type="text/javascript" src="js/map-OpenLayers.js"></script>
+ <script type="text/javascript" src="js/map-bing-ol.js"></script>
+ <script type="text/javascript" src="js/jquery.ba-hashchange.min.js"></script>
+
+ <script type="text/javascript">
+
+ var fixmystreet = {
+ 'page': 'around',
+ 'area': '',
+ 'all_pins': '',
+ 'latitude': localStorage.latitude,
+ 'longitude': localStorage.longitude,
+ 'zoom': 2,
+ 'numZoomLevels': 5,
+ 'zoomOffset': 13,
+ 'map_type': "",
+ 'pins': [ ]
+ };
+
+ $('#fixmystreet\\.latitude').val( localStorage.latitude );
+ $('#fixmystreet\\.longitude').val( localStorage.longitude );
+ $('#pc').val( localStorage.pc );
+
+ function onLoad() {
+ document.addEventListener("deviceready", onDeviceReady, false);
+ }
+
+ function gotPosition(position) {
+ localStorage.latitude = position.coords.latitude;
+ localStorage.longitude = position.coords.longitude;
+ localStorage.pc = '';
+ $(window).resize();
+ }
+
+ function positionError(error) {
+ alert('code: ' + error.code + '\n' +
+ 'message: ' + error.message + '\n');
+ }
+
+ function onDeviceReady() {
+ // Throw an error if no update is received every 30 seconds
+ var options = { timeout: 30000 };
+ watchID = navigator.geolocation.watchPosition(gotPosition, positionError, options);
+ }
+
+ </script>
+
+ <script type="text/javascript">
+ validation_strings = {
+ update: 'Please enter a message',
+ title: 'Please enter a subject',
+ detail: 'Please enter some details',
+ name: {
+ required: 'Please enter your name',
+ validName: 'Please enter your full name, councils need this information – if you do not wish your name to be shown on the site, untick the box below'
+ },
+ category: 'Please choose a category',
+ rznvy: {
+ required: 'Please enter your email',
+ email: 'Please enter a valid email'
+ },
+ email: {
+ required: 'Please enter your email',
+ email: 'Please enter a valid email'
+ }
+ };
+ </script>
+
+ </head>
+ <body id="container" class="frontpage fullwidthpage" onload="onLoad()" ontouchmove="touchmove(event);">
+
+ <div class="wrapper">
+
+ <header id="site-header" role="banner">
+ <div class="container">
+ <span id="site-logo"></span>
+ </div>
+ </header>
+
+ <a id="mark-here">
+ Mark this point
+ </a>
+
+ <div class="container">
+ <div class="content" role="main">
+
+ <div id="map_box">
+ <div id="map"></div>
+ <p id="sub_map_links">
+ <a id="hide_pins_link" rel="nofollow" href="">Hide pins</a>
+ <a id="all_pins_link" rel="nofollow" href="">Show old</a>
+ </p>
+ </div>
+ </div>
+ </div>
+
+
+ </div>
+
+
+ </body>
+</html>
+</html>
diff --git a/www/index.html b/www/index.html
index a8a00bf..df94d7f 100644
--- a/www/index.html
+++ b/www/index.html
@@ -78,12 +78,10 @@
<li>We send it to the council on your behalf</li>
</ol>
</div>
-
</div>
- </div><!-- .content role=main -->
- </div><!-- .container -->
- </div><!-- .table-cell -->
-
+ </div>
+ </div>
+ </div>
<div data-role="footer" data-id="foo1" data-position="fixed">
<div data-role="navbar">
<ul>
diff --git a/www/js/fixmystreet.js b/www/js/fixmystreet.js
index 878706e..71a4f96 100644
--- a/www/js/fixmystreet.js
+++ b/www/js/fixmystreet.js
@@ -1,4 +1,4 @@
-/*
+/* -*- mode: espresso; espresso-indent-level: 4; indent-tabs-mode: nil -*-
* fixmystreet.js
* FixMyStreet JavaScript
*/
@@ -118,6 +118,33 @@ $(document).bind('pageshow', function(){
margin: ''
});
}
+
+ $('span.report-a-problem-btn').on('click.reportBtn', function(){
+ $('html, body').animate({scrollTop:0}, 500);
+ }).css({ cursor:'pointer' }).on('hover.reportBtn', function(){
+ $(this).toggleClass('hover');
+ });
+
+ var crosshairsControls, i, markHere, newX, newY;
+
+ if (typeof fixmystreet !== 'undefined' && typeof fixmystreet.map !== "undefined") {
+ // Update the position of any crosshairs controls:
+ crosshairsControls = fixmystreet.map.getControlsByClass(
+ "OpenLayers.Control.Crosshairs");
+ for (i = 0; i < crosshairsControls.length; ++i) {
+ crosshairsControls[i].reposition();
+ }
+ // Also reposition the "Tap here to mark this point" button:
+ console.log('reposition mark-here');
+ markHere = $('#mark-here');
+ newX = $(window).width() / 2 - markHere.width() / 2;
+ newY = $(window).height() * 4 / 5 - markHere.height() / 2;
+ markHere.css({
+ left: newX + "px",
+ top: newY + "px"
+ });
+ console.log( newX + ', ' + newY );
+ }
});
//add mobile class if small screen
diff --git a/www/js/map-OpenLayers.js b/www/js/map-OpenLayers.js
index 3c136cf..7edcffa 100644
--- a/www/js/map-OpenLayers.js
+++ b/www/js/map-OpenLayers.js
@@ -1,3 +1,5 @@
+// -*- mode: espresso; espresso-indent-level: 4; indent-tabs-mode: nil -*-
+
// 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) {
@@ -204,6 +206,7 @@ function fixmystreet_onload() {
}
});
+ fixmystreet.map.addControl( new OpenLayers.Control.Crosshairs(null) );
}
OpenLayers.Map.prototype.getCurrentSize = function() {
var mapDiv = $(this.div);
@@ -369,6 +372,48 @@ $(document).delegate('#around-page', 'pageshow', show_map );
$(document).delegate('#report-page', 'pageshow', show_map );
+OpenLayers.Control.Crosshairs = OpenLayers.Class.create();
+OpenLayers.Control.Crosshairs.CROSSHAIR_SIDE = 100;
+OpenLayers.Control.Crosshairs.DIV_ID = "OpenLayers_Control_Crosshairs_crosshairs";
+OpenLayers.Control.Crosshairs.prototype =
+ OpenLayers.Class.inherit( OpenLayers.Control, {
+ element: null,
+ position: null,
+
+ initialize: function(element) {
+ OpenLayers.Control.prototype.initialize.apply(this, arguments);
+ this.element = OpenLayers.Util.getElement(element);
+ this.imageSize = new OpenLayers.Size(OpenLayers.Control.Crosshairs.CROSSHAIR_SIDE,
+ OpenLayers.Control.Crosshairs.CROSSHAIR_SIDE);
+ },
+
+ draw: function() {
+ var position;
+ OpenLayers.Control.prototype.draw.apply(this, arguments);
+ position = this.getIdealPosition();
+ this.buttons = new Array();
+ var imgLocation = OpenLayers.Util.getImagesLocation() + "crosshairs-100.png";
+ return OpenLayers.Util.createAlphaImageDiv(OpenLayers.Control.Crosshairs.DIV_ID,
+ position, this.imageSize, imgLocation, "absolute");
+ },
+
+ getIdealPosition: function() {
+ this.map.updateSize();
+ var mapSize = this.map.getSize();
+ return new OpenLayers.Pixel((mapSize.w / 2) - (this.imageSize.w / 2),
+ (2 * mapSize.h / 5) - (this.imageSize.h / 2));
+ },
+
+ reposition: function() {
+ var position = this.getIdealPosition();
+ $('#' + OpenLayers.Control.Crosshairs.DIV_ID).css({
+ left: position.x,
+ top: position.y});
+ },
+
+ CLASS_NAME: "OpenLayers.Control.Crosshairs"
+});
+
/* Overridding the buttonDown function of PanZoom so that it does
zoomTo(0) rather than zoomToMaxExtent()
*/
diff --git a/www/old-index.html b/www/old-index.html
new file mode 100644
index 0000000..cc85172
--- /dev/null
+++ b/www/old-index.html
@@ -0,0 +1,112 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title></title>
+
+ <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
+ <meta charset="utf-8">
+
+ <link rel="stylesheet" href="css/base.css">
+ <link rel="stylesheet" href="css/mobile.css">
+
+ <script type="text/javascript" src="js/jquery-1.7.0.min.js"></script>
+ <script type="text/javascript" src="cordova-independent.js"></script>
+
+ <script type="text/javascript" src="js/json2.js"></script>
+ <script type="text/javascript" src="js/config.js"></script>
+ <script src="js/jquery.validate.min.js" type="text/javascript" charset="utf-8"></script>
+
+ <script type="text/javascript" src="js/geo.min.js"></script>
+ <script type="text/javascript" src="js/fixmystreet.js"></script>
+ <script type="text/javascript" src="js/mobile.js"></script>
+
+ <script type="text/javascript">
+ validation_strings = {
+ update: 'Please enter a message',
+ title: 'Please enter a subject',
+ detail: 'Please enter some details',
+ name: {
+ required: 'Please enter your name',
+ validName: 'Please enter your full name, councils need this information – if you do not wish your name to be shown on the site, untick the box below'
+ },
+ category: 'Please choose a category',
+ rznvy: {
+ required: 'Please enter your email',
+ email: 'Please enter a valid email'
+ },
+ email: {
+ required: 'Please enter your email',
+ email: 'Please enter a valid email'
+ }
+ };
+ </script>
+ </head>
+ <body id="container" class="frontpage fullwidthpage" ontouchmove="touchmove(event);">
+
+ <div class="wrapper">
+ <div class="table-cell">
+ <header id="site-header" role="banner">
+ <div class="container">
+ <span id="site-logo"></span>
+ </div>
+ </header>
+
+ <div id="user-meta" class="hidden"></div>
+
+ <div class="container">
+ <div class="content" role="main">
+ <div id="front-main">
+ <div id="front-main-container">
+ <form action="" method="get" name="postcodeForm" id="postcodeForm">
+ <label for="pc">Enter a nearby GB postcode, or street name and area:</label>
+ <div>
+ <input type="text" name="pc" value="" id="pc" size="10" maxlength="200" placeholder="e.g. ‘B2 4QA’ or ‘Tib St, Manchester’">
+ <input type="submit" value="Go" id="submit">
+ </div>
+ </form>
+ </div>
+ </div>
+
+ <div class="tablewrapper">
+ <div id="front-howto">
+ <h2>How to report a problem</h2>
+
+ <ol class="big-numbers">
+ <li>Enter a nearby GB postcode, or street name and area</li>
+ <li>Locate the problem on a map of the area</li>
+ <li>Enter details of the problem</li>
+ <li>We send it to the council on your behalf</li>
+ </ol>
+ </div>
+
+ </div>
+ </div><!-- .content role=main -->
+ </div><!-- .container -->
+ </div><!-- .table-cell -->
+
+ <div class="mobile-info">
+ <a href="about.html">i</a>
+ </div>
+
+ <div class="big-green-banner mobile-map-banner mobile-sign-in-banner">
+ <a id="sign_in" href="sign_in.html">Sign In</a><a id="sign_out" href="#" onclick="sign_out();">Sign Out</a>
+ </div>
+ </div> <!-- .wrapper -->
+
+ <div class="spinner" id="loadingSpinner">
+ <div class="bar1"></div>
+ <div class="bar2"></div>
+ <div class="bar3"></div>
+ <div class="bar4"></div>
+ <div class="bar5"></div>
+ <div class="bar6"></div>
+ <div class="bar7"></div>
+ <div class="bar8"></div>
+ <div class="bar9"></div>
+ <div class="bar10"></div>
+ <div class="bar11"></div>
+ <div class="bar12"></div>
+ </div>
+ </body>
+</html>
+</html>