[BUGFIX] Deactivate link element's explanation toggle after change 22/61422/9
authorMichael Straschek <m@straschek.io>
Fri, 2 Aug 2019 22:13:53 +0000 (00:13 +0200)
committerSusanne Moog <look@susi.dev>
Sat, 9 Nov 2019 13:51:20 +0000 (14:51 +0100)
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 <bo@cedev.de>
Tested-by: Alexander Stehlik <alexander.stehlik@gmail.com>
Tested-by: TYPO3com <noreply@typo3.com>
Tested-by: Susanne Moog <look@susi.dev>
Reviewed-by: Oliver Bartsch <bo@cedev.de>
Reviewed-by: Alexander Stehlik <alexander.stehlik@gmail.com>
Reviewed-by: Susanne Moog <look@susi.dev>
Build/Sources/TypeScript/backend/Resources/Public/TypeScript/FormEngine/Element/InputLinkElement.ts
typo3/sysext/backend/Classes/Form/Element/InputLinkElement.php
typo3/sysext/backend/Resources/Public/JavaScript/FormEngine/Element/InputLinkElement.js

index 1f3974b..60369f5 100644 (file)
@@ -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;
index ae366c2..fe6be85 100644 (file)
@@ -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">';
index ec311b4..6f184aa 100644 (file)
@@ -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