initial commit

.gitignore

@@ -0,0 +1,39 @@
+######################
+# Compiled source    #
+######################
+*.com
+*.class
+*.dll
+*.exe
+*.o
+*.so
+
+######################
+# Packages           #
+######################
+# it's better to unpack these files and commit the raw source
+# git has its own built in compression methods
+*.7z
+*.dmg
+*.gz
+*.iso
+*.jar
+
+######################
+# Global             #
+######################
+.DS_Store
+.DS_Store\?
+._*
+.Spotlight-V100
+.Trashes
+Icon\?
+*.sublime-workspace
+*.sublime-project
+atlassian-ide-plugin.xml
+.idea/
+.project
+ehthumbs.db
+Thumbs.db
+.sass-cache
+package-lock.json

LICENSE.md

@@ -0,0 +1,22 @@
+# License
+Copyright (C) 2021 DACHCOM.DIGITAL
+
+This software is available under the GNU General Public License version 3 (GPLv3).
+
+### GNU General Public License version 3 (GPLv3)
+If you decide to choose the GPLv3 license, you must comply with the following terms: 
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU General Public License for more details.
+
+You should have received a copy of the GNU General Public License
+along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+[GNU General Public License](https://www.gnu.org/licenses/gpl-3.0.en.html)  

README.md

@@ -0,0 +1,23 @@
+# JS Pimcore FormBuilder Extensions
+
+We're providing some helpful Javascript Extensions to simplify your daily work with the PIMCORE FormBuilder.
+This Library provides all JS components for the [PIMCORE FormBuilder Bundle](https://github.com/dachcom-digital/pimcore-formbuilder).
+
+## Installation
+```bash
+npm i js-pimcore-formbuilder
+```
+
+## Extensions Overview
+- [Fetch Manager](./docs/01_fetch_manager.md)
+- [Conditional Logic Component](./docs/02_conditionalLogic.md)
+- [Repeater Component](./docs/03_repeater.md)
+- [Tracker Component](./docs/04_tracker.md)
+- [reCAPTCHA V3 Component](./docs/05_recaptchaV3.md)
+- [Dynamic Multi File Libraries](./docs/06_dynamic_multi_file.md)
+    - [Drop Zone](./10_dmf_drop_zone.md)
+
+## Upgrade Notes
+
+### 1.0.0
+- New Theme Transformers available: Tailwind Simple, Tailwind Floating Labels, Bootstrap 5

docs/01_fetch_manager.md

@@ -0,0 +1,125 @@
+# Fetch Manager
+
+This component will enable the fetch functionality and validation state for invalid fields.
+
+- [Enable Component](./01_fetch_manager.md#enable-component)
+- [Element Transformer](./01_fetch_manager.md#element-transformer)
+- [Extended Usage](./01_fetch_manager.md#extended-usage)
+- [Endpoints](./01_fetch_manager.md#endpoints)
+
+## Enable Component
+
+```js
+import {FetchManager} from 'js-pimcore-formbuilder';
+```
+
+```js
+document.addEventListener('DOMContentLoaded', () => {
+    document.querySelectorAll('.formbuilder.ajax-form').forEach((form) => {
+        new FetchManager(form);
+    });
+});
+```
+
+## Element Transformer
+
+### Predefined Element Transformers
+
+Depending on the form template, predefined Element Transformers are used automatically.
+
+- Tailwind 2
+- Bootstrap 4
+- Bootstrap 3
+
+### Custom Element Transformers
+
+Use the validationTransformer option to customize the validations. Use this option when a custom form template is set.
+
+```js
+new FetchManager(form, {
+    validationTransformer: {
+        addValidationMessage: (field, messages) => {
+            form.classList.add('error-form');
+            field.classList.add('error-field');
+            messages.forEach((message) => {
+                let errorEl = document.createElement('div');
+                errorEl.className = 'error-message';
+                errorEl.innerText = message;
+                field.after(errorEl);
+            });
+        },
+        removeFormValidations: (form) => {
+            form.classList.remove('error-form');
+            form.querySelectorAll('.error-field').forEach((el) => el.classList.remove('error-field'))
+            form.querySelectorAll('.error-message').forEach((el) => el.remove());
+        }
+    }
+});
+```
+
+## Extended Usage
+
+```js
+document.addEventListener('DOMContentLoaded', () => {
+    document.querySelectorAll('.formbuilder.ajax-form').forEach((form) => {
+        new FetchManager(form, {
+            // avaiable options
+            submitBtnSelector: 'button[type="submit"]',
+            resetFormMethod: (form) => {
+                // set a custom reset form method. Default: null
+                console.log(form);
+            },
+            onRequestDone: (responseData) => {
+                console.log(responseData);
+            },
+            onFail: (responseData) => {
+                console.log(responseData);
+            },
+            onError: (responseData) => {
+                console.log(responseData);
+            },
+            onFatalError: (responseData) => {
+                console.log(responseData);
+            },
+            onErrorField: (field, messages) => {
+                console.log(field, messages);
+            },
+            onGeneralError: (generalErrorMessages) => {
+                console.log(generalErrorMessages);
+            },
+            onSuccess: (messages, redirect) => {
+                console.log(messages, redirect);
+            },
+            validationTransformer: {
+                addValidationMessage: (field, messages) => {
+                    console.log(field, messages);
+                },
+                removeFormValidations: (form) => {
+                    console.log(form);
+                }
+            }
+        });
+    });
+});
+```
+
+## Endpoints
+
+To prevent multiple identical requests for the endpoints, create an endpoint instance and set the result to the Fetch Manager.
+
+```js
+import {Endpoints, FetchManager} from 'js-pimcore-formbuilder';
+
+let formBuilderForms = document.querySelectorAll('.formbuilder.ajax-form');
+
+if (formBuilderForms.length) {
+    new Endpoints().getEndpoints(formBuilderForms[0].dataset.ajaxStructureUrl)
+        .then((endpoints) => {
+            formBuilderForms.forEach((formBuilderForm) => {
+                new FetchManager(form, {}, endpoints);
+            });
+        }).catch((error) => {
+        console.error('formbuilder error: fetching file structure', error);
+    });
+}
+```

docs/02_conditionalLogic.md

@@ -0,0 +1,42 @@
+# Conditional Logic Component
+
+This component will enable the conditional logic functionality.
+
+## Enable Extension
+
+```js
+import {ConditionalLogic} from 'js-pimcore-formbuilder';
+```
+
+```js
+document.addEventListener('DOMContentLoaded', () => {
+    document.querySelectorAll('.formbuilder.ajax-form').forEach((form) => {
+        new ConditionalLogic(form);
+    });
+});
+```
+
+### Extended Usage
+
+```js
+document.addEventListener('DOMContentLoaded', () => {
+    document.querySelectorAll('.formbuilder.ajax-form').forEach((form) => {
+        new ConditionalLogic(form, {
+            conditions: {},
+            actions: {
+                toggleElement: {
+                    onEnable: function (action, actionId, ev, el) {
+                        console.log(action, ev, el);
+                    }
+                }
+            },
+            elementTransformer: {
+                hide: function (el) {
+                    el.classList.add('hidden');
+                }
+            },
+            hideElementClass: 'fb-cl-hide-element'
+        });
+    });
+});
+```

docs/03_repeater.md

@@ -0,0 +1,58 @@
+# Repeater Component
+This component will enable the repeater functionality.
+
+## Enable Component
+```js
+import {Repeater} from 'js-pimcore-formbuilder';
+```
+
+```js
+document.addEventListener('DOMContentLoaded', () => {
+    document.querySelectorAll('.formbuilder.ajax-form').forEach((form) => {
+        new Repeater(form);
+    });
+});
+```
+
+## Extended Usage
+```js
+
+document.addEventListener('DOMContentLoaded', () => {
+    document.querySelectorAll('.formbuilder.ajax-form').forEach((form) => {
+
+        new Repeater(form, {
+            addClass: 'btn btn-info',
+            removeClass: 'btn btn-danger',
+            containerClass: '.formbuilder-container.formbuilder-container-repeater',
+            containerBlockClass: '.formbuilder-container-block',
+            onRemove: (container, cb) => {
+                container.remove();
+                cb(); // always trigger the callback action!
+            },
+            onAdd: (container, newForm, cb) => {
+                container.appendChild(newBlock);
+                cb(newForm); // always trigger the callback action!
+            },
+            renderCreateBlockElement: (classes, text) => {
+                let element = document.createElement('button');
+                element.className = classes;
+                element.textContent = text;
+                return element;
+            },
+            allocateCreateBlockElement: (container, element) => {
+                container.appendChild(element);
+            },
+            renderRemoveBlockElement: (block, classes, text) => {
+                let element = document.createElement('button');
+                element.className = classes;
+                element.textContent = text;
+                return element;
+            },
+            allocateRemoveBlockElement: (block, element) => {
+                block.appendChild(element);
+            }
+
+        });
+    });
+});
+```

docs/04_tracker.md

@@ -0,0 +1,39 @@
+# Tracker Component
+This component will enable the tracker functionality. 
+If enabled, this extension tries to submit insensible data like dropdown selection, checked radios/boxes to google analytics or matomo.
+
+> **Configuration:**: You need to listen to the `form_builder_submission` event in your tag manager!
+
+## Enable Component
+```js
+import {Tracker} from 'js-pimcore-formbuilder';
+```
+
+```js
+document.addEventListener('DOMContentLoaded', () => {
+    document.querySelectorAll('.formbuilder.ajax-form').forEach((form) => {
+        new Tracker(form);
+    });
+});
+```
+
+## Extended Usage
+```js
+document.addEventListener('DOMContentLoaded', () => {
+    document.querySelectorAll('.formbuilder.ajax-form').forEach((form) => {
+        new Tracker(form, {
+            onBeforeSubmitDataToProvider: (data, formName, $form) => {
+                // add some special value to data
+                // warning: in some cases, no data will be submitted (gtag, ga)
+                return data;
+            },
+            provider: 'google', // choose between "google" or "matomo"
+            trackDropDownSelection: true,
+            trackCheckboxSelection: true,
+            trackRadioSelection: true,
+            trackHiddenInputs: true,
+            invalidFieldNames: ['_token', 'formCl', 'formRuntimeData', 'formRuntimeDataToken'],
+        });
+    });
+});
+```

docs/05_recaptchaV3.md

@@ -0,0 +1,33 @@
+# reCAPTCHA V3 Component
+
+This component will enable reCAPTCHA v3 functionality on your form. Workflow: 
+- Loads `https://www.google.com/recaptcha/api.js` if not available
+- Adds token to captcha field on your form
+
+## Back-End Configuration
+First, you need to set up some server side configuration via form builder. Read more about it [here](https://github.com/dachcom-digital/pimcore-formbuilder/blob/master/docs/03_SpamProtection.md#recaptcha-v3). 
+
+## Enable Component
+```js
+import {RecaptchaV3} from 'js-pimcore-formbuilder';
+```
+
+```js
+document.addEventListener('DOMContentLoaded', () => {
+    document.querySelectorAll('.formbuilder.ajax-form').forEach((form) => {
+        new RecaptchaV3(form);
+    });
+});
+```
+
+## Extended Usage
+```js
+document.addEventListener('DOMContentLoaded', () => {
+    document.querySelectorAll('.formbuilder.ajax-form').forEach((form) => {
+        new RecaptchaV3(form, {
+            disableFormWhileLoading: true,
+            reCaptchaFieldClass: 'input.re-captcha-v3',
+        });
+    });
+});
+```

docs/06_dynamic_multi_file.md

@@ -0,0 +1,8 @@
+## Install Dynamic Multi File Handlers
+
+Depending on the file handler you want to use, you may need to install some dependencies or include them.
+
+- [Drop Zone (default)](./10_dmf_drop_zone.md)
+
+
+> Read more about the dynamic multi file setup [here](https://github.com/dachcom-digital/pimcore-formbuilder/blob/master/docs/80_FileUpload.md)