diff --git a/.eslintrc.json b/.eslintrc.json index 8735899960..2c50b93462 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -25,6 +25,7 @@ "popovers": false, "server_events": false, "ui": false, + "lightbox": false, "stream_color": false, "people": false, "navigate": false, diff --git a/static/js/click_handlers.js b/static/js/click_handlers.js index d10a8af7ba..4eeb4566b4 100644 --- a/static/js/click_handlers.js +++ b/static/js/click_handlers.js @@ -523,12 +523,12 @@ $(function () { e.stopPropagation(); if ($target.parent().hasClass("youtube-video")) { - ui.lightbox({ + lightbox.open({ type: "youtube", id: $target.data("id"), }); } else { - ui.lightbox({ + lightbox.open({ type: "photo", image: img, user: user, diff --git a/static/js/lightbox.js b/static/js/lightbox.js new file mode 100644 index 0000000000..fac50811ba --- /dev/null +++ b/static/js/lightbox.js @@ -0,0 +1,58 @@ +var lightbox = (function () { +var exports = {}; + +function display_image(image, user) { + // image should be an Image Object in JavaScript. + var url = $(image).attr("src"); + var title = $(image).parent().attr("title"); + + $("#overlay .player-container").hide(); + $("#overlay .image-actions, .image-description, .download").show(); + + var img = new Image(); + img.src = url; + $("#overlay .image-preview").html("").show() + .append(img); + + $(".image-description .title").text(title || "N/A"); + $(".image-description .user").text(user); + + $(".image-actions .open, .image-actions .download").attr("href", url); +} + +function display_youtube_video(id) { + $("#overlay .image-preview, .image-description, .download").hide(); + + var iframe = document.createElement("iframe"); + iframe.width = window.innerWidth; + iframe.height = window.innerWidth * 0.5625; + iframe.src = "https://www.youtube.com/embed/" + id; + iframe.setAttribute("frameborder", 0); + iframe.setAttribute("allowfullscreen", true); + + $("#overlay .player-container").html("").show().append(iframe); + $(".image-actions .open").attr("href", "https://youtu.be/" + id); +} + +exports.open = function (data) { + switch (data.type) { + case "photo": + display_image(data.image, data.user); + break; + case "youtube": + display_youtube_video(data.id); + break; + default: + break; + } + + $("#overlay").addClass("show"); + popovers.hide_all(); +}; + +return exports; +}()); + +if (typeof module !== 'undefined') { + module.exports = lightbox; +} diff --git a/static/js/ui.js b/static/js/ui.js index 4ec811ccdb..3a408035c0 100644 --- a/static/js/ui.js +++ b/static/js/ui.js @@ -262,22 +262,6 @@ exports.show_failed_message_success = function (message_id) { }); }; -exports.lightbox = function (data) { - switch (data.type) { - case "photo": - exports.lightbox_photo(data.image, data.user); - break; - case "youtube": - exports.youtube_video(data.id); - break; - default: - break; - } - - $("#overlay").addClass("show"); - popovers.hide_all(); -}; - $(document).ready(function () { var info_overlay_toggle = components.toggle({ name: "info-overlay-toggle", @@ -311,40 +295,6 @@ exports.show_info_overlay = function (target) { } }; -exports.lightbox_photo = function (image, user) { - // image should be an Image Object in JavaScript. - var url = $(image).attr("src"); - var title = $(image).parent().attr("title"); - - $("#overlay .player-container").hide(); - $("#overlay .image-actions, .image-description, .download").show(); - - var img = new Image(); - img.src = url; - $("#overlay .image-preview").html("").show() - .append(img); - - $(".image-description .title").text(title || "N/A"); - $(".image-description .user").text(user); - - $(".image-actions .open, .image-actions .download").attr("href", url); -}; - -exports.youtube_video = function (id) { - $("#overlay .image-preview, .image-description, .download").hide(); - - var iframe = document.createElement("iframe"); - iframe.width = window.innerWidth; - iframe.height = window.innerWidth * 0.5625; - iframe.src = "https://www.youtube.com/embed/" + id; - iframe.setAttribute("frameborder", 0); - iframe.setAttribute("allowfullscreen", true); - - $("#overlay .player-container").html("").show().append(iframe); - $(".image-actions .open").attr("href", "https://youtu.be/" + id); -}; -// k3O01EfM5fU - var loading_more_messages_indicator_showing = false; exports.show_loading_more_messages_indicator = function () { if (! loading_more_messages_indicator_showing) { diff --git a/zproject/settings.py b/zproject/settings.py index 3e021ef71c..dc1a3f5e9b 100644 --- a/zproject/settings.py +++ b/zproject/settings.py @@ -848,6 +848,7 @@ JS_SPECS = { 'js/condense.js', 'js/resize.js', 'js/floating_recipient_bar.js', + 'js/lightbox.js', 'js/ui.js', 'js/pointer.js', 'js/click_handlers.js',