sendnrw/misskey
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: ノート・ユーザTL埋め込み

Browse Source
This commit is contained in:
kakkokari-gtyih
2024-06-02 00:03:46 +09:00
parent f80c5d26b5
commit e1a541d60b
14 changed files with 277 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

113
packages/frontend/src/ui/embed.vue Normal file
View File

@@ -0,0 +1,113 @@
<!--
SPDX-FileCopyrightText: syuilo and misskey-project
SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
<div
ref="rootEl"
:class="[
$style.rootForEmbedPage,
{
[$style.rounded]: embedRounded,
}
]"
:style="maxHeight > 0 ? { maxHeight: `${maxHeight}px`, '--embedMaxHeight': `${maxHeight}px` } : {}"
>
<div
:class="$style.routerViewContainer"
>
<RouterView/>
</div>
<XCommon/>
</div>
</template>
<script lang="ts" setup>
import { computed, provide, ref, shallowRef, onMounted, onUnmounted } from 'vue';
import XCommon from './_common_/common.vue';
import { PageMetadata, provideMetadataReceiver, provideReactiveMetadata } from '@/scripts/page-metadata.js';
import { instanceName } from '@/config.js';
import { mainRouter } from '@/router/main.js';
import { postMessageToParentWindow } from '@/scripts/post-message';
const isRoot = computed(() => mainRouter.currentRoute.value.name === 'index');
const pageMetadata = ref<null | PageMetadata>(null);
provide('router', mainRouter);
provideMetadataReceiver((metadataGetter) => {
const info = metadataGetter();
pageMetadata.value = info;
if (pageMetadata.value) {
if (isRoot.value && pageMetadata.value.title === instanceName) {
document.title = pageMetadata.value.title;
} else {
document.title = `${pageMetadata.value.title} | ${instanceName}`;
}
}
});
provideReactiveMetadata(pageMetadata);
//#region Embed Style
const params = new URLSearchParams(location.search);
const embedRounded = ref(params.get('rounded') !== '0');
const maxHeight = ref(params.get('maxHeight') ? parseInt(params.get('maxHeight')!) : 0);
//#endregion
//#region Embed Resizer
const rootEl = shallowRef<HTMLElement | null>(null);
let resizeMessageThrottleTimer: number | null = null;
let resizeMessageThrottleFlag = false;
let previousHeight = 0;
const resizeObserver = new ResizeObserver(async () => {
const height = rootEl.value!.scrollHeight + 2; // border 上下1px
if (resizeMessageThrottleFlag && Math.abs(previousHeight - height) < 30) return;
if (resizeMessageThrottleTimer) window.clearTimeout(resizeMessageThrottleTimer);
postMessageToParentWindow('misskey:embed:changeHeight', {
height: (maxHeight.value > 0 && height > maxHeight.value) ? maxHeight.value : height,
});
previousHeight = height;
resizeMessageThrottleFlag = true;
resizeMessageThrottleTimer = window.setTimeout(() => {
resizeMessageThrottleFlag = false; // 収縮をやりすぎるとチカチカする
}, 500);
});
onMounted(() => {
resizeObserver.observe(rootEl.value!);
});
onUnmounted(() => {
resizeObserver.disconnect();
});
//#endregion
document.documentElement.style.maxWidth = '500px';
// サーバー起動の場合はもとから付与されているためdevのみ
if (_DEV_) document.documentElement.classList.add('embed');
</script>
<style lang="scss" module>
.rootForEmbedPage {
box-sizing: border-box;
border: 1px solid var(--divider);
background-color: var(--bg);
overflow: hidden;
position: relative;
height: auto;
&.rounded {
border-radius: var(--radius);
}
}
.routerViewContainer {
container-type: inline-size;
max-height: var(--embedMaxHeight, none);
}
</style>

58
packages/frontend/src/ui/minimum.vue
View File

@@ -4,15 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
<div
ref="rootEl"
:class="isEmbed ? [
$style.rootForEmbedPage,
{
[$style.rounded]: embedRounded,
}
] : [$style.root]"
>
<div :class="$style.root">
<div style="container-type: inline-size;">
<RouterView/>
</div>
@@ -22,15 +14,11 @@ SPDX-License-Identifier: AGPL-3.0-only
</template>
<script lang="ts" setup>
import { computed, provide, ref, shallowRef, onMounted, onUnmounted } from 'vue';
import { computed, provide, ref } from 'vue';
import XCommon from './_common_/common.vue';
import { PageMetadata, provideMetadataReceiver, provideReactiveMetadata } from '@/scripts/page-metadata.js';
import { instanceName } from '@/config.js';
import { mainRouter } from '@/router/main.js';
import { isEmbedPage } from '@/scripts/embed-page.js';
import { postMessageToParentWindow } from '@/scripts/post-message';
const isEmbed = isEmbedPage();
const isRoot = computed(() => mainRouter.currentRoute.value.name === 'index');
@@ -50,35 +38,7 @@ provideMetadataReceiver((metadataGetter) => {
});
provideReactiveMetadata(pageMetadata);
//#region Embed Style
const params = new URLSearchParams(location.search);
const embedRounded = ref(params.get('rounded') !== '0');
//#endregion
//#region Embed Resizer
const rootEl = shallowRef<HTMLElement | null>(null);
if (isEmbed) {
const resizeObserver = new ResizeObserver(async () => {
postMessageToParentWindow('misskey:embed:changeHeight', {
height: rootEl.value!.scrollHeight + 2, // border 上下1px
});
});
onMounted(() => {
resizeObserver.observe(rootEl.value!);
});
onUnmounted(() => {
resizeObserver.disconnect();
});
}
//#endregion
if (isEmbed) {
document.documentElement.style.maxWidth = '500px';
document.documentElement.classList.add('embed');
} else {
document.documentElement.style.overflowY = 'scroll';
}
document.documentElement.style.overflowY = 'scroll';
</script>
<style lang="scss" module>
@@ -86,16 +46,4 @@ if (isEmbed) {
min-height: 100dvh;
box-sizing: border-box;
}
.rootForEmbedPage {
box-sizing: border-box;
border: 1px solid var(--divider);
background-color: var(--bg);
overflow: hidden;
position: relative;
&.rounded {
border-radius: var(--radius);
}
}
</style>