From 8ea95c5841d2680c0c179a7a0425b60333eba2b1 Mon Sep 17 00:00:00 2001
From: Matt Westcott <matt@west.co.tt>
Date: Sun, 3 Jun 2018 21:16:15 +0100
Subject: [PATCH] Convert the search query chooser to use static onload
 handlers

---
 .eslintignore                                 |  2 +-
 gulpfile.js/config.js                         |  1 +
 .../wagtailsearchpromotions/add.html          |  3 +-
 .../wagtailsearchpromotions/edit.html         |  3 +-
 wagtail/search/.gitignore                     |  1 +
 .../wagtailsearch/js/query-chooser-modal.js   | 61 +++++++++++++++++++
 .../wagtailsearch/queries/chooser/chooser.js  | 59 ------------------
 .../wagtailsearch/queries/chooser_field.js    |  1 +
 wagtail/search/tests/test_queries.py          |  4 +-
 wagtail/search/views/queries.py               |  4 +-
 10 files changed, 74 insertions(+), 65 deletions(-)
 create mode 100644 wagtail/search/.gitignore
 create mode 100644 wagtail/search/static_src/wagtailsearch/js/query-chooser-modal.js
 delete mode 100644 wagtail/search/templates/wagtailsearch/queries/chooser/chooser.js

diff --git a/.eslintignore b/.eslintignore
index 19c58f7fc..67853d9f8 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -11,12 +11,12 @@ wagtail/admin/static
 wagtail/documents/static
 wagtail/images/static
 wagtail/embeds/static
+wagtail/search/static
 wagtail/snippets/static
 wagtail/users/static
 wagtail/admin/templates/wagtailadmin/edit_handlers/inline_panel.js
 wagtail/contrib/search_promotions/templates/wagtailsearchpromotions/includes/searchpromotions_formset.js
 wagtail/users/templates/wagtailusers/groups/includes/page_permissions_formset.js
-wagtail/search/templates/wagtailsearch/queries/chooser/chooser.js
 wagtail/embeds/templates/wagtailembeds/chooser/embed_chosen.js
 wagtail/embeds/templates/wagtailembeds/chooser/chooser.js
 wagtail/documents/templates/wagtaildocs/chooser/chooser.js
