Skip to content

Commit f7c802f

Browse files
hymbzhymbz
committed
feat: ✨ PWA 识别标题
https://sleazyfork.org/scripts/374903/discussions/297125
1 parent 0e3083e commit f7c802f

4 files changed

Lines changed: 76 additions & 50 deletions

File tree

‎src/pwa/src/handleDrag.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { getFilesFromDataTransferItems } from '@placemarkio/flat-drop-files';
22

3+
import { setTitle } from './helper';
34
import classes from './index.module.css';
45
import { loadNewImglist, setState } from './store';
56

@@ -10,6 +11,7 @@ export const handleDrag = (ref: HTMLElement) => {
1011
setDragging(false);
1112
e.preventDefault();
1213
if (!e.dataTransfer) return;
14+
setTitle(e.dataTransfer.files);
1315
return loadNewImglist(
1416
await getFilesFromDataTransferItems(e.dataTransfer.items),
1517
);

‎src/pwa/src/helper.ts‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { testImgUrl } from 'helper';
2+
import { setState } from './store';
23

34
export const imgExtension = new Set([
45
'.png',
@@ -46,3 +47,13 @@ export const createObjectURL = async (obj: Blob | MediaSource) => {
4647
export const FileSystemToFile = (
4748
list: readonly FileSystemHandle[] | FileSystemHandle[],
4849
) => Promise.all(list.map((file) => (file as FileSystemFileHandle).getFile()));
50+
51+
/** 设置网页标题 */
52+
export const setTitle = (fileList: Iterable<File>) => {
53+
let title: string | undefined;
54+
for (const file of fileList) {
55+
if (title) return setState('title', '');
56+
title = file.name;
57+
}
58+
setState('title', title ?? '');
59+
};

‎src/pwa/src/index.tsx‎

Lines changed: 61 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -9,12 +9,12 @@ import type { MangaProps } from 'components/Manga';
99

1010
import { Manga } from 'components/Manga';
1111
import { toast, Toaster } from 'components/Toast';
12-
import { setInitLang, t } from 'helper';
12+
import { createEffectOn, setInitLang, t } from 'helper';
1313

1414
import { DownloadButton, loadUrl } from './DownloadButton';
1515
import { editButtonList } from './handleButtonList';
1616
import { handleDrag } from './handleDrag';
17-
import { FileSystemToFile, imgExtension } from './helper';
17+
import { FileSystemToFile, imgExtension, setTitle } from './helper';
1818
import classes from './index.module.css';
1919
import { getSaveOption } from './option';
2020
import { handleExit, loadNewImglist, setState, store } from './store';
@@ -38,13 +38,14 @@ const handleSelectFiles = async () => {
3838
description: 'Image',
3939
})),
4040
]);
41-
41+
setTitle(files);
4242
return loadNewImglist(files, t('pwa.alert.img_not_found_files'));
4343
};
4444

4545
/** 选择文件夹 */
4646
const handleSelectDir = async () => {
4747
const files = (await directoryOpen({ recursive: true })) as File[];
48+
setTitle(files);
4849
return loadNewImglist(files, t('pwa.alert.img_not_found_folder'));
4950
};
5051

@@ -63,56 +64,66 @@ const handleOptionChange: MangaProps['onOptionChange'] = (option) =>
6364

6465
(window as any).toast = toast;
6566

