Commit c13aa8be authored by Michael Straschek's avatar Michael Straschek Committed by Susanne Moog
Browse files

[BUGFIX] Deactivate link element's explanation toggle after change

Dynamically fetching/applying additional data for the link explanation
seems to be overdone, so we simply deactivate the toggle button and
remove the icon after selection/modification of the link target.
After persisting the record, the updated link explanation
will be visible.

Resolves: #88737
Releases: master, 9.5
Change-Id: I679abb2178aedfc8a29cccace99950a3a8acaab6
Reviewed-on: https://review.typo3.org/c/Packages/TYPO3.CMS/+/61422

Tested-by: Oliver Bartsch's avatarOliver Bartsch <bo@cedev.de>
Tested-by: Alexander Stehlik's avatarAlexander Stehlik <alexander.stehlik@gmail.com>
Tested-by: default avatarTYPO3com <noreply@typo3.com>
Tested-by: Susanne Moog's avatarSusanne Moog <look@susi.dev>
Reviewed-by: Oliver Bartsch's avatarOliver Bartsch <bo@cedev.de>
Reviewed-by: Alexander Stehlik's avatarAlexander Stehlik <alexander.stehlik@gmail.com>
Reviewed-by: Susanne Moog's avatarSusanne Moog <look@susi.dev>
parent 4487d5b1
......@@ -17,19 +17,23 @@ enum Selectors {
toggleSelector = '.t3js-form-field-inputlink-explanation-toggle',
inputFieldSelector = '.t3js-form-field-inputlink-input',
explanationSelector = '.t3js-form-field-inputlink-explanation',
iconSelector = '.t3js-form-field-inputlink-icon',
}
class InputLinkElement {
private element: HTMLSelectElement = null;
private container: HTMLElement = null;
private toggleSelector: HTMLButtonElement = null;
private explanationField: HTMLInputElement = null;
private icon: HTMLSpanElement = null;
constructor(elementId: string) {
$((): void => {
this.element = <HTMLSelectElement>document.querySelector('#' + elementId);
this.container = <HTMLElement>this.element.closest('.t3js-form-field-inputlink');
this.toggleSelector = <HTMLButtonElement>this.container.querySelector(Selectors.toggleSelector);
this.explanationField = <HTMLInputElement>this.container.querySelector(Selectors.explanationSelector);
this.icon = <HTMLSpanElement>this.container.querySelector(Selectors.iconSelector);
this.toggleVisibility(this.explanationField.value === '');
this.registerEventHandler();
});
......@@ -48,7 +52,7 @@ class InputLinkElement {
}
private registerEventHandler(): void {
this.container.querySelector(Selectors.toggleSelector).addEventListener('click', (e: Event): void => {
this.toggleSelector.addEventListener('click', (e: Event): void => {
e.preventDefault();
const explanationShown = !this.explanationField.classList.contains('hidden');
......@@ -60,8 +64,19 @@ class InputLinkElement {
if (explanationShown) {
this.toggleVisibility(explanationShown);
}
this.disableToggle();
this.clearIcon();
});
}
private disableToggle(): void {
this.toggleSelector.classList.add('disabled');
this.toggleSelector.setAttribute('disabled', 'disabled');
}
private clearIcon(): void {
this.icon.innerHTML = '';
}
}
export = InputLinkElement;
......@@ -221,7 +221,7 @@ class InputLinkElement extends AbstractFormElement
$expansionHtml[] = '<div class="form-wizards-wrap">';
$expansionHtml[] = '<div class="form-wizards-element">';
$expansionHtml[] = '<div class="input-group t3js-form-field-inputlink">';
$expansionHtml[] = '<span class="input-group-addon">' . $linkExplanation['icon'] . '</span>';
$expansionHtml[] = '<span class="t3js-form-field-inputlink-icon input-group-addon">' . $linkExplanation['icon'] . '</span>';
$expansionHtml[] = '<input class="form-control form-field-inputlink-explanation t3js-form-field-inputlink-explanation" data-toggle="tooltip" data-title="' . $explanation . '" value="' . $explanation . '" readonly>';
$expansionHtml[] = '<input type="text"' . GeneralUtility::implodeAttributes($attributes, true) . ' />';
$expansionHtml[] = '<span class="input-group-btn">';
......
......@@ -10,4 +10,4 @@
*
* The TYPO3 project - inspiring people to share!
*/
define(["require","exports","jquery"],function(e,t,i){"use strict";var n;!function(e){e.toggleSelector=".t3js-form-field-inputlink-explanation-toggle",e.inputFieldSelector=".t3js-form-field-inputlink-input",e.explanationSelector=".t3js-form-field-inputlink-explanation"}(n||(n={}));return class{constructor(e){this.element=null,this.container=null,this.explanationField=null,i(()=>{this.element=document.querySelector("#"+e),this.container=this.element.closest(".t3js-form-field-inputlink"),this.explanationField=this.container.querySelector(n.explanationSelector),this.toggleVisibility(""===this.explanationField.value),this.registerEventHandler()})}toggleVisibility(e){this.explanationField.classList.toggle("hidden",e),this.element.classList.toggle("hidden",!e);const t=this.container.querySelector(".form-control-clearable button.close");null!==t&&t.classList.toggle("hidden",!e)}registerEventHandler(){this.container.querySelector(n.toggleSelector).addEventListener("click",e=>{e.preventDefault();const t=!this.explanationField.classList.contains("hidden");this.toggleVisibility(t)}),this.container.querySelector(n.inputFieldSelector).addEventListener("change",()=>{const e=!this.explanationField.classList.contains("hidden");e&&this.toggleVisibility(e)})}}});
\ No newline at end of file
define(["require","exports","jquery"],function(e,t,i){"use strict";var l;!function(e){e.toggleSelector=".t3js-form-field-inputlink-explanation-toggle",e.inputFieldSelector=".t3js-form-field-inputlink-input",e.explanationSelector=".t3js-form-field-inputlink-explanation",e.iconSelector=".t3js-form-field-inputlink-icon"}(l||(l={}));return class{constructor(e){this.element=null,this.container=null,this.toggleSelector=null,this.explanationField=null,this.icon=null,i(()=>{this.element=document.querySelector("#"+e),this.container=this.element.closest(".t3js-form-field-inputlink"),this.toggleSelector=this.container.querySelector(l.toggleSelector),this.explanationField=this.container.querySelector(l.explanationSelector),this.icon=this.container.querySelector(l.iconSelector),this.toggleVisibility(""===this.explanationField.value),this.registerEventHandler()})}toggleVisibility(e){this.explanationField.classList.toggle("hidden",e),this.element.classList.toggle("hidden",!e);const t=this.container.querySelector(".form-control-clearable button.close");null!==t&&t.classList.toggle("hidden",!e)}registerEventHandler(){this.toggleSelector.addEventListener("click",e=>{e.preventDefault();const t=!this.explanationField.classList.contains("hidden");this.toggleVisibility(t)}),this.container.querySelector(l.inputFieldSelector).addEventListener("change",()=>{const e=!this.explanationField.classList.contains("hidden");e&&this.toggleVisibility(e),this.disableToggle(),this.clearIcon()})}disableToggle(){this.toggleSelector.classList.add("disabled"),this.toggleSelector.setAttribute("disabled","disabled")}clearIcon(){this.icon.innerHTML=""}}});
\ No newline at end of file
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment