Add auto-scroll option in moderation

MTG · Oct 26, 2023 · e301c22 · e301c22
1 parent 32cd416
commit e301c22
Show file tree

Hide file tree

Showing 2 changed files with 66 additions and 18 deletions.
diff --git a/freesound/static/bw-frontend/src/pages/moderation.js b/freesound/static/bw-frontend/src/pages/moderation.js
@@ -6,6 +6,7 @@ const selectOtherFromSameUser = document.getElementById('select-other');
 const stopAllSounds = document.getElementById('stop-sounds');
 const includeDeferredTicketsCheckbox = document.getElementById('include-deferred');
 const autoplaySoundsCheckbox = document.getElementById('autoplay-sounds');
+const autoscrollSoundsCheckbox = document.getElementById('autoscroll-sounds');
 const moderateFormTitle = document.getElementById('moderate-form-title-label');
 const moderateFormWrapper = document.getElementById('moderate-form-wrapper');
 const moderateForm = moderateFormWrapper.getElementsByTagName('form')[0];
@@ -70,6 +71,23 @@ const postTicketsSelected = () => {
     if (selectedTicketsData.length === 0) {
         stopAllPlayers();
     }
+
+    // If no sound is selected after this method is run, scroll window to top
+    if (selectedTicketsData.length === 0) {
+        document.documentElement.scrollTop = document.body.scrollTop = 0;
+    }
+}
+
+const scrollWindowToSoundInfoElement = (soundId) => {
+    if (selectedSoundsInfoPanel.offsetHeight - parseFloat(selectedSoundsInfoPanel.style.paddingBottom) + moderateForm.offsetHeight > window.innerHeight) {
+        const soundInfoElement = selectedSoundsInfoPanel.querySelector(`.sound-info-element[data-sound-id="${soundId}"]`);
+        if (soundInfoElement !== undefined){
+            const amountToScroll = soundInfoElement.offsetTop + moderateForm.offsetHeight - 180;
+            document.documentElement.scrollTop = document.body.scrollTop = amountToScroll;
+        }
+    } else {
+        document.documentElement.scrollTop = document.body.scrollTop = 0;
+    }
 }
 
 const shouldInludeDeferredTickets = () => {
@@ -80,6 +98,26 @@ const shouldAutoplaySounds = () => {
     return autoplaySoundsCheckbox.checked;
 }
 
+const shouldAutoscroll = () => {
+    return autoscrollSoundsCheckbox.checked;
+}
+
+// set cookie when changing checkbox
+includeDeferredTicketsCheckbox.addEventListener('change', (evt) => {
+    const cookieValue = evt.target.checked ? 'on' : 'off';
+    document.cookie = `mod_include_d=${cookieValue};path=/`;
+})
+
+autoplaySoundsCheckbox.addEventListener('change', (evt) => {
+    const cookieValue = evt.target.checked ? 'on' : 'off';
+    document.cookie = `mod_autoplay=${cookieValue};path=/`;
+})
+
+autoscrollSoundsCheckbox.addEventListener('change', (evt) => {
+    const cookieValue = evt.target.checked ? 'on' : 'off';
+    document.cookie = `mod_autoscroll=${cookieValue};path=/`;
+})
+
 const correspondingTicketIsDeferred = (checkbox) => {
     return checkbox.closest('tr').dataset.ticketStatus === 'deferred';
 }
@@ -145,14 +183,14 @@ ticketCheckboxes.forEach(checkbox => {
     // NOTE: the 'change' event is triggered when the checkbox is clicked by the user, but not when programatically setting .checked to true/false
     checkbox.addEventListener('change', () => {
         if (checkbox.dataset.altKey !== "true" && checkbox.dataset.shiftKey !== "true") {
-            // Unselect all other checkboxes
-            ticketCheckboxes.forEach(otherCheckbox => {
-                if (otherCheckbox !== checkbox) {
-                    otherCheckbox.checked = false;
-                }
-            });
-            // Make sure the clicked checkbox is selected (even if the change event would unselect it initially)
-            checkbox.checked = true;
+            // If the current is being selected, then unselect all other checkboxes
+            if (checkbox.checked) {
+                ticketCheckboxes.forEach(otherCheckbox => {
+                    if (otherCheckbox !== checkbox) {
+                        otherCheckbox.checked = false;
+                    }
+                });
+            }
         }
         let didMultipleSelection = false;
         if (checkbox.dataset.shiftKey === "true") {
@@ -205,15 +243,20 @@ ticketCheckboxes.forEach(checkbox => {
             audioElement.pause();
             audioElement.currentTime = 0;
         }
-    });
-})
 
-moderateForm.addEventListener('submit', () => {
-    var url = new URL(moderateForm.action);
-    url.searchParams.set('include_d', shouldInludeDeferredTickets() ? 'on': 'off');
-    url.searchParams.set('autoplay', shouldAutoplaySounds() ? 'on': 'off');
-    moderateForm.action = url.href;
-    return true;
+        // Scroll to sound if not doing multiple selection and sound was checked
+        if (shouldAutoscroll()) {
+            if (!didMultipleSelection) {
+                if (checkbox.checked) {
+                    scrollWindowToSoundInfoElement(checkbox.closest('tr').dataset.soundId);
+                } else {
+                    // If unchecked, scroll a bit to top (the ammount of a sound info element)
+                    const currentScrollPosition = document.documentElement.scrollTop;
+                    document.documentElement.scrollTop = document.body.scrollTop = currentScrollPosition - soundInfoElement.offsetHeight;
+                }
+            }
+        }
+    });
 })
 
 templateResponses.forEach(templateResponse => {

diff --git a/templates_bw/moderation/assigned.html b/templates_bw/moderation/assigned.html
@@ -65,16 +65,21 @@ <h5>No sound tickets in your queue... &#128543</h5>
                             <input type="checkbox" class="bw-checkbox" id="autoplay-sounds" {% if default_autoplay %}checked="checked"{% endif %}/>Autoplay sounds when selecting   
                         </label>
                     </div>
+                    <div>
+                        <label for="autoscroll-sounds">
+                            <input type="checkbox" class="bw-checkbox" id="autoscroll-sounds" {% if default_autoscroll %}checked="checked"{% endif %}/>Scroll to sounds when selecting 
+                        </label>
+                    </div>
                     <div class="text-grey">
-                        You can do alt+click on a row to select <i>multiple</i> rows
+                        You can do alt+click on a row to expand the current selection
                         <br>You can do shift+click on a row to select all the rows since the last previously selected row
                     </div>
                 </div>
             {% endif %}
             </div>
         </div>
         <div class="col-lg-5">
-            <div class="bw-sticky-top3">
+            <div class="bw-sticky-top">
                 <div id="moderate-form-wrapper" class="display-none">
                     <h4 id="moderate-form-title-label"></h4>
                     <div>