WebSVN – eFlore/Applications.eflore-consultation – Diff – /trunk/presentations/scripts/fiche-synthese.js


 
//+----------------------------------------------------------------------------------------------------------+
// Onglets et Portlets
/**
 * Les variables suivantes ont été ajoutée par php
 * 
 * var urlTexteBrutSectionWikiTpl : url pour obtenir le texte brut d'une section de wiki
 * var urlEditionSectionWikiTpl : url pour éditer une section du wiki 
 * var urlTexteFormateSectionWikiTpl : url pour obtenir le texte formaté en html d'une section de wiki
 * var pageWikiTaxon : url pour obtenir le texte formaté en html d'une section de wiki
 * 
*/
 
/**
 * Variables globales du script
 */
var modules = Array();
var tableauOnglets = Array();
var nbOngletsInvisibles = 0;
var ongletSyntheseCharge = true;
 
/** Classe Module
* Définit un module de type portlet
**/
function Module(id, module, onglet, statique) {
 
	// Variables de classe : identifiant, titre, et le HTML du résumé à afficher dans le contenu
	this.id = id;
	this.titre;
	this.htmlResume;
	this.statique = statique;
 
	// Les objets Portlet et Onglet que l'ont garde en mémoire pour pouvoir y accéder facilement 
	this.portlet = module;
	this.onglet;
 
	// creerPortlet 
	// Créer l'objet Portlet HTML à afficher et le stocker dans les variables de classe
	this.creerPortlet = function() {
		var objet = this;
 
		var titre = $(module).children('.titre');
		titre.className = 'titre ui-widget-header ui-corner-all';
		titre.id = 'titre-' + this.id;
		
		var lienTitre = $(module).children('.titre').children('a');
		lienTitre.attr('href','#'+this.id);
		lienTitre.click(function() {
			if (objet.onglet.is(':visible')) {
				$('#zone_onglets').tabs('select', '#ui-tabs-'+objet.id);
			}
			return false;
		});
		lienTitre.hover(function() {
			if (!objet.ongletEstAffiche()) {
				$(this).css({"color":"white"});
			} else {
				$(this).css({"color":"#E78F08"});
			}
		}); 
		
		lienTitre.mouseout(function() {
			$(this).css({"color":"white"});
		});
 
		var contenu = $(module).children('.contenu');
		contenu.id = 'contenu-' + this.id;
		contenu.className ='contenu';
 
		var lienToggle = document.createElement('span');
		lienToggle.className = 'lienToggle ui-icon ui-icon-minusthick';
		$(titre).append(lienToggle);
		$(lienToggle).click(function() {
			objet.afficherCacherModule();
		});
 
		this.portlet = module;
		return module;	
	}
	
	this.ongletEstAffiche = function() {
		return $(this.onglet.selector).is(':visible');
	}
 
	// Crée l'objet Onglet HTML
	this.creerOnglet = function() {
		var objet = this;
 
		if (!statique) {
			var span = document.createElement('span');
			span.className = "ui-icon ui-icon-close";
		
			// Gestion de la fermeture de l'onglet
			$(span).live( "click", function() {
				objet.afficherCacherModule();
				redimensionnerOnglets();
			});
			$(onglet).append(span);
		}
		this.onglet = onglet;
	}
		
	// Initialisation de l'objet
	this.creerPortlet();
	this.creerOnglet();
	
	// Accesseurs de la classe
	this.getOnglet = function() {
		return this.onglet;	
	}
	
	this.getPortlet = function() {
		return this.portlet;
	}
	
	// fonctions d'affichage et cachage (je sais pas si on dit ça comme ça) des onglets
	this.afficherCacherModule = function() { 
		$(this.portlet).find(".lienToggle").toggleClass("ui-icon-plusthick");
		$(this.portlet).find(".lienToggle").toggleClass("ui-icon-minusthick");
		$(this.portlet).find(".contenu").toggle();
		$(this.onglet).toggle();
		
		redimensionnerOnglets();
	}
}
 
