Click to change color scheme

Notes on codes, projects and everything

jQuery holdEvent

The making of this plugin was completely a random act of hand-itchiness. A friend of mine (@cornguo) published a fun app online. There is a name for this kind of app, but I can’t recall at the moment. It typically displays some buttons (usually in a grid), and clicking them causes some sound to be played. The interesting part in cornguo’s app is that there’s a text-input field where the name of the buttons can be typed-in for replaying.

After playing with it for a while, I got sick of having to type in the words manually. Therefore I proposed that it would be nice if he can allow the words to be inserted to the field after a long press. He sort of rejected to implement himself, but gave me the link to the project repository instead. Make a pull request after you have implemented it, he said.

I began working on it. It was indeed not a really difficult task as I finished the first revision in minutes. Then I thought why not make it repeat the behavior itself if the user wants to. So after spending some time with it, I realized it would be even better if it is a jQuery plugin. Therefore here it is, after a night of hacking I am proudly introducing my holdEvent plugin.

The plugin is a simple hack, so do not expect it to be smart. In order to use it, one only need two options (both optional).

$(someElement).holdEvent({
    handler: function(clickedElement) { ... },
    time: 1500
});

The handler option requires a function receiving exactly one argument, which is the respective jQuerified-element. This is optional, but by default it does nothing unless otherwise specified. While it is supposedly an “Event” (in fact it is a chain of events), but the argument is not an eventObject like others. The scope of the function is unfortunately the settings variable though { handler: ..., time: ... }. For now I don’t really see the need to alter it though.

The second option is the time, for now everything is fixed around this. Initial hold will take that much miliseconds to happen. Then it would delay for half the time waiting for the user to release his/her finger. If the finger is not lifted, then it would start to repeat with interval of tenth the time. The default value of time is 1500 (in miliseconds).

Of course there are much more work to be done on this, and I expect more problems will occur in the coming days. While cornguo currently only pulled and merge one of my first changesets, I will probably find some time to polish this hack in future. The code will most probably licensed in a permissive license like BSD. I have to check jQuery’s policy before making final decision though.

Speaking of re-inventing the wheel, there are probably a lot of people doing this already. I am quite satisfied with my own wheel though, even though I am doing this mainly to revise my javascript/jQuery knowledge.

leave your comment

name is required

email is required

have a blog?

This blog uses scripts to assist and automate comment moderation, and the author of this blog post does not hold responsibility in the content of posted comments. Please note that activities such as flaming, ungrounded accusations as well as spamming will not be entertained.