fix: Clipboard-Kopierfunktion in CoordinatePopup.js mit Fallback abgesichert
- Clipboard-API Nutzung abgesichert gegen nicht unterstützte Umgebungen - Fallback mit document.execCommand implementiert für ältere Browser - Fehlerbehandlung und Benutzer-Feedback verbessert
This commit is contained in:
@@ -4,33 +4,56 @@ import React from "react";
|
||||
const CoordinatePopup = ({ isOpen, coordinates, onClose }) => {
|
||||
if (!isOpen) return null;
|
||||
|
||||
const copyToClipboard = () => {
|
||||
if (typeof navigator !== "undefined" && navigator.clipboard) {
|
||||
navigator.clipboard
|
||||
.writeText(coordinates)
|
||||
.then(() => {
|
||||
alert("Koordinaten kopiert!");
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error("Clipboard-API Fehler:", err);
|
||||
fallbackCopyToClipboard(coordinates);
|
||||
});
|
||||
} else {
|
||||
fallbackCopyToClipboard(coordinates);
|
||||
}
|
||||
};
|
||||
|
||||
const fallbackCopyToClipboard = (text) => {
|
||||
const textArea = document.createElement("textarea");
|
||||
textArea.value = text;
|
||||
document.body.appendChild(textArea);
|
||||
textArea.focus();
|
||||
textArea.select();
|
||||
try {
|
||||
const successful = document.execCommand("copy");
|
||||
if (successful) {
|
||||
alert("Koordinaten kopiert!");
|
||||
} else {
|
||||
alert("Kopieren fehlgeschlagen (Fallback).");
|
||||
}
|
||||
} catch (err) {
|
||||
alert("Kopieren fehlgeschlagen: " + err.message);
|
||||
}
|
||||
document.body.removeChild(textArea);
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
className="fixed inset-0 bg-black bg-opacity-30 flex justify-center z-50"
|
||||
onClick={onClose} // Schließt das Popup, wenn der Hintergrund angeklickt wird
|
||||
onClick={onClose}
|
||||
style={{
|
||||
alignItems: "flex-start", // Positioniert das Popup oben
|
||||
paddingTop: "5px", // Abstand von oben
|
||||
alignItems: "flex-start",
|
||||
paddingTop: "5px",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="bg-white p-4 rounded-lg shadow-xl"
|
||||
style={{
|
||||
width: "300px",
|
||||
}}
|
||||
onClick={(e) => e.stopPropagation()} // Verhindert das Schließen, wenn innerhalb des Popups geklickt wird
|
||||
>
|
||||
<div className="bg-white p-4 rounded-lg shadow-xl" style={{ width: "300px" }} onClick={(e) => e.stopPropagation()}>
|
||||
<h2 className="text-xl font-bold text-center mb-2 text-gray-800">Koordinaten</h2>
|
||||
<p className="text-center text-lg text-gray-600 font-mono mb-0">lat , lng</p>
|
||||
<p className="text-center text-lg text-gray-600 font-mono mb-6">{coordinates}</p>
|
||||
<div className="flex justify-center gap-4">
|
||||
<button
|
||||
onClick={() => {
|
||||
navigator.clipboard.writeText(coordinates);
|
||||
alert("Koordinaten kopiert!");
|
||||
}}
|
||||
className="bg-blue-500 text-white px-6 py-2 rounded-lg shadow hover:bg-blue-600 transition-all"
|
||||
>
|
||||
<button onClick={copyToClipboard} className="bg-blue-500 text-white px-6 py-2 rounded-lg shadow hover:bg-blue-600 transition-all">
|
||||
Kopieren
|
||||
</button>
|
||||
<button onClick={onClose} className="bg-gray-300 text-gray-800 px-6 py-2 rounded-lg shadow hover:bg-gray-400 transition-all">
|
||||
|
||||
@@ -1,2 +1,2 @@
|
||||
// /config/appVersion
|
||||
export const APP_VERSION = "1.1.17";
|
||||
export const APP_VERSION = "1.1.18";
|
||||
|
||||
Reference in New Issue
Block a user