From 3e7722a5672dd3d6c26522dcbfe30673a30995c9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sybren=20A=2E=20St=C3=BCvel?= <sybren@stuvel.eu>
Date: Tue, 3 Apr 2018 15:44:24 +0200
Subject: [PATCH] Expand image for `{attachment slug link=self}`

Clicking on the image will no longer open it directly, but expand it
instead.
---
 src/scripts/tutti/8_expand_image.js            | 18 +++++++++++++-----
 src/templates/nodes/attachments/file_image.pug |  2 +-
 tests/test_shortcodes.py                       |  6 ++++--
 3 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/src/scripts/tutti/8_expand_image.js b/src/scripts/tutti/8_expand_image.js
index 8baebc51..2e4bee34 100644
--- a/src/scripts/tutti/8_expand_image.js
+++ b/src/scripts/tutti/8_expand_image.js
@@ -1,8 +1,6 @@
 $(function() {
-    /* Expand images when their link points to a jpg/png/gif/webp */
-    var imgs = $('.expand-image-links a img')
-    .off('click')
-    .on('click', function(e){
+
+    function _expandImg(e) {
         var $img = $(this);
         var href = $img.parent().attr('href');
 
@@ -14,5 +12,15 @@ $(function() {
                         .html(overlay_img);
             e.preventDefault();
         }
-    });
+    }
+
+    $.fn.expandOnClick = function() {
+        $(this)
+            .off('click')
+            .on('click', _expandImg);
+    };
+
+    /* Expand images when their link points to a jpg/png/gif/webp */
+    $('.expand-image-links a img').expandOnClick();
+    $('a.expand-image-links img').expandOnClick();
 });
diff --git a/src/templates/nodes/attachments/file_image.pug b/src/templates/nodes/attachments/file_image.pug
index ab8429d5..a6bac3da 100644
--- a/src/templates/nodes/attachments/file_image.pug
+++ b/src/templates/nodes/attachments/file_image.pug
@@ -1,6 +1,6 @@
 | {% if 'link' in tag_args and tag_args['link'] != 'none' %}
 |     {% if tag_args['link'] == 'self' %}
-a(href="{{ vars['l'].link }}")
+a.expand-image-links(href="{{ vars['l'].link }}")
 	img(src="{{ vars['l'].link }}", alt="{{ file.filename }}")
 |     {% else %}
 a(href="{{ tag_args['link'] }}", target="_blank")
diff --git a/tests/test_shortcodes.py b/tests/test_shortcodes.py
index 4cfa5d94..9425654e 100644
--- a/tests/test_shortcodes.py
+++ b/tests/test_shortcodes.py
@@ -185,12 +185,14 @@ class AttachmentTest(AbstractPillarTest):
         link = db_file['variations'][0]['link']
 
         with self.app.test_request_context():
+            self_linked = f'<a class="expand-image-links" href="{link}">' \
+                          f'<img src="{link}" alt="cute_kitten.jpg"/></a>'
             self.assertEqual(
-                f'<a href="{link}"><img src="{link}" alt="cute_kitten.jpg"/></a>',
+                self_linked,
                 render('{attachment img link}', context=node_props).strip()
             )
             self.assertEqual(
-                f'<a href="{link}"><img src="{link}" alt="cute_kitten.jpg"/></a>',
+                self_linked,
                 render('{attachment img link=self}', context=node_props).strip()
             )
             self.assertEqual(