Welcome to the wordevents demo page!
Let's take a look at the examples provided.

First example

Here we create a wordevents instance which listens for two commands: fontp and fontm, defined through a regular expression. The first will increase the font-size of the document and the second will decrease it. Let's try it, click the "run javascript" button and then type one of the two commands. Remember to type the words' characters with a time interval minor than 500ms!

var changeFontSize = function(evts, word) {
  if(word == 'fontp') {
    $(this).setStyle('font-size', ($(this).getStyle('font-size').toInt() + 1) + 'px');
  }
  else {
    $(this).setStyle('font-size', ($(this).getStyle('font-size').toInt() - 1) + 'px');
  }
}

var myke = new wordevents({
  target: document.body,
  acceptdCode: function(evt) {
    return (evt.code > 64 && evt.code < 91) || false;
  }
});
myke.listen(/^font[pm]/, changeFontSize);
myke.activate();

run javascript

Second example

The callback function receives the array of all the events which have generated the word as an argument, so for example we can check if some special keys were pressed or not, for example here I perform different actions if the shift or the alt keys are pressed during the command. So if you type the word resize with the shift key pressed the container is sized to 800px, if you type resize with the alt key pressed the container is sized to 400px, otherwise the container gets its proper size. Notice that the shift key must be pressed for the entire word resize, while the alt key must be pressed only when typing the first letter r.

resizeContainer = function(evts) {
  var container = $$('.we-container')[0];
  var dft_width = container.getStyle('width');
  var shift = true;
  var alt = true;
  for(var i = 0, l = evts.length; i < l; i++) {
    if(!evts[i].shift) {
      shift = false;
    }
  }
  if(!evts[0].alt) {
    alt = false;
  }
  if(shift) {
    width = '100%';
  }
  else if(alt) {
    width = '400px';
  }
  else {
    width = dft_width;
  }
  container.setStyle('width', width);
}
var myke2 = new wordevents();
myke2.listen('resize', resizeContainer);
myke2.activate();  

So click the run javascript button below and start playing with the resize word!

run javascript

project page documentation download