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