From 48d3b9a7b857836adc4c6cc02a69650e0f716b74 Mon Sep 17 00:00:00 2001 From: kakkokari-gtyih <67428053+kakkokari-gtyih@users.noreply.github.com> Date: Sat, 29 Jun 2024 21:10:03 +0900 Subject: [PATCH] =?UTF-8?q?=E3=83=80=E3=82=A4=E3=82=A2=E3=83=AD=E3=82=B0?= =?UTF-8?q?=E5=86=85=E3=81=A7=E3=82=B3=E3=83=BC=E3=83=89=E3=82=92=E8=A1=A8?= =?UTF-8?q?=E7=A4=BA=E3=81=99=E3=82=8B=E3=82=88=E3=81=86=E3=81=AB?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- locales/index.d.ts | 16 +- locales/ja-JP.yml | 5 +- packages/frontend/src/components/MkCode.vue | 13 +- .../src/components/MkEmbedCodeGenDialog.vue | 217 +++++++++++++----- 4 files changed, 181 insertions(+), 70 deletions(-) diff --git a/locales/index.d.ts b/locales/index.d.ts index 077a0e271e..36818b0065 100644 --- a/locales/index.d.ts +++ b/locales/index.d.ts @@ -10103,6 +10103,10 @@ export interface Locale extends ILocale { * 高さの最大値制限が無効（0）になっています。これが意図した変更ではない場合は、高さの最大値を何らかの値に設定してください。 */ "maxHeightWarn": string; + /** + * プレビュー画面で表示可能な範囲を超えたため、実際に埋め込んだ際とは表示が異なります。 + */ + "previewIsNotActual": string; /** * 角丸にする */ @@ -10116,9 +10120,17 @@ export interface Locale extends ILocale { */ "applyToPreview": string; /** - * プレビュー画面で表示可能な範囲を超えたため、実際に埋め込んだ際とは表示が異なります。 + * 埋め込みコードを作成 */ - "previewIsNotActual": string; + "generateCode": string; + /** + * コードが生成されました + */ + "codeGenerated": string; + /** + * 生成されたコードをウェブサイトに貼り付けてご利用ください。 + */ + "codeGeneratedDescription": string; }; } declare const locales: { diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml index 07f8ac4bac..a909a3df1a 100644 --- a/locales/ja-JP.yml +++ b/locales/ja-JP.yml @@ -2695,7 +2695,10 @@ _embedCodeGen: maxHeight: "高さの最大値" maxHeightDescription: "0で最大値の設定が無効になります。ウィジェットが縦に伸び続けるのを防ぐために、何らかの値に指定してください。" maxHeightWarn: "高さの最大値制限が無効（0）になっています。これが意図した変更ではない場合は、高さの最大値を何らかの値に設定してください。" + previewIsNotActual: "プレビュー画面で表示可能な範囲を超えたため、実際に埋め込んだ際とは表示が異なります。" rounded: "角丸にする" border: "外枠に枠線をつける" applyToPreview: "プレビューに反映" - previewIsNotActual: "プレビュー画面で表示可能な範囲を超えたため、実際に埋め込んだ際とは表示が異なります。" + generateCode: "埋め込みコードを作成" + codeGenerated: "コードが生成されました" + codeGeneratedDescription: "生成されたコードをウェブサイトに貼り付けてご利用ください。" diff --git a/packages/frontend/src/components/MkCode.vue b/packages/frontend/src/components/MkCode.vue index a3c80e743b..7216daffe3 100644 --- a/packages/frontend/src/components/MkCode.vue +++ b/packages/frontend/src/components/MkCode.vue @@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only @@ -75,6 +97,8 @@ import MkInput from '@/components/MkInput.vue'; import MkSelect from '@/components/MkSelect.vue'; import MkSwitch from '@/components/MkSwitch.vue'; import MkButton from '@/components/MkButton.vue'; + +import MkCode from '@/components/MkCode.vue'; import MkInfo from '@/components/MkInfo.vue'; import * as os from '@/os.js'; @@ -86,19 +110,16 @@ import { embedRouteWithScrollbar } from '@/scripts/embed-page.js'; import type { EmbeddableEntity, EmbedParams } from '@/scripts/embed-page.js'; const emit = defineEmits<{ - (ev: 'ok', url: string, code: string): void; + (ev: 'ok'): void; (ev: 'cancel'): void; (ev: 'closed'): void; }>(); -const props = withDefaults(defineProps<{ +const props = defineProps<{ entity: EmbeddableEntity; idOrUsername: string; params?: EmbedParams; - doCopy?: boolean; -}>(), { - doCopy: true, -}); +}>(); //#region Modalの制御 const dialogEl = shallowRef>(); @@ -108,17 +129,11 @@ function cancel() { dialogEl.value?.close(); } -function ok() { - const _idOrUsername = props.entity === 'user-timeline' ? '@' + props.idOrUsername : props.idOrUsername; - const generatedUrl = `${url}/embed/${props.entity}/${_idOrUsername}?${new URLSearchParams(normalizeEmbedParams(paramsForUrl.value)).toString()}`; - const generatedCode = getEmbedCode(`/embed/${props.entity}/${_idOrUsername}`, paramsForUrl.value); - if (props.doCopy) { - copy(generatedCode); - os.success(); - } - emit('ok', generatedUrl, generatedCode); +function close() { dialogEl.value?.close(); } + +const phase = ref<'input' | 'result'>('input'); //#endregion //#region 埋め込みURL生成・カスタマイズ @@ -143,7 +158,7 @@ const embedPreviewUrl = computed(() => { const maxHeight = parseInt(paramClass.get('maxHeight')!); paramClass.set('maxHeight', maxHeight === 0 ? '500' : Math.min(maxHeight, 700).toString()); // プレビューであまりにも縮小されると見づらいため、700pxまでに制限 } - return `${url}/embed/${props.entity}/${_idOrUsername}${paramClass.toString() ? '?' + paramClass.toString() : ''}`; + return `http://localhost:3000/embed/${props.entity}/${_idOrUsername}${paramClass.toString() ? '?' + paramClass.toString() : ''}`; }); const isEmbedWithScrollbar = computed(() => embedRouteWithScrollbar.includes(props.entity)); @@ -174,6 +189,18 @@ function applyToPreview() { } }); } + +const result = ref(''); +function generate() { + const _idOrUsername = props.entity === 'user-timeline' ? '@' + props.idOrUsername : props.idOrUsername; + result.value = getEmbedCode(`/embed/${props.entity}/${_idOrUsername}`, paramsForUrl.value); + phase.value = 'result'; +} + +function doCopy() { + copy(result.value); + os.success(); +} //#endregion //#region プレビューのリサイズ @@ -235,25 +262,48 @@ onMounted(() => { resizeObserver.observe(resizerRootEl.value); }); -onDeactivated(() => { +function reset() { window.removeEventListener('message', windowEventHandler); resizeObserver.disconnect(); + + // プレビューのリセット + iframeHeight.value = 0; + iframeScale.value = 1; + iframeLoading.value = true; + result.value = ''; + phase.value = 'input'; +} + +onDeactivated(() => { + reset(); }); onUnmounted(() => { - window.removeEventListener('message', windowEventHandler); - resizeObserver.disconnect(); + reset(); }); //#endregion