Subversion Repositories eFlore/Applications.eflore-consultation

Rev

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

Rev 227 Rev 228
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 
		// Gestion du clic sur le lien
50 
		// Gestion du clic sur le lien
50 
		// 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
51 
		// déplacer vers la page du module
 52 
		// déplacer vers la page du module
52 
		$(a).click(function() {
 53 
		$(a).click(function() {
53 
			// TODO : Changer l'url par celle du module et enregistrer la configuration actuelle des onglets.
 54 
			// TODO : Changer l'url par celle du module et enregistrer la configuration actuelle des onglets.
54 
			//$(location).attr('href',"http://www.google.fr");
 55 
			location.href = $(a).attr("href");
55 
		});
 56 
		});
56 
 
 57 
 
57 
		if (!statique) {
 58 
		if (!statique) {
58 
			var span = document.createElement('span');
 59 
			var span = document.createElement('span');
59 
			span.className = "ui-icon ui-icon-close";
 60 
			span.className = "ui-icon ui-icon-close";
60
61
61 
			// Gestion de la fermeture de l'onglet
 62 
			// Gestion de la fermeture de l'onglet
62 
			$(span).live( "click", function() {
 63 
			$(span).live( "click", function() {
63 
				objet.afficherCacherModule();
 64 
				objet.afficherCacherModule();
64 
				redimensionnerOnglets();
 65 
				redimensionnerOnglets();
65 
			});
 66 
			});
66 
			$(onglet).append(span);
 67 
			$(onglet).append(span);
67 
		}
 68 
		}
68 
		this.onglet = onglet;
 69 
		this.onglet = onglet;
69 
	}
 70 
	}
70
71
71 
	// Initialisation de l'objet
 72 
	// Initialisation de l'objet
72 
	this.creerPortlet();
 73 
	this.creerPortlet();
73 
	this.creerOnglet();
 74 
	this.creerOnglet();
74
75
75 
	// Accesseurs de la classe
 76 
	// Accesseurs de la classe
76 
	this.getOnglet = function() {
 77 
	this.getOnglet = function() {
77 
		return this.onglet;
78 
		return this.onglet;
78 
	}
 79 
	}
79
80
80 
	this.getPortlet = function() {
 81 
	this.getPortlet = function() {
81 
		return this.portlet;
 82 
		return this.portlet;
82 
	}
 83 
	}
83
84
84 
	// fonctions d'affichage et cachage (je sais pas si on dit ça comme ça) des onglets
 85 
	// fonctions d'affichage et cachage (je sais pas si on dit ça comme ça) des onglets
85 
	this.afficherCacherModule = function() {
86 
	this.afficherCacherModule = function() {
86 
		$(this.portlet).find(".lienToggle").toggleClass("ui-icon-plusthick");
 87 
		$(this.portlet).find(".lienToggle").toggleClass("ui-icon-plusthick");
87 
		$(this.portlet).find(".lienToggle").toggleClass("ui-icon-minusthick");
 88 
		$(this.portlet).find(".lienToggle").toggleClass("ui-icon-minusthick");
88 
		$(this.portlet).find(".contenu").toggle();
 89 
		$(this.portlet).find(".contenu").toggle();
89 
		$(this.onglet).toggle();
 90 
		$(this.onglet).toggle();
90
91
91 
		redimensionnerOnglets();
 92 
		redimensionnerOnglets();
92 
	}
 93 
	}
93 
}
 94 
}
94 
 
 95 
 
95 
 
 96 
 
96 
 
 97 
 
