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

jQuery-less keyboard. Small fixes.

Browse Source
This commit is contained in:
Will Scullin 2019-03-08 11:17:18 -08:00
parent eb13fa7fe8
commit 0f5c83d6ad
No known key found for this signature in database
GPG Key ID: 9092A5C0A673416B
4 changed files with 61 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apple2js.html
View File

@ -37,7 +37,7 @@
color: white; color: white;
} }
.ui-state-default .ui-icon { .ui-state-default .ui-icon {
background-image: url(images/ui-icons_ffffff_256x240.png); background-image: url(//code.jquery.com/ui/1.10.3/themes/mint-choc/images/ui-icons_ffffff_256x240.png);
} }
</style> </style>

2
apple2jse.html
View File

@ -37,7 +37,7 @@
color: white; color: white;
} }
.ui-state-default .ui-icon { .ui-state-default .ui-icon {
background-image: url(images/ui-icons_ffffff_256x240.png); background-image: url(//code.jquery.com/ui/1.10.3/themes/mint-choc/images/ui-icons_ffffff_256x240.png);
} }
</style> </style>

12
css/apple2.css
View File

@ -221,6 +221,15 @@ canvas {
height: 300px; height: 300px;
} }
#keyboard {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
#keyboard .row { #keyboard .row {
display: block; display: block;
margin: 0; margin: 0;
@ -267,8 +276,7 @@ canvas {
} }
#keyboard .key { #keyboard .key {
display: block; display: inline-block;
float: left;
margin: 0; margin: 0;
padding: 0; padding: 0;
width: 32px; width: 32px;

87
js/ui/keyboard.js
View File

