paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-10-29 11:03:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

lightbox: Replace lightbox_canvas with PanZoom library.

Browse Source 
This PR changes how the Pan & Zoom feature of images displayed in the
attachment lightbox are handled.

The existing method of using a canvas element is replaced by the Panzoom
library (timmywil/panzoom). This library is lightweight and has 0
transitive dependencies.

This fixes #20759 where the issue is that the viewport of a zoomed image
was not expanding to fill the available space on the page. Switching to
this new library also solves several other UX issues:

    * Images are no longer blurred when in Pan & Zoom mode.
    * The zoom behavior itself uses focal point zooming: zooming occurs
      where the cursor is on the image instead of at the center of the
      image, reducing the need for extra panning.
    * CSS transitions are used for a more visually pleasing experience
      when switching images, toggling zoom off, etc.
    * The library has the potential to open other file types which
      leaves that option open for us in the future.
This commit is contained in:
Austin Riba
2022-01-13 15:46:54 -08:00
committed by Tim Abbott
parent 97ffe2b123
commit 5f83bc5cfe
8 changed files with 95 additions and 308 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
tools/test-js-with-node
View File

@@ -93,7 +93,6 @@ EXEMPT_FILES = make_set(
"static/js/info_overlay.js",
"static/js/invite.js",
"static/js/lightbox.js",
"static/js/lightbox_canvas.js",
"static/js/list_util.ts",
"static/js/loading.ts",
"static/js/local_message.js",