Customisable copy to clipboard messages

index.html

@@ -111,6 +111,8 @@
                 toggleTitle: 'Click to toggle this section',
                 mapTitle: 'Map - Use the arrow keys to pan the map',
                 layersTitle: 'Layers',
+                copyToClipboardSuccess: 'Copied to clipboard',
+                copyToClipboardError: 'Unable to copy to clipboard',
             }
         };
     </script>

src/api.ts

@@ -98,6 +98,8 @@ function buildMessagesConfig(response: any): LiveAtlasMessageConfig {
 		toggleTitle: liveAtlasMessages.toggleTitle || '',
 		mapTitle: liveAtlasMessages.mapTitle || '',
 		layersTitle: liveAtlasMessages.layersTitle || '',
+		copyToClipboardSuccess: liveAtlasMessages.copyToClipboardSuccess || '',
+		copyToClipboardError: liveAtlasMessages.copyToClipboardError || '',
 	}
 }
 

src/components/map/MapContextMenu.vue

@@ -53,6 +53,8 @@ export default defineComponent({
 
 			messageCopyLink = computed(() => store.state.messages.contextMenuCopyLink),
 			messageCenterHere = computed(() => store.state.messages.contextMenuCenterHere),
+			messageCopySuccess = computed(() => store.state.messages.copyToClipboardSuccess),
+			messageCopyError = computed(() => store.state.messages.copyToClipboardError),
 
 			menuElement = ref<HTMLInputElement | null>(null),
 			menuVisible = computed(() => !!event.value),
@@ -144,9 +146,9 @@ export default defineComponent({
 			}
 		}
 
-		const copySuccess = () => notify('Copied to clipboard');
+		const copySuccess = () => notify(messageCopySuccess.value);
 		const copyError = (e: Error) => {
-			notify({ type: 'error', text:'Unable to copy to clipboard'});
+			notify({ type: 'error', text: messageCopyError.value });
 			console.error('Error copying to clipboard', e);
 		};
 

src/index.d.ts

@@ -59,6 +59,8 @@ interface LiveAtlasMessageConfig {
 	toggleTitle: string;
 	mapTitle: string;
 	layersTitle: string;
+	copyToClipboardSuccess: string;
+	copyToClipboardError: string;
 }
 
 export type LiveAtlasUIElement = 'layers' | 'chat' | 'players' | 'maps' | 'settings';

src/leaflet/control/LinkControl.ts

@@ -22,6 +22,7 @@ import {useStore} from "@/store";
 import '@/assets/icons/link.svg';
 import { toClipboard } from '@soerenmartius/vue3-clipboard';
 import {notify} from "@kyvg/vue3-notification";
+import {computed} from "@vue/runtime-core";
 
 export class LinkControl extends Control {
 	// @ts-ignore
@@ -32,7 +33,10 @@ export class LinkControl extends Control {
 	}
 
 	onAdd() {
-		const linkButton = DomUtil.create('button', 'leaflet-control-link') as HTMLButtonElement;
+		const store = useStore(),
+			linkButton = DomUtil.create('button', 'leaflet-control-link') as HTMLButtonElement,
+			copySuccessMessage = computed(() => store.state.messages.copyToClipboardSuccess),
+			copyErrorMessage = computed(() => store.state.messages.copyToClipboardError);
 
 		linkButton.type = 'button';
 		linkButton.title = useStore().state.messages.linkTitle;
@@ -44,9 +48,9 @@ export class LinkControl extends Control {
 		linkButton.addEventListener('click', e => {
 			e.preventDefault();
 			toClipboard(window.location.href.split("#")[0] + useStore().getters.url).then(() => {
-				notify('Copied to clipboard');
+				notify(copySuccessMessage.value);
 			}).catch((e) => {
-				notify({ type: 'error', text:'Unable to copy to clipboard'});
+				notify({ type: 'error', text: copyErrorMessage.value });
 				console.error('Error copying to clipboard', e);
 			});
 

src/store/state.ts

@@ -133,6 +133,8 @@ export const state: State = {
 		toggleTitle: '',
 		mapTitle: '',
 		layersTitle: '',
+		copyToClipboardSuccess: '',
+		copyToClipboardError: '',
 	},
 
 	loggedIn: false,