diff --git a/gulpfile.js/config.js b/gulpfile.js/config.js
index 03f5d5dd6..9b4eb36e5 100644
--- a/gulpfile.js/config.js
+++ b/gulpfile.js/config.js
@@ -27,6 +27,7 @@ var apps = [
     new App('wagtail/documents', {'appName': 'wagtaildocs'}),
     new App('wagtail/embeds', {'appName': 'wagtailembeds'}),
     new App('wagtail/images', {'appName': 'wagtailimages'}),
+    new App('wagtail/search', {'appName': 'wagtailsearch'}),
     new App('wagtail/snippets', {'appName': 'wagtailsnippets'}),
     new App('wagtail/users', {'appName': 'wagtailusers'}),
     new App('wagtail/contrib/styleguide', {'appName': 'wagtailstyleguide'}),
diff --git a/wagtail/contrib/search_promotions/templates/wagtailsearchpromotions/add.html b/wagtail/contrib/search_promotions/templates/wagtailsearchpromotions/add.html
index c51c5c17c..a81eb14e2 100644
--- a/wagtail/contrib/search_promotions/templates/wagtailsearchpromotions/add.html
+++ b/wagtail/contrib/search_promotions/templates/wagtailsearchpromotions/add.html
@@ -1,5 +1,5 @@
 {% extends "wagtailadmin/base.html" %}
-{% load i18n %}
+{% load i18n staticfiles %}
 {% block titletag %}{% trans "Add search promotion" %}{% endblock %}
 {% block content %}
     {% trans "Add search pick" as add_str %}
@@ -39,6 +39,7 @@
 {% block extra_js %}
     {{ block.super }}
     {% include "wagtailadmin/pages/_editor_js.html" %}
+    <script src="{% static 'wagtailsearch/js/query-chooser-modal.js' %}"></script>
     {{ form_media.js }}
 
     <script type="text/javascript">
diff --git a/wagtail/contrib/search_promotions/templates/wagtailsearchpromotions/edit.html b/wagtail/contrib/search_promotions/templates/wagtailsearchpromotions/edit.html
index 08c6be983..700c564ff 100644
--- a/wagtail/contrib/search_promotions/templates/wagtailsearchpromotions/edit.html
+++ b/wagtail/contrib/search_promotions/templates/wagtailsearchpromotions/edit.html
@@ -1,5 +1,5 @@
 {% extends "wagtailadmin/base.html" %}
-{% load i18n %}
+{% load i18n staticfiles %}
 {% block titletag %}{% blocktrans with query=query.query_string %}Editing {{ query }}{% endblocktrans %}{% endblock %}
 {% block content %}
     {% trans "Editing" as editing_str %}
@@ -31,6 +31,7 @@
 {% block extra_js %}
     {{ block.super }}
     {% include "wagtailadmin/pages/_editor_js.html" %}
+    <script src="{% static 'wagtailsearch/js/query-chooser-modal.js' %}"></script>
     {{ form_media.js }}
 
     <script type="text/javascript">
diff --git a/wagtail/search/.gitignore b/wagtail/search/.gitignore
new file mode 100644
index 000000000..7b4d4ba2e
--- /dev/null
+++ b/wagtail/search/.gitignore
@@ -0,0 +1 @@
+static
diff --git a/wagtail/search/static_src/wagtailsearch/js/query-chooser-modal.js b/wagtail/search/static_src/wagtailsearch/js/query-chooser-modal.js
new file mode 100644
index 000000000..39f51024d
--- /dev/null
+++ b/wagtail/search/static_src/wagtailsearch/js/query-chooser-modal.js
@@ -0,0 +1,61 @@
+QUERY_CHOOSER_MODAL_ONLOAD_HANDLERS = {
+    'chooser': function(modal, jsonData) {
+        function ajaxifyLinks (context) {
+
+            $('.listing a.choose-query', context).on('click', chooseQuery);
+
+            $('.pagination a', context).on('click', function() {
+                var page = this.getAttribute("data-page");
+                setPage(page);
+                return false;
+            });
+        }
+
+        var searchUrl = $('form.query-search', modal.body).attr('action');
+        function search() {
+            $.ajax({
+                url: searchUrl,
+                data: {q: $('#id_q').val()},
+                success: function(data, status) {
+                    $('#query-results').html(data);
+                    ajaxifyLinks($('#query-results'));
+                }
+            });
+            return false;
+        }
+        function setPage(page) {
+
+            if($('#id_q').val().length){
+                dataObj = {q: $('#id_q').val(), p: page};
+            }else{
+                dataObj = {p: page};
+            }
+
+            $.ajax({
+                url: searchUrl,
+                data: dataObj,
+                success: function(data, status) {
+                    $('#query-results').html(data);
+                    ajaxifyLinks($('#query-results'));
+                }
+            });
+            return false;
+        }
+        function chooseQuery() {
+            modal.respond('queryChosen', $(this).data());
+            modal.close();
+
+            return false;
+        }
+
+        ajaxifyLinks(modal.body);
+
+        $('form.query-search', modal.body).on('submit', search);
+
+        $('#id_q').on('input', function() {
+            clearTimeout($.data(this, 'timer'));
+            var wait = setTimeout(search, 200);
+            $(this).data('timer', wait);
+        });
+    }
+};
diff --git a/wagtail/search/templates/wagtailsearch/queries/chooser/chooser.js b/wagtail/search/templates/wagtailsearch/queries/chooser/chooser.js
deleted file mode 100644
index 0335ab2e2..000000000
--- a/wagtail/search/templates/wagtailsearch/queries/chooser/chooser.js
+++ /dev/null
@@ -1,59 +0,0 @@
-function(modal) {
-    function ajaxifyLinks (context) {
-
-        $('.listing a.choose-query', context).on('click', chooseQuery);
-
-        $('.pagination a', context).on('click', function() {
-            var page = this.getAttribute("data-page");
-            setPage(page);
-            return false;
-        });
-    }
-
-    var searchUrl = $('form.query-search', modal.body).attr('action');
-    function search() {
-        $.ajax({
-            url: searchUrl,
-            data: {q: $('#id_q').val()},
-            success: function(data, status) {
-                $('#query-results').html(data);
-                ajaxifyLinks($('#query-results'));
-            }
-        });
-        return false;
-    }
-    function setPage(page) {
-
-        if($('#id_q').val().length){
-            dataObj = {q: $('#id_q').val(), p: page};
-        }else{
-            dataObj = {p: page};
-        }
-
-        $.ajax({
-            url: searchUrl,
-            data: dataObj,
-            success: function(data, status) {
-                $('#query-results').html(data);
-                ajaxifyLinks($('#query-results'));
-            }
-        });
-        return false;
-    }
-    function chooseQuery() {
-        modal.respond('queryChosen', $(this).data());
-        modal.close();
-
-        return false;
-    }
-
-    ajaxifyLinks(modal.body);
-
-    $('form.query-search', modal.body).on('submit', search);
-
-    $('#id_q').on('input', function() {
-        clearTimeout($.data(this, 'timer'));
-        var wait = setTimeout(search, 200);
-        $(this).data('timer', wait);
-    });
-}
diff --git a/wagtail/search/templates/wagtailsearch/queries/chooser_field.js b/wagtail/search/templates/wagtailsearch/queries/chooser_field.js
index e367ae306..40ad8283c 100644
--- a/wagtail/search/templates/wagtailsearch/queries/chooser_field.js
+++ b/wagtail/search/templates/wagtailsearch/queries/chooser_field.js
@@ -7,6 +7,7 @@ function createQueryChooser(id) {
 
         ModalWorkflow({
             url: initialUrl,
+            onload: QUERY_CHOOSER_MODAL_ONLOAD_HANDLERS,
             responses: {
                 queryChosen: function(queryData) {
                     input.val(queryData.querystring);
diff --git a/wagtail/search/tests/test_queries.py b/wagtail/search/tests/test_queries.py
index 0c97e9695..3966fda55 100644
--- a/wagtail/search/tests/test_queries.py
+++ b/wagtail/search/tests/test_queries.py
@@ -1,4 +1,5 @@
 import datetime
+import json
 from io import StringIO
 
 from django.core import management
@@ -163,7 +164,8 @@ class TestQueryChooserView(TestCase, WagtailTestUtils):
         response = self.get()
         self.assertEqual(response.status_code, 200)
         self.assertTemplateUsed(response, 'wagtailsearch/queries/chooser/chooser.html')
-        self.assertTemplateUsed(response, 'wagtailsearch/queries/chooser/chooser.js')
+        response_json = json.loads(response.content.decode())
+        self.assertEqual(response_json['step'], 'chooser')
 
     def test_search(self):
         response = self.get({'q': "Hello"})
diff --git a/wagtail/search/views/queries.py b/wagtail/search/views/queries.py
index 293bb7dd4..80a7a4370 100644
--- a/wagtail/search/views/queries.py
+++ b/wagtail/search/views/queries.py
@@ -30,10 +30,10 @@ def chooser(request, get_results=False):
         })
     else:
         return render_modal_workflow(
-            request, 'wagtailsearch/queries/chooser/chooser.html', 'wagtailsearch/queries/chooser/chooser.js', {
+            request, 'wagtailsearch/queries/chooser/chooser.html', None, {
                 'queries': queries,
                 'searchform': searchform,
-            }
+            }, json_data={'step': 'chooser'}
         )