js/ui.js

   1 /* This Source Code Form is subject to the terms of the Mozilla Public
   2  * License, v. 2.0. If a copy of the MPL was not distributed with this file,
   3  * You can obtain one at http://mozilla.org/MPL/2.0/. */
   4
   5 // Get the best-available indexedDB object.
   6 window.indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || window.msIndexedDB;
   7 var mainDB;
   8
   9 var gUIHideCountdown = 0;
  10 var gWaitCounter = 0;
  11 var gAction, gActionLabel;
  12 var gOSMAPIURL = "http://api.openstreetmap.org/";
  13
  14 window.onload = function() {
  15   gAction = document.getElementById("action");
  16   gActionLabel = document.getElementById("actionlabel");
  17
  18   var mSel = document.getElementById("mapSelector");
  19   for (var mapStyle in gMapStyles) {
  20     var opt = document.createElement("option");
  21     opt.value = mapStyle;
  22     opt.text = gMapStyles[mapStyle].name;
  23     mSel.add(opt, null);
  24   }
  25
  26   var areas = document.getElementsByClassName('overlayArea');
  27   for (var i = 0; i <= areas.length - 1; i++) {
  28     areas[i].addEventListener("mouseup", uiEvHandler, false);
  29     areas[i].addEventListener("mousemove", uiEvHandler, false);
  30     areas[i].addEventListener("mousedown", uiEvHandler, false);
  31     areas[i].addEventListener("mouseout", uiEvHandler, false);
  32
  33     areas[i].addEventListener("touchstart", uiEvHandler, false);
  34     areas[i].addEventListener("touchmove", uiEvHandler, false);
  35     areas[i].addEventListener("touchend", uiEvHandler, false);
  36     areas[i].addEventListener("touchcancel", uiEvHandler, false);
  37     areas[i].addEventListener("touchleave", uiEvHandler, false);
  38   }
  39
  40   document.getElementById("body").addEventListener("keydown", uiEvHandler, false);
  41
  42   if (navigator.platform.length == "") {
  43     // For Firefox OS, don't display the "save" button.
  44     // Do this by setting the debugHide class for testing in debug mode.
  45     document.getElementById("saveTrackButton").classList.add("debugHide");
  46   }
  47
  48   // Without OAuth, the login data is useless
  49   //document.getElementById("uploadSettingsArea").classList.remove("debugHide");
  50   // As login data is useless for now, always enable upload button
  51   document.getElementById("uploadTrackButton").disabled = false;
  52
  53   if (gDebug) {
  54     // Note that GPX upload returns an error 500 on the dev API right now.
  55     gOSMAPIURL = "http://api06.dev.openstreetmap.org/";
  56   }
  57
  58   gAction.addEventListener("dbinit-done", initMap, false);
  59   gAction.addEventListener("mapinit-done", postInit, false);
  60   console.log("starting DB init...");
  61   initDB();
  62 }
  63
  64 function postInit(aEvent) {
  65   gAction.removeEventListener(aEvent.type, postInit, false);
  66   console.log("init done, draw map.");
  67   gMapPrefsLoaded = true;
  68   resizeAndDraw();
  69   gActionLabel.textContent = "";
  70   gAction.style.display = "none";
  71   setTracking(document.getElementById("trackCheckbox"));
  72   gPrefs.get(gDebug ? "osm_dev_user" : "osm_user", function(aValue) {
  73     if (aValue) {
  74       document.getElementById("uploadUser").value = aValue;
  75       document.getElementById("uploadTrackButton").disabled = false;
  76     }
  77   });
  78   gPrefs.get(gDebug ? "osm_dev_pwd" : "osm_pwd", function(aValue) {
  79     var upwd = document.getElementById("uploadPwd");
  80     if (aValue)
  81       document.getElementById("uploadPwd").value = aValue;
  82   });
  83 }
  84
  85 window.onresize = function() {
  86   resizeAndDraw();
  87 }
  88
  89 function initDB(aEvent) {
  90   // Open DB.
  91   if (aEvent)
  92     gAction.removeEventListener(aEvent.type, initDB, false);
  93   var request = window.indexedDB.open("MainDB-lantea", 2);
  94   request.onerror = function(event) {
  95     // Errors can be handled here. Error codes explain in:
  96     // https://developer.mozilla.org/en/IndexedDB/IDBDatabaseException#Constants
  97     if (gDebug)
  98       console.log("error opening mainDB: " + event.target.errorCode);
  99   };
 100   request.onsuccess = function(event) {
 101     mainDB = request.result;
 102     var throwEv = new CustomEvent("dbinit-done");
 103     gAction.dispatchEvent(throwEv);
 104   };
 105   request.onupgradeneeded = function(event) {
 106     mainDB = request.result;
 107     var ver = mainDB.version || 0; // version is empty string for a new DB
 108     if (gDebug)
 109       console.log("mainDB has version " + ver + ", upgrade needed.");
 110     if (!mainDB.objectStoreNames.contains("prefs")) {
 111       // Create a "prefs" objectStore.
 112       var prefsStore = mainDB.createObjectStore("prefs");
 113     }
 114     if (!mainDB.objectStoreNames.contains("track")) {
 115       // Create a "track" objectStore.
 116       var trackStore = mainDB.createObjectStore("track", {autoIncrement: true});
 117     }
 118     if (!mainDB.objectStoreNames.contains("tilecache")) {
 119       // Create a "tilecache" objectStore.
 120       var tilecacheStore = mainDB.createObjectStore("tilecache");
 121     }
 122     mainDB.onversionchange = function(event) {
 123       mainDB.close();
 124       mainDB = undefined;
 125       initDB();
 126     };
 127   };
 128 }
 129
 130 function showUI() {
 131   if (gUIHideCountdown <= 0) {
 132     var areas = document.getElementsByClassName('overlayArea');
 133     for (var i = 0; i <= areas.length - 1; i++) {
 134       areas[i].classList.remove("hidden");
 135     }
 136     setTimeout(maybeHideUI, 1000);
 137   }
 138   gUIHideCountdown = 5;
 139 }
 140
 141 function maybeHideUI() {
 142   gUIHideCountdown--;
 143   if (gUIHideCountdown <= 0) {
 144     var areas = document.getElementsByClassName('overlayArea');
 145     for (var i = 0; i <= areas.length - 1; i++) {
 146       areas[i].classList.add("hidden");
 147     }
 148   }
 149   else {
 150     setTimeout(maybeHideUI, 1000);
 151   }
 152 }
 153
 154 function toggleTrackArea() {
 155   var fs = document.getElementById("trackArea");
 156   if (fs.style.display != "block") {
 157     fs.style.display = "block";
 158     showUI();
 159   }
 160   else {
 161     fs.style.display = "none";
 162   }
 163 }
 164
 165 function toggleSettings() {
 166   var fs = document.getElementById("settingsArea");
 167   if (fs.style.display != "block") {
 168     fs.style.display = "block";
 169     showUI();
 170   }
 171   else {
 172     fs.style.display = "none";
 173   }
 174 }
 175
 176 function toggleFullscreen() {
 177   if ((document.fullScreenElement && document.fullScreenElement !== null) ||
 178       (document.mozFullScreenElement && document.mozFullScreenElement !== null) ||
 179       (document.webkitFullScreenElement && document.webkitFullScreenElement !== null)) {
 180     if (document.cancelFullScreen) {
 181       document.cancelFullScreen();
 182     } else if (document.mozCancelFullScreen) {
 183       document.mozCancelFullScreen();
 184     } else if (document.webkitCancelFullScreen) {
 185       document.webkitCancelFullScreen();
 186     }
 187   }
 188   else {
 189     var elem = document.getElementById("body");
 190     if (elem.requestFullScreen) {
 191       elem.requestFullScreen();
 192     } else if (elem.mozRequestFullScreen) {
 193       elem.mozRequestFullScreen();
 194     } else if (elem.webkitRequestFullScreen) {
 195       elem.webkitRequestFullScreen();
 196     }
 197   }
 198 }
 199
 200 function showUploadDialog() {
 201   var dia = document.getElementById("dialogArea");
 202   var areas = dia.children;
 203   for (var i = 0; i <= areas.length - 1; i++) {
 204     areas[i].style.display = "none";
 205   }
 206   document.getElementById("uploadDialog").style.display = "block";
 207   document.getElementById("uploadTrackButton").disabled = true;
 208   dia.classList.remove("hidden");
 209 }
 210
 211 function cancelDialog() {
 212   document.getElementById("dialogArea").classList.add("hidden");
 213   document.getElementById("uploadTrackButton").disabled = false;
 214 }
 215
 216 var uiEvHandler = {
 217   handleEvent: function(aEvent) {
 218     var touchEvent = aEvent.type.indexOf('touch') != -1;
 219
 220     switch (aEvent.type) {
 221       case "mousedown":
 222       case "touchstart":
 223       case "mousemove":
 224       case "touchmove":
 225       case "mouseup":
 226       case "touchend":
 227       case "keydown":
 228         showUI();
 229         break;
 230     }
 231   }
 232 };
 233
 234 function setUploadField(aField) {
 235   switch (aField.id) {
 236     case "uploadUser":
 237       gPrefs.set(gDebug ? "osm_dev_user" : "osm_user", aField.value);
 238       document.getElementById("uploadTrackButton").disabled = !aField.value.length;
 239       break;
 240     case "uploadPwd":
 241       gPrefs.set(gDebug ? "osm_dev_pwd" : "osm_pwd", aField.value);
 242       break;
 243   }
 244 }
 245
 246 function makeISOString(aTimestamp) {
 247   // ISO time format is YYYY-MM-DDTHH:mm:ssZ
 248   var tsDate = new Date(aTimestamp);
 249   return tsDate.getUTCFullYear() + "-" +
 250          (tsDate.getUTCMonth() < 10 ? "0" : "") + tsDate.getUTCMonth() + "-" +
 251          (tsDate.getUTCDate() < 10 ? "0" : "") + tsDate.getUTCDate() + "T" +
 252          (tsDate.getUTCHours() < 10 ? "0" : "") + tsDate.getUTCHours() + ":" +
 253          (tsDate.getUTCMinutes() < 10 ? "0" : "") + tsDate.getUTCMinutes() + ":" +
 254          (tsDate.getUTCSeconds() < 10 ? "0" : "") + tsDate.getUTCSeconds() + "Z";
 255 }
 256
 257 function convertTrack(aTargetFormat) {
 258   var out = "";
 259   switch (aTargetFormat) {
 260     case "gpx":
 261       out += '<?xml version="1.0" encoding="UTF-8" ?>' + "\n\n";
 262       out += '<gpx version="1.0" creator="Lantea" xmlns="http://www.topografix.com/GPX/1/0">' + "\n";
 263       if (gTrack.length) {
 264         out += '  <trk>' + "\n";
 265         out += '    <trkseg>' + "\n";
 266         for (var i = 0; i < gTrack.length; i++) {
 267           if (gTrack[i].beginSegment && i > 0) {
 268             out += '    </trkseg>' + "\n";
 269             out += '    <trkseg>' + "\n";
 270           }
 271           out += '      <trkpt lat="' + gTrack[i].coords.latitude + '" lon="' +
 272                                         gTrack[i].coords.longitude + '">' + "\n";
 273           if (gTrack[i].coords.altitude) {
 274             out += '        <ele>' + gTrack[i].coords.altitude + '</ele>' + "\n";
 275           }
 276           out += '        <time>' + makeISOString(gTrack[i].time) + '</time>' + "\n";
 277           out += '      </trkpt>' + "\n";
 278         }
 279         out += '    </trkseg>' + "\n";
 280         out += '  </trk>' + "\n";
 281       }
 282       out += '</gpx>' + "\n";
 283       break;
 284     case "json":
 285       out = JSON.stringify(gTrack);
 286       break;
 287     default:
 288       break;
 289   }
 290   return out;
 291 }
 292
 293 function saveTrack() {
 294   if (gTrack.length) {
 295     var outDataURI = "data:application/gpx+xml," +
 296                      encodeURIComponent(convertTrack("gpx"));
 297     window.open(outDataURI, 'GPX Track');
 298   }
 299 }
 300
 301 function saveTrackDump() {
 302   if (gTrack.length) {
 303     var outDataURI = "data:application/json," +
 304                      encodeURIComponent(convertTrack("json"));
 305     window.open(outDataURI, 'JSON dump');
 306   }
 307 }
 308
 309 function uploadTrack() {
 310   var dia = document.getElementById("dialogArea");
 311   var areas = dia.children;
 312   for (var i = 0; i <= areas.length - 1; i++) {
 313     areas[i].style.display = "none";
 314   }
 315   document.getElementById("uploadStatus").style.display = "block";
 316
 317   // See http://wiki.openstreetmap.org/wiki/Api06#Uploading_traces
 318   var trackBlob = new Blob([convertTrack("gpx")],
 319                            { "type" : "application/gpx+xml" });
 320   var formData = new FormData();
 321   formData.append("file", trackBlob);
 322   var desc = document.getElementById("uploadDesc").value;
 323   formData.append("description",
 324                   desc.length ? desc : "Track recorded via Lantea Maps");
 325   //formData.append("tags", "");
 326   formData.append("visibility",
 327                   document.getElementById("uploadVisibility").value);
 328   var XHR = new XMLHttpRequest();
 329   XHR.onreadystatechange = function() {
 330     if (XHR.readyState == 4 && XHR.status == 200) {
 331       // so far so good
 332       reportUploadStatus(true);
 333     } else if (XHR.readyState == 4 && XHR.status != 200) {
 334       // fetched the wrong page or network error...
 335       reportUploadStatus(false);
 336     }
 337   };
 338   XHR.open("POST", gOSMAPIURL + "api/0.6/gpx/create", true);
 339   // Cross-Origin XHR doesn't allow username/password (HTTP Auth).
 340   // So, we'll ask the user for entering credentials with rather ugly UI.
 341   XHR.withCredentials = true;
 342   try {
 343     XHR.send(formData);
 344   }
 345   catch (e) {
 346     reportUploadStatus(false, e);
 347   }
 348 }
 349
 350 function reportUploadStatus(aSuccess, aMessage) {
 351   document.getElementById("uploadStatusCloseButton").disabled = false;
 352   document.getElementById("uploadInProgress").style.display = "none";
 353   if (aSuccess) {
 354     document.getElementById("uploadSuccess").style.display = "block";
 355   }
 356   else if (aMessage) {
 357     document.getElementById("uploadErrorMsg").textContent = aMessage;
 358     document.getElementById("uploadError").style.display = "block";
 359   }
 360   else {
 361     document.getElementById("uploadFailed").style.display = "block";
 362   }
 363 }
 364
 365 var gPrefs = {
 366   objStore: "prefs",
 367
 368   get: function(aKey, aCallback) {
 369     if (!mainDB)
 370       return;
 371     var transaction = mainDB.transaction([this.objStore]);
 372     var request = transaction.objectStore(this.objStore).get(aKey);
 373     request.onsuccess = function(event) {
 374       aCallback(request.result, event);
 375     };
 376     request.onerror = function(event) {
 377       // Errors can be handled here.
 378       aCallback(undefined, event);
 379     };
 380   },
 381
 382   set: function(aKey, aValue, aCallback) {
 383     if (!mainDB)
 384       return;
 385     var success = false;
 386     var transaction = mainDB.transaction([this.objStore], "readwrite");
 387     var objStore = transaction.objectStore(this.objStore);
 388     var request = objStore.put(aValue, aKey);
 389     request.onsuccess = function(event) {
 390       success = true;
 391       if (aCallback)
 392         aCallback(success, event);
 393     };
 394     request.onerror = function(event) {
 395       // Errors can be handled here.
 396       if (aCallback)
 397         aCallback(success, event);
 398     };
 399   },
 400
 401   unset: function(aKey, aCallback) {
 402     if (!mainDB)
 403       return;
 404     var success = false;
 405     var transaction = mainDB.transaction([this.objStore], "readwrite");
 406     var request = transaction.objectStore(this.objStore).delete(aKey);
 407     request.onsuccess = function(event) {
 408       success = true;
 409       if (aCallback)
 410         aCallback(success, event);
 411     };
 412     request.onerror = function(event) {
 413       // Errors can be handled here.
 414       if (aCallback)
 415         aCallback(success, event);
 416     }
 417   }
 418 };
 419
 420 var gTrackStore = {
 421   objStore: "track",
 422
 423   getList: function(aCallback) {
 424     if (!mainDB)
 425       return;
 426     var transaction = mainDB.transaction([this.objStore]);
 427     var objStore = transaction.objectStore(this.objStore);
 428     if (objStore.getAll) { // currently Mozilla-specific
 429       objStore.getAll().onsuccess = function(event) {
 430         aCallback(event.target.result);
 431       };
 432     }
 433     else { // Use cursor (standard method).
 434       var tPoints = [];
 435       objStore.openCursor().onsuccess = function(event) {
 436         var cursor = event.target.result;
 437         if (cursor) {
 438           tPoints.push(cursor.value);
 439           cursor.continue();
 440         }
 441         else {
 442           aCallback(tPoints);
 443         }
 444       };
 445     }
 446   },
 447
 448   push: function(aValue, aCallback) {
 449     if (!mainDB)
 450       return;
 451     var transaction = mainDB.transaction([this.objStore], "readwrite");
 452     var objStore = transaction.objectStore(this.objStore);
 453     var request = objStore.add(aValue);
 454     request.onsuccess = function(event) {
 455       if (aCallback)
 456         aCallback(request.result, event);
 457     };
 458     request.onerror = function(event) {
 459       // Errors can be handled here.
 460       if (aCallback)
 461         aCallback(false, event);
 462     };
 463   },
 464
 465   clear: function(aCallback) {
 466     if (!mainDB)
 467       return;
 468     var success = false;
 469     var transaction = mainDB.transaction([this.objStore], "readwrite");
 470     var request = transaction.objectStore(this.objStore).clear();
 471     request.onsuccess = function(event) {
 472       success = true;
 473       if (aCallback)
 474         aCallback(success, event);
 475     };
 476     request.onerror = function(event) {
 477       // Errors can be handled here.
 478       if (aCallback)
 479         aCallback(success, event);
 480     }
 481   }
 482 };