This commit is contained in:
kakkokari-gtyih 2024-06-01 21:37:34 +09:00
parent e9b3b5ffcd
commit f80c5d26b5
4 changed files with 55 additions and 14 deletions

View File

@ -1,13 +1,9 @@
<template> <template>
<div> <div></div>
$i: {{ JSON.stringify($i) }}
</div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { $i } from '@/account.js';
</script> </script>
<style scoped> <style lang="scss" module>
</style> </style>

View File

@ -19,6 +19,7 @@ export type MiPostMessageEvent = {
* *
*/ */
export function postMessageToParentWindow(type: PostMessageEventType, payload?: any): void { export function postMessageToParentWindow(type: PostMessageEventType, payload?: any): void {
if (_DEV_) console.log('postMessageToParentWindow', type, payload);
window.parent.postMessage({ window.parent.postMessage({
type, type,
payload, payload,

View File

@ -90,6 +90,10 @@ html {
&.useSystemFont { &.useSystemFont {
font-family: system-ui; font-family: system-ui;
} }
&.embed {
background-color: transparent;
}
} }
html._themeChanging_ { html._themeChanging_ {

View File

@ -4,7 +4,15 @@ SPDX-License-Identifier: AGPL-3.0-only
--> -->
<template> <template>
<div :class="isEmbed ? $style.rootForEmbedPage : $style.root"> <div
ref="rootEl"
:class="isEmbed ? [
$style.rootForEmbedPage,
{
[$style.rounded]: embedRounded,
}
] : [$style.root]"
>
<div style="container-type: inline-size;"> <div style="container-type: inline-size;">
<RouterView/> <RouterView/>
</div> </div>
@ -14,17 +22,15 @@ SPDX-License-Identifier: AGPL-3.0-only
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { computed, provide, ref } from 'vue'; import { computed, provide, ref, shallowRef, onMounted, onUnmounted } from 'vue';
import XCommon from './_common_/common.vue'; import XCommon from './_common_/common.vue';
import { PageMetadata, provideMetadataReceiver, provideReactiveMetadata } from '@/scripts/page-metadata.js'; import { PageMetadata, provideMetadataReceiver, provideReactiveMetadata } from '@/scripts/page-metadata.js';
import { instanceName } from '@/config.js'; import { instanceName } from '@/config.js';
import { mainRouter } from '@/router/main.js'; import { mainRouter } from '@/router/main.js';
import { isEmbedPage } from '@/scripts/embed-page.js';
import { postMessageToParentWindow } from '@/scripts/post-message';
const props = withDefaults(defineProps<{ const isEmbed = isEmbedPage();
isEmbed?: boolean;
}>(), {
isEmbed: false,
});
const isRoot = computed(() => mainRouter.currentRoute.value.name === 'index'); const isRoot = computed(() => mainRouter.currentRoute.value.name === 'index');
@ -44,7 +50,33 @@ provideMetadataReceiver((metadataGetter) => {
}); });
provideReactiveMetadata(pageMetadata); provideReactiveMetadata(pageMetadata);
if (!props.isEmbed) { //#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> </script>
@ -57,5 +89,13 @@ if (!props.isEmbed) {
.rootForEmbedPage { .rootForEmbedPage {
box-sizing: border-box; box-sizing: border-box;
border: 1px solid var(--divider);
background-color: var(--bg);
overflow: hidden;
position: relative;
&.rounded {
border-radius: var(--radius);
}
} }
</style> </style>