かっこかり
837a8e15d8
* refactor(frontend): shouldCollapsedを共通化 * refactor(frontend): config.js, worker-multi-dispatch.js, intl-const.jsを共通化 * fix(frontend-shared): fix type error * refactor(frontend): is-link.jsと、同一の振る舞いをする記述を共通化 * fix * fix lint * lint fixes
88 lines
3.1 KiB
TypeScript
88 lines
3.1 KiB
TypeScript
/*
|
|
* SPDX-FileCopyrightText: syuilo and misskey-project
|
|
* SPDX-License-Identifier: AGPL-3.0-only
|
|
*/
|
|
import { defineAsyncComponent } from 'vue';
|
|
import { v4 as uuid } from 'uuid';
|
|
import type { EmbedParams, EmbeddableEntity } from '@@/js/embed-page.js';
|
|
import { url } from '@@/js/config.js';
|
|
import * as os from '@/os.js';
|
|
import { copyToClipboard } from '@/scripts/copy-to-clipboard.js';
|
|
import { defaultEmbedParams, embedRouteWithScrollbar } from '@@/js/embed-page.js';
|
|
|
|
const MOBILE_THRESHOLD = 500;
|
|
|
|
/**
|
|
* パラメータを正規化する（埋め込みコード作成用）
|
|
* @param params パラメータ
|
|
* @returns 正規化されたパラメータ
|
|
*/
|
|
export function normalizeEmbedParams(params: EmbedParams): Record<string, string> {
|
|
// paramsのvalueをすべてstringに変換。undefinedやnullはプロパティごと消す
|
|
const normalizedParams: Record<string, string> = {};
|
|
for (const key in params) {
|
|
// デフォルトの値と同じならparamsに含めない
|
|
if (params[key] == null || params[key] === defaultEmbedParams[key]) {
|
|
continue;
|
|
}
|
|
switch (typeof params[key]) {
|
|
case 'number':
|
|
normalizedParams[key] = params[key].toString();
|
|
break;
|
|
case 'boolean':
|
|
normalizedParams[key] = params[key] ? 'true' : 'false';
|
|
break;
|
|
default:
|
|
normalizedParams[key] = params[key];
|
|
break;
|
|
}
|
|
}
|
|
return normalizedParams;
|
|
}
|
|
|
|
/**
|
|
* 埋め込みコードを生成（iframe IDの発番もやる）
|
|
*/
|
|
export function getEmbedCode(path: string, params?: EmbedParams): string {
|
|
const iframeId = 'v1_' + uuid(); // 将来embed.jsのバージョンが上がったとき用にv1_を付けておく
|
|
|
|
let paramString = '';
|
|
if (params) {
|
|
const searchParams = new URLSearchParams(normalizeEmbedParams(params));
|
|
paramString = searchParams.toString() === '' ? '' : '?' + searchParams.toString();
|
|
}
|
|
|
|
const iframeCode = [
|
|
`<iframe src="${url + path + paramString}" data-misskey-embed-id="${iframeId}" loading="lazy" referrerpolicy="strict-origin-when-cross-origin" style="border: none; width: 100%; max-width: 500px; height: 300px; color-scheme: light dark;"></iframe>`,
|
|
`<script defer src="${url}/embed.js"></script>`,
|
|
];
|
|
return iframeCode.join('\n');
|
|
}
|
|
|
|
/**
|
|
* 埋め込みコードを生成してコピーする（カスタマイズ機能つき）
|
|
*
|
|
* カスタマイズ機能がいらない場合（事前にパラメータを指定する場合）は getEmbedCode を直接使ってください
|
|
*/
|
|
export function genEmbedCode(entity: EmbeddableEntity, id: string, params?: EmbedParams) {
|
|
const _params = { ...params };
|
|
|
|
if (embedRouteWithScrollbar.includes(entity) && _params.maxHeight == null) {
|
|
_params.maxHeight = 700;
|
|
}
|
|
|
|
// PCじゃない場合はコードカスタマイズ画面を出さずにそのままコピー
|
|
if (window.innerWidth < MOBILE_THRESHOLD) {
|
|
copyToClipboard(getEmbedCode(`/embed/${entity}/${id}`, _params));
|
|
os.success();
|
|
} else {
|
|
const { dispose } = os.popup(defineAsyncComponent(() => import('@/components/MkEmbedCodeGenDialog.vue')), {
|
|
entity,
|
|
id,
|
|
params: _params,
|
|
}, {
|
|
closed: () => dispose(),
|
|
});
|
|
}
|
|
}
|