97 
function afficherCacherMenuOnglets() {
 98 
function afficherCacherMenuOnglets() {
98 
	if($("#conteneurMenuOnglets").html() != '') {
 99 
	if($("#conteneurMenuOnglets").html() != '') {
99 
		$("#conteneurMenuOnglets").html('');
 100 
		$("#conteneurMenuOnglets").html('');
100 
		$('#lienOngletEtPlus').text('+');
 101 
		$('#lienOngletEtPlus').text('+');
101 
	} else {
 102 
	} else {
102 
		var htmlMenu = '<ul class="menuModules">';
 103 
		var htmlMenu = '<ul class="menuModules">';
103 
		for (idOnglet in tableauOnglets) {
 104 
		for (idOnglet in tableauOnglets) {
104 
			var classe = "elementMenuModules";
 105 
			var classe = "elementMenuModules";
105 
			if($(idOnglet).is(':visible')) {
 106 
			if($(idOnglet).is(':visible')) {
106 
				classe += " elementMenuModulesSelectionne";
 107 
				classe += " elementMenuModulesSelectionne";
107 
			}
 108 
			}
108 
			htmlMenu += '<li class="'+classe+'" rel="'+idOnglet+'" id="menu_module_'+idOnglet+'">'+tableauOnglets[idOnglet].titre+'</li>';
 109 
			htmlMenu += '<li class="'+classe+'" rel="'+idOnglet+'" id="menu_module_'+idOnglet+'">'+tableauOnglets[idOnglet].titre+'</li>';
109 
		}
 110 
		}
110 
		htmlMenu += '</ul>';
 111 
		htmlMenu += '</ul>';
111 
		$("#conteneurMenuOnglets").html(htmlMenu);
 112 
		$("#conteneurMenuOnglets").html(htmlMenu);
112 
		$("#conteneurMenuOnglets").toggle();
 113 
		$("#conteneurMenuOnglets").toggle();
113 
		$('#lienOngletEtPlus').text('-');
 114 
		$('#lienOngletEtPlus').text('-');
114 
	}
 115 
	}
115 
}
 116 
}
116
117
117 
function redimensionnerOnglets() {
 118 
function redimensionnerOnglets() {
118 
	// 570 px au max
 119 
	// 570 px au max
119 
	// 18 largeur croix
120 
	// 18 largeur croix
120 
	// 18 largeur texte
121 
	// 18 largeur texte
121 
	// 36 largeur totale
 122 
	// 36 largeur totale
122 
	var liensVisibles = $('#zone_onglets > ul > li:visible > a');
 123 
	var liensVisibles = $('#zone_onglets > ul > li:visible > a');
123 
	var longueurLiens = 0;
 124 
	var longueurLiens = 0;
124 
	liensVisibles.each(function() {
 125 
	liensVisibles.each(function() {
125 
		longueurLiens += $(this).width();
 126 
		longueurLiens += $(this).width();
126 
	});
 127 
	});
127 
	var nbOnglets = $('#zone_onglets > ul > li:visible').length;
 128 
	var nbOnglets = $('#zone_onglets > ul > li:visible').length;
128 
	var longueurMax =  535 - (nbOnglets * 36);
 129 
	var longueurMax =  535 - (nbOnglets * 36);
129 
	if(longueurLiens >= longueurMax || nbOnglets > 5) {
130 
	if(longueurLiens >= longueurMax || nbOnglets > 5) {
130 
		$('#zone_onglets > ul > li > a').not('.lien-statique').width(longueurMax/nbOnglets);
 131 
		$('#zone_onglets > ul > li > a').not('.lien-statique').width(longueurMax/nbOnglets);
131 
	} else {
 132 
	} else {
132 
		$('#zone_onglets > ul > li > a').not('.lien-statique').css("width","auto");
133 
		$('#zone_onglets > ul > li > a').not('.lien-statique').css("width","auto");
133 
	}
 134 
	}
134 
}
 135 
}
135
136
136 
//Initialisation
 137 
