isleward/src/client/ui/templates/messages/mobile.js

define([
	'html!ui/templates/messages/tplTab'
], function (
	tplTab
) {
	const extensionObj = {
		renderKeyboard: function () {
			this.find('.keyboard').remove();

			let container = $('<div class="keyboard"></div>')
				.appendTo(this.el);

			let keyboard = {
				0: 'qwertyuiop|asdfghjkl|zxcvbnm',
				1: 'QWERTYUIOP|ASDFGHJKL|ZXCVBNM',
				2: '1234567890|@#&*-+=()|_$"\';/'
			}[this.kbUpper].split('');

			//Hacky: Insert control characters in correct positions
			//Backspace goes after 'm'
			if (this.kbUpper === 0) {
				keyboard.splice(keyboard.indexOf('z'), 0, 'caps');
				keyboard.splice(keyboard.indexOf('m') + 1, 0, '<<');
			} else if (this.kbUpper === 1) {
				keyboard.splice(keyboard.indexOf('Z'), 0, 'caps');
				keyboard.splice(keyboard.indexOf('M') + 1, 0, '<<');
			} else if (this.kbUpper === 2) 
				keyboard.splice(keyboard.indexOf('/') + 1, 0, '<<');

			keyboard.push(...['|', '123', ',', 'space', '.', 'send']);

			let row = 0;
			keyboard.forEach(k => {
				if (k === '|') {
					row++;

					const postGapCount = row === 4 ? 0 : row - 1;
					for (let i = 0; i < postGapCount; i++) 
						$('<div class="gap" />').appendTo(container);
					
					$('<div class="newline" />').appendTo(container);
					
					const preGapCount = row === 3 ? 0 : row;
					for (let i = 0; i < preGapCount; i++) 
						$('<div class="gap" />').appendTo(container);

					return;	
				}

				let className = (k.length === 1) ? 'key' : 'key special';
				if (k === ' ') {
					k = '.';
					className = 'key hidden';
				}

				className += ' ' + k;

				let elKey = $(`<div class="${className}">${k}</div>`)
					.appendTo(container);

				if (!className.includes('hidden')) 	
					elKey.on('click', this.clickKey.bind(this, k));
			});
		},

		clickKey: function (key) {
			window.navigator.vibrate(20);

			let elInput = this.find('input');

			const handler = {
				caps: () => {
					this.kbUpper = (this.kbUpper + 1) % 2;
					this.renderKeyboard();
				},

				123: () => {
					this.kbUpper = (this.kbUpper === 2) ? 0 : 2;
					this.renderKeyboard();
				},

				space: () => this.clickKey(' '),

				'<<': () => {
					elInput.val(elInput.val().slice(0, -1));
					this.find('.input').html(elInput.val());
				},

				send: () => {
					this.sendChat({ which: 13 });
					this.find('.input').html('');
					this.find('input').val('');
				}
			}[key];
			if (handler) {
				handler();
				return;
			}

			elInput.val(elInput.val() + key);
			this.enforceMaxMsgLength();

			this.find('.input').html(elInput.val());
		}
	};

	return {
		init: function () {
			$.extend(this, extensionObj);

			this.kbUpper = 0;

			this.el.on('click', this.toggle.bind(this, true));
			this.renderKeyboard();

			$(tplTab)
				.appendTo(this.find('.filters'))
				.addClass('btnClose')
				.html('x')
				.on('click', this.toggle.bind(this, false, true));
		}
	};
});