Apple-2-SW
/
jsbasic
mirror of https://github.com/inexorabletash/jsbasic.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
index.htm
View File

@ -31,12 +31,12 @@ By <a href="mailto:inexorabletash@gmail.com">Joshua Bell</a>
<br clear="left"> <br clear="left">
<!-- Screen --> <!-- 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="screen-wrapper" class="wrapper">
<div id="lores" class="lores"></div> <div id="lores" class="lores"></div>
<canvas id="hires" width="560" height="384" class="hires"></canvas> <canvas id="hires" width="560" height="384" class="hires"></canvas>
<canvas id="hires2" 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>
</div> </div>

24
index.js
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 dos = new DOS(tty);
var lores = new LoRes($('#lores'), 40, 48); var lores = new LoRes($('#lores'), 40, 48);
@ -84,27 +85,6 @@ window.onload = function () {
editor.setValue(source); 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; var program;
addEvent($('#btn_run'), 'click', function () { addEvent($('#btn_run'), 'click', function () {
dos.reset(); dos.reset();

2
styles.css
View File

@ -38,7 +38,7 @@ body.printout #hide_paper { display: inline-block; }
/* Apple II Screen */ /* Apple II Screen */
.frame {width: 560px; height: 384px; border-style: ridge; border-width: 10px; border-color: gray; padding: 10px; background-color: #202020; } .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; } .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; } .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; } .hires {position: absolute; z-index: 2; left: 0; top: 0; width: 560px; height: 384px; overflow: hidden; visibility: hidden; background-color: #000000; }