Add extra selection features

freesound/static/bw-frontend/src/components/forumSelect.js

@@ -1,7 +1,6 @@
 /* SELECT FORUM PAGE */
 
 const createForumSelect = () => {
-  console.log('hola');
 
   var x, i, j, l, ll, selElmnt, a, b, c;
   /* Look for any elements with the class "custom-select": */

freesound/static/bw-frontend/src/pages/moderation.js

@@ -134,8 +134,10 @@ ticketCheckboxes.forEach(checkbox => {
     // in the "change" event below (which otherwise does not hold information about the alt key)
     checkbox.addEventListener('click', (evt) => {
         checkbox.dataset.altKey = evt.altKey ? "true" : "false";
+        checkbox.dataset.shiftKey = evt.shiftKey ? "true" : "false";
         setTimeout(() => {
             checkbox.dataset.altKey = false;
+            checkbox.dataset.shiftKey = false;
         }, 100);
     })
 
@@ -151,14 +153,48 @@ ticketCheckboxes.forEach(checkbox => {
             // Make sure the clicked checkbox is selected (even if the change event would unselect it initially)
             checkbox.checked = true;
         }
+        let didMultipleSelection = false;
+        if (checkbox.dataset.shiftKey === "true") {
+            didMultipleSelection = true;
+            // If holding shift, then do mulitple selection since the last selected checkbox
+            let lastSelectedCheckbox = undefined;
+            let shouldSkip = false;
+            ticketCheckboxes.forEach(otherCheckbox => {
+                if (!shouldSkip) {
+                    if (otherCheckbox !== checkbox) {
+                        if (otherCheckbox.checked) {
+                            lastSelectedCheckbox = otherCheckbox;
+                        }
+                    } else {
+                        // Once we iterated until the clicked checkbox, we stop
+                        shouldSkip = true;
+                    }
+                }
+            });
+            if (lastSelectedCheckbox !== undefined) {
+                // Now we mark all checkboxes between last selected checkbox and current checkbox as selected
+                let selecting = false;
+                ticketCheckboxes.forEach(otherCheckbox => {
+                    if (otherCheckbox === lastSelectedCheckbox) {
+                        selecting = true;
+                    }
+                    if (selecting) {
+                        otherCheckbox.checked = true;
+                    }
+                    if (otherCheckbox === checkbox) {
+                        selecting = false;
+                    }
+                }); 
+            }
+        }
         postTicketsSelected();
 
         // Manage sound playback
         const soundInfoElement = document.querySelector(`.sound-info-element[data-sound-id="${checkbox.closest('tr').dataset.soundId}"]`);
         const audioElement = soundInfoElement.getElementsByTagName('audio')[0];
         if (checkbox.checked) {
             // Trigger autoplay of the selected sound if autoplay is on 
-            if (shouldAutoplaySounds()) {
+            if (shouldAutoplaySounds() && !didMultipleSelection) {
                 stopAllPlayers();
                 audioElement.play();
                 // NOTE: this can fail if autoplay is not allowed by the browser
@@ -190,4 +226,8 @@ document.addEventListener("DOMContentLoaded", () => {
         ticketCheckboxes[0].checked = true;
         postTicketsSelected();
     }
-})
+})
+
+// Highlight whitelist option in a different colour to avoid mistakes
+const whitelistOptionLabelElement = document.querySelector("[for='id_action_4']");
+whitelistOptionLabelElement.style = 'color:#0064af!important;'

freesound/static/bw-frontend/styles/pages/moderation.scss

@@ -1,5 +1,7 @@
 .tickets-table {
     width: 100%;
+    user-select: none;
+    -webkit-user-select: none;
 
     td {
         max-width: 0;

templates_bw/moderation/assigned.html

@@ -67,6 +67,7 @@ <h5>No sound tickets in your queue... &#128543</h5>
                     </div>
                     <div class="text-grey">
                         You can do alt+click on a row to select <i>only</i> this row
+                        <br>You can do shift+click on a row to select all the rows since the last previously selected row
                     </div>
                 </div>
             {% endif %}