Subversion Repositories eFlore/Applications.eflore-consultation

Rev

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

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