From 3c43a2bfd37354c03efbf868d4051b9a8adac558 Mon Sep 17 00:00:00 2001 From: Pavel Djundik Date: Sat, 2 Nov 2019 21:15:52 +0200 Subject: [PATCH] Delete renderPreview.js --- client/js/renderPreview.js | 134 ------------------------------------- 1 file changed, 134 deletions(-) delete mode 100644 client/js/renderPreview.js diff --git a/client/js/renderPreview.js b/client/js/renderPreview.js deleted file mode 100644 index d6d7095f..00000000 --- a/client/js/renderPreview.js +++ /dev/null @@ -1,134 +0,0 @@ -"use strict"; - -const $ = require("jquery"); -const Mousetrap = require("mousetrap"); -const templates = require("../views"); - -/* Image viewer */ - -const imageViewer = $("#image-viewer"); - -$("#windows").on("click", ".toggle-thumbnail", function(event, data = {}) { - const link = $(this); - - // Passing `data`, specifically `data.pushState`, to not add the action to the - // history state if back or forward buttons were pressed. - openImageViewer(link, data); - - // Prevent the link to open a new page since we're opening the image viewer, - // but keep it a link to allow for Ctrl/Cmd+click. - // By binding this event on #chat we prevent input gaining focus after clicking. - return false; -}); - -imageViewer.on("click", function(event, data = {}) { - // Passing `data`, specifically `data.pushState`, to not add the action to the - // history state if back or forward buttons were pressed. - closeImageViewer(data); -}); - -Mousetrap.bind("esc", () => closeImageViewer()); - -Mousetrap.bind(["left", "right"], (e, key) => { - if (imageViewer.hasClass("opened")) { - const direction = key === "left" ? "previous" : "next"; - imageViewer.find(`.${direction}-image-btn`).trigger("click"); - } -}); - -function openImageViewer(link, {pushState = true} = {}) { - $(".previous-image").removeClass("previous-image"); - $(".next-image").removeClass("next-image"); - - // The next two blocks figure out what are the previous/next images. We first - // look within the same message, as there can be multiple thumbnails per - // message, and if not, we look at previous/next messages and take the - // last/first thumbnail available. - // Only expanded thumbnails are being cycled through. - - // Previous image - let previousImage = link - .closest(".preview") - .prev(".preview") - .find(".toggle-content .toggle-thumbnail") - .last(); - - if (!previousImage.length) { - previousImage = link - .closest(".msg") - .prevAll() - .find(".toggle-content .toggle-thumbnail") - .last(); - } - - previousImage.addClass("previous-image"); - - // Next image - let nextImage = link - .closest(".preview") - .next(".preview") - .find(".toggle-content .toggle-thumbnail") - .first(); - - if (!nextImage.length) { - nextImage = link - .closest(".msg") - .nextAll() - .find(".toggle-content .toggle-thumbnail") - .first(); - } - - nextImage.addClass("next-image"); - - imageViewer.html( - templates.image_viewer({ - image: link.find("img").prop("src"), - link: link.prop("href"), - type: link.parent().hasClass("toggle-type-link") ? "link" : "image", - hasPreviousImage: previousImage.length > 0, - hasNextImage: nextImage.length > 0, - }) - ); - - // Turn off transitionend listener before opening the viewer, - // which caused image viewer to become empty in rare cases - imageViewer.off("transitionend").addClass("opened"); - - // History management - if (pushState) { - let clickTarget = ""; - - // Images can be in a message (channel URL previews) or not (window URL - // preview, e.g. changelog). This is sub-optimal and needs improvement to - // make image preview more generic and not specific for channel previews. - if (link.closest(".msg").length > 0) { - clickTarget = `#${link.closest(".msg").prop("id")} `; - } - - clickTarget += `a.toggle-thumbnail[href="${link.prop("href")}"] img`; - history.pushState({clickTarget}, null, null); - } -} - -imageViewer.on("click", ".previous-image-btn", function() { - $(".previous-image").trigger("click"); - return false; -}); - -imageViewer.on("click", ".next-image-btn", function() { - $(".next-image").trigger("click"); - return false; -}); - -function closeImageViewer({pushState = true} = {}) { - imageViewer.removeClass("opened").one("transitionend", function() { - imageViewer.empty(); - }); - - // History management - if (pushState) { - const clickTarget = - "#sidebar " + `.chan[data-id="${$("#sidebar .chan.active").attr("data-id")}"]`; - history.pushState({clickTarget}, null, null); - } -}