Subversion Repositories eFlore/Applications.eflore-consultation

Rev

Rev 226 | Rev 230 | Go to most recent revision | Show entire file | Ignore whitespace | Details | Blame | Last modification | View Log | RSS feed

Rev 226 Rev 227
Line -... Line 1...
-
 
1
<script type="text/Javascript">
-
 
2
	var ongletsDefaut = [<?= $blocs; ?>]; 
-
 
3
</script>
1
<style>
4
<style>
2
	.ui-tabs { padding:0; position: relative; }
5
	.ui-tabs { padding:0; position: relative; }
3
</style>
6
</style>
4
<div id="bloc-fiche" class="importance1">
7
<div id="bloc-fiche" class="importance1">
5
	<h1>Fiche</h1>
8
	<h1>Fiche</h1>
Line 99... Line 102...
99
		
102
		
100
		<br style="clear:left" />	
103
		<br style="clear:left" />	
101
	</div>
104
	</div>
Line 102... Line -...
102
</div>
-
 
103
 
-
 
104
<script type="text/Javascript">
-
 
105
	var modules = Array();
-
 
106
	var tableauOnglets = Array();
-
 
107
	
-
 
108
	 var ongletsDefaut = [<?= $blocs; ?>]; 
-
 
109
	
-
 
110
	/** Classe Module
-
 
111
	* Définit un module de type portlet
-
 
112
	**/
-
 
113
	function Module(id, module, onglet, statique) {
-
 
114
		
-
 
115
		// Variables de classe : identifiant, titre, et le HTML du résumé à afficher dans le contenu
-
 
116
		this.id = id;
-
 
117
		this.titre;
-
 
118
		this.htmlResume;
-
 
119
		this.statique = statique;
-
 
120
		
-
 
121
		// Les objets Portlet et Onglet que l'ont garde en mémoire pour pouvoir y accéder facilement 
-
 
122
		this.portlet = module;
-
 
123
		this.onglet;
-
 
124
		
-
 
125
		// creerPortlet 
-
 
126
		// Créer l'objet Portlet HTML à afficher et le stocker dans les variables de classe
-
 
127
		this.creerPortlet = function() {
-
 
128
			var objet = this;
-
 
129
			
-
 
130
			var titre = $(module).children('.titre');
-
 
131
			titre.className = 'titre ui-widget-header ui-corner-all';
-
 
132
			titre.id = 'titre-' + this.id;
-
 
133
			
-
 
134
			var contenu = $(module).children('.contenu');
-
 
135
			contenu.id = 'contenu-' + this.id;
-
 
136
			contenu.className ='contenu';
-
 
137
			
-
 
138
			var lienToggle = document.createElement('span');
-
 
139
			lienToggle.className = 'lienToggle ui-icon ui-icon-minusthick';
-
 
140
			$(titre).append(lienToggle);
-
 
141
			$(lienToggle).click(function() {
-
 
142
				objet.afficherCacherModule();
-
 
143
			});
-
 
144
			
-
 
145
			this.portlet = module;
-
 
146
			return module;	
-
 
147
		}	
-
 
148
		
-
 
149
		// creerOnglet
-
 
150
		// Créer l'objet Onglet HTML
-
 
151
		this.creerOnglet = function() {
-
 
152
			var objet = this;
-
 
153
			
-
 
154
			var a = $(onglet).find("a");
-
 
155
			
-
 
156
			// Gestion du clic sur le lien 
-
 
157
			// Comme les liens sont mis en place par jqueryui tabs, il faut ajouter une surcouche pour 
-
 
158
			// déplacer vers la page du module
-
 
159
			$(a).click(function() {
-
 
160
				// TODO : Changer l'url par celle du module et enregistrer la configuration actuelle des onglets.
-
 
161
				//$(location).attr('href',"http://www.google.fr");
-
 
162
			});
-
 
163
			
-
 
164
			if (!statique) {
-
 
165
				var span = document.createElement('span');
-
 
166
				span.className = "ui-icon ui-icon-close";
-
 
167
			
-
 
168
				// Gestion de la fermeture de l'onglet
-
 
169
				$(span).live( "click", function() {
-
 
170
					objet.afficherCacherModule();
-
 
171
					redimensionnerOnglets();
-
 
172
				});
-
 
173
				
-
 
174
				$(onglet).append(span);
-
 
175
			}
-
 
176
			
-
 
177
			this.onglet = onglet;
-
 
178
		}
-
 
179
		
-
 
180
		// Initialisation de l'objet
-
 
181
		this.creerPortlet();
-
 
182
		this.creerOnglet();
-
 
183
		
-
 
184
		// Accesseurs de la classe
-
 
185
		this.getOnglet = function() {
-
 
186
			return this.onglet;	
-
 
187
		}
-
 
188
		
-
 
189
		this.getPortlet = function() {
-
 
190
			
-
 
191
			return this.portlet;
-
 
192
		}
-
 
193
		
-
 
194
		// fonctions d'affichage et cachage (je sais pas si on dit ça comme ça) des onglets
-
 
195
		this.afficherCacherModule = function() { 
-
 
196
			$(this.portlet).find(".lienToggle").toggleClass("ui-icon-plusthick");
-
 
197
			$(this.portlet).find(".lienToggle").toggleClass("ui-icon-minusthick");
-
 
198
			$(this.portlet).find(".contenu").toggle();
-
 
199
			$(this.onglet).toggle();
-
 
200
			
-
 
201
			redimensionnerOnglets();
-
 
202
		}
-
 
203
	}
