gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-10-19 14:49:01 +02:00
Code Issues Actions 119 Packages Projects Releases Wiki Activity

feat(collection/presentation): button to enter full screen

Browse Source
This commit is contained in:
Elian Doran 2025-10-15 20:48:09 +03:00
parent 9f993363d7
commit 15fc98fca1
No known key found for this signature in database
3 changed files with 40 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
apps/client/src/widgets/collections/presentation/index.css Normal file
View File

@ -0,0 +1,5 @@
.presentation-button-bar {
position: absolute;
top: 1em;
right: 1em;
}

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

@ -5,6 +5,9 @@ import slideBaseStylesheet from "reveal.js/dist/reveal.css?raw";
import slideThemeStylesheet from "reveal.js/dist/theme/black.css?raw";
import { buildPresentationModel, PresentationModel, PresentationSlideModel } from "./model";
import ShadowDom from "../../react/ShadowDom";
import ActionButton from "../../react/ActionButton";
import "./index.css";
import { RefObject } from "preact";
const stylesheets = [
slideBaseStylesheet,
@ -13,16 +16,37 @@ const stylesheets = [
export default function PresentationView({ note }: ViewModeProps<{}>) {
const [ presentation, setPresentation ] = useState<PresentationModel>();
const containerRef = useRef<HTMLDivElement>(null);
useLayoutEffect(() => {
buildPresentationModel(note).then(setPresentation);
}, [ note ]);
return presentation && (
<ShadowDom className="presentation-container" style={{ width: "100%", height: "100%" }}>
{stylesheets.map(stylesheet => <style>{stylesheet}</style>)}
<Presentation presentation={presentation} />
</ShadowDom>
<>
<ShadowDom
className="presentation-container"
style={{ width: "100%", height: "100%" }}
containerRef={containerRef}
>
{stylesheets.map(stylesheet => <style>{stylesheet}</style>)}
<Presentation presentation={presentation} />
</ShadowDom>
<ButtonOverlay containerRef={containerRef} />
</>
)
}
function ButtonOverlay({ containerRef }: { containerRef: RefObject<HTMLDivElement> }) {
return (
<div className="presentation-button-bar">
<ActionButton
icon="bx bx-fullscreen" text="Start presentation"
onClick={() => {
containerRef.current?.requestFullscreen();
}}
/>
</div>
)
}

12
apps/client/src/widgets/react/ShadowDom.tsx
View File

@ -1,12 +1,14 @@
import { ComponentChildren, HTMLAttributes, JSX, render } from "preact";
import { useEffect, useRef, useState } from "preact/hooks";
import { ComponentChildren, HTMLAttributes, JSX, RefObject, render } from "preact";
import { useEffect, useState } from "preact/hooks";
import { useSyncedRef } from "./hooks";
interface ShadowDomProps extends HTMLAttributes<HTMLDivElement> {
interface ShadowDomProps extends Omit<HTMLAttributes<HTMLDivElement>, "ref"> {
children: ComponentChildren;
containerRef?: RefObject<HTMLDivElement>;
}
export default function ShadowDom({ children, ...containerProps }: ShadowDomProps) {
const containerRef = useRef<HTMLDivElement>(null);
export default function ShadowDom({ children, containerRef: externalContainerRef, ...containerProps }: ShadowDomProps) {
const containerRef = useSyncedRef<HTMLDivElement>(externalContainerRef, null);
const [ shadowRoot, setShadowRoot ] = useState<ShadowRoot | null>(null);
// Create the shadow root.