UX: add button for safari users which links to explanation on how to enable geolocation
This commit is contained in:
parent
ef804d0f22
commit
bc37deafb5
3 changed files with 69 additions and 42 deletions
|
|
@ -193,6 +193,8 @@
|
|||
"title": "Download",
|
||||
"uploadGpx": "Upload your track to OpenStreetMap"
|
||||
},
|
||||
"enableGeolocationForSafari": "Did you not get the popup to ask for geopermission?",
|
||||
"enableGeolocationForSafariLink": "Learn how to enable the geolocation permission in settings",
|
||||
"error": "Something went wrong",
|
||||
"example": "Example",
|
||||
"examples": "Examples",
|
||||
|
|
@ -249,7 +251,7 @@
|
|||
"openTheMap": "Open the map",
|
||||
"openTheMapAtGeolocation": "Zoom to your location",
|
||||
"opening_hours": {
|
||||
"closed_permanently": "Closed for an unkown duration",
|
||||
"closed_permanently": "Closed for an unknown duration",
|
||||
"closed_until": "Closed until {date}",
|
||||
"error_loading": "Error: could not visualize these opening hours.",
|
||||
"loadingCountry": "Determining country…",
|
||||
|
|
|
|||
|
|
@ -102,6 +102,10 @@ export class GeoLocationState {
|
|||
this.requestPermissionAsync()
|
||||
}
|
||||
|
||||
public static isSafari(): boolean{
|
||||
return navigator.permissions === undefined && navigator.geolocation !== undefined
|
||||
}
|
||||
|
||||
/**
|
||||
* Requests the user to allow access to their position.
|
||||
* When granted, will be written to the 'geolocationState'.
|
||||
|
|
@ -119,8 +123,12 @@ export class GeoLocationState {
|
|||
return
|
||||
}
|
||||
|
||||
if (navigator.permissions === undefined && navigator.geolocation !== undefined) {
|
||||
// This is probably safari - we just start watching right away
|
||||
if (GeoLocationState.isSafari()) {
|
||||
// This is probably safari
|
||||
// Safari does not support the 'permissions'-API for geolocation,
|
||||
// so we just start watching right away
|
||||
|
||||
this.permission.setData("requested")
|
||||
this.startWatching()
|
||||
return
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,48 +1,51 @@
|
|||
<script lang="ts">
|
||||
import Translations from "../i18n/Translations"
|
||||
import Svg from "../../Svg"
|
||||
import Tr from "../Base/Tr.svelte"
|
||||
import NextButton from "../Base/NextButton.svelte"
|
||||
import Geosearch from "./Geosearch.svelte"
|
||||
import ToSvelte from "../Base/ToSvelte.svelte"
|
||||
import ThemeViewState from "../../Models/ThemeViewState"
|
||||
import { Store, UIEventSource } from "../../Logic/UIEventSource"
|
||||
import { SearchIcon } from "@rgossiaux/svelte-heroicons/solid"
|
||||
import { twJoin } from "tailwind-merge"
|
||||
import { Utils } from "../../Utils"
|
||||
import type { GeolocationPermissionState } from "../../Logic/State/GeoLocationState"
|
||||
import If from "../Base/If.svelte"
|
||||
import Translations from "../i18n/Translations"
|
||||
import Svg from "../../Svg"
|
||||
import Tr from "../Base/Tr.svelte"
|
||||
import NextButton from "../Base/NextButton.svelte"
|
||||
import Geosearch from "./Geosearch.svelte"
|
||||
import ToSvelte from "../Base/ToSvelte.svelte"
|
||||
import ThemeViewState from "../../Models/ThemeViewState"
|
||||
import { UIEventSource } from "../../Logic/UIEventSource"
|
||||
import { SearchIcon } from "@rgossiaux/svelte-heroicons/solid"
|
||||
import { twJoin } from "tailwind-merge"
|
||||
import { Utils } from "../../Utils"
|
||||
import type { GeolocationPermissionState } from "../../Logic/State/GeoLocationState"
|
||||
import { GeoLocationState } from "../../Logic/State/GeoLocationState"
|
||||
import If from "../Base/If.svelte"
|
||||
import { ExclamationTriangleIcon } from "@babeard/svelte-heroicons/mini"
|
||||
import { Readable } from "svelte/store"
|
||||
|
||||
/**
|
||||
* The theme introduction panel
|
||||
*/
|
||||
export let state: ThemeViewState
|
||||
let layout = state.layout
|
||||
let selectedElement = state.selectedElement
|
||||
let selectedLayer = state.selectedLayer
|
||||
/**
|
||||
* The theme introduction panel
|
||||
*/
|
||||
export let state: ThemeViewState
|
||||
let layout = state.layout
|
||||
let selectedElement = state.selectedElement
|
||||
let selectedLayer = state.selectedLayer
|
||||
|
||||
let triggerSearch: UIEventSource<any> = new UIEventSource<any>(undefined)
|
||||
let searchEnabled = false
|
||||
let triggerSearch: UIEventSource<any> = new UIEventSource<any>(undefined)
|
||||
let searchEnabled = false
|
||||
|
||||
let geopermission: Store<GeolocationPermissionState> =
|
||||
state.geolocation.geolocationState.permission
|
||||
let currentGPSLocation = state.geolocation.geolocationState.currentGPSLocation
|
||||
let geopermission: Readable<GeolocationPermissionState> =
|
||||
state.geolocation.geolocationState.permission
|
||||
let currentGPSLocation = state.geolocation.geolocationState.currentGPSLocation
|
||||
|
||||
geopermission.addCallback((perm) => console.log(">>>> Permission", perm))
|
||||
geopermission.addCallback((perm) => console.log(">>>> Permission", perm))
|
||||
|
||||
function jumpToCurrentLocation() {
|
||||
const glstate = state.geolocation.geolocationState
|
||||
if (glstate.currentGPSLocation.data !== undefined) {
|
||||
const c: GeolocationCoordinates = glstate.currentGPSLocation.data
|
||||
state.guistate.themeIsOpened.setData(false)
|
||||
const coor = { lon: c.longitude, lat: c.latitude }
|
||||
state.mapProperties.location.setData(coor)
|
||||
function jumpToCurrentLocation() {
|
||||
const glstate = state.geolocation.geolocationState
|
||||
if (glstate.currentGPSLocation.data !== undefined) {
|
||||
const c: GeolocationCoordinates = glstate.currentGPSLocation.data
|
||||
state.guistate.themeIsOpened.setData(false)
|
||||
const coor = { lon: c.longitude, lat: c.latitude }
|
||||
state.mapProperties.location.setData(coor)
|
||||
}
|
||||
if (glstate.permission.data !== "granted") {
|
||||
glstate.requestPermission()
|
||||
return
|
||||
}
|
||||
}
|
||||
if (glstate.permission.data !== "granted") {
|
||||
glstate.requestPermission()
|
||||
return
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="flex h-full flex-col justify-between">
|
||||
|
|
@ -84,6 +87,7 @@
|
|||
/>
|
||||
<Tr t={Translations.t.general.waitingForGeopermission} />
|
||||
</button>
|
||||
|
||||
{:else if $geopermission === "denied"}
|
||||
<button class="disabled flex w-full items-center gap-x-2">
|
||||
<ToSvelte construct={Svg.location_refused_svg().SetClass("w-8 h-8")} />
|
||||
|
|
@ -103,7 +107,7 @@
|
|||
|
||||
<If condition={state.featureSwitches.featureSwitchSearch}>
|
||||
<div
|
||||
class=".button low-interaction m-1 flex w-full items-center gap-x-2 rounded border p-2"
|
||||
class=".button low-interaction m-1 flex w-full items-center gap-x-2 rounded border p-2 h-fit"
|
||||
>
|
||||
<div class="w-full">
|
||||
<Geosearch
|
||||
|
|
@ -131,6 +135,19 @@
|
|||
</div>
|
||||
</If>
|
||||
</div>
|
||||
|
||||
{#if $currentGPSLocation === undefined && $geopermission === "requested" && GeoLocationState.isSafari()}
|
||||
<a href="https://support.apple.com/en-us/HT207092" class="button w-full" target="_blank" rel="noopener">
|
||||
<div class="flex w-full link-underline m-1">
|
||||
<ExclamationTriangleIcon class="w-12 pr-2" />
|
||||
<div class="flex w-full flex-col">
|
||||
<Tr cls="font-normal" t={Translations.t.general.enableGeolocationForSafari} />
|
||||
<Tr t={Translations.t.general.enableGeolocationForSafariLink} />
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
{/if}
|
||||
|
||||
</div>
|
||||
|
||||
<div class="links-as-button links-w-full m-2 flex flex-col gap-y-1">
|
||||
|
|
|
|||
Loading…
Reference in a new issue