Commit Graph

85 Commits

Author SHA1 Message Date
Austin Riba 26ec71c39d lightbox: Prevent panning image out of view.
This commit adds a method to detect whether the draggable element has
moved out of view and if it has, move it back into view.

The panzoom library does have a `bounds` option that is supposed to
provide the functionality, but at the time of the commit it does not
appear to work correctly. Upstream bug:
https://github.com/anvaka/panzoom/issues/112
2022-02-23 12:13:17 -08:00
Austin Riba 7d3bbe03ac lightbox: Swap panzoom library to anvaka/panzoom.
This PR changes the library used for panning and zooming in the lightbox
module from timmywil/panzoom to avanka/panzoom.

The original (timmywil) version of the library contains a bug where if
you have a high resolution touchpad and Firefox and you zoom in and out
repeatedly on an image, the image may drift. avanka/panzoom does not
appear to display this behavior.

Restores the behaviour from before 5f83bc5cfe, where clicking
outside the image closes the lightbox, primarily by way of swapping
out the panzoom library.

Fixes: #21163.
2022-02-23 12:12:04 -08:00
Anders Kaseorg b0ce4f1bce docs: Fix many spelling mistakes.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
2022-02-07 18:51:06 -08:00
Austin Riba 81b1b18886 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.
2022-02-04 14:58:36 -08:00
Austin Riba 1c2fd19d69 lightbox: Revert state of lightbox when closing the overlay.
This commit attempts to revert the lightbox state (at least
the pan/zoom part of it) when the lightbox is closed. The open()
function has been turned into a factory function so that the zoom
control which is instantiated on initialization of the lightbox can be
passed in to the on_close handler of overlay.open().
2022-02-04 14:58:36 -08:00
Austin Riba 5f83bc5cfe lightbox: Replace lightbox_canvas with PanZoom library.
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.
2022-02-04 14:58:36 -08:00
Ganesh Pawar f5f5943ee0 lightbox_overlay: Migrate to handlebars. 2021-06-14 13:41:36 -07:00
Anders Kaseorg 5ca763fc24 eslint: Fix unicorn/prefer-switch.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
2021-05-10 19:26:41 -07:00
Anders Kaseorg 405bc8dabf requirements: Remove Thumbor.
Thumbor and tc-aws have been dragging their feet on Python 3 support
for years, and even the alphas and unofficial forks we’ve been running
don’t seem to be maintained anymore.  Depending on these projects is
no longer viable for us.

Signed-off-by: Anders Kaseorg <anders@zulip.com>
2021-05-06 20:07:32 -07:00
Aman Agrawal 84a7f08acc compose: Use `class` to find `markdown_preview` related elements.
We convert the following elements to use a class instead of
id for accessing them across the codebase:

* markdown_preview
* undo_markdown_preview
* markdown_preview_spinner
* message_edit_content
* preview_content

Converted them together since changes to one impacted the other in
some modules like click_handlers.

Also, added a function in rows to get `message_row`.
2021-04-27 10:06:25 -07:00
Anders Kaseorg 3ef6f6e2e2 js: Convert static/js/blueslip.js to ES6 module.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
2021-03-17 08:47:15 -04:00
Steve Howell 92e611a787 node tests: Add test() wrapper for lightbox. 2021-03-14 10:46:45 -04:00
Anders Kaseorg ea9ca6b7d0 js: Use jQuery as a module.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
2021-03-12 10:08:25 -08:00
Anders Kaseorg 7145cb4a0d js: Convert static/js/message_store.js to ES6 module.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
2021-02-28 14:23:00 -08:00
Anders Kaseorg 45b8e0244e js: Convert static/js/overlays.js to ES6 module.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
2021-02-28 14:23:00 -08:00
Anders Kaseorg b3f74af090 js: Convert static/js/popovers.js to ES6 module.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
2021-02-28 14:23:00 -08:00
Anders Kaseorg 76bfa78beb js: Convert static/js/lightbox.js to ES6 module.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
2021-02-28 14:23:00 -08:00
Anders Kaseorg 592cd780f5 js: Convert static/js/rows.js to ES6 module.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
2021-02-28 14:23:00 -08:00
Steve Howell ff3175f8a2 lightbox: Export method for testing purposes.
We weren't exercising this method in any
meaningful way during the tests, and when
do add coverage, we probably want to just
test it directly.

