Pass current state to peek modals when opening them via query param
This commit is contained in:
parent
d58b1ae7f0
commit
26d89f75d5
|
@ -1,8 +1,9 @@
|
||||||
<script>
|
<script>
|
||||||
import { setContext, getContext } from "svelte"
|
import { setContext, getContext, onMount } from "svelte"
|
||||||
import Router, { querystring } from "svelte-spa-router"
|
import Router, { querystring } from "svelte-spa-router"
|
||||||
import { routeStore } from "stores"
|
import { routeStore, stateStore } from "stores"
|
||||||
import Screen from "./Screen.svelte"
|
import Screen from "./Screen.svelte"
|
||||||
|
import { get } from "svelte/store"
|
||||||
|
|
||||||
const { styleable } = getContext("sdk")
|
const { styleable } = getContext("sdk")
|
||||||
const component = getContext("component")
|
const component = getContext("component")
|
||||||
|
@ -17,15 +18,17 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
// Keep query params up to date
|
// Keep query params up to date
|
||||||
$: {
|
$: routeStore.actions.setQueryParams(parseQueryString($querystring))
|
||||||
|
|
||||||
|
const parseQueryString = query => {
|
||||||
let queryParams = {}
|
let queryParams = {}
|
||||||
if ($querystring) {
|
if (query) {
|
||||||
const urlSearchParams = new URLSearchParams($querystring)
|
const urlSearchParams = new URLSearchParams(query)
|
||||||
for (const [key, value] of urlSearchParams) {
|
for (const [key, value] of urlSearchParams) {
|
||||||
queryParams[key] = value
|
queryParams[key] = value
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
routeStore.actions.setQueryParams(queryParams)
|
return queryParams
|
||||||
}
|
}
|
||||||
|
|
||||||
const getRouterConfig = routes => {
|
const getRouterConfig = routes => {
|
||||||
|
@ -42,6 +45,19 @@
|
||||||
const onRouteLoading = ({ detail }) => {
|
const onRouteLoading = ({ detail }) => {
|
||||||
routeStore.actions.setActiveRoute(detail.route)
|
routeStore.actions.setActiveRoute(detail.route)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Initialise state store from query string on initial load
|
||||||
|
onMount(() => {
|
||||||
|
const queryParams = parseQueryString(get(querystring))
|
||||||
|
if (queryParams.state) {
|
||||||
|
try {
|
||||||
|
const state = JSON.parse(atob(queryParams.state))
|
||||||
|
stateStore.actions.initialise(state)
|
||||||
|
} catch (error) {
|
||||||
|
// Swallow error and do nothing
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
{#key config.id}
|
{#key config.id}
|
||||||
|
|
|
@ -1,4 +1,5 @@
|
||||||
import { writable } from "svelte/store"
|
import { writable, get } from "svelte/store"
|
||||||
|
import { stateStore } from "./state.js"
|
||||||
|
|
||||||
const initialState = {
|
const initialState = {
|
||||||
showPeek: false,
|
showPeek: false,
|
||||||
|
@ -14,7 +15,10 @@ const createPeekStore = () => {
|
||||||
let href = url
|
let href = url
|
||||||
let external = !url.startsWith("/")
|
let external = !url.startsWith("/")
|
||||||
if (!external) {
|
if (!external) {
|
||||||
href = `${window.location.href.split("#")[0]}#${url}?peek=true`
|
const state = get(stateStore)
|
||||||
|
const serialised = encodeURIComponent(btoa(JSON.stringify(state)))
|
||||||
|
const query = `peek=true&state=${serialised}`
|
||||||
|
href = `${window.location.href.split("#")[0]}#${url}?${query}`
|
||||||
}
|
}
|
||||||
store.set({
|
store.set({
|
||||||
showPeek: true,
|
showPeek: true,
|
||||||
|
|
|
@ -34,6 +34,9 @@ const createStateStore = () => {
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Initialises the temporary state store with a certain value
|
||||||
|
const initialise = tempStore.set
|
||||||
|
|
||||||
// Derive the combination of both persisted and non persisted stores
|
// Derive the combination of both persisted and non persisted stores
|
||||||
const store = derived(
|
const store = derived(
|
||||||
[tempStore, persistentStore],
|
[tempStore, persistentStore],
|
||||||
|
@ -47,7 +50,7 @@ const createStateStore = () => {
|
||||||
|
|
||||||
return {
|
return {
|
||||||
subscribe: store.subscribe,
|
subscribe: store.subscribe,
|
||||||
actions: { setValue, deleteValue },
|
actions: { setValue, deleteValue, initialise },
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue