Subversion Repositories eFlore/Applications.eflore-consultation

Rev

Rev 315 | Rev 321 | Go to most recent revision | Details | Compare with Previous | Last modification | View Log | RSS feed

Rev Author Line No. Line
277 aurelien 1
 
227 delphine 2
var modules = Array();
3
var tableauOnglets = Array();
233 aurelien 4
var nbOngletsInvisibles = 0;
227 delphine 5
 
6
/** Classe Module
7
* Définit un module de type portlet
8
**/
9
function Module(id, module, onglet, statique) {
10
 
11
	// Variables de classe : identifiant, titre, et le HTML du résumé à afficher dans le contenu
12
	this.id = id;
13
	this.titre;
14
	this.htmlResume;
15
	this.statique = statique;
16
 
17
	// Les objets Portlet et Onglet que l'ont garde en mémoire pour pouvoir y accéder facilement
18
	this.portlet = module;
19
	this.onglet;
20
 
21
	// creerPortlet
22
	// Créer l'objet Portlet HTML à afficher et le stocker dans les variables de classe
23
	this.creerPortlet = function() {
24
		var objet = this;
25
 
26
		var titre = $(module).children('.titre');
27
		titre.className = 'titre ui-widget-header ui-corner-all';
28
		titre.id = 'titre-' + this.id;
242 aurelien 29
 
30
		var lienTitre = $(module).children('.titre').children('a');
31
		lienTitre.attr('href','#'+this.id);
32
		lienTitre.click(function() {
33
			if(objet.onglet.is(':visible')) {
34
				$('#zone_onglets').tabs('select', '#ui-tabs-'+objet.id);
35
			}
36
			return false;
37
		});
38
		lienTitre.hover(function() {
39
			if(!objet.ongletEstAffiche()) {
40
				$(this).css({"color":"white"});
41
			} else {
42
				$(this).css({"color":"#E78F08"});
43
			}
44
		});
45
 
46
		lienTitre.mouseout(function() {
47
			$(this).css({"color":"white"});
48
		});
227 delphine 49
 
50
		var contenu = $(module).children('.contenu');
51
		contenu.id = 'contenu-' + this.id;
52
		contenu.className ='contenu';
53
 
54
		var lienToggle = document.createElement('span');
55
		lienToggle.className = 'lienToggle ui-icon ui-icon-minusthick';
56
		$(titre).append(lienToggle);
57
		$(lienToggle).click(function() {
58
			objet.afficherCacherModule();
59
		});
60
 
61
		this.portlet = module;
62
		return module;
242 aurelien 63
	}
64
 
65
	this.ongletEstAffiche = function() {
66
		return $(this.onglet.selector).is(':visible');
67
	}
227 delphine 68
 
242 aurelien 69
	// Crée l'objet Onglet HTML
227 delphine 70
	this.creerOnglet = function() {
71
		var objet = this;
72
 
73
		if (!statique) {
74
			var span = document.createElement('span');
75
			span.className = "ui-icon ui-icon-close";
76
 
77
			// Gestion de la fermeture de l'onglet
78
			$(span).live( "click", function() {
79
				objet.afficherCacherModule();
80
				redimensionnerOnglets();
81
			});
82
			$(onglet).append(span);
83
		}
84
		this.onglet = onglet;
85
	}
86
 
87
	// Initialisation de l'objet
88
	this.creerPortlet();
89
	this.creerOnglet();
90
 
91
	// Accesseurs de la classe
92
	this.getOnglet = function() {
93
		return this.onglet;
94
	}
95
 
96
	this.getPortlet = function() {
97
		return this.portlet;
98
	}
99
 
100
	// fonctions d'affichage et cachage (je sais pas si on dit ça comme ça) des onglets
101
	this.afficherCacherModule = function() {
102
		$(this.portlet).find(".lienToggle").toggleClass("ui-icon-plusthick");
103
		$(this.portlet).find(".lienToggle").toggleClass("ui-icon-minusthick");
104
		$(this.portlet).find(".contenu").toggle();
105
		$(this.onglet).toggle();
106
 
107
		redimensionnerOnglets();
108
	}
109
}
110
 
