From 1b31f9be38ecac244d0207b3705e2968cdf023ca Mon Sep 17 00:00:00 2001
From: Brock Whittaker <brock@zulipchat.com>
Date: Mon, 20 Mar 2017 11:36:32 -0700
Subject: [PATCH] Move lightbox events to lightbox.js from clickhandlers.js.

This consolidates lightbox logic to lightbox.js.
---
 static/js/click_handlers.js | 59 -----------------------------------
 static/js/lightbox.js       | 61 +++++++++++++++++++++++++++++++++++++
 2 files changed, 61 insertions(+), 59 deletions(-)

diff --git a/static/js/click_handlers.js b/static/js/click_handlers.js
index 7d6a04b147..3a8ab9bd08 100644
--- a/static/js/click_handlers.js
+++ b/static/js/click_handlers.js
@@ -511,65 +511,6 @@ $(function () {
                       .text(i18n.t("Bringing you to your latest messages…")));
     });
 
-    (function () {
-        $("#main_div").on("click", ".message_inline_image a", function (e) {
-            var $img = $(this).find("img");
-
-            // prevent the link from opening in a new page.
-            e.preventDefault();
-            // prevent the message compose dialog from happening.
-            e.stopPropagation();
-
-            lightbox.show_from_inline_image($img);
-        });
-
-        $("#lightbox_overlay .download").click(function () {
-          this.blur();
-        });
-
-        $("#lightbox_overlay").on("click", ".image-list .image", function () {
-            var $image_list = $(this).parent();
-
-            var image = new Image();
-            image.src = this.dataset.src;
-            image.title = this.title;
-
-            lightbox.open({
-                type: "photo",
-                user: message_store.get($(this).attr("data-zid")).sender_full_name,
-                image: image,
-            });
-
-            $(".image-list .image.selected").removeClass("selected");
-            $(this).addClass("selected");
-
-            var parentOffset = this.parentNode.clientWidth + this.parentNode.scrollLeft;
-            // this is the left and right of the image compared to its parent.
-            var coords = {
-                left: this.offsetLeft,
-                right: this.offsetLeft + this.clientWidth,
-            };
-
-            if (coords.right > parentOffset) {
-                // add 2px margin
-                $image_list.animate({
-                    scrollLeft: coords.right - this.parentNode.clientWidth + 2,
-                }, 100);
-            } else if (coords.left < this.parentNode.scrollLeft) {
-                // subtract 2px margin
-                $image_list.animate({ scrollLeft: coords.left - 2 }, 100);
-            }
-        });
-
-        $("#lightbox_overlay").on("click", ".center .arrow", function () {
-            var direction = $(this).attr("data-direction");
-
-            if (/^(next|prev)$/.test(direction)) {
-                lightbox[direction]();
-            }
-        });
-    }());
-
     // MAIN CLICK HANDLER
 
     $(document).on('click', function (e) {
diff --git a/static/js/lightbox.js b/static/js/lightbox.js
index acd06cb496..353f7f5f37 100644
--- a/static/js/lightbox.js
+++ b/static/js/lightbox.js
@@ -126,6 +126,67 @@ Object.defineProperty(exports, "is_open", {
     },
 });
 
+// this is a block of events that are required for the lightbox to work.
+$(function () {
+    $("#main_div").on("click", ".message_inline_image a", function (e) {
+        var $img = $(this).find("img");
+
+        // prevent the link from opening in a new page.
+        e.preventDefault();
+        // prevent the message compose dialog from happening.
+        e.stopPropagation();
+
+        lightbox.show_from_inline_image($img);
+    });
+
+    $("#lightbox_overlay .download").click(function () {
+      this.blur();
+    });
+
+    $("#lightbox_overlay").on("click", ".image-list .image", function () {
+        var $image_list = $(this).parent();
+
+        var image = $("<img />", {
+            src: this.dataset.src,
+            title: this.title,
+        });
+
+        lightbox.open({
+            type: "photo",
+            user: message_store.get($(this).attr("data-zid")).sender_full_name,
+            image: image,
+        });
+
+        $(".image-list .image.selected").removeClass("selected");
+        $(this).addClass("selected");
+
+        var parentOffset = this.parentNode.clientWidth + this.parentNode.scrollLeft;
+        // this is the left and right of the image compared to its parent.
+        var coords = {
+            left: this.offsetLeft,
+            right: this.offsetLeft + this.clientWidth,
+        };
+
+        if (coords.right > parentOffset) {
+            // add 2px margin
+            $image_list.animate({
+                scrollLeft: coords.right - this.parentNode.clientWidth + 2,
+            }, 100);
+        } else if (coords.left < this.parentNode.scrollLeft) {
+            // subtract 2px margin
+            $image_list.animate({ scrollLeft: coords.left - 2 }, 100);
+        }
+    });
+
+    $("#lightbox_overlay").on("click", ".center .arrow", function () {
+        var direction = $(this).attr("data-direction");
+
+        if (/^(next|prev)$/.test(direction)) {
+            lightbox[direction]();
+        }
+    });
+});
+
 return exports;
 }());