From 792f38334a61ab2ee1004148f60dac0dab847939 Mon Sep 17 00:00:00 2001
From: Saria Hajjar <sariahajjar@gmail.com>
Date: Sat, 4 Jan 2020 18:17:41 +0000
Subject: [PATCH 1/2] Fixes #2050: Image preview for attachments

---
 netbox/project-static/js/forms.js           | 39 +++++++++++++++++++++
 netbox/templates/inc/image_attachments.html |  2 +-
 2 files changed, 40 insertions(+), 1 deletion(-)

diff --git a/netbox/project-static/js/forms.js b/netbox/project-static/js/forms.js
index 55f9afbd5..43c722ae5 100644
--- a/netbox/project-static/js/forms.js
+++ b/netbox/project-static/js/forms.js
@@ -398,4 +398,43 @@ $(document).ready(function() {
     // Account for the header height when hash-scrolling
     window.addEventListener('load', headerOffsetScroll);
     window.addEventListener('hashchange', headerOffsetScroll);
+
+    // Offset between the preview window and the window edges
+    const IMAGE_PREVIEW_OFFSET_X = 20
+    const IMAGE_PREVIEW_OFFSET_Y = 10
+
+    // Preview an image attachment when the link is hovered over
+    $('a.image-preview').on('mouseover', function(e) {
+        // Twice the offset to account for all sides of the picture
+        var maxWidth = window.innerWidth - (e.clientX + (IMAGE_PREVIEW_OFFSET_X * 2));
+        var maxHeight = window.innerHeight - (e.clientY + (IMAGE_PREVIEW_OFFSET_Y * 2));
+        var img = $('<img>').attr('id', 'image-preview-window').css({
+            display: 'none',
+            position: 'absolute',
+            maxWidth: maxWidth + 'px',
+            maxHeight: maxHeight + 'px',
+            left: e.pageX + IMAGE_PREVIEW_OFFSET_X + 'px',
+            top: e.pageY + IMAGE_PREVIEW_OFFSET_Y + 'px',
+            boxShadow: '0 0px 12px 3px rgba(0, 0, 0, 0.4)',
+        });
+
+        // Remove any existing preview windows and add the current one
+        $('#image-preview-window').remove();
+        $('body').append(img);
+
+        // Once loaded, show the preview if the image is indeed an image
+        img.on('load', function(e) {
+            if (e.target.complete && e.target.naturalWidth) {
+                $('#image-preview-window').fadeIn('fast');
+            }
+        });
+
+        // Begin loading
+        img.attr('src', e.target.href);
+    });
+
+    // Fade the image out; it will be deleted when another one is previewed
+    $('a.image-preview').on('mouseout', function() {
+        $('#image-preview-window').fadeOut('fast')
+    });
 });
diff --git a/netbox/templates/inc/image_attachments.html b/netbox/templates/inc/image_attachments.html
index 1487b5349..2fee4dc78 100644
--- a/netbox/templates/inc/image_attachments.html
+++ b/netbox/templates/inc/image_attachments.html
@@ -10,7 +10,7 @@
             <tr{% if not attachment.size %} class="danger"{% endif %}>
                 <td>
                     <i class="fa fa-image"></i>
-                    <a href="{{ attachment.image.url }}" target="_blank">{{ attachment }}</a>
+                    <a class="image-preview" href="{{ attachment.image.url }}" target="_blank">{{ attachment }}</a>
                 </td>
                 <td>{{ attachment.size|filesizeformat }}</td>
                 <td>{{ attachment.created }}</td>

From 067af26892f4a3a92814150bead550a5964f5ae0 Mon Sep 17 00:00:00 2001
From: Saria Hajjar <sariahajjar@gmail.com>
Date: Sat, 4 Jan 2020 18:19:05 +0000
Subject: [PATCH 2/2] Changelog (may conflict with other merges)

---
 docs/release-notes/version-2.6.md | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/docs/release-notes/version-2.6.md b/docs/release-notes/version-2.6.md
index 2bf55d857..942f1c55b 100644
--- a/docs/release-notes/version-2.6.md
+++ b/docs/release-notes/version-2.6.md
@@ -1,3 +1,11 @@
+# v2.6.12 (FUTURE)
+
+## Enhancements
+
+* [#2050](https://github.com/netbox-community/netbox/issues/2050) - Preview image attachments when hovering the link
+
+---
+
 # v2.6.11 (2020-01-03)
 
 ## Bug Fixes