Kilian/khofmann-pdf-reader
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Bookmarks

Browse Source
This commit is contained in:
Kilian Hofmann
2023-11-26 09:39:34 +01:00
parent 34780db289
commit 226eb242e3
18 changed files with 441 additions and 200 deletions
Download Patch File Download Diff File Expand all files Collapse all files
PackageSources/js-bundle/index.d.ts
Vendored
-5
View File
@@ -1,6 +1 @@
/// <reference types="@microsoft/msfs-types/js/common.d.ts" />
/// <reference types="@microsoft/msfs-types/pages/vcockpit/instruments/shared/baseinstrument.d.ts" />
/// <reference types="@microsoft/msfs-types/js/datastorage.d.ts" />
/// <reference types="@microsoft/msfs-types/js/buttons.d.ts" />
/// <reference types="@microsoft/msfs-types/js/services/toolbarpanels.d.ts" />
/// <reference types="@microsoft/msfs-types/js/simvar.d.ts" />
PackageSources/js-bundle/src/constants.ts
+1
View File
@@ -2,4 +2,5 @@ export const COMMANDS = 'KHOFMANN_PDF_READER_COMMANDS';
export const DATA = 'KHOFMANN_PDF_READER_DATA';
export const LIST = 'LIST';
export const LOAD = 'LOAD';
export const SAVE = 'SAVE';
export const MAX_LIST = 10;
PackageSources/js-bundle/src/contexts/DataContext.tsx
+92 -11
View File
@@ -1,12 +1,26 @@
import { FC, PropsWithChildren, createContext, useCallback, useContext, useEffect, useState } from 'react';
import { COMMANDS, DATA, LIST, LOAD } from '../constants';
import { COMMANDS, DATA, LIST, LOAD, SAVE } from '../constants';
interface IDataContext {
list?: IList[];
file?: string;
bookMarks?: IBookMark[];
isLoading?: boolean;
isSaving?: boolean;
refresh?: (path?: string) => void;
load?: (path: string) => void;
addBookMark?: (path: string, bookMarks: IBookMark) => void;
removeBookMark?: (path: string, index: number) => void;
}
interface IData {
file: string;
bookMarks?: IBookMark[];
}
interface IJSONResponse {
id: typeof LIST | typeof LOAD | typeof SAVE;
data: IList[] | IData;
}
export interface IList {
@@ -17,14 +31,43 @@ export interface IList {
pages?: number;
}
export interface IBookMark {
page: number;
title: string;
}
export const DataContext = createContext<IDataContext>({});
export const useData = () => {
const { list, file, isLoading, refresh, load } = useContext(DataContext);
const { list, file, bookMarks, isLoading, isSaving, refresh, load, addBookMark, removeBookMark } =
useContext(DataContext);
if (list !== undefined && file !== undefined && isLoading !== undefined && refresh && load)
return { list, file, isLoading, refresh, load };
else throw new Error("Couldn't find context. Is your component inside a DataProvider?");
if (
list !== undefined &&
file !== undefined &&
bookMarks !== undefined &&
isLoading !== undefined &&
isSaving !== undefined &&
refresh &&
load &&
addBookMark &&
removeBookMark
)
return { list, file, bookMarks, isLoading, isSaving, refresh, load, addBookMark, removeBookMark };
else
throw new Error(
`Couldn't find context. Is your component inside a DataProvider? ${JSON.stringify({
list: list !== undefined,
file: file !== undefined,
bookMarks: bookMarks !== undefined,
isLoading: isLoading !== undefined,
isSaving: isSaving !== undefined,
refresh: refresh !== undefined,
load: load !== undefined,
addBookMark: addBookMark !== undefined,
removeBookMark: removeBookMark !== undefined,
})}`
);
};
interface IDataContextProps {
@@ -34,7 +77,9 @@ interface IDataContextProps {
const DataContextProvider: FC<PropsWithChildren<IDataContextProps>> = ({ dataListener, children }) => {
const [list, setList] = useState<IList[]>([]);
const [file, setFile] = useState('');
const [bookMarks, setBookMarks] = useState<IBookMark[]>([]);
const [isLoading, setIsLoading] = useState(true);
const [isSaving, setIsSaving] = useState(false);
useEffect(() => {
dataListener.on(DATA, dataCallback);
@@ -46,17 +91,24 @@ const DataContextProvider: FC<PropsWithChildren<IDataContextProps>> = ({ dataLis
const dataCallback = useCallback((args: string) => {
try {
const json = JSON.parse(args);
const json: IJSONResponse = JSON.parse(args);
console.log(json);
switch (json.id) {
case LIST:
setList((json.data as IList[]).sort((a, b) => a.name.localeCompare(b.name)));
window.dispatchEvent(new Event('resize'));
setList((json.data as IList[]).sort((a, b) => a.name.localeCompare(b.name)) ?? []);
break;
case LOAD:
setFile(json.data);
window.dispatchEvent(new Event('resize'));
const d = json.data as IData;
setFile(d.file);
if (d.bookMarks) {
setBookMarks(d.bookMarks);
}
break;
case SAVE:
setIsSaving(false);
break;
}
window.dispatchEvent(new Event('resize'));
} catch (e) {
console.warn(e);
}
@@ -73,7 +125,36 @@ const DataContextProvider: FC<PropsWithChildren<IDataContextProps>> = ({ dataLis
dataListener.call('COMM_BUS_WASM_CALLBACK', COMMANDS, JSON.stringify({ cmd: LOAD, file: path }));
};
return <DataContext.Provider value={{ list, file, isLoading, refresh, load }}>{children}</DataContext.Provider>;
const save = (path: string, bookMarks: IBookMark[]) => {
setIsSaving(true);
dataListener.call('COMM_BUS_WASM_CALLBACK', COMMANDS, JSON.stringify({ cmd: SAVE, path, bookMarks: bookMarks }));
};
const addBookMark = (path: string, bookMark: IBookMark) => {
setBookMarks((prev) => {
const _new = [...prev, bookMark];
_new.sort((a, b) => a.page - b.page);
save(path, _new);
return _new;
});
};
const removeBookMark = (path: string, index: number) => {
setBookMarks((prev) => {
prev.splice(index, 1);
prev.sort((a, b) => a.page - b.page);
save(path, prev);
return [...prev];
});
};
return (
<DataContext.Provider
value={{ list, file, bookMarks, isLoading, isSaving, refresh, load, addBookMark, removeBookMark }}
>
{children}
</DataContext.Provider>
);
};
export default DataContextProvider;
PackageSources/js-bundle/src/contexts/ThemeContext.tsx
+6
View File
@@ -25,7 +25,13 @@ const ThemeProvider: FC<PropsWithChildren> = ({ children }) => {
main: getComputedStyle(document.documentElement).getPropertyValue('--enabledBackGroundColor').trim(),
contrastText: '#fff',
},
secondary: {
main: getComputedStyle(document.documentElement)
.getPropertyValue('--backgroundColorContrastedPanel')
.trim(),
},
},
screenHeight: Number(getComputedStyle(document.documentElement).getPropertyValue('--screenHeight').trim()),
}),
[]
);
PackageSources/js-bundle/src/pages/ListPage/ListPage.tsx
+3 -1
View File
@@ -170,7 +170,9 @@ const ListPage: FC = () => {
)}
<Grid item xs={11} padding={0}>
<Box display="flex" alignItems="center" height="100%">
<Typography variant="h5">{entry.name}</Typography>
<Typography variant="h5" overflow="ellipsis">
{entry.name}
</Typography>
</Box>
</Grid>
{entry.type === 'directory' && (
PackageSources/js-bundle/src/pages/PDFPage/PDFPage.tsx
+93 -5
View File
@@ -1,7 +1,10 @@
import BackIcon from '@mui/icons-material/ArrowBack';
import BookmarkIcon from '@mui/icons-material/Bookmark';
import BookmarkBorderIcon from '@mui/icons-material/BookmarkBorder';
import DeleteIcon from '@mui/icons-material/Delete';
import NavigateBeforeIcon from '@mui/icons-material/NavigateBefore';
import NavigateNextIcon from '@mui/icons-material/NavigateNext';
import { AppBar, Backdrop, Box, Button, TextField, Toolbar, Typography } from '@mui/material';
import { AppBar, Backdrop, Box, Button, Grid, Stack, TextField, Toolbar, Typography } from '@mui/material';
import { FC, useEffect, useRef, useState } from 'react';
import { v4 } from 'uuid';
import { IList, useData } from '../../contexts/DataContext';
@@ -10,17 +13,22 @@ import { useRouter } from '../../routers/Router';
const PDFPage: FC = () => {
const { goBack, getProps } = useRouter();
const { path, entry } = getProps() as { path: string; entry: IList };
const { file, isLoading, load } = useData();
const { file, bookMarks, isLoading, isSaving, load, addBookMark, removeBookMark } = useData();
const guid = useRef(v4());
const guid1 = useRef(v4());
const guid2 = useRef(v4());
const [currentPage, setCurrentPage] = useState(1);
const [pageJump, setPageJump] = useState('1');
const [drawerOpen, setDrawerOpen] = useState(false);
const [markName, setMarkName] = useState('');
useEffect(() => {
load(`${path}/${entry.name}/${currentPage}.bjpg`);
}, [currentPage]);
// () =>
return (
<Box>
<AppBar position="sticky">
@@ -41,8 +49,8 @@ const PDFPage: FC = () => {
e.stopPropagation();
setPageJump(e.target.value);
}}
onFocus={() => Coherent.trigger('FOCUS_INPUT_FIELD', guid, '', '', '', false)}
onBlur={() => Coherent.trigger('UNFOCUS_INPUT_FIELD', guid)}
onFocus={() => Coherent.trigger('FOCUS_INPUT_FIELD', guid1, '', '', '', false)}
onBlur={() => Coherent.trigger('UNFOCUS_INPUT_FIELD', guid1)}
/>
<Button
onClick={() => {
@@ -70,6 +78,13 @@ const PDFPage: FC = () => {
<Button onClick={() => setCurrentPage((prev) => (prev < (entry.pages ?? 0) ? prev + 1 : prev))}>
<NavigateNextIcon htmlColor="white" fontSize="large" />
</Button>
<Button onClick={() => setDrawerOpen(true)}>
{bookMarks.findIndex((mark) => mark.page === currentPage) !== -1 ? (
<BookmarkIcon htmlColor="white" fontSize="large" />
) : (
<BookmarkBorderIcon htmlColor="white" fontSize="large" />
)}
</Button>
</Toolbar>
</AppBar>
{isLoading ? (
@@ -81,6 +96,79 @@ const PDFPage: FC = () => {
<img src={`data:image/jpg;base64,${file}`} width="100%" />
</Box>
)}
{drawerOpen && (
<Backdrop
sx={{ color: '#fff', zIndex: (theme) => theme.zIndex.drawer + 1 }}
open
onClick={() => setDrawerOpen(false)}
>
<Box width="33%" position="absolute" right={0} top={0} bottom={0} onClick={(e) => e.stopPropagation()}>
<AppBar position="sticky" sx={{ marginBottom: '44px' }}>
<Toolbar>
<TextField
variant="filled"
value={markName}
sx={{ input: { color: '#fff' }, flexGrow: 1 }}
onChange={(e) => {
e.stopPropagation();
setMarkName(e.target.value);
}}
onFocus={() => Coherent.trigger('FOCUS_INPUT_FIELD', guid2, '', '', '', false)}
onBlur={() => Coherent.trigger('UNFOCUS_INPUT_FIELD', guid2)}
/>
<Button
disabled={isSaving}
onClick={() => {
if (markName !== '') {
addBookMark(`${path}/${entry.name}`, { page: currentPage, title: markName });
setMarkName('');
}
}}
>
<Typography variant="h5" color="#fff">
Add
</Typography>
</Button>
</Toolbar>
</AppBar>
<virtual-scroll
direction="y"
style={{ height: 'calc(100% - 110px)', backgroundColor: 'var(--backgroundColorContrastedPanel)' }}
>
<Stack spacing={2}>
{bookMarks.map((mark, index) => (
<Grid
key={index}
bgcolor="primary.main"
onClick={() => setCurrentPage(mark.page)}
container
padding={1}
height={73}
>
<Grid item xs={9} padding={0}>
<Box display="flex" alignItems="center" height="100%">
<Typography variant="h5" overflow="ellipsis">
{mark.title}
</Typography>
</Box>
</Grid>
<Grid item xs={3} padding={0} display="flex" alignItems="center">
<Button
onClick={(e) => {
e.stopPropagation();
removeBookMark(`${path}/${entry.name}`, index);
}}
>
<DeleteIcon htmlColor="white" fontSize="large" />
</Button>
</Grid>
</Grid>
))}
</Stack>
</virtual-scroll>
</Box>
</Backdrop>
)}
</Box>
);
};
PackageSources/js-bundle/src/types/theme.d.ts
Vendored
+10
View File
@@ -0,0 +1,10 @@
import '@mui/material';
declare module '@mui/material/styles' {
interface Theme {
screenHeight: number;
}
interface ThemeOptions {
screenHeight: number;
}
}
PackageSources/js-bundle/src/types/virtual-scroll.d.ts
Vendored
+2 -2
View File
@@ -1,11 +1,11 @@
import { DOMAttributes, ReactNode } from 'react';
import { CSSProperties, DOMAttributes, ReactNode } from 'react';
type CustomElement<T> = Partial<T & DOMAttributes<T> & { children: ReactNode }>;
declare global {
namespace JSX {
interface IntrinsicElements {
['virtual-scroll']: CustomElement<{ class?: string; direction: 'x' | 'y' }>;
['virtual-scroll']: CustomElement<{ class?: string; direction: 'x' | 'y'; style?: CSSProperties }>;
}
}
}