111
function afficherCacherMenuOnglets() {
112
	if($("#conteneurMenuOnglets").html() != '') {
113
		$("#conteneurMenuOnglets").html('');
114
		$('#lienOngletEtPlus').text('+');
115
	} else {
116
		var htmlMenu = '<ul class="menuModules">';
233 aurelien 117
		nbOngletsInvisibles = 0;
227 delphine 118
		for (idOnglet in tableauOnglets) {
119
			var classe = "elementMenuModules";
233 aurelien 120
			if(!$(idOnglet).is(':visible')) {
121
				nbOngletsInvisibles++;
122
				htmlMenu += '<li class="'+classe+'" rel="'+idOnglet+'" id="menu_module_'+idOnglet+'">'+tableauOnglets[idOnglet].titre+'</li>';
227 delphine 123
			}
124
		}
125
		htmlMenu += '</ul>';
233 aurelien 126
 
127
		if (nbOngletsInvisibles > 0) {
128
			$("#conteneurMenuOnglets").html(htmlMenu);
129
			$("#conteneurMenuOnglets").toggle();
130
			$('#lienOngletEtPlus').text('-');
131
		}
227 delphine 132
	}
133
}
243 aurelien 134
 
135
function fermerMenuOnglets() {
136
	$("#conteneurMenuOnglets").html('');
137
	$('#lienOngletEtPlus').text('+');
138
}
227 delphine 139
 
140
function redimensionnerOnglets() {
141
	// 570 px au max
233 aurelien 142
	// 18 px largeur croix
143
	// 18 px largeur texte
144
	// 36 px largeur totale
277 aurelien 145
	// 25 px largeur et +
227 delphine 146
	var liensVisibles = $('#zone_onglets > ul > li:visible > a');
147
	var longueurLiens = 0;
148
	liensVisibles.each(function() {
149
		longueurLiens += $(this).width();
150
	});
151
	var nbOnglets = $('#zone_onglets > ul > li:visible').length;
277 aurelien 152
	var longueurMax =  505 - (nbOnglets * 36);
227 delphine 153
	if(longueurLiens >= longueurMax || nbOnglets > 5) {
154
		$('#zone_onglets > ul > li > a').not('.lien-statique').width(longueurMax/nbOnglets);
155
	} else {
156
		$('#zone_onglets > ul > li > a').not('.lien-statique').css("width","auto");
157
	}
158
}
231 aurelien 159
 
160
function selectionnerOngletSynthese() {
161
	// Suppression des classes css qui mettent en surbrillance l'onglet actif
162
	$('#zone_onglets > ul > li').removeClass('ui-tabs-selected');
163
	$('#zone_onglets > ul > li').removeClass('ui-state-active');
227 delphine 164
 
231 aurelien 165
	// application de ces même classes css à l'onglet "acceuil" qui est un onglet "articifiel"
166
	$('#onglet_synthese').addClass('ui-tabs-selected');
167
	$('#onglet_synthese').addClass('ui-state-active');
236 aurelien 168
 
169
	// si des onglets ont été ajouté ou supprimé pendant que l'onglet synthèse n'était pas selectionné
170
	// on s'assure que l'état des blocs ouvert correspond bien à celui de onglets
171
	synchroniserOngletsOuvertsEtBlocs();
231 aurelien 172
}
173
 
236 aurelien 174
function synchroniserOngletsOuvertsEtBlocs() {
175
	for(indice in tableauOnglets) {
176
		var ongletEnCours = tableauOnglets[indice];
277 aurelien 177
		if(ongletEnCours.onglet != null) {
178
			var ongletVisible = ongletEnCours.onglet.is(':visible');
179
			$(ongletEnCours.portlet).find(".contenu").toggle(ongletVisible);
180
		}
236 aurelien 181
	}
182
}
183
 
231 aurelien 184
function deselectionnerOngletSynthese() {
185
	// Suppression des classes css qui mettent en surbrillance l'onglet actif sur l'onglet acceuil
186
	$('#onglet_synthese').removeClass('ui-tabs-selected');
187
	$('#onglet_synthese').removeClass('ui-state-active');
188
}
233 aurelien 189
 
242 aurelien 190
function getUrlVars()
191
{
192
    var vars = [], hash;
193
    var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
194
    for(var i = 0; i < hashes.length; i++)
195
    {
196
        hash = hashes[i].split('=');
197
        vars.push(hash[0]);
198
        vars[hash[0]] = hash[1];
199
    }
200
    return vars;
201
}
202
 