function afficherCacherMenuOnglets() {
	if ($("#conteneurMenuOnglets").html() != '') {
		$("#conteneurMenuOnglets").html('');
		$('#lienOngletEtPlus').text('+');
	} else {
		var htmlMenu = '<ul class="menuModules">';
		nbOngletsInvisibles = 0;
		for (idOnglet in tableauOnglets) {
			var classe = "elementMenuModules";
			if (!$(idOnglet).is(':visible')) {
				nbOngletsInvisibles++;
				htmlMenu += '<li class="'+classe+'" rel="'+idOnglet+'" id="menu_module_'+idOnglet+'">'+tableauOnglets[idOnglet].titre+'</li>';
			}
		}
		htmlMenu += '</ul>';
		
		if (nbOngletsInvisibles > 0) { 
			$("#conteneurMenuOnglets").html(htmlMenu);
			$("#conteneurMenuOnglets").toggle();
			$('#lienOngletEtPlus').text('-');
		}
	}
}
 
function fermerMenuOnglets() {
	$("#conteneurMenuOnglets").html('');
	$('#lienOngletEtPlus').text('+');
}
	
function redimensionnerOnglets() {
	// 570 px au max
	// 18 px largeur croix 
	// 18 px largeur texte 
	// 36 px largeur totale
	// 25 px largeur et +
	var liensVisibles = $('#zone_onglets > ul > li:visible > a');
	var longueurLiens = 0;
	liensVisibles.each(function() {
		longueurLiens += $(this).width();
	});
	var nbOnglets = $('#zone_onglets > ul > li:visible').length;
	var longueurMax =  505 - (nbOnglets * 36);
	if (longueurLiens >= longueurMax || nbOnglets > 5) { 
		$('#zone_onglets > ul > li > a').not('.lien-statique').width(longueurMax/nbOnglets);
	} else {
		$('#zone_onglets > ul > li > a').not('.lien-statique').css("width","auto");	
	}
}
 
function selectionnerOngletSynthese() {
	// Suppression des classes css qui mettent en surbrillance l'onglet actif
	$('#zone_onglets > ul > li').removeClass('ui-tabs-selected');
	$('#zone_onglets > ul > li').removeClass('ui-state-active');
	
	// application de ces même classes css à l'onglet "acceuil" qui est un onglet "articifiel"
	$('#onglet_synthese').addClass('ui-tabs-selected');
	$('#onglet_synthese').addClass('ui-state-active'); 
	
	// si des onglets ont été ajouté ou supprimé pendant que l'onglet synthèse n'était pas selectionné
	// on s'assure que l'état des blocs ouvert correspond bien à celui de onglets
	synchroniserOngletsOuvertsEtBlocs();
}
 
function synchroniserOngletsOuvertsEtBlocs() {
	for (indice in tableauOnglets) {
		var ongletEnCours = tableauOnglets[indice];
		if (ongletEnCours.onglet != null) {
			var ongletVisible = ongletEnCours.onglet.is(':visible');
			$(ongletEnCours.portlet).find(".contenu").toggle(ongletVisible);
		}
	}
}
 
function deselectionnerOngletSynthese() {
	// Suppression des classes css qui mettent en surbrillance l'onglet actif sur l'onglet acceuil
	$('#onglet_synthese').removeClass('ui-tabs-selected');
	$('#onglet_synthese').removeClass('ui-state-active'); 
}
 
 
function getUrlVars() {
    var vars = [], hash;
    var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
 
    for (var i = 0; i < hashes.length; i++) {
        hash = hashes[i].split('=');
        vars.push(hash[0]);
        vars[hash[0]] = hash[1];
    }
    return vars;
}
 
 
 
function selectionnerOngletParDefautOuEnregistre() {
	// Si un onglet est précisé dans l'url
	// Récupération de l'adresse de l'onglet sélectionné
	var urlVars = getUrlVars();
	if (urlVars['onglet'] == undefined) { 	
		// Si pas d'onglet enregistré, selection du premier par défaut
		// Si c'est l'onglet fiche, on le sélectionne artificiellement
		selectionnerOngletSynthese();
		$('.ui-tabs-panel').hide();
		$('#synthese').show();
	} else {
		ongletSyntheseCharge = false;
	}
	var cookieOnglet = obtenirOngletCookiePourPage();
	
	// On réouvre le dernier onglet consulté, à voir si on garde ça en prod, en tout cas c'est 
	// pratique pendant le développement
	if (cookieOnglet && cookieOnglet != 'ui-tabs-1') {
		$('#zone_onglets').tabs("select", '#'+cookieOnglet);
	} else {
		selectionnerOngletSynthese();
		$('.ui-tabs-panel').hide();
		$('#synthese').show();
	}
}
 
