Java Script form handler class. Part 1: processing hot keys.

Java Script form handler class. Part 1: processing hot keys. Jun 22, 2008

In all my recent projects I use FormHandler - the class that solves tasks of handling hot keys, displaying load indicators and locking. I use this class for building client-side form classes. In the following 3 tutorials I will reveal the class code and demonstrate examples of its usage.

This class is based on MooTools 1.2. You may download all files for this tutorial here: hotkeys.zip.

Handling hot keys

I like MooTools for it simplicity and an elegance of code based on this library. When I started developing the hot keys processing I decided this feature should be designed in the MooTools manner. As a result I got a class that I inherit in all client-side form classes in my applications. It is very simple to setup the key map in a constructor of a child class:

this.parent({
keyMap: {
'control+l, control+d': this.reloadTasks.bind(this),
'LoginForm:enter': this.login.bind(this)
}
});

You may look how it work here.

Class FormHandler implements MooTools Options class. FormHandler options have keyMap key that is used for defining a correspondence between hot keys and handlers. A value to be passed to keyMap should be an object (or hash) with hot key definition strings in keys and handlers in values. The key definition strings syntax follows.

Just a key e.g. a, c
Modifier(s)+key e.g. control+t, or control+alt+t
Target or parent element Id: key e.g. LoginForm:enter or TaskList:control+a
Multiple hot key sets in a same declaration e.g. control+t, alt+m

In the example I have defined the simple KeyTester class that implements the FormHandler class.

var KeyTester = new Class({
Extends: FormHandler,
initialize: function()
{
this.parent({
keyMap: {
'TaskForm:shift+control+t,shift+control+m': this.addTask.bind(this),
'LoginForm:enter': this.login.bind(this)
}
});
},
addTask: function()
{
alert('Task added!');
},
login: function()
{
alert('Login form submitted!');
}
});
window.addEvent('load', function(){
new KeyTester();
});

Please note - if HTML element identifiers are used in hot key declarations (TaskForm:shift+control+t) the FormHandler class should be instanced only after the page elements are loaded. You may process the onLoad or onDomReady events of window object for creating the object.

The code of FormHandler that is responsible for hot key handling is not so interesting to analyse it here. It parses the hot key definitions and finds a suitable handler when KeyDown event occurs. In the constructor it assigns a handler for KeyDown event for the Window object for all browsers and for Document object for Internet Explorer.

Known issues

Unfortunately it is not possible to cancel default event actions in some browsers. As these browsers have commands assigned with specific hot keys (like ctrl+t in FireFox for New Tab) this is impossible to use some combinations of hot keys in web applications.

To be continued

In following tutorials I will demonstrate how the locks functionality is implemented. The locks are useful when you need to prevent a code execution until some previous call is complete. This is especially necessary with AJAX requests initiated by hot keys.

0 comments | Posted in javascript, tutorials