203
var ongletSyntheseCharge = true;
233 aurelien 204
function selectionnerOngletParDefautOuEnregistre() {
242 aurelien 205
	// Si un onglet est précisé dans l'url
206
	// Récupération de l'adresse de l'onglet sélectionné
207
	var urlVars = getUrlVars();
208
	if(urlVars['onglet'] == undefined) {
209
		// Si pas d'onglet enregistré, selection du premier par défaut
210
		// Si c'est l'onglet fiche, on le sélectionne artificiellement
211
		selectionnerOngletSynthese();
212
		$('.ui-tabs-panel').hide();
213
		$('#synthese').show();
214
	} else {
215
		ongletSyntheseCharge = false;
216
	}
308 aurelien 217
 
218
	// On réouvre le dernier onglet consulté, à voir si on garde ça en prod, en tout cas c'est
219
	// pratique pendant le développement
220
	if($.cookie('onglet_eflore') && $.cookie('onglet_eflore') != 'ui-tabs-1') {
221
		$('#zone_onglets').tabs("select", '#'+$.cookie('onglet_eflore'));
222
	} else {
223
		selectionnerOngletSynthese();
224
		$('.ui-tabs-panel').hide();
225
		$('#synthese').show();
226
	}
233 aurelien 227
}
242 aurelien 228
 
229
function afficherOngletsPourNiveau() {
230
	/* affiche les onglets par default selon niveau*/
231
	for(indice in tableauOnglets) {
232
		var ongletEnCours = tableauOnglets[indice];
277 aurelien 233
		titre_onglet = ongletEnCours.titre;
234
		titre_onglet = $.trim(titre_onglet);
235
		if (!Array.indexOf) {
236
			  Array.prototype.indexOf = function (obj, start) {
237
			    for (var i = (start || 0); i < this.length; i++) {
238
			      if (this[i] == obj) {
239
			        return i;
240
			      }
241
			    }
242
			    return -1;
243
			  }
244
			}
245
		if (ongletsDefaut.indexOf(titre_onglet) == -1) {
242 aurelien 246
			ongletEnCours.afficherCacherModule();
247
			nbOngletsInvisibles++;
248
		}
249
	}
250
}
251
 
252
function surSelectionOnglet(event,ui) {
253
	// Récupération de l'adresse de l'onglet sélectionné
254
	var url = ui.tab.href;
255
	// le fragment suivant le # dans l'url contient l'id de l'onglet
256
	var fragmentsAncre = url.split('#');
317 aurelien 257
	fancyboxinitialise = false;
231 aurelien 258
 
242 aurelien 259
	if (fragmentsAncre.length > 0) {
260
		var ancre = fragmentsAncre[fragmentsAncre.length - 1];
261
		// si on a cliqué sur l'onglet etPlus, on ne doit rien faire car celui-ci affiche le menu
262
		// TODO: voir s'il convient d'afficher le menu EtPlus dans d'autres onglets que celui de synthese
263
		if (ancre != 'etPlus') {
264
			// Si c'est un onglet correspondant à un projet, on cache la synthèse et le plugin
265
			// chargera son contenu dans l'espace approprié
266
			// affichage des icones de fermeture d'onglet si on vient d'en changer
267
			$('.ui-icon-close').css({visibility: "visible"});
268
			if (ancre != 'ui-tabs-1') {
315 aurelien 269
				var panel = $(ui.panel);
270
			    if (panel.is(":empty")) {
271
			        panel.append("<div class='tab-chargement'>Chargement des informations...</div>")
272
			    }
273
 
242 aurelien 274
				deselectionnerOngletSynthese();
275
				$('.ui-tabs-panel').show();
276
				$('#zone_contenu_fiche').hide();
277
				// on cache la croix pour ne pas fermer l'onglet actuellement consulté
278
				$(ui.tab).nextAll().css({visibility: "hidden"});
308 aurelien 279
				$.cookie('onglet_eflore', ancre);
242 aurelien 280
			} else {
281
				if(ongletSyntheseCharge) {
282
					// Si c'est l'onglet fiche, on le sélectionne artificiellement
283
					selectionnerOngletSynthese();
284
					$('.ui-tabs-panel').hide();
285
					$('#zone_contenu_fiche').show();
308 aurelien 286
					$.cookie('onglet_eflore', ancre);
242 aurelien 287
					return false;
288
				} else {
289
					window.location = url;
290
				}
291
			}
292
		}
293
	}
294
 
295
	return true;
296
}
297
 
