Skip to content
Snippets Groups Projects
Commit efd86093 authored by Oliver Hader's avatar Oliver Hader Committed by Oliver Hader
Browse files

[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: default avatarTYPO3com <noreply@typo3.com>
Tested-by: default avatarOliver Hader <oliver.hader@typo3.org>
Reviewed-by: default avatarOliver Hader <oliver.hader@typo3.org>
parent 079cc536
No related merge requests found
......@@ -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
......
......@@ -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
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