In the world of computers like in any other, good ideas exist that spread slower than others. The ‘pickwhip’ used in the Adobe After Effects application is one of those. It’s a tool the allows you to link an element to another in a simple way. This can be useful to link the color of a graphic element to the rotation of another one… or a project to a category. And it’s very useful !

Not being able to find any equivalent to use in a web admin, I’ve decided to write one by myself. So I’ve used the convenience of jQuery to write a javascript plug-in that simulates the pickwhip’s behaviour.

Demo

Basically, we bind to a source element a list of target elements to which it can link. From then on, when we click on that source element, we activate a pickwhip that will react differently to a rollover on a target element, on an already linked element, or on a non-target element, and commit the linking when needed.

A demonstration being better that a long speech, you can test the pickwhip.

In practice

To use the pickwhip, you first need to load jquery.js and jquery.pickwhip.js, preferably in the section of your page.

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.pickwhip.js"> </script>

Then you have to initialize the pickwhip.

$(document).ready(function(){
	$.pickWhip.init({
		imageDir: 'whipImg/'
	});
});

If you want to move the pickwhip images, you can replace ‘whipImg/’ by the path to their new location, else you can just launch $.pickWhip.init() with no parameter.

Now you just have to declare the targets and the options for each pickwhip, as in the present example :

$('#src1').pickWhip('.dropzone, .dropzone2',{
	unlinkedHoverClass	: 'whipHover1',
	linkedHoverClass	: 'whipHoverLinked1',
	linkList		: Array( $('#drop2') ),
	showLinks		: true,
	linkedClass		: 'whipLinked1',
	unlinkedClass		: 'whipUnlinked1',
	callback		: function(source, target){
		alert("The link between the source " + source.attr('id') + " and the target " + target.attr('id') + " has been updated.";
	}
});

This code binds a pickwhip to an element of id ‘src1′.

The first parameter passed to the pickWhip() method is a String to be interpreted by the jQuery selector.

Here, we ask elements of class ‘dropzone’ and ‘dropzone2′ to react to this pickwhip.

The second parameter is a list of options formatted in json…

Options available :

• linkedHoverClass : css class to set to a target element already linked to this source when hovered.
  Type : String
  default: linkedWhipHoverTarget
• unlinkedHoverClass : css class to set to a target element not linked to this source when hovered.
  Type : String
  default: unlinkedWhipHoverTarget
• linkedClass : css class to set to a target element already linked to this source showLink is active.
  Type : String
  Par défaut : linkedWhipTarget
• unlinkedClasss : css class to set to a target element not linked to this source when showLink is active.
  Type : String
  Par défaut : unlinkedWhipTarget
• showLinks : set the linkedClass/unlinkedClass classes to the targets when the user activates this pickwhip.
  Type : Boolean
  default : true
• linkList : list of jQuery elements or associative arrays (source, target) already linked to this source.
  Type : Array( [jQuery Object target], [Array( jQuery Object source, jQuery Object target)], [...] )
• callback : function to run after linking.
  Type : Function
  Note : This function can take 2 parameters, that will respectively be the source and the target being linked together.

The linkList option will prove very useful to initialize the current state of associations. You can pass it targets for this pickwhip, the pickwhip’s source will be considered as linked to them. But you can also pass it asscociative arrays formatted like Array(source, target), because it’s not always to the source of the pickwhip that you want to link the target. For example, you may want to link the target to the parent element of the pickwhip… or exploit in a more straight forward way what’s in your database !

To get the current associations list, you can check the global list $.pickWhip.allLinks as described in this example :

function showLinks(){
	var links = '<p>Current associations are :<\/p>
<ul>';
	for (var i=0; i<$.pickWhip.allLinks.length; i++) {
		for (var j=0; j<$.pickWhip.allLinks[i].length; j++) {
			links += '<li>source : '+$.pickWhip.allLinks[i][j][0].html()+' _ dest : '+$.pickWhip.allLinks[i][j][1].html()+'<\/li>';
		}
	}
	links +='<\/ul>';
	$('#links').html(links);
}