Multi tool select buttons bug (#3404)

# Description of Changes

Changes:
- In the multitool page, the behavior of the "Select/Deselect All"
buttons was changed so that if no pages are selected, then the "Deselect
All" button is disabled, and if all pages are selected, then the "Select
All" button is disabled.
- These buttons will also appear if the "Page Select" is turned on,
either by pressing the "Page Select" button or manually selecting one
page.
- Furthermore, a bug that caused the pages to remain selected when "Page
Select" is off was also fixed

Why the changes were made:
- The multitool did not allow the "Select All" or "Deselect All" button
to appear simultaneously. The multitool was relying on a toggle mechanic
for the Page Selection and this could prevent the user from selecting or
deselecting all pages as intended, if they manually select/deselect one
or more pages.

Other challenges:
- No particular challenges encountered

Relevant Screenshots:


![Screenshot_1](https://github.com/user-attachments/assets/47e1a4ad-fdfb-460a-9302-80a99f732874)
*Fig. 1 - Only "Select All" button appears when Page Select is turned
on, since no pages are selected*


![Screenshot_2](https://github.com/user-attachments/assets/7174b492-f503-4a19-9bc8-56e18fba64e9)
*Fig. 2 - Both "Select All" and "Deselect All" buttons appear when one
or more, but not all pages are selected*


![Screenshot_3](https://github.com/user-attachments/assets/8157ef49-3268-4fa1-b8df-c7f078237141)
*Fig. 3 - Only "Deselect All" button appears when all pages are
selected*


![Screenshot_4](https://github.com/user-attachments/assets/61b69e6a-1536-47b0-bf11-3dd56df8e365)
*Fig. 4 - When Page Select is turned off, both "Select All" and
"Deselect All" buttons disappear and all pages are deselected*


Closes #3206 

---

## Checklist

### General

- [x] I have read the [Contribution
Guidelines](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/CONTRIBUTING.md)
- [x] I have read the [Stirling-PDF Developer
Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/DeveloperGuide.md)
(if applicable)
- [ ] I have read the [How to add new languages to
Stirling-PDF](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/HowToAddNewLanguage.md)
(if applicable)
- [x] I have performed a self-review of my own code
- [x] My changes generate no new warnings

### Documentation

- [ ] I have updated relevant docs on [Stirling-PDF's doc
repo](https://github.com/Stirling-Tools/Stirling-Tools.github.io/blob/main/docs/)
(if functionality has heavily changed)
- [ ] I have read the section [Add New Translation
Tags](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/HowToAddNewLanguage.md#add-new-translation-tags)
(for new translation tags only)

### UI Changes (if applicable)

- [x] Screenshots or videos demonstrating the UI changes are attached
(e.g., as comments or direct attachments in the PR)

### Testing (if applicable)

- [x] I have tested my changes locally. Refer to the [Testing
Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/DeveloperGuide.md#6-testing)
for more details.

src/main/resources/static/js/multitool/PdfContainer.js

@@ -34,7 +34,8 @@ class PdfContainer {
     this.splitPDF = this.splitPDF.bind(this);
     this.splitAll = this.splitAll.bind(this);
     this.deleteSelected = this.deleteSelected.bind(this);
-    this.toggleSelectAll = this.toggleSelectAll.bind(this);
+    this.selectAll = this.selectAll.bind(this);
+    this.deselectAll = this.deselectAll.bind(this);
     this.updateSelectedPagesDisplay = this.updateSelectedPagesDisplay.bind(this);
     this.toggleSelectPageVisibility = this.toggleSelectPageVisibility.bind(this);
     this.updatePagesFromCSV = this.updatePagesFromCSV.bind(this);
@@ -63,7 +64,8 @@ class PdfContainer {
     window.rotateAll = this.rotateAll;
     window.splitAll = this.splitAll;
     window.deleteSelected = this.deleteSelected;
-    window.toggleSelectAll = this.toggleSelectAll;
+    window.selectAll = this.selectAll;
+    window.deselectAll = this.deselectAll;
     window.updateSelectedPagesDisplay = this.updateSelectedPagesDisplay;
     window.toggleSelectPageVisibility = this.toggleSelectPageVisibility;
     window.updatePagesFromCSV = this.updatePagesFromCSV;
@@ -72,7 +74,6 @@ class PdfContainer {
     window.addFilesBlankAll = this.addFilesBlankAll;
     window.removeAllElements = this.removeAllElements;
     window.resetPages = this.resetPages;
-    window.selectAll = false;
 
     let undoBtn = document.getElementById('undo-btn');
     let redoBtn = document.getElementById('redo-btn');
@@ -433,33 +434,43 @@ class PdfContainer {
     this.undoManager.pushUndoClearRedo(removeSelectedCommand);
   }
 
-  toggleSelectAll() {
+  selectAll() {
     const checkboxes = document.querySelectorAll('.pdf-actions_checkbox');
-    window.selectAll = !window.selectAll;
     const selectIcon = document.getElementById('select-All-Container');
     const deselectIcon = document.getElementById('deselect-All-Container');
 
-    if (!window.selectAll) {
-      this.showButton(selectIcon, true);
-      this.showButton(deselectIcon, false);
-    } else {
-      this.showButton(selectIcon, false);
-      this.showButton(deselectIcon, true);
-    }
+    this.showButton(selectIcon, false);
+    this.showButton(deselectIcon, true);
+
     checkboxes.forEach((checkbox) => {
-      checkbox.checked = window.selectAll;
+      checkbox.checked = true;
 
       const pageNumber = Array.from(checkbox.parentNode.parentNode.children).indexOf(checkbox.parentNode) + 1;
 
-      if (checkbox.checked) {
-        if (!window.selectedPages.includes(pageNumber)) {
-          window.selectedPages.push(pageNumber);
-        }
-      } else {
-        const index = window.selectedPages.indexOf(pageNumber);
-        if (index !== -1) {
-          window.selectedPages.splice(index, 1);
-        }
+      if (!window.selectedPages.includes(pageNumber)) {
+        window.selectedPages.push(pageNumber);
+      }
+    });
+
+    this.updateSelectedPagesDisplay();
+  }
+
+  deselectAll() {
+    const checkboxes = document.querySelectorAll('.pdf-actions_checkbox');
+    const selectIcon = document.getElementById('select-All-Container');
+    const deselectIcon = document.getElementById('deselect-All-Container');
+
+    this.showButton(selectIcon, true);
+    this.showButton(deselectIcon, false);
+    
+    checkboxes.forEach((checkbox) => {
+      checkbox.checked = false;
+
+      const pageNumber = Array.from(checkbox.parentNode.parentNode.children).indexOf(checkbox.parentNode) + 1;
+
+      const index = window.selectedPages.indexOf(pageNumber);
+      if (index !== -1) {
+        window.selectedPages.splice(index, 1);
       }
     });
 
@@ -569,6 +580,34 @@ class PdfContainer {
 
     // Update the input field with the formatted page list
     selectedPagesInput.value = this.formatSelectedPages(window.selectedPages);
+
+    const selectIcon = document.getElementById('select-All-Container');
+    const deselectIcon = document.getElementById('deselect-All-Container');
+    
+    if (window.selectPage) { // Check if selectPage mode is active
+      console.log("Page Select on. Showing buttons");
+      //Check if no pages are selected
+      if (window.selectedPages.length === 0) {
+        this.showButton(selectIcon, true);
+        this.showButton(deselectIcon, false);
+      } else {
+        this.showButton(deselectIcon, true);
+      }
+
+      //Check if all pages are selected
+      const allCheckboxes = document.querySelectorAll('.pdf-actions_checkbox');
+      const allSelected = Array.from(allCheckboxes).every((checkbox) => checkbox.checked);
+      if (allSelected) {
+        this.showButton(selectIcon, false);
+        this.showButton(deselectIcon, true);
+      } else {
+        this.showButton(selectIcon, true);
+      }
+    } else {
+      console.log("Page Select off. Hidding buttons");
+      this.showButton(selectIcon, false);
+      this.showButton(deselectIcon, false);
+    }
   }
 
   parsePageRanges(ranges) {
@@ -793,13 +832,9 @@ class PdfContainer {
     });
 
     const checkboxes = document.querySelectorAll('.pdf-actions_checkbox');
-    window.selectAll = false;
     const selectIcon = document.getElementById('select-All-Container');
     const deselectIcon = document.getElementById('deselect-All-Container');
 
-    selectIcon.style.display = 'inline';
-    deselectIcon.style.display = 'none';
-
     checkboxes.forEach((checkbox) => {
       const pageNumber = Array.from(checkbox.parentNode.parentNode.children).indexOf(checkbox.parentNode) + 1;
 
@@ -852,18 +887,30 @@ class PdfContainer {
     deleteButton.classList.toggle('hidden', !window.selectPage);
     const selectedPages = document.getElementById('selected-pages-display');
     selectedPages.classList.toggle('hidden', !window.selectPage);
+
     if(!window.selectPage)
     {
       this.showButton(document.getElementById('deselect-All-Container'), false);
       this.showButton(document.getElementById('select-All-Container'), false);
-    }
-    else if(window.selectAll){
-      this.showButton(document.getElementById('deselect-All-Container'), true);
-      this.showButton(document.getElementById('select-All-Container'), false);
+
+      // Uncheck all checkboxes and clear selected pages
+      const allCheckboxes = document.querySelectorAll('.pdf-actions_checkbox');
+      allCheckboxes.forEach((checkbox) => {
+        checkbox.checked = false;
+      });
+      window.selectedPages = [];
+      this.updateSelectedPagesDisplay();
     }
     else{
-      this.showButton(document.getElementById('deselect-All-Container'), false);
-      this.showButton(document.getElementById('select-All-Container'), true);
+      const allCheckboxes = document.querySelectorAll('.pdf-actions_checkbox');
+      const allSelected = Array.from(allCheckboxes).every((checkbox) => checkbox.checked);
+      if (!allSelected) {
+        this.showButton(document.getElementById('select-All-Container'), true);
+      }
+      
+      if (window.selectedPages.length > 0) {
+        this.showButton(document.getElementById('deselect-All-Container'), true);
+      }
     }
 
     const exportSelected = document.getElementById('export-selected-button');

src/main/resources/templates/multi-tool.html

@@ -94,11 +94,11 @@
                   </span>
                 </button>
                 <button id="deselect-All-Container" th:title="#{multiTool.deselectAll}"
-                  class="btn btn-secondary enable-on-file hidden" onclick="toggleSelectAll()" disabled>
+                  class="btn btn-secondary enable-on-file hidden" onclick="deselectAll()" disabled>
                   <span class="material-symbols-rounded" id="deselect-icon">deselect</span>
                 </button>
                 <button id="select-All-Container" th:title="#{multiTool.selectAll}"
-                  class="btn btn-secondary enable-on-file hidden" onclick="toggleSelectAll()" disabled>
+                  class="btn btn-secondary enable-on-file hidden" onclick="selectAll()" disabled>
                   <span class="material-symbols-rounded" id="select-icon">select_all</span>
                 </button>
                 <button id="delete-button" th:title="#{multiTool.deleteSelected}"