From 9e28e695ee48ddcbeb17a15c6135f37efb8801a6 Mon Sep 17 00:00:00 2001 From: James Lyne Date: Sun, 13 Dec 2020 02:50:17 +0000 Subject: [PATCH] Implement link copying and url handling --- package-lock.json | 44 ++++++++++++++++++++++ package.json | 2 + src/App.vue | 22 ++++++++++- src/components/Map.vue | 53 +++++++++++++++++++-------- src/components/map/layer/MapLayer.vue | 17 +++------ src/dynmap.d.ts | 7 ++++ src/leaflet/control/LinkControl.ts | 6 +-- src/store/actions.ts | 47 +++++++++++++++++++++--- src/store/getters.ts | 15 ++++++++ src/store/mutation-types.ts | 3 ++ src/store/mutations.ts | 19 +++++++++- src/store/state.ts | 20 +++++++++- src/util.ts | 36 ++++++++++++++++++ 13 files changed, 252 insertions(+), 39 deletions(-) diff --git a/package-lock.json b/package-lock.json index 83d0838..19c0ed4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1317,6 +1317,12 @@ "@types/node": "*" } }, + "@types/clipboard": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/@types/clipboard/-/clipboard-2.0.1.tgz", + "integrity": "sha512-gJJX9Jjdt3bIAePQRRjYWG20dIhAgEqonguyHxXuqALxsoDsDLimihqrSg8fXgVTJ4KZCzkfglKtwsh/8dLfbA==", + "dev": true + }, "@types/connect": { "version": "3.4.33", "resolved": "https://registry.npmjs.org/@types/connect/-/connect-3.4.33.tgz", @@ -3929,6 +3935,17 @@ "integrity": "sha512-FxqpkPPwu1HjuN93Omfm4h8uIanXofW0RxVEW3k5RKx+mJJYSthzNhp32Kzxxy3YAEZ/Dc/EWN1vZRY0+kOhbw==", "dev": true }, + "clipboard": { + "version": "2.0.6", + "resolved": "https://registry.npmjs.org/clipboard/-/clipboard-2.0.6.tgz", + "integrity": "sha512-g5zbiixBRk/wyKakSwCKd7vQXDjFnAMGHoEyBogG/bw9kTD9GvdAvaoRR1ALcEzt3pVKxZR0pViekPMIS0QyGg==", + "dev": true, + "requires": { + "good-listener": "^1.2.2", + "select": "^1.1.2", + "tiny-emitter": "^2.0.0" + } + }, "clipboardy": { "version": "2.3.0", "resolved": "https://registry.npmjs.org/clipboardy/-/clipboardy-2.3.0.tgz", @@ -4921,6 +4938,12 @@ "integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk=", "dev": true }, + "delegate": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/delegate/-/delegate-3.2.0.tgz", + "integrity": "sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw==", + "dev": true + }, "depd": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz", @@ -6616,6 +6639,15 @@ "slash": "^2.0.0" } }, + "good-listener": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/good-listener/-/good-listener-1.2.2.tgz", + "integrity": "sha1-1TswzfkxPf+33JoNR3CWqm0UXFA=", + "dev": true, + "requires": { + "delegate": "^3.1.2" + } + }, "graceful-fs": { "version": "4.2.4", "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.4.tgz", @@ -10528,6 +10560,12 @@ "ajv-keywords": "^3.5.2" } }, + "select": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/select/-/select-1.1.2.tgz", + "integrity": "sha1-DnNQrN7ICxEIUoeG7B1EGNEbOW0=", + "dev": true + }, "select-hose": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz", @@ -11846,6 +11884,12 @@ "integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=", "dev": true }, + "tiny-emitter": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-2.1.0.tgz", + "integrity": "sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==", + "dev": true + }, "tmp": { "version": "0.0.33", "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz", diff --git a/package.json b/package.json index 81a3baa..4fbc00f 100644 --- a/package.json +++ b/package.json @@ -12,6 +12,7 @@ "vue": "^3.0.0" }, "devDependencies": { + "@types/clipboard": "^2.0.1", "@types/leaflet": "^1.5.19", "@typescript-eslint/eslint-plugin": "^4.1.0", "@typescript-eslint/parser": "^4.1.0", @@ -22,6 +23,7 @@ "@vue/compiler-sfc": "^3.0.0", "@vue/eslint-config-typescript": "^5.0.2", "babel-eslint": "^10.1.0", + "clipboard": "^2.0.6", "eslint": "^7.5.0", "eslint-plugin-vue": "^7.0.0-0", "leaflet": "^1.7.1", diff --git a/src/App.vue b/src/App.vue index 14f14ce..948e070 100644 --- a/src/App.vue +++ b/src/App.vue @@ -9,6 +9,8 @@ import Map from './components/Map.vue'; import Sidebar from './components/Sidebar.vue'; import {useStore} from "./store"; import {ActionTypes} from "@/store/action-types"; +import Util from '@/util'; +import {MutationTypes} from "@/store/mutation-types"; export default defineComponent({ name: 'App', @@ -18,9 +20,11 @@ export default defineComponent({ }, setup() { - const store = useStore(), + const initialUrl = window.location.hash.replace('#', ''), + store = useStore(), updateInterval = computed(() => store.state.configuration.updateInterval), title = computed(() => store.state.configuration.title), + currentUrl = computed(() => store.getters.url), updatesEnabled = ref(false), updateTimeout = ref(0), @@ -52,12 +56,28 @@ export default defineComponent({ } updateTimeout.value = 0; + }, + + parseUrl = () => { + if(!initialUrl) { + return; + } + + try { + const result = Util.parseMapHash(initialUrl); + store.commit(MutationTypes.SET_PARSED_URL, result); + } catch(e) { + console.warn('Ignoring invalid url ' + e); + } }; watch(title, (title) => document.title = title); + watch(currentUrl, (url) => window.history.replaceState({}, '', url)); onMounted(() => loadConfiguration()); onBeforeUnmount(() => stopUpdates()); + + parseUrl(); }, }); diff --git a/src/components/Map.vue b/src/components/Map.vue index d3a5b1f..079ffe9 100644 --- a/src/components/Map.vue +++ b/src/components/Map.vue @@ -12,8 +12,8 @@