heimrichhannot/contao-formhybrid-compatibility-bundle

A bundle bringing compatibility our contao 4 environment.

0.7.0 2022-10-13 13:14 UTC

Requires

• php: ^7.4 || ^8.0
• contao/core-bundle: ^4.9
• heimrichhannot/contao-encore-contracts: ^1.0
• heimrichhannot/contao-formhybrid: ^3.15
• heimrichhannot/contao-utils-bundle: ^2.218
• psr/container: ^1.0 || ^2.0

Suggests

• heimrichhannot/contao-encore-bundle: ^1.16

LGPL-3.0-or-later

• Heimrich & Hannot

README

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

1. Add this bundle as dependency

   composer require heimrichhannot/contao-formhybrid-compatibility-bundle
   

2. Update your Encore bundles file and your compile your webpack dependencies

3. Check if you need polyfills for supporting IE and (non-chromium) Edge (or other annoying outdated 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 to FormhybridCompatibilityBundle

v0.4

• Renamed HeimrichHannotContaoFormhybridCompatibilityBundle to HeimrichHannotFormhybridCompatibilityBundle.
• 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.