Add fullscreen-view

Author: talepre

xp-archive/client/contentView/ContentView.tsx

@@ -12,7 +12,7 @@ import style from './ContentView.module.css';
 const getDisplayComponent = (viewVariant: ViewVariant, data?: ContentServiceResponse | null) => {
     if (!data) return null;
     const components: Record<ViewVariant, React.ReactElement> = {
-        html: <HtmlView html={data.html} />,
+        html: <HtmlView html={data.html} versionId={data.json._id} locale={data.json.language} />,
         filepreview: <FilePreviewWrapper content={data.json} />,
         pdf: <PdfExport versions={data.versions} />,
         json: <ContentJsonView json={data.json} />,

xp-archive/client/contentView/htmlView/HtmlView.module.css

@@ -9,3 +9,9 @@
     width: 100%;
     border: none;
 }
+
+.fullscreenButton {
+    position: absolute;
+    bottom: 0.25rem;
+    right: 1.5rem;
+}

xp-archive/client/contentView/htmlView/HtmlView.tsx

@@ -1,17 +1,37 @@
 import React from 'react';
 import style from './HtmlView.module.css';
+import { ExpandIcon } from '@navikt/aksel-icons';
+import { xpArchiveConfig } from '@common/shared/siteConfigs';
+import { Button } from '@navikt/ds-react';
 
 type Props = {
     html: string | undefined;
+    versionId: string;
+    locale: string;
 };
 
-export const HtmlView = ({ html }: Props) => {
+export const HtmlView = ({ html, versionId, locale }: Props) => {
     if (!html) {
         return <div>Ingenting å forhåndsvise</div>;
     }
+
+    const fullscreenPath = `${xpArchiveConfig.basePath}/html/${versionId}/${locale || ''}`;
+
     return (
         <div className={style.wrapper}>
             <iframe title={'HTML-visning'} srcDoc={html} className={style.iframe}></iframe>;
+            <Button
+                as={'a'}
+                href={fullscreenPath}
+                className={style.fullscreenButton}
+                icon={<ExpandIcon />}
+                onClick={(e) => {
+                    e.preventDefault();
+                    window.open(fullscreenPath, '_blank');
+                }}
+            >
+                {'Åpne i nytt vindu'}
+            </Button>
         </div>
     );
 };

xp-archive/server/src/routing/site.ts

@@ -31,6 +31,22 @@ export const setupSite = async (router: Router) => {
     const attachmentService = new AttachmentService();
     const pdfService = new PdfService({ browser, contentService });
 
+    router.get('/html/:versionKey/:locale?', async (req, res, next) => {
+        const { versionKey, locale } = req.params;
+
+        const version = await contentService.fetchContent(versionKey, locale || 'no');
+        if (!version) {
+            return next();
+        }
+
+        if (!version.html) {
+            return res
+                .status(406)
+                .send(`Content with version key ${versionKey} does not have html content`);
+        }
+
+        return res.send(version.html);
+    });
     router.get('/api/content', contentService.getContentHandler);
     router.get('/api/contentTree', contentTreeService.getContentTreeHandler);
     router.get('/api/contentIcon', contentIconService.getContentIconHandler);