Skirda/LiveAtlas
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Use clipboard util methods in LinkControl

Browse Source
This commit is contained in:
James Lyne 2022-06-21 23:24:43 +01:00
parent ac9d5242bd
commit 4d0e481f74
4 changed files with 14 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/map/MapContextMenu.vue
View File

@ -218,8 +218,8 @@ export default defineComponent({
messageCopyLink, messageCopyLink,
messageCenterHere, messageCenterHere,
copySuccess: clipboardSuccess(), copySuccess: clipboardSuccess(store),
copyError: clipboardError(), copyError: clipboardError(store),
menuVisible, menuVisible,
menuElement, menuElement,

4
src/components/sidebar/FollowTargetSection.vue
View File

@ -91,8 +91,8 @@ export default defineComponent({
messageHidden, messageHidden,
status, status,
location, location,
copySuccess: clipboardSuccess(), copySuccess: clipboardSuccess(store),
copyError: clipboardError(), copyError: clipboardError(store),
} }
}, },
}); });

17
src/leaflet/control/LinkControl.ts
View File

@ -21,8 +21,7 @@ import {Control, ControlOptions, DomUtil} from 'leaflet';
import {useStore} from "@/store"; 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 {clipboardError, clipboardSuccess} from "@/util";
import {computed} from "@vue/runtime-core";
/** /**
* Leaflet map control providing a button for copying a link for the current map view to the clipboard * Leaflet map control providing a button for copying a link for the current map view to the clipboard
@ -38,8 +37,8 @@ export class LinkControl extends Control {
const store = useStore(), const store = useStore(),
linkButton = DomUtil.create('button', linkButton = DomUtil.create('button',
'leaflet-control-button leaflet-control-link') as HTMLButtonElement, 'leaflet-control-button leaflet-control-link') as HTMLButtonElement,
copySuccessMessage = computed(() => store.state.messages.copyToClipboardSuccess), copySuccess = clipboardSuccess(store),
copyErrorMessage = computed(() => store.state.messages.copyToClipboardError); copyError = clipboardError(store);
linkButton.type = 'button'; linkButton.type = 'button';
linkButton.title = store.state.messages.linkTitle; linkButton.title = store.state.messages.linkTitle;
@ -50,13 +49,9 @@ export class LinkControl extends Control {
linkButton.addEventListener('click', e => { linkButton.addEventListener('click', e => {
e.preventDefault(); e.preventDefault();
toClipboard(window.location.href.split("#")[0] + store.getters.url).then(() => { toClipboard(window.location.href.split("#")[0] + store.getters.url)
notify(copySuccessMessage.value); .then(copySuccess)
}).catch((e) => { .catch(copyError)
notify({ type: 'error', text: copyErrorMessage.value });
console.error('Error copying to clipboard', e);
});
}); });
return linkButton; return linkButton;

8
src/util.ts
View File

@ -14,7 +14,6 @@
* limitations under the License. * limitations under the License.
*/ */
import {useStore} from "@/store";
import LiveAtlasMapDefinition from "@/model/LiveAtlasMapDefinition"; import LiveAtlasMapDefinition from "@/model/LiveAtlasMapDefinition";
import { import {
Coordinate, Coordinate,
@ -26,6 +25,7 @@ import {
} from "@/index"; } from "@/index";
import {notify} from "@kyvg/vue3-notification"; import {notify} from "@kyvg/vue3-notification";
import {globalMessages, serverMessages} from "../messages"; import {globalMessages, serverMessages} from "../messages";
import {Store} from "@/store";
const documentRange = document.createRange(), const documentRange = document.createRange(),
brToSpaceRegex = /<br \/>/g; brToSpaceRegex = /<br \/>/g;
@ -228,14 +228,14 @@ export const stripHTML = (text: string) => {
* Default success callback function for VueClipboard, will display a notification with the configured copy success * Default success callback function for VueClipboard, will display a notification with the configured copy success
* message * message
*/ */
export const clipboardSuccess = () => () => notify(useStore().state.messages.copyToClipboardSuccess); export const clipboardSuccess = (store: Store) => () => notify(store.state.messages.copyToClipboardSuccess);
/** /**
* Default error callback function for VueClipboard, will display a notification with the configured copy error * Default error callback function for VueClipboard, will display a notification with the configured copy error
* message * message
*/ */
export const clipboardError = () => (e: Error) => { export const clipboardError = (store: Store) => (e: Error) => {
notify({ type: 'error', text: useStore().state.messages.copyToClipboardError }); notify({ type: 'error', text: store.state.messages.copyToClipboardError });
console.error('Error copying to clipboard', e); console.error('Error copying to clipboard', e);
}; };