mirror of
https://github.com/unraid/api.git
synced 2026-01-02 06:30:02 -06:00
feat: viewport watch refactor
This commit is contained in:
@@ -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>
|
||||||
|
|||||||
Reference in New Issue
Block a user