Allow multiple selection of checkboxes holding shift key

Improve usability of the checkboxes in ticket bulk update form, as
well as in many administration pages, by allowing to select range of
checkboxes by holding shift key.

share/static/css/elevator-light/misc.css

@@ -183,3 +183,12 @@ ul.ui-autocomplete {
 .modal.search-results-filter .modal-dialog {
     margin: 0;
 }
+
+/* Enable checkboxes to be selected holding shift key.
+ * On some browsers, javascript "understands" that the parent div is
+ * clicked when holding shift key and not the checkbox itself, causing
+ * the page content to be selected. Increasing the z-index of the checkbox
+ * fixes this issue. */
+input[type="checkbox"] {
+    z-index: 1;
+}

share/static/js/util.js

@@ -254,6 +254,32 @@ function checkboxesToInput(target,checkboxes) {
     tar.val(emails.join(', ')).change();
 }
 
+// Enable multiple checkbox selection holding shift key
+jQuery(function () {
+    var lastCheckedByName = {};
+    jQuery('input[type=checkbox]').click(function (event) {
+        var name = jQuery(this).attr('name');
+        if (name) {
+            // Remove text after "-" from name for better compatibility
+            // with some fields, such as users members of a group, where
+            // the input name can be DeleteMember-78, DeleteMember-79, etc.
+            name = name.replace(/-.*/, '');
+            var lastChecked = lastCheckedByName[name];
+            if (event.shiftKey && name) {
+                if (lastChecked) {
+                    var checkboxes = jQuery('input[type=checkbox][name^=' + name + ']');
+                    var start = checkboxes.index(this);
+                    var end = checkboxes.index(lastChecked);
+                    checkboxes.slice(Math.min(start, end),
+                        Math.max(start, end) + 1).prop('checked',
+                            this.checked);
+                }
+            }
+            lastCheckedByName[name] = this;
+        }
+    });
+});
+
 // ahah for back compatibility as plugins may still use it
 function ahah( url, id ) {
     jQuery('#'+id).load(url);