Fix an (irrelevant) confusion about addEventListener.

[pr0n] / files / pr0n-fullscreen.js

diff --git a/files/pr0n-fullscreen.js b/files/pr0n-fullscreen.js
index 45b60c6737470342d47a5ba57a5459ef9337ee0c..f08605cb1640f47490c13ec3b7ce3aa19559d6a4 100644 (file)
--- a/files/pr0n-fullscreen.js
+++ b/files/pr0n-fullscreen.js
@@ -104,7 +104,7 @@ function rename_element(old_name, new_name)
        return elem;
 }
 
-function display_image(url, backend_width, backend_height, elem_id, offset, box)
+function display_image(url, backend_width, backend_height, elem_id, offset)
 {
        // See if this image already exists in the DOM; if not, add it.
        var img = document.getElementById(elem_id);
@@ -112,7 +112,7 @@ function display_image(url, backend_width, backend_height, elem_id, offset, box)
                img = document.createElement("img");
                img.id = elem_id;
                img.alt = "";
-               img.className = box ? "fsbox" : "fsimg";
+               img.className = "fsimg";
        }
        img.style.position = "absolute";
        img.style.transformOrigin = "top left";
@@ -120,7 +120,7 @@ function display_image(url, backend_width, backend_height, elem_id, offset, box)
 
        if (offset === 0) {
                img.src = url;
-               position_image(img, backend_width, backend_height, offset, box);
+               position_image(img, backend_width, backend_height, offset, false);
        } else {
                // This is a preload, so wait for the main image to be ready.
                // The test for .complete is an old IE hack, which I don't know if is relevant anymore.
@@ -128,15 +128,44 @@ function display_image(url, backend_width, backend_height, elem_id, offset, box)
                if (main_img === null || main_img.complete) {
                        img.src = url;
                } else {
-                       main_img.addEventListener('load', function() { img.src = url; }, false);
+                       main_img.addEventListener('load', function() { img.src = url; }, { 'once': true });
                }
 
                // Seemingly one needs to delay position_image(), or Firefox will set the initial
                // scroll offset completely off.
                img.style.display = 'none';
                setTimeout(function() {
-                       position_image(img, backend_width, backend_height, offset, box);
-                       img.style.display = null;
+                       img.style.display = null;  // Must be done before position_image(), for measurement.
+                       position_image(img, backend_width, backend_height, offset, false);
+               }, 1);
+       }
+}
+
+function display_infobox(html, backend_width, backend_height, elem_id, offset)
+{
+       // See if this image already exists in the DOM; if not, add it.
+       var box = document.getElementById(elem_id);
+       if (box === null) {
+               box = document.createElement("div");
+               box.id = elem_id;
+               box.alt = "";
+               box.className = "fsbox";
+       }
+       box.style.position = "absolute";
+       box.style.transformOrigin = "top left";
+       box.innerHTML = html;
+       document.getElementById("main").appendChild(box);
+
+       if (offset === 0) {
+               position_image(box, backend_width, backend_height, offset, true);
+       } else {
+               // This is a preload.
+               // Seemingly one needs to delay position_image(), or Firefox will set the initial
+               // scroll offset completely off.
+               box.style.display = 'none';
+               setTimeout(function() {
+                       box.style.display = null;  // Must be done before position_image(), for measurement.
+                       position_image(box, backend_width, backend_height, offset, true);
                }, 1);
        }
 }
@@ -160,19 +189,11 @@ function display_image_num(num, offset)
        var url = window.location.origin + "/" + evt + "/" + backend_width + "x" + backend_height + "/" + filename;
        var elem_id = num;
 
-       display_image(url, adjusted_size[2], adjusted_size[3], elem_id, offset, false);
+       display_image(url, adjusted_size[2], adjusted_size[3], elem_id, offset);
 
        if (global_infobox) {
-               var url;
-               var dpr = find_dpr();
                var elem_id = num + "_box";
-               if (dpr == 1) {
-                       url = window.location.origin + "/" + evt + "/" + backend_width + "x" + backend_height + "/box/" + filename;
-               } else {
-                       url = window.location.origin + "/" + evt + "/" + backend_width + "x" + backend_height + "@" + dpr.toFixed(2) + "/box/" + filename;
-               }
-               display_image(url, adjusted_size[2], adjusted_size[3], elem_id, offset, true);
-               document.getElementById(elem_id).style.transform += " scale(" + (1.0 / dpr) + ")";
+               display_infobox(global_image_list[num][4], adjusted_size[2], adjusted_size[3], elem_id, offset);
        }
 
        if (offset === 0) {
@@ -243,7 +264,9 @@ function position_image(img, backend_width, backend_height, offset, box)
        var left = (screen_size[0] - width) / 2;
        var top = (screen_size[1] - height) / 2;
 
-       if (global_infobox) top -= dpr * (24/2);
+       if (global_infobox) {
+               top = Math.max(top - dpr * (24/2), 0);
+       }
 
        // center the image on-screen
        img.style.position = "absolute";
@@ -251,7 +274,13 @@ function position_image(img, backend_width, backend_height, offset, box)
        img.style.transform = "translate(" + extra_x_offset + "px,0px)";
 
        if (box) {
-               img.style.top = (top + height) / dpr + "px";
+               img.style.top = Math.min(top + height, screen_size[1] - 24 * dpr) / dpr + "px";
+               img.style.height = "24px";
+               img.style.width = null;
+               img.style.whiteSpace = 'nowrap';
+               // Hide the box if there's no room for all the text.
+               img.style.opacity = (img.clientWidth < width / dpr + 10) ? null : 0.0;
+               img.style.width = (width / dpr) + "px";
        } else {
                img.style.top = (top / dpr) + "px";
                img.style.lineHeight = (height / dpr) + "px";
@@ -286,7 +315,7 @@ function update_shown_images()
                //    inum !== global_image_num + 1) {
                //      to_remove.push(child);
                //}
-               if (inum !== global_image_num) {
+               if (inum !== global_image_num || (child.className === "fsbox" && !global_infobox)) {
                        to_remove.push(child);
                }
        }
@@ -529,7 +558,7 @@ function set_swipe_pos(x, transition)
                        var inum = parseInt(child.id.replace("_box", ""));
                        var offset = inum - global_image_num;
                        child.style.transition = transition;
-                       child.style.transform = "translate(" + (x + find_width()[0] * offset / dpr) + "px,0px) scale(" + (1.0 / dpr) + ")";
+                       child.style.transform = "translate(" + (x + find_width()[0] * offset / dpr) + "px,0px)";
                }
        }
 }