function afficherOngletsPourNiveau() {
	/* affiche les onglets par default selon niveau*/
	for (indice in tableauOnglets) {
		var ongletEnCours = tableauOnglets[indice];
		titre_onglet = ongletEnCours.titre;
		titre_onglet = $.trim(titre_onglet);
		if (!Array.indexOf) {
			  Array.prototype.indexOf = function (obj, start) {
			    for (var i = (start || 0); i < this.length; i++) {
			      if (this[i] == obj) {
			        return i;
			      }
			    }
			    return -1;
			  }
			}
		if (ongletsDefaut.indexOf(titre_onglet) == -1) {
			ongletEnCours.afficherCacherModule();	
			nbOngletsInvisibles++;
		}
	}
}
 
function surSelectionOnglet(event,ui) {
	// Récupération de l'adresse de l'onglet sélectionné
	var url = ui.tab.href;
	// le fragment suivant le # dans l'url contient l'id de l'onglet
	var fragmentsAncre = url.split('#');
	fancyboxinitialise = false;
	
	if (fragmentsAncre.length > 0) {
		var ancre = fragmentsAncre[fragmentsAncre.length - 1];
		// si on a cliqué sur l'onglet etPlus, on ne doit rien faire car celui-ci affiche le menu
		// TODO: voir s'il convient d'afficher le menu EtPlus dans d'autres onglets que celui de synthese
		if (ancre != 'etPlus') {
			// Si c'est un onglet correspondant à un projet, on cache la synthèse et le plugin
			// chargera son contenu dans l'espace approprié
			if (ancre != 'ui-tabs-1') {
				var panel = $(ui.panel);
			    if (panel.is(":empty")) {
			        panel.append("<div class='tab-chargement'>Chargement des informations...</div>")
			    }
 
				deselectionnerOngletSynthese();
				$('.ui-tabs-panel').show();
				$('#zone_contenu_fiche').hide();
				
				enregistrerOngletCookiePourPage(ancre);
			} else {
				if (ongletSyntheseCharge) {
					// Si c'est l'onglet fiche, on le sélectionne artificiellement
					selectionnerOngletSynthese();
					$('.ui-tabs-panel').hide();
					$('#zone_contenu_fiche').show();
					
					enregistrerOngletCookiePourPage(ancre);
					return false;
				} else {
					window.location = url;
				}
			}
		}
	}
 
	return true;
}
 
function obtenirOngletCookiePourPage() {
 
	var urlVars = getUrlVars();
	var id_cookie = 'onglet_eflore';
	if (urlVars['num_nom']) {
		id_cookie += '_'+urlVars['num_nom'];
	}	
 
	return $.cookie(id_cookie) ? $.cookie(id_cookie) : null;
}
 
function enregistrerOngletCookiePourPage(valeur) {
	var urlVars = getUrlVars();
	var id_cookie = 'onglet_eflore';
	if(urlVars['num_nom'] && urlVars['num_nom'] != undefined) {
		id_cookie += '_'+urlVars['num_nom'];
	}
	$.cookie(id_cookie, valeur);
}
 
function lierModulesEtOnglets() {
	var i = 1;
	
	//Parcourir la totalité des modules générés et les lier grâce à la classe Module
	$(".module").each(function () {
		i++;
		identifiantOnglet = "#zone_onglets>ul>li:nth-child(" + i +")";
		var module = new Module(i, this, $(identifiantOnglet));
		var titre = $(this).children('h3').text();
		module.titre = titre;
		
		tableauOnglets[identifiantOnglet] = module;
	});
	$(".lien-onglet").each(function() {
		var adresse_onglet = $(this).attr('href');
		var adresse_contenu_onglet = adresse_onglet.replace('action=fiche','action=onglet');
		$(this).attr('href', adresse_contenu_onglet);
	});
}
 
