Merge lp:~joergberroth/unav/fix_map_longclick_behaviour into lp:unav

[JkB]

* small design fix for PoiListPage Button

*improved map long-click behavior to make it react as one would expect

* small design fix for PoiListPage Button

*improved map long-click behavior to make it react as one would expect

[Nekhelesh Ramananthan (nik90)]

Worked nicely! Nice work Joerg! So with release we have pinch-zoom, and long-press fixed as well. Great job guys!

@marcos, please do a code review. thnx

review: Approve (testing)

[lp:~joergberroth/unav/fix_map_longclick_behaviour]

58. By JkB on 2016-04-24

*set longpress to 300ms

59. By JkB on 2016-04-24

*merge with trunk

60. By JkB on 2016-04-24

*merge costales fixes

[costales (costales)]

So awesome hack! Thanks Joerg!

review: Approve

=== modified file 'nav/index.html'
--- nav/index.html	2016-04-22 17:32:31 +0000
+++ nav/index.html	2016-04-24 15:41:24 +0000
@@ -419,45 +419,43 @@
 		// Map events
 		// Clicks
 		var longpress = false;
-		map.on('singleclick', function(evt) {
-			if (longpress) {
+		var longpressTimer;
+		var pointerIsDown = false;
+		map.on('pointerdown', function(evt) {
+			longpress = false;
+			!pointerIsDown ? longpressTimer = window.setTimeout( function(){
+				longpress = true;
 				var coord = ol.proj.transform(evt.coordinate, 'EPSG:3857', 'EPSG:4326');
+				
 				while (coord[0] > 180) // Fix bug ol3 #4522
 					coord[0] = coord[0] - 360;
 				while (coord[0] < -180)
 					coord[0] = coord[0] + 360;
-				
+
 				ui.markers_POI_set([{title: '', lat: coord[1], lng: coord[0]}]);
-				
+
 				window.location = 'http://clicked_on_map?nofollow/' + coord[1] + '/' + coord[0] + '/none/none/none/none'; // Show popup
-			}
-			else {
-				window.location = 'http://hide_popup?';
-			}
-		});
-		
-		var startTime, endTime;
-		$("#map").on('touchstart', function () {
-			startTime = new Date().getTime();
-		});
-		$("#map").on('touchend', function () {
-			endTime = new Date().getTime();
-			longpress = (endTime - startTime < 225) ? false : true;
-		});
-		
-		/** TESTING BEGIN
-		$("#map").on('mousedown', function () {
-			startTime = new Date().getTime();
-		});
-		$("#map").on('mouseup', function () {
-			endTime = new Date().getTime();
-			longpress = (endTime - startTime < 225) ? false : true;
-		});
-		TESTING END **/
-		
+			},
+			300 /**longpress time constant **/ ) : undefined;
+			pointerIsDown=true;
+		});
+		
+		map.on('pointermove', function(evt) {
+			window.clearTimeout(longpressTimer);
+		});
+
+		map.on('singleclick', function(evt) {
+			!longpress ? window.location = 'http://hide_popup?' : undefined;
+		});
+
+		map.on('pointerup', function () {
+			window.clearTimeout(longpressTimer);
+			pointerIsDown=false;
+		});
+
 		// Drag
 		map.on('pointerdrag', function(evt) {
-			ui.set_zoom_unav(false); // Pinch zoom = custom zoom too
+			window.clearTimeout(longpressTimer);
 			
 			if (id_gps != 0 && ui.get_center_onpos()) { // Unfocus center if GPS ON
 				ui.set_center_onpos(false);
 
=== modified file 'qml/PoiListPage.qml'
--- qml/PoiListPage.qml	2016-04-20 17:36:04 +0000
+++ qml/PoiListPage.qml	2016-04-24 15:41:24 +0000
@@ -123,9 +123,10 @@
         id: distButton
         visible: false
         z: 500
+        width: parent.width*5/8
         anchors {
             top: distSlider.bottom
-            topMargin: units.gu (1)
+            topMargin: units.gu (3)
             horizontalCenter: parent.horizontalCenter
         }
         iconName: "reload"