We also kill off stub_selector(), which was
never well-documented.
2021-02-22 12:38:07 -05:00
Anders Kaseorg 1d64e7a8eb js: Convert static/js/lightbox_canvas.js to ES6 module.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
2021-02-10 10:27:14 -08:00
Anders Kaseorg aa650a4c88 js: Escape strings interpolated into CSS selectors with CSS.escape.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
2021-02-04 11:00:06 -08:00
Anders Kaseorg 552f4e3d22 eslint: Fix unicorn/no-array-for-each.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
2021-01-25 14:53:19 -08:00
Anders Kaseorg 5c8117a426 eslint: Fix no-implicit-coercion.
https://eslint.org/docs/rules/no-implicit-coercion

Signed-off-by: Anders Kaseorg <anders@zulip.com>
2020-10-07 16:00:33 -07:00
Anders Kaseorg 65f86274b2 eslint: Fix unicorn/prefer-dataset.
https://github.com/sindresorhus/eslint-plugin-unicorn/blob/master/docs/rules/prefer-dataset.md

Signed-off-by: Anders Kaseorg <anders@zulip.com>
2020-10-07 16:00:33 -07:00
Anders Kaseorg d72423ef21 eslint: Replace empty-returns with consistent-return.
Instead of prohibiting ‘return undefined’ (#8669), we require that a
function must return an explicit value always or never.  This prevents
you from forgetting to return a value in some cases.  It will also be
important for TypeScript, which distinguishes between undefined and
void.

Signed-off-by: Anders Kaseorg <anders@zulip.com>
2020-09-25 15:17:59 -07:00
Priyank Patel b7998d3160 js: Purge people module from window. 2020-09-01 19:55:58 -07:00
Anders Kaseorg 6ec808b8df js: Add "use strict" directive to CommonJS files.
ES and TypeScript modules are strict by default and don’t need this
directive.  ESLint will remind us to add it to new CommonJS files and
remove it from ES and TypeScript modules.

Signed-off-by: Anders Kaseorg <anders@zulip.com>
2020-07-31 22:09:46 -07:00
Anders Kaseorg a9ca5f603b js: Replace deprecated jQuery event trigger shorthand.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
2020-07-21 12:01:26 -07:00
Anders Kaseorg 4e42137bd9 js: Replace deprecated jQuery event handler shorthand.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
2020-07-21 12:01:26 -07:00
Anders Kaseorg b65d2e063d js: Reformat with Prettier.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
2020-07-17 14:31:25 -07:00
Anders Kaseorg 883e2fd325 js: Remove inner spacing from object literals.
We’re configuring Prettier with bracketSpacing: false.  Generated by
ESLint.

Signed-off-by: Anders Kaseorg <anders@zulip.com>
2020-07-17 14:31:25 -07:00
Anders Kaseorg f3726db89a js: Normalize strings to double quotes.
Prettier would do this anyway, but it’s separated out for a more
reviewable diff.  Generated by ESLint.

Signed-off-by: Anders Kaseorg <anders@zulip.com>
2020-07-17 14:31:24 -07:00
Anders Kaseorg e014ea966a eslint: Enable comma-dangle for functions.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
2020-07-03 16:55:51 -07:00
Anders Kaseorg a79322bc94 eslint: Enable prefer-arrow-callback.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
2020-07-03 16:55:50 -07:00
Hashir Sarwar c2ba3e20b7 lightbox: Remove inaccurate docstring on lightbox.open(). 2020-04-05 13:13:02 -07:00
Hashir Sarwar 34d24bfdac lightbox: Remove redundant parameter `options` from lightbox.open().
The `options` parameter is not being passed in any call
of `lightbox.open()` and it uses the same option i.e.
`lightbox_canvas` everytime which is now computed inside
`display_image()` directly.
2020-04-05 13:13:02 -07:00
Hashir Sarwar 74ec668e65 lightbox: Rename `original_image` to `$original_image`.
`original_image` is a jQuery object so it should start with
a dollar sign.
2020-04-05 13:13:02 -07:00
Hashir Sarwar 95869974b3 lightbox: Remove redundant conversion of `image` to jQuery object.
`image` passed to lightbox.open() is already a jQuery object,
so we don't need to convert it explicitly. Also, the parameter
is renamed from `image` to `$image`.
2020-04-05 13:13:02 -07:00
Hashir Sarwar 9ffed7afdc lightbox: Parse images' data while rendering `image-list`.
Previously, lightbox.open() was responsible for retrieving
the image data from the DOM, saving it in `asset_map` and
finally displaying the image using that data. This
implementation wasn't correct for image list at bottom of
the lightbox because the `image` parameter passed to
lightbox.open() could contain more than one instances of
the image that had to be opened.

Now, the metadata of all the images in image-list is stored
in the `asset_map` while rendering the `image-list` inside
`render_lightbox_list_images()` and `lightbox.open()` only
looks for the metadata from `asset_map`.

Fixes #14152.
2020-04-05 13:13:02 -07:00
Hashir Sarwar 9a6d83e731 lightbox: Use `$preview_src` as key for `asset_map`.
In case of video embeds, the previous logic used
`data-src-fullsize` or `src` as a key to look
for the metadata of video in `lightbox.open()`,
but while parsing, the key used while storing
the metadata was the video ID.

This doesn't make any sense because video's data
could never be accessed from `asset_map` and we
always needed to lookup the DOM for this.

This commit fixes this by using $img.attr('src')
as a key for `asset_map` for both, images and
videos. Since `src` is the link of preview image
in case of video embeds, it will always uniquely
determine the video ID and we won't loose
anything with the change in how videos handle
things.

Part of #14152.
2020-04-05 13:13:02 -07:00
Tim Abbott 90eda9d9fe lightbox: Convert canvas image element to jQuery object.
The $img variable in this code path was incorrectly tagged as a jQuery
object.
2020-04-05 13:12:22 -07:00
Tim Abbott 31e5765431 lightbox: Fix incorrect use of const and typo.
This was a bug in 1d3827d518.
2020-04-02 17:34:43 -07:00
Hashir Sarwar 1d3827d518 lightbox: Extract image parsing logic from lightbox.open().
Moved the parsing logic to a new function `parse_image_data()`.

Part of #14152.
2020-04-02 15:12:00 -07:00
Steve Howell 16fccd77b7 minor: Fix blueslip error to use zid.
There is no point calling rows.id twice
here.
2020-02-24 12:19:10 -08:00
Anders Kaseorg a889a830dc lightbox: Convert asset_map from object to Map.
Signed-off-by: Anders Kaseorg <anders@zulipchat.com>
2020-02-12 10:39:01 -08:00
Anders Kaseorg 2834b051d2 js: Read zid with rows.id.
Signed-off-by: Anders Kaseorg <anders@zulipchat.com>
2020-02-12 10:39:01 -08:00
Chris Heald 86faebc2e5 lightbox: Don't blow up for messages not in the message store.
This should somewhat reduce the gravity of the failure mode for cases
where the message the user clicked cannot be found (which would be a
significant bug on its own merit in any case).
2020-02-10 14:00:40 -08:00
Chris Heald c802a1393f lightbox: Cast zid to an int before looking it up in message_store.
The keys for message_store are since the recent Map migration intended
to be integer message IDs, not strings (and likely were always
intended to be integers; the failure mode may simply have shifted).

This may just be a new bug, but this max also fix #9549; certainly
we'll want to redo any investigation with this fix in place.

Fixes #9549.
2020-02-10 13:56:49 -08:00
Anders Kaseorg 8459185970 lightbox: Confine embedded video players to a unique origin.
This fixes a cross-site scripting vulnerability in the upcoming Inline
URL Previews feature found by Graham Bleaney and Ibrahim Mohamed using
Pysa.

This commit doesn't get a CVE because the bug was present in a code
path introduced in the 2.1.x development branch, so it doesn't impact
any Zulip release.

Signed-off-by: Anders Kaseorg <anders@zulipchat.com>
2019-12-12 15:23:15 -08:00
Anders Kaseorg 28f3dfa284 js: Automatically convert var to let and const in most files.
This commit was originally automatically generated using `tools/lint
--only=eslint --fix`.  It was then modified by tabbott to contain only
changes to a set of files that are unlikely to result in significant
merge conflicts with any open pull request, excluding about 20 files.
His plan is to merge the remaining changes with more precise care,
potentially involving merging parts of conflicting pull requests
before running the `eslint --fix` operation.

Signed-off-by: Anders Kaseorg <anders@zulipchat.com>
2019-11-03 12:42:39 -08:00