From a1118b861ee58592b1314b47dcecac9b7fe00693 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jos=C3=A9=20Nuno=20Barbosa=20Quintas?= <116971620+JoseQuintas2003@users.noreply.github.com> Date: Mon, 28 Apr 2025 22:44:51 +0100 Subject: [PATCH] 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. --- .../static/js/multitool/PdfContainer.js | 111 +++++++++++++----- src/main/resources/templates/multi-tool.html | 4 +- 2 files changed, 81 insertions(+), 34 deletions(-) diff --git a/src/main/resources/static/js/multitool/PdfContainer.js b/src/main/resources/static/js/multitool/PdfContainer.js index 72dd7f4c0..32c34ba46 100644 --- a/src/main/resources/static/js/multitool/PdfContainer.js +++ b/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'); diff --git a/src/main/resources/templates/multi-tool.html b/src/main/resources/templates/multi-tool.html index 3c6c60fba..173b92838 100644 --- a/src/main/resources/templates/multi-tool.html +++ b/src/main/resources/templates/multi-tool.html @@ -94,11 +94,11 @@