Jim, the JavaScript modal framework

Nowadays, there are a lot of Ajax and Web 2.0 JavaScript frameworks. This actually is a good thing, but I believe that a good ol' geek aspect is missing. That's why I developed Jim.

Jim is not :

  • An ajax framework
  • An animation framework

What Jim does:

  • Jim adds a command line interface to a webpage, inspired by vi
  • Jim allows easy developement of keyboard based applications

I know what you think, it sound like WTF?. Here is a simple example to help you understand. The commands are straightforward:

  • : opens the CLI
  • ESC closes the CLI
  • TAB autocompletion
  • Return to execute

If you've ever used a terminal emulator, it won't be difficult…
I've implemented 4 commands in the example:

  • echo : echo pli prints "pli"
  • eval : evaluates a javascript statement : eval "echo(1+1)"
  • set field value : sets the field field to value
  • submit : submit the pseudo form

You might ask how this is a framework, and I'd reply that it was made in such manner that it is possible to define custom commands the way you want. Here is the configuration file used in the example:

_('echo', echo);
_('eval', eval);

_('set', function(what, value) {
  $$('#'+what+' .value')[0].update(value);
},{
  suggestions: function (n, a) {
    switch (n) {
      case 1:
        return $$('.settable').pluck('id');
      case 2:
        switch (a.last())
        {
          case 'name':
            var names;
            new Ajax.Request('names.htm', {
              method: 'get',
              onSuccess: function (e) {
                names = eval(e.responseText);
              },
              asynchronous: false
            });
            return names;
          default:
            return Array();
        }
      default:
        return Array();
    }
  },
  callback: function (id, a) {
    $$('.settable').each(function(e) {
      e.down('.field').removeClassName('highlight');
    });
    if (id)
      if (a.length == 0)
       {
        $$('#'+id+'.settable')[0].down('.field').addClassName('highlight');
       }
  }
});

_('submit', function () {
  var params = {};
  var submit = true;
  $$('.settable').each(function (e) {
    var val = e.down('.value').innerHTML;
    if (val.blank())
     {
      err('Please fill in <b>all</b> fields');
      submit = false;
     }
    params[e.id] = val;
  });
  if (submit)
    new Ajax.Request('names.php', {
      parameters: params,
      onSuccess: function (e) {
        echo(e.responseText);
      }
    });
});

This is highly modular and allows almost all possible commands. I have had a few hesitations about polluting the namespace, but I add only three function echo err _, which can be renamed.

Downloaded : 103 times
File : jim-0.32.tar.gz
Size: 63 ko

One Response to "Jim, the JavaScript modal framework"

Syntactic Sugar » Blog Archive » VI in JavaScript says:

[...] A cool addition would be an implementation of auto completion, like the one I developed in Jim. [...]

Leave a Reply