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


var modules = Array();
var tableauOnglets = Array();
	
/** 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 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;	
	}	
 
	// creerOnglet
	// Créer l'objet Onglet HTML
	this.creerOnglet = function() {
		var objet = this;
		var a = $(onglet).find("a");
	
 
		// Gestion du clic sur le lien 
		// Comme les liens sont mis en place par jqueryui tabs, il faut ajouter une surcouche pour 
		// déplacer vers la page du module
		/*$(a).click(function() {
			//window.alert($(a).attr("href"));
			// TODO : Changer l'url par celle du module et enregistrer la configuration actuelle des onglets.
			location.href = $(a).attr("href");
		});*/
 
		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">';
		for (idOnglet in tableauOnglets) {
			var classe = "elementMenuModules";
			if($(idOnglet).is(':visible')) {
				classe += " elementMenuModulesSelectionne";
			}
			htmlMenu += '<li class="'+classe+'" rel="'+idOnglet+'" id="menu_module_'+idOnglet+'">'+tableauOnglets[idOnglet].titre+'</li>';
		}
		htmlMenu += '</ul>';
		$("#conteneurMenuOnglets").html(htmlMenu);
		$("#conteneurMenuOnglets").toggle();
		$('#lienOngletEtPlus').text('-');
	}
}
	
function redimensionnerOnglets() {
	// 570 px au max
	// 18 largeur croix 
	// 18 largeur texte 
	// 36 largeur totale
	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 =  535 - (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");	
	}
}
	