function creerMenuOngletsFermes() {
	$("#ongletEtPlus").click(function() {
		afficherCacherMenuOnglets();
	});
	
	$('.elementMenuModules').live('click', function() {	
		var idOnglet = $(this).attr('rel');
		var objet = tableauOnglets[idOnglet];
		objet.afficherCacherModule();
		$(this).toggleClass("elementMenuModulesSelectionne");
		
		// suppression de l'item correspondant dans le menu
		$(this).remove();
		nbOngletsInvisibles --;
		// si tous les onglets sont affichés alors on cache le menu
		if (nbOngletsInvisibles == 0) {
			afficherCacherMenuOnglets();
		}
		
		// enfin, on selectionne l'onglet sur lequel on a cliqué
		$('#zone_onglets').tabs('select', '#ui-tabs-'+objet.id);
	});
		
	$('#conteneurMenuOnglets').live("mouseleave", function() {
		fermerMenuOnglets();
	});
}
 
function ajouterTitreSurvolOnglets() {
	/* ajout de l'info au survol de l'onglet quand la taille est diminuée*/
	$('.lien-onglet').parent().each(function() {
		$(this).attr("title",$(this).children("a").text());
	});
} 
 
function gererLiensOuvertureOnglets() {
	// chaque lien avec cette classe dans un bloc provoque l'ouverture de l'onglet
	// auquel le bloc est associé
	$('.lien_ouverture_onglet_parent').live('click', function(event) {
		event.preventDefault(); 
		var parent = $(this).parent();
		// attention aux majuscules obligatoires dans la comparaison avec BODY
		while (!parent.hasClass('module') && parent.get(0).tagName != 'BODY') {
			var parent = parent.parent();
		}
		
		if (parent.get(0).tagName != 'BODY') {
			parent.find('.lien-onglet-synthese').click();
		}
	});
}
 
//+----------------------------------------------------------------------------------------------------------+
// Wikini Flora
var htmlWikiOriginal = '';
var objetContenuWiki = null;
 
function getTemplateFormulaireEditionWiki(page, section, texte) {	
	var urlWebServiceWiki = getUrlEditionPourPageEtSection(page, section);
	var formulaire = 
		'<form method="post" id="formulaire_edition_wiki" name="formulaire_edition_wiki" action="'+urlWebServiceWiki+'">'+
		  '<div>'+
		  	'<textarea id="pageContenu" name="pageContenu" class="champ_edition_wiki">'+texte+'</textarea>'+
		  '</div>'+
		  '<input type="hidden" name="pageSectionTitre" id="pageSectionTitre" value="'+section+'" />'+
		  '<input type="submit" text="sauver" />'+
	  	  '<input class="bouton_annuler_edition" type="button" value="annuler" />';
		'</form>';		
	return formulaire;
}
 
 
 
 
function getSection() {
	return objetContenuWiki.attr("title");
}
 
function getPageWikiTaxon() {
	return pageWikiTaxon;
}
 
function getUrlEditionPourPageEtSection(page, section) {
	return urlEditionSectionWikiTpl.replace('{pageTag}', page).replace('{sectionTitre}', section);
}
 
function getUrlTextePourPageSectionBrute(page, section) {
	return urlTexteBrutSectionWikiTpl.replace('{pageTag}', page).replace('{sectionTitre}', section);
}
 
function getUrlTextePourPageSectionFormatee(page, section) {
	return urlTexteFormateSectionWikiTpl.replace('{pageTag}', page).replace('{sectionTitre}', section);
}
 
function remplacerContenuWikiParFormulaireEdition(objet_contenu) {
	objetContenuWiki = objet_contenu;
	var adresse = getUrlEditionPourPageEtSection(getPageWikiTaxon(), getSection());
	htmlWikiOriginal = objet_contenu.html();
	$.getJSON(adresse, function(data) {
		objetContenuWiki.html(getTemplateFormulaireEditionWiki(getPageWikiTaxon(), getSection(), data.texte));
	});
}
 
