Merge branch 'release/7.4.0'

CHANGELOG.md

@@ -1,3 +1,13 @@
+# v7.4.0
+## 03/29/2024
+
+1. [](#improved)
+   * Better modular form support
+   * Support for multiple Ajax/XHR forms on a single page either modular-based or manually injected
+   * Yarn libraries updated
+1. [](#bugfix)
+   * Fixed an issue with cache being tied to `core` cache_id rather than the more appropriate `pages` cache_id, which could lead to form properties being cached even when modified.
+
 # v7.3.0
 ## 12/14/2023
 

assets/xhr-submitter.js

@@ -0,0 +1,24 @@
+function attachFormSubmitListener(formId) {
+    var form = document.getElementById(formId);
+    if (!form) {
+        console.warn('Form with ID "' + formId + '" not found.');
+        return;
+    }
+    form.addEventListener('submit', function(e) {
+        // Prevent standard form submission
+        e.preventDefault();
+        // Submit the form via Ajax
+        var xhr = new XMLHttpRequest();
+        xhr.open(form.getAttribute('method'), form.getAttribute('action'));
+        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
+        xhr.onload = function() {
+            if (xhr.status === 200) {
+                form.innerHTML = xhr.responseText; // Update the current form's innerHTML
+            } else {
+                // Handle HTTP error responses (optional)
+                console.error('Form submission failed with status: ' + xhr.status);
+            }
+        };
+        xhr.send(new URLSearchParams(new FormData(form)).toString());
+    });
+}

blueprints.yaml

@@ -1,7 +1,7 @@
 name: Form
 slug: form
 type: plugin
-version: 7.3.0
+version: 7.4.0
 description: Enables forms handling and processing
 icon: check-square
 author:
@@ -103,6 +103,18 @@ form:
           validate:
             type: bool
 
+        modular_form_fix:
+          type: toggle
+          label: PLUGIN_FORM.MODULAR_FORM_FIX
+          help: PLUGIN_FORM.MODULAR_FORM_FIX_HELP
+          highlight: 1
+          default: 1
+          options:
+            1: PLUGIN_ADMIN.ENABLED
+            0: PLUGIN_ADMIN.DISABLED
+          validate:
+            type: bool
+
     files:
       type: section
       title: PLUGIN_FORM.FILES

form.php

@@ -1299,7 +1299,10 @@ protected function getFormCacheId(): string
     {
         /** @var \Grav\Common\Cache $cache */
         $cache = $this->grav['cache'];
-        $cache_id = $cache->getKey() . '-form-plugin';
+        /** @var Pages $pages */
+        $pages= $this->grav['pages'];
+//        $cache_id = $cache->getKey() . '-form-plugin';
+        $cache_id = $pages->getPagesCacheId() . '-form-plugin';
         return $cache_id;
     }
 

form.yaml

@@ -5,6 +5,7 @@ refresh_prevention: false
 client_side_validation: true
 debug: false
 inline_errors: false
+modular_form_fix: true
 files:
   multiple: false          # To allow multiple files, default is single
   limit: 10                # Number of allowed files per field (multiple required)

languages.yaml

@@ -88,6 +88,8 @@ en:
     BASIC_CAPTCHA_MATH_MAX: "Maximum number"
     BASIC_CAPTCHA_MATH_OPERATORS: "Mathematical operators (randomized)"
     TURNSTILE_CAPTCHA: "Cloudflare Turnstile Captcha"
+    MODULAR_FORM_FIX: "Modular Form Fix"
+    MODULAR_FORM_FIX_HELP: "Fixes the issue with modular forms not finding the correct form automatically"
 
 eu:
   PLUGIN_FORM:

package.json

@@ -31,8 +31,6 @@
     "gulp-clean-css": "^4.3.0",
     "gulp-csscomb": "^3.1.0",
     "gulp-rename": "^2.0.0",
-    "gulp-sass": "^4.0.2",
-    "gulp-sourcemaps": "^2.6.5",
     "gulp-webpack": "^1.5.0",
     "immutable": "^4.0.0-rc.12",
     "imports-loader": "^0.8.0",

templates/forms/layouts/xhr.html.twig

@@ -1,21 +1,8 @@
 {% if form.xhr_submit == true %}
+  {% do assets.addJs('plugin://form/assets/xhr-submitter.js', {'group': 'bottom', 'position': 'before'}) %}
   {% do assets.addInlineJs("
-    document.addEventListener('DOMContentLoaded', function() {
-        var form = document.getElementById('" ~ form.id ~ "');
-        form.addEventListener('submit', function(e) {
-            // prevent standard form submission
-            e.preventDefault();
-            // submit the form via Ajax
-            var xhr = new XMLHttpRequest();
-            xhr.open(form.getAttribute('method'), form.getAttribute('action'));
-            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
-            xhr.onload = function() {
-                if (xhr.status === 200) {
-                    document.getElementById('" ~ form.id ~ "').innerHTML = xhr.responseText;
-                }
-            };
-            xhr.send(new URLSearchParams(new FormData(form)).toString());
-        });
-    });
-  ", {'group': 'bottom', 'position': 'before', 'priority': 100}) %}
+    document.addEventListener('DOMContentLoaded', () => {
+        attachFormSubmitListener('" ~ form.id ~ "');
+    });",
+    {'group': 'bottom', 'position': 'before'}) %}
 {% endif %}

templates/modular/form.html.twig

@@ -1,4 +1,8 @@
 <div class="modular-row form {{ page.header.class }}">
-    {{ content|raw }}
+  {{ content|raw }}
+  {% if config.plugins.form.modular_form_fix %}
+    {% include "forms/form.html.twig" with {form: forms({route: page.route})} %}
+  {% else %}
     {% include "forms/form.html.twig" %}
+  {% endif %}
 </div>