From 75a29d6b8212708c5004b734aa6ab0c7cf7d9014 Mon Sep 17 00:00:00 2001 From: Austin Riba Date: Wed, 23 Feb 2022 14:57:03 -0800 Subject: [PATCH] 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 | 52 ++++++----------- static/styles/lightbox.css | 81 +++++---------------------- static/templates/lightbox_overlay.hbs | 5 +- 3 files changed, 31 insertions(+), 107 deletions(-) diff --git a/static/js/lightbox.js b/static/js/lightbox.js index da79e74ed8..a9045a0676 100644 --- a/static/js/lightbox.js +++ b/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); - } - - disablePanZoom() { - $(".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(); + // Disable the lightbox reset button to reflect the state that + // the image has not been panned or zoomed. + $("#lightbox_overlay .lightbox-zoom-reset").addClass("disabled"); } 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-canvas-trigger", - ).show(); + $(".image-preview, .image-actions, .image-description, .download, .lightbox-zoom-reset").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 () { - const $img = $("#lightbox_overlay").find(".image-preview img"); - open_image($img); - - if ($(this).hasClass("enabled")) { - pan_zoom_control.disablePanZoom(); - $(this).removeClass("enabled"); - } else { - pan_zoom_control.enablePanZoom(); - $(this).addClass("enabled"); + $("#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(); } }); - $("#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(); diff --git a/static/styles/lightbox.css b/static/styles/lightbox.css index 26b34d6091..f66105d0c4 100644 --- a/static/styles/lightbox.css +++ b/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; diff --git a/static/templates/lightbox_overlay.hbs b/static/templates/lightbox_overlay.hbs index 6ad6537fd6..e358ea86e7 100644 --- a/static/templates/lightbox_overlay.hbs +++ b/static/templates/lightbox_overlay.hbs @@ -5,10 +5,7 @@
-
-
{{t "Pan & zoom" }}
-
-
+ {{t "Reset zoom" }} {{t "Open" }} {{t "Download" }}