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