yume/yumechi-no-kuni
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refactor: MkStickyContainerで<style />を使う (#14755)

Browse source 
* remove rootEL ref

* use css module

* use v-bind in css

* --MI prefix

* remove unused ref

---------

Co-authored-by: syuilo <4439005+syuilo@users.noreply.github.com>
This commit is contained in:
FineArchs 2024-10-12 11:20:55 +09:00 committed by GitHub
parent 85bb1ff1db
commit ee08e9f51e
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 25 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

56
packages/frontend/src/components/global/MkStickyContainer.vue
View file

@ -4,19 +4,18 @@ SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
<div ref="rootEl">
<div ref="headerEl">
<div>
<div ref="headerEl" :class="$style.header">
<slot name="header"></slot>
</div>
<div
ref="bodyEl"
:class="$style.body"
:data-sticky-container-header-height="headerHeight"
:data-sticky-container-footer-height="footerHeight"
style="position: relative; z-index: 0;"
>
<slot></slot>
</div>
<div ref="footerEl">
<div ref="footerEl" :class="$style.footer">
<slot name="footer"></slot>
</div>
</div>
@ -27,10 +26,8 @@ import { onMounted, onUnmounted, provide, inject, Ref, ref, watch, shallowRef }
import { CURRENT_STICKY_BOTTOM, CURRENT_STICKY_TOP } from '@@/js/const.js';
const rootEl = shallowRef<HTMLElement>();
const headerEl = shallowRef<HTMLElement>();
const footerEl = shallowRef<HTMLElement>();
const bodyEl = shallowRef<HTMLElement>();
const headerHeight = ref<string | undefined>();
const childStickyTop = ref(0);
@ -67,31 +64,11 @@ onMounted(() => {
watch([parentStickyTop, parentStickyBottom], calc);
watch(childStickyTop, () => {
if (bodyEl.value == null) return;
bodyEl.value.style.setProperty('--MI-stickyTop', `${childStickyTop.value}px`);
}, {
immediate: true,
});
watch(childStickyBottom, () => {
if (bodyEl.value == null) return;
bodyEl.value.style.setProperty('--MI-stickyBottom', `${childStickyBottom.value}px`);
}, {
immediate: true,
});
if (headerEl.value != null) {
headerEl.value.style.position = 'sticky';
headerEl.value.style.top = 'var(--MI-stickyTop, 0)';
headerEl.value.style.zIndex = '1';
observer.observe(headerEl.value);
}
if (footerEl.value != null) {
footerEl.value.style.position = 'sticky';
footerEl.value.style.bottom = 'var(--MI-stickyBottom, 0)';
footerEl.value.style.zIndex = '1';
observer.observe(footerEl.value);
}
});
@ -99,8 +76,25 @@ onMounted(() => {
onUnmounted(() => {
observer.disconnect();
});
defineExpose({
rootEl: rootEl,
});
</script>
<style lang='scss' module>
.body {
position: relative;
z-index: 0;
--MI-stickyTop: v-bind("childStickyTop + 'px'");
--MI-stickyBottom: v-bind("childStickyBottom + 'px'");
}
.header {
position: sticky;
top: var(--MI-stickyTop, 0);
z-index: 1;
}
.footer {
position: sticky;
bottom: var(--MI-stickyBottom, 0);
z-index: 1;
}
</style>