added fullscreen on click feature.

Signed-off-by: root <root@ipekatrinadei.ipe.kit.edu>

static/fossil/css/style.css

@@ -355,3 +355,20 @@ hr {
     visibility: hidden;
 }
 
+#img-front { cursor:zoom-in;}
+#img-front:-webkit-full-screen { cursor:zoom-out; width: auto; }
+#img-front:-moz-full-screen { cursor:zoom-out; width: auto; }
+#img-front:-ms-fullscreen { cursor:zoom-out; width: auto; }
+#img-front:fullscreen { cursor:zoom-out; width: auto; }
+
+#img-top { cursor:zoom-in;}
+#img-top:-webkit-full-screen { cursor:zoom-out; width: auto; }
+#img-top:-moz-full-screen { cursor:zoom-out; width: auto; }
+#img-top:-ms-fullscreen { cursor:zoom-out; width: auto; }
+#img-top:fullscreen { cursor:zoom-out; width: auto; }
+
+#placeholder-left { cursor:zoom-in;}
+#placeholder-left:-webkit-full-screen { cursor:zoom-out; width: auto; }
+#placeholder-left:-moz-full-screen { cursor:zoom-out; width: auto; }
+#placeholder-left:-ms-fullscreen { cursor:zoom-out; width: auto; }
+#placeholder-left:fullscreen { cursor:zoom-out; width: auto; }

static/fossil/js/script.js

@@ -1,3 +1,39 @@
+function toggleFullscreen(elem) {
+    elem = elem || document.documentElement;
+    if (!document.fullscreenElement && !document.mozFullScreenElement &&
+      !document.webkitFullscreenElement && !document.msFullscreenElement) { 
+
+      img_fullscreen = $(elem).attr("src").split("-");
+      img_fullscreen = img_fullscreen[0] + "-" + img_fullscreen[1] + img_fullscreen[2].slice(7);
+      $(elem).attr("src", img_fullscreen);
+
+      if (elem.requestFullscreen) {
+        elem.requestFullscreen();
+      } else if (elem.msRequestFullscreen) {
+        elem.msRequestFullscreen();
+      } else if (elem.mozRequestFullScreen) {
+        elem.mozRequestFullScreen();
+      } else if (elem.webkitRequestFullscreen) {
+        elem.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
+      }
+    } else {
+
+      img_fullscreen = $(elem).attr("src").split("&");
+      img_fullscreen = img_fullscreen[0] + "&" + img_fullscreen[1] + "&" + img_fullscreen[2] + "-resized&" + img_fullscreen[3];
+      $(elem).attr("src", img_fullscreen);
+
+      if (document.exitFullscreen) {
+        document.exitFullscreen();
+      } else if (document.msExitFullscreen) {
+        document.msExitFullscreen();
+      } else if (document.mozCancelFullScreen) {
+        document.mozCancelFullScreen();
+      } else if (document.webkitExitFullscreen) {
+        document.webkitExitFullscreen();
+      }
+    }
+}
+
 $(function() {
 
     $("#front-quality-text").text( ($("#img-front").width()  / parseInt($("#top-count").text())).toFixed(2).toString() + "%");
@@ -189,4 +225,20 @@ $(function() {
         // update image src
         $("#placeholder-left").attr("src", "img?id="+id+"&name="+name+"&type=left-resized&counter="+index.toString());
     });
+
+    document.getElementById("img-front").addEventListener("click", function() {
+        console.log(this);
+        toggleFullscreen(this);
+    });
+
+    document.getElementById('img-top').addEventListener('click', function() {
+        console.log(this);
+        toggleFullscreen(this);
+    });
+
+    document.getElementById('placeholder-left').addEventListener('click', function() {
+        console.log(this);
+        toggleFullscreen(this);
+    });
+
 });