diff --git a/index.html b/index.html
index 11eb957..5ced249 100644
--- a/index.html
+++ b/index.html
@@ -99,7 +99,6 @@
JSON Points
(Esc)
-
@@ -107,6 +106,7 @@ JSON Points
(Ctrl/⌘-E)
+
@@ -114,6 +114,13 @@ JSON Points
(Ctrl/⌘-S)
+
+
+
+ Fullscreen
+ (F)
+
+
Coordinates
diff --git a/script.js b/script.js
index dff0235..a589faf 100644
--- a/script.js
+++ b/script.js
@@ -42,6 +42,9 @@ var showNormalized = false;
var modeMessage = document.querySelector('#mode');
// var coords = document.querySelector('#coords');
+var isFullscreen = false;
+var taskbarAndCanvas = document.querySelector('.right');
+
function blitCachedCanvas() {
mainCtx.clearRect(0, 0, canvas.width, canvas.height);
mainCtx.drawImage(offScreenCanvas, 0, 0);
@@ -537,6 +540,36 @@ document.querySelector('#save-image').addEventListener('click', function(e) {
saveImage();
})
+function toggleFullscreen() {
+ highlightButtonInteraction('#fullscreen');
+
+ if (!isFullscreen) {
+ if (taskbarAndCanvas.requestFullscreen) {
+ taskbarAndCanvas.requestFullscreen();
+ } else if (taskbarAndCanvas.webkitRequestFullscreen) { // Safari
+ taskbarAndCanvas.webkitRequestFullscreen();
+ } else if (taskbarAndCanvas.msRequestFullscreen) { // IE/Edge
+ taskbarAndCanvas.msRequestFullscreen();
+ }
+ } else {
+ if (document.exitFullscreen) {
+ document.exitFullscreen();
+ } else if (document.webkitExitFullscreen) { // Safari
+ document.webkitExitFullscreen();
+ } else if (document.msExitFullscreen) { // IE/Edge
+ document.msExitFullscreen();
+ }
+ }
+}
+
+document.addEventListener('fullscreenchange', function() {
+ isFullscreen = document.fullscreenElement !== null;
+});
+
+document.querySelector('#fullscreen').addEventListener('click', function(e) {
+ toggleFullscreen();
+});
+
window.addEventListener('keydown', function(e) {
if (e.key === 'z' && (e.ctrlKey || e.metaKey)) {
e.preventDefault();
@@ -568,4 +601,8 @@ window.addEventListener('keydown', function(e) {
onPathClose();
}
}
+
+ if (e.key === 'f' || e.key === 'F') {
+ toggleFullscreen();
+ }
})
\ No newline at end of file
diff --git a/styles.css b/styles.css
index 6052c84..85acacd 100644
--- a/styles.css
+++ b/styles.css
@@ -63,13 +63,13 @@ a {
display: flex;
}
.left {
- flex: 50%;
+ flex: 40%;
padding: 0 1em;
border-right: 1px solid #e5e7eb;
box-sizing: border-box;
}
.right {
- flex: 50%;
+ flex: 60%;
padding: 0 2em;
box-sizing: border-box;
}
@@ -193,10 +193,6 @@ li {
margin-top: 1em;
}
-.taskbar-container .tc-container {
- max-width: 700px;
-}
-
.taskbar {
display: flex;
background-color: #7733f4;