Mizah/mizzkey
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

embedのURLパラメータの初期化を共通化

Browse source
This commit is contained in:
kakkokari-gtyih 2024-06-29 17:47:38 +09:00
parent 237605d6b8
commit 1ed6ed6ef0
8 changed files with 113 additions and 78 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
packages/frontend/src/components/MkEmbedCodeGenDialog.vue
View file

@ -81,8 +81,9 @@ import * as os from '@/os.js';
import { i18n } from '@/i18n.js';
import { url } from '@/config.js';
import copy from '@/scripts/copy-to-clipboard.js';
import { normalizeEmbedParams, embedRouteWithScrollbar, getEmbedCode } from '@/scripts/get-embed-code.js';
import type { EmbeddableEntity, EmbedParams } from '@/scripts/get-embed-code.js';
import { normalizeEmbedParams, getEmbedCode } from '@/scripts/get-embed-code.js';
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;

14
packages/frontend/src/pages/embed/clip.vue
View file

@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<template>
<div>
<MkLoading v-if="loading"/>
<XEmbedTimelineUI v-else-if="clip" :showHeader="normalizedShowHeader">
<XEmbedTimelineUI v-else-if="clip" :showHeader="embedParams.header">
<template #header>
<div :class="$style.clipHeader">
<div :class="$style.headerClipIconRoot">
@ -28,7 +28,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkNotes
ref="notesEl"
:pagination="pagination"
:disableAutoLoad="!normalizedEnableAutoLoad"
:disableAutoLoad="embedParams.autoload"
:noGap="true"
:ad="false"
/>
@ -52,11 +52,11 @@ import { url, instanceName } from '@/config.js';
import { scrollToTop } from '@/scripts/scroll.js';
import { isLink } from '@/scripts/is-link.js';
import { useRouter } from '@/router/supplier.js';
import { defaultEmbedParams } from '@/scripts/embed-page.js';
import type { ParsedEmbedParams } from '@/scripts/embed-page.js';
const props = defineProps<{
clipId: string;
showHeader?: string;
enableAutoLoad?: string;
}>();
function redirectIfNotEmbedPage() {
@ -72,11 +72,7 @@ redirectIfNotEmbedPage();
onActivated(redirectIfNotEmbedPage);
// デフォルト: true
const normalizedShowHeader = computed(() => props.showHeader !== 'false');
// デフォルト: false
const normalizedEnableAutoLoad = computed(() => props.enableAutoLoad === 'true');
const embedParams = inject<ParsedEmbedParams>('embedParams', defaultEmbedParams);
const clip = ref<Misskey.entities.Clip | null>(null);
const pagination = computed(() => ({

12
packages/frontend/src/pages/embed/tag.vue
View file

@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<template>
<div>
<XEmbedTimelineUI v-if="tag" :showHeader="normalizedShowHeader">
<XEmbedTimelineUI v-if="tag" :showHeader="embedParams.header">
<template #header>
<div :class="$style.clipHeader">
<div :class="$style.headerClipIconRoot">
@ -27,7 +27,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkNotes
ref="notesEl"
:pagination="pagination"
:disableAutoLoad="!normalizedEnableAutoLoad"
:disableAutoLoad="embedParams.autoload"
:noGap="true"
:ad="false"
/>
@ -49,6 +49,8 @@ import { url, instanceName } from '@/config.js';
import { scrollToTop } from '@/scripts/scroll.js';
import { isLink } from '@/scripts/is-link.js';
import { useRouter } from '@/router/supplier.js';
import { defaultEmbedParams } from '@/scripts/embed-page.js';
import type { ParsedEmbedParams } from '@/scripts/embed-page.js';
const props = defineProps<{
tag: string;
@ -69,11 +71,7 @@ redirectIfNotEmbedPage();
onActivated(redirectIfNotEmbedPage);
// デフォルト: true
const normalizedShowHeader = computed(() => props.showHeader !== 'false');
// デフォルト: false
const normalizedEnableAutoLoad = computed(() => props.enableAutoLoad === 'true');
const embedParams = inject<ParsedEmbedParams>('embedParams', defaultEmbedParams);
const pagination = computed(() => ({
endpoint: 'notes/search-by-tag',

12
packages/frontend/src/pages/embed/user-timeline.vue
View file

@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<template>
<div>
<MkLoading v-if="loading"/>
<XEmbedTimelineUI v-else-if="user" :showHeader="normalizedShowHeader">
<XEmbedTimelineUI v-else-if="user" :showHeader="embedParams.header">
<template #header>
<div :class="$style.userHeader">
<a :href="`/@${user.username}`" target="_blank" rel="noopener noreferrer" :class="$style.avatarLink">
@ -34,7 +34,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkNotes
ref="notesEl"
:pagination="pagination"
:disableAutoLoad="!normalizedEnableAutoLoad"
:disableAutoLoad="embedParams.autoload"
:noGap="true"
:ad="false"
/>
@ -58,6 +58,8 @@ import { url, instanceName } from '@/config.js';
import { scrollToTop } from '@/scripts/scroll.js';
import { isLink } from '@/scripts/is-link.js';
import { useRouter } from '@/router/supplier.js';
import { defaultEmbedParams } from '@/scripts/embed-page.js';
import type { ParsedEmbedParams } from '@/scripts/embed-page.js';
const props = defineProps<{
username: string;
@ -78,11 +80,7 @@ redirectIfNotEmbedPage();
onActivated(redirectIfNotEmbedPage);
// デフォルト: true
const normalizedShowHeader = computed(() => props.showHeader !== 'false');
// デフォルト: false
const normalizedEnableAutoLoad = computed(() => props.enableAutoLoad === 'true');
const embedParams = inject<ParsedEmbedParams>('embedParams', defaultEmbedParams);
const user = ref<Misskey.entities.UserLite | null>(null);
const pagination = computed(() => ({

12
packages/frontend/src/router/definition.ts
View file

@ -569,24 +569,12 @@ const routes: RouteDef[] = [{
}, {
path: '/embed/user-timeline/@:username',
component: page(() => import('@/pages/embed/user-timeline.vue')),
query: {
header: 'showHeader',
autoload: 'enableAutoLoad',
}
}, {
path: '/embed/clips/:clipId',
component: page(() => import('@/pages/embed/clip.vue')),
query: {
header: 'showHeader',
autoload: 'enableAutoLoad',
}
}, {
path: '/embed/tags/:tag',
component: page(() => import('@/pages/embed/tag.vue')),
query: {
header: 'showHeader',
autoload: 'enableAutoLoad',
},
}, {
path: '/timeline',
component: page(() => import('@/pages/timeline.vue')),

79
packages/frontend/src/scripts/embed-page.ts
View file

@ -6,6 +6,85 @@ import { miLocalStorage } from "@/local-storage.js";
import type { Keys } from "@/local-storage.js";
import { embedPage } from "@/config.js";
//#region Embed関連の定義
/** 埋め込みの対象となるエンティティ（/embed/xxx の xxx の部分と対応させる） */
const embeddableEntities = [
'notes',
'user-timeline',
'clips',
'tags',
] as const;
/** 埋め込みの対象となるエンティティ */
export type EmbeddableEntity = typeof embeddableEntities[number];
/** 内部でスクロールがあるページ */
export const embedRouteWithScrollbar: EmbeddableEntity[] = [
'clips',
'tags',
'user-timeline'
];
/** 埋め込みコードのパラメータ */
export type EmbedParams = {
maxHeight?: number;
colorMode?: 'light' | 'dark';
rounded?: boolean;
border?: boolean;
autoload?: boolean;
header?: boolean;
};
export type ParsedEmbedParams = Required<Omit<EmbedParams, 'maxHeight' | 'colorMode'>> & Pick<EmbedParams, 'maxHeight' | 'colorMode'>;
/** パラメータのデフォルトの値 */
export const defaultEmbedParams = {
maxHeight: undefined,
colorMode: undefined,
rounded: true,
border: true,
autoload: false,
header: true,
} as const;
/**
* パラメータを正規化する（埋め込みページ初期化用）
* @param searchParams URLSearchParamsもしくはクエリ文字列
* @returns 正規化されたパラメータ
*/
export function parseEmbedParams(searchParams: URLSearchParams | string): ParsedEmbedParams {
let _searchParams: URLSearchParams;
if (typeof searchParams === 'string') {
_searchParams = new URLSearchParams(searchParams);
} else {
_searchParams = searchParams;
}
const params: EmbedParams = {};
for (const key in defaultEmbedParams) {
const value = _searchParams.get(key);
if (value != null) {
if (value === 'true') {
params[key] = true;
} else if (value === 'false') {
params[key] = false;
} else if (!isNaN(Number(value))) {
params[key] = Number(value);
} else if (key === 'colorMode' && ['light', 'dark'].includes(value)) {
params[key] = value as 'light' | 'dark';
} else {
params[key] = value;
}
}
}
return {
...defaultEmbedParams,
...params,
};
}
/**
* EmbedページではlocalStorageを使用できないようにしているが、
* 動作に必要な値はsafeSessionStorage（miLocalStorage内のやつ）に移動する

43
packages/frontend/src/scripts/get-embed-code.ts
View file

@ -7,44 +7,15 @@ import { url } from '@/config.js';
import { MOBILE_THRESHOLD } from '@/const.js';
import * as os from '@/os.js';
import copy from '@/scripts/copy-to-clipboard.js';
import type { EmbedParams, EmbeddableEntity } from '@/scripts/embed-page.js';
import { defaultEmbedParams, embedRouteWithScrollbar } from '@/scripts/embed-page.js';
import MkEmbedCodeGenDialog from '@/components/MkEmbedCodeGenDialog.vue';
// 埋め込みの対象となるエンティティ（/embed/xxx の xxx の部分と対応させる）
const embeddableEntities = [
'notes',
'user-timeline',
'clips',
'tags',
] as const;
export type EmbeddableEntity = typeof embeddableEntities[number];
// 内部でスクロールがあるページ
export const embedRouteWithScrollbar: EmbeddableEntity[] = [
'clips',
'tags',
'user-timeline'
];
export type EmbedParams = {
maxHeight?: number;
colorMode?: 'light' | 'dark';
rounded?: boolean;
border?: boolean;
autoload?: boolean;
header?: boolean;
};
// パラメータのデフォルトの値
export const defaultEmbedParams: EmbedParams = {
maxHeight: undefined,
colorMode: undefined,
rounded: true,
border: true,
autoload: false,
header: true,
};
/**
* パラメータを正規化する（埋め込みコード作成用）
* @param params パラメータ
* @returns 正規化されたパラメータ
*/
export function normalizeEmbedParams(params: EmbedParams): Record<string, string> {
// paramsのvalueをすべてstringに変換。undefinedやnullはプロパティごと消す
const normalizedParams: Record<string, string> = {};

14
packages/frontend/src/ui/embed.vue
View file

@ -31,7 +31,8 @@ import XCommon from './_common_/common.vue';
import { PageMetadata, provideMetadataReceiver, provideReactiveMetadata } from '@/scripts/page-metadata.js';
import { instanceName } from '@/config.js';
import { mainRouter } from '@/router/main.js';
import { postMessageToParentWindow } from '@/scripts/post-message';
import { postMessageToParentWindow } from '@/scripts/post-message.js';
import { parseEmbedParams } from '@/scripts/embed-page.js';
const isRoot = computed(() => mainRouter.currentRoute.value.name === 'index');
@ -61,13 +62,16 @@ mainRouter.navHook = (path, flag): boolean => {
//#region Embed Provide
provide('EMBED_PAGE', true);
const params = new URLSearchParams(location.search);
const embedParams = parseEmbedParams(params);
provide('embedParams', embedParams);
//#endregion
//#region Embed Style
const params = new URLSearchParams(location.search);
const embedRounded = ref(params.get('rounded') !== 'false');
const embedNoBorder = ref(params.get('border') === 'false');
const maxHeight = ref(params.get('maxHeight') ? parseInt(params.get('maxHeight')!) : 0);
const embedRounded = ref(embedParams.rounded);
const embedNoBorder = ref(!embedParams.border);
const maxHeight = ref(embedParams.maxHeight ?? 0);
//#endregion
//#region Embed Resizer