feat(twig): add var out for forms

Author: stropitek

src/modules/types/display/template-twig/controller.js

@@ -27,6 +27,9 @@ define(['jquery', 'modules/default/defaultcontroller'], function ($, Default) {
         renderedHtml: {
             label: 'Rendered HTML',
             type: 'string'
+        },
+        form: {
+            label: 'Output form'
         }
     };
 
@@ -35,6 +38,16 @@ define(['jquery', 'modules/default/defaultcontroller'], function ($, Default) {
             label: 'Html was rendered',
             refVariable: ['renderedHtml'],
             refAction: ['renderedHtml']
+        },
+        onFormChanged: {
+            label: 'Form changed',
+            refVariable: ['form'],
+            refAction: ['form']
+        },
+        onFormSubmitted: {
+            label: 'Form submitted',
+            refVariable: ['form'],
+            refAction: ['form']
         }
     };
 
@@ -78,5 +91,22 @@ define(['jquery', 'modules/default/defaultcontroller'], function ($, Default) {
         }, 0);
     };
 
+    Controller.prototype.onFormChanged = function (out) {
+        this._doForm('onFormChanged', out);
+    };
+
+    Controller.prototype.onFormSubmitted = function (out) {
+        this._doForm('onFormSubmitted', out);
+    };
+
+    Controller.prototype._doForm = function (event, out) {
+        var obj = new DataObject();
+
+        for (let i = 0; i < out.length; i++) {
+            obj.setChildSync(out[i].name.split('.'), out[i].value);
+            this.createDataFromEvent(event, 'form', obj);
+        }
+    };
+
     return Controller;
 });

src/modules/types/display/template-twig/view.js

@@ -19,6 +19,15 @@ define([
                 'user-select': this.module.getConfigurationCheckbox('selectable', 'yes') ? 'initial' : 'none'
             });
 
+            var submit = this.submit.bind(this);
+
+            this.dom.on('input', 'input,textarea', submit);
+            this.dom.on('submit', 'form', function (e) {
+                submit('submit');
+                e.preventDefault();
+            });
+            this.dom.on('change', 'input', submit);
+
             this._values = new DataObject();
             this.template = Twig.twig({
                 data: this.module.getConfiguration('template')
@@ -39,6 +48,35 @@ define([
             this.resolveReady();
             this.render();
         },
+        submit: function (type) {
+            var inputs = this.dom.find('input,textarea');
+            var out = inputs.map(function () {
+                const {name, value, type} = this;
+                return {name, value, type, dom: this};
+            }).toArray().filter(o => {
+                if (!o.name) return false;
+                if (o.type === 'radio' && !o.dom.checked) return false;
+                return true;
+            });
+
+            out.forEach(o => {
+                switch (o.type) {
+                    case 'number':
+                    case 'range':
+                        o.value = +o.value;
+                        break;
+                    case 'checkbox':
+                        o.value = o.dom.checked;
+                        break;
+                }
+            });
+
+            if (type === 'submit') {
+                this.module.controller.onFormSubmitted(out);
+            } else {
+                this.module.controller.onFormChanged(out);
+            }
+        },
         update: {
             value: function (value, name) {
                 /*