Funksjon for å vise html i fullskjerm

Author: anders-nom

src/components/main-section/content-view/ContentView.tsx

@@ -15,7 +15,7 @@ type Props = {
 };
 
 export const ContentView = ({ content }: Props) => {
-    const { html, xmlAsString } = content;
+    const { html, xmlAsString, versionKey } = content;
     const [viewState, setViewState] = useState<ViewState>(getDefaultViewState(content));
 
     useEffect(() => {
@@ -39,7 +39,7 @@ export const ContentView = ({ content }: Props) => {
                 <VersionSelector content={content} />
             </div>
             <XmlView xml={xmlAsString} hidden={viewState !== 'xml'} />
-            {html && <HtmlView html={html} hidden={viewState !== 'html'} />}
+            {html && <HtmlView html={html} versionKey={versionKey} hidden={viewState !== 'html'} />}
             {content.binaries && (
                 <FilesView binaries={content.binaries} hidden={viewState !== 'files'} />
             )}

src/components/main-section/content-view/html-view/HtmlView.module.css

@@ -1,9 +1,22 @@
-.html {
+.wrapper {
+    position: relative;
+    height: 100%;
+    width: 100%;
+}
+
+.htmlFrame {
     width: 100%;
     height: 100%;
     border: none;
 }
 
+.fullscreenButton {
+    position: absolute;
+    top: 0.25rem;
+    left: 0.25rem;
+    background-color: var(--a-white);
+}
+
 .hidden {
     display: none;
 }

src/components/main-section/content-view/html-view/HtmlView.tsx

@@ -1,23 +1,44 @@
 import React, { useRef } from 'react';
 import { classNames } from '../../../../utils/classNames';
+import { Button } from '@navikt/ds-react';
+import { useAppState } from '../../../../state/useAppState';
 
 import style from './HtmlView.module.css';
 
 type Props = {
     html: string;
+    versionKey: string;
     hidden: boolean;
 };
 
-export const HtmlView = ({ html, hidden }: Props) => {
+export const HtmlView = ({ html, versionKey, hidden }: Props) => {
+    const { appContext } = useAppState();
     const ref = useRef<HTMLIFrameElement>(null);
 
+    const fullscreenPath = `${appContext.basePath}/html/${versionKey}`;
+
     return (
-        <iframe
-            srcDoc={html}
-            className={classNames(style.html, hidden && style.hidden)}
-            ref={ref}
-            onLoad={(e) => disableLinksAndEventListeners(e.currentTarget)}
-        />
+        <div className={classNames(style.wrapper, hidden && style.hidden)}>
+            <Button
+                size={'small'}
+                variant={'tertiary'}
+                as={'a'}
+                href={fullscreenPath}
+                className={style.fullscreenButton}
+                onClick={(e) => {
+                    e.preventDefault();
+                    window.open(fullscreenPath, '_blank');
+                }}
+            >
+                {'Åpne i fullskjerm'}
+            </Button>
+            <iframe
+                src={html}
+                className={classNames(style.htmlFrame)}
+                ref={ref}
+                onLoad={(e) => disableLinksAndEventListeners(e.currentTarget)}
+            />
+        </div>
     );
 };