Simplify focus handling

This commit is contained in:
Joshua Bell 2013-08-17 08:24:56 -07:00
parent fe3dddb32b
commit c89a05781f
3 changed files with 5 additions and 25 deletions

View File

@ -31,12 +31,12 @@ By <a href="mailto:inexorabletash@gmail.com">Joshua Bell</a>
<br clear="left">
<!-- Screen -->
<div id="frame" class="frame" style="float: left; margin: 5px;">
<div id="frame" class="frame" style="float: left; margin: 5px;" tabIndex="0">
<div id="screen-wrapper" class="wrapper">
<div id="lores" class="lores"></div>
<canvas id="hires" width="560" height="384" class="hires"></canvas>
<canvas id="hires2" width="560" height="384" class="hires"></canvas>
<div id="screen" class="tty" tabIndex="0"></div>
<div id="screen" class="tty"></div>
</div>
</div>

View File

@ -11,7 +11,8 @@ window.onload = function () {
} ());
var tty = new TTY($('#screen'), $('#screen'), bell);
var frame = $('#frame');
var tty = new TTY($('#screen'), frame, bell);
var dos = new DOS(tty);
var lores = new LoRes($('#lores'), 40, 48);
@ -84,27 +85,6 @@ window.onload = function () {
editor.setValue(source);
}
// Do not let certain events take focus away from "keyboard"
function keyboardFocus(e) {
tty.focus();
e.stopPropagation(); // W3C
e.preventDefault(); // e.g. to block arrows from scrolling the page
}
addEvent($('#lores'), 'click', keyboardFocus);
addEvent($('#hires'), 'click', keyboardFocus);
addEvent($('#hires2'), 'click', keyboardFocus);
addEvent($('#screen'), 'click', keyboardFocus);
addEvent($('#frame'), 'click', keyboardFocus);
addEvent($('#frame'), 'blur', keyboardFocus); // Needed on IE, not sure why it tries to get focus
addEvent($('#screen'), 'focus', function () {
getClassList($('#frame')).add('focused');
});
addEvent($('#screen'), 'blur', function () {
getClassList($('#frame')).remove('focused');
});
var program;
addEvent($('#btn_run'), 'click', function () {
dos.reset();

View File

@ -38,7 +38,7 @@ body.printout #hide_paper { display: inline-block; }
/* Apple II Screen */
.frame {width: 560px; height: 384px; border-style: ridge; border-width: 10px; border-color: gray; padding: 10px; background-color: #202020; }
.frame.focused { background-color: #204020; }
.frame:focus { background-color: #204020; }
.wrapper { width: 560px; height: 384px; overflow: hidden; padding: 0; margin: 0; position: relative; }
.lores {position: absolute; z-index: 2; left: 0; top: 0; width: 560px; height: 384px; overflow: hidden; visibility: hidden; }
.hires {position: absolute; z-index: 2; left: 0; top: 0; width: 560px; height: 384px; overflow: hidden; visibility: hidden; background-color: #000000; }