These days the trend is to have a seamless desktop experience in your browser, that means pushing the boundaries of the web applications by trying to mimic the natural behavior of desktop hosted solutions. One of the must-have is undoubtedly a robust and easy-to-use event toolkit. That was one of the heaviest task and probably, to date, one of the features we are most proud of.
We’ll try to make a bunch of articles on how to use the Event toolkit. Today we’ll talk about hot-keys, a hot-key is a key combination that you can use to trigger an action in your web-application, for example you are building a WYSIWYG editor and want to capture combination like Ctrl + B to turn the text in bold.
Here’s how you would create this keyboard event listener with Swell.
Swell.Core.Event.addKeyListener(document, 'ctrl+b', function(event, keys) { if(event.modifiers.ctrl) { if(keys.contains('b')) { Swell.Lib.Selection.getCurrent().wrap('<strong>$1</strong>'); } } }, null, null, true);
Tags: Event, event listener, Hot keys, Javascript, Key combination, keyboard listener, Swell
January 5th, 2010 at 12:40 am
I’m just poking around atm and this post caught my eye. The ctrl+b shortcut is a pretty cool idea. I’m wondering why do you need to check to see if the “ctrl” and “b” are pressed before bolding? Shouldn’t it work like this?
[code]
Swell.Core.Event.addKeyListener(document, 'ctrl+b', function(event, keys) {
Swell.Lib.Selection.getCurrent().wrap('$1');
}, null, null, true);
[/code]
Otherwise you might as well just capture the regular keypress event.
I could be misunderstanding something, I haven’t downloaded swell yet and fooled around with it. I’m definitely on the lookout for something new, though, and that fish is damned sexy ;]
January 5th, 2010 at 7:57 am
@Cory
Good point, I think it should work like this as well, I’m going to make the change.
We are currently working on the Animation library that is yet to be commited but we have made good progress, keep on looking we appreciate any kind of help or feedback.