Allow customisation of context menu text

index.html

@@ -106,6 +106,8 @@
                 loadingTitle: 'Loading...',
                 locationRegion: 'Region',
                 locationChunk: 'Chunk',
+                contextMenuCopyLink: 'Copy link to here',
+                contextMenuCenterHere: 'Center here',
             }
         };
     </script>

src/api.ts

@@ -93,6 +93,8 @@ function buildMessagesConfig(response: any): LiveAtlasMessageConfig {
 		loadingTitle: liveAtlasMessages.loadingTitle || '',
 		locationRegion: liveAtlasMessages.locationRegion || '',
 		locationChunk: liveAtlasMessages.locationChunk || '',
+		contextMenuCopyLink: liveAtlasMessages.contextMenuCopyLink || '',
+		contextMenuCenterHere: liveAtlasMessages.contextMenuCenterHere || '',
 	}
 }
 

src/components/map/MapContextMenu.vue

@@ -4,8 +4,12 @@
 			<li>
 				<button ref="locationButton" type="button" v-clipboard="locationCopy">{{ locationLabel }}</button>
 			</li>
-			<li><button type="button" v-clipboard="url">Copy link to here</button></li>
+			<li>
-			<li><button type="button" @click.prevent="pan">Center here</button></li>
+				<button type="button" v-clipboard="url">{{ messageCopyLink }}</button>
+			</li>
+			<li>
+				<button type="button" @click.prevent="pan">{{ messageCenterHere }}</button>
+			</li>
 			<WorldListItem v-if="currentWorld" :world="currentWorld"></WorldListItem>
 		</ul>
 	</nav>
@@ -34,6 +38,9 @@ export default defineComponent({
 		const store = useStore(),
 			event = ref<LeafletMouseEvent | null>(null),
 
+			messageCopyLink = computed(() => store.state.messages.contextMenuCopyLink),
+			messageCenterHere = computed(() => store.state.messages.contextMenuCenterHere),
+
 			menuElement = ref<HTMLInputElement | null>(null),
 			locationButton = ref<HTMLInputElement | null>(null),
 			menuVisible = computed(() => !!event.value),
@@ -130,6 +137,9 @@ export default defineComponent({
 		});
 
 		return {
+			messageCopyLink,
+			messageCenterHere,
+
 			menuVisible,
 			menuElement,
 			locationButton,

src/index.d.ts

@@ -61,4 +61,6 @@ interface LiveAtlasMessageConfig {
 	loadingTitle: string;
 	locationRegion: string;
 	locationChunk: string;
+	contextMenuCopyLink: string;
+	contextMenuCenterHere: string;
 }

src/store/state.ts

@@ -124,6 +124,8 @@ export const state: State = {
 		loadingTitle: '',
 		locationRegion: '',
 		locationChunk: '',
+		contextMenuCopyLink: '',
+		contextMenuCenterHere: ''
 	},
 
 	loggedIn: false,