Refactor javascript code with DRY

SpaceCowMedia · Nov 10, 2022 · 3bc9aa3 · 3bc9aa3
1 parent be6d84e
commit 3bc9aa3
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 27 deletions.
diff --git a/backend/spellbook/static/admin/js/card_info.js b/backend/spellbook/static/admin/js/card_info.js
@@ -0,0 +1,27 @@
+function fetch_card_info(name, element) {
+    if (element.title === '') {
+        element.title = name;
+        django.jQuery.ajax({
+            url: 'https://api.scryfall.com/cards/named',
+            dataType: 'json',
+            data: {
+                exact: name,
+                format: 'json'
+            },
+            success: function(data) {
+                element.removeAttribute('title');
+                if (data.card_faces && data.card_faces.length > 0) {
+                    element.title = data.card_faces
+                        .map(e => 
+                            e.name + '  ' + e.mana_cost + ' - ' + e.type_line + '\n\n' + 
+                            e.oracle_text)
+                        .join('\n🔄\n');
+                } else {
+                    element.title = 
+                        data.name + '  ' + data.mana_cost + ' - ' + data.type_line + '\n\n' +
+                        data.oracle_text;
+                }
+            }
+        });
+    }
+}
diff --git a/backend/spellbook/templates/admin/spellbook/card/change_form.html b/backend/spellbook/templates/admin/spellbook/card/change_form.html
@@ -1,7 +1,9 @@
 {% extends "admin/change_form.html" %}
+{% load static %}
 
 {% block extrahead %}
     {{ block.super }}
+    <script src="{% static 'admin/js/card_info.js' %}" type="text/javascript"></script>
     <!-- jQuery !-->
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> </script>
     <!-- jQuery UI !-->
@@ -52,8 +54,17 @@
                 })
             },
             open: function() {},
-            close: function() {}
-        });
+            close: function() {},
+        }).autocomplete('instance')
+            ._renderItem = function(ul, item) {
+                return $("<li>")
+                    .attr("data-value", item.value)
+                    .mouseover(function(e) {
+                            fetch_card_info(item.value, e.target);
+                    })
+                    .append(item.label)
+                    .appendTo(ul);
+                };
     </script>
 {% endblock %}
 

diff --git a/backend/spellbook/templates/admin/spellbook/combo/change_form.html b/backend/spellbook/templates/admin/spellbook/combo/change_form.html
@@ -1,4 +1,10 @@
 {% extends "admin/change_form.html" %}
+{% load static %}
+
+{% block extrahead %}
+    {{ block.super }}
+    <script src="{% static 'admin/js/card_info.js' %}" type="text/javascript"></script>
+{% endblock %}
 
 {% block admin_change_form_document_ready %}
     {{ block.super }}
@@ -14,31 +20,7 @@
                         const new_option = new Option(node.text, node.value, false, false);
                         // Shows a tooltip when hovering over the option
                         new_option.onmouseover = function(e) {
-                            if (e.target.title === '') {
-                                e.target.title = node.text;
-                                django.jQuery.ajax({
-                                    url: 'https://api.scryfall.com/cards/named',
-                                    dataType: 'json',
-                                    data: {
-                                        exact: e.target.text,
-                                        format: 'json'
-                                    },
-                                    success: function(data) {
-                                        e.target.removeAttribute('title');
-                                        if (data.card_faces && data.card_faces.length > 0) {
-                                            e.target.title = data.card_faces
-                                                .map(e => 
-                                                    e.name + '  ' + e.mana_cost + '\n\n' + 
-                                                    e.oracle_text)
-                                                .join('\n🔄\n');
-                                        } else {
-                                            e.target.title = 
-                                                data.name + '  ' + data.mana_cost + '\n\n' +
-                                                data.oracle_text;
-                                        }
-                                    }
-                                });
-                            }
+                            fetch_card_info(e.target.text, e.target);
                         }
                         box.appendChild(new_option);
                     }