Download the PHP package heimrichhannot/contao-formhybrid-compatibility-bundle without Composer
On this page you can find all versions of the php package heimrichhannot/contao-formhybrid-compatibility-bundle. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.
Download heimrichhannot/contao-formhybrid-compatibility-bundle
More information about heimrichhannot/contao-formhybrid-compatibility-bundle
Files in heimrichhannot/contao-formhybrid-compatibility-bundle
Package contao-formhybrid-compatibility-bundle
Short Description A bundle bringing compatibility our contao 4 environment.
License LGPL-3.0-or-later
Homepage https://github.com/heimrichhannot/contao-formhybrid-compatibility-bundle
Informations about the package contao-formhybrid-compatibility-bundle
Contao Formhybrid Compatibility Bundle
A bundle enhancing Formhybrid compatibility with our Contao 4 environment.
Features
- support for Encore Bundle
- replaces jquery code with native js code
- js code is automatically added to pages where forms are included (needs formhybrid version >= 3.13)
Not all js features ported yet
Currently ported js features:
- asynchronous form submit
- scroll to status message after submit
- submitOnChange
Current limitations:
- Only encore bundle is currently supported for assets
Setup
-
Add this bundle as dependency
composer require heimrichhannot/contao-formhybrid-compatibility-bundle
-
Update your Encore bundles file and your compile your webpack dependencies
- Check if you need polyfills for supporting IE and (non-chromium) Edge (or other
annoyingoutdated browsers) (see Polyfills section)
Usage
Styling when asynchronous form submit
A submitting
class is added to the form
element when doing an asynchronous form submit.
Develop
JS Events
Following events are fired during lifecycle.
Event | Description |
---|---|
formhybrid_ajax_start | Fired before the ajax call is execute . For example before an asynchronous form submit. |
formhybrid_ajax_complete | Fired after an ajax event completed. For example after an asynchronous form submit. |
Polyfills
For compatibility with IE and Edge browsers you need to polyfill following js functions:
Function | Polyfill | Required |
---|---|---|
ChildNode.replaceWith() | https://developer.mozilla.org/de/docs/Web/API/ChildNode/replaceWith | Yes |
CustomEvent | https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent | Optional, no finish event is fired |
NodeList.prototype.forEach() | https://github.com/imagitama/nodelist-foreach-polyfill | Yes |
Add these polyfills to your main project js entrypoint.
UPGRADE
v0.6
- Renamed namespace from
ContaoFormhybridCompatibilityBundle
toFormhybridCompatibilityBundle
v0.4
- Renamed
HeimrichHannotContaoFormhybridCompatibilityBundle
toHeimrichHannotFormhybridCompatibilityBundle
. - JS code is automatically added to forms. If you don't want this, uncheck active on
contao-formhybrid-compatibility-bundle
entry in your encore settings.
v0.2
- Async submit animation: Instead of adding animated dots to the submit button text when doing an asynchronous form submit, a
submitting
class is added to the form element.
All versions of contao-formhybrid-compatibility-bundle with dependencies
contao/core-bundle Version ^4.9
heimrichhannot/contao-encore-contracts Version ^1.0
heimrichhannot/contao-formhybrid Version ^3.15
heimrichhannot/contao-utils-bundle Version ^2.218
psr/container Version ^1.0 || ^2.0