function gererEvenementsWiki() {
	//TODO: ajout automatique d'un lien ouvrant une page d'aide (un popup) au formatage des pages wikini
	$('.contenu_editable').live('dblclick',function(event) {
		remplacerContenuWikiParFormulaireEdition($(this).children('.editable_sur_clic'));
	});
	
	$('#formulaire_edition_wiki').live('submit',function(event) {
	    event.preventDefault(); 
		var valeurs = $(this).serialize();
		$.post($(this).attr('action'), valeurs, function(data) {
			var adresse = getUrlTextePourPageSectionFormatee(getPageWikiTaxon(), getSection());
			$.getJSON(adresse, function(data) {
				objetContenuWiki.html(data.texte);
			});
		});
	});
	
	$('.bouton_annuler_edition').live('click', function(event) {
		 event.preventDefault(); 
		 objetContenuWiki.html(htmlWikiOriginal);
	});
}
 
//+----------------------------------------------------------------------------------------------------------+
// Plier / déplier
function plierTout() {
	$('.nom').children('.imagetteMoins').removeClass('imagetteMoins').addClass('imagettePlus');
	$('.plus').css('display', 'none');
}
 
function deplierTout() {
	$('.nom').children('.imagettePlus').removeClass('imagettePlus').addClass('imagetteMoins');
	$('.plus').css('display', 'inline');
}
 
function gestionBiblio(parent) {
	parent.children('.nom').each(function () {
		html = $(this).html();
		posCrochetGauche = html.indexOf('[');
		if (posCrochetGauche > 0) {
			$(this).css('cursor', 'pointer');
			nom = html.substr(0, posCrochetGauche);
			biblio = html.substr(posCrochetGauche, html.length);
			$(this).html(nom);
			
			imagettePlus = document.createElement('div');
			$(imagettePlus).addClass('imagettePlus');
			$(this).prepend($(imagettePlus));
			
			plus = document.createElement('span');
			$(plus).addClass('plus');
			$(plus).html(biblio);
			$(plus).hide();
			
			$(this).click(function() {
 
				if (!$(this).children('.plus').is(':visible')) {
					$(this).children('.imagettePlus').removeClass('imagettePlus').addClass('imagetteMoins');
					$(this).children('.plus').css('display', 'inline');
				} else {
					$(this).children('.imagetteMoins').removeClass('imagetteMoins').addClass('imagettePlus');
					$(this).children('.plus').css('display', 'none');
				}
 
			});				
			$(this).append($(plus));		
		}
	});
}
 
function gererEvenementsPliage() {
	$('.lien_tout_deplier').live('click', function() {
		deplierTout();
	});
	$('.lien_tout_plier').live('click', function() {
		plierTout();
	});
	gestionBiblio(document);
}
 
//+----------------------------------------------------------------------------------------------------------+
//Images CEL
function ouvrirPopUpImgCel(event) {
	event.preventDefault();
	window.open($(this).attr('href'), "Photo "+$(this).children("img").attr("alt"), 
		'height=500, width=500, top=100, left=100, toolbar=no, menubar=no, location=no, resizable=yes, scrollbars=yes, status=no');
}
 
//+----------------------------------------------------------------------------------------------------------+
// Initialisation
var fancyboxinitialise = false;
 
//Initialisation
$(document).ready(function() {
	lierModulesEtOnglets();
	
	$('#ongletEtPlus').show();
	
	/* mouvement des blocs */
	$( ".colonne" ).sortable({
		connectWith: ".colonne",
		handle: $(".module").children('h3') // mouvement seulement sur les titres
	});
 
	$( ".colonne" ).disableSelection();
	
	$('#zone_onglets').tabs({
		add: function(event, ui) {
			redimensionnerOnglets();
		},
		remove: function(event, ui) {
			redimensionnerOnglets();
		},
		select: function(event, ui) {	
			return surSelectionOnglet(event,ui)
		}
	});
	// TODO : devrait être .on() à la place de live()
	$('.lien_popup').live('click',function(event) {
		event.preventDefault();
		$.fancybox(this,{
			autoDimensions:false,
			width:580
		});
	});
	
	$('a.lien_externe').live('click',function(event) {
		event.preventDefault();
		window.open($(this).attr('href'));
	});
 
 
 
 
 
 
 
 
 
 
	
 
 
 
 
	$('.lien-image-cel').live('click', ouvrirPopUpImgCel);
	
	creerMenuOngletsFermes();
	afficherOngletsPourNiveau();
	ajouterTitreSurvolOnglets();
	redimensionnerOnglets();
	selectionnerOngletParDefautOuEnregistre();
	
	$('.ui-icon-close').click(function() {
		estOngletActif = $(this).parent().hasClass('ui-state-active');
		if (estOngletActif) {
			//L'onglet que l'on veut fermet est celui qui est ouvert, on va donc le masquer et afficher celui d'accueil
			$("#zone_onglets").tabs('select', 0);
		}
	});
	
	gererLiensOuvertureOnglets();
	gererEvenementsWiki();
	gererEvenementsPliage();
});
 
 
$(document).ajaxStop(function() {
	if (document.implementation.hasFeature('http://www.w3.org/TR/SVG11/feature#BasicStructure', '1.1') == false) {
 
		$('.svg').each(function() {
			alt = $(this).attr('alt');
			img = document.createElement('img');
			img.src = alt;
			$(this).replaceWith(img);
		});
	}
});

