diff options
| -rw-r--r-- | www/around.html | 5 | ||||
| -rw-r--r-- | www/css/base.css | 7 | ||||
| -rw-r--r-- | www/css/mobile.css | 26 | ||||
| -rw-r--r-- | www/frontpage-form.html | 35 | ||||
| -rw-r--r-- | www/frontpage-map.html | 125 | ||||
| -rw-r--r-- | www/index.html | 8 | ||||
| -rw-r--r-- | www/js/fixmystreet.js | 29 | ||||
| -rw-r--r-- | www/js/map-OpenLayers.js | 45 | ||||
| -rw-r--r-- | www/old-index.html | 112 |
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> |