Subversion Repositories eFlore/Applications.eflore-consultation

Rev

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

Rev 230 Rev 231
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");
 - 
 
48
- 
 
49 
 
 - 
 
50 
		// Gestion du clic sur le lien
- 
 
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
 - 
 
53 
		/*$(a).click(function() {
 - 
 
54 
			//window.alert($(a).attr("href"));
 - 
 
55 
			// TODO : Changer l'url par celle du module et enregistrer la configuration actuelle des onglets.
 - 
 
56 
			location.href = $(a).attr("href");
 - 
 
57 
		});*/
 - 
 
58 
 
 47 
 
59 
		if (!statique) {
 48 
		if (!statique) {
60 
			var span = document.createElement('span');
 49 
			var span = document.createElement('span');
61 
			span.className = "ui-icon ui-icon-close";
 50 
			span.className = "ui-icon ui-icon-close";
62
51
63 
			// Gestion de la fermeture de l'onglet
 52 
			// Gestion de la fermeture de l'onglet
64 
			$(span).live( "click", function() {
 53 
			$(span).live( "click", function() {
65 
				objet.afficherCacherModule();
 54 
				objet.afficherCacherModule();
66 
				redimensionnerOnglets();
 55 
				redimensionnerOnglets();
67 
			});
 56 
			});
68 
			$(onglet).append(span);
 57 
			$(onglet).append(span);
69 
		}
 58 
		}
70 
		this.onglet = onglet;
 59 
		this.onglet = onglet;
71 
	}
 60 
	}
72
61
73 
	// Initialisation de l'objet
 62 
	// Initialisation de l'objet
74 
	this.creerPortlet();
 63 
	this.creerPortlet();
75 
	this.creerOnglet();
 64 
	this.creerOnglet();
76
65
77 
	// Accesseurs de la classe
 66 
	// Accesseurs de la classe
78 
	this.getOnglet = function() {
 67 
	this.getOnglet = function() {
79 
		return this.onglet;
68 
		return this.onglet;
80 
	}
 69 
	}
81
70
82 
	this.getPortlet = function() {
 71 
	this.getPortlet = function() {
83 
		return this.portlet;
 72 
		return this.portlet;
84 
	}
 73 
	}
85
74
86 
	// fonctions d'affichage et cachage (je sais pas si on dit ça comme ça) des onglets
 75 
	// fonctions d'affichage et cachage (je sais pas si on dit ça comme ça) des onglets
87 
	this.afficherCacherModule = function() {
76 
	this.afficherCacherModule = function() {
88 
		$(this.portlet).find(".lienToggle").toggleClass("ui-icon-plusthick");
 77 
		$(this.portlet).find(".lienToggle").toggleClass("ui-icon-plusthick");
89 
		$(this.portlet).find(".lienToggle").toggleClass("ui-icon-minusthick");
 78 
		$(this.portlet).find(".lienToggle").toggleClass("ui-icon-minusthick");
90 
		$(this.portlet).find(".contenu").toggle();
 79 
		$(this.portlet).find(".contenu").toggle();
91 
		$(this.onglet).toggle();
 80 
		$(this.onglet).toggle();
92
81
93 
		redimensionnerOnglets();
 82 
		redimensionnerOnglets();
94 
	}
 83 
	}
95 
}
 84 
}
96 
 
 - 
 
97 
 
 - 
 
98 
 
 85 
 
