use delegation so resizing works with turbo

docs/assets/scripts/code-previews.js

@@ -76,24 +76,28 @@
   //
   // Resizing previews
   //
-  [...document.querySelectorAll('.code-preview__preview')].forEach(preview => {
+  document.addEventListener('mousedown', handleResizerDrag);
-    const resizer = preview.querySelector('.code-preview__resizer');
+  document.addEventListener('touchstart', handleResizerDrag, { passive: true });
-    let startX;
-    let startWidth;
 
-    function dragStart(event) {
+  function handleResizerDrag(event) {
-      startX = event.changedTouches ? event.changedTouches[0].pageX : event.clientX;
+    const resizer = event.target.closest('.code-preview__resizer');
-      startWidth = parseInt(document.defaultView.getComputedStyle(preview).width, 10);
+    const preview = event.target.closest('.code-preview__preview');
-      preview.classList.add('code-preview__preview--dragging');
+
-      event.preventDefault();
+    if (!resizer || !preview) return;
-      document.documentElement.addEventListener('mousemove', dragMove);
+
-      document.documentElement.addEventListener('touchmove', dragMove);
+    let startX = event.changedTouches ? event.changedTouches[0].pageX : event.clientX;
-      document.documentElement.addEventListener('mouseup', dragStop);
+    let startWidth = parseInt(document.defaultView.getComputedStyle(preview).width, 10);
-      document.documentElement.addEventListener('touchend', dragStop);
+
-    }
+    event.preventDefault();
+    preview.classList.add('code-preview__preview--dragging');
+    document.documentElement.addEventListener('mousemove', dragMove);
+    document.documentElement.addEventListener('touchmove', dragMove);
+    document.documentElement.addEventListener('mouseup', dragStop);
+    document.documentElement.addEventListener('touchend', dragStop);
 
     function dragMove(event) {
-      setWidth(startWidth + (event.changedTouches ? event.changedTouches[0].pageX : event.pageX) - startX);
+      const width = startWidth + (event.changedTouches ? event.changedTouches[0].pageX : event.pageX) - startX;
+      preview.style.width = `${width}px`;
     }
 
     function dragStop() {
@@ -103,14 +107,7 @@
       document.documentElement.removeEventListener('mouseup', dragStop);
       document.documentElement.removeEventListener('touchend', dragStop);
     }
-
+  }
-    function setWidth(width) {
-      preview.style.width = `${width}px`;
-    }
-
-    resizer.addEventListener('mousedown', dragStart);
-    resizer.addEventListener('touchstart', dragStart, { passive: true });
-  }, false);
 
   //
   // Toggle source mode