Subversion Repositories eFlore/Applications.eflore-consultation

(root)/trunk/presentations/scripts/fiche-synthese.js @ 1544 – Rev 475 → 480

Rev 475		Rev 480
1		-
-		1	`//+----------------------------------------------------------------------------------------------------------+`
-		2	`// Onglets et Portlets`
2	`/**`	3	`/**`
3	`* Les variables suivantes ont été ajoutée par php`	4	`* Les variables suivantes ont été ajoutée par php`
4	`*`	5	`*`
5	`* var urlTexteBrutSectionWikiTpl : url pour obtenir le texte brut d'une section de wiki`	6	`* var urlTexteBrutSectionWikiTpl : url pour obtenir le texte brut d'une section de wiki`
6	`* var urlEditionSectionWikiTpl : url pour éditer une section du wiki`	7	`* var urlEditionSectionWikiTpl : url pour éditer une section du wiki`
7	`* var urlTexteFormateSectionWikiTpl : url pour obtenir le texte formaté en html d'une section de wiki`	8	`* var urlTexteFormateSectionWikiTpl : url pour obtenir le texte formaté en html d'une section de wiki`
8	`* var pageWikiTaxon : url pour obtenir le texte formaté en html d'une section de wiki`	9	`* var pageWikiTaxon : url pour obtenir le texte formaté en html d'une section de wiki`
9	`*`	10	`*`
10	`*/`	11	`*/`
11		12
12	`/**`	13	`/**`
13	`* Variables globales du script`	14	`* Variables globales du script`
14	`*/`	15	`*/`
15	`var modules = Array();`	16	`var modules = Array();`
16	`var tableauOnglets = Array();`	17	`var tableauOnglets = Array();`
17	`var nbOngletsInvisibles = 0;`	18	`var nbOngletsInvisibles = 0;`
-		19	`var ongletSyntheseCharge = true;`
18		20
19	`/** Classe Module`	21	`/** Classe Module`
20	`* Définit un module de type portlet`	22	`* Définit un module de type portlet`
21	`**/`	23	`**/`
22	`function Module(id, module, onglet, statique) {`	24	`function Module(id, module, onglet, statique) {`
23		25
24	`// Variables de classe : identifiant, titre, et le HTML du résumé à afficher dans le contenu`	26	`// Variables de classe : identifiant, titre, et le HTML du résumé à afficher dans le contenu`
25	`this.id = id;`	27	`this.id = id;`
26	`this.titre;`	28	`this.titre;`
27	`this.htmlResume;`	29	`this.htmlResume;`
28	`this.statique = statique;`	30	`this.statique = statique;`
29		31
30	`// Les objets Portlet et Onglet que l'ont garde en mémoire pour pouvoir y accéder facilement`	32	`// Les objets Portlet et Onglet que l'ont garde en mémoire pour pouvoir y accéder facilement`
31	`this.portlet = module;`	33	`this.portlet = module;`
32	`this.onglet;`	34	`this.onglet;`
33		35
34	`// creerPortlet`	36	`// creerPortlet`
35	`// Créer l'objet Portlet HTML à afficher et le stocker dans les variables de classe`	37	`// Créer l'objet Portlet HTML à afficher et le stocker dans les variables de classe`
36	`this.creerPortlet = function() {`	38	`this.creerPortlet = function() {`
37	`var objet = this;`	39	`var objet = this;`