feat: French translations, prevention of opening SVG directly in brow…

…ser through canonical url (#1430) * Fix #1377 * feat: expand images in `<img>` tag to avoid javascript attacks * Embed in img tags svg only * Remove canonical url display from directory listing for svg * Add test * Remove unused Media class * Change function of canonical url button * Remove superflous `} ` * Update NL locale * Fix: Right click "open in new tab" on canonical url now renders svg in img tag * Add zoom functionality for expanded svg images * Fix test and js lint * More js linting fixes * Allow ES6 * Update French translations * Fix css map * Update filer/templates/admin/filer/image/expand.html * Fix zoom cursors when displaying svg * ... second part
django-cms · Oct 2, 2023 · c9872d8 · c9872d8
1 parent 68c3a5c
commit c9872d8
Show file tree

Hide file tree

Showing 9 changed files with 94 additions and 115 deletions.
diff --git a/filer/locale/fr/LC_MESSAGES/django.mo b/filer/locale/fr/LC_MESSAGES/django.mo
diff --git a/filer/locale/fr/LC_MESSAGES/django.po b/filer/locale/fr/LC_MESSAGES/django.po
diff --git a/filer/private/sass/components/_tooltip.scss b/filer/private/sass/components/_tooltip.scss
@@ -17,6 +17,7 @@
     box-shadow: 0 0 10px rgba(black,.25);
     border-radius: 5px;
     z-index: 10;
+    cursor: default;
     &:before {
         position: absolute;
         top: -3px;

diff --git a/filer/static/filer/css/admin_filer.css b/filer/static/filer/css/admin_filer.css
diff --git a/filer/static/filer/css/maps/admin_filer.css.map b/filer/static/filer/css/maps/admin_filer.css.map
diff --git a/filer/static/filer/js/base.js b/filer/static/filer/js/base.js
@@ -1,6 +1,7 @@
 // #####################################################################################################################
 // #BASE#
 // Basic logic django filer
+/*jshint esversion: 6 */
 'use strict';
 
 var Cl = window.Cl || {};
@@ -265,18 +266,20 @@ Cl.mediator = new Mediator();
             });
         })();
         $('.js-copy-url').on('click', function (e) {
+            const url = new URL(this.dataset.url, document.location.href);
+            const msg = this.dataset.msg || 'URL copied to clipboard';
+            let infobox = document.createElement('template');
             e.preventDefault();
-            for(var el of document.getElementsByClassName('info filer-tooltip')) {
+            for (let el of document.getElementsByClassName('info filer-tooltip')) {
                 el.remove();
             }
-            var url = new URL(this.dataset.url, document.location.href);
-            var msg = this.dataset.msg || 'URL copied to clipboard';
-            var infobox = document.createElement('template');
             navigator.clipboard.writeText(url.href);
             infobox.innerHTML = '<div class="info filer-tooltip">' + msg + '</div>';
             this.classList.add('filer-tooltip-wrapper');
             this.appendChild(infobox.content.firstChild);
-            setTimeout(() => {this.getElementsByClassName('info')[0].remove(); }, 1200);
+            setTimeout(() => {
+                this.getElementsByClassName('info')[0].remove();
+            }, 1200);
         });
     });
 })(djQuery);
diff --git a/filer/templates/admin/filer/folder/directory_table_list.html b/filer/templates/admin/filer/folder/directory_table_list.html
@@ -139,7 +139,7 @@
                             </td>
                             <td class="column-action">
                                 {% if file.canonical_url %}
-                                    <a href="{{ file.canonical_url }}"
+                                    <a href="{% if 'svg' in file.mime_type %}{% url 'admin:filer_image_expand_view' file.pk %}{% else %}{{ file.canonical_url }}{% endif %}"
                                        data-url="{{ file.canonical_url }}"
                                        data-msg="{% trans 'URL copied to clipboard' %}"
                                        rel="noopener noreferrer"

diff --git a/filer/templates/admin/filer/image/expand.html b/filer/templates/admin/filer/image/expand.html
@@ -1,5 +1,28 @@
 <html>
+    <head>
+        <style>
+            img {
+                cursor: zoom-out;
+            }
+            body.scrolling img {
+                cursor: zoom-out;
+            }
+            body.scrolling img.zoom {
+                cursor: zoom-in;
+            }
+            img.zoom {
+                width: 100%;
+                cursor: zoom-out;
+            }
+        </style>
+    </head>
     <body style="margin: 0;">
-        <img style="max-width: 100%" src="{{ original_url }}" />
+        <img id="img" src="{{ original_url }}" onclick="this.classList.toggle('zoom')"/>
+        <script>
+            setInterval(function () {
+                const img = document.getElementById('img')
+                document.body.classList.toggle('scrolling', img.naturalWidth >= document.body.clientWidth)
+            }, 200);
+        </script>
     </body>
 </html>
diff --git a/tests/test_admin.py b/tests/test_admin.py
@@ -346,11 +346,10 @@ def test_image_expand_view(self):
 
         response = self.client.get(url)
 
-        self.assertContains(response, f"""<html>
-    <body style="margin: 0;">
-        <img style="max-width: 100%" src="{original_url}" />
-    </body>
-</html>""")
+        self.assertContains(
+            response,
+            f"""<img id="img" src="{ original_url }" onclick="this.classList.toggle('zoom')"/>"""
+        )
 
 
 class FilerClipboardAdminUrlsTests(TestCase):