66-
export const Root: Component = () => (
67-
<div ref={(e) => handleDrag(e)} class={classes.root}>
68-
<div class={classes.main} data-drag={store.dragging}>
69-
<div class={classes.body}>
70-
{/* eslint-disable-next-line solid/no-innerhtml */}
71-
<div innerHTML={parseMd(t('pwa.tip_md')) as string} />
72-
73-
<span style={{ 'margin-top': '1em' }}>
74-
<button type="button" on:click={handleSelectFiles}>
75-
{t('pwa.button.select_files')}
76-
</button>
77-
<button type="button" on:click={handleSelectDir}>
78-
{t('pwa.button.select_folder')}
79-
</button>
80-
<DownloadButton />
81-
<Show when={store.imgList.length}>
82-
<button type="button" on:click={() => setState('show', true)}>
83-
{t('pwa.button.resume_read')}
84-
</button>
85-
</Show>
86-
</span>
87-
88-
<div
89-
class={classes.installTip}
90-
classList={{ [classes.hide]: Boolean(store.hiddenInstallTip) }}
91-
>
67+
export const Root: Component = () => {
68+
createEffectOn(
69+
() => store.title,
70+
(title) => {
71+
document.title = title ? `${title} - ComicRead PWA` : 'ComicRead PWA';
72+
},
73+
);
74+
75+
return (
76+
<div ref={(e) => handleDrag(e)} class={classes.root}>
77+
<div class={classes.main} data-drag={store.dragging}>
78+
<div class={classes.body}>
9279
{/* eslint-disable-next-line solid/no-innerhtml */}
93-
<div innerHTML={parseMd(t('pwa.install_md')) as string} />
94-
<div style={{ 'text-align': 'center' }}>
95-
<button type="button" on:click={pwaInstallHandler.install}>
96-
{t('pwa.button.install')}
80+
<div innerHTML={parseMd(t('pwa.tip_md')) as string} />
81+
82+
<span style={{ 'margin-top': '1em' }}>
83+
<button type="button" on:click={handleSelectFiles}>
84+
{t('pwa.button.select_files')}
85+
</button>
86+
<button type="button" on:click={handleSelectDir}>
87+
{t('pwa.button.select_folder')}
9788
</button>
98-
<a on:click={() => setState('hiddenInstallTip', 'TD')}>
99-
{t('pwa.button.no_more_prompt')}
100-
</a>
89+
<DownloadButton />
90+
<Show when={store.imgList.length}>
91+
<button type="button" on:click={() => setState('show', true)}>
92+
{t('pwa.button.resume_read')}
93+
</button>
94+
</Show>
95+
</span>
96+
97+
<div
98+
class={classes.installTip}
99+
classList={{ [classes.hide]: Boolean(store.hiddenInstallTip) }}
100+
>
101+
{/* eslint-disable-next-line solid/no-innerhtml */}
102+
<div innerHTML={parseMd(t('pwa.install_md')) as string} />
103+
<div style={{ 'text-align': 'center' }}>
104+
<button type="button" on:click={pwaInstallHandler.install}>
105+
{t('pwa.button.install')}
106+
</button>
107+
<a on:click={() => setState('hiddenInstallTip', 'TD')}>
108+
{t('pwa.button.no_more_prompt')}
109+
</a>
110+
</div>
101111
</div>
102112
</div>
103113
</div>
104-
</div>
105114

106-
<Manga
107-
class={classes.manga}
108-
show={store.show}
109-
imgList={store.imgList}
110-
option={{ alwaysLoadAllImg: true, ...getSaveOption() }}
111-
onOptionChange={handleOptionChange}
112-
editButtonList={editButtonList}
113-
onExit={handleExit}
114-
/>
115-
116-
<Toaster />
117-
</div>
118-
);
115+
<Manga
116+
class={classes.manga}
117+
show={store.show}
118+
title={store.title}
119+
imgList={store.imgList}
120+
option={{ alwaysLoadAllImg: true, ...getSaveOption() }}
121+
onOptionChange={handleOptionChange}
122+
editButtonList={editButtonList}
123+
onExit={handleExit}
124+
/>
125+
126+
<Toaster />
127+
</div>
128+
);
129+
};

‎src/pwa/src/store.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@ import { unzip } from './unzip';
66

77
export type ImgFile = { name: string; src: string };
88
export const { store, setState } = useStore({
9+
/** 传入单个文件/文件夹时的标题 */
10+
title: '',
911
/** 图片文件数据列表 */
1012
imgList: [] as ImgFile[],
1113
/** 是否显示漫画 */

0 commit comments

Comments
 (0)