From 0561797de85c727a38eea7c4e2d2199b93562ff3 Mon Sep 17 00:00:00 2001
From: Sybille Peters <sypets@gmx.de>
Date: Sun, 11 Feb 2024 14:56:08 +0100
Subject: [PATCH] [BUGFIX] Enable action buttons in Linkvalidator module
The action buttons in the Linkvalidator module are
disabled in case all checkboxes are unchecked.
In case one of the checkboxes changes its state,
the state of the corresponding action button is
now properly updated.
Resolves: #103100
Releases: main
Change-Id: I9a479df294da32f30600287ac76fe7252a23cb1d
Reviewed-on: https://review.typo3.org/c/Packages/TYPO3.CMS/+/82896
Reviewed-by: Oliver Bartsch <bo@cedev.de>
Tested-by: Christian Kuhn <lolli@schwarzbu.ch>
Tested-by: core-ci <typo3@b13.com>
Tested-by: Oliver Bartsch <bo@cedev.de>
Reviewed-by: Christian Kuhn <lolli@schwarzbu.ch>
---
.../TypeScript/linkvalidator/linkvalidator.ts | 28 +++++++++----------
.../Public/JavaScript/linkvalidator.js | 2 +-
2 files changed, 14 insertions(+), 16 deletions(-)
diff --git a/Build/Sources/TypeScript/linkvalidator/linkvalidator.ts b/Build/Sources/TypeScript/linkvalidator/linkvalidator.ts
index 8cc88fba26ec..c3ff0487de06 100644
--- a/Build/Sources/TypeScript/linkvalidator/linkvalidator.ts
+++ b/Build/Sources/TypeScript/linkvalidator/linkvalidator.ts
@@ -15,9 +15,7 @@ import Notification from '@typo3/backend/notification';
import RegularEvent from '@typo3/core/event/regular-event';
enum Selectors {
- settingsContainerSelector = '.t3js-linkvalidator-settings',
actionButtonSelector = '.t3js-linkvalidator-action-button',
- linktypesTableSelector = '#check-options-table',
toggleAllLinktypesSelector = '.t3js-linkvalidator-settings input[type="checkbox"].options-by-type-toggle-all',
linktypesSelector = '.t3js-linkvalidator-settings input[type="checkbox"].options-by-type'
}
@@ -31,18 +29,9 @@ enum Identifier {
*/
class Linkvalidator {
constructor() {
- this.enableTriggerCheckBox();
+ this.toggleTriggerCheckBox();
+ this.toggleActionButton();
this.initializeEvents();
- document.querySelectorAll(Selectors.settingsContainerSelector).forEach((container: HTMLElement): void => {
- Linkvalidator.toggleActionButtons(container);
- });
- }
-
- private static toggleActionButtons(settingsContainer: HTMLElement): void {
- settingsContainer.querySelector(Selectors.actionButtonSelector)?.toggleAttribute(
- 'disabled',
- !settingsContainer.querySelectorAll('input[type="checkbox"]:checked').length
- );
}
private static allCheckBoxesAreChecked(checkBoxes: NodeListOf<HTMLInputElement>): boolean {
@@ -50,10 +39,17 @@ class Linkvalidator {
return checkBoxes.length === checkboxArray.filter((checkBox: HTMLInputElement) => checkBox.checked).length;
}
+ private toggleActionButton(): void {
+ document.querySelector(Selectors.actionButtonSelector)?.toggleAttribute(
+ 'disabled',
+ !document.querySelectorAll('input[type="checkbox"]:checked').length
+ );
+ }
+
/**
* Enables the "Toggle all" checkbox on document load if all child checkboxes are checked
*/
- private enableTriggerCheckBox(): void {
+ private toggleTriggerCheckBox(): void {
const checkBoxes: NodeListOf<HTMLInputElement> = document.querySelectorAll(Selectors.linktypesSelector);
(document.getElementById(Identifier.toggleAllLinktypesId) as HTMLInputElement).checked = Linkvalidator.allCheckBoxesAreChecked(checkBoxes);
}
@@ -68,11 +64,13 @@ class Linkvalidator {
checkBox.checked = checkIt;
});
currentTarget.checked = checkIt;
+ this.toggleActionButton();
}).delegateTo(document, Selectors.toggleAllLinktypesSelector);
// toggle (checkbox): on change
new RegularEvent('change', (): void => {
- this.enableTriggerCheckBox();
+ this.toggleTriggerCheckBox();
+ this.toggleActionButton();
}).delegateTo(document, Selectors.linktypesSelector);
new RegularEvent('click', (e: PointerEvent, actionButton: HTMLInputElement): void => {
diff --git a/typo3/sysext/linkvalidator/Resources/Public/JavaScript/linkvalidator.js b/typo3/sysext/linkvalidator/Resources/Public/JavaScript/linkvalidator.js
index 05f9258c2814..352c73aea4f7 100644
--- a/typo3/sysext/linkvalidator/Resources/Public/JavaScript/linkvalidator.js
+++ b/typo3/sysext/linkvalidator/Resources/Public/JavaScript/linkvalidator.js
@@ -10,4 +10,4 @@
*
* The TYPO3 project - inspiring people to share!
*/
-import Notification from"@typo3/backend/notification.js";import RegularEvent from"@typo3/core/event/regular-event.js";var Selectors,Identifier;!function(e){e.settingsContainerSelector=".t3js-linkvalidator-settings",e.actionButtonSelector=".t3js-linkvalidator-action-button",e.linktypesTableSelector="#check-options-table",e.toggleAllLinktypesSelector='.t3js-linkvalidator-settings input[type="checkbox"].options-by-type-toggle-all',e.linktypesSelector='.t3js-linkvalidator-settings input[type="checkbox"].options-by-type'}(Selectors||(Selectors={})),function(e){e.toggleAllLinktypesId="options-by-type-toggle-all"}(Identifier||(Identifier={}));class Linkvalidator{constructor(){this.enableTriggerCheckBox(),this.initializeEvents(),document.querySelectorAll(Selectors.settingsContainerSelector).forEach((e=>{Linkvalidator.toggleActionButtons(e)}))}static toggleActionButtons(e){e.querySelector(Selectors.actionButtonSelector)?.toggleAttribute("disabled",!e.querySelectorAll('input[type="checkbox"]:checked').length)}static allCheckBoxesAreChecked(e){const t=Array.from(e);return e.length===t.filter((e=>e.checked)).length}enableTriggerCheckBox(){const e=document.querySelectorAll(Selectors.linktypesSelector);document.getElementById(Identifier.toggleAllLinktypesId).checked=Linkvalidator.allCheckBoxesAreChecked(e)}initializeEvents(){new RegularEvent("change",((e,t)=>{const o=document.querySelectorAll(Selectors.linktypesSelector),l=!Linkvalidator.allCheckBoxesAreChecked(o);o.forEach((e=>{e.checked=l})),t.checked=l})).delegateTo(document,Selectors.toggleAllLinktypesSelector),new RegularEvent("change",(()=>{this.enableTriggerCheckBox()})).delegateTo(document,Selectors.linktypesSelector),new RegularEvent("click",((e,t)=>{Notification.success(t.dataset.notificationMessage||"Event triggered","",2)})).delegateTo(document,Selectors.actionButtonSelector)}}export default new Linkvalidator;
\ No newline at end of file
+import Notification from"@typo3/backend/notification.js";import RegularEvent from"@typo3/core/event/regular-event.js";var Selectors,Identifier;!function(e){e.actionButtonSelector=".t3js-linkvalidator-action-button",e.toggleAllLinktypesSelector='.t3js-linkvalidator-settings input[type="checkbox"].options-by-type-toggle-all',e.linktypesSelector='.t3js-linkvalidator-settings input[type="checkbox"].options-by-type'}(Selectors||(Selectors={})),function(e){e.toggleAllLinktypesId="options-by-type-toggle-all"}(Identifier||(Identifier={}));class Linkvalidator{constructor(){this.toggleTriggerCheckBox(),this.toggleActionButton(),this.initializeEvents()}static allCheckBoxesAreChecked(e){const t=Array.from(e);return e.length===t.filter((e=>e.checked)).length}toggleActionButton(){document.querySelector(Selectors.actionButtonSelector)?.toggleAttribute("disabled",!document.querySelectorAll('input[type="checkbox"]:checked').length)}toggleTriggerCheckBox(){const e=document.querySelectorAll(Selectors.linktypesSelector);document.getElementById(Identifier.toggleAllLinktypesId).checked=Linkvalidator.allCheckBoxesAreChecked(e)}initializeEvents(){new RegularEvent("change",((e,t)=>{const o=document.querySelectorAll(Selectors.linktypesSelector),l=!Linkvalidator.allCheckBoxesAreChecked(o);o.forEach((e=>{e.checked=l})),t.checked=l,this.toggleActionButton()})).delegateTo(document,Selectors.toggleAllLinktypesSelector),new RegularEvent("change",(()=>{this.toggleTriggerCheckBox(),this.toggleActionButton()})).delegateTo(document,Selectors.linktypesSelector),new RegularEvent("click",((e,t)=>{Notification.success(t.dataset.notificationMessage||"Event triggered","",2)})).delegateTo(document,Selectors.actionButtonSelector)}}export default new Linkvalidator;
\ No newline at end of file
--
GitLab