Rewrite fieldset toggling to vanilla JS

core-bundle/src/Resources/contao/drivers/DC_File.php

@@ -166,7 +166,7 @@ public function edit()
 				{
 					list($key, $cls) = explode(':', $legends[$k]) + array(null, null);
 
-					$legend = "\n" . '<legend onclick="AjaxRequest.toggleFieldset(this, \'' . $key . '\', \'' . $this->strTable . '\')">' . ($GLOBALS['TL_LANG'][$this->strTable][$key] ?? $key) . '</legend>';
+					$legend = "\n" . '<legend data-toggle-fieldset="' . StringUtil::specialcharsAttribute(json_encode(array('id' => $key, 'table' => $this->strTable))) . '">' . ($GLOBALS['TL_LANG'][$this->strTable][$key] ?? $key) . '</legend>';
 				}
 
 				if (isset($fs[$this->strTable][$key]))

core-bundle/src/Resources/contao/drivers/DC_Table.php

@@ -1850,7 +1850,7 @@ public function edit($intId=null, $ajaxId=null)
 				{
 					list($key, $cls) = explode(':', $legends[$k]) + array(null, null);
 
-					$legend = "\n" . '<legend onclick="AjaxRequest.toggleFieldset(this,\'' . $key . '\',\'' . $this->strTable . '\')">' . ($GLOBALS['TL_LANG'][$this->strTable][$key] ?? $key) . '</legend>';
+					$legend = "\n" . '<legend data-toggle-fieldset="' . StringUtil::specialcharsAttribute(json_encode(array('id' => $key, 'table' => $this->strTable))) . '">' . ($GLOBALS['TL_LANG'][$this->strTable][$key] ?? $key) . '</legend>';
 				}
 
 				if (isset($fs[$this->strTable][$key]))

core-bundle/src/Resources/contao/templates/backend/be_main.html5

@@ -40,6 +40,7 @@
       $objCombiner->add('bundles/contaocore/limit-height.min.js');
       $objCombiner->add('bundles/contaocore/tips.min.js');
       $objCombiner->add('bundles/contaocore/sectionwizard.min.js');
+      $objCombiner->add('bundles/contaocore/toggle-fieldset.min.js');
       $objCombiner->add('system/themes/'.$this->theme.'/hover.min.js');
       echo $objCombiner->getCombinedFile();
     ?>"></script>

core-bundle/src/Resources/public/core.js

@@ -381,47 +381,6 @@ var AjaxRequest =
 		return false;
 	},
 
-	/**
-	 * Toggle the visibility of a fieldset
-	 *
-	 * @param {object} el    The DOM element
-	 * @param {string} id    The ID of the target element
-	 * @param {string} table The table name
-	 *
-	 * @returns {boolean}
-	 */
-	toggleFieldset: function(el, id, table) {
-		el.blur();
-		Backend.getScrollOffset();
-
-		var fs = $('pal_' + id);
-
-		if (fs.hasClass('collapsed')) {
-			fs.removeClass('collapsed');
-			new Request.Contao().post({'action':'toggleFieldset', 'id':id, 'table':table, 'state':1, 'REQUEST_TOKEN':Contao.request_token});
-		} else {
-			var form = fs.getParent('form'),
-				inp = fs.getElements('[required]'),
-				collapse = true;
-
-			for (var i=0; i<inp.length; i++) {
-				if (!inp[i].get('value')) {
-					collapse = false;
-					break;
-				}
-			}
-
-			if (!collapse) {
-				if (typeof(form.checkValidity) == 'function') form.getElement('button[type="submit"]').click();
-			} else {
-				fs.addClass('collapsed');
-				new Request.Contao().post({'action':'toggleFieldset', 'id':id, 'table':table, 'state':0, 'REQUEST_TOKEN':Contao.request_token});
-			}
-		}
-
-		return false;
-	},
-
 	/**
 	 * Toggle a group of a multi-checkbox field
 	 *
@@ -861,19 +820,6 @@ var Backend =
 		});
 	},
 
-	/**
-	 * Collapse all palettes
-	 */
-	collapsePalettes: function() {
-		$$('fieldset.hide').each(function(el) {
-			el.addClass('collapsed');
-		});
-		$$('label.error, label.mandatory').each(function(el) {
-			var fs = el.getParent('fieldset');
-			fs && fs.removeClass('collapsed');
-		});
-	},
-
 	/**
 	 * Make parent view items sortable
 	 *
@@ -2290,7 +2236,6 @@ window.addEvent('domready', function() {
 		$(document.body).addClass('touch');
 	}
 
-	Backend.collapsePalettes();
 	Backend.tableWizardSetWidth();
 	Backend.enableImageSizeWidgets();
 	Backend.enableToggleSelect();

core-bundle/src/Resources/public/toggle-fieldset.js

@@ -0,0 +1,69 @@
+window.addEventListener('DOMContentLoaded', function() {
+    const storeState = function(id, table, state) {
+        fetch(window.location.href, {
+            method: 'POST',
+            headers: {
+                'X-Requested-With': 'XMLHttpRequest'
+            },
+            body: new URLSearchParams({
+                action: 'toggleFieldset',
+                id: id,
+                table: table,
+                state: state,
+                REQUEST_TOKEN: Contao.request_token
+            })
+        });
+    };
+
+    const toggleState = function(el, id, table) {
+        el.blur();
+        Backend.getScrollOffset();
+
+        const fs = el.parentNode;
+
+        if (fs.classList.contains('collapsed')) {
+            fs.classList.remove('collapsed');
+            storeState(id, table, 1);
+        } else {
+            const form = fs.closest('form');
+            const inp = fs.querySelectorAll('[required]');
+            let collapse = true;
+
+            for (let i = 0; i < inp.length; i++) {
+                if (!inp[i].value) {
+                    collapse = false;
+                    break;
+                }
+            }
+
+            if (!collapse) {
+                if (typeof(form.checkValidity) == 'function') form.querySelector('button[type="submit"]').click();
+            } else {
+                fs.classList.add('collapsed');
+                storeState(id, table, 0);
+            }
+        }
+    };
+
+    document.querySelectorAll('legend[data-toggle-fieldset]').forEach(function(el) {
+        const fs = el.parentNode;
+
+        if (fs.querySelectorAll('label.error, label.mandatory').length) {
+            fs.classList.remove('collapsed');
+        } else if (fs.classList.contains('hide')) {
+            fs.classList.add('collapsed');
+        }
+
+        const { id, table } = JSON.parse(el.getAttribute('data-toggle-fieldset'));
+
+        el.addEventListener('click', function(event) {
+            event.preventDefault();
+            toggleState(el, id, table);
+        })
+    });
+
+    AjaxRequest.toggleFieldset = function(el, id, table) {
+        window.console && console.warn('Using AjaxRequest.toggleFieldset is deprecated and will be removed in Contao 6. Add the data-toggle-fieldset attribute instead.');
+        toggleState(el, id, table);
+    };
+});