Subversion Repositories eFlore/Applications.eflore-consultation

Rev

Rev 232 | Rev 236 | Go to most recent revision | Only display areas with differences | Ignore whitespace | Details | Blame | Last modification | View Log | RSS feed

Rev 232 Rev 233
1 
var modules = Array();
 1 
var modules = Array();
2 
var tableauOnglets = Array();
 2 
var tableauOnglets = Array();
- 
 
 3 
 
- 
 
 4 
var nbOngletsInvisibles = 0;
3
5
4 
/** Classe Module
 6 
/** Classe Module
5 
* Définit un module de type portlet
 7 
* Définit un module de type portlet
6 
**/
 8 
**/
7 
function Module(id, module, onglet, statique) {
 9 
function Module(id, module, onglet, statique) {
8 
 
 10 
 
9 
	// Variables de classe : identifiant, titre, et le HTML du résumé à afficher dans le contenu
 11 
	// Variables de classe : identifiant, titre, et le HTML du résumé à afficher dans le contenu
10 
	this.id = id;
 12 
	this.id = id;
11 
	this.titre;
 13 
	this.titre;
12 
	this.htmlResume;
 14 
	this.htmlResume;
13 
	this.statique = statique;
 15 
	this.statique = statique;
14 
 
 16 
 
15 
	// Les objets Portlet et Onglet que l'ont garde en mémoire pour pouvoir y accéder facilement
17 
	// Les objets Portlet et Onglet que l'ont garde en mémoire pour pouvoir y accéder facilement
16 
	this.portlet = module;
 18 
	this.portlet = module;
17 
	this.onglet;
 19 
	this.onglet;
18 
 
 20 
 
19 
	// creerPortlet
21 
	// creerPortlet
20 
	// Créer l'objet Portlet HTML à afficher et le stocker dans les variables de classe
 22 
	// Créer l'objet Portlet HTML à afficher et le stocker dans les variables de classe
21 
	this.creerPortlet = function() {
 23 
	this.creerPortlet = function() {
22 
		var objet = this;
 24 
		var objet = this;
23 
 
 25 
 
24 
		var titre = $(module).children('.titre');
 26 
		var titre = $(module).children('.titre');
25 
		titre.className = 'titre ui-widget-header ui-corner-all';
 27 
		titre.className = 'titre ui-widget-header ui-corner-all';
26 
		titre.id = 'titre-' + this.id;
 28 
		titre.id = 'titre-' + this.id;
27 
 
 29 
 
28 
		var contenu = $(module).children('.contenu');
 30 
		var contenu = $(module).children('.contenu');
29 
		contenu.id = 'contenu-' + this.id;
 31 
		contenu.id = 'contenu-' + this.id;
30 
		contenu.className ='contenu';
 32 
		contenu.className ='contenu';
31 
 
 33 
 
32 
		var lienToggle = document.createElement('span');
 34 
		var lienToggle = document.createElement('span');
33 
		lienToggle.className = 'lienToggle ui-icon ui-icon-minusthick';
 35 
		lienToggle.className = 'lienToggle ui-icon ui-icon-minusthick';
34 
		$(titre).append(lienToggle);
 36 
		$(titre).append(lienToggle);
35 
		$(lienToggle).click(function() {
 37 
		$(lienToggle).click(function() {
36 
			objet.afficherCacherModule();
 38 
			objet.afficherCacherModule();
37 
		});
 39 
		});
38 
 
 40 
 
39 
		this.portlet = module;
 41 
		this.portlet = module;
40 
		return module;
42 
		return module;
41 
	}
43 
	}
42 
 
 44 
 
43 
	// creerOnglet
 45 
	// creerOnglet
44 
	// Créer l'objet Onglet HTML
 46 
	// Créer l'objet Onglet HTML
45 
	this.creerOnglet = function() {
 47 
	this.creerOnglet = function() {
46 
		var objet = this;
 48 
		var objet = this;
47 
 
 49 
 
48 
		if (!statique) {
 50 
		if (!statique) {
49 
			var span = document.createElement('span');
 51 
			var span = document.createElement('span');
50 
			span.className = "ui-icon ui-icon-close";
 52 
			span.className = "ui-icon ui-icon-close";
51
53
52 
			// Gestion de la fermeture de l'onglet
 54 
			// Gestion de la fermeture de l'onglet
53 
			$(span).live( "click", function() {
 55 
			$(span).live( "click", function() {
54 
				objet.afficherCacherModule();
 56 
				objet.afficherCacherModule();
55 
				redimensionnerOnglets();
 57 
				redimensionnerOnglets();
56 
			});
 58 
			});
57 
			$(onglet).append(span);
 59 
			$(onglet).append(span);
58 
		}
 60 
		}
59 
		this.onglet = onglet;
 61 
		this.onglet = onglet;
60 
	}
 62 
	}
61
63
62 
	// Initialisation de l'objet
 64 
	// Initialisation de l'objet
63 
	this.creerPortlet();
 65 
	this.creerPortlet();
64 
	this.creerOnglet();
 66 
	this.creerOnglet();
65
67
66 
	// Accesseurs de la classe
 68 
	// Accesseurs de la classe
67 
	this.getOnglet = function() {
 69 
	this.getOnglet = function() {
68 
		return this.onglet;
70 
		return this.onglet;
69 
	}
 71 
	}
70
72
71 
	this.getPortlet = function() {
 73 
	this.getPortlet = function() {
72 
		return this.portlet;
 74 
		return this.portlet;
73 
	}
 75 
	}
74
76
75 
	// fonctions d'affichage et cachage (je sais pas si on dit ça comme ça) des onglets
 77 
	// fonctions d'affichage et cachage (je sais pas si on dit ça comme ça) des onglets
76 
	this.afficherCacherModule = function() {
78 
	this.afficherCacherModule = function() {
77 
		$(this.portlet).find(".lienToggle").toggleClass("ui-icon-plusthick");
 79 
		$(this.portlet).find(".lienToggle").toggleClass("ui-icon-plusthick");
78 
		$(this.portlet).find(".lienToggle").toggleClass("ui-icon-minusthick");
 80 
		$(this.portlet).find(".lienToggle").toggleClass("ui-icon-minusthick");
79 
		$(this.portlet).find(".contenu").toggle();
 81 
		$(this.portlet).find(".contenu").toggle();
80 
		$(this.onglet).toggle();
 82 
		$(this.onglet).toggle();
81
83
82 
		redimensionnerOnglets();
 84 
		redimensionnerOnglets();
83 
	}
 85 
	}
84 
}
 86 
}
85 
 
 87 
 
