Add checkboxes in list view to move tasks to another column at once

assets/js/components/list-item-selection.js

@@ -0,0 +1,82 @@
+document.addEventListener("DOMContentLoaded", function () {
+
+    function selectAllItems(event) {
+        event.preventDefault();
+
+        var items = document.querySelectorAll("input[data-list-item=selectable]");
+        for (var i = 0; i < items.length; i++) {
+            items[i].checked = true;
+        }
+
+        showActionMenu();
+    }
+
+    function unselectAllItems(event) {
+        event.preventDefault();
+
+        var items = document.querySelectorAll("input[data-list-item=selectable]");
+        for (var i = 0; i < items.length; i++) {
+            items[i].checked = false;
+        }
+
+        hideActionMenu();
+    }
+
+    function onItemChange(event) {
+        var selectedItems = document.querySelectorAll("input[data-list-item=selectable]:checked");
+
+        if (selectedItems.length > 0) {
+            showActionMenu();
+        }
+    }
+
+    function showActionMenu() {
+        var element = document.querySelector(".list-item-actions");
+        if (element) {
+            element.classList.remove("list-item-action-hidden");
+        }
+    }
+
+    function hideActionMenu() {
+        var element = document.querySelector(".list-item-actions");
+        if (element && ! element.classList.contains("list-item-action-hidden")) {
+            element.classList.add("list-item-action-hidden");
+        }
+    }
+
+    function onActionClick(event) {
+        event.preventDefault();
+        var selectedItems = document.querySelectorAll("input[data-list-item=selectable]:checked");
+        var taskIDs = [];
+
+        for (var i = 0; i < selectedItems.length; i++) {
+            taskIDs.push(selectedItems[i].value);
+        }
+
+        var link = event.target.href + "&task_ids=" + taskIDs.join(",");
+        KB.modal.open(link, "medium", true);
+    }
+
+    var selectAllLink = document.querySelector("a[data-list-item-selection=all]");
+    if (selectAllLink) {
+        selectAllLink.addEventListener("click", selectAllItems);
+    }
+
+    var unselectLink = document.querySelector("a[data-list-item-selection=none]");
+    if (unselectLink) {
+        unselectLink.addEventListener("click", unselectAllItems);
+    }
+
+    var items = document.querySelectorAll("input[data-list-item=selectable]");
+    for (var i = 0; i < items.length; i++) {
+        items[i].addEventListener("change", onItemChange);
+    }
+
+    KB.on('dropdown.afterRender', function () {
+        var actionLinks = document.querySelectorAll("a[data-list-item-action=modal]");
+
+        for (var i = 0; i < actionLinks.length; i++) {
+            actionLinks[i].addEventListener("click", onActionClick, false);
+        }
+    });
+});

assets/sass/_list_items.sass

@@ -0,0 +1,11 @@
+.list-item-links, .list-item-actions
+    display: inline-block
+    float: left
+    margin-left: 10px
+
+.list-item-links
+    a
+      margin: 0
+
+.list-item-action-hidden
+  display: none

assets/sass/app.sass

@@ -51,4 +51,5 @@
 @import panel
 @import activity_stream
 @import user_mentions
-@import image_slideshow
+@import image_slideshow
+@import list_items