Joururi/leim-maps
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added fly to custom markers

Browse Source
This commit is contained in:
Alexis
2024-01-13 00:38:39 +01:00
parent 1018798762
commit 9123fb2263
4 changed files with 110 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/maps/overlay/MarkerCreator.vue
View File

@@ -110,7 +110,13 @@ onClickOutside(markerMenu, handleClickOutside, { ignore: [markerModal] })
function handleAddCustomMarker() {
if (!markerTitle.value) return
const addCustomMarkerEvent = new CustomEvent(`add-custom-marker`, { bubbles: true, detail: { title: markerTitle.value }})
const addCustomMarkerEvent = new CustomEvent(
`add-custom-marker`,
{
bubbles: true,
detail: { title: markerTitle.value }
}
)
addCustomMarker.value?.dispatchEvent(addCustomMarkerEvent)
hideMenu()

10
src/components/maps/overlay/SearchMarkers.vue
View File

@@ -105,10 +105,12 @@ onUpdated(() => {
markerBtnRefs.forEach((btn) => {
const { toMarker } = (btn as HTMLButtonElement).dataset
if (!toMarker) return
const flyToMarker = new CustomEvent(`fly-to-${toMarker}`, { bubbles: true })
btn.addEventListener('click', () => btn.dispatchEvent(flyToMarker))
if (!toMarker) return
const flyToEvent = new CustomEvent(`fly-to-${toMarker}`, { bubbles: true })
btn.addEventListener('click', () => btn.dispatchEvent(flyToEvent))
})
})
@@ -171,6 +173,8 @@ function resetAllFields(actionAfter?: "focusAfter") {
* It should probably be handled by a store system, but nanostores doesn't mesh well
*/
onMounted(() => {
customMarkersData.value = useLocalStorage('custom-markers', []).value
document.addEventListener('refresh-custom-markers', () => {
customMarkersData.value = useLocalStorage('custom-markers', []).value
})

138
src/components/maps/overlay/SearchMarkersTags.vue
View File

@@ -18,79 +18,77 @@ function emitCategorySwitch(newCategory: MapMarkerGroup) {
<template>
<menu class="tag-list">
<TransitionGroup name="tag-menu">
<li>
<button
@click="emitCategorySwitch('quests')"
class="red"
:class="{
'active': currentSearchMode === 'quests'
}"
>
<span class="icon">
<i v-if="currentSearchMode === 'quests'" class="ph-bold ph-check"></i>
<i v-else class="ph-fill ph-flag-banner"></i>
</span>
<span class="label">
Quêtes
</span>
</button>
</li>
<li>
<button
@click="emitCategorySwitch('quests')"
class="red"
:class="{
'active': currentSearchMode === 'quests'
}"
>
<span class="icon">
<i v-if="currentSearchMode === 'quests'" class="ph-bold ph-check"></i>
<i v-else class="ph-fill ph-flag-banner"></i>
</span>
<span class="label">
Quêtes
</span>
</button>
</li>
<li>
<button
@click="emitCategorySwitch('capitals')"
class="blue"
:class="{
'active': currentSearchMode === 'capitals'
}"
>
<span class="icon">
<i v-if="currentSearchMode === 'capitals'" class="ph-bold ph-check"></i>
<i v-else class="ph-fill ph-castle-turret"></i>
</span>
<span class="label">
Capitales
</span>
</button>
</li>
<li>
<button
@click="emitCategorySwitch('capitals')"
class="blue"
:class="{
'active': currentSearchMode === 'capitals'
}"
>
<span class="icon">
<i v-if="currentSearchMode === 'capitals'" class="ph-bold ph-check"></i>
<i v-else class="ph-fill ph-castle-turret"></i>
</span>
<span class="label">
Capitales
</span>
</button>
</li>
<li>
<button
@click="emitCategorySwitch('landmarks')"
class="orange"
:class="{
'active': currentSearchMode === 'landmarks'
}"
>
<span class="icon">
<i v-if="currentSearchMode === 'landmarks'" class="ph-bold ph-check"></i>
<i v-else class="ph-fill ph-lighthouse"></i>
</span>
<span class="label">
Points d'intérêt
</span>
</button>
</li>
<li>
<button
@click="emitCategorySwitch('landmarks')"
class="orange"
:class="{
'active': currentSearchMode === 'landmarks'
}"
>
<span class="icon">
<i v-if="currentSearchMode === 'landmarks'" class="ph-bold ph-check"></i>
<i v-else class="ph-fill ph-lighthouse"></i>
</span>
<span class="label">
Points d'intérêt
</span>
</button>
</li>
<li v-if="customMarkers.length > 0">
<button
@click="emitCategorySwitch('custom')"
class="purple"
:class="{
'active': currentSearchMode === 'custom'
}"
>
<span class="icon">
<i v-if="currentSearchMode === 'custom'" class="ph-bold ph-check"></i>
<i v-else class="ph-fill ph-user-circle"></i>
</span>
<span class="label">
Personnels
</span>
</button>
</li>
</TransitionGroup>
<li>
<button
@click="emitCategorySwitch('custom')"
class="purple"
:class="{
'active': currentSearchMode === 'custom'
}"
>
<span class="icon">
<i v-if="currentSearchMode === 'custom'" class="ph-bold ph-check"></i>
<i v-else class="ph-fill ph-user-circle"></i>
</span>
<span class="label">
Personnels
</span>
</button>
</li>
</menu>
</template>