rename DB to avoid collisions; implement key handling (for normal keyboard as well...
authorRobert Kaiser <kairo@kairo.at>
Fri, 22 Mar 2013 22:43:55 +0000 (23:43 +0100)
committerRobert Kaiser <kairo@kairo.at>
Fri, 22 Mar 2013 22:43:55 +0000 (23:43 +0100)
js/map.js
js/ui.js

index 22307dc..a3a459b 100644 (file)
--- a/js/map.js
+++ b/js/map.js
@@ -148,6 +148,8 @@ function initMap() {
 
   gTrackCanvas.addEventListener("wheel", mapEvHandler, false);
 
+  document.getElementById("body").addEventListener("keydown", mapEvHandler, false);
+
   document.getElementById("copyright").innerHTML =
       gMapStyles[gActiveMap].copyright;
 
@@ -187,6 +189,14 @@ function zoomOut() {
   }
 }
 
+function zoomTo(aTargetLevel) {
+  aTargetLevel = parseInt(aTargetLevel);
+  if (aTargetLevel >= 0 && aTargetLevel <= gMaxZoom) {
+    gPos.z = aTargetLevel;
+    drawMap();
+  }
+}
+
 function gps2xy(aLatitude, aLongitude) {
   var maxZoomFactor = Math.pow(2, gMaxZoom) * gTileSize;
   var convLat = aLatitude * Math.PI / 180;
@@ -417,8 +427,8 @@ var mapEvHandler = {
   handleEvent: function(aEvent) {
     var touchEvent = aEvent.type.indexOf('touch') != -1;
 
-    // Bail out on unwanted map moves, but not zoom-changing events.
-    if (aEvent.type != "DOMMouseScroll" && aEvent.type != "mousewheel") {
+    // Bail out on unwanted map moves, but not zoom or keyboard events.
+    if (aEvent.type.indexOf("mouse") === 0 || aEvent.type.indexOf("touch") === 0) {
       // Bail out if this is neither a touch nor left-click.
       if (!touchEvent && aEvent.button != 0)
         return;
@@ -526,6 +536,88 @@ var mapEvHandler = {
             zoomOut();
         }
         break;
+      case "keydown":
+        // Allow keyboard control to move and zoom the map.
+        // Should use aEvent.key instead of aEvent.which but needs bug 680830.
+        // See https://developer.mozilla.org/en-US/docs/DOM/Mozilla_event_reference/keydown
+        var dX = 0;
+        var dY = 0;
+        switch (aEvent.which) {
+          case 39: // right
+            dX = -gTileSize / 2;
+          break;
+          case 37: // left
+            dX = gTileSize / 2;
+          break;
+          case 38: // up
+            dY = gTileSize / 2;
+          break;
+          case 40: // down
+            dY = -gTileSize / 2;
+          break;
+          case 87: // w
+          case 107: // + (numpad)
+          case 171: // + (normal key)
+            zoomIn();
+          break;
+          case 83: // s
+          case 109: // - (numpad)
+          case 173: // - (normal key)
+            zoomOut();
+          break;
+          case 48: // 0
+          case 49: // 1
+          case 50: // 2
+          case 51: // 3
+          case 52: // 4
+          case 53: // 5
+          case 54: // 6
+          case 55: // 7
+          case 56: // 8
+            zoomTo(aEvent.which - 38);
+          break;
+          case 57: // 9
+            zoomTo(9);
+          break;
+          case 96: // 0 (numpad)
+          case 97: // 1 (numpad)
+          case 98: // 2 (numpad)
+          case 99: // 3 (numpad)
+          case 100: // 4 (numpad)
+          case 101: // 5 (numpad)
+          case 102: // 6 (numpad)
+          case 103: // 7 (numpad)
+          case 104: // 8 (numpad)
+            zoomTo(aEvent.which - 86);
+          break;
+          case 105: // 9 (numpad)
+            zoomTo(9);
+          break;
+          default: // not supported
+            console.log("key not supported: " + aEvent.which);
+          break;
+        }
+
+        // Move if needed.
+        if (dX || dY) {
+          gPos.x -= dX * gZoomFactor;
+          gPos.y -= dY * gZoomFactor;
+          if (true) { // use optimized path
+            var mapData = gMapContext.getImageData(0, 0,
+                                                   gMapCanvas.width,
+                                                   gMapCanvas.height);
+            gMapContext.clearRect(0, 0, gMapCanvas.width, gMapCanvas.height);
+            gMapContext.putImageData(mapData, dX, dY);
+            drawMap({left: (dX > 0) ? dX : 0,
+                     right: (dX < 0) ? -dX : 0,
+                     top: (dY > 0) ? dY : 0,
+                     bottom: (dY < 0) ? -dY : 0});
+          }
+          else {
+            drawMap(false, true);
+          }
+        }
+        break;
     }
   }
 };
index 2ff241f..b9c0519 100644 (file)
--- a/js/ui.js
+++ b/js/ui.js
@@ -36,6 +36,8 @@ window.onload = function() {
     areas[i].addEventListener("touchleave", uiEvHandler, false);
   }
 
+  document.getElementById("body").addEventListener("keydown", uiEvHandler, false);
+
   if (navigator.platform.length == "") {
     // For Firefox OS, don't display the "save" button.
     // Do this by setting the debugHide class for testing in debug mode.
@@ -72,7 +74,7 @@ window.onresize = function() {
 
 function initDB() {
   // Open DB.
-  var request = window.indexedDB.open("MainDB", 2);
+  var request = window.indexedDB.open("MainDB-lantea", 2);
   request.onerror = function(event) {
     // Errors can be handled here. Error codes explain in:
     // https://developer.mozilla.org/en/IndexedDB/IDBDatabaseException#Constants
@@ -188,6 +190,7 @@ var uiEvHandler = {
       case "touchmove":
       case "mouseup":
       case "touchend":
+      case "keydown":
         showUI();
         break;
     }