refactor: use setup and ref sugar

This commit is contained in:
Johann150 2022-07-04 13:06:33 +02:00
parent 75a55ce8d3
commit b81f9e1c5a
Signed by untrusted user: Johann150
GPG key ID: 9EE6577A2A06F8F1

View file

@ -10,7 +10,7 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { nextTick, onMounted, computed, ref, watch, provide } from 'vue'; import { nextTick, onMounted, watch, provide } from 'vue';
import * as os from '@/os'; import * as os from '@/os';
import { isTouchUsing } from '@/scripts/touch'; import { isTouchUsing } from '@/scripts/touch';
import { defaultStore } from '@/store'; import { defaultStore } from '@/store';
@ -57,13 +57,13 @@ const emit = defineEmits<{
provide('modal', true); provide('modal', true);
const maxHeight = ref<number>(); let maxHeight = $ref<number>();
const fixed = ref(false); let fixed = $ref(false);
const transformOrigin = ref('center'); let transformOrigin = $ref('center');
const showing = ref(true); let showing = $ref(true);
const content = ref<HTMLElement>(); let content = $ref<HTMLElement>();
const zIndex = os.claimZIndex(props.zPriority); const zIndex = os.claimZIndex(props.zPriority);
const type = computed(() => { const type = $computed(() => {
if (props.preferType === 'auto') { if (props.preferType === 'auto') {
if (!defaultStore.state.disableDrawer && isTouchUsing && deviceKind === 'smartphone') { if (!defaultStore.state.disableDrawer && isTouchUsing && deviceKind === 'smartphone') {
return 'drawer'; return 'drawer';
@ -80,7 +80,7 @@ let contentClicking = false;
const close = () => { const close = () => {
// eslint-disable-next-line vue/no-mutating-props // eslint-disable-next-line vue/no-mutating-props
if (props.src) props.src.style.pointerEvents = 'auto'; if (props.src) props.src.style.pointerEvents = 'auto';
showing.value = false; showing = false;
emit('close'); emit('close');
}; };
@ -89,8 +89,8 @@ const onBgClick = () => {
emit('click'); emit('click');
}; };
if (type.value === 'drawer') { if (type === 'drawer') {
maxHeight.value = window.innerHeight / 1.5; maxHeight = window.innerHeight / 1.5;
} }
const keymap = { const keymap = {
@ -101,22 +101,21 @@ const MARGIN = 16;
const align = () => { const align = () => {
if (props.src == null) return; if (props.src == null) return;
if (type.value === 'drawer') return; if (type === 'drawer') return;
if (type.value === 'dialog') return; if (type == 'dialog') return;
const popover = content.value!; if (content == null) return;
if (popover == null) return;
const srcRect = props.src.getBoundingClientRect(); const srcRect = props.src.getBoundingClientRect();
const width = popover.offsetWidth; const width = content!.offsetWidth;
const height = popover.offsetHeight; const height = content!.offsetHeight;
let left; let left;
let top; let top;
const x = srcRect.left + (fixed.value ? 0 : window.pageXOffset); const x = srcRect.left + (fixed ? 0 : window.pageXOffset);
const y = srcRect.top + (fixed.value ? 0 : window.pageYOffset); const y = srcRect.top + (fixed ? 0 : window.pageYOffset);
if (props.anchor.x === 'center') { if (props.anchor.x === 'center') {
left = x + (props.src.offsetWidth / 2) - (width / 2); left = x + (props.src.offsetWidth / 2) - (width / 2);
@ -134,7 +133,7 @@ const align = () => {
top = y + props.src.offsetHeight; top = y + props.src.offsetHeight;
} }
if (fixed.value) { if (fixed) {
// //
if (left + width > window.innerWidth) { if (left + width > window.innerWidth) {
left = window.innerWidth - width; left = window.innerWidth - width;
@ -147,16 +146,16 @@ const align = () => {
if (top + height > (window.innerHeight - MARGIN)) { if (top + height > (window.innerHeight - MARGIN)) {
if (props.noOverlap && props.anchor.x === 'center') { if (props.noOverlap && props.anchor.x === 'center') {
if (underSpace >= (upperSpace / 3)) { if (underSpace >= (upperSpace / 3)) {
maxHeight.value = underSpace; maxHeight = underSpace;
} else { } else {
maxHeight.value = upperSpace; maxHeight = upperSpace;
top = (upperSpace + MARGIN) - height; top = (upperSpace + MARGIN) - height;
} }
} else { } else {
top = (window.innerHeight - MARGIN) - height; top = (window.innerHeight - MARGIN) - height;
} }
} else { } else {
maxHeight.value = underSpace; maxHeight = underSpace;
} }
} else { } else {
// //
@ -171,16 +170,16 @@ const align = () => {
if (top + height - window.pageYOffset > (window.innerHeight - MARGIN)) { if (top + height - window.pageYOffset > (window.innerHeight - MARGIN)) {
if (props.noOverlap && props.anchor.x === 'center') { if (props.noOverlap && props.anchor.x === 'center') {
if (underSpace >= (upperSpace / 3)) { if (underSpace >= (upperSpace / 3)) {
maxHeight.value = underSpace; maxHeight = underSpace;
} else { } else {
maxHeight.value = upperSpace; maxHeight = upperSpace;
top = window.pageYOffset + ((upperSpace + MARGIN) - height); top = window.pageYOffset + ((upperSpace + MARGIN) - height);
} }
} else { } else {
top = (window.innerHeight - MARGIN) - height + window.pageYOffset - 1; top = (window.innerHeight - MARGIN) - height + window.pageYOffset - 1;
} }
} else { } else {
maxHeight.value = underSpace; maxHeight = underSpace;
} }
} }
@ -195,29 +194,29 @@ const align = () => {
let transformOriginX = 'center'; let transformOriginX = 'center';
let transformOriginY = 'center'; let transformOriginY = 'center';
if (top >= srcRect.top + props.src.offsetHeight + (fixed.value ? 0 : window.pageYOffset)) { if (top >= srcRect.top + props.src.offsetHeight + (fixed ? 0 : window.pageYOffset)) {
transformOriginY = 'top'; transformOriginY = 'top';
} else if ((top + height) <= srcRect.top + (fixed.value ? 0 : window.pageYOffset)) { } else if ((top + height) <= srcRect.top + (fixed ? 0 : window.pageYOffset)) {
transformOriginY = 'bottom'; transformOriginY = 'bottom';
} }
if (left >= srcRect.left + props.src.offsetWidth + (fixed.value ? 0 : window.pageXOffset)) { if (left >= srcRect.left + props.src.offsetWidth + (fixed ? 0 : window.pageXOffset)) {
transformOriginX = 'left'; transformOriginX = 'left';
} else if ((left + width) <= srcRect.left + (fixed.value ? 0 : window.pageXOffset)) { } else if ((left + width) <= srcRect.left + (fixed ? 0 : window.pageXOffset)) {
transformOriginX = 'right'; transformOriginX = 'right';
} }
transformOrigin.value = `${transformOriginX} ${transformOriginY}`; transformOrigin = `${transformOriginX} ${transformOriginY}`;
popover.style.left = left + 'px'; content.style.left = left + 'px';
popover.style.top = top + 'px'; content.style.top = top + 'px';
}; };
const onOpened = () => { const onOpened = () => {
emit('opened'); emit('opened');
// //
const el = content.value!.children[0]; const el = content!.children[0];
el.addEventListener('mousedown', ev => { el.addEventListener('mousedown', ev => {
contentClicking = true; contentClicking = true;
window.addEventListener('mouseup', ev => { window.addEventListener('mouseup', ev => {
@ -235,7 +234,7 @@ onMounted(() => {
// eslint-disable-next-line vue/no-mutating-props // eslint-disable-next-line vue/no-mutating-props
props.src.style.pointerEvents = 'none'; props.src.style.pointerEvents = 'none';
} }
fixed.value = (type.value === 'drawer') || (getFixedContainer(props.src) != null); fixed = (type === 'drawer') || (getFixedContainer(props.src) != null);
await nextTick(); await nextTick();
@ -243,10 +242,9 @@ onMounted(() => {
}, { immediate: true }); }, { immediate: true });
nextTick(() => { nextTick(() => {
const popover = content.value;
new ResizeObserver((entries, observer) => { new ResizeObserver((entries, observer) => {
align(); align();
}).observe(popover!); }).observe(content!);
}); });
}); });