coderkun/questlab
1
0
Fork 0
Code Issues 15 Pull requests Projects Releases Wiki Activity

Questtype ?Crossword?: improve key input handling (Issue #90)

Browse source
This commit is contained in:
coderkun 2014-05-27 14:57:28 +02:00
commit 47270f8391
1 changed files with 99 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

109
questtypes/crossword/html/quest.tpl
View file

@ -1,5 +1,5 @@
<form method="post" class="crossword"> <form method="post" class="crossword">
<table> <table id="matrix">
<tbody> <tbody>
<?php foreach(range(0, $maxY) as $y) : ?> <?php foreach(range(0, $maxY) as $y) : ?>
<tr> <tr>
@ -30,20 +30,107 @@
<input type="submit" name="submit" value="<?=_('solve')?>" /> <input type="submit" name="submit" value="<?=_('solve')?>" />
</form> </form>
<script type="text/javascript"> <script type="text/javascript">
$('input:text').bind("keyup", function(e) { // Last position
var n = $("input:text").length; var posX = 0;
if(e.which == 8 || e.which == 46) { var posX = 0;
var nextIndex = $('input:text').index(this) - 1;
var del = 1; // Handle key input
$('input:text').keyup(function(event) {
// Determine current position
var row = $(this).closest('tr');
var y = $('#matrix tr').index(row);
var col = $(this).closest('td');
var x = row.children().index(col);
// Determine current direction
var horizontal = (x != posX);
// Set current position
posX = x;
posY = y;
// Next input field
var nextInput = null;
// Hanlde keys
switch(event.keyCode)
{
case 37: // Left
nextInput = getColumnInput(row, x-1);
break;
case 38: // Up
nextInput = getRowInput(x, y-1);
break;
case 39: // Right
nextInput = getColumnInput(row, x+1);
break;
case 40: // Down
nextInput = getRowInput(x, y+1);
break;
default:
// Only handy character input
if(event.key.length != 1) {
break;
}
// Set new character
$(this).val(event.key);
// Go to next input field
if(horizontal) {
nextInput = getColumnInput(row, x+1);
} }
else { else {
var nextIndex = $('input:text').index(this) + 1; nextInput = getRowInput(x, y+1);
} }
if(nextIndex < n) {
$('input:text')[nextIndex].focus(); event.preventDefault();
if(del == 1) { break;
$('input:text')[nextIndex].value = '';
} }
// Select input field
if(nextInput != null) {
nextInput.focus();
} }
}); });
/**
* Get the input field of the column x of the given row.
*/
function getColumnInput(row, x)
{
nextCol = $('td', row)[x];
if(nextCol != null) {
return $('input:text', nextCol)[0];
}
else {
// TODO get next number
}
return null;
}
/**
* Get the input field of the column y of row x.
*/
function getRowInput(x, y)
{
nextRow = $('#matrix tr')[y];
if(nextRow != null)
{
nextCol = $('td', nextRow)[x];
if(nextCol != null) {
return $('input:text', nextCol)[0];
}
}
else {
// TODO get nextnumber
}
return null;
}
</script> </script>