diff --git a/index.htm b/index.htm index e88f096..2e28f88 100644 --- a/index.htm +++ b/index.htm @@ -31,12 +31,12 @@ By Joshua Bell
-
+
-
+
diff --git a/index.js b/index.js index 2ea09c0..9ca9aae 100644 --- a/index.js +++ b/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(); diff --git a/styles.css b/styles.css index 4ff208f..aa7412a 100644 --- a/styles.css +++ b/styles.css @@ -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; }