Tidy up device bindings provider

This commit is contained in:
Andrew Kingston 2021-08-13 11:34:11 +01:00
parent f4d965347d
commit 2e778a1111
1 changed files with 7 additions and 9 deletions

View File

@ -2,21 +2,19 @@
import Provider from "./Provider.svelte" import Provider from "./Provider.svelte"
import { onMount } from "svelte" import { onMount } from "svelte"
let width = window.innerWidth
const tabletBreakpoint = 768 const tabletBreakpoint = 768
const desktopBreakpoint = 1280 const desktopBreakpoint = 1280
let screenWidth = window.innerWidth
const resizeObserver = new ResizeObserver(entries => { const resizeObserver = new ResizeObserver(entries => {
if (entries?.[0]) { if (entries?.[0]) {
screenWidth = entries[0].contentRect?.width width = entries[0].contentRect?.width
} }
}) })
$: mobile = screenWidth && screenWidth < tabletBreakpoint
$: tablet = $: data = {
screenWidth && mobile: width && width < tabletBreakpoint,
screenWidth >= tabletBreakpoint && tablet: width && width >= tabletBreakpoint && width < desktopBreakpoint,
screenWidth < desktopBreakpoint }
$: data = { mobile, tablet }
onMount(() => { onMount(() => {
const doc = document.documentElement const doc = document.documentElement