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;