From f5422f91aa6a83923d96947f4d2d01e1ce3fcdf8 Mon Sep 17 00:00:00 2001
From: Bianca Nenciu <nbianca@users.noreply.github.com>
Date: Tue, 8 Mar 2022 19:39:46 +0200
Subject: [PATCH] FEATURE: Add link to original image in lightbox (#15640)

Adds a link to the original image next to the download link. It can be
used to view full resolution image in the browser.
---
 .../javascripts/discourse/app/lib/lightbox.js |  9 ++++
 .../tests/acceptance/lightbox-test.js         | 50 +++++++++++++++++++
 .../common/base/magnific-popup.scss           | 11 ++++
 config/locales/client.en.yml                  |  1 +
 lib/svg_sprite/svg_sprite.rb                  |  1 +
 5 files changed, 72 insertions(+)
 create mode 100644 app/assets/javascripts/discourse/tests/acceptance/lightbox-test.js

diff --git a/app/assets/javascripts/discourse/app/lib/lightbox.js b/app/assets/javascripts/discourse/app/lib/lightbox.js
index 73c903ecfa..2cd78c0bd7 100644
--- a/app/assets/javascripts/discourse/app/lib/lightbox.js
+++ b/app/assets/javascripts/discourse/app/lib/lightbox.js
@@ -34,6 +34,7 @@ export default function (elem, siteSettings) {
       mainClass: "mfp-zoom-in",
       tClose: I18n.t("lightbox.close"),
       tLoading: spinnerHTML,
+      prependTo: Ember.testing && document.getElementById("ember-testing"),
 
       gallery: {
         enabled: true,
@@ -106,6 +107,14 @@ export default function (elem, siteSettings) {
                 "</a>"
             );
           }
+          src.push(
+            '<a class="image-source-link" href="' +
+              item.src +
+              '">' +
+              renderIcon("string", "image") +
+              I18n.t("lightbox.open") +
+              "</a>"
+          );
           return src.join(" &middot; ");
         },
       },
diff --git a/app/assets/javascripts/discourse/tests/acceptance/lightbox-test.js b/app/assets/javascripts/discourse/tests/acceptance/lightbox-test.js
new file mode 100644
index 0000000000..997279196f
--- /dev/null
+++ b/app/assets/javascripts/discourse/tests/acceptance/lightbox-test.js
@@ -0,0 +1,50 @@
+import { click, visit } from "@ember/test-helpers";
+import { cloneJSON } from "discourse-common/lib/object";
+import topicFixtures from "discourse/tests/fixtures/topic";
+import { acceptance, query } from "discourse/tests/helpers/qunit-helpers";
+import { test } from "qunit";
+
+acceptance("Lightbox", function (needs) {
+  needs.user();
+
+  needs.pretender((server, helper) => {
+    const topicResponse = cloneJSON(topicFixtures["/t/280/1.json"]);
+    topicResponse.post_stream.posts[0].cooked += `<div class="lightbox-wrapper">
+      <a class="lightbox" href="//discourse.local/uploads/default/original/1X/ad768537789cdf4679a18161ac0b0b6f0f4ccf9e.jpeg" data-download-href="//discourse.local/uploads/default/ad768537789cdf4679a18161ac0b0b6f0f4ccf9e" title="image">
+        <img src="//discourse.local/uploads/default/optimized/1X/ad768537789cdf4679a18161ac0b0b6f0f4ccf9e_2_690x387.jpeg" alt="image" data-base62-sha1="oKwwVE8qLWFBkE5UJeCs2EwxHHg" width="690" height="387" srcset="//discourse.local/uploads/default/optimized/1X/ad768537789cdf4679a18161ac0b0b6f0f4ccf9e_2_690x387.jpeg, //discourse.local/uploads/default/optimized/1X/ad768537789cdf4679a18161ac0b0b6f0f4ccf9e_2_1035x580.jpeg 1.5x, //discourse.local/uploads/default/optimized/1X/ad768537789cdf4679a18161ac0b0b6f0f4ccf9e_2_1380x774.jpeg 2x" data-small-upload="//discourse.local/uploads/default/optimized/1X/ad768537789cdf4679a18161ac0b0b6f0f4ccf9e_2_10x10.png">
+        <div class="meta">
+          <svg class="fa d-icon d-icon-far-image svg-icon" aria-hidden="true"><use href="#far-image"></use></svg>
+          <span class="filename">image</span><span class="informations">1500×842 234 KB</span>
+          <svg class="fa d-icon d-icon-discourse-expand svg-icon" aria-hidden="true"><use href="#discourse-expand"></use></svg>
+        </div>
+      </a>
+    </div>`;
+
+    server.get("/t/280.json", () => helper.response(topicResponse));
+    server.get("/t/280/:post_number.json", () =>
+      helper.response(topicResponse)
+    );
+  });
+
+  test("Shows download and direct URL", async function (assert) {
+    await visit("/t/internationalization-localization/280");
+    await click(".lightbox");
+
+    assert.equal(
+      query(".mfp-title").textContent,
+      "image · 1500×842 234 KB · download · original image"
+    );
+
+    assert.equal(
+      query(".image-source-link:nth-child(1)").href,
+      "http://discourse.local/uploads/default/ad768537789cdf4679a18161ac0b0b6f0f4ccf9e"
+    );
+
+    assert.equal(
+      query(".image-source-link:nth-child(2)").href,
+      "http://discourse.local/uploads/default/original/1X/ad768537789cdf4679a18161ac0b0b6f0f4ccf9e.jpeg"
+    );
+
+    await click(".mfp-close");
+  });
+});
diff --git a/app/assets/stylesheets/common/base/magnific-popup.scss b/app/assets/stylesheets/common/base/magnific-popup.scss
index e4fc9e5333..b96367f538 100644
--- a/app/assets/stylesheets/common/base/magnific-popup.scss
+++ b/app/assets/stylesheets/common/base/magnific-popup.scss
@@ -486,6 +486,17 @@ button {
     }
   }
 
+  .mfp-ready {
+    .mfp-content {
+      min-width: 300px;
+    }
+  }
+
+  .mfp-title,
+  .mfp-title .image-source-link {
+    display: inline-block;
+  }
+
   .mfp-image-holder {
     .mfp-content {
       max-width: 100%;
diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml
index aa3ad9939f..4fa86486cd 100644
--- a/config/locales/client.en.yml
+++ b/config/locales/client.en.yml
@@ -3648,6 +3648,7 @@ en:
 
     lightbox:
       download: "download"
+      open: "original image"
       previous: "Previous (Left arrow key)"
       next: "Next (Right arrow key)"
       counter: "%curr% of %total%"
diff --git a/lib/svg_sprite/svg_sprite.rb b/lib/svg_sprite/svg_sprite.rb
index 0b1c3b757e..634937f0cc 100644
--- a/lib/svg_sprite/svg_sprite.rb
+++ b/lib/svg_sprite/svg_sprite.rb
@@ -137,6 +137,7 @@ module SvgSprite
     "home",
     "hourglass-start",
     "id-card",
+    "image",
     "info-circle",
     "italic",
     "key",