Fix/prevent MazeMap iframe from unintuitive scroll behaviour

src/app/(frontpage)/LoggedOut.tsx

@@ -1,7 +1,7 @@
 import Section from './Section'
 import styles from './page.module.scss'
 import InfoBubbles from './InfoBubbles'
-import MazeMap from '@/components/MazeMap/MazeMap'
+import { MazeMapLophtet } from '@/components/MazeMap/MazeMap'
 import SocialIcons from '@/components/SocialIcons/SocialIcons'
 import SpecialCmsImage from '@/components/Cms/CmsImage/SpecialCmsImage'
 import YouTube from '@/components/YouTube/YouTube'
@@ -95,7 +95,7 @@ export default async function LoggedOutLandingPage() {
             </div>
             <div className={`${styles.part} ${styles.taktlause}`}>
                 <div className={styles.emptyPart} />
-                <MazeMap height={'80vh'}/>
+                <MazeMapLophtet height={'80vh'}/>
                 <div className={styles.emptyPart} />
             </div>
         </div>

src/app/_components/MazeMap/MazeMap.module.scss

@@ -1,15 +1,33 @@
 @use "@/styles/ohma";
 
-.MazeMap { 
+.MazeMap {
     display: flex;
     justify-content: center;
     filter: invert(1) hue-rotate(180deg);
 }
 
-.MazeMapIframe {
+.MazeMapWrapper {
+    position: relative;
     width: 80%;
     height: 100%;
+    border-radius: ohma.$rounding;
+    overflow: hidden;
+}
+
+.MazeMapIframe {
+    width: 100%;
+    height: 100%;
     border: none;
     border-radius: ohma.$rounding;
     background-color: white;
 }
+
+.MazeMapOverlay {
+    position: absolute;
+    inset: 0;
+    z-index: 1;
+    padding: 0;
+    border: none;
+    background: transparent;
+    cursor: pointer;
+}

src/app/_components/MazeMap/MazeMap.tsx

@@ -1,45 +1,77 @@
 'use client'
 
+import { useEffect, useRef, useState } from 'react'
 import style from './MazeMap.module.scss'
 
 type PropTypes = {
     height: string
-    campusId?: number,
-    zLevel?: number,
-    center?: {
+    campusId: number,
+    zLevel: number,
+    center: {
         x: number,
         y: number,
     },
-    zoom?: number,
-    sharePoi?: number,
+    zoom: number,
+    sharePoi: number,
 }
 
+type MazeMapLophtetProps = Pick<PropTypes, 'height'>
+
 export default function MazeMap({
     height,
-    campusId = 1, // gløs <3
-    zLevel = -1,
-    center = {
-        x: 10.402228,
-        y: 63.418368,
-    },
-    zoom = 18,
-    sharePoi = 83, // lophtet <3
+    campusId,
+    zLevel,
+    center,
+    zoom,
+    sharePoi,
 }: PropTypes) {
-    return <div className={style.MazeMap} style={{ height }}>
-        <iframe
-            title="MazeMap"
-            src={
-                'https://use.mazemap.com/embed.html#v=1&' +
-                `campusid=${campusId}&` +
-                `zlevel=${zLevel}&` +
-                `center=${center.x},${center.y}&` +
-                `zoom=${zoom}&` +
-                'sharepoitype=poi&' +
-                `sharepoi=${sharePoi}&` +
-                'utm_medium=iframe'
+    const [active, setActive] = useState(false)
+    const iframeRef = useRef<HTMLIFrameElement>(null)
+
+    useEffect(() => {
+        if (active) iframeRef.current?.focus()
+    }, [active])
 
-            }
-            className={style.MazeMapIframe}
-        />
+    return <div className={style.MazeMap} style={{ height }}>
+        <div className={style.MazeMapWrapper} onPointerLeave={() => setActive(false)}>
+            <iframe
+                ref={iframeRef}
+                title="MazeMap"
+                src={
+                    'https://use.mazemap.com/embed.html#v=1&' +
+                    `campusid=${campusId}&` +
+                    `zlevel=${zLevel}&` +
+                    `center=${center.x},${center.y}&` +
+                    `zoom=${zoom}&` +
+                    'sharepoitype=poi&' +
+                    `sharepoi=${sharePoi}&` +
+                    'utm_medium=iframe'
+                }
+                className={style.MazeMapIframe}
+                tabIndex={active ? 0 : -1}
+            />
+            {!active && (
+                <button
+                    type="button"
+                    className={style.MazeMapOverlay}
+                    onClick={() => setActive(true)}
+                    aria-label="Aktiver kartet for interaksjon"
+                />
+            )}
+        </div>
     </div>
 }
+
+export function MazeMapLophtet({ height }: MazeMapLophtetProps) {
+    return <MazeMap
+        height={height}
+        campusId={1}
+        zLevel={-1}
+        center={{
+            x: 10.402228,
+            y: 63.418368,
+        }}
+        zoom={18}
+        sharePoi={83}
+    />
+}