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 ;)

  2. 綠豆 說道:以下是我的single.php,可否幫我看看該截取哪一段呢?謝謝================================================================== ”.__(“Pages:”).’ ‘, ‘after’ => ”, ‘next_or_number’ => ‘number’)); ?> Posted in Sorry, no posts matched your citreria.==================================================================分頁設定成功~~可是~~在文章截斷的地方加上more標籤是在網頁語法裡加嗎?!?!  是要加跟嗎?!?!還是要在css裡加(這個我就不會加囉~~)   阿湯說:可以先給網址嗎