-
 
204
	
-
 
205
	function afficherCacherMenuOnglets() {
-
 
206
		if($("#conteneurMenuOnglets").html() != '') {
-
 
207
			$("#conteneurMenuOnglets").html('');
-
 
208
			$('#lienOngletEtPlus').text('+');
-
 
209
		} else {
-
 
210
			var htmlMenu = '<ul class="menuModules">';
-
 
211
			for (idOnglet in tableauOnglets) {
-
 
212
				var classe = "elementMenuModules";
-
 
213
				if($(idOnglet).is(':visible')) {
-
 
214
					classe += " elementMenuModulesSelectionne";
-
 
215
				}
-
 
216
				htmlMenu += '<li class="'+classe+'" rel="'+idOnglet+'" id="menu_module_'+idOnglet+'">'+tableauOnglets[idOnglet].titre+'</li>';
-
 
217
			}
-
 
218
			htmlMenu += '</ul>';
-
 
219
			$("#conteneurMenuOnglets").html(htmlMenu);
-
 
220
			$("#conteneurMenuOnglets").toggle();
-
 
221
			$('#lienOngletEtPlus').text('-');
-
 
222
		}
-
 
223
	}
-
 
224
	
-
 
225
	function redimensionnerOnglets() {
-
 
226
		// 570 px au max
-
 
227
		// 18 largeur croix 
-
 
228
		// 18 largeur texte 
-
 
229
		// 36 largeur totale
-
 
230
		var liensVisibles = $('#zone_onglets > ul > li:visible > a');
-
 
231
		var longueurLiens = 0;
-
 
232
		liensVisibles.each(function() {
-
 
233
			longueurLiens += $(this).width();
-
 
234
		});
-
 
235
		var nbOnglets = $('#zone_onglets > ul > li:visible').length;
-
 
236
		var longueurMax =  535 - (nbOnglets * 36);
-
 
237
		if(longueurLiens >= longueurMax || nbOnglets > 5) { 
-
 
238
			$('#zone_onglets > ul > li > a').not('.lien-statique').width(longueurMax/nbOnglets);
-
 
239
		} else {
-
 
240
			$('#zone_onglets > ul > li > a').not('.lien-statique').css("width","auto");	
-
 
241
		}
-
 
242
	}
-
 
243
	
-
 
244
	//Initialisation
-
 
245
	$(document).ready(function() {
-
 
246
		i = 1;
-
 
247
		
-
 
248
		//Parcourir la totalité des modules générés et les lier grâce à la classe Module
-
 
249
		$(".module").each(function () {
-
 
250
			i++;
-
 
251
			identifiantOnglet = "#zone_onglets>ul>li:nth-child(" + i +")";
-
 
252
			var module = new Module(i, this, $(identifiantOnglet));
-
 
253
			module.titre = $(this).children('h3').text();
-
 
254
			tableauOnglets[identifiantOnglet] = module;
-
 
255
		});
-
 
256
		
-
 
257
		$( ".colonne" ).sortable({
-
 
258
			connectWith: ".colonne"
-
 
259
		});
-
 
260
 
-
 
261
		$( ".colonne" ).disableSelection();
-
 
262
		$('#zone_onglets').tabs({
-
 
263
			add: function(event, ui) {
-
 
264
				redimensionnerOnglets();
-
 
265
			},
-
 
266
			remove: function(event, ui) {
-
 
267
				redimensionnerOnglets();
-
 
268
			}
-
 
269
		});
-
 
270
 
-
 
271
		$("#ongletEtPlus").click(function() {
-
 
272
			afficherCacherMenuOnglets();
-
 
273
		});
-
 
274
		
-
 
275
		$('.elementMenuModules').live('click', function() {
-
 
276
			var idOnglet = $(this).attr('rel');
-
 
277
			var objet = tableauOnglets[idOnglet];
-
 
278
			objet.afficherCacherModule();
-
 
279
			$(this).toggleClass("elementMenuModulesSelectionne");
-
 
280
		});
-
 
281
		
-
 
282
		for(indice in tableauOnglets) {
-
 
283
			var ongletEnCours = tableauOnglets[indice];
-
 
284
			if (ongletsDefaut.indexOf(ongletEnCours.titre) == -1) {
-
 
285
				ongletEnCours.afficherCacherModule();	
-
 
286
			}
-
 
287
		}
-
 
288
		
-
 
289
		$('.lien-onglet').parent().each(function() {
-
 
290
			$(this).attr("title",$(this).children("a").text());
-
 
291
		});
-
 
292
		
-
 
293
		redimensionnerOnglets();
-
 
294
	});
105
</div>