diff --git a/Build/Sources/TypeScript/linkvalidator/linkvalidator.ts b/Build/Sources/TypeScript/linkvalidator/linkvalidator.ts index 8cc88fba26ec974b875e9cfefcf0461d1a1c18d0..c3ff0487de0664480db89ba69e39afb6fad76f31 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 05f9258c281447a245b442b97c30b7c7a1774397..352c73aea4f7cca3e61e71bec112fabf57550108 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