Start of js changes to update modal_workflow

wagtailvideos/templates/wagtailvideos/chooser/chooser.js → wagtailvideos/static/wagtailvideos/js/video-chooser-modal.js

-{% load i18n %}
-function(modal) {
+VIDEO_CHOOSER_MODAL_ONLOAD_HANDLERS = {
+  'chooser': function(modal, jsonData) {
     var searchUrl = $('form.video-search', modal.body).attr('action');
 
     /* currentTag stores the tag currently being filtered on, so that we can
@@ -69,12 +69,10 @@ function(modal) {
                 modal.loadResponseText(response);
             },
             error: function(response, textStatus, errorThrown) {
-                {% trans "Server Error" as error_label %}
-                {% trans "Report this error to your webmaster with the following information:" as error_message %}
-                message = '{{ error_message|escapejs }}<br />' + errorThrown + ' - ' + response.status;
-                $('#upload').append(
-                    '<div class="help-block help-critical">' +
-                    '<strong>{{ error_label|escapejs }}: </strong>' + message + '</div>');
+              message = jsonData['error_message'] + '<br />' + errorThrown + ' - ' + response.status;
+                      $('#upload').append(
+                          '<div class="help-block help-critical">' +
+                          '<strong>' + jsonData['error_label'] + ': </strong>' + message + '</div>');
             }
         });
 
@@ -98,11 +96,13 @@ function(modal) {
         });
         return false;
     });
-
-    {% url 'wagtailadmin_tag_autocomplete' as autocomplete_url %}
-
     /* Add tag entry interface (with autocompletion) to the tag field of the image upload form */
-    $('#id_tags', modal.body).tagit({
-        autocomplete: {source: "{{ autocomplete_url|addslashes }}"}
-    });
+    // $('#id_tags', modal.body).tagit({
+    //     autocomplete: {source: "{{ autocomplete_url|addslashes }}"}
+    // });
+  },
+  'video_chosen': function(modal, jsonData) {
+      modal.respond('videoChosen', jsonData['result']);
+      modal.close();
+  },
 }

wagtailvideos/static/wagtailvideos/js/video-chooser.js

@@ -7,6 +7,7 @@ function createVideoChooser(id) {
     $('.action-choose', chooserElement).click(function() {
         ModalWorkflow({
             url: window.chooserUrls.videoChooser,
+            onload: VIDEO_CHOOSER_MODAL_ONLOAD_HANDLERS,
             responses: {
                 videoChosen: function(videoData) {
                     input.val(videoData.id);

wagtailvideos/templates/wagtailvideos/chooser/video_chosen.js

-function(modal) {
-    modal.respond('videoChosen', {{ video_json|safe }});
-    modal.close();
-}

wagtailvideos/views/chooser.py

@@ -6,6 +6,7 @@ from wagtail.admin.forms.search import SearchForm
 from wagtail.admin.modal_workflow import render_modal_workflow
 from wagtail.admin.utils import PermissionPolicyChecker, popular_tags_for_model
 from wagtail.core.models import Collection
+from wagtail.images.views.chooser import get_chooser_js_data
 from wagtail.search import index as search_index
 from wagtail.utils.pagination import paginate
 
@@ -22,14 +23,14 @@ def get_video_json(video):
     image chooser panel
     """
 
-    return json.dumps({
+    return {
         'id': video.id,
         'edit_link': reverse('wagtailvideos:edit', args=(video.id,)),
         'title': video.title,
         'preview': {
             'url': video.thumbnail.url if video.thumbnail else '',
         }
-    })
+    }
 
 
 def chooser(request):
@@ -79,7 +80,7 @@ def chooser(request):
 
         paginator, videos = paginate(request, videos, per_page=12)
 
-    return render_modal_workflow(request, 'wagtailvideos/chooser/chooser.html', 'wagtailvideos/chooser/chooser.js', {
+    return render_modal_workflow(request, 'wagtailvideos/chooser/chooser.html', None, {
         'videos': videos,
         'uploadform': uploadform,
         'searchform': searchform,
@@ -87,16 +88,17 @@ def chooser(request):
         'query_string': q,
         'popular_tags': popular_tags_for_model(Video),
         'collections': collections,
-    })
+    }, json_data=get_chooser_js_data())
 
 
 def video_chosen(request, video_id):
     video = get_object_or_404(Video, id=video_id)
 
     return render_modal_workflow(
-        request, None, 'wagtailvideos/chooser/video_chosen.js',
-        {'video_json': get_video_json(video)}
-    )
+        request, None, json_data={
+            'step': 'video_chosen',
+            'result': get_video_json(video)
+        })
 
 
 @permission_checker.require('add')

wagtailvideos/wagtail_hooks.py

 from django.conf.urls import include, url
-from django.contrib.staticfiles.templatetags.staticfiles import static
 from django.urls import reverse
-from django.utils.html import format_html, format_html_join
+from django.utils.html import format_html
 from django.utils.translation import ugettext_lazy as _
 from wagtail.admin.menu import MenuItem
 from wagtail.core import hooks
@@ -19,14 +18,7 @@ def register_admin_urls():
 
 @hooks.register('insert_editor_js')
 def editor_js():
-    js_files = [
-        static('wagtailvideos/js/video-chooser.js'),
-    ]
-    js_includes = format_html_join(
-        '\n', '<script src="{0}"></script>',
-        ((filename, ) for filename in js_files)
-    )
-    return js_includes + format_html(
+    return format_html(
         """
         <script>
             window.chooserUrls.videoChooser = '{0}';

wagtailvideos/widgets.py

@@ -30,3 +30,9 @@ class AdminVideoChooser(AdminChooser):
 
     def render_js_init(self, id_, name, value):
         return "createVideoChooser({0});".format(json.dumps(id_))
+
+    class Media:
+        js = [
+            'wagtailvideos/js/video-chooser-modal.js',
+            'wagtailvideos/js/video-chooser.js',
+        ]