From 224a000baa43da89323e7c34257cdecc71d7aecb Mon Sep 17 00:00:00 2001
From: Oliver Hader <oliver@typo3.org>
Date: Wed, 23 Sep 2020 10:40:54 +0200
Subject: [PATCH] [BUGFIX] Send specific value when unchecking items in
TypoScript module
Using `GlobalEventHandler` in combination with checkboxes and unchecking
on item uses and empty string `''` as value for that particular parameter
(e.g. `&setting=`). However, some scenarios in the TYPO3 backend rely on
receiving `&setting=0` instead - e.g. see BackendUtility::getModuleData().
New attribute `data-empty-value` has been introduced to achieve that.
Resolves: #92378
Releases: master, 10.4
Change-Id: Idc372b8c572212fc26cf2bae7fa6e74c2a2a9c59
Reviewed-on: https://review.typo3.org/c/Packages/TYPO3.CMS/+/65832
Tested-by: TYPO3com <noreply@typo3.com>
Tested-by: Richard Haeser <richard@richardhaeser.com>
Tested-by: Georg Ringer <georg.ringer@gmail.com>
Reviewed-by: Richard Haeser <richard@richardhaeser.com>
Reviewed-by: Georg Ringer <georg.ringer@gmail.com>
---
.../Resources/Public/TypeScript/GlobalEventHandler.ts | 10 +++++++++-
.../sysext/backend/Classes/Utility/BackendUtility.php | 1 +
.../Resources/Public/JavaScript/GlobalEventHandler.js | 2 +-
...entHandlerAndActionDispatcherInsteadOfInlineJS.rst | 11 +++++++++++
4 files changed, 22 insertions(+), 2 deletions(-)
diff --git a/Build/Sources/TypeScript/backend/Resources/Public/TypeScript/GlobalEventHandler.ts b/Build/Sources/TypeScript/backend/Resources/Public/TypeScript/GlobalEventHandler.ts
index c5d405dbf38d..43d9c777f5f5 100644
--- a/Build/Sources/TypeScript/backend/Resources/Public/TypeScript/GlobalEventHandler.ts
+++ b/Build/Sources/TypeScript/backend/Resources/Public/TypeScript/GlobalEventHandler.ts
@@ -153,7 +153,15 @@ class GlobalEventHandler {
if (element instanceof HTMLSelectElement) {
return element.options[element.selectedIndex].value;
} else if (element instanceof HTMLInputElement && type === 'checkbox') {
- return element.checked ? element.value : '';
+ // used for representing unchecked state as e.g. `data-empty-value="0"`
+ const emptyValue: string = element.dataset.emptyValue;
+ if (element.checked) {
+ return element.value;
+ } else if (typeof emptyValue !== 'undefined') {
+ return emptyValue;
+ } else {
+ return '';
+ }
} else if (element instanceof HTMLInputElement) {
return element.value;
}
diff --git a/typo3/sysext/backend/Classes/Utility/BackendUtility.php b/typo3/sysext/backend/Classes/Utility/BackendUtility.php
index 012baa76f534..324c3262c420 100644
--- a/typo3/sysext/backend/Classes/Utility/BackendUtility.php
+++ b/typo3/sysext/backend/Classes/Utility/BackendUtility.php
@@ -2607,6 +2607,7 @@ class BackendUtility
'data-global-event' => 'change',
'data-action-navigate' => '$data=~s/$value/',
'data-navigate-value' => sprintf('%s&%s=${value}', $scriptUrl, $elementName),
+ 'data-empty-value' => '0',
], true);
return
'<input ' . $attributes .
diff --git a/typo3/sysext/backend/Resources/Public/JavaScript/GlobalEventHandler.js b/typo3/sysext/backend/Resources/Public/JavaScript/GlobalEventHandler.js
index 640935c5c794..59d98f5dea5d 100644
--- a/typo3/sysext/backend/Resources/Public/JavaScript/GlobalEventHandler.js
+++ b/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,a){"use strict";return new class{constructor(){this.options={onChangeSelector:'[data-global-event="change"]',onClickSelector:'[data-global-event="click"]',onSubmitSelector:'form[data-global-event="submit"]'},n.ready().then(()=>this.registerEvents())}registerEvents(){new a("change",this.handleChangeEvent.bind(this)).delegateTo(document,this.options.onChangeSelector),new a("click",this.handleClickEvent.bind(this)).delegateTo(document,this.options.onClickSelector),new a("submit",this.handleSubmitEvent.bind(this)).delegateTo(document,this.options.onSubmitSelector)}handleChangeEvent(e,t){e.preventDefault(),this.handleFormChildSubmitAction(e,t)||this.handleFormChildNavigateAction(e,t)}handleClickEvent(e,t){e.preventDefault()}handleSubmitEvent(e,t){e.preventDefault(),this.handleFormNavigateAction(e,t)}handleFormChildSubmitAction(e,t){const n=t.dataset.actionSubmit;if(!n)return!1;if("$form"===n&&this.isHTMLFormChildElement(t))return t.form.submit(),!0;const a=document.querySelector(n);return a instanceof HTMLFormElement&&(a.submit(),!0)}handleFormChildNavigateAction(e,t){const n=t.dataset.actionNavigate;if(!n)return!1;const a=this.resolveHTMLFormChildElementValue(t),i=t.dataset.navigateValue;return"$data=~s/$value/"===n&&i&&null!==a?(window.location.href=this.substituteValueVariable(i,a),!0):"$data"===n&&i?(window.location.href=i,!0):!("$value"!==n||!a)&&(window.location.href=a,!0)}handleFormNavigateAction(e,t){const n=t.action,a=t.dataset.actionNavigate;if(!n||!a)return!1;const i=t.dataset.navigateValue,l=t.dataset.valueSelector,o=this.resolveHTMLFormChildElementValue(t.querySelector(l));return"$form=~s/$value/"===a&&i&&null!==o?(window.location.href=this.substituteValueVariable(i,o),!0):"$form"===a&&(window.location.href=n,!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
+define(["require","exports","TYPO3/CMS/Core/DocumentService","TYPO3/CMS/Core/Event/RegularEvent"],(function(e,t,n,a){"use strict";return new class{constructor(){this.options={onChangeSelector:'[data-global-event="change"]',onClickSelector:'[data-global-event="click"]',onSubmitSelector:'form[data-global-event="submit"]'},n.ready().then(()=>this.registerEvents())}registerEvents(){new a("change",this.handleChangeEvent.bind(this)).delegateTo(document,this.options.onChangeSelector),new a("click",this.handleClickEvent.bind(this)).delegateTo(document,this.options.onClickSelector),new a("submit",this.handleSubmitEvent.bind(this)).delegateTo(document,this.options.onSubmitSelector)}handleChangeEvent(e,t){e.preventDefault(),this.handleFormChildSubmitAction(e,t)||this.handleFormChildNavigateAction(e,t)}handleClickEvent(e,t){e.preventDefault()}handleSubmitEvent(e,t){e.preventDefault(),this.handleFormNavigateAction(e,t)}handleFormChildSubmitAction(e,t){const n=t.dataset.actionSubmit;if(!n)return!1;if("$form"===n&&this.isHTMLFormChildElement(t))return t.form.submit(),!0;const a=document.querySelector(n);return a instanceof HTMLFormElement&&(a.submit(),!0)}handleFormChildNavigateAction(e,t){const n=t.dataset.actionNavigate;if(!n)return!1;const a=this.resolveHTMLFormChildElementValue(t),i=t.dataset.navigateValue;return"$data=~s/$value/"===n&&i&&null!==a?(window.location.href=this.substituteValueVariable(i,a),!0):"$data"===n&&i?(window.location.href=i,!0):!("$value"!==n||!a)&&(window.location.href=a,!0)}handleFormNavigateAction(e,t){const n=t.action,a=t.dataset.actionNavigate;if(!n||!a)return!1;const i=t.dataset.navigateValue,o=t.dataset.valueSelector,l=this.resolveHTMLFormChildElementValue(t.querySelector(o));return"$form=~s/$value/"===a&&i&&null!==l?(window.location.href=this.substituteValueVariable(i,l),!0):"$form"===a&&(window.location.href=n,!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");if(e instanceof HTMLSelectElement)return e.options[e.selectedIndex].value;if(e instanceof HTMLInputElement&&"checkbox"===t){const t=e.dataset.emptyValue;return e.checked?e.value:void 0!==t?t:""}return e instanceof HTMLInputElement?e.value:null}}}));
\ No newline at end of file
diff --git a/typo3/sysext/core/Documentation/Changelog/10.4.x/Important-91117-UseGlobalEventHandlerAndActionDispatcherInsteadOfInlineJS.rst b/typo3/sysext/core/Documentation/Changelog/10.4.x/Important-91117-UseGlobalEventHandlerAndActionDispatcherInsteadOfInlineJS.rst
index f3fb631aaa49..da0358815b2b 100644
--- a/typo3/sysext/core/Documentation/Changelog/10.4.x/Important-91117-UseGlobalEventHandlerAndActionDispatcherInsteadOfInlineJS.rst
+++ b/typo3/sysext/core/Documentation/Changelog/10.4.x/Important-91117-UseGlobalEventHandlerAndActionDispatcherInsteadOfInlineJS.rst
@@ -45,6 +45,17 @@ Navigates to URL once selected drop-down was changed, including selected value
`$data=~s/$value/` replaces literal `${value}` with selected value in `:html:`data-navigate-value`)
+.. code-block:: html
+
+ <input type="checkbox" name="setting" onclick="window.location.href='/?setting='+(this.checked ? 1 : 0)">
+ <!-- ... changed to ... -->
+ <input type="checkbox" name="setting" value="1" data-empty-value="0"
+ data-global-event="change" data-action-navigate="$data=~s/$value/">
+
+Checkboxes used to send a particular value when being unchecked can be achieved by using
+:html:`data-empty-value="0"` - in case this attribute is omitted, an empty string `''` is sent.
+
+
.. code-block:: html
<input type="checkbox" onclick="document.getElementById('formIdentifier').submit();">
--
GitLab