From 649ae4e2ce297e160e0f09ad2a92808f61b0a2d2 Mon Sep 17 00:00:00 2001
From: Sophia Grimm <s.grimm@queo-group.com>
Date: Tue, 4 Jun 2024 11:15:22 +0200
Subject: [PATCH] Bugfix/5116: replace jQuery with vanilla javascript

Issue: https://github.com/neos/neos-development-collection/issues/5116
---
 .../Resources/Public/JavaScript/select.js     | 119 ++++++++++--------
 1 file changed, 68 insertions(+), 51 deletions(-)

diff --git a/Neos.Media.Browser/Resources/Public/JavaScript/select.js b/Neos.Media.Browser/Resources/Public/JavaScript/select.js
index 6544818dfb3..f7b7ec45612 100644
--- a/Neos.Media.Browser/Resources/Public/JavaScript/select.js
+++ b/Neos.Media.Browser/Resources/Public/JavaScript/select.js
@@ -1,54 +1,71 @@
-window.addEventListener('DOMContentLoaded', (event) => {
-	$(function() {
-			if (window.parent !== window && window.parent.NeosMediaBrowserCallbacks) {
-					// we are inside iframe
-					$('.asset-list').on('click', '[data-asset-identifier]', function(e) {
-							if (
-								$(e.target).closest('a, button').not('[data-asset-identifier]').length === 0 &&
-									window.parent.NeosMediaBrowserCallbacks &&
-									typeof window.parent.NeosMediaBrowserCallbacks.assetChosen === 'function'
-							) {
-									let localAssetIdentifier = $(this).attr('data-local-asset-identifier');
-									if (localAssetIdentifier !== '') {
-											window.parent.NeosMediaBrowserCallbacks.assetChosen(localAssetIdentifier);
-									} else {
-										if ($(this).attr('data-import-in-process') !== 'true') {
-											$(this).attr('data-import-in-process', 'true')
-											const message = window.NeosCMS.I18n.translate(
-												'assetImport.importInfo',
-												'Asset is being imported. Please wait.',
-												'Neos.Media.Browser',
-												'Main',
-												[]
-											)
-											window.NeosCMS.Notification.ok(message)
-											$.post(
-												$('link[rel="neos-media-browser-service-assetproxies-import"]').attr('href'),
-												{
-													assetSourceIdentifier: $(this).attr('data-asset-source-identifier'),
-													assetIdentifier: $(this).attr('data-asset-identifier'),
-													__csrfToken: $('body').attr('data-csrf-token')
-												},
-												function (data) {
-													window.parent.NeosMediaBrowserCallbacks.assetChosen(data.localAssetIdentifier);
-													$(this).removeAttr('data-import-in-process')
-												}
-											);
-										}
-										else {
-											const message = window.NeosCMS.I18n.translate(
-												'assetImport.importInProcess',
-												'Import still in process. Please wait.',
-												'Neos.Media.Browser',
-												'Main',
-												[]
-											)
-											window.NeosCMS.Notification.warning(message)
-										}
+window.addEventListener('DOMContentLoaded', () => {
+	(function () {
+		if (window.parent !== window && window.parent.NeosMediaBrowserCallbacks) {
+			// we are inside iframe
+			const assets = document.querySelectorAll('[data-asset-identifier]');
+			assets.forEach((asset) => {
+				asset.addEventListener('click', (e) => {
+					if (
+						e.target.closest('a:not([data-asset-identifier]), button:not([data-asset-identifier])') === null &&
+						window.parent.NeosMediaBrowserCallbacks &&
+						typeof window.parent.NeosMediaBrowserCallbacks.assetChosen === 'function'
+					) {
+						let localAssetIdentifier = asset.dataset.localAssetIdentifier;
+						if (localAssetIdentifier !== '') {
+							window.parent.NeosMediaBrowserCallbacks.assetChosen(localAssetIdentifier);
+						} else {
+							if (asset.dataset.importInProcess !== 'true') {
+								asset.dataset.importInProcess = 'true';
+								const message = window.NeosCMS.I18n.translate(
+									'assetImport.importInfo',
+									'Asset is being imported. Please wait.',
+									'Neos.Media.Browser'
+								);
+								window.NeosCMS.Notification.ok(message);
+
+								const params = new URLSearchParams();
+								params.append('assetSourceIdentifier', asset.dataset.assetSourceIdentifier);
+								params.append('assetIdentifier', asset.dataset.assetIdentifier);
+								params.append('__csrfToken', document.querySelector('body').dataset.csrfToken);
+
+								fetch(
+									document
+										.querySelector('link[rel="neos-media-browser-service-assetproxies-import"]')
+										.getAttribute('href'),
+									{
+										headers: {
+											'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
+										},
+										method: 'POST',
+										credentials: 'include',
+										body: params.toString(),
 									}
-									e.preventDefault();
+								)
+									.then((response) => {
+										if (!response.ok) {
+											throw new Error(`HTTP error! status: ${response.status}`);
+										}
+										return response.json();
+									})
+									.then((data) => {
+										window.parent.NeosMediaBrowserCallbacks.assetChosen(data.localAssetIdentifier);
+										asset.removeAttribute('data-import-in-process');
+									})
+									.catch((error) => console.error('Error:', error))
+								e.preventDefault();
+							} else {
+								const message = window.NeosCMS.I18n.translate(
+									'assetImport.importInProcess',
+									'Import still in process. Please wait.',
+									'Neos.Media.Browser'
+								);
+								window.NeosCMS.Notification.warning(message);
 							}
-					});
-			}
-	});
+						}
+						e.preventDefault();
+					}
+				});
+			});
+		}
+	})();
 });