From 37cff405ed620a9a885475f63067446c56c58415 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E3=81=8B=E3=81=A3=E3=81=93=E3=81=8B=E3=82=8A?=
<67428053+kakkokari-gtyih@users.noreply.github.com>
Date: Thu, 30 Nov 2023 01:08:29 +0900
Subject: [PATCH] =?UTF-8?q?enhance(frontend):=20Share=E3=83=9A=E3=83=BC?=
=?UTF-8?q?=E3=82=B8=E3=81=A7=E3=81=AE=E6=8A=95=E7=A8=BF=E5=AE=8C=E4=BA=86?=
=?UTF-8?q?=E6=99=82=E3=81=ABpostMessage=E3=82=92=E7=99=BA=E7=81=AB?=
=?UTF-8?q?=E3=81=99=E3=82=8B=E3=82=88=E3=81=86=E3=81=AB=20(#12505)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
* enhance(frontend): Shareページでの投稿完了時にpostMessageを発火
* Update Changelog
* fix
* 名前の混同をさける
* 名前をわかりやすくする
* watchを使わずパフォーマンス改善
---
CHANGELOG.md | 1 +
packages/frontend/src/pages/share.vue | 15 +++++++----
packages/frontend/src/scripts/post-message.ts | 25 +++++++++++++++++++
3 files changed, 36 insertions(+), 5 deletions(-)
create mode 100644 packages/frontend/src/scripts/post-message.ts
diff --git a/CHANGELOG.md b/CHANGELOG.md
index f026b97fa4..1ed930437e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -25,6 +25,7 @@
- Enhance: ユーザーのRawデータを表示するページが復活
- Enhance: リアクション選択時に音を鳴らせるように
- Enhance: サウンドにドライブのファイルを使用できるように
+- Enhance: Shareページで投稿を完了すると、親ウィンドウ（親フレーム）にpostMessageするように
- fix: 「設定のバックアップ」で一部の項目がバックアップに含まれていなかった問題を修正
- Fix: ウィジェットのジョブキューにて音声の発音方法変更に追従できていなかったのを修正 #12367
- Fix: コードエディタが正しく表示されない問題を修正
diff --git a/packages/frontend/src/pages/share.vue b/packages/frontend/src/pages/share.vue
index d66457e823..1d77e5931d 100644
--- a/packages/frontend/src/pages/share.vue
+++ b/packages/frontend/src/pages/share.vue
@@ -19,7 +19,7 @@ SPDX-License-Identifier: AGPL-3.0-only
:renote="renote"
:initialVisibleUsers="visibleUsers"
class="_panel"
- @posted="state = 'posted'"
+ @posted="onPosted"
/>
<div v-else-if="state === 'posted'" class="_buttonsCenter">
<MkButton primary @click="close">{{ i18n.ts.close }}</MkButton>
@@ -32,20 +32,20 @@ SPDX-License-Identifier: AGPL-3.0-only
<script lang="ts" setup>
// SPECIFICATION: https://misskey-hub.net/docs/features/share-form.html
-import { } from 'vue';
+import { ref } from 'vue';
import * as Misskey from 'misskey-js';
import MkButton from '@/components/MkButton.vue';
import MkPostForm from '@/components/MkPostForm.vue';
import * as os from '@/os.js';
-import { mainRouter } from '@/router.js';
import { definePageMetadata } from '@/scripts/page-metadata.js';
+import { postMessageToParentWindow } from '@/scripts/post-message.js';
import { i18n } from '@/i18n.js';
const urlParams = new URLSearchParams(window.location.search);
const localOnlyQuery = urlParams.get('localOnly');
const visibilityQuery = urlParams.get('visibility') as typeof Misskey.noteVisibilities[number];
-let state = $ref('fetching' as 'fetching' | 'writing' | 'posted');
+const state = ref<'fetching' | 'writing' | 'posted'>('fetching');
let title = $ref(urlParams.get('title'));
const text = urlParams.get('text');
const url = urlParams.get('url');
@@ -144,7 +144,7 @@ async function init() {
});
}
- state = 'writing';
+ state.value = 'writing';
}
init();
@@ -162,6 +162,11 @@ function goToMisskey(): void {
location.href = '/';
}
+function onPosted(): void {
+ state.value = 'posted';
+ postMessageToParentWindow('misskey:shareForm:shareCompleted');
+}
+
const headerActions = $computed(() => []);
const headerTabs = $computed(() => []);
diff --git a/packages/frontend/src/scripts/post-message.ts b/packages/frontend/src/scripts/post-message.ts
new file mode 100644
index 0000000000..80441caf15
--- /dev/null
+++ b/packages/frontend/src/scripts/post-message.ts
@@ -0,0 +1,25 @@
+/*
+ * SPDX-FileCopyrightText: syuilo and other misskey contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+export const postMessageEventTypes = [
+ 'misskey:shareForm:shareCompleted',
+] as const;
+
+export type PostMessageEventType = typeof postMessageEventTypes[number];
+
+export type MiPostMessageEvent = {
+ type: PostMessageEventType;
+ payload?: any;
+};
+
+/**
+ * 親フレームにイベントを送信
+ */
+export function postMessageToParentWindow(type: PostMessageEventType, payload?: any): void {
+ window.postMessage({
+ type,
+ payload,
+ }, '*');
+}