add selection checkboxes to snippet listing view

wagtail/admin/static_src/wagtailadmin/scss/components/_listing.scss

@@ -99,6 +99,14 @@ ul.listing {
                 background-color: #fcfcfc;
             }
         }
+
+        tr.selected {
+            background-color: #c8eae9;
+
+            &:hover {
+                background-color: #b5e3e2;
+            }
+        }
     }
 
     &.full-width tbody {

wagtail/snippets/static_src/wagtailsnippets/js/snippet-multiple-select.js

@@ -0,0 +1,103 @@
+var updateRow = function(id, newValue) {
+    $row = $('table.listing tr#snippet-row-' + id);
+    $checklist = $row.find('input[type=checkbox].toggle-select-row');
+    $checklist.prop('checked', newValue);
+    if (newValue) {
+        $row.addClass('selected');
+    } else {
+        $row.removeClass('selected');
+    }
+};
+
+var updateDeleteButton = function(anySelected, newState) {
+    var $deleteButton = $('a.button.delete-button');
+    var ids = [];
+    $.each(newState, function(id, newValue) {
+        if (newValue) {
+          ids.push(id);
+        }
+    });
+    if (anySelected) {
+        // enable button and add url
+        $deleteButton.removeClass('disabled');
+        var url = $deleteButton.data('url');
+        url = url + $.param({id: ids}, true);
+        $deleteButton.attr('href', url);
+    } else {
+        // disable button and remove url
+        $deleteButton.addClass('disabled');
+        $deleteButton.attr('href', null);
+    }
+};
+
+var updateSelectAllCheckbox = function(value) {
+    var $selectAllCheckbox = $('table.listing input[type=checkbox].toggle-select-all');
+    $selectAllCheckbox.prop('checked', value);
+};
+
+var buildSelectedState = function() {
+    // prepare the selected state -- {3: true, 4: false}
+    state = {};
+    $rows = $('table.listing tbody tr input[type=checkbox].toggle-select-row');
+    $.each($rows, function (index, row) {
+        var $row = $(row);
+        var selected = $row.prop('checked');
+        var id = $row.attr('value');
+        state[id] = selected;
+    });
+    return state;
+};
+
+var updateSelectedState = function(state, newValue, idToUpdate) {
+    if (idToUpdate === null) {
+        // update all rows
+        $.each(state, function (id, currentValue) {
+            state[id] = newValue;
+        });
+    } else {
+        // update single row
+        state[idToUpdate] = newValue;
+    }
+    return state;
+};
+
+var updateView = function(newState) {
+      var allSelected = true;
+      var anySelected = false;
+      var countOfUnselected = 0;
+      var countOfSelected = 0;
+
+      // update each row with the new value (selected or not)
+      $.each(newState, function (id, newValue) {
+          updateRow(id, newValue);
+          if (newValue === false) {
+              countOfUnselected += 1;
+          } else {
+              countOfSelected += 1;
+          }
+      });
+
+      // update the main checkbox for select all (if all are true)
+      if (countOfUnselected >= 1) { allSelected = false; }
+      updateSelectAllCheckbox(allSelected);
+
+      // update the delete button
+      if (countOfSelected >= 1) { anySelected = true; }
+      updateDeleteButton(anySelected, newState);
+};
+
+var onListingCheckboxClick = function() {
+    $('table.listing input[type="checkbox"]').on('click', function(event) {
+        var $target = $(event.target);
+        var setToValue = $target.prop('checked');
+        var currentState = buildSelectedState();
+        var id = null;
+        if ( $target.hasClass('toggle-select-row') ) {
+            id = $target.attr('value');
+        }
+        var newState = updateSelectedState(currentState, setToValue, id);
+        updateView(newState);
+    });
+};
+
+$( document ).ready(onListingCheckboxClick);

wagtail/snippets/templates/wagtailsnippets/snippets/list.html

@@ -1,16 +1,21 @@
 {% load i18n wagtailadmin_tags %}
 <table class="listing">
+    {% if can_delete_snippets %}<col width="5%" />{% endif %}
+    <col />
     <col />
-    <col  />
     <col width="16%" />
     <thead>
         <tr class="table-headers">
+            {% if can_delete_snippets %}<th><input type="checkbox" class="toggle-select-all"/></th>{% endif %}
             <th>{% trans "Title" %}</th>
         </tr>
     </thead>
     <tbody>
         {% for snippet in items %}
-            <tr>
+            <tr id="snippet-row-{{ snippet.pk }}">
+                {% if can_delete_snippets %}
+                    <td class="select"><input type="checkbox" name="select_snippet" value="{{ snippet.pk }}" class="toggle-select-row"/></td>
+                {% endif %}
                 <td class="title">
                     {% if choosing %}
                         <h2><a class="snippet-choice" href="{% url 'wagtailsnippets:chosen' model_opts.app_label model_opts.model_name snippet.pk|admin_urlquote %}">{{ snippet }}</a></h2>

wagtail/snippets/templates/wagtailsnippets/snippets/type_index.html

@@ -1,5 +1,5 @@
 {% extends "wagtailadmin/base.html" %}
-{% load i18n %}
+{% load i18n static %}
 {% block titletag %}{% blocktrans with snippet_type_name_plural=model_opts.verbose_name_plural|capfirst %}Snippets {{ snippet_type_name_plural }}{% endblocktrans %}{% endblock %}
 
 {% block extra_js %}
@@ -11,13 +11,16 @@
             targetOutput: "#snippet-results"
         }
     </script>
+    {% if can_delete_snippets %}
+        <script src="{% static 'wagtailsnippets/js/snippet-multiple-select.js' %}"></script>
+    {% endif %}
 {% endblock %}
 
 {% block content %}
 
     <header class="nice-padding">
         <div class="row row-flush">
-            <div class="left col9 header-title">
+            <div class="left col6 header-title">
                 <h1 class="icon icon-snippet">
                 {% blocktrans with snippet_type_name_plural=model_opts.verbose_name_plural|capfirst %}Snippets <span>{{ snippet_type_name_plural }}</span>{% endblocktrans %}</h1>
 
@@ -32,7 +35,10 @@
                     </form>
                 {% endif %}
             </div>
-            <div class="right col3">
+            <div class="right col6">
+                {% if can_delete_snippets %}
+                    <a class="button bicolor icon icon-bin serious disabled delete-button" data-url="{% url 'wagtailsnippets:delete-multiple' model_opts.app_label model_opts.model_name %}?">{% blocktrans with snippet_type_name=model_opts.verbose_name_plural %}Delete {{ snippet_type_name }}{% endblocktrans %}</a>
+                {% endif %}
                 {% if can_add_snippet %}
                     <a href="{% url 'wagtailsnippets:add' model_opts.app_label model_opts.model_name %}" class="button bicolor icon icon-plus">{% blocktrans with snippet_type_name=model_opts.verbose_name %}Add {{ snippet_type_name }}{% endblocktrans %}</a>
                     {# TODO: figure out a way of saying "Add a/an [foo]" #}

wagtail/snippets/views/snippets.py

@@ -115,6 +115,7 @@ def list(request, app_label, model_name):
         'model_opts': model._meta,
         'items': paginated_items,
         'can_add_snippet': request.user.has_perm(get_permission_name('add', model)),
+        'can_delete_snippets': request.user.has_perm(get_permission_name('delete', model)),
         'is_searchable': is_searchable,
         'search_form': search_form,
         'is_searching': is_searching,