supported fullscreen width height scaling for firefox.

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

static/fossil/css/style.css

@@ -243,8 +243,6 @@ hr {
 .photowrapper #placeholder-left,
 .photowrapper #img-preview {
     margin-top: 15px;
-    width: 100%;
-    height: 100%;
 }
 
 #details {
@@ -375,15 +373,3 @@ hr {
 #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; }
-
-#test {  
-    position: absolute;
-    top: 10px;
-    right: 10px;
-    border: 1px solid red; 
-    display: block; 
-    background: #FFF; 
-    z-index: 2147483647;
-}
-
-

static/fossil/js/script.js

@@ -30,25 +30,49 @@ function exitHandler() {
 }
 
 
-function toggleFullscreen(elem) {
+function toggleFullscreen(elem, _id) {
     elem = elem || document.documentElement;
 
+    console.log("ID: "+_id);
     var ori_width = glob_width
     var ori_height = glob_height;
       
     var fs_scale;
+    var myRatio;
+    if (window.devicePixelRatio < 1) {
+        myRatio = 1.0;
+    } else {
+        myRatio = 2.0;
+    }
+        
+    $("#"+_id).css('width', 'auto')
+    $("#"+_id).css('height', 'auto')
 
     if (!document.fullscreenElement && !document.mozFullScreenElement &&
       !document.webkitFullscreenElement && !document.msFullscreenElement) { 
       if ((ori_height*1.2) > ori_width) {
-        newWidth = screen.width * (1/Math.ceil(window.devicePixelRatio));
-        newHeight = screen.width * (ori_height/ori_width) * (1/Math.ceil(window.devicePixelRatio));
+        //newWidth = screen.width * (1/Math.ceil(window.devicePixelRatio));
+        //newHeight = screen.width * (ori_height/ori_width) * (1/Math.ceil(window.devicePixelRatio));
+        newWidth = screen.width * (1/ myRatio);
+        newHeight = screen.width * (ori_height/ori_width) * (1/ myRatio);
+  
+        $("#"+_id).removeAttr('width');
+        $("#"+_id).height("80%");
       } else {
-        newHeight = screen.height * (1/Math.ceil(window.devicePixelRatio));
-        newWidth = screen.height * (ori_width/ori_height) * (1/Math.ceil(window.devicePixelRatio));
+        newHeight = screen.height * (1/myRatio);
+        newWidth = screen.height * (ori_width/ori_height) * (1/myRatio);
+        $("#"+_id).removeAttr('height');
+        $("#"+_id).width("100%");
+        //newHeight = screen.height * (1/Math.ceil(window.devicePixelRatio));
+        //newWidth = screen.height * (ori_width/ori_height) * (1/Math.ceil(window.devicePixelRatio));
       }
-      $(elem, "img").css("height", (newHeight)+"px");
-      $(elem, "img").css("width", (newWidth)+"px");
+
+      $(elem).css("height", (newHeight)+"px");
+      $(elem).css("width", (newWidth)+"px");
+
+      //$("#"+_id).removeAttr('width');
+      //$("#"+_id).height("80%");
+      //$(elem).css("width", "200px");
       
       $(elem).css("background-color", "black");
       $(elem).css("color", "#ccc");
@@ -63,7 +87,9 @@ function toggleFullscreen(elem) {
         elem.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
       }
     } else {
-      $(elem).css("width", "100%");
+      $("#"+_id).width('100%');
+      $("#"+_id).height("100%");
+      //$(elem).css("width", "100%");
       $(elem).css("background-color", "white");
       $(elem).css("color", "#000");
 
@@ -299,7 +325,7 @@ $(function() {
             glob_height = $("#photowrapper-front > img").height();
             glob_elem = $("#photowrapper-front")[0];
         }
-        toggleFullscreen(container[0]);
+        toggleFullscreen(container[0], this.id);
     });
 
     document.getElementById('img-top').addEventListener('click', function() {
@@ -310,7 +336,7 @@ $(function() {
             glob_height = $("#photowrapper-top > img").height();
             glob_elem = $("#photowrapper-top")[0];
         }
-        toggleFullscreen(container[0]);
+        toggleFullscreen(container[0], this.id);
     });
 
     document.getElementById('placeholder-left').addEventListener('click', function() {
@@ -321,7 +347,7 @@ $(function() {
             glob_height = $("#photowrapper-left > img").height();
             glob_elem = $("#photowrapper-left")[0];
         }
-        toggleFullscreen(container[0]);
+        toggleFullscreen(container[0], this.id);
     });
 
     $("#img-top").ezPlus({

templates/index.html

@@ -78,7 +78,7 @@
 	            <span id="image-text">Overview (Volume Rendering)</span>
             </div>
 	        <div class="photowrapper">
-                <img id="img-preview" src="img?id={{ index }}&name={{ name }}&type=preview&counter=0"/>
+                <img id="img-preview" width="100%" height="100%" src="img?id={{ index }}&name={{ name }}&type=preview&counter=0"/>
             <div id="text-desc">
             <p id="description"><span>Description</span>
                 {% for text_desc in desc %}
@@ -101,7 +101,7 @@
                     <span id="image-text">Front: <span id="front-text">1</span>&nbsp;&nbsp;&nbsp;&nbsp;<span id="front-quality-text"></span></span>
                     <img id="front-right" class="icon" src="{{ static_url("img/icon/right-arrow.svg") }}"/>
                 </div>
-                <img id="img-front" src="img?id={{ index }}&name={{ name }}&type=front-resized&counter=0"/>
+                <img id="img-front" width="100%" height="100%" src="img?id={{ index }}&name={{ name }}&type=front-resized&counter=0"/>
                 <div id="slider-right"></div><div class="slice-count" id="front-count">{{ front_count }}</div>
             </div>
         </div>
@@ -113,7 +113,7 @@
                     <span id="image-text">Top: <span id="top-text">1</span>&nbsp;&nbsp;&nbsp;&nbsp;<span id="top-quality-text"></span></span>
                     <img id="top-right" class="icon" src="{{ static_url("img/icon/right-arrow.svg") }}"/>
                 </div>
-                <img id="img-top" src="img?id={{ index }}&name={{ name }}&type=top-resized&counter=0" data-zoom-image="img?id={{ index }}&name={{ name }}&type=top-resized&counter=0" />
+                <img id="img-top"  width="100%" height="100%" src="img?id={{ index }}&name={{ name }}&type=top-resized&counter=0" data-zoom-image="img?id={{ index }}&name={{ name }}&type=top-resized&counter=0" />
 	            <div id="slider-center"></div><div class="slice-count" id="top-count">{{ top_count }}</div>
             </div>
 
@@ -123,7 +123,7 @@
                     <span id="image-text">Left: <span id="left-text">1</span>&nbsp;&nbsp;&nbsp;&nbsp;<span id="left-quality-text"></span></span>
                     <img id="left-right" class="icon" src="{{ static_url("img/icon/right-arrow.svg") }}"/>
                 </div>
-                <img id="placeholder-left" src="img?id={{ index }}&name={{ name }}&type=left-resized&counter=0"/>
+                <img id="placeholder-left" width="100%" height="100%" src="img?id={{ index }}&name={{ name }}&type=left-resized&counter=0"/>
 	            <div id="slider-left"></div><div class="slice-count" id="left-count">{{ left_count }}</div>
             </div>