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
  13 window.onload = function() {
  14   gAction = document.getElementById("action");
  15   gActionLabel = document.getElementById("actionlabel");
  16
  17   var mSel = document.getElementById("mapSelector");
  18   for (var mapStyle in gMapStyles) {
  19     var opt = document.createElement("option");
  20     opt.value = mapStyle;
  21     opt.text = gMapStyles[mapStyle].name;
  22     mSel.add(opt, null);
  23   }
  24
  25   var areas = document.getElementsByClassName('overlayArea');
  26   for (var i = 0; i <= areas.length - 1; i++) {
  27     areas[i].addEventListener("mouseup", uiEvHandler, false);
  28     areas[i].addEventListener("mousemove", uiEvHandler, false);
  29     areas[i].addEventListener("mousedown", uiEvHandler, false);
  30     areas[i].addEventListener("mouseout", uiEvHandler, false);
  31
  32     areas[i].addEventListener("touchstart", uiEvHandler, false);
  33     areas[i].addEventListener("touchmove", uiEvHandler, false);
  34     areas[i].addEventListener("touchend", uiEvHandler, false);
  35     areas[i].addEventListener("touchcancel", uiEvHandler, false);
  36     areas[i].addEventListener("touchleave", uiEvHandler, false);
  37   }
  38
  39   document.getElementById("body").addEventListener("keydown", uiEvHandler, false);
  40
  41   if (navigator.platform.length == "") {
  42     // For Firefox OS, don't display the "save" button.
  43     // Do this by setting the debugHide class for testing in debug mode.
  44     document.getElementById("saveTrackButton").classList.add("debugHide");
  45   }
  46
  47   initDB();
  48   initMap();
  49
  50   var loopCnt = 0;
  51   var waitForInitAndDraw = function() {
  52     if ((gWaitCounter <= 0) || (loopCnt > 100)) {
  53       if (gWaitCounter <= 0)
  54         gWaitCounter = 0;
  55       else
  56         console.log("Loading failed (waiting for init).");
  57
  58       gMapPrefsLoaded = true;
  59       resizeAndDraw();
  60       gActionLabel.textContent = "";
  61       gAction.style.display = "none";
  62       setTracking(document.getElementById("trackCheckbox"));
  63     }
  64     else
  65       setTimeout(waitForInitAndDraw, 100);
  66     loopCnt++;
  67   };
  68   waitForInitAndDraw();
  69 }
  70
  71 window.onresize = function() {
  72   resizeAndDraw();
  73 }
  74
  75 function initDB() {
  76   // Open DB.
  77   var request = window.indexedDB.open("MainDB-lantea", 2);
  78   request.onerror = function(event) {
  79     // Errors can be handled here. Error codes explain in:
  80     // https://developer.mozilla.org/en/IndexedDB/IDBDatabaseException#Constants
  81     if (gDebug)
  82       console.log("error opening mainDB: " + event.target.errorCode);
  83   };
  84   request.onsuccess = function(event) {
  85     mainDB = request.result;
  86   };
  87   request.onupgradeneeded = function(event) {
  88     mainDB = request.result;
  89     var ver = mainDB.version || 0; // version is empty string for a new DB
  90     if (gDebug)
  91       console.log("mainDB has version " + ver + ", upgrade needed.");
  92     if (!mainDB.objectStoreNames.contains("prefs")) {
  93       // Create a "prefs" objectStore.
  94       var prefsStore = mainDB.createObjectStore("prefs");
  95     }
  96     if (!mainDB.objectStoreNames.contains("track")) {
  97       // Create a "track" objectStore.
  98       var trackStore = mainDB.createObjectStore("track", {autoIncrement: true});
  99     }
 100     if (!mainDB.objectStoreNames.contains("tilecache")) {
 101       // Create a "tilecache" objectStore.
 102       var tilecacheStore = mainDB.createObjectStore("tilecache");
 103     }
 104     mainDB.onversionchange = function(event) {
 105       mainDB.close();
 106       mainDB = undefined;
 107       initDB();
 108     };
 109   };
 110 }
 111
 112 function showUI() {
 113   if (gUIHideCountdown <= 0) {
 114     var areas = document.getElementsByClassName('overlayArea');
 115     for (var i = 0; i <= areas.length - 1; i++) {
 116       areas[i].classList.remove("hidden");
 117     }
 118     setTimeout(maybeHideUI, 1000);
 119   }
 120   gUIHideCountdown = 5;
 121 }
 122
 123 function maybeHideUI() {
 124   gUIHideCountdown--;
 125   if (gUIHideCountdown <= 0) {
 126     var areas = document.getElementsByClassName('overlayArea');
 127     for (var i = 0; i <= areas.length - 1; i++) {
 128       areas[i].classList.add("hidden");
 129     }
 130   }
 131   else {
 132     setTimeout(maybeHideUI, 1000);
 133   }
 134 }
 135
 136 function toggleTrackArea() {
 137   var fs = document.getElementById("trackArea");
 138   if (fs.style.display != "block") {
 139     fs.style.display = "block";
 140     showUI();
 141   }
 142   else {
 143     fs.style.display = "none";
 144   }
 145 }
 146
 147 function toggleSettings() {
 148   var fs = document.getElementById("settingsArea");
 149   if (fs.style.display != "block") {
 150     fs.style.display = "block";
 151     showUI();
 152   }
 153   else {
 154     fs.style.display = "none";
 155   }
 156 }
 157
 158 function toggleFullscreen() {
 159   if ((document.fullScreenElement && document.fullScreenElement !== null) ||
 160       (document.mozFullScreenElement && document.mozFullScreenElement !== null) ||
 161       (document.webkitFullScreenElement && document.webkitFullScreenElement !== null)) {
 162     if (document.cancelFullScreen) {
 163       document.cancelFullScreen();
 164     } else if (document.mozCancelFullScreen) {
 165       document.mozCancelFullScreen();
 166     } else if (document.webkitCancelFullScreen) {
 167       document.webkitCancelFullScreen();
 168     }
 169   }
 170   else {
 171     var elem = document.getElementById("body");
 172     if (elem.requestFullScreen) {
 173       elem.requestFullScreen();
 174     } else if (elem.mozRequestFullScreen) {
 175       elem.mozRequestFullScreen();
 176     } else if (elem.webkitRequestFullScreen) {
 177       elem.webkitRequestFullScreen();
 178     }
 179   }
 180 }
 181
 182 var uiEvHandler = {
 183   handleEvent: function(aEvent) {
 184     var touchEvent = aEvent.type.indexOf('touch') != -1;
 185
 186     switch (aEvent.type) {
 187       case "mousedown":
 188       case "touchstart":
 189       case "mousemove":
 190       case "touchmove":
 191       case "mouseup":
 192       case "touchend":
 193       case "keydown":
 194         showUI();
 195         break;
 196     }
 197   }
 198 };
 199
 200 function makeISOString(aTimestamp) {
 201   // ISO time format is YYYY-MM-DDTHH:mm:ssZ
 202   var tsDate = new Date(aTimestamp);
 203   return tsDate.getUTCFullYear() + "-" +
 204          (tsDate.getUTCMonth() < 10 ? "0" : "") + tsDate.getUTCMonth() + "-" +
 205          (tsDate.getUTCDate() < 10 ? "0" : "") + tsDate.getUTCDate() + "T" +
 206          (tsDate.getUTCHours() < 10 ? "0" : "") + tsDate.getUTCHours() + ":" +
 207          (tsDate.getUTCMinutes() < 10 ? "0" : "") + tsDate.getUTCMinutes() + ":" +
 208          (tsDate.getUTCSeconds() < 10 ? "0" : "") + tsDate.getUTCSeconds() + "Z";
 209 }
 210
 211 function saveTrack() {
 212   if (gTrack.length) {
 213     var out = '<?xml version="1.0" encoding="UTF-8" ?>' + "\n\n";
 214     out += '<gpx version="1.0" creator="Lantea" xmlns="http://www.topografix.com/GPX/1/0">' + "\n";
 215     out += '  <trk>' + "\n";
 216     out += '    <trkseg>' + "\n";
 217     for (var i = 0; i < gTrack.length; i++) {
 218       if (gTrack[i].beginSegment && i > 0) {
 219         out += '    </trkseg>' + "\n";
 220         out += '    <trkseg>' + "\n";
 221       }
 222       out += '      <trkpt lat="' + gTrack[i].coords.latitude + '" lon="' +
 223                                     gTrack[i].coords.longitude + '">' + "\n";
 224       if (gTrack[i].coords.altitude) {
 225         out += '        <ele>' + gTrack[i].coords.altitude + '</ele>' + "\n";
 226       }
 227       out += '        <time>' + makeISOString(gTrack[i].time) + '</time>' + "\n";
 228       out += '      </trkpt>' + "\n";
 229     }
 230     out += '    </trkseg>' + "\n";
 231     out += '  </trk>' + "\n";
 232     out += '</gpx>' + "\n";
 233     var outDataURI = "data:application/gpx+xml," + encodeURIComponent(out);
 234     window.open(outDataURI, 'GPX Track');
 235   }
 236 }
 237
 238 function saveTrackDump() {
 239   if (gTrack.length) {
 240     var out = JSON.stringify(gTrack);
 241     var outDataURI = "data:application/json," + encodeURIComponent(out);
 242     window.open(outDataURI, 'JSON dump');
 243   }
 244 }
 245
 246 var gPrefs = {
 247   objStore: "prefs",
 248
 249   get: function(aKey, aCallback) {
 250     if (!mainDB)
 251       return;
 252     var transaction = mainDB.transaction([this.objStore]);
 253     var request = transaction.objectStore(this.objStore).get(aKey);
 254     request.onsuccess = function(event) {
 255       aCallback(request.result, event);
 256     };
 257     request.onerror = function(event) {
 258       // Errors can be handled here.
 259       aCallback(undefined, event);
 260     };
 261   },
 262
 263   set: function(aKey, aValue, aCallback) {
 264     if (!mainDB)
 265       return;
 266     var success = false;
 267     var transaction = mainDB.transaction([this.objStore], "readwrite");
 268     var objStore = transaction.objectStore(this.objStore);
 269     var request = objStore.put(aValue, aKey);
 270     request.onsuccess = function(event) {
 271       success = true;
 272       if (aCallback)
 273         aCallback(success, event);
 274     };
 275     request.onerror = function(event) {
 276       // Errors can be handled here.
 277       if (aCallback)
 278         aCallback(success, event);
 279     };
 280   },
 281
 282   unset: function(aKey, aCallback) {
 283     if (!mainDB)
 284       return;
 285     var success = false;
 286     var transaction = mainDB.transaction([this.objStore], "readwrite");
 287     var request = transaction.objectStore(this.objStore).delete(aKey);
 288     request.onsuccess = function(event) {
 289       success = true;
 290       if (aCallback)
 291         aCallback(success, event);
 292     };
 293     request.onerror = function(event) {
 294       // Errors can be handled here.
 295       if (aCallback)
 296         aCallback(success, event);
 297     }
 298   }
 299 };
 300
 301 var gTrackStore = {
 302   objStore: "track",
 303
 304   getList: function(aCallback) {
 305     if (!mainDB)
 306       return;
 307     var transaction = mainDB.transaction([this.objStore]);
 308     var objStore = transaction.objectStore(this.objStore);
 309     if (objStore.getAll) { // currently Mozilla-specific
 310       objStore.getAll().onsuccess = function(event) {
 311         aCallback(event.target.result);
 312       };
 313     }
 314     else { // Use cursor (standard method).
 315       var tPoints = [];
 316       objStore.openCursor().onsuccess = function(event) {
 317         var cursor = event.target.result;
 318         if (cursor) {
 319           tPoints.push(cursor.value);
 320           cursor.continue();
 321         }
 322         else {
 323           aCallback(tPoints);
 324         }
 325       };
 326     }
 327   },
 328
 329   push: function(aValue, aCallback) {
 330     if (!mainDB)
 331       return;
 332     var transaction = mainDB.transaction([this.objStore], "readwrite");
 333     var objStore = transaction.objectStore(this.objStore);
 334     var request = objStore.add(aValue);
 335     request.onsuccess = function(event) {
 336       if (aCallback)
 337         aCallback(request.result, event);
 338     };
 339     request.onerror = function(event) {
 340       // Errors can be handled here.
 341       if (aCallback)
 342         aCallback(false, event);
 343     };
 344   },
 345
 346   clear: function(aCallback) {
 347     if (!mainDB)
 348       return;
 349     var success = false;
 350     var transaction = mainDB.transaction([this.objStore], "readwrite");
 351     var request = transaction.objectStore(this.objStore).clear();
 352     request.onsuccess = function(event) {
 353       success = true;
 354       if (aCallback)
 355         aCallback(success, event);
 356     };
 357     request.onerror = function(event) {
 358       // Errors can be handled here.
 359       if (aCallback)
 360         aCallback(success, event);
 361     }
 362   }
 363 };