fix: forms on pages TYPO3 13 renders itself can be submitted
The .form-island wrapper existed only in the form page type (/form), so on pages TYPO3 13 renders completely (e.g. the EP ambassador page) the form's hx-target="closest .form-island" found nothing and submitting did nothing. The island with its loading overlay now comes from the form plugin's template (Render.html), on full pages and in /form alike; the page type renders just the plugin again. Co-Authored-By: Claude Opus 5.5 <[email protected]>
This commit is contained in:
frommeandClaude Opus 5.5 committed
1 parent
f925c7f2d6
commit
62f3bee230
4 files changed
+33
-41
No files matched your search
@@ -4,6 +4,8 @@
|
||||
|
||||
plugin.tx_form.view {
|
||||
templateRootPaths.10 = EXT:ep_theme/Resources/Private/Templates/Form/
|
||||
# Spinner.html for Render.html
|
||||
partialRootPaths.10 = EXT:ep_theme/Resources/Private/Partials/Form/
|
||||
}
|
||||
|
||||
plugin.tx_form.settings.yamlConfigurations {
|
||||
|
||||
@@ -15,21 +15,15 @@ tx_eptheme_form {
|
||||
debug = 0
|
||||
}
|
||||
|
||||
10 = FLUIDTEMPLATE
|
||||
10 = CONTENT
|
||||
10 {
|
||||
templateName = Island
|
||||
templateRootPaths.0 = EXT:ep_theme/Resources/Private/Templates/Form/
|
||||
partialRootPaths.0 = EXT:ep_theme/Resources/Private/Partials/
|
||||
|
||||
variables.forms = CONTENT
|
||||
variables.forms {
|
||||
table = tt_content
|
||||
select {
|
||||
where = {#CType} = 'form_formframework'
|
||||
orderBy = sorting
|
||||
}
|
||||
# Only the plugin (Templates/Form/Render.html): header and frame stay on the static page
|
||||
renderObj =< tt_content.form_formframework.20
|
||||
table = tt_content
|
||||
select {
|
||||
where = {#CType} = 'form_formframework'
|
||||
orderBy = sorting
|
||||
}
|
||||
# Only the plugin (Templates/Form/Render.html, a .form-island): header and frame stay on
|
||||
# the static page
|
||||
renderObj =< tt_content.form_formframework.20
|
||||
}
|
||||
}
|
||||
@@ -1,25 +0,0 @@
|
||||
<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
|
||||
<f:comment>
|
||||
The forms of a page as the form page type (/path/form) returns them: htmx swaps this element as
|
||||
a whole (see Form.html). While a request runs, htmx sets htmx-request on it and the overlay
|
||||
covers the form. Styled here and not in the theme build: the static pages around the island
|
||||
load the CSS of the TYPO3 10 export. The spinner takes the button colour of each theme.
|
||||
</f:comment>
|
||||
<div class="form-island">
|
||||
{forms -> f:format.raw()}
|
||||
<div class="form-island__loading" aria-hidden="true">
|
||||
<f:render partial="Form/Spinner" arguments="{class: 'form-island__spinner'}" />
|
||||
</div>
|
||||
<style>
|
||||
.form-island { position: relative; }
|
||||
.form-island__loading { position: absolute; inset: 0; z-index: 10; display: flex; align-items: center; justify-content: center; background: rgb(255 255 255 / .7); visibility: hidden; opacity: 0; transition: opacity .15s, visibility .15s; }
|
||||
.form-island.htmx-request .form-island__loading { visibility: visible; opacity: 1; }
|
||||
.form-island__spinner { width: 6rem; height: 6rem; color: rgb(24 82 123); }
|
||||
.sbw .form-island__spinner { color: rgb(233 28 38); }
|
||||
.snz .form-island__spinner { color: rgb(249 195 61); }
|
||||
.suz .form-island__spinner { color: rgb(130 195 198); }
|
||||
.uch .form-island__spinner { color: rgb(25 163 220); }
|
||||
.ser .form-island__spinner { color: rgb(222 44 27); }
|
||||
</style>
|
||||
</div>
|
||||
</html>
|
||||
@@ -1,10 +1,31 @@
|
||||
<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">
|
||||
|
||||
<f:comment>
|
||||
Every form sits in a .form-island, on pages TYPO3 13 renders as well as in the form page type
|
||||
(/path/form) that the static pages load: the form posts there, and htmx swaps the island as a
|
||||
whole (see Form.html). While a request runs, htmx sets htmx-request on it and the overlay
|
||||
covers the form. Styled here and not in the theme build: the static pages around the island
|
||||
load the CSS of the TYPO3 10 export. The spinner takes the button colour of each theme.
|
||||
</f:comment>
|
||||
<div class="form-island">
|
||||
<f:flashMessages />
|
||||
<f:if condition="{formConfiguration}">
|
||||
<div class="py-8">
|
||||
<formvh:render overrideConfiguration="{formConfiguration}" />
|
||||
</div>
|
||||
</f:if>
|
||||
|
||||
<div class="form-island__loading" aria-hidden="true">
|
||||
<f:render partial="Spinner" arguments="{class: 'form-island__spinner'}" />
|
||||
</div>
|
||||
<style>
|
||||
.form-island { position: relative; }
|
||||
.form-island__loading { position: absolute; inset: 0; z-index: 10; display: flex; align-items: center; justify-content: center; background: rgb(255 255 255 / .7); visibility: hidden; opacity: 0; transition: opacity .15s, visibility .15s; }
|
||||
.form-island.htmx-request .form-island__loading { visibility: visible; opacity: 1; }
|
||||
.form-island__spinner { width: 6rem; height: 6rem; color: rgb(24 82 123); }
|
||||
.sbw .form-island__spinner { color: rgb(233 28 38); }
|
||||
.snz .form-island__spinner { color: rgb(249 195 61); }
|
||||
.suz .form-island__spinner { color: rgb(130 195 198); }
|
||||
.uch .form-island__spinner { color: rgb(25 163 220); }
|
||||
.ser .form-island__spinner { color: rgb(222 44 27); }
|
||||
</style>
|
||||
</div>
|
||||
</html>
|
||||
Reference in new issue
Block a user