Build file search menu on the JS side

boards/locale/ru/LC_MESSAGES/django.po

@@ -581,6 +581,3 b' msgstr "\xd0\x9c\xd0\xb0\xd0\xba\xd1\x81\xd0\xb8\xd0\xbc\xd0\xb0\xd0\xbb\xd1\x8c\xd0\xbd\xd0\xbe\xd0\xb5 \xd0\xba\xd0\xbe\xd0\xbb\xd0\xb8\xd1\x87\xd0\xb5\xd1\x81\xd1\x82\xd0\xb2\xd0\xbe \xd1\x84\xd0\xb0\xd0\xb9\xd0\xbb\xd0\xbe\xd0\xb2 %(max_files)s."'
 msgid "Moderation"
 msgstr "Модерация"
 
-msgid "Duplicates search"
-msgstr "Поиск дубликатов"
-

boards/locale/ru/LC_MESSAGES/djangojs.po

@@ -54,4 +54,8 b' msgid "Server error!"'
 msgstr "Ошибка сервера!"
 
 msgid "Computing PoW..."
-msgstr "Расчёт PoW..."
  No newline at end of file
+msgstr "Расчёт PoW..."
+
+msgid "Duplicates search"
+msgstr "Поиск дубликатов"
+

boards/models/attachment/viewers.py

@@ -77,13 +77,19 b' class AbstractViewer:'
         return True
 
     def get_view(self):
-        return '<div class="image" id="file{}">'\
+        search_host = settings.get('External', 'ImageSearchHost')
+        if search_host:
+            search_url = search_host + self.file.url
+        else:
+            search_url = ''
+
+        return '<div class="image">'\
                '{}'\
                '<div class="image-metadata"><a href="{}" download >{}, {}</a>'\
-               ' <a class="file-menu" href="#">🔍 </a></div>'\
-               '</div>'.format(self.hash, self.get_format_view(), self.file.url,
-                               self.file_type, filesizeformat(self.file.size))\
-                                       + self._build_context_menu(self.get_context_menu())
+               ' <a class="file-menu" href="#" data-type="{}" data-search-url="{}" data-hash="{}">🔍 </a></div>'\
+               '</div>'.format(self.get_format_view(), self.file.url,
+                               self.file_type, filesizeformat(self.file.size),
+                               self.file_type, search_url, self.hash)
 
     def get_format_view(self):
         image_name = PLAIN_FILE_FORMATS.get(self.file_type, self.file_type)
@@ -100,26 +106,6 b' class AbstractViewer:'
                '<img class="url-image" src="{}" width="{}" height="{}"/>'\
                '</a>'.format(self.file.url, static(image), w, h)
 
-    def get_context_menu(self):
-        items = []
-        items.append({
-            'name': 'duplicates',
-            'label': _('Duplicates search'),
-            'url': reverse('feed') + '?image_hash=' + self.hash,
-        })
-
-        return items
-
-    def _build_context_menu(self, items):
-        if not items:
-            return ''
-
-        cm_items = []
-        for item in items:
-            cm_items.append(('{}: {{name: "{}", callback: function(key, opt) {{window.location="{}";}}}}')\
-                    .format(item['name'], item['label'], item['url']))
-        return '<script>$.contextMenu({{trigger: "left", selector: "#file{} .file-menu", build: function($trigger, e) {{return {{items: {{ {} }} }}}}}});</script>'.format(self.hash, ', '.join(cm_items))
-
 
 class VideoViewer(AbstractViewer):
     @staticmethod
@@ -183,31 +169,6 b' class ImageViewer(AbstractViewer):'
                     str(pre_height), str(width), str(height),
                     full=self.file.url, image_meta=metadata)
 
-    def get_context_menu(self):
-        items = super().get_context_menu()
-
-        image_host = settings.get('External', 'ImageSearchHost')
-        if image_host:
-            image_url = image_host + self.file.url
-
-            items.append({
-                'name': 'google',
-                'label': 'Google',
-                'url': 'https://www.google.com/searchbyimage?image_url={}'.format(image_url),
-            })
-            items.append({
-                'name': 'iqdb',
-                'label': 'iqdb',
-                'url': 'http://iqdb.org/?url={}'.format(image_url)
-            })
-            items.append({
-                'name': 'tineye',
-                'label': 'TinEye',
-                'url': 'http://tineye.com/search?url={}'.format(image_url)
-            })
-
-        return items
-
 
 class UrlViewer(AbstractViewer):
     @staticmethod
@@ -240,9 +201,6 b' class UrlViewer(AbstractViewer):'
                '<img class="url-image" src="{}" width="{}" height="{}"/>' \
                '</a>'.format(self.url, image, w, h)
 
-    def get_context_menu(self):
-        return []
-
     @cached_result()
     def _find_image_for_domains(self, domain):
         """

boards/static/js/main.js

@@ -24,6 +24,7 b''
  */
 
 var ITEM_VOLUME_LEVEL = 'volumeLevel';
+var IMAGE_TYPES = ['png', 'jpg', 'jpeg', 'bmp'];
 
 /**
  * An email is a hidden file to prevent spam bots from posting. It has to be
@@ -150,6 +151,50 b' function compatibilityCrutches() {'
     }
 }
 
+function addContextMenu() {
+    $.contextMenu({
+        selector: '.file-menu',
+        trigger: 'left',
+
+        build: function($trigger, e) {
+            var fileSearchUrl = $trigger.data('search-url');
+            var isImage = IMAGE_TYPES.indexOf($trigger.data('type')) > -1;
+            var hasUrl = fileSearchUrl.length > 0;
+            return {
+                items: {
+                    duplicates: {
+                        name: gettext('Duplicates search'),
+                        callback: function(key, opts) {
+                            window.location = '/feed/?image_hash=' + $trigger.data('hash');
+                        }
+                    },
+                    google: {
+                        name: 'Google',
+                        visible: isImage && hasUrl,
+                        callback: function(key, opts) {
+                            window.location = 'https://www.google.com/searchbyimage?image_url=' + fileSearchUrl;
+                        }
+                    },
+                    iqdb: {
+                        name: 'IQDB',
+                        visible: isImage && hasUrl,
+                        callback: function(key, opts) {
+                            window.location = 'http://iqdb.org/?url=' + fileSearchUrl;
+                        }
+                    },
+                    tineye: {
+                        name: 'TinEye',
+                        visible: isImage && hasUrl,
+                        callback: function(key, opts) {
+                            window.location = 'http://tineye.com/search?url=' + fileSearchUrl;
+                        }
+                    }
+                },
+            };
+        }
+    });
+}
+
 $( document ).ready(function() {
     hideEmailFromForm();
 
@@ -169,5 +214,7 b' function compatibilityCrutches() {'
     var volumeUsers = $("video,audio");
     processVolumeUser(volumeUsers);
 
+    addContextMenu();
+
     compatibilityCrutches();
 });