EP/website-typo3
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: debounced forms

Browse Source
This commit is contained in:
Björn Fromme
2025-12-04 13:56:51 +01:00
parent 4596b88bee
commit 9dbb465106
3 changed files with 57 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/controllers/form_debounce_controller.js
+25
View File
@@ -0,0 +1,25 @@
import { Controller } from '@hotwired/stimulus'
export default class extends Controller {
static targets = ['button']
static classes = [ 'disabled' ]
static values = {
isSubmitting: Boolean,
submittingLabel: { type: String, default: 'wird versendet' }
}
debounce(e) {
if (true === this.isSubmittingValue) {
e.preventDefault()
e.stopPropagation()
return false
}
this.isSubmittingValue = true
this.buttonTarget.innerText = this.submittingLabelValue
if (this.hasDisabledClass) {
this.buttonTarget.classList.add(this.disabledClass)
}
}
}
public/typo3conf/ext/ep_theme/Resources/Private/Partials/Form/Form/Navigation.html
+10 -2
View File
@@ -7,10 +7,18 @@
</f:if> </f:if>
<f:if condition="{form.nextPage}"> <f:if condition="{form.nextPage}">
<f:then> <f:then>
<f:form.button property="__currentPage" value="{form.nextPage.index}" class="button bg-button">{formvh:translateElementProperty(element: form.currentPage, renderingOptionProperty: 'nextButtonLabel')}</f:form.button> <f:form.button property="__currentPage"
value="{form.nextPage.index}"
data="{'form-debounce-target': 'button'}"
class="button bg-button">
{formvh:translateElementProperty(element: form.currentPage, renderingOptionProperty: 'nextButtonLabel')}
</f:form.button>
</f:then> </f:then>
<f:else> <f:else>
<f:form.button property="__currentPage" value="{form.pages -> f:count()}" class="button bg-button"> <f:form.button property="__currentPage"
value="{form.pages -> f:count()}"
data="{'form-debounce-target': 'button'}"
class="button bg-button">
{formvh:translateElementProperty(element: form, renderingOptionProperty: 'submitButtonLabel')} {formvh:translateElementProperty(element: form, renderingOptionProperty: 'submitButtonLabel')}
</f:form.button> </f:form.button>
</f:else> </f:else>
public/typo3conf/ext/ep_theme/Resources/Private/Templates/Form/Form.html
+22
View File
@@ -0,0 +1,22 @@
<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" xmlns:formvh="http://typo3.org/ns/TYPO3/CMS/Form/ViewHelpers" data-namespace-typo3-fluid="true">
<formvh:renderRenderable renderable="{form}">
<formvh:form
object="{form}"
action="{form.renderingOptions.controllerAction}"
method="{form.renderingOptions.httpMethod}"
id="{form.identifier}"
section="{form.identifier}"
enctype="{form.renderingOptions.httpEnctype}"
addQueryString="{form.renderingOptions.addQueryString}"
argumentsToBeExcludedFromQueryString="{form.renderingOptions.argumentsToBeExcludedFromQueryString}"
additionalParams="{form.renderingOptions.additionalParams}"
additionalAttributes="{formvh:translateElementProperty(element: form, property: 'fluidAdditionalAttributes')}"
data="{'controller': 'form-debounce', 'action': 'form-debounce#debounce', 'form-debounce-disabled-class': 'cursor-not-allowed'}"
>
<f:render partial="{form.currentPage.templateName}" arguments="{page: form.currentPage}" />
<div class="actions">
<f:render partial="Form/Navigation" arguments="{form: form}" />
</div>
</formvh:form>
</formvh:renderRenderable>
</html>