@ -202,6 +202,8 @@ export default function KeyBoard(cpu, io, e) {
var optioned = false; var optioned = false;
var commanded = false; var commanded = false;
var kb;
return { return {
mapKeyEvent: function keyboard_mapKeyEvent(evt) { mapKeyEvent: function keyboard_mapKeyEvent(evt) {
var code = evt.keyCode, key = '\xff'; var code = evt.keyCode, key = '\xff';
@ -225,53 +227,58 @@ export default function KeyBoard(cpu, io, e) {
}, },
shiftKey: function keyboard_shiftKey(down) { shiftKey: function keyboard_shiftKey(down) {
var shiftKeys = kb.querySelectorAll('.key-SHIFT');
shifted = down; shifted = down;
if (down) { if (down) {
io.buttonUp(2); io.buttonUp(2);
$('#keyboard .key-SHIFT').addClass('active'); shiftKeys.forEach(function(key) { key.classList.add('active'); });
} else { } else {
io.buttonDown(2); io.buttonDown(2);
$('#keyboard .key-SHIFT').removeClass('active'); shiftKeys.forEach(function(key) { key.classList.remove('active'); });
} }
}, },
controlKey: function keyboard_controlKey(down) { controlKey: function keyboard_controlKey(down) {
var ctrlKey = kb.querySelector('.key-CTRL');
controlled = down; controlled = down;
if (down) { if (down) {
$('#keyboard .key-CTRL').addClass('active'); ctrlKey.classList.add('active');
} else { } else {
$('#keyboard .key-CTRL').removeClass('active'); ctrlKey.classList.remove('active');
} }
}, },
commandKey: function keyboard_commandKey(down) { commandKey: function keyboard_commandKey(down) {
var commandKey = kb.querySelector('.key-OPEN_APPLE');
commanded = down; commanded = down;
if (down) { if (down) {
io.buttonDown(0); io.buttonDown(0);
$('#keyboard .key-OPEN_APPLE').addClass('active'); commandKey.classList.add('active');
} else { } else {
io.buttonUp(0); io.buttonUp(0);
$('#keyboard .key-OPEN_APPLE').removeClass('active'); commandKey.classList.remove('active');
} }
}, },
optionKey: function keyboard_optionKey(down) { optionKey: function keyboard_optionKey(down) {
var optionKey = kb.querySelector('.key-CLOSED_APPLE');
optioned = down; optioned = down;
if (down) { if (down) {
io.buttonDown(1); io.buttonDown(1);
$('#keyboard .key-CLOSED_APPLE').addClass('active'); optionKey.classList.add('active');
} else { } else {
io.buttonUp(1); io.buttonUp(1);
$('#keyboard .key-CLOSED_APPLE').removeClass('active'); optionKey.classList.remove('active');
} }
}, },
capslockKey: function keyboard_caplockKey(down) { capslockKey: function keyboard_caplockKey(down) {
var capsLock = kb.querySelector('.key-LOCK');
capslocked = down; capslocked = down;
if (down) { if (down) {
$('#keyboard .key-LOCK').addClass('active'); capsLock.classList.add('active');
} else { } else {
$('#keyboard .key-LOCK').removeClass('active'); capsLock.classList.remove('active');
} }
}, },
@ -283,26 +290,25 @@ export default function KeyBoard(cpu, io, e) {
}, },
create: function keyboard_create(el) { create: function keyboard_create(el) {
var kb = $(el); kb = document.querySelector(el);
var x, y, row, key, key1, key2, label, label1, label2, self = this; var x, y, row, key, key1, key2, label, label1, label2, self = this;
kb.disableSelection();
function buildLabel(k) { function buildLabel(k) {
var span = $('<span>' + k + '</span>'); var span = document.createElement('span');
span.innerHTML = k;
if (k.length > 1 && k.substr(0,1) != '&') if (k.length > 1 && k.substr(0,1) != '&')
span.addClass('small'); span.classList.add('small');
return span; return span;
} }
function _mouseup(ev) { function _mouseup() {
$(ev.currentTarget).removeClass('pressed'); this.classList.remove('pressed');
} }
function _mousedown(ev) { function _mousedown(ev) {
ev.preventDefault(); ev.preventDefault();
$(this).addClass('pressed'); this.classList.add('pressed');
var key = $(ev.currentTarget).data(shifted ? 'key2' : 'key1'); var key = this.dataset[shifted ? 'key2' : 'key1'];
switch (key) { switch (key) {
case 'BELL': case 'BELL':
key = 'G'; key = 'G';
@ -317,7 +323,7 @@ export default function KeyBoard(cpu, io, e) {
key = '\x7F'; key = '\x7F';
break; break;
case '&larr;': case '&larr;':
key = '\x04'; key = '\x08';
break; break;
case '&rarr;': case '&rarr;':
key = '\x15'; key = '\x15';
@ -332,7 +338,7 @@ export default function KeyBoard(cpu, io, e) {
key = ' '; key = ' ';
break; break;
case 'ESC': case 'ESC':
key = '\x1B' key = '\x1B';
break; break;
default: default:
break; break;
@ -380,50 +386,55 @@ export default function KeyBoard(cpu, io, e) {
} }
for (y = 0; y < 5; y++) { for (y = 0; y < 5; y++) {
row = $('<div class="row row' + y + '"/>'); row = document.createElement('div');
row.classList.add('row');
row.classList.add('row' + y);
kb.append(row); kb.append(row);
for (x = 0; x < keys[0][y].length; x++) { for (x = 0; x < keys[0][y].length; x++) {
key1 = keys[0][y][x]; key1 = keys[0][y][x];
key2 = keys[1][y][x]; key2 = keys[1][y][x];
label = $('<div />'); label = document.createElement('div');
label1 = buildLabel(key1); label1 = buildLabel(key1);
label2 = buildLabel(key2); label2 = buildLabel(key2);
key = $('<div class="key">'); key = document.createElement('div');
key.addClass('key-' + key1.replace(/[&#;]/g,'')); key.classList.add('key');
key.classList.add('key-' + key1.replace(/[&#;]/g,''));
if (key1.length > 1) { if (key1.length > 1) {
if (key1 == 'LOCK') if (key1 == 'LOCK')
key.addClass('vcenter2'); key.classList.add('vcenter2');
else else
key.addClass('vcenter'); key.classList.add('vcenter');
} }
if (key1 != key2) { if (key1 != key2) {
key.addClass('key-' + key2.replace(/[&;]/g,'')); key.classList.add('key-' + key2.replace(/[&;]/g,''));
label.append(label2); label.append(label2);
label.append('<br/>'); label.append(document.createElement('br'));
}
if (key1 == 'LOCK') {
key.classList.add('active');
} }
if (key1 == 'LOCK')
key.addClass('active');
label.append(label1); label.append(label1);
key.append(label); key.append(label);
key.data({'key1': key1, 'key2': key2}); key.dataset.key1 = key1;
key.dataset.key2 = key2;
if (window.ontouchstart === undefined) { if (window.ontouchstart === undefined) {
key.bind('mousedown', _mousedown); key.addEventListener('mousedown', _mousedown);
key.bind('mouseup mouseout', _mouseup); key.addEventListener('mouseup', _mouseup);
key.addEventListener('mouseleave', _mouseup);
} else { } else {
key.bind('touchstart', _mousedown); key.addEventListener('touchstart', _mousedown);
key.bind('touchend touchleave', _mouseup); key.addEventListener('touchend', _mouseup);
key.addEventListener('touchleave', _mouseup);
} }
row.append(key); row.append(key);
} }
row.append('<div class="clear" />');
} }
kb.append('<div class="clear" />');
} }
}; };
} }