86 
function afficherCacherMenuOnglets() {
 88 
function afficherCacherMenuOnglets() {
87 
	if($("#conteneurMenuOnglets").html() != '') {
 89 
	if($("#conteneurMenuOnglets").html() != '') {
88 
		$("#conteneurMenuOnglets").html('');
 90 
		$("#conteneurMenuOnglets").html('');
89 
		$('#lienOngletEtPlus').text('+');
 91 
		$('#lienOngletEtPlus').text('+');
90 
	} else {
 92 
	} else {
91 
		var htmlMenu = '<ul class="menuModules">';
 93 
		var htmlMenu = '<ul class="menuModules">';
- 
 
 94 
		nbOngletsInvisibles = 0;
92 
		for (idOnglet in tableauOnglets) {
 95 
		for (idOnglet in tableauOnglets) {
93 
			var classe = "elementMenuModules";
 96 
			var classe = "elementMenuModules";
94 
			if($(idOnglet).is(':visible')) {
 97 
			if(!$(idOnglet).is(':visible')) {
95 
				classe += " elementMenuModulesSelectionne";
 98 
				nbOngletsInvisibles++;
- 
 
 99 
				htmlMenu += '<li class="'+classe+'" rel="'+idOnglet+'" id="menu_module_'+idOnglet+'">'+tableauOnglets[idOnglet].titre+'</li>';
96 
			}
 100 
			}
97 
			htmlMenu += '<li class="'+classe+'" rel="'+idOnglet+'" id="menu_module_'+idOnglet+'">'+tableauOnglets[idOnglet].titre+'</li>';
 - 
 
98 
		}
 101 
		}
99 
		htmlMenu += '</ul>';
 102 
		htmlMenu += '</ul>';
- 
 
 103
- 
 
 104 
		if (nbOngletsInvisibles > 0) {
100 
		$("#conteneurMenuOnglets").html(htmlMenu);
 105 
			$("#conteneurMenuOnglets").html(htmlMenu);
101 
		$("#conteneurMenuOnglets").toggle();
 106 
			$("#conteneurMenuOnglets").toggle();
102 
		$('#lienOngletEtPlus').text('-');
 107 
			$('#lienOngletEtPlus').text('-');
- 
 
 108 
		}
103 
	}
 109 
	}
104 
}
 110 
}
105
111
106 
function redimensionnerOnglets() {
 112 
function redimensionnerOnglets() {
107 
	// 570 px au max
 113 
	// 570 px au max
108 
	// 18 largeur croix
114 
	// 18 px largeur croix
109 
	// 18 largeur texte
115 
	// 18 px largeur texte
110 
	// 36 largeur totale
 116 
	// 36 px largeur totale
111 
	var liensVisibles = $('#zone_onglets > ul > li:visible > a');
 117 
	var liensVisibles = $('#zone_onglets > ul > li:visible > a');
112 
	var longueurLiens = 0;
 118 
	var longueurLiens = 0;
113 
	liensVisibles.each(function() {
 119 
	liensVisibles.each(function() {
114 
		longueurLiens += $(this).width();
 120 
		longueurLiens += $(this).width();
115 
	});
 121 
	});
116 
	var nbOnglets = $('#zone_onglets > ul > li:visible').length;
 122 
	var nbOnglets = $('#zone_onglets > ul > li:visible').length;
117 
	var longueurMax =  535 - (nbOnglets * 36);
 123 
	var longueurMax =  535 - (nbOnglets * 36);
118 
	if(longueurLiens >= longueurMax || nbOnglets > 5) {
124 
	if(longueurLiens >= longueurMax || nbOnglets > 5) {
119 
		$('#zone_onglets > ul > li > a').not('.lien-statique').width(longueurMax/nbOnglets);
 125 
		$('#zone_onglets > ul > li > a').not('.lien-statique').width(longueurMax/nbOnglets);
120 
	} else {
 126 
	} else {
121 
		$('#zone_onglets > ul > li > a').not('.lien-statique').css("width","auto");
127 
		$('#zone_onglets > ul > li > a').not('.lien-statique').css("width","auto");
122 
	}
 128 
	}
123 
}
 129 
}
124 
 
 130 
 
