mirror of
https://github.com/inexorabletash/jsbasic.git
synced 2024-11-27 12:49:56 +00:00
Simplify focus handling
This commit is contained in:
parent
fe3dddb32b
commit
c89a05781f
@ -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>
|
||||
|
||||
|
24
index.js
24
index.js
@ -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();
|
||||
|
@ -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; }
|
||||
|
Loading…
Reference in New Issue
Block a user