Apple-2-Tools/apple2js
1
0
Fork 0
mirror of https://github.com/whscullin/apple2js.git synced 2024-01-12 14:14:38 +00:00
Code Issues Projects Releases Wiki Activity

Allow Shift-F2 to maximize the Apple screen in the window

Browse Source 
Normally, F2 causes the browser to go full-screen, showing only the
Apple screen. However, in Chrome, the user can exit full-screen mode
by pressing ESC. Since ESC is used frequently on the Apple //e, this
limits the utility of full-screen mode.

To work around this problem, this change adds Shift-F2, which will
make the Apple fill the window without going full-screen. This allows
the user to go make the window full-screen in some other way, thus
enabling the use of the ESC key.

Note that the method used is almost entirely implemented in CSS, with
just a few lines of code to change the classes on some elements. This
may not be the best long-term way of implementing this feature.
This commit is contained in:
Ian Flanigan 2019-01-04 00:37:19 +01:00
parent 8ee8b01d0a
commit 397e7ecc11
2 changed files with 49 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
css/apple2.css
View File

@ -81,6 +81,45 @@ label {
border-radius: 10px;
}
.zoomwindow {
width: 100vw;
height: 68.5714vw; /* 384px / 560px * 100% */
max-height: 100vh;
max-width: 145.83vh; /* 560px / 384px * 100% */
padding: 0;
border: 0;
position: fixed;
top:0;
bottom: 0;
left: 0;
right: 0;
justify-content: center;
align-items: center;
margin: auto !important;
}
.maxhw {
width: 100%;
height: 100%;
}
.flexbox-centering {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background: green;
}
.hidden {
display: none !important;
}
.fillparent {
width: 100%;
height: 100%;
}
#power {
padding: 2px;
border: 1px inset #888;

11
js/main2e.js
View File

@ -793,7 +793,16 @@ function _keydown(evt) {
cpu.reset();
} else if (evt.keyCode === 113) { // F2 - Full Screen
var elem = document.getElementById('screen');
if (document.webkitCancelFullScreen) {
if (evt.shiftKey) { // Full window, but not full screen
$('#display').toggleClass('zoomwindow');
$('#display > div')
.toggleClass('overscan')
.toggleClass('flexbox-centering');
$('#screen').toggleClass('maxhw');
$('#header').toggleClass('hidden');
$('.inset').toggleClass('hidden');
$('#reset').toggleClass('hidden');
} else if (document.webkitCancelFullScreen) {
if (document.webkitIsFullScreen) {
document.webkitCancelFullScreen();
} else {