Commit Graph

35 Commits

Author SHA1 Message Date
Anders Kaseorg d17b577d0c js: Purge useless IIFEs.
With webpack, variables declared in each file are already file-local
(Global variables need to be explicitly exported), so these IIFEs are
no longer needed.

Signed-off-by: Anders Kaseorg <andersk@mit.edu>
2019-10-25 13:51:21 -07:00
Anders Kaseorg 363956428a lightbox.js: Remove computed access of exports.
This wouldn’t work after migration to an ES6 module.

Signed-off-by: Anders Kaseorg <andersk@mit.edu>
2019-07-08 21:22:54 -07:00
Puneeth Chaganti 9aa5a2b369 url preview: Use oEmbed html for videos.
Ensure that the html is safe, before using it. The html is considered if it is
in an iframe with a http/https src, based on the recommendations here:
https://oembed.com/#section3

We directly embed the `iframe` html into the lightbox overlay.
2019-05-31 15:59:03 -07:00
Puneeth Chaganti 75635844db lightbox: Set URL in payload instead of computing from video IDs.
Lightbox previews for youtube playlists use the "current" video in the playlist
for the preview. The open link for such previews is incorrectly set to the first
video alone, and not the playlist. This commit fixes the bug by linking to the
original URL for lightbox preview is being shown, instead of computing the URL.
2019-05-29 23:01:54 -07:00
Puneeth Chaganti b9eb2aa8e8 lightbox: Switch to using one argument variation of $(...). 2019-05-27 23:07:07 -07:00
Mohit Gupta 01d34a8575 compose: Use lightbox when clicking images in compose preview.
Fixes #11424.
2019-02-02 11:11:24 -08:00
Mohit Gupta 9ce6cc5097 lightbox: Extract arguments to payload as variables.
This extracts sender_full_name (and the existing $parent), which will
make life easier for using the lightbox for images outside the message
feed.
2019-02-02 11:09:22 -08:00
Aditya Bansal 5b5d8bb310 thumbnails: Rename data-original to data-src-fullsize. 2018-07-30 13:00:23 -07:00
Marco Burstein 11cbe2bf6a lightbox: Fix a "Pan & Zoom" causing an error with thumbnailed images.
Images on the new thumbnailing system generate an error when
"Pan & Zoom" is enabled:

    Browser Error: Lightbox for unknown message undefined
    39648: http://localhost:9991/webpack/app.js
        | Object.blueslip_error [as error]
    50743: http://localhost:9991/webpack/app.js
        | Object../static/js/lightbox.js.exports.open
    50897: http://localhost:9991/webpack/app.js
        | HTMLDivElement.
    39474: http://localhost:9991/webpack/app.js
        | HTMLDivElement.blueslip_wrapper
    16299: http://localhost:9991/webpack/app.js
        | HTMLDivElement.dispatch
    16107: http://localhost:9991/webpack/app.js
        | HTMLDivElement.elemData.handle

To fix this, instead of using the `src` attribute as the key for
`asset_map`, which can be either the original or thumbnailed version
depending on the situation, always use the original version.

Also, create `frontend_tests/node_tests/lightbox.js` to test this
functionality.

Fix #9955.
2018-07-18 10:19:56 -07:00
Marco Burstein a6939a5078 lightbox: Fix lightbox not showing new thumbnails as selected.
The current code for detecting which image to add the `selected` class
to is `preview_source.match(src)`. With the new thumbnails, this no
longer works because thumbnail URLs include a `?`, which has its own
RegEx significance. To solve this, check for equality instead of using
RegExes.
2018-07-18 10:19:56 -07:00
Aditya Bansal 98a4e87e1d thumbor: Complete implementation of thumbnailing.
Various pieces of our thumbor-based thumbnailing system were already
merged; this adds the remaining pieces required for it to work:

* a THUMBOR_URL Django setting that controls whether thumbor is
  enabled on the Zulip server (and if so, where thumbor is hosted).

* Replaces the overly complicated prototype cryptography logic

* Adds a /thumbnail endpoint (supported both on web and mobile) for
  accessing thumbnails in messages, designed to support hosting both
  external URLs as well as uploaded files (and applying Zulip's
  security model for access to thumbnails of uploaded files).

* Modifies bugdown to, when THUMBOR_URL is set, render images with the
  `src` attribute pointing /thumbnail (to provide a small thumbnail
  for the image), along with adding a "data-original" attribute that
  can be used to access the "original/full" size version of the image.

There are a few things that don't work quite yet:
* The S3 backend support is incomplete and doesn't work yet.
* The error pages for unauthorized access are ugly.
* We might want to rename data-original and /thumbnail?size=original
  to use some other name, like "full", that better reflects the fact
  that we're potentially not serving the original image URL.
2018-07-15 00:39:41 +05:30
Armaan Ahluwalia 6d255efe4c app: Prepare JS files for consumption by webpack.
This commit prepares the frontend code to be consumed by webpack.

It is a hack: In theory, modules should be declaring and importing the
modules they depend on and the globals they expose directly.

However, that requires significant per-module work, which we don't
really want to block moving our toolchain to webpack on.

So we expose the modules by setting window.varName = varName; as
needed in the js files.
2018-07-05 10:53:36 +02:00
Steve Howell 9eb3bdaf6c page load: Make initializations more explicit.
We now initialize most modules in ui_init.js, which
isn't the perfect place to do it, but at least now
we have a mostly consolidated entry point.

All the new foo.initialize() methods introduced in
this module run the same order relative to each
other as before this commit. (I did some console
logging with a hacked version of the program to
get the order right.)  They happen a bit later than
before, though.