99 
function afficherCacherMenuOnglets() {
 86 
function afficherCacherMenuOnglets() {
100 
	if($("#conteneurMenuOnglets").html() != '') {
 87 
	if($("#conteneurMenuOnglets").html() != '') {
101 
		$("#conteneurMenuOnglets").html('');
 88 
		$("#conteneurMenuOnglets").html('');
102 
		$('#lienOngletEtPlus').text('+');
 89 
		$('#lienOngletEtPlus').text('+');
103 
	} else {
 90 
	} else {
104 
		var htmlMenu = '<ul class="menuModules">';
 91 
		var htmlMenu = '<ul class="menuModules">';
105 
		for (idOnglet in tableauOnglets) {
 92 
		for (idOnglet in tableauOnglets) {
106 
			var classe = "elementMenuModules";
 93 
			var classe = "elementMenuModules";
107 
			if($(idOnglet).is(':visible')) {
 94 
			if($(idOnglet).is(':visible')) {
108 
				classe += " elementMenuModulesSelectionne";
 95 
				classe += " elementMenuModulesSelectionne";
109 
			}
 96 
			}
110 
			htmlMenu += '<li class="'+classe+'" rel="'+idOnglet+'" id="menu_module_'+idOnglet+'">'+tableauOnglets[idOnglet].titre+'</li>';
 97 
			htmlMenu += '<li class="'+classe+'" rel="'+idOnglet+'" id="menu_module_'+idOnglet+'">'+tableauOnglets[idOnglet].titre+'</li>';
111 
		}
 98 
		}
112 
		htmlMenu += '</ul>';
 99 
		htmlMenu += '</ul>';
113 
		$("#conteneurMenuOnglets").html(htmlMenu);
 100 
		$("#conteneurMenuOnglets").html(htmlMenu);
114 
		$("#conteneurMenuOnglets").toggle();
 101 
		$("#conteneurMenuOnglets").toggle();
115 
		$('#lienOngletEtPlus').text('-');
 102 
		$('#lienOngletEtPlus').text('-');
116 
	}
 103 
	}
117 
}
 104 
}
118
105
119 
function redimensionnerOnglets() {
 106 
function redimensionnerOnglets() {
120 
	// 570 px au max
 107 
	// 570 px au max
121 
	// 18 largeur croix
108 
	// 18 largeur croix
122 
	// 18 largeur texte
109 
	// 18 largeur texte
123 
	// 36 largeur totale
 110 
	// 36 largeur totale
124 
	var liensVisibles = $('#zone_onglets > ul > li:visible > a');
 111 
	var liensVisibles = $('#zone_onglets > ul > li:visible > a');
125 
	var longueurLiens = 0;
 112 
	var longueurLiens = 0;
126 
	liensVisibles.each(function() {
 113 
	liensVisibles.each(function() {
127 
		longueurLiens += $(this).width();
 114 
		longueurLiens += $(this).width();
128 
	});
 115 
	});
129 
	var nbOnglets = $('#zone_onglets > ul > li:visible').length;
 116 
	var nbOnglets = $('#zone_onglets > ul > li:visible').length;
130 
	var longueurMax =  535 - (nbOnglets * 36);
 117 
	var longueurMax =  535 - (nbOnglets * 36);
131 
	if(longueurLiens >= longueurMax || nbOnglets > 5) {
118 
	if(longueurLiens >= longueurMax || nbOnglets > 5) {
132 
		$('#zone_onglets > ul > li > a').not('.lien-statique').width(longueurMax/nbOnglets);
 119 
		$('#zone_onglets > ul > li > a').not('.lien-statique').width(longueurMax/nbOnglets);
133 
	} else {
 120 
	} else {
134 
		$('#zone_onglets > ul > li > a').not('.lien-statique').css("width","auto");
121 
		$('#zone_onglets > ul > li > a').not('.lien-statique').css("width","auto");
135 
	}
 122 
	}
136 
}
 123 
}
- 
 
 124 
 
- 
 
 125 
function selectionnerOngletSynthese() {
- 
 
 126 
	// Suppression des classes css qui mettent en surbrillance l'onglet actif
- 
 
 127 
	$('#zone_onglets > ul > li').removeClass('ui-tabs-selected');
- 
 
 128 
	$('#zone_onglets > ul > li').removeClass('ui-state-active');
- 
 
 129
- 
 
 130 
	// application de ces même classes css à l'onglet "acceuil" qui est un onglet "articifiel"
- 
 
 131 
	$('#onglet_synthese').addClass('ui-tabs-selected');
- 
 
 132 
	$('#onglet_synthese').addClass('ui-state-active');
- 
 
 133 
}
- 
 
 134 
 
- 
 
 135 
function deselectionnerOngletSynthese() {
- 
 
 136 
	// Suppression des classes css qui mettent en surbrillance l'onglet actif sur l'onglet acceuil
- 
 
 137 
	$('#onglet_synthese').removeClass('ui-tabs-selected');
- 
 
 138 
	$('#onglet_synthese').removeClass('ui-state-active');
- 
 
 139 
}
137
140
138 
//Initialisation
 141 
