Fullscreen feature on screenshot/live img

client/assets/css/main.css

@@ -119,4 +119,5 @@ a {
 #screenshot img {
     max-width: 100%;
     margin-top: 10px;
+    cursor: pointer;
 }

client/assets/js/main.js

@@ -205,6 +205,33 @@ var liveClickHandler = function(e) {
     doScreenshot();
 }
 
+var screenshotImgClickHandler = function(e) {
+    var img = $screenshotImg.get(0);
+    var isFullscreen = parseInt($screenshotImg.attr('data-fullscreen'));
+
+    if (isFullscreen) {
+        $screenshotImg.attr('data-fullscreen', '0');
+
+        if (document.exitFullscreen) {
+            document.exitFullscreen();
+        } else if (document.webkitExitFullscreen) {
+            document.webkitExitFullscreen();
+        } else if (document.mozCancelFullScreen) {
+            document.mozCancelFullScreen();
+        }
+    } else {
+        $screenshotImg.attr('data-fullscreen', '1');
+
+        if (img.requestFullscreen) {
+            img.requestFullscreen();
+        } else if (img.webkitRequestFullscreen) {
+            img.webkitRequestFullscreen();
+        } else if (img.mozRequestFullScreen) {
+            img.mozRequestFullScreen();
+        }
+    }
+}
+
 var documentHashHandler = function() {
     var hash = window.location.hash;
 
@@ -240,6 +267,8 @@ var addListeners = function() {
         .on('touchmove', pointerTouchMoveHandler);
 
     $('#live').click(liveClickHandler);
+
+    $screenshotImg.click(screenshotImgClickHandler)
 }
 
 var bootstrap = function() {