wip
This commit is contained in:
parent
e9b3b5ffcd
commit
f80c5d26b5
|
@ -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>
|
||||||
|
|
|
@ -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,
|
||||||
|
|
|
@ -90,6 +90,10 @@ html {
|
||||||
&.useSystemFont {
|
&.useSystemFont {
|
||||||
font-family: system-ui;
|
font-family: system-ui;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&.embed {
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
html._themeChanging_ {
|
html._themeChanging_ {
|
||||||
|
|
|
@ -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>
|
||||||
|
|
Loading…
Reference in New Issue