Customisable copy to clipboard messages

This commit is contained in:
James Lyne 2021-05-29 00:38:29 +01:00
parent 1f44f7e752
commit 5b1df5ccf8
6 changed files with 19 additions and 5 deletions

View File

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

View File

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

View File

@ -53,6 +53,8 @@ export default defineComponent({
messageCopyLink = computed(() => store.state.messages.contextMenuCopyLink), messageCopyLink = computed(() => store.state.messages.contextMenuCopyLink),
messageCenterHere = computed(() => store.state.messages.contextMenuCenterHere), messageCenterHere = computed(() => store.state.messages.contextMenuCenterHere),
messageCopySuccess = computed(() => store.state.messages.copyToClipboardSuccess),
messageCopyError = computed(() => store.state.messages.copyToClipboardError),
menuElement = ref<HTMLInputElement | null>(null), menuElement = ref<HTMLInputElement | null>(null),
menuVisible = computed(() => !!event.value), 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) => { 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); console.error('Error copying to clipboard', e);
}; };

2
src/index.d.ts vendored
View File

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

View File

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

View File

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