mirror of
https://github.com/jpawlowski/hass.tibber_prices.git
synced 2026-04-09 09:03:40 +00:00
feat(docs): add click-to-zoom lightbox for Mermaid diagrams
Swizzled @docusaurus/theme-mermaid's Mermaid component to wrap every diagram with a portal-based lightbox overlay. An expand icon appears on diagram hover. Clicking opens the SVG in a full-screen overlay (90vw × 85vh, scrollable). Closes via backdrop click, Escape key, or close button. SSR-safe, no external dependencies. Matches Tibber electric color theme. Impact: Users can inspect complex flowcharts (e.g. the Options Flow wizard) without squinting at small embedded diagrams.
This commit is contained in:
Julian Pawlowski
parent
1c25ac1fb0
commit
552db6ef7d
2 changed files with 228 additions and 0 deletions
|
|
@ -226,3 +226,113 @@ h1, h2, h3, h4, h5, h6 {
|
|||
[data-theme='dark'] .bmc-logo-dark {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* ── Mermaid diagram zoom / lightbox ──────────────────────────── */
|
||||
|
||||
/* Wrapper that holds the diagram + the expand button */
|
||||
.mermaid-zoom-wrapper {
|
||||
position: relative;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Expand button — hidden until the diagram is hovered */
|
||||
.mermaid-zoom-btn {
|
||||
position: absolute;
|
||||
top: 0.5rem;
|
||||
right: 0.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 1.75rem;
|
||||
height: 1.75rem;
|
||||
padding: 0;
|
||||
background: var(--ifm-background-surface-color);
|
||||
border: 1px solid var(--ifm-color-emphasis-300);
|
||||
border-radius: 0.4rem;
|
||||
color: var(--ifm-color-emphasis-600);
|
||||
cursor: pointer;
|
||||
opacity: 0;
|
||||
transition: opacity 0.15s ease, background 0.15s ease, color 0.15s ease,
|
||||
border-color 0.15s ease;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.mermaid-zoom-wrapper:hover .mermaid-zoom-btn,
|
||||
.mermaid-zoom-btn:focus-visible {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.mermaid-zoom-btn:hover {
|
||||
background: var(--ifm-color-primary);
|
||||
border-color: var(--ifm-color-primary);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* Full-screen backdrop */
|
||||
.mermaid-lightbox {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 9999;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: rgba(0, 0, 0, 0.75);
|
||||
backdrop-filter: blur(4px);
|
||||
cursor: zoom-out;
|
||||
animation: mermaid-fadein 0.15s ease;
|
||||
}
|
||||
|
||||
@keyframes mermaid-fadein {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
|
||||
/* The white/dark card containing the diagram */
|
||||
.mermaid-lightbox-inner {
|
||||
position: relative;
|
||||
max-width: min(90vw, 1200px);
|
||||
max-height: 85vh;
|
||||
overflow: auto;
|
||||
padding: 1.5rem;
|
||||
background: var(--ifm-background-color);
|
||||
border-radius: var(--ifm-card-border-radius);
|
||||
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.4);
|
||||
cursor: default;
|
||||
animation: mermaid-scalein 0.15s ease;
|
||||
}
|
||||
|
||||
@keyframes mermaid-scalein {
|
||||
from { transform: scale(0.95); opacity: 0; }
|
||||
to { transform: scale(1); opacity: 1; }
|
||||
}
|
||||
|
||||
.mermaid-lightbox-inner svg {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/* Close button (top-right corner of the card) */
|
||||
.mermaid-lightbox-close {
|
||||
position: absolute;
|
||||
top: 0.5rem;
|
||||
right: 0.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 1.75rem;
|
||||
height: 1.75rem;
|
||||
padding: 0;
|
||||
background: var(--ifm-background-surface-color);
|
||||
border: 1px solid var(--ifm-color-emphasis-300);
|
||||
border-radius: 0.4rem;
|
||||
color: var(--ifm-color-emphasis-700);
|
||||
cursor: pointer;
|
||||
transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
|
||||
}
|
||||
|
||||
.mermaid-lightbox-close:hover {
|
||||
background: var(--ifm-color-danger);
|
||||
border-color: var(--ifm-color-danger);
|
||||
color: #fff;
|
||||
}
|
||||
|
|
|
|||
118
docs/user/src/theme/Mermaid/index.tsx
Normal file
118
docs/user/src/theme/Mermaid/index.tsx
Normal file
|
|
@ -0,0 +1,118 @@
|
|||
import React, { useState, useEffect, useRef, useCallback } from 'react';
|
||||
import { createPortal } from 'react-dom';
|
||||
import OriginalMermaid from '@theme-original/Mermaid';
|
||||
import type MermaidType from '@theme/Mermaid';
|
||||
import type { WrapperProps } from '@docusaurus/types';
|
||||
|
||||
type Props = WrapperProps<typeof MermaidType>;
|
||||
|
||||
export default function MermaidWrapper(props: Props): React.JSX.Element {
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
const [overlayOpen, setOverlayOpen] = useState(false);
|
||||
const [svgMarkup, setSvgMarkup] = useState('');
|
||||
const [mounted, setMounted] = useState(false);
|
||||
|
||||
// Only run portals client-side (SSR safety)
|
||||
useEffect(() => {
|
||||
setMounted(true);
|
||||
}, []);
|
||||
|
||||
const handleOpen = useCallback(() => {
|
||||
const svg = containerRef.current?.querySelector('svg');
|
||||
if (!svg) return;
|
||||
// Clone the SVG and strip fixed dimensions so it scales freely
|
||||
const clone = svg.cloneNode(true) as SVGElement;
|
||||
clone.removeAttribute('width');
|
||||
clone.removeAttribute('height');
|
||||
clone.style.cssText = 'width:100%;height:auto;display:block;';
|
||||
setSvgMarkup(clone.outerHTML);
|
||||
setOverlayOpen(true);
|
||||
}, []);
|
||||
|
||||
const handleClose = useCallback(() => {
|
||||
setOverlayOpen(false);
|
||||
}, []);
|
||||
|
||||
// Keyboard + body-scroll lock while overlay is open
|
||||
useEffect(() => {
|
||||
if (!overlayOpen) return;
|
||||
const onKey = (e: KeyboardEvent) => {
|
||||
if (e.key === 'Escape') handleClose();
|
||||
};
|
||||
document.addEventListener('keydown', onKey);
|
||||
document.body.style.overflow = 'hidden';
|
||||
return () => {
|
||||
document.removeEventListener('keydown', onKey);
|
||||
document.body.style.overflow = '';
|
||||
};
|
||||
}, [overlayOpen, handleClose]);
|
||||
|
||||
return (
|
||||
<div ref={containerRef} className="mermaid-zoom-wrapper">
|
||||
<OriginalMermaid {...props} />
|
||||
<button
|
||||
className="mermaid-zoom-btn"
|
||||
onClick={handleOpen}
|
||||
aria-label="View diagram enlarged"
|
||||
title="View enlarged"
|
||||
>
|
||||
{/* Expand / fullscreen icon */}
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
width="15"
|
||||
height="15"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<polyline points="15 3 21 3 21 9" />
|
||||
<polyline points="9 21 3 21 3 15" />
|
||||
<line x1="21" y1="3" x2="14" y2="10" />
|
||||
<line x1="3" y1="21" x2="10" y2="14" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
{mounted &&
|
||||
overlayOpen &&
|
||||
createPortal(
|
||||
<div
|
||||
className="mermaid-lightbox"
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-label="Enlarged diagram"
|
||||
onClick={handleClose}
|
||||
>
|
||||
<div
|
||||
className="mermaid-lightbox-inner"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
// Safe: SVG content is cloned from our own rendered DOM node
|
||||
dangerouslySetInnerHTML={{ __html: svgMarkup }}
|
||||
/>
|
||||
<button
|
||||
className="mermaid-lightbox-close"
|
||||
onClick={handleClose}
|
||||
aria-label="Close enlarged view"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
width="18"
|
||||
height="18"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2.5"
|
||||
strokeLinecap="round"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<line x1="18" y1="6" x2="6" y2="18" />
|
||||
<line x1="6" y1="6" x2="18" y2="18" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>,
|
||||
document.body,
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in a new issue