From 099eecaa6c4ea17857d3e8be4ec93c36ec758187 Mon Sep 17 00:00:00 2001
From: Paul Chavard <pro@paul.chavard.net>
Date: Tue, 19 Jul 2022 12:22:43 +0200
Subject: [PATCH] refactor(ujs): adapt safari-11-empty-file-workaround to turbo

---
 app/javascript/entrypoints/application.js     |  2 +-
 .../shared/safari-11-empty-file-workaround.ts | 36 +++++++++++++++++++
 .../shared/safari-11-file-xhr-workaround.js   | 26 --------------
 3 files changed, 37 insertions(+), 27 deletions(-)
 create mode 100644 app/javascript/shared/safari-11-empty-file-workaround.ts
 delete mode 100644 app/javascript/shared/safari-11-file-xhr-workaround.js

diff --git a/app/javascript/entrypoints/application.js b/app/javascript/entrypoints/application.js
index 275093a8c..fb0f65240 100644
--- a/app/javascript/entrypoints/application.js
+++ b/app/javascript/entrypoints/application.js
@@ -5,7 +5,7 @@ import { Application } from '@hotwired/stimulus';
 import '@gouvfr/dsfr/dist/dsfr.module.js';
 
 import '../shared/activestorage/ujs';
-import '../shared/safari-11-file-xhr-workaround';
+import '../shared/safari-11-empty-file-workaround';
 import '../shared/toggle-target';
 
 import { registerControllers } from '../shared/stimulus-loader';
diff --git a/app/javascript/shared/safari-11-empty-file-workaround.ts b/app/javascript/shared/safari-11-empty-file-workaround.ts
new file mode 100644
index 000000000..19f689049
--- /dev/null
+++ b/app/javascript/shared/safari-11-empty-file-workaround.ts
@@ -0,0 +1,36 @@
+// iOS 11.3 Safari / macOS Safari 11.1 empty <input type="file"> XHR bug workaround.
+// This should work with every modern browser which supports ES5 (including IE9).
+// https://stackoverflow.com/questions/49614091/safari-11-1-ajax-xhr-form-submission-fails-when-inputtype-file-is-empty
+// https://github.com/rails/rails/issues/32440
+
+document.documentElement.addEventListener(
+  'turbo:before-fetch-request',
+  (event) => {
+    const target = event.target as Element;
+    const inputs = target.querySelectorAll<HTMLInputElement>(
+      'input[type="file"]:not([disabled])'
+    );
+    for (const input of inputs) {
+      if (input.files?.length == 0) {
+        input.setAttribute('data-safari-temp-disabled', 'true');
+        input.setAttribute('disabled', '');
+      }
+    }
+  }
+);
+
+document.documentElement.addEventListener(
+  'turbo:before-fetch-response',
+  (event) => {
+    const target = event.target as Element;
+    const inputs = target.querySelectorAll(
+      'input[type="file"][data-safari-temp-disabled]'
+    );
+    for (const input of inputs) {
+      input.removeAttribute('data-safari-temp-disabled');
+      input.removeAttribute('disabled');
+    }
+  }
+);
+
+export {};
diff --git a/app/javascript/shared/safari-11-file-xhr-workaround.js b/app/javascript/shared/safari-11-file-xhr-workaround.js
deleted file mode 100644
index 2d7fa2707..000000000
--- a/app/javascript/shared/safari-11-file-xhr-workaround.js
+++ /dev/null
@@ -1,26 +0,0 @@
-// iOS 11.3 Safari / macOS Safari 11.1 empty <input type="file"> XHR bug workaround.
-// This should work with every modern browser which supports ES5 (including IE9).
-// https://stackoverflow.com/questions/49614091/safari-11-1-ajax-xhr-form-submission-fails-when-inputtype-file-is-empty
-// https://github.com/rails/rails/issues/32440
-
-document.addEventListener('ajax:before', function (e) {
-  let inputs = e.target.querySelectorAll('input[type="file"]:not([disabled])');
-  inputs.forEach(function (input) {
-    if (input.files.length > 0) {
-      return;
-    }
-    input.setAttribute('data-safari-temp-disabled', 'true');
-    input.setAttribute('disabled', '');
-  });
-});
-
-// You should call this by yourself when you aborted an ajax request by stopping a event in ajax:before hook.
-document.addEventListener('ajax:beforeSend', function (e) {
-  let inputs = e.target.querySelectorAll(
-    'input[type="file"][data-safari-temp-disabled]'
-  );
-  inputs.forEach(function (input) {
-    input.removeAttribute('data-safari-temp-disabled');
-    input.removeAttribute('disabled');
-  });
-});