[TASK] Streamline GlobalEventHandler JavaScript module

* streamline variable names
* streamline method names
* preparation for additions in the future

Resolves: #91805
Releases: master, 10.4
Change-Id: Iaa16cfcbcda7adbd48838a498f2f459d97f4ef18
Reviewed-on: https://review.typo3.org/c/Packages/TYPO3.CMS/+/65042


Tested-by: TYPO3com <noreply@typo3.com>
Tested-by: Oliver Hader <oliver.hader@typo3.org>
Reviewed-by: Oliver Hader <oliver.hader@typo3.org>

Build/Sources/TypeScript/backend/Resources/Public/TypeScript/GlobalEventHandler.ts

@@ -26,7 +26,8 @@ type HTMLFormChildElement = HTMLInputElement | HTMLSelectElement | HTMLTextAreaE
  *   + `data-action-navigate="..."` navigates to URL
  *     + `$value` URL taken from value of current element
  *     + `$data` URL taken from `data-navigate-value`
- *     + `$data=~s/$value/` URL taken from `data-navigate-value`, substituting literal `${value}`
+ *     + `$data=~s/$value/` URL taken from `data-navigate-value`,
+ *        substituting literal `${value}` and `$[value]` of current element
  * + `data-global-event="click"`
  *   + @todo
  *
