support full screen mode
authorRobert Kaiser <kairo@kairo.at>
Sun, 7 Oct 2012 21:23:50 +0000 (23:23 +0200)
committerRobert Kaiser <kairo@kairo.at>
Sun, 7 Oct 2012 21:23:50 +0000 (23:23 +0200)
TODO
index.html
js/ui.js
style/lantea.css

diff --git a/TODO b/TODO
index 708a0bd79a011f1038ad4a4138bfb6c0f79dd370..2bd847bad724b934a0f088d40f81ee7b073af7c5 100644 (file)
--- a/TODO
+++ b/TODO
@@ -16,7 +16,6 @@ Required:
 * Smoother animations for panning
 * Smooth animations for zooming, probably using some canvas magic
 * Use available larger/smaller tiles with resizing as loading placeholders while zooming in/out
-* Full screen mode
 * Save GPX tiles to the web (OSM? Public cloud service? Private service?)
 * Better GPX saving implementation [blocked by missing web APIs]
 ** Set file name to save into to a good default (date + maybe some location name)
index 2bfb6b56d80f5b536e763fe8521394018a7b53d6..d4b17c9820800709480bd79ba4a2f10fadb11e55 100644 (file)
@@ -15,7 +15,7 @@
   <link rel="stylesheet" href="style/lantea.css">
   <link rel="shortcut icon" href="style/lanteaIcon16.png" type="image/png">
 </head>
-<body>
+<body id="body">
 <h1>Lantea Map</h1>
 
 <div id="menuArea" class="overlayArea">
@@ -53,6 +53,12 @@ Map style:
        onclick="zoomOut();">
 </div>
 
+<div id="fullscreenArea" class="overlayArea">
+<!-- other possible characters: &#x25F0; -->
+<input type="button" id="fullscreenButton" value="&#x25A3;"
+       onclick="toggleFullscreen();">
+</div>
+
 <p id="debug" class="debugHide"></p>
 <p id="copyright" class="overlayArea"></p>
 
index 65992f77411bb1b0e1608514a15ea04f6bf2b2ab..6566a86254e010bdd15ba67fab587d8c7dab346e 100644 (file)
--- a/js/ui.js
+++ b/js/ui.js
@@ -115,6 +115,30 @@ function toggleSettings() {
   }
 }
 
+function toggleFullscreen() {
+  if ((document.fullScreenElement && document.fullScreenElement !== null) ||
+      (document.mozFullScreenElement && document.mozFullScreenElement !== null) ||
+      (document.webkitFullScreenElement && document.webkitFullScreenElement !== null)) {
+    if (document.cancelFullScreen) {
+      document.cancelFullScreen();
+    } else if (document.mozCancelFullScreen) {
+      document.mozCancelFullScreen();
+    } else if (document.webkitCancelFullScreen) {
+      document.webkitCancelFullScreen();
+    }
+  }
+  else {
+    var elem = document.getElementById("body");
+    if (elem.requestFullScreen) {
+      elem.requestFullScreen();
+    } else if (elem.mozRequestFullScreen) {
+      elem.mozRequestFullScreen();
+    } else if (elem.webkitRequestFullScreen) {
+      elem.webkitRequestFullScreen();
+    }
+  }
+}
+
 var uiEvHandler = {
   handleEvent: function(aEvent) {
     var touchEvent = aEvent.type.indexOf('touch') != -1;
index 23bd32d09d46b24849bfd7a7d21963b12c8b0252..1459ff06e07a03deb46ebaedcfa047740ed5f2ff 100644 (file)
@@ -27,6 +27,14 @@ h1 {
   text-align: center;
 }
 
+#fullscreenArea {
+  position: absolute;
+  right: 1%;
+  bottom: 2em;
+  z-index: 5;
+  text-align: center;
+}
+
 .overlayArea {
   transition-property: opacity;
   transition-duration: .2s;
@@ -52,7 +60,6 @@ h1 {
   padding: 0 3px;
 }
 
-
 #settingsArea,
 #trackArea {
   display: none;
@@ -70,10 +77,10 @@ h1 {
 
 #map {
   border: 0;
-  top: 1px;
-  left: 1px;
-  right: 1px;
-  bottom: 1px;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
   z-index: 1;
 }
 
@@ -121,6 +128,10 @@ h1 {
     top: 1px;
     right: 1px;
   }
+  #fullscreenArea {
+    right: 1px;
+    bottom: 10px;
+  }
   #copyright {
     bottom: 1px;
     right: 1px;