Freelance Expert Technique Magento - Éditeur de Tags pour image avec jQuery

CONTACT
RSS

Éditeur de Tags pour image avec jQuery

Salut tout le monde !
Alors ici nous allons rapidement voir comment réaliser un éditeur de Tag en javascript. Bon celui que je présente ici est assez simple, il permet simplement de placer des indicateurs révélant une information au survol.
Vous trouverez, comme d’hab’, une dĂ©mo et les sources ci-dessous. Pour les explications, merci de lire la suite :)


Allez c’est parti !
Bon dans un premier temps, vous constaterez que j’utilise toujours jQuery au lieu de $, en fait j’ai pris l’habitude de systĂ©matiquement utiliser le jQuery.noConflict() Ă  force de faire Ă©voluer des applys web ayant tournĂ©es sous Scripaculous ou Prototype que je ne peux totalement bannir pour des raisons propres Ă  chacune des apply, (pas envie de me retaper tout le code). Donc pour ceux qui ne le savent pas, jQuery.noConflict() permet une cohabitation parfaite des deux librairies.

Voyons maintenant comment nous allons réaliser notre éditeur de Tag.
Je rappelle ce que nous voulons faire : Créer un module permettant de générer des éléments qui au survol, révéleront une information spécifiée lors de leur sauvegarde.

Voyons le HTML :

<div id="main_container">
	<div style="display:none;" id="hidden_cross_url">tick.png</div>
	<div id="tag_new_product">
		<input type="text" name="product_autosuggest" id="product_autosuggest" />
		<input type="hidden" name="input_tag_x" id="input_tag_x" />
		<input type="hidden" name="input_tag_y" id="input_tag_y" />
		<div id="hidden_validation_product">
			<a id="submit_product_confirm" class="info_span">
				<img src="submit_product.png" alt="" />
				<span>Tagger</span>
			</a>
			<a id="submit_product_cancel" class="info_span">
				<img src="cancel_product.png" alt="" />
				<span>Annuler</span>
			</a>
		</div>
	</div>
        <div id="content_tags"></div>
</div>

Très simple !
div#content_tags aura pour background notre image et div#tag_new_product sera notre “Taggeur”, il se prĂ©sentera comme un formulaire et stockera les informations suivantes :
- Texte Ă  afficher
- Coordonnées X et Y pour notre Tag
a#submit_product_confirm et a#submit_product_cancel sont ni plus ni moins que des boutons homemade. En fait c’est une image qui rĂ©vèle, au survol de souris, le contenu dans le lien, grâce au petit bout de javascript suivant :

function load_info_bulles(){
	var public_timeout_hide = null;
	var children = null;
	jQuery('a.info_span span').hide();
	jQuery('a.info_span').die('mousenenter');
	jQuery('a.info_span').die('mouseleave');
	jQuery('a.info_span').live('mouseenter',function(){
			children = jQuery(this).children('span');
			children.show();
		});
	jQuery('a.info_span').live('mouseleave',function(){
			children = jQuery(this).children('span');
			children.hide();
		});
	jQuery('.info_span span').corner('2px');
}

Maintenant je vais expliquer un peu comment fonctionne le générateur de tag avant de détailler les différentes fonctions.

1- On charge les tags déjà présents pour la photo

2- On place un écouteur sur l’évènement Click qui réagit de la manière suivante :

- Il affiche un pointeur Ă  l’emplacement du Click

