make sure the text field for the upload name doesn't overflow the screen

[lantea.git] / js / map.js

diff --git a/js/map.js b/js/map.js
index cd9eddd399dd889eac5b9b62e5954ec5df6bc539..ffafab4f8dfd768837f8ea67446851ce9336e5e2 100644 (file)
--- a/js/map.js
+++ b/js/map.js
@@ -129,15 +129,21 @@ function loadPrefs(aEvent) {
 
       document.getElementById("body").addEventListener("keydown", mapEvHandler, false);
 
+      document.addEventListener("visibilitychange", visibilityEvHandler, false);
+
+      console.log("Events added.");
       document.getElementById("copyright").innerHTML =
           gMapStyles[gMap.activeMap].copyright;
 
+      console.log("Init loading tile...");
       gLoadingTile = new Image();
-      gLoadingTile.src = "style/loading.png";
       gLoadingTile.onload = function() {
+        console.log("Loading tile loaded.");
         var throwEv = new CustomEvent("prefload-done");
         gAction.dispatchEvent(throwEv);
       };
+      console.log("Set loading tile...");
+      gLoadingTile.src = "style/loading.png";
     }
   }
   else {
@@ -252,12 +258,14 @@ var gMap = {
 
   initGL: function() {
     // When called from the event listener, the "this" reference doesn't work, so use the object name.
+    console.log("Initializing WebGL...");
     if (gMap.gl) {
       gMap.gl.viewport(0, 0, gMap.gl.drawingBufferWidth, gMap.gl.drawingBufferHeight);
       gMap.gl.clearColor(0.0, 0.0, 0.0, 0.5);                          // Set clear color to black, fully opaque.
       gMap.gl.clear(gMap.gl.COLOR_BUFFER_BIT|gMap.gl.DEPTH_BUFFER_BIT);  // Clear the color.
 
       // Create and initialize the shaders.
+      console.log("Create and compile shaders...");
       var vertShader = gMap.gl.createShader(gMap.gl.VERTEX_SHADER);
       var fragShader = gMap.gl.createShader(gMap.gl.FRAGMENT_SHADER);
       gMap.gl.shaderSource(vertShader, gMap.getVertShaderSource());
@@ -277,6 +285,7 @@ var gMap = {
         return null;
       }
 
+      console.log("Create and link shader program...");
       gMap.glShaderProgram = gMap.gl.createProgram();
       gMap.gl.attachShader(gMap.glShaderProgram, vertShader);
       gMap.gl.attachShader(gMap.glShaderProgram, fragShader);
@@ -291,6 +300,7 @@ var gMap = {
       gMap.glTextureCoordAttr = gMap.gl.getAttribLocation(gMap.glShaderProgram, "aTextureCoord");
       gMap.glResolutionAttr = gMap.gl.getUniformLocation(gMap.glShaderProgram, "uResolution");
 
+      console.log("Set up vertex buffer...");
       var tileVerticesBuffer = gMap.gl.createBuffer();
       gMap.gl.bindBuffer(gMap.gl.ARRAY_BUFFER, tileVerticesBuffer);
       // The vertices are the coordinates of the corner points of the square.
@@ -311,6 +321,7 @@ var gMap = {
       gMap.gl.uniform2f(gMap.glResolutionAttr, gGLMapCanvas.width, gGLMapCanvas.height);
 
       // Create a buffer for the position of the rectangle corners.
+      console.log("Set up coord buffer...");
       var mapVerticesTextureCoordBuffer = gMap.gl.createBuffer();
       gMap.gl.bindBuffer(gMap.gl.ARRAY_BUFFER, mapVerticesTextureCoordBuffer);
       gMap.gl.enableVertexAttribArray(gMap.glVertexPositionAttr);
@@ -368,7 +379,9 @@ var gMap = {
               var imgObj = new Image();
               imgObj.onload = function() {
                 gMap.loadImageToTexture(imgObj, aTileKey);
-                window.requestAnimationFrame(function(aTimestamp) { gMap.drawGL() });
+                if (document.hidden != true) { // Only draw if we're actually visible.
+                  window.requestAnimationFrame(function(aTimestamp) { gMap.drawGL() });
+                }
                 URL.revokeObjectURL(imgURL);
               }
               imgObj.src = imgURL;
@@ -377,7 +390,9 @@ var gMap = {
         }
       }
     }
-    window.requestAnimationFrame(function(aTimestamp) { gMap.drawGL() });
+    if (document.hidden != true) { // Only draw if we're actually visible.
+      window.requestAnimationFrame(function(aTimestamp) { gMap.drawGL() });
+    }
   },
 
   drawGL: function() {
@@ -482,8 +497,8 @@ var gMap = {
                                   y: Math.ceil((gMap.pos.y + gMap.baseDim.ht / 2) / gMap.baseDim.tsize) + 1,
                                   z: gMap.pos.z});
       console.log("In range: " + tMin.x + "," + tMin.y + "," + tMin.z + " - " + tMax.x + "," + tMax.y + "," + tMax.z);
-      for (aTileKey in gMap.glTextures) {
-        var keyMatches = aTileKey.match(/([^:]+)::(\d+),(\d+),(\d+)/);
+      for (var tileKey in gMap.glTextures) {
+        var keyMatches = tileKey.match(/([^:]+)::(\d+),(\d+),(\d+)/);
         if (keyMatches && keyMatches[1] != "loading") {
           var txData = {
             style: keyMatches[1],
@@ -510,8 +525,8 @@ var gMap = {
           }
           if (delTx) {
             // Delete texture from GL and from the array we are holding.
-            gMap.gl.deleteTexture(gMap.glTextures[aTileKey]);
-            delete gMap.glTextures[aTileKey];
+            gMap.gl.deleteTexture(gMap.glTextures[tileKey]);
+            delete gMap.glTextures[tileKey];
           }
         }
       }
@@ -636,13 +651,15 @@ function decodeIndex(encodedIdx) {
 }
 
 function drawTrack() {
-  gLastDrawnPoint = null;
-  gCurPosMapCache = undefined;
-  gTrackContext.clearRect(0, 0, gTrackCanvas.width, gTrackCanvas.height);
-  if (gTrack.length) {
-    for (var i = 0; i < gTrack.length; i++) {
-      drawTrackPoint(gTrack[i].coords.latitude, gTrack[i].coords.longitude,
-                     (i + 1 >= gTrack.length));
+  if (document.hidden != true) { // Only draw if we're actually visible.
+    gLastDrawnPoint = null;
+    gCurPosMapCache = undefined;
+    gTrackContext.clearRect(0, 0, gTrackCanvas.width, gTrackCanvas.height);
+    if (gTrack.length) {
+      for (var i = 0; i < gTrack.length; i++) {
+        drawTrackPoint(gTrack[i].coords.latitude, gTrack[i].coords.longitude,
+                      (i + 1 >= gTrack.length));
+      }
     }
   }
 }
@@ -951,6 +968,15 @@ var mapEvHandler = {
   }
 };
 
+function visibilityEvHandler() {
+  // Immediately draw if we just got visible.
+  if (document.hidden != true) {
+    gMap.draw();
+  }
+  // No need to handle the event where we become invisible as we care only draw
+  // when we are visible anyhow.
+}
+
 var geofake = {
   tracking: false,
   lastPos: {x: undefined, y: undefined},