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.

Polyfills

For compatibility with IE and Edge browsers you need to polyfill following js functions:

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.