- Il affiche le formulaire de spĂ©cification du texte et y stocke les coordonnĂ©es de notre Tag (Auxquelles nous avons prĂ©alablement retirĂ© les coordonnĂ©es de notre div#content_tags). Ce formulaire possède Ă©galement un Ă©couter sur les deux liens “Tagger” et “Annuler“.

- Tagger : “Valide” le formulaire, crĂ©e un rendu visuel du Tag et le stocke en Base via appel Ajax, puis rĂ©initialise le formulaire.

- Annuler : “Annule” l’action, supprime le pointeur et rĂ©initialise le formulaire.

Je prĂ©cise que la partie php n’est pas prĂ©sente ici, nĂ©anmoins j’ai prĂ©parĂ© les appels Ajax dans les sources (ils sont en commentaire). Voyons maintenant plus en dĂ©tail les diffĂ©rentes fonctions.

La première fonction que j’appelle au chargement de la page est la suivante :

/*Fonction préparant les événements*/
function make_it_ready(){
	load_tags();
	make_tag(jQuery('div#content_tags'));
	bind_taggeur();
	load_info_bulles();
}

Cette dernière appelle la fonction chargeant les tags dĂ©jĂ  prĂ©sents, “Bind” le conteneur de tag, “Bind” le formulaire Taggeur et prĂ©pare mes infos bulles.

Affichage des Tags présents

function load_tags(){
	tag_saved_exemple1_x = 19;
	tag_saved_exemple1_y = 19;
	tag_saved_exemple1_text = "Mon tag d'exemple";

	/*J'applique la position en MARGIN-TOP et non en TOP, sinon l'element n'aura pas la mĂŞme position en fonction de l'emplacement du conteneur*/
	rendu_tag_exemple = '<a style="position:absolute;margin-top:'+tag_saved_exemple1_x+'px;margin-left:'+tag_saved_exemple1_y+'px;" class="it_is_tagged"><img src="'+jQuery("div#hidden_cross_url").html()+'" alt="" /><span>'+tag_saved_exemple1_text+'</span></a>'
	jQuery('div#content_tags').append(rendu_tag_exemple);
	jQuery('a.it_is_tagged').hover(function(){
		jQuery(this).find('span').show();
	},function(){
		jQuery(this).find('span').hide();
	});
}

Normalement ici vous devez avoir un appel Ajax qui vous renvoie l’ensemble des tags dĂ©jĂ  positionnĂ©s, mais pour l’exemple, j’ai crĂ©Ă© un Tag en dur.
Vous noterez que le Tag est en Absolute et que je le positionne avec Margin-top et Margin-left. Tout simplement parce que si je le positionne avec Top et Left, sa position variera en fonction de la résolution de votre écran.

Écouteur principal

function make_tag(content_cible){
	reset_tagger();
	content_cible.click(function(e){
	/* je vérifie que la cible est bien la zone de tag et non un élement superposé (comme mon taggeur)*/
	if(e.target.id == "content_tags"){
	var public_timeout = null;
	//console.log(e);
	if(jQuery('div#tag_new_product').is(':visible')){

	/*si le taggeur est visible, je dois d'abord le valider ou l'annuler pour mettre un autre tag*/
	jQuery('div#tag_new_product').effect('highlight');

	}else{

	var position_y_choisie=e.pageY-content_cible.position().top-18;
	var position_x_choisie=e.pageX-content_cible.position().left-18;
	console.log(position_x_choisie+";"+position_y_choisie);
	/*Je place ces informations dans mon taggeur*/
	jQuery('input#input_tag_x').val(position_x_choisie);
	jQuery('input#input_tag_y').val(position_y_choisie);
	var cross_tag = "<a id='currently_pointed' style='position:absolute; margin-left:"+position_x_choisie+"px; margin-top:"+position_y_choisie+"px;'><img src='"+jQuery("div#hidden_cross_url").html()+"' alt='Cross' /></a>";
	jQuery('div#content_tags').append(cross_tag);

	/*je place correctement mon taggeur*/
	jQuery("div#tag_new_product").css({
		"margin-top" : 27 + parseInt(position_y_choisie) + "px",
		"margin-left" : 29  + parseInt(position_x_choisie) + "px"
	});

	/*Puis je l'affiche*/
	jQuery('div#tag_new_product').show();

	}
	}
	});
	jQuery('div#content_tags').animate({opacity:0.5},function(){jQuery('div#content_tags').animate({opacity:1});});
}

Ici je rĂ©cupère la position choisie, je la stocke dans le formulaire et le rĂ©vèle au bon endroit ainsi qu’un pointeur (mon image Tick.png). Notez que je soustrais au prĂ©alable des coordonnĂ©es de mon Tag celles de son conteneur. Les chiffres prĂ©sents sont tout simplement des correctifs pour que ça tombe niquel par rapport Ă  la taille de Tick.png.
Enfin j’affiche mon div#tag_new_product

Écouteur du formulaire

/*Fonction créant le Tag configuré*/
function bind_taggeur(){
	jQuery('a#submit_product_confirm').die('click');
	jQuery('a#submit_product_confirm').live('click',function(){
	/*Ci dessous un exemple d'appel ajax pour sauvegarder votre produit en base*/
	/*
	jQuery.ajax({
		type: "POST",
		url: get_base_url+"fr/slider/index/tagsomething/text/"+jQuery('input#product_autosuggest').val()+"/x/"+jQuery('input#input_tag_x').val()+"/y/"+jQuery('input#input_tag_y').val(),
		success: function(html){
			apply_validation();
			}
		});
	*/

	 apply_validation(jQuery('input#product_autosuggest').val(),jQuery('input#input_tag_x').val(),jQuery('input#input_tag_y').val());
	});
	jQuery('a#submit_product_cancel').die('click');
	jQuery('a#submit_product_cancel').live('click',function(){
		jQuery('div#tag_new_product').hide();
		jQuery('a#currently_pointed').remove();
		reset_tagger();
	});
}

Ici j’ai deux Ă©couteurs, un pour annuler, l’autre pour confirmer la crĂ©ation du Tag. En cas de crĂ©ation du tag j’appelle ma fonction apply_validation() oĂą je passe en paramètres les informations suivantes : Valeur de l’input text, coordonnĂ©es X et Y.

Validation du Tag

function apply_validation(text,x,y){
	jQuery('div#tag_new_product').hide();
	reset_tagger();

	jQuery('a#currently_pointed').append('<span>'+text+'</span>');
	jQuery('a#currently_pointed').hover(function(){
		jQuery(this).find('span').show();
	},function(){
		jQuery(this).find('span').hide();
	});
	jQuery('a#currently_pointed').addClass('it_is_tagged');
	jQuery('a#currently_pointed').attr('id','');
	jQuery('div#content_tags').animate({opacity:0.5},function(){jQuery('div#content_tags').animate({opacity:1});});
}

Pas besoin de dĂ©tailler, c’est très simple.
Normalement cette fonction n’a pas lieu d’ĂŞtre, initialement je rĂ©-appelle ma fonction de chargement des tags dĂ©jĂ  prĂ©sents, mais pour l’exemple je crĂ©e un rendu visuel.

VoilĂ  le tutoriel est achevĂ©, j’espère qu’il vous plaira.
J’ai utilisĂ© ce script pour administrer un Slider en Home Page sur un E-Commerce au sein duquel ils voulaient voir figurer sur chacune des images du Slider les prix des diffĂ©rents produits y Ă©tant reprĂ©sentĂ©s ainsi qu’au survol un lien vers ce dernier.

Ha oui, j’ai remarquĂ© que le “Taggeur” est buggĂ© sous IE, franchement j’avais la mĂ©ga flemme de corriger ce bug.. Mes excuses aux fous utilisateurs d’internet explorer.

CATÉGORIES :

Javascript

, Tutoriels

, jQuery

  1. ça me fait penser à quelque chose ce plugin :p

    GĂ©nial Charles ! t’es un bon ^^

    • MasterBotWeb
    • September 22nd, 2012

    C’est gĂ©nial, ça fait un bon moment que je cherche un script comme celui ci ! un grand merci !

    Great !!! Un 5 Etoiles ;)