lightbox: Remove Pan/Zoom enable button.

With the recent changes to lightbox image handling in #21145 and #20788
it is no longer necessary to have panning and zooming disabled by
default. This commit removes the enable/disable button and instead
replaces it with a "Reset Image" button, and enables panning and zooming
as the default state of the lightbox.

static/js/lightbox.js

@@ -32,15 +32,15 @@ export class PanZoomControl {
                 return true;
             },
         });
-        // Start with pan/zoom disabled.
-        this.disablePanZoom();
-
         // 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.panzoom.on("pan", () => {
             // Marks this overlay as needing to stay open.
             $("#lightbox_overlay").data("noclose", true);
+
+            // Enable the panzoom reset button.
+            $("#lightbox_overlay .lightbox-zoom-reset").removeClass("disabled");
         });
 
         this.panzoom.on("panend", (e) => {
@@ -61,6 +61,9 @@ export class PanZoomControl {
             // event does not fire when using the scroll wheel or pinch to zoom.
             // https://github.com/anvaka/panzoom/issues/250
             this.constrainImage(e);
+
+            // Enable the panzoom reset button.
+            $("#lightbox_overlay .lightbox-zoom-reset").removeClass("disabled");
         });
 
         // key bindings
@@ -144,17 +147,9 @@ export class PanZoomControl {
         // of which there is some anecdotal evidence that suggests they
         // might be prone to race conditions.
         $("#lightbox_overlay").data("noclose", false);
-    }
+        // Disable the lightbox reset button to reflect the state that
-
+        // the image has not been panned or zoomed.
-    disablePanZoom() {
+        $("#lightbox_overlay .lightbox-zoom-reset").addClass("disabled");
-        $(".image-preview .zoom-element img").css("cursor", "auto");
-        this.reset();
-        this.panzoom.pause();
-    }
-
-    enablePanZoom() {
-        $(".image-preview .zoom-element img").css("cursor", "move");
-        this.panzoom.resume();
     }
 
     zoomIn() {
@@ -208,9 +203,7 @@ function display_image(payload) {
     render_lightbox_list_images(payload.preview);
 
     $(".player-container").hide();
-    $(
+    $(".image-preview, .image-actions, .image-description, .download, .lightbox-zoom-reset").show();
-        ".image-preview, .image-actions, .image-description, .download, .lightbox-canvas-trigger",
-    ).show();
 
     const img_container = $("#lightbox_overlay .image-preview > .zoom-element");
     const img = new Image();
@@ -229,7 +222,7 @@ function display_video(payload) {
     render_lightbox_list_images(payload.preview);
 
     $(
-        "#lightbox_overlay .image-preview, .image-description, .download, .lightbox-canvas-trigger",
+        "#lightbox_overlay .image-preview, .image-description, .download, .lightbox-zoom-reset",
     ).hide();
 
     let source;
@@ -453,9 +446,8 @@ export function initialize() {
         is_open = false;
         document.activeElement.blur();
         if (pan_zoom_control.isActive()) {
-            pan_zoom_control.disablePanZoom();
+            pan_zoom_control.reset();
         }
-        $(".lightbox-canvas-trigger").removeClass("enabled");
     };
 
     const open_image = build_open_image_function(reset_lightbox_state);
@@ -516,24 +508,14 @@ export function initialize() {
         }
     });
 
-    $("#lightbox_overlay").on("click", ".lightbox-canvas-trigger", function () {
+    $("#lightbox_overlay").on("click", ".lightbox-zoom-reset", () => {
+        if (!$("#lightbox_overlay .lightbox-zoom-reset").hasClass("disabled")) {
             const $img = $("#lightbox_overlay").find(".image-preview img");
             open_image($img);
-
+            pan_zoom_control.reset();
-        if ($(this).hasClass("enabled")) {
-            pan_zoom_control.disablePanZoom();
-            $(this).removeClass("enabled");
-        } else {
-            pan_zoom_control.enablePanZoom();
-            $(this).addClass("enabled");
         }
     });
 
-    $("#lightbox_overlay .image-preview").on("dblclick", "img, canvas", (e) => {
-        $("#lightbox_overlay .lightbox-canvas-trigger").trigger("click");
-        e.preventDefault();
-    });
-
     $("#lightbox_overlay .player-container").on("click", function () {
         if ($(this).is(".player-container")) {
             reset_lightbox_state();

static/styles/lightbox.css

@@ -16,26 +16,9 @@
         background-position: center center;
 
         img {
+            cursor: move;
             max-height: 100%;
             max-width: 100%;
-
-            background-color: hsl(0, 0%, 100%);
-            background-image: linear-gradient(
-                    45deg,
-                    hsl(0, 0%, 80%) 25%,
-                    transparent 25%
-                ),
-                linear-gradient(135deg, hsl(0, 0%, 80%) 25%, transparent 25%),
-                linear-gradient(45deg, transparent 75%, hsl(0, 0%, 80%) 75%),
-                linear-gradient(135deg, transparent 75%, hsl(0, 0%, 80%) 75%);
-
-            background-size: 20px 20px;
-
-            background-position: 0 0, 50px 0, 50px -50px, 0 50px;
-        }
-
-        canvas {
-            cursor: pointer;
         }
 
         .zoom-element {
@@ -83,54 +66,6 @@
         flex-shrink: 0;
         margin-left: auto;
 
-        .lightbox-canvas-trigger {
-            display: inline-block;
-            vertical-align: top;
-
-            min-width: 75px;
-
-            margin: 0;
-            margin-right: 5px;
-            padding: 0 5px;
-
-            border-radius: 4px;
-
-            border: 1px solid hsla(0, 0%, 100%, 0.6);
-
-            text-align: center;
-            color: hsl(0, 0%, 100%);
-
-            cursor: pointer;
-
-            transition: all 0.3s ease;
-
-            &:hover {
-                background-color: hsl(0, 0%, 100%);
-                border: 1px solid hsl(0, 0%, 100%);
-                color: hsl(227, 40%, 16%);
-                opacity: 1;
-            }
-
-            .status {
-                margin-top: -7px;
-
-                &::after {
-                    content: attr(data-disabled);
-                    text-transform: uppercase;
-
-                    opacity: 0.7;
-                }
-            }
-
-            &.enabled .status::after {
-                content: attr(data-enabled);
-            }
-
-            .title {
-                font-weight: 600;
-            }
-        }
-
         .button {
             font-size: 0.9rem;
             min-width: inherit;
@@ -149,12 +84,23 @@
                 color: hsl(227, 40%, 16%);
             }
         }
+
+        .disabled {
+            opacity: 0.7;
+            cursor: default;
+
+            &:hover {
+                background-color: transparent;
+                color: hsl(0, 0%, 100%);
+                border: 1px solid hsla(0, 0%, 100%, 0.6);
+            }
+        }
     }
 
     .image-description {
         display: flex;
         flex-direction: column;
-        max-width: calc(100% - 350px);
+        max-width: calc(100% - 400px);
         /* 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;
@@ -175,7 +121,6 @@
         }
 
         .user {
-            max-width: 200px;
             font-weight: 300;
             line-height: normal;
             text-overflow: ellipsis;

static/templates/lightbox_overlay.hbs

@@ -5,10 +5,7 @@
             <div class="user"></div>
         </div>
         <div class="image-actions">
-            <div class="lightbox-canvas-trigger">
+            <a class="button small lightbox-zoom-reset disabled">{{t "Reset zoom" }}</a>
-                <div class="title">{{t "Pan & zoom" }}</div>
-                <div class="status" data-disabled="{{t 'Disabled' }}" data-enabled="{{t 'Enabled' }}"></div>
-            </div>
             <a class="button small open" rel="noopener noreferrer" target="_blank">{{t "Open" }}</a>
             <a class="button small download" download>{{t "Download" }}</a>
         </div>