lightbox: Prevent undesired closing of lightbox during pan.

This commit adds a method of marking an overlay as being meant to be
left open despite click events triggering that would normally close it.
This is to prevent the case where a user drags an image and "unclicks"
in an area where normally clicking would close the overlay.

static/js/lightbox.js

@@ -26,6 +26,23 @@ export class PanZoomControl {
             cursor: "auto",
         });
 
+        // The following events are necessary to prevent the click event
+        // firing where the user "unclicks" at the end of the drag, which
+        // was causing accidental overlay closes in some situations.
+        this.container.addEventListener("panzoomstart", () => {
+            // Marks this overlay as needing to stay open.
+            $("#lightbox_overlay").data("noclose", true);
+        });
+
+        this.container.addEventListener("panzoomend", () => {
+            // Don't remove the noclose attribute on this overlay until after paint,
+            // otherwise it will be removed too early and close the lightbox
+            // unintentionally.
+            setTimeout(() => {
+                $("#lightbox_overlay").data("noclose", false);
+            }, 0);
+        });
+
         // keybinds
         document.addEventListener("keydown", (e) => {
             if (!overlays.lightbox_open()) {

static/js/overlays.js

@@ -337,6 +337,11 @@ export function initialize() {
             return;
         }
 
+        if ($target.data("noclose")) {
+            // This overlay has been marked explicitly to not be closed.
+            return;
+        }
+
         const target_name = $target.attr("data-overlay");
 
         close_overlay(target_name);

static/styles/lightbox.css

@@ -149,9 +149,6 @@
     }
 
     .image-description {
-        width: 100%;
-        /* approx width of screen minus action buttons on the side. */
-        max-width: calc(100% - 450px);
         /* add some extra margin top and remove some bottom to keep the
         height the same. and vertically center the text with the buttons. */
         margin-top: 25px;

static/templates/lightbox_overlay.hbs

@@ -1,4 +1,4 @@
-<div id="lightbox_overlay" class="overlay new-style" data-overlay="lightbox">
+<div id="lightbox_overlay" class="overlay new-style" data-overlay="lightbox" data-noclose="false">
     <div class="image-info-wrapper">
         <div class="image-description">
             <div class="title"></div>
@@ -16,8 +16,8 @@
         <div class="clear-float"></div>
     </div>
 
-    <div class="image-preview overlay-content no-select">
-        <div class="zoom-element"></div>
+    <div class="image-preview no-select">
+        <div class="zoom-element no-select"></div>
     </div>
     <div class="player-container"></div>
     <div class="center">