125 
function selectionnerOngletSynthese() {
 131 
function selectionnerOngletSynthese() {
126 
	// Suppression des classes css qui mettent en surbrillance l'onglet actif
 132 
	// Suppression des classes css qui mettent en surbrillance l'onglet actif
127 
	$('#zone_onglets > ul > li').removeClass('ui-tabs-selected');
 133 
	$('#zone_onglets > ul > li').removeClass('ui-tabs-selected');
128 
	$('#zone_onglets > ul > li').removeClass('ui-state-active');
 134 
	$('#zone_onglets > ul > li').removeClass('ui-state-active');
129
135
130 
	// application de ces même classes css à l'onglet "acceuil" qui est un onglet "articifiel"
 136 
	// application de ces même classes css à l'onglet "acceuil" qui est un onglet "articifiel"
131 
	$('#onglet_synthese').addClass('ui-tabs-selected');
 137 
	$('#onglet_synthese').addClass('ui-tabs-selected');
132 
	$('#onglet_synthese').addClass('ui-state-active');
138 
	$('#onglet_synthese').addClass('ui-state-active');
133 
}
 139 
}
134 
 
 140 
 
135 
function deselectionnerOngletSynthese() {
 141 
function deselectionnerOngletSynthese() {
136 
	// Suppression des classes css qui mettent en surbrillance l'onglet actif sur l'onglet acceuil
 142 
	// Suppression des classes css qui mettent en surbrillance l'onglet actif sur l'onglet acceuil
137 
	$('#onglet_synthese').removeClass('ui-tabs-selected');
 143 
	$('#onglet_synthese').removeClass('ui-tabs-selected');
138 
	$('#onglet_synthese').removeClass('ui-state-active');
144 
	$('#onglet_synthese').removeClass('ui-state-active');
139 
}
 145 
}
- 
 
 146 
 
- 
 
 147 
function selectionnerOngletParDefautOuEnregistre() {
- 
 
 148 
	//TODO: verifier ici si un cookie est présent pour ouvrir l'onglet désiré
- 
 
 149 
	//
- 
 
 150 
	// Si pas d'onglet enregistré, selection du premier par défaut
- 
 
 151 
	$('#zone_onglets').tabs( "select" , 0);
- 
 
 152 
}
140
153
141 
//Initialisation
 154 
