Synapse jQuery plugin

While working with drupal I discovered I could use some simple navigation tool, or helper to find what I want quickly. This was caused by somewhat messy (in terms of complexity) navigation admin menu present, but there was also complexity growing with each module and I just thought these things could be done easier. I'm not saying drupal is messy, I love drupal :D But I'm a wicked dreamer and passionate developer and so I decided to make an awesome tool for this.

Synapse idea and inspiration


My great inspiration came from one awesome desktop software I use for long time called launchy. I love it, I don't use icons anymore, I hated having a mess on my desktop, all I see now is my beautiful wallpaper. I don't claim I discovered something new, I pretty much just created launchy for web :)

Documentation


Using synapse is very easy. After you download everything all you have to do is include synapse.css and synapse.pack.js. You can also include non packed version of synapse which I added to the ZIP archive in case you guys would like to make some changes or anything. Also there is an image folder, you need to copy it somewhere too (explained below).

After that the last thing to do is initialize synapse properly. Here's an example of what it can look like:

$.synapse({
    items: items, //this should be an array containing your items
    shortcut: 'ctrl+space',
    imgFolder: 'img',
    left: 10,
    top: 10
});


That's the full initialization, here's what the attributes mean:

items - array of items (objects) you want to launch via synapse
shortcut - key shortcut triggering synapse toggle
imgFolder - path to your synapse img folder ... you need to set this correctly so that synapse can find this folder and assign paths correctly
left - left absolute position of the synapse box
top - top absolute position of the synapse box

One thing a little complex here is the items attribute. You need to set this array so that synapse can look up your items and launch your commands. All possible examples are included in the demo, so please look at the source code of the demo page and look up how all the types of commands are created. It's actually very simple, each item needs to have a name parameter (btw each item is an object !) against which your search query is evaluated. So if you want to simplify your work you should create names fitting your needs (as explained on the demo page). If you want to have a link item the only other parameter is link. If you want an event item you need to specify target (jQuery selector) and event (event type, i.e. "click") parameters. If you want to add a function item you need only the func parameter, which should define your function. I recommend markup which I also used on my demo page, since it gives you more flexibility for your called code.

And that's pretty much it ... :)

Final statement


Feel free to do whatever you want with this plugin and its contents. You can edit the code, implement it into your projects ... Enjoy :)
Zobraziť demo Stiahnuť