Extension Mootools (Gestion des Evenements) : whileClick.js

Je viens de réaliser une petite extension pour mootools qui permet d'ajouter un nouvel évènement, un peu exotique :), mais qui peut s'avérer très utile : un "whileClick".

L'évènement "whileClick" représente par cette dénomination, l'action d'un long clic avec la souris.

Vous pouvez donc retrouver sur cet article les sources de cette extension des évènements mootools, ainsi qu'une démonstration de son utilisation et une documentation complète du script whileClick.js

Il ne vous reste donc plus qu'a cliquer ici pour accèder à l'article .

Extension mootools : Un évènement long clic avec mootools et whileClick

Téléchargement de whileClick.js

Vous pouvez télécharger le fichier d'extension sous 2 formats :

Format complet : le code source est parfaitement lisible et commenté

Format compressé (YUI Compressor): les variables sont renommées, le code est nettoyé et les commentaires sont enlevés

Démonstration whileClick

Pour mieux comprendre l'action générée par l'évènement whileClick, vous trouverez ci dessous un exemple ou on désire incrémenter ou décrémenter la couleur de l'arrière plan d'un bloc.

Vous pouvez télécharger l'exemple fonctionnel ici : ZIP, TAR.GZ

Spécification de la classe whileClick :

La classe "whileClick" :

La classe whileClick retient deux paramètres principaux :

Element : L'élément auquel s'appliquera l'évènement.
bindFunction : la fonction qu'on désire exécuter lors du lancement de l'évènement
Méthodes :
launch : Lance l'exécution périodique de la fonction
mousedown : la variable qui reçoit la fonction bindFunction à exécuter lors du lancement de l'évènement mousedown
mouseup : Initialise l'arrêt de l'exécution de la fonction bindFunction lors du lancement de l'un des évènements mousedown ou mouseleave
stop : vide le timer de l'exécution périodique ( voir periodical )
Valeurs :
events : objet retenant les évènements mousedown et mouseup ou mouseleave de la classe ( { up, down } )
bindFunction : contient la Fonction attachée à l'évènement, elle est initialisée lors de la création d'un objet whileClick
element : contient l'élément auquel on attache l'évènement
timer : contient le timer de l'exécution périodique de la fonction bindFunction

Mouse

La classe whileClick est totalement paramétrable et extensible, vous pourrez donc l'étendre et la paramétrer selon votre cas d'utilisation

J'espère que cette extension vous sera utile, il me reste donc qu'à vous inviter à me laisser vos appréciations, commentaires ou bugs auquels vous serez confrontés.

Bon codage

Commentaires

1. Le vendredi 9 mai 2008 à 15:37, par van

Merci pour cette extension, c'est exactement ce que je cherchais !

Ca va m'encourager à utiliser Mootools

2. Le vendredi 9 mai 2008 à 16:00, par youssef

Je t'en prie van c'est fait pour !

3. Le dimanche 15 février 2009 à 13:32, par matteo

Bonjour,

Je ne parviens pas a faire tourner cette extension avec la version 1.2 de mootools..
Est-ce normal?

Excellente extension cependant

Matteo

4. Le mercredi 4 mars 2009 à 16:17, par philodido

Bonjour,

Merci Youssef pour cette classe très classe. C'est tout à fait ce que je chercher. Ca fonctionne super bien avec mootools 1.1 mais je n'ai pas réussit à la faire fonctionner avec Mootools 1.2.
Ca m'embête vraiment parce que c'est en 1.2 que j'en avais besoin.
Voici le message d'erreur que j'ai quand j'utilise la 1.2 : TypeError : Value undefined (result of expresion Element.NativeEvents.push) is not objet. (ligne 120 dans le fichier mootoolsWhileClick.js où j'ai copié la class).