//Initialisation
137 
$(document).ready(function() {
 138 
$(document).ready(function() {
138 
	i = 1;
 139 
	i = 1;
139
140
140 
	//Parcourir la totalité des modules générés et les lier grâce à la classe Module
 141 
	//Parcourir la totalité des modules générés et les lier grâce à la classe Module
141 
	$(".module").each(function () {
 142 
	$(".module").each(function () {
142 
		i++;
 143 
		i++;
143 
		identifiantOnglet = "#zone_onglets>ul>li:nth-child(" + i +")";
 144 
		identifiantOnglet = "#zone_onglets>ul>li:nth-child(" + i +")";
144 
		var module = new Module(i, this, $(identifiantOnglet));
 145 
		var module = new Module(i, this, $(identifiantOnglet));
145 
		module.titre = $(this).children('h3').text();
 146 
		module.titre = $(this).children('h3').text();
146 
		tableauOnglets[identifiantOnglet] = module;
 147 
		tableauOnglets[identifiantOnglet] = module;
147 
	});
 148 
	});
- 
 
 149
148
150 
	/* mouvement des blocs */
149 
	$( ".colonne" ).sortable({
 151 
	$( ".colonne" ).sortable({
- 
 
 152 
		connectWith: ".colonne",
150 
		connectWith: ".colonne"
 153 
		handle: $(".module").children('h3') // mouvement seulement sur les titres
151 
	});
 154 
	});
152 
 
 155 
 
153 
	$( ".colonne" ).disableSelection();
 156 
	$( ".colonne" ).disableSelection();
154 
	$('#zone_onglets').tabs({
 157 
	$('#zone_onglets').tabs({
155 
		add: function(event, ui) {
 158 
		add: function(event, ui) {
156 
			redimensionnerOnglets();
 159 
			redimensionnerOnglets();
157 
		},
 160 
		},
158 
		remove: function(event, ui) {
 161 
		remove: function(event, ui) {
159 
			redimensionnerOnglets();
 162 
			redimensionnerOnglets();
160 
		}
 163 
		}
161 
	});
 164 
	});
162 
 
 165 
 
163 
	$("#ongletEtPlus").click(function() {
 166 
	$("#ongletEtPlus").click(function() {
164 
		afficherCacherMenuOnglets();
 167 
		afficherCacherMenuOnglets();
165 
	});
 168 
	});
166
169
167 
	$('.elementMenuModules').live('click', function() {
 170 
	$('.elementMenuModules').live('click', function() {
168 
		var idOnglet = $(this).attr('rel');
 171 
		var idOnglet = $(this).attr('rel');
169 
		var objet = tableauOnglets[idOnglet];
 172 
		var objet = tableauOnglets[idOnglet];
170 
		objet.afficherCacherModule();
 173 
		objet.afficherCacherModule();
171 
		$(this).toggleClass("elementMenuModulesSelectionne");
 174 
		$(this).toggleClass("elementMenuModulesSelectionne");
172 
	});
 175 
	});
- 
 
 176
173
177 
	/* affiche les onglets par default selon niveau*/
174 
	for(indice in tableauOnglets) {
 178 
	for(indice in tableauOnglets) {
175 
		var ongletEnCours = tableauOnglets[indice];
 179 
		var ongletEnCours = tableauOnglets[indice];
176 
		if (ongletsDefaut.indexOf(ongletEnCours.titre) == -1) {
 180 
		if (ongletsDefaut.indexOf(ongletEnCours.titre) == -1) {
177 
			ongletEnCours.afficherCacherModule();
181 
			ongletEnCours.afficherCacherModule();
178 
		}
 182 
		}
179 
	}
 183 
	}
- 
 
 184
180
185 
	/* ajout de l'info au survol de l'onglet quand la taille est diminuée*/
181 
	$('.lien-onglet').parent().each(function() {
 186 
	$('.lien-onglet').parent().each(function() {
182 
		$(this).attr("title",$(this).children("a").text());
 187 
		$(this).attr("title",$(this).children("a").text());
183 
	});
 188 
	});
184
189
185 
	redimensionnerOnglets();
 190 
	redimensionnerOnglets();
186 
});
 191 
});