-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(components): add button to show a component in fullscreen #405
- Loading branch information
1 parent
656e470
commit c5bc0cc
Showing
57 changed files
with
149 additions
and
4 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,57 @@ | ||
import { useEffect, useRef, useState } from 'preact/hooks'; | ||
|
||
export const Fullscreen = () => { | ||
const element = useRef<HTMLButtonElement>(null); | ||
const isFullscreen = useFullscreenStatus(); | ||
return ( | ||
<button | ||
ref={element} | ||
onClick={async () => { | ||
if (element.current) { | ||
if (isFullscreen) { | ||
await document.exitFullscreen(); | ||
} else { | ||
const componentRoot = findComponentRoot(element.current); | ||
if (componentRoot) { | ||
await componentRoot.requestFullscreen(); | ||
} | ||
} | ||
} | ||
}} | ||
className={`mt-0.5 iconify text-2xl ${isFullscreen ? 'mdi--fullscreen-exit hover:scale-90' : 'mdi--fullscreen hover:scale-110'}`} | ||
title={isFullscreen ? 'Exit fullscreen' : 'Enter fullscreen'} | ||
/> | ||
); | ||
}; | ||
|
||
function findComponentRoot(element: HTMLElement) { | ||
return findShadowRoot(element)?.children[0]; | ||
} | ||
|
||
function findShadowRoot(element: HTMLElement) { | ||
let current: Node = element; | ||
while (current) { | ||
if (current instanceof ShadowRoot) { | ||
return current; | ||
} | ||
if (current.parentNode === null) { | ||
return null; | ||
} | ||
current = current.parentNode; | ||
} | ||
return null; | ||
} | ||
|
||
function useFullscreenStatus(): boolean { | ||
const [isFullscreen, setIsFullscreen] = useState<boolean>(document.fullscreenElement !== null); | ||
useEffect(() => { | ||
const handleFullscreenChange = () => { | ||
setIsFullscreen(document.fullscreenElement !== null); | ||
}; | ||
document.addEventListener('fullscreenchange', handleFullscreenChange); | ||
return () => { | ||
document.removeEventListener('fullscreenchange', handleFullscreenChange); | ||
}; | ||
}, []); | ||
return isFullscreen; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,15 @@ | ||
import { expect, test } from '@playwright/test'; | ||
|
||
test('component with fullscreen button exits full screen after full screen', async ({ page }) => { | ||
await page.goto( | ||
'http://localhost:6006/iframe.html?args=&id=visualization-relative-growth-advantage--default&viewMode=story', | ||
); | ||
|
||
const fullScreenButton = page.getByRole('button', { name: 'Enter fullscreen' }); | ||
await fullScreenButton.click(); | ||
|
||
const exitFullScreenButton = page.getByRole('button', { name: 'Exit fullscreen' }); | ||
await exitFullScreenButton.click(); | ||
|
||
await expect(page.getByText('Relative advantage', { exact: false })).toBeVisible(); | ||
}); |
Binary file modified
BIN
+147 Bytes
(100%)
...ory-visualization-aggregate--table-should-match-screenshot-1-chromium-linux.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified
BIN
+111 Bytes
(100%)
...tory-visualization-aggregate--table-should-match-screenshot-1-firefox-linux.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified
BIN
+174 Bytes
(100%)
...ation-mutation-comparison--default-should-match-screenshot-1-chromium-linux.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified
BIN
+133 Bytes
(100%)
...zation-mutation-comparison--default-should-match-screenshot-1-firefox-linux.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified
BIN
-792 Bytes
(98%)
...-mutation-comparison--venn-diagram-should-match-screenshot-1-chromium-linux.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified
BIN
+269 Bytes
(100%)
...n-mutation-comparison--venn-diagram-should-match-screenshot-1-firefox-linux.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified
BIN
+211 Bytes
(100%)
...y-visualization-mutations--default-should-match-screenshot-1-chromium-linux.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified
BIN
+32 Bytes
(100%)
...ry-visualization-mutations--default-should-match-screenshot-1-firefox-linux.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified
BIN
+207 Bytes
(100%)
...ation-mutations--on-insertions-tab-should-match-screenshot-1-chromium-linux.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified
BIN
+68 Bytes
(100%)
...zation-mutations--on-insertions-tab-should-match-screenshot-1-firefox-linux.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified
BIN
+179 Bytes
(100%)
...ualization-mutations--on-table-tab-should-match-screenshot-1-chromium-linux.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified
BIN
+64 Bytes
(100%)
...sualization-mutations--on-table-tab-should-match-screenshot-1-firefox-linux.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified
BIN
+122 Bytes
(100%)
...mutati-90d43-acid-mutations-by-day-should-match-screenshot-1-chromium-linux.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified
BIN
+79 Bytes
(100%)
...-mutati-90d43-acid-mutations-by-day-should-match-screenshot-1-firefox-linux.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified
BIN
-7 Bytes
(100%)
...mutati-ddeb1-rtion-on-small-screen-should-match-screenshot-1-chromium-linux.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified
BIN
-13 Bytes
(100%)
...-mutati-ddeb1-rtion-on-small-screen-should-match-screenshot-1-firefox-linux.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified
BIN
-272 Bytes
(100%)
...tion-mutations-over-time--by-month-should-match-screenshot-1-chromium-linux.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified
BIN
-288 Bytes
(100%)
...ation-mutations-over-time--by-month-should-match-screenshot-1-firefox-linux.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified
BIN
+75 Bytes
(100%)
...ation-mutations-over-time--by-week-should-match-screenshot-1-chromium-linux.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified
BIN
+88 Bytes
(100%)
...zation-mutations-over-time--by-week-should-match-screenshot-1-firefox-linux.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified
BIN
+68 Bytes
(100%)
...alizat-30024-er-time--two-datasets-should-match-screenshot-1-chromium-linux.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified
BIN
+126 Bytes
(100%)
...ualizat-30024-er-time--two-datasets-should-match-screenshot-1-firefox-linux.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified
BIN
-916 Bytes
(97%)
...alizat-5b9f9-ne-dataset-line-chart-should-match-screenshot-1-chromium-linux.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified
BIN
+117 Bytes
(100%)
...ualizat-5b9f9-ne-dataset-line-chart-should-match-screenshot-1-firefox-linux.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified
BIN
+727 Bytes
(100%)
...alizat-74766-non-overlapping-dates-should-match-screenshot-1-chromium-linux.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified
BIN
+237 Bytes
(100%)
...ualizat-74766-non-overlapping-dates-should-match-screenshot-1-firefox-linux.png
Oops, something went wrong.
Binary file modified
BIN
+205 Bytes
(100%)
...alizat-982ea-me--one-dataset-table-should-match-screenshot-1-chromium-linux.png
Oops, something went wrong.
Binary file modified
BIN
+107 Bytes
(100%)
...ualizat-982ea-me--one-dataset-table-should-match-screenshot-1-firefox-linux.png
Oops, something went wrong.
Binary file modified
BIN
-186 Bytes
(99%)
...alizat-acb9c-one-dataset-bar-chart-should-match-screenshot-1-chromium-linux.png
Oops, something went wrong.
Binary file modified
BIN
-1 Byte
(100%)
...ualizat-acb9c-one-dataset-bar-chart-should-match-screenshot-1-firefox-linux.png
Oops, something went wrong.
Binary file modified
BIN
+562 Bytes
(100%)
...-preva-27da7-er-time--two-datasets-should-match-screenshot-1-chromium-linux.png
Oops, something went wrong.
Binary file modified
BIN
-23 Bytes
(100%)
...n-preva-27da7-er-time--two-datasets-should-match-screenshot-1-firefox-linux.png
Oops, something went wrong.
Binary file modified
BIN
+77 Bytes
(100%)
...-preva-5aa85--dataset-on-table-tab-should-match-screenshot-1-chromium-linux.png
Oops, something went wrong.
Binary file modified
BIN
+66 Bytes
(100%)
...n-preva-5aa85--dataset-on-table-tab-should-match-screenshot-1-firefox-linux.png
Oops, something went wrong.
Binary file modified
BIN
+110 Bytes
(100%)
...-preva-a82c2-dataset-on-bubble-tab-should-match-screenshot-1-chromium-linux.png
Oops, something went wrong.
Binary file modified
BIN
+18 Bytes
(100%)
...n-preva-a82c2-dataset-on-bubble-tab-should-match-screenshot-1-firefox-linux.png
Oops, something went wrong.
Binary file modified
BIN
+231 Bytes
(100%)
...-preva-d757c-e-dataset-on-line-tab-should-match-screenshot-1-chromium-linux.png
Oops, something went wrong.
Binary file modified
BIN
+17 Bytes
(100%)
...n-preva-d757c-e-dataset-on-line-tab-should-match-screenshot-1-firefox-linux.png
Oops, something went wrong.
Binary file modified
BIN
+25 Bytes
(100%)
...-prevalence-over-time--one-dataset-should-match-screenshot-1-chromium-linux.png
Oops, something went wrong.
Binary file modified
BIN
+143 Bytes
(100%)
...n-prevalence-over-time--one-dataset-should-match-screenshot-1-firefox-linux.png
Oops, something went wrong.
Binary file modified
BIN
-1.91 KB
(97%)
...ation--e115e-th-advantage--default-should-match-screenshot-1-chromium-linux.png
Oops, something went wrong.
Binary file modified
BIN
+426 Bytes
(100%)
...zation--e115e-th-advantage--default-should-match-screenshot-1-firefox-linux.png
Oops, something went wrong.