Je suis loin d'avoir tes compétences en mootools mais j'ai comparé les class mootool1.1 et 1.2 et j'ai remarqué que le tableau dans lequel doit être ajouté la chaine de caractéres: 'whileClick' ne prend plus des chaines de caractères:
Element.NativeEvents = [
'click', 'dblclick', 'mouseup', 'mousedown', //mouse buttons
'mousewheel', 'DOMMouseScroll', //mouse wheel
'mouseover', 'mouseout', 'mousemove', //mouse movement
'keydown', 'keypress', 'keyup', //keys
'load', 'unload', 'beforeunload', 'resize', 'move', //window
'focus', 'blur', 'change', 'submit', 'reset', 'select', //forms elements
'error', 'abort', 'contextmenu', 'scroll' //misc
];

mais des objets:

Element.NativeEvents = {
click: 2, dblclick: 2, mouseup: 2, mousedown: 2, contextmenu: 2, //mouse buttons
mousewheel: 2, DOMMouseScroll: 2, //mouse wheel
mouseover: 2, mouseout: 2, mousemove: 2, selectstart: 2, selectend: 2, //mouse movement
keydown: 2, keypress: 2, keyup: 2, //keyboard
focus: 2, blur: 2, change: 2, reset: 2, select: 2, submit: 2, //form elements
load: 1, unload: 1, beforeunload: 2, resize: 1, move: 1, DOMContentLoaded: 1, readystatechange: 1, //window
error: 1, abort: 1, scroll: 1 //misc
};

Mais après je suis bloqué pour pouvoir adapter le code.
Est ce que tu aurais la solution ?

En tout cas beau boulo !
A+

Philodido

5. Le lundi 16 mars 2009 à 14:08, par philodido

Bonjour,

Pour ceux que ça intéresse, j'ai réécrit le code pour le rendre compatible avec mootools 1.2.
Faites moi un retour en postant un message ici.

/************************************************************
whileClick class
*************************************************************/
var whileClick = new Class ({

events : { down:null, up:null },
bindFunction: null,
element: null,
timer: null,
ms: 200,
initialize: function(element,bindFunction) {
this.element = element;
this.bindFunction = bindFunction;
var mainObj = this;
this.element.addEvent('mousedown',function(event){ mainObj.launch(event); });
},
launch: function(event) {
this.events.down = new Event(event);
this.timer = this.bindFunction.periodical(this.ms);
var mainObj = this;
document.addEvent('mouseup', function(event) { mainObj.mouseup(event); });
this.element.addEvent('mouseleave',function(event){ mainObj.mouseup(event); });
},
mouseup: function(event) {
this.events.up = new Event(event);
this.stop();
},
stop: function() {
$clear(this.timer);
}
});
/******************************************************/

/******************* Mootools Patch *******************/

Element.Events.whileClick = {
base: 'mousedown',
onAdd:{ call: function (element,fn){
new whileClick( element, fn );}
}
};

A+

Philodido

6. Le lundi 16 mars 2009 à 23:49, par youssef

Merci a toi philodido pour cette contribution, désolé du retard j'avais oublié de lire les commentaires.

Je me permet de la publier pour que les autres en profitent.

7. Le mardi 17 mars 2009 à 15:38, par philodido

Pas de problème c'est fait pour
A+
Philodido

8. Le jeudi 16 avril 2009 à 20:46, par matteo

Salut,
Ca marche impec avec la version 1.2
Merci

9. Le mercredi 24 mars 2010 à 03:26, par club penguin

Je ne parviens pas a faire tourner cette extension avec la version 1.2 de mootools..
Est-ce normal?

Youssef Boubia - NTIC Blog

Extension Mootools (Gestion des Evenements) : whileClick.js

Extension mootools : Un évènement long clic avec mootools et whileClick

Téléchargement de whileClick.js

Démonstration whileClick

Spécification de la classe whileClick :

La classe "whileClick" :

Bookmarks

Trackbacks

Commentaires

Ajouter un commentaire

Question pour un développeur web

Tags

Catégories

Publicité

Calendrier

Citations

À retenir

Archives

Liens

Syndication

« avril 2008 »
lun	mar	mer	jeu	ven	sam	dim
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30