feat: viewport watch refactor

This commit is contained in:
Eli Bosley
2024-12-18 12:51:20 -05:00
parent e1515a118a
commit 9d2405bd21

View File

@@ -1,22 +1,39 @@
<script setup lang="ts"> <script setup lang="ts">
import { DialogRoot, type DialogRootEmits, type DialogRootProps, useForwardPropsEmits } from 'radix-vue' import { DialogRoot, useForwardPropsEmits, type DialogRootEmits, type DialogRootProps } from 'radix-vue';
const props = defineProps<DialogRootProps & { class?: string }>() const MOBILE_VIEWPORT = 'width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0' as const;
const emits = defineEmits<DialogRootEmits>()
const forwarded = useForwardPropsEmits(props, emits) const props = defineProps<DialogRootProps & { class?: string }>();
const initialViewport = ref(document.querySelector('meta[name="viewport"]')?.getAttribute('content') ?? 'width=1300'); const emits = defineEmits<DialogRootEmits>();
const openListener = (opened: boolean) => {
/**
* Update meta tags for the root page when oepned
*/
if (opened) { const getViewport = (): string => {
document.querySelector('meta[name="viewport"]')?.setAttribute('content', 'width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0') return document.querySelector('meta[name="viewport"]')?.getAttribute('content') ?? 'width=1300';
};
const updateViewport = (viewport: string): void => {
const meta = document.querySelector('meta[name="viewport"]');
if (meta) {
meta.setAttribute('content', viewport);
} else { } else {
document.querySelector('meta[name="viewport"]')?.setAttribute('content', initialViewport.value); const meta = document.createElement('meta');
meta.name = 'viewport';
meta.content = viewport;
document.head.appendChild(meta);
} }
} };
const forwarded = useForwardPropsEmits(props, emits);
const initialViewport = ref(getViewport());
const openListener = (opened: boolean) => {
if (opened) {
updateViewport(MOBILE_VIEWPORT);
} else {
updateViewport(initialViewport.value);
}
};
onUnmounted(() => {
updateViewport(initialViewport.value);
});
</script> </script>
<template> <template>