//Initialisation
142 
$(document).ready(function() {
 155 
$(document).ready(function() {
143 
	i = 1;
 156 
	i = 1;
144
157
145 
	//Parcourir la totalité des modules générés et les lier grâce à la classe Module
 158 
	//Parcourir la totalité des modules générés et les lier grâce à la classe Module
146 
	$(".module").each(function () {
 159 
	$(".module").each(function () {
147 
		i++;
 160 
		i++;
148 
		identifiantOnglet = "#zone_onglets>ul>li:nth-child(" + i +")";
 161 
		identifiantOnglet = "#zone_onglets>ul>li:nth-child(" + i +")";
149 
		var module = new Module(i, this, $(identifiantOnglet));
 162 
		var module = new Module(i, this, $(identifiantOnglet));
150 
		module.titre = $(this).children('h3').text();
 163 
		module.titre = $(this).children('h3').text();
151 
		tableauOnglets[identifiantOnglet] = module;
 164 
		tableauOnglets[identifiantOnglet] = module;
152 
	});
 165 
	});
153 
	$(".lien-onglet").each(function() {
 166 
	$(".lien-onglet").each(function() {
154 
        var adresse_onglet = $(this).attr('href');
 167 
        var adresse_onglet = $(this).attr('href');
155 
        var adresse_contenu_onglet = adresse_onglet.replace('action=fiche','action=onglet');
 168 
        var adresse_contenu_onglet = adresse_onglet.replace('action=fiche','action=onglet');
156 
        $(this).attr('href', adresse_contenu_onglet);
 169 
        $(this).attr('href', adresse_contenu_onglet);
157 
    });
170 
    });
158 
	/* mouvement des blocs */
 171 
	/* mouvement des blocs */
159 
	$( ".colonne" ).sortable({
 172 
	$( ".colonne" ).sortable({
160 
		connectWith: ".colonne",
 173 
		connectWith: ".colonne",
161 
		handle: $(".module").children('h3') // mouvement seulement sur les titres
 174 
		handle: $(".module").children('h3') // mouvement seulement sur les titres
162 
	});
 175 
	});
163 
 
 176 
 
164 
	$( ".colonne" ).disableSelection();
 177 
	$( ".colonne" ).disableSelection();
165
178
166 
	$('#zone_onglets').tabs({
 179 
	$('#zone_onglets').tabs({
167 
		add: function(event, ui) {
 180 
		add: function(event, ui) {
168 
			redimensionnerOnglets();
 181 
			redimensionnerOnglets();
169 
		},
 182 
		},
170 
		remove: function(event, ui) {
 183 
		remove: function(event, ui) {
171 
			redimensionnerOnglets();
 184 
			redimensionnerOnglets();
172 
		},
 185 
		},
173 
		select: function(event, ui) {
186 
		select: function(event, ui) {
174 
			// Récupération de l'adresse de l'onglet sélectionné
 187 
			// Récupération de l'adresse de l'onglet sélectionné
175 
			var url = ui.tab.href;
 188 
			var url = ui.tab.href;
176 
			// le fragment suivant le # dans l'url contient l'id de l'onglet
 189 
			// le fragment suivant le # dans l'url contient l'id de l'onglet
177 
			var fragmentsAncre = url.split('#');
 190 
			var fragmentsAncre = url.split('#');
178
191
179 
			if (fragmentsAncre.length > 0) {
 192 
			if (fragmentsAncre.length > 0) {
180 
				var ancre = fragmentsAncre[fragmentsAncre.length - 1];
 193 
				var ancre = fragmentsAncre[fragmentsAncre.length - 1];
181 
				// si on a cliqué sur l'onglet etPlus, on ne doit rien faire car celui-ci affiche le menu
 194 
				// si on a cliqué sur l'onglet etPlus, on ne doit rien faire car celui-ci affiche le menu
182 
				// TODo: voir s'il convient d'afficher le menu EtPlus dans d'autres onglets que celui de synthese
 195 
				// TODo: voir s'il convient d'afficher le menu EtPlus dans d'autres onglets que celui de synthese
183 
				if (ancre != 'etPlus') {
 196 
				if (ancre != 'etPlus') {
184 
					// Si c'est un onglet correspondant à un projet, on cache la synthèse et le plugin
 197 
					// Si c'est un onglet correspondant à un projet, on cache la synthèse et le plugin
185 
					// chargera son contenu dans l'espace approprié
 198 
					// chargera son contenu dans l'espace approprié
186 
					if (ancre != 'fiche') {
 199 
					if (ancre != 'fiche') {
187 
						deselectionnerOngletSynthese();
 200 
						deselectionnerOngletSynthese();
188 
						$('.ui-tabs-panel').show();
 201 
						$('.ui-tabs-panel').show();
189 
						$('#synthese').hide();
 202 
						$('#synthese').hide();
190 
					} else {
 203 
					} else {
191 
						// Si c'est l'onglet fiche, on le sélectionne artificiellement
 204 
						// Si c'est l'onglet fiche, on le sélectionne artificiellement
192 
						selectionnerOngletSynthese();
 205 
						selectionnerOngletSynthese();
193 
						$('.ui-tabs-panel').hide();
 206 
						$('.ui-tabs-panel').hide();
194 
						$('#synthese').show();
 207 
						$('#synthese').show();
195 
					}
 208 
					}
196 
				}
 209 
				}
197 
			}
 210 
			}
198 
 
 211 
 
199 
	        return true;
 212 
	        return true;
200 
	    }
 213 
	    }
201 
	});
 214 
	});
202
215
203 
	$("#ongletEtPlus").click(function() {
 216 
	$("#ongletEtPlus").click(function() {
204 
		afficherCacherMenuOnglets();
 217 
		afficherCacherMenuOnglets();
205 
	});
 218 
	});
206
219
207 
	$('.elementMenuModules').live('click', function() {
 220 
	$('.elementMenuModules').live('click', function() {
- 
 
 221
208 
		var idOnglet = $(this).attr('rel');
 222 
		var idOnglet = $(this).attr('rel');
209 
		var objet = tableauOnglets[idOnglet];
 223 
		var objet = tableauOnglets[idOnglet];
210 
		objet.afficherCacherModule();
 224 
		objet.afficherCacherModule();
211 
		$(this).toggleClass("elementMenuModulesSelectionne");
 225 
		$(this).toggleClass("elementMenuModulesSelectionne");
- 
 
 226
- 
 
 227 
		// suppression de l'item correspondant dans le menu
- 
 
 228 
		$(this).remove();
- 
 
 229 
		nbOngletsInvisibles --;
- 
 
 230 
		// si tous les onglets sont affichés alors on cache le menu
- 
 
 231 
		console.log(nbOngletsInvisibles);
- 
 
 232 
		if(nbOngletsInvisibles == 0) {
- 
 
 233 
			afficherCacherMenuOnglets();
- 
 
 234 
		}
212 
	});
 235 
	});
213
236
214 
	/* affiche les onglets par default selon niveau*/
 237 
	/* affiche les onglets par default selon niveau*/
215 
	for(indice in tableauOnglets) {
 238 
	for(indice in tableauOnglets) {
216 
		var ongletEnCours = tableauOnglets[indice];
 239 
		var ongletEnCours = tableauOnglets[indice];
217 
		if (ongletsDefaut.indexOf(ongletEnCours.titre) == -1) {
 240 
		if (ongletsDefaut.indexOf(ongletEnCours.titre) == -1) {
218 
			ongletEnCours.afficherCacherModule();
241 
			ongletEnCours.afficherCacherModule();
- 
 
 242 
			nbOngletsInvisibles++;
219 
		}
 243 
		}
220 
	}
 244 
	}
221
245
222 
	/* ajout de l'info au survol de l'onglet quand la taille est diminuée*/
 246 
	/* ajout de l'info au survol de l'onglet quand la taille est diminuée*/
223 
	$('.lien-onglet').parent().each(function() {
 247 
	$('.lien-onglet').parent().each(function() {
224 
		$(this).attr("title",$(this).children("a").text());
 248 
		$(this).attr("title",$(this).children("a").text());
225 
	});
 249 
	});
226
250
227 
	redimensionnerOnglets();
 251 
	redimensionnerOnglets();
- 
 
 252 
	selectionnerOngletParDefautOuEnregistre();
228 
});
 253 
});
229 

            254