From f78e0d4ab3428d15c464e17ec9bdf7427004f9d3 Mon Sep 17 00:00:00 2001
From: Sebastian Helzle <sebastian@helzle.it>
Date: Wed, 5 Jun 2024 11:18:07 +0200
Subject: [PATCH] TASK: Refactor media browser importer JS method

---
 .../Resources/Public/JavaScript/select.js     | 139 ++++++++++--------
 1 file changed, 76 insertions(+), 63 deletions(-)

diff --git a/Neos.Media.Browser/Resources/Public/JavaScript/select.js b/Neos.Media.Browser/Resources/Public/JavaScript/select.js
index f7b7ec45612..5aa77b035f4 100644
--- a/Neos.Media.Browser/Resources/Public/JavaScript/select.js
+++ b/Neos.Media.Browser/Resources/Public/JavaScript/select.js
@@ -1,71 +1,84 @@
 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 NeosMediaBrowserCallbacks = window.parent.NeosMediaBrowserCallbacks;
+		const NeosCMS = window.NeosCMS;
 
-								const params = new URLSearchParams();
-								params.append('assetSourceIdentifier', asset.dataset.assetSourceIdentifier);
-								params.append('assetIdentifier', asset.dataset.assetIdentifier);
-								params.append('__csrfToken', document.querySelector('body').dataset.csrfToken);
+		if (window.parent === window || !NeosCMS || !NeosMediaBrowserCallbacks || typeof NeosMediaBrowserCallbacks.assetChosen !== 'function') {
+			return;
+		}
+
+		function importAsset(asset) {
+			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(),
-									}
-								)
-									.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();
+			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(),
+				}
+			)
+				.then((response) => {
+					if (!response.ok) {
+						throw new Error(`HTTP error! status: ${response.status}`);
 					}
-				});
-			});
+					return response.json();
+				})
+				.then((data) => {
+					NeosMediaBrowserCallbacks.assetChosen(data.localAssetIdentifier);
+					asset.removeAttribute('data-import-in-process');
+				})
+				.catch((error) => {
+					NeosCMS.Notification.error(NeosCMS.I18n.translate(
+						'assetImport.importError',
+						'Asset could not be imported. Please try again.',
+						'Neos.Media.Browser'
+					), error);
+					console.error('Error:', error);
+				})
 		}
+
+		const assets = document.querySelectorAll('[data-asset-identifier]');
+		assets.forEach((asset) => {
+			asset.addEventListener('click', (e) => {
+				const assetLink = e.target.closest('a[data-asset-identifier], button[data-asset-identifier]');
+				if (!assetLink) {
+					return;
+				}
+
+				const localAssetIdentifier = asset.dataset.localAssetIdentifier;
+				if (localAssetIdentifier !== '' && !NeosCMS.isNil(localAssetIdentifier)) {
+					NeosMediaBrowserCallbacks.assetChosen(localAssetIdentifier);
+				} else {
+					if (asset.dataset.importInProcess !== 'true') {
+						asset.dataset.importInProcess = 'true';
+						const message = NeosCMS.I18n.translate(
+							'assetImport.importInfo',
+							'Asset is being imported. Please wait.',
+							'Neos.Media.Browser'
+						);
+						NeosCMS.Notification.ok(message);
+
+						importAsset(asset);
+					} else {
+						const message = NeosCMS.I18n.translate(
+							'assetImport.importInProcess',
+							'Import still in process. Please wait.',
+							'Neos.Media.Browser'
+						);
+						NeosCMS.Notification.warning(message);
+					}
+				}
+				e.preventDefault();
+			});
+		});
 	})();
 });