heartles/egirlskey
1
0
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity

fix(frontend): disconnect ResizeObserver

Browse source
This commit is contained in:
tamaina 2023-05-31 16:00:55 +00:00
parent 6addf9002c
commit 1cc616b86c
3 changed files with 40 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
packages/frontend/src/components/MkContainer.vue
View file

@ -34,7 +34,7 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { onMounted, ref, shallowRef, watch } from 'vue'; import { onMounted, onUnmounted, ref, shallowRef, watch } from 'vue';
import { defaultStore } from '@/store'; import { defaultStore } from '@/store';
import { i18n } from '@/i18n'; import { i18n } from '@/i18n';
@ -83,13 +83,19 @@ function afterLeave(el) {
const calcOmit = () => { const calcOmit = () => {
if (omitted.value || ignoreOmit.value || props.maxHeight == null) return; if (omitted.value || ignoreOmit.value || props.maxHeight == null) return;
if (!contentEl.value) return;
const height = contentEl.value.offsetHeight; const height = contentEl.value.offsetHeight;
omitted.value = height > props.maxHeight; omitted.value = height > props.maxHeight;
}; };
const omitObserver = new ResizeObserver((entries, observer) => {
calcOmit();
});
onMounted(() => { onMounted(() => {
watch(showBody, v => { watch(showBody, v => {
const headerHeight = props.showHeader ? headerEl.value.offsetHeight : 0; if (!rootEl.value) return;
const headerHeight = props.showHeader ? headerEl.value?.offsetHeight ?? 0 : 0;
rootEl.value.style.minHeight = `${headerHeight}px`; rootEl.value.style.minHeight = `${headerHeight}px`;
if (v) { if (v) {
rootEl.value.style.flexBasis = 'auto'; rootEl.value.style.flexBasis = 'auto';
@ -100,13 +106,15 @@ onMounted(() => {
immediate: true, immediate: true,
}); });
rootEl.value.style.setProperty('--maxHeight', props.maxHeight + 'px'); if (rootEl.value) rootEl.value.style.setProperty('--maxHeight', props.maxHeight + 'px');
calcOmit(); calcOmit();
new ResizeObserver((entries, observer) => { if (contentEl.value) omitObserver.observe(contentEl.value);
calcOmit(); });
}).observe(contentEl.value);
onUnmounted(() => {
omitObserver.disconnect();
}); });
</script> </script>

16
packages/frontend/src/components/MkModal.vue
View file

@ -17,7 +17,7 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { nextTick, onMounted, watch, provide } from 'vue'; import { nextTick, onMounted, watch, provide, onUnmounted } 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';
@ -38,7 +38,7 @@ type ModalTypes = 'popup' | 'dialog' | 'drawer';
const props = withDefaults(defineProps<{ const props = withDefaults(defineProps<{
manualShowing?: boolean | null; manualShowing?: boolean | null;
anchor?: { x: string; y: string; }; anchor?: { x: string; y: string; };
src?: HTMLElement; src?: HTMLElement | null;
preferType?: ModalTypes | 'auto'; preferType?: ModalTypes | 'auto';
zPriority?: 'low' | 'middle' | 'high'; zPriority?: 'low' | 'middle' | 'high';
noOverlap?: boolean; noOverlap?: boolean;
@ -264,6 +264,10 @@ const onOpened = () => {
}, { passive: true }); }, { passive: true });
}; };
const alignObserver = new ResizeObserver((entries, observer) => {
align();
});
onMounted(() => { onMounted(() => {
watch(() => props.src, async () => { watch(() => props.src, async () => {
if (props.src) { if (props.src) {
@ -278,12 +282,14 @@ onMounted(() => {
}, { immediate: true }); }, { immediate: true });
nextTick(() => { nextTick(() => {
new ResizeObserver((entries, observer) => { alignObserver.observe(content!);
align();
}).observe(content!);
}); });
}); });
onUnmounted(() => {
alignObserver.disconnect();
});
defineExpose({ defineExpose({
close, close,
}); });

14
packages/frontend/src/components/MkOmit.vue
View file

@ -8,7 +8,7 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { onMounted } from 'vue'; import { onMounted, onUnmounted } from 'vue';
import { i18n } from '@/i18n'; import { i18n } from '@/i18n';
const props = withDefaults(defineProps<{ const props = withDefaults(defineProps<{
@ -21,16 +21,22 @@ let content = $shallowRef<HTMLElement>();
let omitted = $ref(false); let omitted = $ref(false);
let ignoreOmit = $ref(false); let ignoreOmit = $ref(false);
onMounted(() => {
const calcOmit = () => { const calcOmit = () => {
if (omitted || ignoreOmit) return; if (omitted || ignoreOmit) return;
omitted = content.offsetHeight > props.maxHeight; omitted = content.offsetHeight > props.maxHeight;
}; };
const omitObserver = new ResizeObserver((entries, observer) => {
calcOmit(); calcOmit();
new ResizeObserver((entries, observer) => { });
onMounted(() => {
calcOmit(); calcOmit();
}).observe(content); omitObserver.observe(content);
});
onUnmounted(() => {
omitObserver.disconnect();
}); });
</script> </script>