497 lines
18 KiB
JavaScript
497 lines
18 KiB
JavaScript
import "./index.css";
|
|
|
|
import { StrictMode, useLayoutEffect, useRef, useState, useEffect, useMemo } from "react";
|
|
import { createRoot } from "react-dom/client";
|
|
import { useParams, Navigate, BrowserRouter, Link, Outlet, Route, Routes } from "react-router";
|
|
import { useShallow } from "zustand/shallow";
|
|
import { marked } from "marked";
|
|
import { apiInstance, resourcesInstance } from "./api.js";
|
|
import { useStore } from "./store.js";
|
|
import {
|
|
ArrowBackIcon,
|
|
ArrowForwardIcon,
|
|
MenuBookIcon,
|
|
MyLocationIcon,
|
|
TitleIcon,
|
|
WidthIcon,
|
|
EllipsisIcon,
|
|
CloseIcon,
|
|
JustifyTextIcon,
|
|
TextIncreaseIcon,
|
|
TextDecreaseIcon,
|
|
VRuleIcon,
|
|
} from "./icons/Icons";
|
|
|
|
createRoot(document.getElementById("root")).render(
|
|
<StrictMode>
|
|
<BrowserRouter>
|
|
<Routes>
|
|
<Route path="/" element={<Layout />}>
|
|
<Route index element={<TopicListView />} />
|
|
<Route path=":topicId" element={<FileReader />} />
|
|
</Route>
|
|
</Routes>
|
|
</BrowserRouter>
|
|
</StrictMode>,
|
|
);
|
|
|
|
function Layout() {
|
|
const params = useParams();
|
|
const topic = useStore((state) => params.topicId && state.topics.byId[params.topicId]);
|
|
const config = useStore((state) => state.config);
|
|
|
|
return (
|
|
<div className="max-w-7xl mx-auto h-full relative flex flex-col">
|
|
{config.displayTitle && (
|
|
<div className="w-full px-4 py-2 font-medium text-large text-white bg-blue-600">
|
|
<span>{topic ? `${topic.index + 1}: ${topic.title}` : "Конспект за Държавен Изпит"}</span>
|
|
</div>
|
|
)}
|
|
<Outlet />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const SUBJECTS = [
|
|
{ id: 0, name: "ВЪТРЕШНИ БОЛЕСТИ" },
|
|
{ id: 1, name: "ФАРМАКОЛОГИЯ" },
|
|
];
|
|
export function TopicListView() {
|
|
const itemRefs = useRef({});
|
|
const topics = useStore(
|
|
useShallow((state) => state.topics.allIds.map((id) => state.topics.byId[id])),
|
|
);
|
|
const selectedTopic = useStore((state) => state.selectedTopic);
|
|
const selectTopic = useStore((state) => state.selectTopic);
|
|
const selectedSubjectIndex = useStore((state) => state.subject);
|
|
const setSelectedSubjectIndex = useStore((state) => state.selectSubject);
|
|
const config = useStore((state) => state.config);
|
|
const changeConfig = useStore((state) => state.changeConfig);
|
|
|
|
const [isSelectingSubject, setIsSelectingSubject] = useState(false);
|
|
|
|
useLayoutEffect(() => {
|
|
if (selectedTopic && selectedTopic.id !== null) {
|
|
itemRefs.current?.[Math.max(selectedTopic.index - 3, 0)].scrollIntoView();
|
|
}
|
|
}, [selectedTopic]);
|
|
|
|
return (
|
|
<>
|
|
<div
|
|
className={`flex-1 overflow-y-scroll ${selectedTopic === null ? "pb-[92px]" : "pb-[156px]"}`}
|
|
>
|
|
{topics.map((topic, i) => (
|
|
<Link
|
|
key={topic.id}
|
|
ref={(node) => {
|
|
itemRefs.current[i] = node;
|
|
}}
|
|
to={`/${topic.id}`}
|
|
onClick={() => selectTopic(topic.id)}
|
|
className={`flex px-2 py-1 rounded-md cursor-pointer border-l-4 ${topic.id === selectedTopic?.id ? "bg-blue-100 border-blue-500" : "border-transparent hover:bg-gray-100"}`}
|
|
>
|
|
<div
|
|
className={`w-6 flex-shrink-0 flex font-medium justify-end ${topic.id === selectedTopic?.id ? "text-blue-600" : "text-blue-800"}`}
|
|
>
|
|
{i + 1}
|
|
</div>
|
|
<span
|
|
className={`ml-2 leading-5 ${topic.id === selectedTopic?.id ? "font-medium" : "font-normal"} ${config.wrapTopicTitles ? "truncate" : ""}`}
|
|
>
|
|
{topic.title}
|
|
</span>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
<div className="absolute bottom-0 sm:p-4 px-2 py-0 w-full flex flex-col">
|
|
<div className="ml-auto p-2 flex space-x-1 h-[60px]">
|
|
<button
|
|
className={`cursor-pointer p-2 rounded-full text-white border ${config.displayTitle ? "bg-blue-100 border-blue-400" : "bg-gray-100 border-gray-400"}`}
|
|
onClick={() => changeConfig({ displayTitle: !config.displayTitle })}
|
|
>
|
|
<TitleIcon className="fill-gray-600" />
|
|
</button>
|
|
|
|
<button
|
|
className={`cursor-pointer p-2 rounded-full text-white border ${config.wrapTopicTitles ? "bg-blue-100 border-blue-400" : "bg-gray-100 border-gray-400"}`}
|
|
onClick={() => changeConfig({ wrapTopicTitles: !config.wrapTopicTitles })}
|
|
>
|
|
<EllipsisIcon className="fill-gray-600" />
|
|
</button>
|
|
|
|
{selectedTopic !== null && (
|
|
<button
|
|
className="px-3 py-3 bg-teal-500 hover:bg-teal-300 cursor-pointer rounded-full flex items-center justify-center shadow-md transition-colors"
|
|
onClick={() => {
|
|
itemRefs.current?.[Math.max(selectedTopic.index - 3, 0)].scrollIntoView({
|
|
behavior: "smooth",
|
|
});
|
|
}}
|
|
>
|
|
<MyLocationIcon className="h-5 w-5" />
|
|
</button>
|
|
)}
|
|
<div className="relative flex ml-2">
|
|
<button
|
|
className={`${isSelectingSubject ? "invisible" : ""} flex-1 shadow-xl cursor-pointer px-2 py-1 rounded-md text-xs text-blue-800 font-medium whitespace-nowrap bg-blue-100/50 backdrop-blur hover:bg-blue-200/50 border border-blue-100`}
|
|
onClick={() => setIsSelectingSubject(true)}
|
|
>
|
|
{SUBJECTS[selectedSubjectIndex].name}
|
|
</button>
|
|
{isSelectingSubject && (
|
|
<>
|
|
<button
|
|
className={`absolute w-full h-full flex-1 flex justify-center items-center cursor-pointer rounded-md backdrop-blur bg-blue-100/40 hover:bg-blue-100/80`}
|
|
onClick={() => setIsSelectingSubject(false)}
|
|
>
|
|
<CloseIcon className="fill-gray-600" />
|
|
</button>
|
|
<div className="absolute bottom-full right-0 p-2 flex space-x-1">
|
|
{SUBJECTS.map((subject) => (
|
|
<button
|
|
key={subject.id}
|
|
className={`flex-1 shadow-xl cursor-pointer px-2 py-1 rounded-md text-xs whitespace-nowrap h-[44px] ${
|
|
selectedSubjectIndex === subject.id
|
|
? "bg-blue-100 text-blue-800 font-medium border border-blue-400"
|
|
: "bg-gray-100 hover:bg-gray-200 border border-gray-400"
|
|
}`}
|
|
onClick={() => {
|
|
setSelectedSubjectIndex(subject.id);
|
|
setIsSelectingSubject(false);
|
|
}}
|
|
>
|
|
{subject.name}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
{selectedTopic !== null && (
|
|
<Link
|
|
to={`/${selectedTopic.id}`}
|
|
className="w-full p-2 mb-2 bg-blue-600 hover:bg-blue-700 cursor-pointer truncate rounded-md text-sm text-white text-center shadow-md transition-colors"
|
|
>
|
|
<span>Продължи четенето:</span>
|
|
<br />
|
|
<span className="font-medium">
|
|
{selectedTopic.index + 1}. {selectedTopic.title}
|
|
</span>
|
|
</Link>
|
|
)}
|
|
</div>
|
|
</>
|
|
);
|
|
}
|
|
|
|
export function FileReader() {
|
|
const params = useParams();
|
|
const topicsById = useStore((state) => state.topics.byId);
|
|
const selectTopic = useStore((state) => state.selectTopic);
|
|
|
|
const topic = topicsById[params.topicId];
|
|
if (!topic) {
|
|
return <Navigate to="/" replace />;
|
|
}
|
|
|
|
selectTopic(topic.id);
|
|
|
|
return <Reader topic={topic} />;
|
|
}
|
|
|
|
export function Reader({ topic }) {
|
|
const config = useStore((state) => state.config);
|
|
const changeConfig = useStore((state) => state.changeConfig);
|
|
const selectedVersion = useStore((state) => state.topicVersions[topic.id] ?? 0);
|
|
const selectVersion = useStore((state) => state.selectTopicVersion);
|
|
const getTopicAtIndex = useStore((state) => state.getTopicAtIndex);
|
|
|
|
const prevTopic = getTopicAtIndex(topic.index - 1);
|
|
const nextTopic = getTopicAtIndex(topic.index + 1);
|
|
|
|
const [isSelectingVersion, setIsSelectingVersion] = useState(false);
|
|
|
|
return (
|
|
<>
|
|
<div className="flex-1">
|
|
<PDFViewer
|
|
file={topic.files[selectedVersion]}
|
|
compact={config.narrowMode}
|
|
justifyText={config.justifyText}
|
|
zoomFactor={config.contentZoomFactor}
|
|
/>
|
|
<div className="absolute bottom-10 flex justify-between px-4 py-2 w-full z-999">
|
|
<div className="flex w-full space-x-2">
|
|
<Link to="/" className="cursor-pointer p-2 rounded-full bg-blue-600 text-white mr-auto">
|
|
<MenuBookIcon className="fill-gray-100" />
|
|
</Link>
|
|
</div>
|
|
<div className="flex items-center">
|
|
<div className="text-sm text-gray-600 rounded bg-gray-300/30 backdrop-blur px-2">
|
|
{config.contentZoomLevel}%
|
|
</div>
|
|
|
|
<button
|
|
className={`cursor-pointer p-2 mx-1 rounded-full text-white bg-gray-100/30 backdrop-blur`}
|
|
onClick={() =>
|
|
changeConfig({ contentZoomLevel: Math.max(50, config.contentZoomLevel - 10) })
|
|
}
|
|
>
|
|
<TextDecreaseIcon className="fill-gray-600" />
|
|
</button>
|
|
|
|
<button
|
|
className={`cursor-pointer p-2 rounded-full text-white bg-gray-100/30 backdrop-blur`}
|
|
onClick={() => {
|
|
changeConfig({ contentZoomLevel: Math.min(150, config.contentZoomLevel + 10) });
|
|
}}
|
|
>
|
|
<TextIncreaseIcon className="fill-gray-600" />
|
|
</button>
|
|
|
|
<VRuleIcon className="fill-gray-300" />
|
|
|
|
<button
|
|
className={`cursor-pointer p-2 mr-1 rounded-full text-white border ${config.displayTitle ? "bg-blue-100 border-blue-400" : "bg-gray-100 border-gray-400"}`}
|
|
onClick={() => changeConfig({ displayTitle: !config.displayTitle })}
|
|
>
|
|
<TitleIcon className="fill-gray-600" />
|
|
</button>
|
|
|
|
<button
|
|
className={`cursor-pointer p-2 mr-1 rounded-full text-white border ${config.justifyText ? "bg-blue-100 border-blue-400" : "bg-gray-100 border-gray-400"}`}
|
|
onClick={() => changeConfig({ justifyText: !config.justifyText })}
|
|
>
|
|
<JustifyTextIcon className="fill-gray-600" />
|
|
</button>
|
|
|
|
{window.innerWidth > 576 && (
|
|
<button
|
|
className={`cursor-pointer p-2 mr-1 rounded-full text-white border ${config.narrowMode ? "bg-blue-100 border-blue-400" : "bg-gray-100 border-gray-400"}`}
|
|
onClick={() => changeConfig({ narrowMode: !config.narrowMode })}
|
|
>
|
|
<WidthIcon className="fill-gray-600" />
|
|
</button>
|
|
)}
|
|
{topic.files.length > 1 && (
|
|
<div className="relative flex ml-2">
|
|
<button
|
|
key={topic.files[selectedVersion].file}
|
|
className={`${isSelectingVersion ? "invisible" : ""} flex-1 shadow-xl cursor-pointer px-2 py-1 rounded-md text-xs text-blue-800 font-medium whitespace-nowrap bg-blue-100/50 backdrop-blur hover:bg-blue-200/50 border border-blue-100`}
|
|
onClick={() => setIsSelectingVersion(true)}
|
|
>
|
|
Версия {selectedVersion + 1}
|
|
</button>
|
|
{isSelectingVersion && (
|
|
<button
|
|
key={topic.files[selectedVersion].file}
|
|
className={`absolute w-full h-full flex-1 flex justify-center items-center cursor-pointer rounded-md hover:backdrop-blur hover:bg-blue-100/30`}
|
|
onClick={() => setIsSelectingVersion(false)}
|
|
>
|
|
<CloseIcon className="fill-gray-600" />
|
|
</button>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
{isSelectingVersion && (
|
|
<div className="absolute bottom-full right-0 px-4 flex space-x-1 h-10">
|
|
{topic.files.map((file, vIndex) => (
|
|
<button
|
|
key={file}
|
|
className={`flex-1 shadow-xl cursor-pointer px-2 py-1 rounded-md text-xs whitespace-nowrap ${
|
|
selectedVersion === vIndex
|
|
? "bg-blue-100 text-blue-800 font-medium border border-blue-400"
|
|
: "bg-gray-100 hover:bg-gray-200 border border-gray-400"
|
|
}`}
|
|
onClick={() => {
|
|
selectVersion(topic.id, vIndex);
|
|
setIsSelectingVersion(false);
|
|
}}
|
|
>
|
|
Версия {vIndex + 1}
|
|
</button>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
<div className="w-full flex flex-col space-y-2">
|
|
<div className="flex bg-gray-100 border-t border-blue-200 text-center">
|
|
{topic.isFirst ? (
|
|
<div className="flex-1 border-r border-blue-200" />
|
|
) : (
|
|
<Link
|
|
to={`/${prevTopic.id}`}
|
|
className="border-r border-blue-200 w-1/2 flex-1 px-4 py-2 hover:bg-blue-200 cursor-pointer flex align-center justify-start"
|
|
>
|
|
<ArrowBackIcon />
|
|
<span className="ml-2 truncate w-full ">
|
|
{prevTopic.index + 1}: {prevTopic.title}
|
|
</span>
|
|
</Link>
|
|
)}
|
|
{topic.isLast ? (
|
|
<div className="flex-1" />
|
|
) : (
|
|
<Link
|
|
to={`/${nextTopic.id}`}
|
|
className="flex-1 px-4 py-2 hover:bg-blue-200 w-1/2 cursor-pointer flex align-center justify-end"
|
|
>
|
|
<span className="mr-2 w-full truncate">
|
|
{nextTopic.index + 1}: {nextTopic.title}
|
|
</span>
|
|
<ArrowForwardIcon />
|
|
</Link>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|
|
|
|
export function PDFViewer({ file, compact, zoomFactor, justifyText }) {
|
|
const iframeRef = useRef(null);
|
|
const [content, setContent] = useState(null);
|
|
const htmlContent = useMemo(() => {
|
|
const fileContent = `
|
|
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/5.4.0/github-markdown-light.min.css">
|
|
<style>
|
|
body {
|
|
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
|
|
line-height: 1.5;
|
|
color: #333;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
margin: 0;
|
|
padding: 0 12px 40px;
|
|
${compact ? `max-width: calc(36rem / ${zoomFactor}); margin: 0 auto;` : ""}
|
|
}
|
|
${
|
|
justifyText
|
|
? `
|
|
p {
|
|
text-align: justify;
|
|
text-justify: inter-word;
|
|
}
|
|
pre, code {
|
|
font-family: 'SF Mono', Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
|
|
}
|
|
`
|
|
: ""
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
${content}
|
|
</body>
|
|
</html>
|
|
`;
|
|
return fileContent;
|
|
}, [content, compact, justifyText, zoomFactor]);
|
|
const [isLoading, setIsLoading] = useState(true);
|
|
const [error, setError] = useState(null);
|
|
|
|
const contentZoomLevel = useStore((state) => state.config.contentZoomLevel);
|
|
|
|
useEffect(() => {
|
|
if (iframeRef.current && iframeRef.current.contentDocument) {
|
|
iframeRef.current.contentDocument.body.style.zoom = `${contentZoomLevel}%`;
|
|
}
|
|
}, [contentZoomLevel]);
|
|
|
|
useEffect(() => {
|
|
const fetchFile = async () => {
|
|
try {
|
|
setIsLoading(true);
|
|
const mdPath = `/files_md/${file.filename}`;
|
|
const response = await fetch(mdPath);
|
|
|
|
if (!response.ok) {
|
|
throw new Error(`Failed to load file: ${response.status}`);
|
|
}
|
|
|
|
let fileContent = await response.text();
|
|
if (fileContent === "") {
|
|
fileContent = "**No Data!**";
|
|
}
|
|
fileContent = marked.parse(fileContent);
|
|
|
|
setContent(fileContent);
|
|
setError(null);
|
|
} catch (err) {
|
|
console.error("Error loading file:", err);
|
|
setError(err.message);
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
};
|
|
|
|
fetchFile();
|
|
}, [file]);
|
|
|
|
if (error) {
|
|
return <div className="text-red-500 p-4 border border-red-300 rounded">Error: {error}</div>;
|
|
}
|
|
|
|
if (isLoading) {
|
|
return <DelayedLoader />;
|
|
}
|
|
|
|
return (
|
|
<div className={`w-full h-full overflow-hidden`}>
|
|
<iframe
|
|
ref={iframeRef}
|
|
srcDoc={htmlContent}
|
|
title={`File: ${file}`}
|
|
className="w-full h-full border-0"
|
|
key={file}
|
|
allow="fullscreen"
|
|
onLoad={() => {
|
|
if (iframeRef.current?.contentDocument?.body) {
|
|
iframeRef.current.contentDocument.body.style.zoom = `${contentZoomLevel}%`;
|
|
}
|
|
}}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const DelayedLoader = ({
|
|
delayMs = 2000,
|
|
className = "p-4 flex justify-center items-center h-40",
|
|
text = "Loading...",
|
|
}) => {
|
|
const [showLoader, setShowLoader] = useState(false);
|
|
|
|
useEffect(() => {
|
|
// Set a timeout to show the loader after the specified delay
|
|
const timer = setTimeout(() => {
|
|
setShowLoader(true);
|
|
}, delayMs);
|
|
|
|
// Clear the timeout on unmount
|
|
return () => clearTimeout(timer);
|
|
}, []); // Empty dependency array - only run on mount
|
|
|
|
// Only render if the delay has passed
|
|
if (showLoader) {
|
|
return (
|
|
<div className={className}>
|
|
<div className="animate-pulse">{text}</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// Return null before delay threshold
|
|
return null;
|
|
};
|