Convert the search query chooser to use static onload handlers

.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

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'}),

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">

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">

wagtail/search/.gitignore

@@ -0,0 +1 @@
+static

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);
+        });
+    }
+};

wagtail/search/templates/wagtailsearch/queries/chooser/chooser.js

@@ -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);
-    });
-}

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);

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"})

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'}
         )