47 lines
1.2 KiB
TypeScript
47 lines
1.2 KiB
TypeScript
/**
|
|
* Vue Composable for getting window dimensions
|
|
* @module composables/windowDimensions
|
|
*/
|
|
|
|
/**
|
|
* Enums for viewport types
|
|
* @readonly
|
|
* @enum {number}
|
|
*/
|
|
export const enum ViewPortType {
|
|
DESKTOP,
|
|
TABLET,
|
|
MOBILE,
|
|
}
|
|
|
|
/**
|
|
* Vue Composable for getting window dimensions and viewport type based on width
|
|
* @returns {object} returns the references of width, height, and viewport type
|
|
*/
|
|
export function useWindowDimensions() {
|
|
const width = ref<number>(0);
|
|
const height = ref<number>(0);
|
|
const viewPortType = ref<ViewPortType>(ViewPortType.DESKTOP);
|
|
|
|
function update(event: Event | undefined) {
|
|
width.value = window.innerWidth;
|
|
height.value = window.innerHeight;
|
|
if (width.value >= 1024) {
|
|
viewPortType.value = ViewPortType.DESKTOP;
|
|
} else if (width.value < 640) {
|
|
viewPortType.value = ViewPortType.MOBILE;
|
|
} else {
|
|
viewPortType.value = ViewPortType.TABLET;
|
|
}
|
|
}
|
|
|
|
onMounted(() => {
|
|
update(undefined);
|
|
window.addEventListener("resize", update);
|
|
});
|
|
|
|
onUnmounted(() => window.removeEventListener("resize", update));
|
|
|
|
return { width, height, viewPortType };
|
|
}
|