Rewrite the Backend.limitPreviewHeight to vanilla JS

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

@@ -36,6 +36,7 @@
       $objCombiner->add('assets/datepicker/js/datepicker.min.js');
       $objCombiner->add('bundles/contaocore/mootao.min.js');
       $objCombiner->add('bundles/contaocore/core.min.js');
+      $objCombiner->add('bundles/contaocore/limit-height.min.js');
       $objCombiner->add('system/themes/'.$this->theme.'/hover.min.js');
       echo $objCombiner->getCombinedFile();
     ?>"></script>

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

@@ -783,55 +783,6 @@ var Backend =
 		});
 	},
 
-	/**
-	 * Limit the height of the preview pane
-	 */
-	limitPreviewHeight: function() {
-		var hgt = 0;
-
-		$$('div.limit_height').each(function(div) {
-			var parent = div.getParent('.tl_content'),
-				toggler, button, size, style;
-
-			// Return if the element is a wrapper
-			if (parent && (parent.hasClass('wrapper_start') || parent.hasClass('wrapper_stop'))) return;
-
-			if (hgt === 0) {
-				hgt = div.className.replace(/[^0-9]*/, '').toInt();
-			}
-
-			// Return if there is no height value
-			if (!hgt) return;
-
-			toggler = new Element('div', {
-				'class': 'limit_toggler'
-			});
-
-			button = new Element('button', {
-				'type': 'button',
-				'html': '<span>...</span>',
-				'class': 'unselectable',
-				'data-state': 0
-			}).inject(toggler);
-
-			size = div.getCoordinates();
-			div.setStyle('height', hgt);
-
-			// Disable the function if the preview height is below the max-height
-			if (size.height <= hgt) {
-				return;
-			}
-
-			button.addEvent('click', function() {
-				style = toggler.getPrevious('div').getStyle('height').toInt();
-				toggler.getPrevious('div').setStyle('height', ((style > hgt) ? hgt : ''));
-				button.set('data-state', button.get('data-state') ? 0 : 1);
-			});
-
-			toggler.inject(div, 'after');
-		});
-	},
-
 	/**
 	 * Toggle checkboxes
 	 *
@@ -2584,11 +2535,6 @@ window.addEvent('resize', function() {
 	Backend.tableWizardSetWidth();
 });
 
-// Limit the height of the preview fields
-window.addEvent('load', function() {
-	Backend.limitPreviewHeight();
-});
-
 // Re-apply certain changes upon ajax_change
 window.addEvent('ajax_change', function() {
 	Backend.addInteractiveHelp();

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

@@ -0,0 +1,47 @@
+/*!
+ * This file is part of Contao.
+ *
+ * (c) Leo Feyer
+ *
+ * @license LGPL-3.0-or-later
+ */
+
+window.addEventListener('DOMContentLoaded', function () {
+    document.querySelectorAll('div.limit_height').forEach(function (div) {
+        const parent = div.parentNode.closest('.tl_content');
+
+        // Return if the element is a wrapper
+        if (parent && (parent.classList.contains('wrapper_start') || parent.classList.contains('wrapper_stop'))) return;
+
+        const hgt = Number(div.className.replace(/[^0-9]*/, ''))
+
+        // Return if there is no height value
+        if (!hgt) return;
+
+        const toggler = document.createElement('div');
+        toggler.classList.add('limit_toggler');
+
+        const button = document.createElement('button');
+        button.setAttribute('type', 'button');
+        button.innerHTML = '<span>...</span>';
+        button.classList.add('unselectable');
+        toggler.append(button);
+
+        // Disable the function if the preview height is below the max-height
+        if (div.offsetHeight <= hgt) {
+            return;
+        }
+
+        div.style.height = hgt+'px';
+
+        button.addEventListener('click', function () {
+            if (div.offsetHeight > hgt) {
+                div.style.height = hgt+'px';
+            } else {
+                div.style.height = 'auto';
+            }
+        });
+
+        div.append(toggler);
+    });
+});