Cleanup template + js

neon-jungle · Aug 12, 2024 · 6540752 · 6540752
1 parent 98c5023
commit 6540752
Show file tree

Hide file tree

Showing 5 changed files with 167 additions and 160 deletions.
diff --git a/wagtailvideos/static/wagtailvideos/js/add-multiple.js b/wagtailvideos/static/wagtailvideos/js/add-multiple.js
@@ -15,7 +15,6 @@ $(function() {
             maxFileSize: window.fileupload_opts.errormessages.max_file_size
         },
         add: function(e, data) {
-            $('.messages').empty();
             var $this = $(this);
             var that = $this.data('blueimp-fileupload') || $this.data('fileupload');
             var li = $($('#upload-list-item').html()).addClass('upload-uploading');
@@ -116,24 +115,32 @@ $(function() {
     // ajax-enhance forms added on done()
     $('#upload-list').on('submit', 'form', function(e) {
         var form = $(this);
+        var formData = new FormData(this);
         var itemElement = form.closest('#upload-list > li');
 
         e.preventDefault();
 
-        $.post(this.action, form.serialize(), function(data) {
+        $.ajax({
+            contentType: false,
+            data: formData,
+            processData: false,
+            type: 'POST',
+            url: this.action,
+          }).done(function (data) {
             if (data.success) {
-                var statusText = $('.status-msg.update-success').text();
-                addMessage('success', statusText);
-                itemElement.slideUp(function() {
-                    $(this).remove();
-                });
+              var text = $('.status-msg.update-success').first().text();
+              document.dispatchEvent(
+                new CustomEvent('w-messages:add', {
+                  detail: { clear: true, text, type: 'success' },
+                }),
+              );
+              itemElement.slideUp(function () {
+                $(this).remove();
+              });
             } else {
-                form.replaceWith(data.form);
-
-                // run tagit enhancement on new form
-                $('.tag_field input', form).tagit(window.tagit_opts);
+              form.replaceWith(data.form);
             }
-        });
+          });
     });
 
     $('#upload-list').on('click', '.delete', function(e) {

diff --git a/wagtailvideos/templates/wagtailvideos/multiple/add.html b/wagtailvideos/templates/wagtailvideos/multiple/add.html
@@ -3,7 +3,7 @@
 {% block titletag %}{% trans "Add multiple videos" %}{% endblock %}
 {% block extra_css %}
     {{ block.super }}
-
+    {{ form_media.css }}
 {% endblock %}
 
 {% block content %}
@@ -43,7 +43,7 @@
         <ul id="upload-list" class="upload-list multiple"></ul>
     </div>
 
-    <script id="upload-list-item" type="text/template">
+    <template id="upload-list-item">
         <li class="row">
             <div class="left col3">
                 <div class="preview">
@@ -59,12 +59,12 @@
                 <p class="status-msg failure error_messages"></p>
             </div>
         </li>
-    </script>
+    </template>
 {% endblock %}
 
 {% block extra_js %}
     {{ block.super }}
-
+    {{ form_media.js }}
     <!-- this exact order of plugins is vital -->
     <script src="{% versioned_static 'wagtailimages/js/vendor/load-image.min.js' %}"></script>
     <script src="{% versioned_static 'wagtailimages/js/vendor/canvas-to-blob.min.js' %}"></script>
@@ -88,8 +88,5 @@
                 accepted_file_types: "{{ error_accepted_file_types }}"
             }
         };
-        window.tagit_opts = {
-            autocomplete: {source: "{{ autocomplete_url|addslashes }}"}
-        };
     </script>
 {% endblock %}
diff --git a/wagtailvideos/templates/wagtailvideos/multiple/edit_form.html b/wagtailvideos/templates/wagtailvideos/multiple/edit_form.html
@@ -1,20 +1,8 @@
 {% load i18n %}
-<form action="{% url 'wagtailvideos:edit_multiple' video.id %}" method="POST" enctype="multipart/form-data">
-    <ul class="fields">
-        {% csrf_token %}
-        {% for field in form %}
-            {% if field.is_hidden %}
-                {{ field }}
-            {% else %}
-                <li>{% include "wagtailadmin/shared/field.html" %}</li>
-            {% endif %}
-        {% endfor %}
-        <li>
-            <input class="button" type="submit" value="{% trans 'Update' %}" />
-            <a href="{% url 'wagtailvideos:delete_multiple' video.id %}" class="delete button button-secondary no">{% trans "Delete" %}</a>
-        </li>
-    </ul>
-</form>
+
+{% include "wagtailadmin/generic/multiple_upload/edit_form.html" %}
+
+{# little bit of js ran to update the video thumbnail #}
 <div data-video-thumb="{{ video.id }}" class="thumb icon icon-media hasthumb">
     {% if video.thumbnail %}
     <img src="{{ video.thumbnail.url }}" alt="{% trans 'Video thumbnail' %}" />

diff --git a/wagtailvideos/urls.py b/wagtailvideos/urls.py
@@ -8,9 +8,23 @@
     path('add/', videos.add, name='add'),
     re_path(r'^usage/(\d+)/$', videos.usage, name='video_usage'),
 
-    path('multiple/add/', multiple.add, name='add_multiple'),
-    re_path(r'^multiple/(\d+)/delete/$', multiple.delete, name='delete_multiple'),
-    re_path(r'^multiple/(\d+)/$', multiple.edit, name='edit_multiple'),
+    path("multiple/add/", multiple.AddView.as_view(), name="add_multiple"),
+    path("multiple/<int:video_id>/", multiple.EditView.as_view(), name="edit_multiple"),
+    path(
+        "multiple/create_from_uploaded_image/<int:uploaded_file_id>/",
+        multiple.CreateFromUploadedVideoView.as_view(),
+        name="create_multiple_from_uploaded_image",
+    ),
+    path(
+        "multiple/<int:video_id>/delete/",
+        multiple.DeleteView.as_view(),
+        name="delete_multiple",
+    ),
+    path(
+        "multiple/delete_upload/<int:uploaded_file_id>/",
+        multiple.DeleteUploadView.as_view(),
+        name="delete_upload_multiple",
+    ),
 
     re_path(r'^(\d+)/delete/$', videos.delete, name='delete'),
     re_path(r'^(\d+)/create_transcode/$', videos.create_transcode, name='create_transcode'),