//Initialisation
139 
$(document).ready(function() {
 142 
$(document).ready(function() {
140 
	i = 1;
 143 
	i = 1;
141
144
142 
	//Parcourir la totalité des modules générés et les lier grâce à la classe Module
 145 
	//Parcourir la totalité des modules générés et les lier grâce à la classe Module
143 
	$(".module").each(function () {
 146 
	$(".module").each(function () {
144 
		i++;
 147 
		i++;
145 
		identifiantOnglet = "#zone_onglets>ul>li:nth-child(" + i +")";
 148 
		identifiantOnglet = "#zone_onglets>ul>li:nth-child(" + i +")";
146 
		var module = new Module(i, this, $(identifiantOnglet));
 149 
		var module = new Module(i, this, $(identifiantOnglet));
147 
		module.titre = $(this).children('h3').text();
 150 
		module.titre = $(this).children('h3').text();
148 
		tableauOnglets[identifiantOnglet] = module;
 151 
		tableauOnglets[identifiantOnglet] = module;
149 
	});
 152 
	});
150 
	$(".lien-onglet").each(function() {
 153 
	$(".lien-onglet").each(function() {
151 
        var adresse_onglet = $(this).attr('href');
 154 
        var adresse_onglet = $(this).attr('href');
152 
        var adresse_contenu_onglet = adresse_onglet.replace('nom_scientifique','onglet');
 155 
        var adresse_contenu_onglet = adresse_onglet.replace('action=fiche','action=onglet');
153 
        $(this).attr('href', adresse_contenu_onglet);
 156 
        $(this).attr('href', adresse_contenu_onglet);
154 
    });
157 
    });
155 
	/* mouvement des blocs */
 158 
	/* mouvement des blocs */
156 
	$( ".colonne" ).sortable({
 159 
	$( ".colonne" ).sortable({
157 
		connectWith: ".colonne",
 160 
		connectWith: ".colonne",
158 
		handle: $(".module").children('h3') // mouvement seulement sur les titres
 161 
		handle: $(".module").children('h3') // mouvement seulement sur les titres
159 
	});
 162 
	});
160 
 
 163 
 
161 
	$( ".colonne" ).disableSelection();
 164 
	$( ".colonne" ).disableSelection();
- 
 
 165
162 
	$('#zone_onglets').tabs({
 166 
	$('#zone_onglets').tabs({
163 
		add: function(event, ui) {
 167 
		add: function(event, ui) {
164 
			redimensionnerOnglets();
 168 
			redimensionnerOnglets();
165 
		},
 169 
		},
166 
		remove: function(event, ui) {
 170 
		remove: function(event, ui) {
167 
			redimensionnerOnglets();
 171 
			redimensionnerOnglets();
168 
		}/*,
 172 
		},
169 
		select: function(event, ui) {
 173 
		select: function(event, ui) {
- 
 
 174 
			// Récupération de l'adresse de l'onglet sélectionné
170 
	        var url = $.data(ui.tab, 'load.tabs');
 175 
			var url = ui.tab.href;
- 
 
 176 
			// le fragment suivant le # dans l'url contient l'id de l'onglet
- 
 
 177 
			var fragmentsAncre = url.split('#');
- 
 
 178
- 
 
 179 
			if (fragmentsAncre.length > 0) {
- 
 
 180 
				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
- 
 
 182 
				if (ancre != 'etPlus') {
- 
 
 183 
					// Si c'est un onglet correspondant à un projet, on cache la synthèse et le plugin
- 
 
 184 
					// chargera son contenu dans l'espace approprié
171 
	        if( url ) {
 185 
					if (ancre != 'fiche') {
172 
	            location.href = url;
 186 
						deselectionnerOngletSynthese();
- 
 
 187 
						$('.ui-tabs-panel').show();
173 
	            return false;
 188 
						$('#synthese').hide();
174 
	        }
 189 
					} else {
- 
 
 190 
						// Si c'est l'onglet fiche, on le sélectionne artificiellement
- 
 
 191 
						selectionnerOngletSynthese();
- 
 
 192 
						$('.ui-tabs-panel').hide();
- 
 
 193 
						$('#synthese').show();
- 
 
 194 
					}
- 
 
 195 
				}
- 
 
 196 
			}
- 
 
 197 
 
175 
	        return true;
 198 
	        return true;
176 
	    }*/
 199 
	    }
177 
	});
 200 
	});
178
- 
 
179
- 
 
180 
 
 201
181 
	$("#ongletEtPlus").click(function() {
 202 
	$("#ongletEtPlus").click(function() {
182 
		afficherCacherMenuOnglets();
 203 
		afficherCacherMenuOnglets();
183 
	});
 204 
	});
184
205
185 
	$('.elementMenuModules').live('click', function() {
 206 
	$('.elementMenuModules').live('click', function() {
186 
		var idOnglet = $(this).attr('rel');
 207 
		var idOnglet = $(this).attr('rel');
187 
		var objet = tableauOnglets[idOnglet];
 208 
		var objet = tableauOnglets[idOnglet];
188 
		objet.afficherCacherModule();
 209 
		objet.afficherCacherModule();
189 
		$(this).toggleClass("elementMenuModulesSelectionne");
 210 
		$(this).toggleClass("elementMenuModulesSelectionne");
190 
	});
 211 
	});
191
212
192 
	/* affiche les onglets par default selon niveau*/
 213 
	/* affiche les onglets par default selon niveau*/
193 
	for(indice in tableauOnglets) {
 214 
	for(indice in tableauOnglets) {
194 
		var ongletEnCours = tableauOnglets[indice];
 215 
		var ongletEnCours = tableauOnglets[indice];
195 
		if (ongletsDefaut.indexOf(ongletEnCours.titre) == -1) {
 216 
		if (ongletsDefaut.indexOf(ongletEnCours.titre) == -1) {
196 
			ongletEnCours.afficherCacherModule();
217 
			ongletEnCours.afficherCacherModule();
197 
		}
 218 
		}
198 
	}
 219 
	}
199
220
200 
	/* ajout de l'info au survol de l'onglet quand la taille est diminuée*/
 221 
	/* ajout de l'info au survol de l'onglet quand la taille est diminuée*/
201 
	$('.lien-onglet').parent().each(function() {
 222 
	$('.lien-onglet').parent().each(function() {
202 
		$(this).attr("title",$(this).children("a").text());
 223 
		$(this).attr("title",$(this).children("a").text());
203 
	});
 224 
	});
204
225
205 
	redimensionnerOnglets();
 226 
	redimensionnerOnglets();
206 
});
 227 
});