Dockery/Trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-11-15 09:45:52 +01:00
Code Issues Packages Projects Releases Activity

feat(collection/presentation): get slidejs to render

Browse Source
This commit is contained in:
Elian Doran
2025-10-15 19:29:08 +03:00
parent 343f103126
commit c736fba1b7
2 changed files with 26 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
apps/client/src/widgets/collections/presentation/index.tsx
View File

@@ -1,6 +1,9 @@
import { ViewModeProps } from "../interface";
import FNote from "../../../entities/fnote";
import { useLayoutEffect, useState } from "preact/hooks";
import { useEffect, useLayoutEffect, useRef, useState } from "preact/hooks";
import Reveal from "reveal.js";
import "reveal.js/dist/reveal.css";
import "reveal.js/dist/theme/black.css";
export default function PresentationView({ note }: ViewModeProps<{}>) {
return note && (
@@ -10,13 +13,33 @@ export default function PresentationView({ note }: ViewModeProps<{}>) {
function Presentation({ note }: { note: FNote }) {
const [ slides, setSlides ] = useState<FNote[]>();
const containerRef = useRef<HTMLDivElement>(null);
const apiRef = useRef<Reveal.Api | null>(null);
useLayoutEffect(() => {
note.getChildNotes().then(setSlides);
}, [ note ]);
useEffect(() => {
if (apiRef.current || !containerRef.current) return;
apiRef.current = new Reveal(containerRef.current, {
transition: "slide"
});
apiRef.current.initialize().then(() => {
console.log("Slide.js initialized.");
});
return () => {
if (apiRef.current) {
apiRef.current.destroy();
apiRef.current = null;
}
}
}, []);
return (
<div className="reveal">
<div ref={containerRef} className="reveal">
<div className="slides">
{slides && slides?.map(slide => (
<Slide note={slide} />