@@ -54,25 +55,25 @@ class GlobalEventHandler {
 
   private handleChangeEvent(evt: Event, resolvedTarget: HTMLElement): void {
     evt.preventDefault();
-    this.handleSubmitAction(evt, resolvedTarget)
-      || this.handleNavigateAction(evt, resolvedTarget);
+    this.handleFormChildSubmitAction(evt, resolvedTarget)
+      || this.handleFormChildNavigateAction(evt, resolvedTarget);
   }
 
   private handleClickEvent(evt: Event, resolvedTarget: HTMLElement): void {
     evt.preventDefault();
   }
 
-  private handleSubmitAction(evt: Event, resolvedTarget: HTMLElement): boolean {
-    const action: string = resolvedTarget.dataset.actionSubmit;
-    if (!action) {
+  private handleFormChildSubmitAction(evt: Event, resolvedTarget: HTMLElement): boolean {
+    const actionSubmit: string = resolvedTarget.dataset.actionSubmit;
+    if (!actionSubmit) {
       return false;
     }
     // @example [data-action-submit]="$form"
-    if (action === '$form' && this.isHTMLFormChildElement(resolvedTarget)) {
+    if (actionSubmit === '$form' && this.isHTMLFormChildElement(resolvedTarget)) {
       (resolvedTarget as HTMLFormChildElement).form.submit();
       return true;
     }
-    const formCandidate = document.querySelector(action);
+    const formCandidate = document.querySelector(actionSubmit);
     if (formCandidate instanceof HTMLFormElement) {
       formCandidate.submit();
       return true;
@@ -80,29 +81,34 @@ class GlobalEventHandler {
     return false;
   }
 
-  private handleNavigateAction(evt: Event, resolvedTarget: HTMLElement): boolean {
-    const action: string = resolvedTarget.dataset.actionNavigate;
-    if (!action) {
+  private handleFormChildNavigateAction(evt: Event, resolvedTarget: HTMLElement): boolean {
+    const actionNavigate: string = resolvedTarget.dataset.actionNavigate;
+    if (!actionNavigate) {
       return false;
     }
     const value = this.resolveHTMLFormChildElementValue(resolvedTarget);
     const navigateValue = resolvedTarget.dataset.navigateValue;
-    if (action === '$data=~s/$value/' && navigateValue && value !== null) {
-      // replacing `${value}` and its URL encoded representation
-      window.location.href = navigateValue.replace(/(\$\{value\}|%24%7Bvalue%7D)/gi, value);
+    if (actionNavigate === '$data=~s/$value/' && navigateValue && value !== null) {
+      window.location.href = this.substituteValueVariable(navigateValue, value);
       return true;
     }
-    if (action === '$data' && navigateValue) {
+    if (actionNavigate === '$data' && navigateValue) {
       window.location.href = navigateValue;
       return true;
     }
-    if (action === '$value' && value) {
+    if (actionNavigate === '$value' && value) {
       window.location.href = value;
       return true;
     }
     return false;
   }
 
+  private substituteValueVariable(haystack: string, substitute: string): string {
+    // replacing `${value}` and `$[value]` and its URL encoded representation
+    // (`${value}` is difficult to achieve with Fluid, that's why there's `$[value]` as well)
+    return haystack.replace(/(\$\{value\}|%24%7Bvalue%7D|\$\[value\]|%24%5Bvalue%5D)/gi, substitute);
+  }
+
   private isHTMLFormChildElement(element: HTMLElement): boolean {
     return element instanceof HTMLSelectElement
       || element instanceof HTMLInputElement

typo3/sysext/backend/Resources/Public/JavaScript/GlobalEventHandler.js

@@ -10,4 +10,4 @@
  *
  * The TYPO3 project - inspiring people to share!
  */
-define(["require","exports","TYPO3/CMS/Core/DocumentService","TYPO3/CMS/Core/Event/RegularEvent"],(function(e,t,n,i){"use strict";return new class{constructor(){this.options={onChangeSelector:'[data-global-event="change"]',onClickSelector:'[data-global-event="click"]'},n.ready().then(()=>this.registerEvents())}registerEvents(){new i("change",this.handleChangeEvent.bind(this)).delegateTo(document,this.options.onChangeSelector),new i("click",this.handleClickEvent.bind(this)).delegateTo(document,this.options.onClickSelector)}handleChangeEvent(e,t){e.preventDefault(),this.handleSubmitAction(e,t)||this.handleNavigateAction(e,t)}handleClickEvent(e,t){e.preventDefault()}handleSubmitAction(e,t){const n=t.dataset.actionSubmit;if(!n)return!1;if("$form"===n&&this.isHTMLFormChildElement(t))return t.form.submit(),!0;const i=document.querySelector(n);return i instanceof HTMLFormElement&&(i.submit(),!0)}handleNavigateAction(e,t){const n=t.dataset.actionNavigate;if(!n)return!1;const i=this.resolveHTMLFormChildElementValue(t),a=t.dataset.navigateValue;return"$data=~s/$value/"===n&&a&&null!==i?(window.location.href=a.replace(/(\$\{value\}|%24%7Bvalue%7D)/gi,i),!0):"$data"===n&&a?(window.location.href=a,!0):!("$value"!==n||!i)&&(window.location.href=i,!0)}isHTMLFormChildElement(e){return e instanceof HTMLSelectElement||e instanceof HTMLInputElement||e instanceof HTMLTextAreaElement}resolveHTMLFormChildElementValue(e){const t=e.getAttribute("type");return e instanceof HTMLSelectElement?e.options[e.selectedIndex].value:e instanceof HTMLInputElement&&"checkbox"===t?e.checked?e.value:"":e instanceof HTMLInputElement?e.value:null}}}));
\ No newline at end of file
+define(["require","exports","TYPO3/CMS/Core/DocumentService","TYPO3/CMS/Core/Event/RegularEvent"],(function(e,t,n,i){"use strict";return new class{constructor(){this.options={onChangeSelector:'[data-global-event="change"]',onClickSelector:'[data-global-event="click"]'},n.ready().then(()=>this.registerEvents())}registerEvents(){new i("change",this.handleChangeEvent.bind(this)).delegateTo(document,this.options.onChangeSelector),new i("click",this.handleClickEvent.bind(this)).delegateTo(document,this.options.onClickSelector)}handleChangeEvent(e,t){e.preventDefault(),this.handleFormChildSubmitAction(e,t)||this.handleFormChildNavigateAction(e,t)}handleClickEvent(e,t){e.preventDefault()}handleFormChildSubmitAction(e,t){const n=t.dataset.actionSubmit;if(!n)return!1;if("$form"===n&&this.isHTMLFormChildElement(t))return t.form.submit(),!0;const i=document.querySelector(n);return i instanceof HTMLFormElement&&(i.submit(),!0)}handleFormChildNavigateAction(e,t){const n=t.dataset.actionNavigate;if(!n)return!1;const i=this.resolveHTMLFormChildElementValue(t),a=t.dataset.navigateValue;return"$data=~s/$value/"===n&&a&&null!==i?(window.location.href=this.substituteValueVariable(a,i),!0):"$data"===n&&a?(window.location.href=a,!0):!("$value"!==n||!i)&&(window.location.href=i,!0)}substituteValueVariable(e,t){return e.replace(/(\$\{value\}|%24%7Bvalue%7D|\$\[value\]|%24%5Bvalue%5D)/gi,t)}isHTMLFormChildElement(e){return e instanceof HTMLSelectElement||e instanceof HTMLInputElement||e instanceof HTMLTextAreaElement}resolveHTMLFormChildElementValue(e){const t=e.getAttribute("type");return e instanceof HTMLSelectElement?e.options[e.selectedIndex].value:e instanceof HTMLInputElement&&"checkbox"===t?e.checked?e.value:"":e instanceof HTMLInputElement?e.value:null}}}));
\ No newline at end of file