Skip to content

Commit af71338

Browse files
Roméo MaignalRoméo Maignal
Roméo Maignal
authored and
Roméo Maignal
committed
feat(widgets): fullscreen feature added
1 parent b716274 commit af71338

8 files changed

Lines changed: 82 additions & 18 deletions

File tree

‎src/App.css‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -130,6 +130,16 @@
130130
font-size: 0.8rem;
131131
}
132132

133+
.widget:fullscreen,
134+
.widget:-webkit-full-screen {
135+
max-width: 100%;
136+
width: 100%;
137+
height: 100%;
138+
border-radius: 0;
139+
border: none;
140+
background: var(--bg);
141+
}
142+
133143
@media (max-width: 1024px) {
134144
.section {
135145
padding: 4rem 1.5rem;

‎src/components/Viz1.tsx‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
1+
import { useFullscreen } from '../hooks/useFullscreen'
12
import './Viz1.css'
23

34
const Viz1: React.FC = () => {
5+
const { ref, isFullscreen, toggle } = useFullscreen()
46
return (
57
<div className="section">
68
<div className="viz-container">
@@ -14,10 +16,13 @@ const Viz1: React.FC = () => {
1416
nisi ut aliquip ex ea commodo consequat.
1517
</p>
1618
</div>
17-
<div className="widget">
18-
<button className="fullscreen-btn" aria-label="Toggle Fullscreen">
19+
<div className="widget" ref={ref}>
20+
<button className="fullscreen-btn" aria-label="Toggle Fullscreen" onClick={toggle}>
1921
<svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="2">
20-
<path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z" />
22+
{isFullscreen
23+
? <path d="M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z" />
24+
: <path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z" />
25+
}
2126
</svg>
2227
</button>
2328
<h2>

‎src/components/Viz2.tsx‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,18 @@
1+
import { useFullscreen } from '../hooks/useFullscreen'
12
import './Viz2.css'
23

34
const Viz2: React.FC = () => {
5+
const { ref, isFullscreen, toggle } = useFullscreen()
46
return (
57
<div className="section">
68
<div className="viz-container">
7-
<div className="widget">
8-
<button className="fullscreen-btn" aria-label="Toggle Fullscreen">
9+
<div className="widget" ref={ref}>
10+
<button className="fullscreen-btn" aria-label="Toggle Fullscreen" onClick={toggle}>
911
<svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="2">
10-
<path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z" />
12+
{isFullscreen
13+
? <path d="M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z" />
14+
: <path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z" />
15+
}
1116
</svg>
1217
</button>
1318
<h2>

‎src/components/Viz3.tsx‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
1+
import { useFullscreen } from '../hooks/useFullscreen'
12
import './Viz3.css'
23

34
const Viz3: React.FC = () => {
5+
const { ref, isFullscreen, toggle } = useFullscreen()
46
return (
57
<div className="section">
68
<div className="viz-container">
@@ -14,10 +16,13 @@ const Viz3: React.FC = () => {
1416
nisi ut aliquip ex ea commodo consequat.
1517
</p>
1618
</div>
17-
<div className="widget">
18-
<button className="fullscreen-btn" aria-label="Toggle Fullscreen">
19+
<div className="widget" ref={ref}>
20+
<button className="fullscreen-btn" aria-label="Toggle Fullscreen" onClick={toggle}>
1921
<svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="2">
20-
<path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z" />
22+
{isFullscreen
23+
? <path d="M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z" />
24+
: <path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z" />
25+
}
2126
</svg>
2227
</button>
2328
<h2>

‎src/components/Viz4.tsx‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,18 @@
1+
import { useFullscreen } from '../hooks/useFullscreen'
12
import './Viz4.css'
23

34
const Viz4: React.FC = () => {
5+
const { ref, isFullscreen, toggle } = useFullscreen()
46
return (
57
<div className="section">
68
<div className="viz-container">
7-
<div className="widget">
8-
<button className="fullscreen-btn" aria-label="Toggle Fullscreen">
9+
<div className="widget" ref={ref}>
10+
<button className="fullscreen-btn" aria-label="Toggle Fullscreen" onClick={toggle}>
911
<svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="2">
10-
<path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z" />
12+
{isFullscreen
13+
? <path d="M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z" />
14+
: <path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z" />
15+
}
1116
</svg>
1217
</button>
1318
<h2>

‎src/components/Viz5.tsx‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
1+
import { useFullscreen } from '../hooks/useFullscreen'
12
import './Viz5.css'
23

34
const Viz5: React.FC = () => {
5+
const { ref, isFullscreen, toggle } = useFullscreen()
46
return (
57
<div className="section">
68
<div className="viz-container">
@@ -14,10 +16,13 @@ const Viz5: React.FC = () => {
1416
nisi ut aliquip ex ea commodo consequat.
1517
</p>
1618
</div>
17-
<div className="widget">
18-
<button className="fullscreen-btn" aria-label="Toggle Fullscreen">
19+
<div className="widget" ref={ref}>
20+
<button className="fullscreen-btn" aria-label="Toggle Fullscreen" onClick={toggle}>
1921
<svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="2">
20-
<path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z" />
22+
{isFullscreen
23+
? <path d="M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z" />
24+
: <path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z" />
25+
}
2126
</svg>
2227
</button>
2328
<h2>

‎src/components/Viz6.tsx‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,18 @@
1+
import { useFullscreen } from '../hooks/useFullscreen'
12
import './Viz6.css'
23

34
const Viz6: React.FC = () => {
5+
const { ref, isFullscreen, toggle } = useFullscreen()
46
return (
57
<div className="section">
68
<div className="viz-container">
7-
<div className="widget">
8-
<button className="fullscreen-btn" aria-label="Toggle Fullscreen">
9+
<div className="widget" ref={ref}>
10+
<button className="fullscreen-btn" aria-label="Toggle Fullscreen" onClick={toggle}>
911
<svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="2">
10-
<path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z" />
12+
{isFullscreen
13+
? <path d="M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z" />
14+
: <path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z" />
15+
}
1116
</svg>
1217
</button>
1318
<h2>

‎src/hooks/useFullscreen.ts‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import { useRef, useState, useEffect } from 'react'
2+
3+
export function useFullscreen() {
4+
const ref = useRef<HTMLDivElement>(null)
5+
const [isFullscreen, setIsFullscreen] = useState(false)
6+
7+
useEffect(() => {
8+
const handleChange = () => {
9+
setIsFullscreen(document.fullscreenElement === ref.current)
10+
}
11+
document.addEventListener('fullscreenchange', handleChange)
12+
return () => document.removeEventListener('fullscreenchange', handleChange)
13+
}, [])
14+
15+
const toggle = () => {
16+
if (!document.fullscreenElement) {
17+
ref.current?.requestFullscreen()
18+
} else {
19+
document.exitFullscreen()
20+
}
21+
}
22+
23+
return { ref, isFullscreen, toggle }
24+
}

0 commit comments

Comments
 (0)