298
function lierModulesEtOnglets() {
299
	var i = 1;
227 delphine 300
 
301
	//Parcourir la totalité des modules générés et les lier grâce à la classe Module
302
	$(".module").each(function () {
303
		i++;
304
		identifiantOnglet = "#zone_onglets>ul>li:nth-child(" + i +")";
305
		var module = new Module(i, this, $(identifiantOnglet));
242 aurelien 306
		var titre = $(this).children('h3').text();
307
		module.titre = titre;
308
 
227 delphine 309
		tableauOnglets[identifiantOnglet] = module;
310
	});
230 delphine 311
	$(".lien-onglet").each(function() {
238 delphine 312
		var adresse_onglet = $(this).attr('href');
313
		var adresse_contenu_onglet = adresse_onglet.replace('action=fiche','action=onglet');
314
		$(this).attr('href', adresse_contenu_onglet);
315
	});
242 aurelien 316
}
227 delphine 317
 
242 aurelien 318
function creerMenuOngletsFermes() {
227 delphine 319
	$("#ongletEtPlus").click(function() {
320
		afficherCacherMenuOnglets();
321
	});
243 aurelien 322
 
242 aurelien 323
	$('.elementMenuModules').live('click', function() {
227 delphine 324
		var idOnglet = $(this).attr('rel');
325
		var objet = tableauOnglets[idOnglet];
326
		objet.afficherCacherModule();
327
		$(this).toggleClass("elementMenuModulesSelectionne");
233 aurelien 328
 
329
		// suppression de l'item correspondant dans le menu
330
		$(this).remove();
331
		nbOngletsInvisibles --;
332
		// si tous les onglets sont affichés alors on cache le menu
333
		if(nbOngletsInvisibles == 0) {
334
			afficherCacherMenuOnglets();
335
		}
227 delphine 336
	});
243 aurelien 337
 
338
	$('#conteneurMenuOnglets').live("mouseleave", function() {
339
		fermerMenuOnglets();
340
	});
242 aurelien 341
}
342
 
343
function ajouterTitreSurvolOnglets() {
228 delphine 344
	/* ajout de l'info au survol de l'onglet quand la taille est diminuée*/
227 delphine 345
	$('.lien-onglet').parent().each(function() {
346
		$(this).attr("title",$(this).children("a").text());
347
	});
242 aurelien 348
}
317 aurelien 349
 
350
var fancyboxinitialise = false;
351
 
242 aurelien 352
//Initialisation
353
$(document).ready(function() {
354
 
355
	lierModulesEtOnglets();
356
 
357
	/* mouvement des blocs */
358
	$( ".colonne" ).sortable({
359
		connectWith: ".colonne",
360
		handle: $(".module").children('h3') // mouvement seulement sur les titres
361
	});
362
 
363
	$( ".colonne" ).disableSelection();
364
 
365
	$('#zone_onglets').tabs({
366
		add: function(event, ui) {
367
			redimensionnerOnglets();
368
		},
369
		remove: function(event, ui) {
370
			redimensionnerOnglets();
371
		},
372
		select: function(event, ui) {
373
			return surSelectionOnglet(event,ui)
374
		}
375
	});
376
 
277 aurelien 377
	$('.lien_popup').live('click',function(event) {
378
		event.preventDefault();
379
		$.fancybox(this,{
380
			autoDimensions:false,
381
			width:580,
382
			height:'auto'
383
		});
384
	});
385
 
317 aurelien 386
	$('.illustration_taxon').live('click',function(event) {
387
		if(!fancyboxinitialise) {
388
			event.preventDefault();
389
			$('.illustration_taxon').fancybox();
390
			fancyboxinitialise = true;
391
			$(this).click();
392
		}
393
	});
394
 
242 aurelien 395
	creerMenuOngletsFermes();
396
	afficherOngletsPourNiveau();
397
	ajouterTitreSurvolOnglets();
227 delphine 398
	redimensionnerOnglets();
233 aurelien 399
	selectionnerOngletParDefautOuEnregistre();
242 aurelien 400
 
227 delphine 401
});