//Initialisation
$(document).ready(function() {
	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));
		module.titre = $(this).children('h3').text();
		tableauOnglets[identifiantOnglet] = module;
	});
	$(".lien-onglet").each(function() {
        var adresse_onglet = $(this).attr('href');
        var adresse_contenu_onglet = adresse_onglet.replace('nom_scientifique','onglet');
        $(this).attr('href', adresse_contenu_onglet);
    }); 
	/* 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) {
	        var url = $.data(ui.tab, 'load.tabs');
	        if( url ) {
	            location.href = url;
	            return false;
	        }
	        return true;
	    }*/
	});
	
    
 
	$("#ongletEtPlus").click(function() {
		afficherCacherMenuOnglets();
	});
		
	$('.elementMenuModules').live('click', function() {
		var idOnglet = $(this).attr('rel');
		var objet = tableauOnglets[idOnglet];
		objet.afficherCacherModule();
		$(this).toggleClass("elementMenuModulesSelectionne");
	});
	
	/* affiche les onglets par default selon niveau*/
	for(indice in tableauOnglets) {
		var ongletEnCours = tableauOnglets[indice];
		if (ongletsDefaut.indexOf(ongletEnCours.titre) == -1) {
			ongletEnCours.afficherCacherModule();	
		}
	}
	
	/* 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());
	});
		
	redimensionnerOnglets();
});

Rev 228	Rev 230
1	`var modules = Array();`	1	`var modules = Array();`
2	`var tableauOnglets = Array();`	2	`var tableauOnglets = Array();`
3		3
4	`/** Classe Module`	4	`/** Classe Module`
5	`* Définit un module de type portlet`	5	`* Définit un module de type portlet`
6	`**/`	6	`**/`
7	`function Module(id, module, onglet, statique) {`	7	`function Module(id, module, onglet, statique) {`
8		8
9	`// Variables de classe : identifiant, titre, et le HTML du résumé à afficher dans le contenu`	9	`// Variables de classe : identifiant, titre, et le HTML du résumé à afficher dans le contenu`
10	`this.id = id;`	10	`this.id = id;`
11	`this.titre;`	11	`this.titre;`
12	`this.htmlResume;`	12	`this.htmlResume;`
13	`this.statique = statique;`	13	`this.statique = statique;`
14		14
15	`// Les objets Portlet et Onglet que l'ont garde en mémoire pour pouvoir y accéder facilement`	15	`// Les objets Portlet et Onglet que l'ont garde en mémoire pour pouvoir y accéder facilement`
16	`this.portlet = module;`	16	`this.portlet = module;`
17	`this.onglet;`	17	`this.onglet;`
18		18
19	`// creerPortlet`	19	`// creerPortlet`
20	`// Créer l'objet Portlet HTML à afficher et le stocker dans les variables de classe`	20	`// Créer l'objet Portlet HTML à afficher et le stocker dans les variables de classe`
21	`this.creerPortlet = function() {`	21	`this.creerPortlet = function() {`
22	`var objet = this;`	22	`var objet = this;`
23		23
24	`var titre = $(module).children('.titre');`	24	`var titre = $(module).children('.titre');`
25	`titre.className = 'titre ui-widget-header ui-corner-all';`	25	`titre.className = 'titre ui-widget-header ui-corner-all';`
26	`titre.id = 'titre-' + this.id;`	26	`titre.id = 'titre-' + this.id;`
27		27
28	`var contenu = $(module).children('.contenu');`	28	`var contenu = $(module).children('.contenu');`
29	`contenu.id = 'contenu-' + this.id;`	29	`contenu.id = 'contenu-' + this.id;`
30	`contenu.className ='contenu';`	30	`contenu.className ='contenu';`
31		31
32	`var lienToggle = document.createElement('span');`	32	`var lienToggle = document.createElement('span');`
33	`lienToggle.className = 'lienToggle ui-icon ui-icon-minusthick';`	33	`lienToggle.className = 'lienToggle ui-icon ui-icon-minusthick';`
34	`$(titre).append(lienToggle);`	34	`$(titre).append(lienToggle);`
35	`$(lienToggle).click(function() {`	35	`$(lienToggle).click(function() {`
36	`objet.afficherCacherModule();`	36	`objet.afficherCacherModule();`
37	`});`	37	`});`
38		38
39	`this.portlet = module;`	39	`this.portlet = module;`
40	`return module;`	40	`return module;`
41	`}`	41	`}`
42		42
43	`// creerOnglet`	43	`// creerOnglet`
44	`// Créer l'objet Onglet HTML`	44	`// Créer l'objet Onglet HTML`
45	`this.creerOnglet = function() {`	45	`this.creerOnglet = function() {`
46	`var objet = this;`	46	`var objet = this;`
47	`var a = $(onglet).find("a");`	47	`var a = $(onglet).find("a");`
48		48
49		49
50	`// Gestion du clic sur le lien`	50	`// Gestion du clic sur le lien`
51	`// Comme les liens sont mis en place par jqueryui tabs, il faut ajouter une surcouche pour`	51	`// Comme les liens sont mis en place par jqueryui tabs, il faut ajouter une surcouche pour`
52	`// déplacer vers la page du module`	52	`// déplacer vers la page du module`
53	`$(a).click(function() {`	53	`/*$(a).click(function() {`
-		54	`//window.alert($(a).attr("href"));`
54	`// TODO : Changer l'url par celle du module et enregistrer la configuration actuelle des onglets.`	55	`// TODO : Changer l'url par celle du module et enregistrer la configuration actuelle des onglets.`
55	`location.href = $(a).attr("href");`	56	`location.href = $(a).attr("href");`
56	`});`	57	`});*/`
57		58
58	`if (!statique) {`	59	`if (!statique) {`
59	`var span = document.createElement('span');`	60	`var span = document.createElement('span');`
60	`span.className = "ui-icon ui-icon-close";`	61	`span.className = "ui-icon ui-icon-close";`
61		62
62	`// Gestion de la fermeture de l'onglet`	63	`// Gestion de la fermeture de l'onglet`
63	`$(span).live( "click", function() {`	64	`$(span).live( "click", function() {`
64	`objet.afficherCacherModule();`	65	`objet.afficherCacherModule();`
65	`redimensionnerOnglets();`	66	`redimensionnerOnglets();`
66	`});`	67	`});`
67	`$(onglet).append(span);`	68	`$(onglet).append(span);`
68	`}`	69	`}`
69	`this.onglet = onglet;`	70	`this.onglet = onglet;`
70	`}`	71	`}`
71		72
72	`// Initialisation de l'objet`	73	`// Initialisation de l'objet`
73	`this.creerPortlet();`	74	`this.creerPortlet();`
74	`this.creerOnglet();`	75	`this.creerOnglet();`
75		76
76	`// Accesseurs de la classe`	77	`// Accesseurs de la classe`
77	`this.getOnglet = function() {`	78	`this.getOnglet = function() {`
78	`return this.onglet;`	79	`return this.onglet;`
79	`}`	80	`}`
80		81
81	`this.getPortlet = function() {`	82	`this.getPortlet = function() {`
82	`return this.portlet;`	83	`return this.portlet;`
83	`}`	84	`}`
84		85
85	`// fonctions d'affichage et cachage (je sais pas si on dit ça comme ça) des onglets`	86	`// fonctions d'affichage et cachage (je sais pas si on dit ça comme ça) des onglets`
86	`this.afficherCacherModule = function() {`	87	`this.afficherCacherModule = function() {`
87	`$(this.portlet).find(".lienToggle").toggleClass("ui-icon-plusthick");`	88	`$(this.portlet).find(".lienToggle").toggleClass("ui-icon-plusthick");`
88	`$(this.portlet).find(".lienToggle").toggleClass("ui-icon-minusthick");`	89	`$(this.portlet).find(".lienToggle").toggleClass("ui-icon-minusthick");`
89	`$(this.portlet).find(".contenu").toggle();`	90	`$(this.portlet).find(".contenu").toggle();`
90	`$(this.onglet).toggle();`	91	`$(this.onglet).toggle();`
91		92
92	`redimensionnerOnglets();`	93	`redimensionnerOnglets();`
93	`}`	94	`}`
94	`}`	95	`}`
95		96
96		97
97		98
98	`function afficherCacherMenuOnglets() {`	99	`function afficherCacherMenuOnglets() {`
99	`if($("#conteneurMenuOnglets").html() != '') {`	100	`if($("#conteneurMenuOnglets").html() != '') {`
100	`$("#conteneurMenuOnglets").html('');`	101	`$("#conteneurMenuOnglets").html('');`
101	`$('#lienOngletEtPlus').text('+');`	102	`$('#lienOngletEtPlus').text('+');`
102	`} else {`	103	`} else {`
103	`var htmlMenu = '<ul class="menuModules">';`	104	`var htmlMenu = '<ul class="menuModules">';`
104	`for (idOnglet in tableauOnglets) {`	105	`for (idOnglet in tableauOnglets) {`
105	`var classe = "elementMenuModules";`	106	`var classe = "elementMenuModules";`
106	`if($(idOnglet).is(':visible')) {`	107	`if($(idOnglet).is(':visible')) {`
107	`classe += " elementMenuModulesSelectionne";`	108	`classe += " elementMenuModulesSelectionne";`
108	`}`	109	`}`
109	`htmlMenu += '<li class="'+classe+'" rel="'+idOnglet+'" id="menu_module_'+idOnglet+'">'+tableauOnglets[idOnglet].titre+'</li>';`	110	`htmlMenu += '<li class="'+classe+'" rel="'+idOnglet+'" id="menu_module_'+idOnglet+'">'+tableauOnglets[idOnglet].titre+'</li>';`
110	`}`	111	`}`
111	`htmlMenu += '</ul>';`	112	`htmlMenu += '</ul>';`
112	`$("#conteneurMenuOnglets").html(htmlMenu);`	113	`$("#conteneurMenuOnglets").html(htmlMenu);`
113	`$("#conteneurMenuOnglets").toggle();`	114	`$("#conteneurMenuOnglets").toggle();`
114	`$('#lienOngletEtPlus').text('-');`	115	`$('#lienOngletEtPlus').text('-');`
115	`}`	116	`}`
116	`}`	117	`}`
117		118
118	`function redimensionnerOnglets() {`	119	`function redimensionnerOnglets() {`
119	`// 570 px au max`	120	`// 570 px au max`
120	`// 18 largeur croix`	121	`// 18 largeur croix`
121	`// 18 largeur texte`	122	`// 18 largeur texte`
122	`// 36 largeur totale`	123	`// 36 largeur totale`
123	`var liensVisibles = $('#zone_onglets > ul > li:visible > a');`	124	`var liensVisibles = $('#zone_onglets > ul > li:visible > a');`
124	`var longueurLiens = 0;`	125	`var longueurLiens = 0;`
125	`liensVisibles.each(function() {`	126	`liensVisibles.each(function() {`
126	`longueurLiens += $(this).width();`	127	`longueurLiens += $(this).width();`
127	`});`	128	`});`
128	`var nbOnglets = $('#zone_onglets > ul > li:visible').length;`	129	`var nbOnglets = $('#zone_onglets > ul > li:visible').length;`
129	`var longueurMax = 535 - (nbOnglets * 36);`	130	`var longueurMax = 535 - (nbOnglets * 36);`
130	`if(longueurLiens >= longueurMax \|\| nbOnglets > 5) {`	131	`if(longueurLiens >= longueurMax \|\| nbOnglets > 5) {`
131	`$('#zone_onglets > ul > li > a').not('.lien-statique').width(longueurMax/nbOnglets);`	132	`$('#zone_onglets > ul > li > a').not('.lien-statique').width(longueurMax/nbOnglets);`
132	`} else {`	133	`} else {`
133	`$('#zone_onglets > ul > li > a').not('.lien-statique').css("width","auto");`	134	`$('#zone_onglets > ul > li > a').not('.lien-statique').css("width","auto");`
134	`}`	135	`}`
135	`}`	136	`}`
136		137
137	`//Initialisation`	138	`//Initialisation`
138	`$(document).ready(function() {`	139	`$(document).ready(function() {`
139	`i = 1;`	140	`i = 1;`
140		141
141	`//Parcourir la totalité des modules générés et les lier grâce à la classe Module`	142	`//Parcourir la totalité des modules générés et les lier grâce à la classe Module`
142	`$(".module").each(function () {`	143	`$(".module").each(function () {`
143	`i++;`	144	`i++;`
144	`identifiantOnglet = "#zone_onglets>ul>li:nth-child(" + i +")";`	145	`identifiantOnglet = "#zone_onglets>ul>li:nth-child(" + i +")";`
145	`var module = new Module(i, this, $(identifiantOnglet));`	146	`var module = new Module(i, this, $(identifiantOnglet));`
146	`module.titre = $(this).children('h3').text();`	147	`module.titre = $(this).children('h3').text();`
147	`tableauOnglets[identifiantOnglet] = module;`	148	`tableauOnglets[identifiantOnglet] = module;`
148	`});`	149	`});`
-		150	`$(".lien-onglet").each(function() {`
-		151	`var adresse_onglet = $(this).attr('href');`
-		152	`var adresse_contenu_onglet = adresse_onglet.replace('nom_scientifique','onglet');`
-		153	`$(this).attr('href', adresse_contenu_onglet);`
149		154	`});`
150	`/* mouvement des blocs */`	155	`/* mouvement des blocs */`
151	`$( ".colonne" ).sortable({`	156	`$( ".colonne" ).sortable({`
152	`connectWith: ".colonne",`	157	`connectWith: ".colonne",`
153	`handle: $(".module").children('h3') // mouvement seulement sur les titres`	158	`handle: $(".module").children('h3') // mouvement seulement sur les titres`
154	`});`	159	`});`
155		160
156	`$( ".colonne" ).disableSelection();`	161	`$( ".colonne" ).disableSelection();`
157	`$('#zone_onglets').tabs({`	162	`$('#zone_onglets').tabs({`
158	`add: function(event, ui) {`	163	`add: function(event, ui) {`
159	`redimensionnerOnglets();`	164	`redimensionnerOnglets();`
160	`},`	165	`},`
161	`remove: function(event, ui) {`	166	`remove: function(event, ui) {`
162	`redimensionnerOnglets();`	167	`redimensionnerOnglets();`
163	`}`	168	`}/*,`
-		169	`select: function(event, ui) {`
-		170	`var url = $.data(ui.tab, 'load.tabs');`
-		171	`if( url ) {`
-		172	`location.href = url;`
-		173	`return false;`
-		174	`}`
-		175	`return true;`
-		176	`}*/`
164	`});`	177	`});`
-		178
-		179
165		180
166	`$("#ongletEtPlus").click(function() {`	181	`$("#ongletEtPlus").click(function() {`
167	`afficherCacherMenuOnglets();`	182	`afficherCacherMenuOnglets();`
168	`});`	183	`});`
169		184
170	`$('.elementMenuModules').live('click', function() {`	185	`$('.elementMenuModules').live('click', function() {`
171	`var idOnglet = $(this).attr('rel');`	186	`var idOnglet = $(this).attr('rel');`
172	`var objet = tableauOnglets[idOnglet];`	187	`var objet = tableauOnglets[idOnglet];`
173	`objet.afficherCacherModule();`	188	`objet.afficherCacherModule();`
174	`$(this).toggleClass("elementMenuModulesSelectionne");`	189	`$(this).toggleClass("elementMenuModulesSelectionne");`
175	`});`	190	`});`
176		191
177	`/* affiche les onglets par default selon niveau*/`	192	`/* affiche les onglets par default selon niveau*/`
178	`for(indice in tableauOnglets) {`	193	`for(indice in tableauOnglets) {`
179	`var ongletEnCours = tableauOnglets[indice];`	194	`var ongletEnCours = tableauOnglets[indice];`
180	`if (ongletsDefaut.indexOf(ongletEnCours.titre) == -1) {`	195	`if (ongletsDefaut.indexOf(ongletEnCours.titre) == -1) {`
181	`ongletEnCours.afficherCacherModule();`	196	`ongletEnCours.afficherCacherModule();`
182	`}`	197	`}`
183	`}`	198	`}`
184		199
185	`/* ajout de l'info au survol de l'onglet quand la taille est diminuée*/`	200	`/* ajout de l'info au survol de l'onglet quand la taille est diminuée*/`
186	`$('.lien-onglet').parent().each(function() {`	201	`$('.lien-onglet').parent().each(function() {`
187	`$(this).attr("title",$(this).children("a").text());`	202	`$(this).attr("title",$(this).children("a").text());`
188	`});`	203	`});`
189		204
190	`redimensionnerOnglets();`	205	`redimensionnerOnglets();`
191	`});`	206	`});`

Subversion Repositories eFlore/Applications.eflore-consultation

(root)/trunk/presentations/scripts/fiche-synthese.js @ 231 – Rev 228 → 230