Pickwhip jQuery
Dans le monde informatique comme ailleurs, il y a de bonnes idées qui se répandent moins bien que d’autres. Le ‘pickwhip’ utilisé dans l’application Adobe After Effects est de celles-là. C’est un outil qui permet en toute simplicité de lier un élément à un autre. Cela peut servir par exemple à lier la couleur d’un élément graphique à la rotation d’un autre… ou un projet à une catégorie. Et c’est très pratique !
N’ayant pas trouvé d’équivalent à implémenter dans une administration web, j’ai décidé d’en écrire un moi-même. J’ai donc utilisé la commodité de jQuery pour écrire un plug-in javascript simulant le fonctionnement du pickwhip.
Démo
Basiquement, on attribue à un élément source une liste d’éléments cible auxquels il a le droit de se lier. Lorsque l’on cliquera sur cet élément source, on activera un pickwhip qui réagira différemment au survol d’éléments cible, d’éléments cible déjà lié, ou d’éléments non-cible, et qui bien sûr effectuera le lien demandé.
Une démonstration valant mieux qu’un long discours, vous pouvez tester le pickwhip.
En pratique
Pour utiliser le pickwhip, vous devrez tout d’abord avoir chargé jquery.js et jquery.pickwhip.js, de préférence dans la balise <head> de votre page.
<script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.pickwhip.js"> </script>
Il faut ensuite initialiser le pickwhip en lui indiquant une url où trouver ses images :
$(document).ready(function(){
$.pickWhip.init({
imageDir: 'whipImg/'
});
});
Si vous souhaitez déplacer les images du pickwhip, vous pouvez remplacer ‘whipImg/’ par leur emplacement actuel, sinon vous pouvez juste lancer $.pickWhip.init() sans paramètre.
Il ne reste plus qu’à définir les cibles et les options de chaque pickwhip, comme dans l’exemple ci-dessous :
$('#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.";
}
});
Ce code attribue un pickWhip à l’élément dont l’id est ’src1′.
Le premier paramètre passé à la méthode pickWhip() est une String à faire interpréter par le sélecteur jQuery.
Ici, on demande à ce que les éléments de classe ‘dropzone’ et de classe ‘dropzone2′ soient réactifs à ce pickwhip.
Le second paramètre est une liste d’options au format json…
Options disponibles :
- linkedHoverClass : classe css à donner à un élément cible déjà lié à cette source lors de son survol.
Type : String
par défaut: linkedWhipHoverTarget - unlinkedHoverClass : classe css à donner à un élément cible non lié à cette source lors de son survol.
Type : String
Par défaut: unlinkedWhipHoverTarget - linkedClass : classe css à donner à un élément cible déjà lié à cette source lorsque showLink est actif.
Type : String
Par défaut : linkedWhipTarget - unlinkedClasss : classe css à donner à un élément cible non lié à cette source lorsque showLink est actif.
Type : String
Par défaut : unlinkedWhipTarget - showLinks : appliquer les classes linkedClass/unlinkedClass aux cibles lorsque l’utilisateur active le pickwhip.
Type : Boolean
Par défaut : true - linkList : liste d’éléments jQuery déjà associés à cette source ou de tableaux associatifs (source, cible) .
Type : Array( [jQuery Object target], [Array( jQuery Object source, jQuery Object target)], [...] ) - callback : fonction à executer après l’association
Type : Function
Note : cette fonction peut prendre 2 paramètres, qui seront respectivement la source et la cible liés.
L’option linkList s’avérera très utile pour initialiser l’état actuel des associations. Vous pouvez lui fournir des cibles pour ce pickwhip, la source du pickwhip leur sera associée. Mais vous pouvez aussi fournir un tableau d’association de type Array(source, cible), car ce n’est pas forcément à la source du pickwhip elle même que vous souhaitez associer la cible. Par exemple, vous voulez peut-être associer la cible à l’élément parent du pickwhip…ou exploiter plus directement les associations faites dans votre base de données !
Pour connaitre à tout moment l’état des associations, vous pouvez interroger la liste globale $.pickWhip.allLinks comme dans l’exemple ci-dessous :
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);
}
