diff options
| -rw-r--r-- | www/css/mobile.css | 1 | ||||
| -rw-r--r-- | www/js/map-OpenLayers.js | 7 | ||||
| -rw-r--r-- | www/js/views/around.js | 37 | ||||
| -rw-r--r-- | www/templates/en/around.html | 6 |
4 files changed, 48 insertions, 3 deletions
diff --git a/www/css/mobile.css b/www/css/mobile.css index 4a76eab..b3b4b9b 100644 --- a/www/css/mobile.css +++ b/www/css/mobile.css @@ -138,6 +138,7 @@ input.green-btn:hover { border-right: #BCEF58; } +#confirm, #mark-here { font-size: 1.2em; -moz-border-radius: 0.25em; diff --git a/www/js/map-OpenLayers.js b/www/js/map-OpenLayers.js index c5ce747..cd01de1 100644 --- a/www/js/map-OpenLayers.js +++ b/www/js/map-OpenLayers.js @@ -297,7 +297,7 @@ function show_map(event) { fixmystreet_onload(); fixContentHeight(fixmystreet.map); - var crosshairsControls, i, markHere, newX, newY; + var crosshairsControls, i, markHere, confirm, newX, newY; if (typeof fixmystreet !== 'undefined' && typeof fixmystreet.map !== "undefined") { // Update the position of any crosshairs controls: @@ -308,12 +308,17 @@ function show_map(event) { } // Also reposition the "Tap here to mark this point" button: markHere = $('#mark-here'); + confirm = $('#confirm'); newX = $(window).width() / 2 - markHere.width() / 2; newY = $(window).height() * 4 / 5 - markHere.height() / 2; markHere.css({ left: newX + "px", top: newY + "px" }); + confirm.css({ + left: newX + "px", + top: newY + "px" + }); } diff --git a/www/js/views/around.js b/www/js/views/around.js index 454f427..a323d7e 100644 --- a/www/js/views/around.js +++ b/www/js/views/around.js @@ -6,12 +6,19 @@ events: { 'pagehide': 'destroy', + 'pagebeforeshow': 'beforeDisplay', 'pageshow': 'afterDisplay', 'click #locate_search': 'goSearch', 'click #reports': 'goReports', 'click #search': 'goSearch', 'click #relocate': 'centerMapOnPosition', - 'click #mark-here': 'onClickReport' + 'click #cancel': 'onClickCancel', + 'click #confirm': 'onClickReport', + 'click #mark-here': 'onClickMark' + }, + + beforeDisplay: function() { + $('#cancel').hide(); }, afterDisplay: function() { @@ -48,6 +55,7 @@ var centre = this.projectCoords( coords ); fixmystreet.map.panTo(centre); } + this.displayButtons(); FMS.locator.trackPosition(); }, @@ -97,6 +105,33 @@ this.navigate('search'); }, + displayButtons: function() { + if ( this.model.get('lat') ) { + $('#cancel').show(); + $('#confirm').show(); + $('#mark-here').hide(); + } else { + $('#cancel').hide(); + $('#confirm').hide(); + $('#mark-here').show(); + } + }, + + onClickMark: function() { + $('#cancel').show(); + $('#confirm').show(); + $('#mark-here').hide(); + }, + + onClickCancel: function(e) { + e.preventDefault(); + $('#cancel').hide(); + $('#confirm').hide(); + $('#mark-here').show(); + this.model.set('lat', null); + this.model.set('lon', null); + }, + onClickReport: function() { var position = this.getCrossHairPosition(); diff --git a/www/templates/en/around.html b/www/templates/en/around.html index 4e9f8f9..251d2d0 100644 --- a/www/templates/en/around.html +++ b/www/templates/en/around.html @@ -1,5 +1,6 @@ <div data-id="locate" id="around-header" data-role="header" data-position="fixed"> <h1>Locate</h1> + <a href="#" id="cancel" class="ui-btn-right nodisplay">Cancel</a> </div> <div class="table-cell"> @@ -28,7 +29,10 @@ </div> <div class="container" data-enhance="false"> <a id="mark-here" class="nodisplay"> - Mark this point + New Report Here + </a> + <a id="confirm" class="nodisplay"> + Confirm location </a> <div class="content" role="main"> <form action="" method="post" name="mapForm" id="mapForm" enctype="multipart/form-data" class="validate"> |