A couple modules still have the `$(function() {`
idiom for miscellaneous reasons:

       archive - is a different bundle
       common - used elsewhere
       list_render - non-standard code style
       scroll_bar - no exports
       setup - probably special?
       socket - $(function () is nested!
       transmit - coupled to socket
       translations - i18n is a bigger problem
       ui_init - this bootstraps everything
2018-05-15 15:46:04 -07:00
Tim Abbott 7ab8a8e820 js: Fix a bunch of indentation issues found by eslint.
This is preparation for enabling an eslint indentation configuration.
90% of these changes are just fixes for indentation errors that have
snuck into the codebase over the years; the others are more
significant reformatting to make eslint happy (that are not otherwise
actually improvements).

The one area that we do not attempt to work on here is the
"switch/case" indentation.
2018-05-06 16:25:02 -07:00
Tim Abbott 195b96c989 lightbox: Add debugging code for unknown message IDs.
This should help debug a traceback we've been seeing in production
where the fetched message was undefined.
2018-03-23 15:17:21 -07:00
Shreyansh Dwivedi b0fb7aa6b2 bugdown: Add preview for vimeo videos.
This also amends a commit from Brock Whittaker <brock@zulipchat.com>
that merges two separate functions for YouTube videos and Vimeo videos
into a generic video recall function.

Fixes #7550.
2018-01-17 09:11:43 -05:00
pradeepgangwar 445ece4a3c Fix 'v' hotkey image searching behavior.
Fixes #7621
2017-12-13 15:14:18 -06:00
Brock Whittaker 176e4a293b lightbox: Allow for clicking top and bottom to close overlay.
The top and bottom sections of the lightbox overlay do not close the
lightbox when clicked. Now, this triggers the close_overlay path when a
valid non-actionable background element is clicked.

Fixes: #7500.
2017-11-29 11:26:58 -08:00
Yusei Tahara 56cb06dc19 lightbox: Fix repeated code in exports.open.
Call display_XXX function after the payload if-clause, don't repeat
the same thing.
2017-09-10 00:40:03 -07:00
Brock Whittaker 4b4283550f lightbox: Fix incorrectly displayed avatar image.
The lightbox "v" shortcut should not show a user's avatar,
so this limits the scope of images it can choose to ones inside
of the `.message_content` div.
2017-08-09 14:33:00 -07:00
Brock Whittaker 14254f9668 lightbox: On .player-container direct click, hide lightbox.
When a user clicks on the `.player-container` node and the click
target is actually that (and not the YT video iFrame within), then
hide the lightbox – they likely mean to exit out of the lightbox.
2017-08-01 09:25:52 -07:00
Brock Whittaker 8445f886d7 Add ability to pan and zoom lightbox images.
This adds the ability to pan and zoom lightbox images because they
are now converted to <canvas> elements.
2017-07-31 17:03:31 -07:00
Rohitt Vashishtha 2d73e03e37 ui-refactor: Rename modals.js to overlays.js.
Fixed #4702.
2017-05-29 11:24:46 -07:00
Brendan Kiu 361ba50a54 lightbox: select nearest image on 'v' hotkey.
Loop through previous messages to find first instance of a valid image.

Fix: #4217.
2017-05-22 15:02:38 -07:00
Steve Howell f60a829b4d Remove lightbox.is_open property.
Outside of lightbox.js, we now use modals.lightbox_open() to
detect that the lightbox modal is open.
2017-05-10 09:46:21 -07:00
Steve Howell 1d7f93e550 Avoid re-opening the lightbox.
If the lightbox is already open, don't re-open it.
2017-05-10 09:46:21 -07:00
Steve Howell b82a802c22 Use modal.open_overlay() in lightbox.js. 2017-05-08 22:04:56 -07:00
wangjames 744f4aa663 Fix modals dependency cycle.
This commit forces the files that create modals to create their own
modal closing function instead of creating all of them in the modals
file. These functions are then passed to the modals.close object. This
is intended to remove modals.js's dependencies on these other files.
2017-04-24 14:30:02 -07:00
Brock Whittaker efd72d3338 Modify lightbox to only display valid images and YT Videos.
This modifies the lightbox to only display images inside the
".message_inline_image" class, rather than all images inside the
message body, which currently includes things like the bot icon.
2017-03-25 09:19:26 -07:00
Brock Whittaker a27f8f2f30 Fix up YouTube embed issues and styling.
This fixes the styling to stay on the screen of most reasonably sized
monitors along with extending the JavaScript code to allow for the
video to be keyed to in the lightbox.
2017-03-21 14:28:13 -07:00
Brock Whittaker 1b31f9be38 Move lightbox events to lightbox.js from clickhandlers.js.
This consolidates lightbox logic to lightbox.js.
2017-03-21 14:28:13 -07:00
Brock Whittaker 2775707a67 hotkeys: Add lightbox image feed with controls.
This adds an image feed that you can scroll through with hotkeys
in the lightbox.

The left and right arrow keys along with the left and right arrows
will go to the prev/next image, and clicking on an image will also
take a user to that image.
2017-03-19 22:11:38 -07:00
Daw-Ran Liou f67751d1f0 Add hotkey "l" for opening image in lightbox.
Open the lightbox in the current selected message. Only the first image
shows in the lightbox.
2017-03-19 11:43:21 -07:00
Tim Abbott f67e9a7e5e CSS: Rename #overlay to #lightbox_overlay. 2017-03-18 13:54:11 -07:00
Tim Abbott ed90879602 js: Extract lightbox.js from ui.js. 2017-03-18 13:54:11 -07:00