Restructured files, made build script
This commit is contained in:
268
typescript/keyboards.ts
Normal file
268
typescript/keyboards.ts
Normal file
@@ -0,0 +1,268 @@
|
||||
type KeyboardRowName = `row${number}${"" | "_"}${string}`;
|
||||
type KeyboardRow = Partial<Record<KeyboardRowName, string[]>>
|
||||
interface VirtualKeyboard {
|
||||
[layoutName: string]: KeyboardRow;
|
||||
}
|
||||
|
||||
let showVirtualNumpad = (heading: string, maxlength = 4, isPassword: boolean, allowDecimals = true, allowClose = true, submitFunction: Function) => {
|
||||
let numpad = $('#virtualNumpad');
|
||||
let inputBox = $('#virtualNumpadInput')
|
||||
let closeKeyboardButton = $('.closeKeyboards')
|
||||
|
||||
numpad.css('display', 'flex')
|
||||
|
||||
let showCloseButton = allowClose ? 'flex' : 'none'
|
||||
closeKeyboardButton.css('display', showCloseButton)
|
||||
$('#virtualNumpadHeading').html(heading)
|
||||
|
||||
/*
|
||||
The numpad always submits to a function.
|
||||
If a function isn't specified, it will submit
|
||||
to the same function that called it
|
||||
*/
|
||||
|
||||
numpad.data('value', '');
|
||||
inputBox.text('');
|
||||
|
||||
numpad.data('maxlength', maxlength)
|
||||
numpad.data('submitfunction', submitFunction)
|
||||
numpad.data('password', isPassword);
|
||||
numpad.data('allowdecimals', allowDecimals);
|
||||
|
||||
$(document).off('keyup');
|
||||
$(document).on('keyup', e => {
|
||||
let key = e.key;
|
||||
switch (key) {
|
||||
case 'Backspace':
|
||||
case 'Delete':
|
||||
key = 'clear'
|
||||
break;
|
||||
case 'Enter':
|
||||
key = 'submit'
|
||||
break;
|
||||
}
|
||||
|
||||
virtualNumpadInput(key)
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
let hideVirtualKeyboard = () => {
|
||||
let keyboard = $('#virtualKeyboard');
|
||||
keyboard.hide()
|
||||
$('#virtualKeyboardHeading').html('');
|
||||
$(document).unbind('keyup');
|
||||
}
|
||||
|
||||
let hideVirtualNumpad = () => {
|
||||
let numpad = $('#virtualNumpad')
|
||||
numpad.css('display', 'none')
|
||||
$('#virtualNumpadHeading').html('')
|
||||
$(document).unbind('keyup')
|
||||
}
|
||||
|
||||
let virtualNumpadInput = (input: string) => {
|
||||
let inputBox = $('#virtualNumpadInput')
|
||||
let numpad = $('#virtualNumpad')
|
||||
let maxlength = numpad.data('maxlength')
|
||||
let allowDecimals = numpad.data('allowdecimals')
|
||||
let submitFunction = numpad.data('submitfunction')
|
||||
let allowedValues = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'submit', 'clear']
|
||||
let currentValue = numpad.data('value').toString()
|
||||
|
||||
if (allowDecimals)
|
||||
allowedValues.push('.', ',')
|
||||
|
||||
let validInput = allowedValues.includes(input);
|
||||
//If the input is a valid number, decimal point or command.
|
||||
if (validInput) {
|
||||
switch (input) {
|
||||
case 'submit':
|
||||
hideVirtualNumpad()
|
||||
let numpadValue: string = numpad.data('value').length > 0 ? numpad.data('value') : "0"
|
||||
submitFunction(numpadValue)
|
||||
break;
|
||||
case 'clear':
|
||||
clearNumpadInput()
|
||||
break;
|
||||
default:
|
||||
let newText = currentValue + input
|
||||
let isPassword = numpad.data('password')
|
||||
let length = input.length + inputBox.text().length
|
||||
|
||||
if (length <= maxlength) {
|
||||
inputBox.append(isPassword ? '*' : input)
|
||||
numpad.data('value', newText)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
let clearNumpadInput = () => {
|
||||
$('#virtualNumpadInput').text("")
|
||||
$('#virtualNumpad').data('value', '')
|
||||
}
|
||||
|
||||
let setupVirtualNumpad = () => {
|
||||
$(document).on('click', '.virtualNumpadButton', e => {
|
||||
virtualNumpadInput($(e.target).data('value').toString())
|
||||
})
|
||||
|
||||
$('.closeKeyboards').on('click', () => {
|
||||
hideVirtualKeyboard();
|
||||
hideVirtualNumpad()
|
||||
});
|
||||
}
|
||||
|
||||
let setupVirtualKeyboard = (keyboardLayouts: VirtualKeyboard) => {
|
||||
Application.keyboard = {
|
||||
capsLock: false,
|
||||
shift: false,
|
||||
layouts: keyboardLayouts,
|
||||
currentLayout: 'default',
|
||||
}
|
||||
|
||||
$(document).on('click', '.virtualKeyboardButton', e => {
|
||||
virtualKeyboardInput($(e.target).data('value'));
|
||||
})
|
||||
|
||||
$(document).on('click', '.forceFocus', (e) => {
|
||||
$('#virtualKeyboardInput').trigger('focus')
|
||||
})
|
||||
setKeyboardLayout('default')
|
||||
}
|
||||
|
||||
let showVirtualKeyboard = (heading: string, maxlength = 32, isPassword = false, submitFunction :Function = () => {hideVirtualKeyboard()}) => {
|
||||
let keyboard = $('#virtualKeyboard')
|
||||
let inputBox = $('#virtualKeyboardInput')
|
||||
|
||||
keyboard.css('display', 'flex')
|
||||
$('#virtualKeyboardHeading').html(heading)
|
||||
$('.forceFocus').trigger('click')
|
||||
|
||||
keyboard.data('value', '')
|
||||
inputBox.val('')
|
||||
keyboard.data('maxlength', maxlength)
|
||||
keyboard.data('password', isPassword)
|
||||
keyboard.data('submitfunction', submitFunction)
|
||||
inputBox.attr('autofocus', 'autofocus');
|
||||
inputBox.trigger('focus')
|
||||
inputBox.trigger('click')
|
||||
inputBox.trigger('select')
|
||||
$(document).on('keyup', e => {
|
||||
let key = e.key
|
||||
if (key == 'Enter' && inputBox.val().toString().length > 0) {
|
||||
key = 'submit'
|
||||
virtualKeyboardInput(key)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
let virtualKeyboardInput = (input: string) => {
|
||||
let inputBox = $('#virtualKeyboardInput')
|
||||
let keyboard = $('#virtualKeyboard');
|
||||
|
||||
let maxlength = keyboard.data('maxlength');
|
||||
let isPassword = keyboard.data('password');
|
||||
let length = input.length + inputBox.text().length
|
||||
|
||||
switch (input.toLowerCase()) {
|
||||
case 'backspace':
|
||||
case 'delete':
|
||||
let newText = inputBox.text().slice(0, -1);
|
||||
inputBox.val(newText)
|
||||
keyboard.data('value', newText);
|
||||
break;
|
||||
case 'submit':
|
||||
hideVirtualKeyboard();
|
||||
let submitFunction = keyboard.data('submitfunction')
|
||||
submitFunction(inputBox.val());
|
||||
break;
|
||||
case 'shift':
|
||||
if (Application.keyboard.capsLock) break;
|
||||
Application.keyboard.shift = !Application.keyboard.shift
|
||||
Application.keyboard.capsLock = false
|
||||
setKeyboardLayout('default', Application.keyboard.shift ? 'shift' : '')
|
||||
break;
|
||||
case 'capslock':
|
||||
Application.keyboard.shift = false
|
||||
Application.keyboard.capsLock = !Application.keyboard.capsLock
|
||||
let capsLockButton = $('[data-value="capslock"]')
|
||||
capsLockButton.toggleClass('active')
|
||||
setKeyboardLayout('default', Application.keyboard.capsLock ? 'shift' : '')
|
||||
break;
|
||||
case 'space':
|
||||
input = ' ';
|
||||
break;
|
||||
}
|
||||
|
||||
//Stops keys such as F5 being pressed.
|
||||
if (input.length == 1) {
|
||||
if (Application.keyboard.shift || Application.keyboard.capsLock) {
|
||||
input = input.toUpperCase()
|
||||
|
||||
//If shift, reload lowercase
|
||||
if (Application.keyboard.shift) {
|
||||
Application.keyboard.shift = false
|
||||
setKeyboardLayout('default');
|
||||
}
|
||||
}
|
||||
|
||||
let newText = inputBox.val() + input;
|
||||
keyboard.data('value', newText);
|
||||
inputBox.val(newText)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
let setKeyboardLayout = (layout: string, modifier = '') => {
|
||||
if (modifier != '') modifier = `_${modifier}`
|
||||
Application.keyboard.currentLayout = layout
|
||||
let layoutToLoad = Application.keyboard.layouts[layout]
|
||||
|
||||
$('.virtualKeyboardRow').each((index, row) => {
|
||||
/*
|
||||
We start at 1 instead of 0. Makes it easier for non-programmers
|
||||
and translators making their own language packs
|
||||
*/
|
||||
index = index + 1
|
||||
|
||||
let currentRow : string[] = layoutToLoad[`row${index}${modifier}`]
|
||||
|
||||
$(row).children('a').each((keyIndex, button) => {
|
||||
let key = $(button);
|
||||
let keyValue: string = currentRow[keyIndex];
|
||||
|
||||
/*
|
||||
KeyText is the text that appears
|
||||
in the button. KeyData is the value
|
||||
submitted when the button is pressed.
|
||||
*/
|
||||
let keyText = keyValue;
|
||||
let keyData = keyValue;
|
||||
|
||||
key.addClass('posButton');
|
||||
key.addClass('virtualKeyboardButton');
|
||||
|
||||
let pattern = new RegExp(/\[([^)]+)\]/);
|
||||
let matches = keyValue.match(pattern);
|
||||
|
||||
if (matches) {
|
||||
keyText = keyValue.replace(pattern, '');
|
||||
keyData = matches[1];
|
||||
}
|
||||
|
||||
key.html(keyText)
|
||||
|
||||
//Use attr() as some keys have CSS dependent on data-value
|
||||
key.attr('data-value', keyData)
|
||||
key.data('value', keyData)
|
||||
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
$(() => {
|
||||
setupVirtualNumpad()
|
||||
ajax('/ajax/getKeyboardLayout/english', null, 'get',setupVirtualKeyboard, null, null)
|
||||
})
|
||||
Reference in New Issue
Block a user