Subversion Repositories eFlore/Applications.eflore-consultation

Rev

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

Rev Author Line No. Line
201 gduche 1
<style>
221 delphine 2
	#bloc-fiche h1 {
3
		background: none repeat scroll 0 0 transparent;
4
		padding: 0 0 0 20px;
5
	}
201 gduche 6
	#zone_contenu_fiche {
203 gduche 7
		border:solid 1px #DDD;
8
		border-width:0px 1px 1px 1px;
221 delphine 9
		background-color:#FFFFFF;
201 gduche 10
		width:100%;
221 delphine 11
		min-height:300px;
203 gduche 12
		clear:left;
221 delphine 13
		padding-top: 0.4em;
201 gduche 14
	}
15
 
214 aurelien 16
	.module {margin: 0 1em 0.5em 0; width: 99%;}
221 delphine 17
	.module .titre{ padding-bottom: 4px; padding-left: 0.2em; cursor:pointer;}
201 gduche 18
	.module .titre .ui-icon { float: right; }
19
	.module .contenu { padding: 0.4em; }
20
 
221 delphine 21
	.colonne {float:left; padding-bottom:10px; width:33%; margin: 0 1px;}
201 gduche 22
 
23
	.ui-sortable-placeholder { border: 1px dotted black; visibility: visible !important; height: 50px !important; }
24
	.ui-sortable-placeholder * { visibility: hidden; }
221 delphine 25
	.ui-tabs { padding:0; position: relative; }
26
	.ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited {color: #9AC343; text-decoration: none; }
27
	.ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited { color: #EB8F00; text-decoration: none; }
28
	.ui-tabs .ui-tabs-nav li a { float: left; padding: 0.3em 1em; text-decoration: none; }
29
	.ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br { border-bottom-right-radius: 0; }
30
	.ui-corner-all, .ui-corner-bottom, .ui-corner-left, .ui-corner-bl { border-bottom-left-radius: 0; }
201 gduche 31
	#zone_onglets ul li {list-style:none}
32
	.lienToggle {cursor:pointer}
33
 
34
 
35
	#dialog label, #dialog input { display:block; }
36
	#dialog label { margin-top: 0.5em; }
37
	#dialog input, #dialog textarea { width: 95%; }
221 delphine 38
	#zone_onglets { margin-top: 0.1em; border-width: 1px 1px 0 1px; border-radius:0; width:100%; font-size:12px}
203 gduche 39
	#zone_onglets li {float:left}
201 gduche 40
	#zone_onglets li .ui-icon-close { float: left; margin: 0.4em 0.2em 0 0; cursor: pointer; }
214 aurelien 41
	#zone_onglets li a.lien-onglet {overflow: hidden; text-decoration: none; border-bottom: none;}
221 delphine 42
	#zone_onglets li a.lien-onglet hover {overflow: hidden; text-decoration: none; border-bottom: none;}
213 aurelien 43
	#zone_onglets #ongletEtPlus { cursor: pointer; float:right; z-index:2001;}
44
	#zone_onglets #ongletEtPlus a { border-bottom: none;}
211 aurelien 45
 
46
	.elementMenuModules {
47
		display:block;
213 aurelien 48
		border: 1px solid white;
211 aurelien 49
		width: 150px;
50
		padding: 10px 10px 10px 25px;
51
		margin:0px;
52
		cursor: pointer;
53
	}
54
 
55
	.elementMenuModules:hover {
213 aurelien 56
		background-color: #FEBF01;
211 aurelien 57
	}
212 aurelien 58
 
59
	.elementMenuModulesSelectionne {
60
		background-color: #F6AF39;
223 aurelien 61
		color: white;
212 aurelien 62
	}
63
 
213 aurelien 64
	.menuModules {
65
		left: 495px;
66
		width: 187px;
67
		position: absolute;
68
		border: 1px solid #DCD1CC;
69
		margin: 0px;
70
		padding: 0px;
223 aurelien 71
		top: 30px;
213 aurelien 72
		z-index:2000;
223 aurelien 73
		background-color: #F9F9F9;
74
		color: #9AC343;
75
		font-weight: bold;
213 aurelien 76
	}
225 aurelien 77
 
78
	#lienOngletEtPlus {
79
		width:6px;
80
	}
201 gduche 81
</style>
221 delphine 82
<div id="bloc-fiche" class="importance1">
219 delphine 83
	<h1>Fiche</h1>
84
	<div id="zone_onglets" class="ui-tabs ui-widget ui-widget-content ui-corner-all">
85
		<ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
86
			<li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active"><a class="lien-onglet lien-statique" href="#fiche">Accueil</a></li>
87
			<li class="ui-state-default ui-corner-top"><a class="lien-onglet" href="#fiche">Illustrations</a></li>
88
			<li class="ui-state-default ui-corner-top"><a class="lien-onglet" href="#fiche">Description</a></li>
89
			<li class="ui-state-default ui-corner-top"><a class="lien-onglet" href="#fiche">Classification</a></li>
90
			<li class="ui-state-default ui-corner-top"><a class="lien-onglet" href="#fiche">Bibliographie</a></li>
91
			<li class="ui-state-default ui-corner-top"><a class="lien-onglet" href="#fiche">Répartition</a></li>
92
			<li class="ui-state-default ui-corner-top"><a class="lien-onglet" href="#fiche">Ethnobotanique</a></li>
93
			<li class="ui-state-default ui-corner-top"><a class="lien-onglet" href="#fiche">Statut de protection</a></li>
94
			<li class="ui-state-default ui-corner-top"><a class="lien-onglet" href="#fiche">Nomenclature</a></li>
95
			<li class="ui-state-default ui-corner-top"><a class="lien-onglet" href="#fiche">Phytosociologie</a></li>
225 aurelien 96
			<li id="ongletEtPlus" class="ui-state-default ui-corner-top"><a id="lienOngletEtPlus" class="lien-statique" href="#fiche">+</a></li>
219 delphine 97
		</ul>
98
		<span id="conteneurMenuOnglets"></span>
214 aurelien 99
	</div>
219 delphine 100
 
101
	<div id="zone_contenu_fiche">
102
		<div class="colonne">
103
			<div id="illustrations" class="module ui-widget ui-widget-content ui-helper-clearfix ui-corner-all">
104
				<h3 class="titre ui-widget-header ui-corner-all" id="titre-0">Illustrations</h3>
105
				<span id="contenu-0" class="contenu">
106
				Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
107
				Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
108
				</span>
109
			</div>
110
			<div id="description" class="module ui-widget ui-widget-content ui-helper-clearfix ui-corner-all">
111
				<h3 class="titre ui-widget-header ui-corner-all" id="titre-1">Description</h3>
112
				<span id="contenu-0" class="contenu">
113
							Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
114
				Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
115
				</span>
116
			</div>
117
			<div id="classification" class="module ui-widget ui-widget-content ui-helper-clearfix ui-corner-all">
118
				<h3 class="titre ui-widget-header ui-corner-all" id="titre-2">Classification</h3>
119
				<span id="contenu-0" class="contenu">
120
										Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
121
							Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
122
							Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
123
							Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
124
				</span>
125
			</div>
203 gduche 126
		</div>
219 delphine 127
		<div class="colonne">
128
			<div id="bibliographie" class="module ui-widget ui-widget-content ui-helper-clearfix ui-corner-all">
129
				<h3 class="titre ui-widget-header ui-corner-all" id="titre-3">Bibliographie</h3>
130
				<span id="contenu-0" class="contenu">
131
				Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
132
				Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
133
				Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
134
				Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?
135
				</span>
136
			</div>
137
			<div id="repartition" class="module ui-widget ui-widget-content ui-helper-clearfix ui-corner-all">
138
				<h3 class="titre ui-widget-header ui-corner-all" id="titre-4">Répartition</h3>
139
				<span id="contenu-0" class="contenu">
140
							Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
141
				Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
142
				</span>
143
			</div>
144
			<div id="ethnobotanique" class="module ui-widget ui-widget-content ui-helper-clearfix ui-corner-all">
145
				<h3 class="titre ui-widget-header ui-corner-all" id="titre-5">Ethnobotanique<span class="lienToggle"></span></h3>
146
				<span id="contenu-0" class="contenu">
147
							Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
148
				Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
149
				</span>
150
			</div>
203 gduche 151
		</div>
219 delphine 152
		<div class="colonne">
153
			<div id="statutDeProtection" class="module ui-widget ui-widget-content ui-helper-clearfix ui-corner-all">
154
				<h3 class="titre ui-widget-header ui-corner-all" id="titre-7">Statut de protection<span class="lienToggle"></span></h3>
155
				<span id="contenu-0" class="contenu">
156
							Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
157
							Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
158
							Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
159
							Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
160
				</span>
161
			</div>
162
			<div id="nomenclature" class="module ui-widget ui-widget-content ui-helper-clearfix ui-corner-all">
163
				<h3 class="titre ui-widget-header ui-corner-all" id="titre-8">Nomenclature<span class="lienToggle"></span></h3>
164
				<span id="contenu-0" class="contenu">
165
							Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
166
				Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
167
				</span>
168
			</div>
169
			<div id="phytosociologie" class="module ui-widget ui-widget-content ui-helper-clearfix ui-corner-all">
170
				<h3 class="titre ui-widget-header ui-corner-all" id="titre-9">Phytosociologie<span class="lienToggle"></span></h3>
171
				<span id="contenu-0" class="contenu">
172
							Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
173
				Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
174
				</span>
175
			</div>
176
		</div>
177
 
178
		<br style="clear:left" />
203 gduche 179
	</div>
221 delphine 180
</div>
201 gduche 181
 
182
<script type="text/Javascript">
183
	var modules = Array();
219 delphine 184
	var tableauOnglets = Array();
201 gduche 185
 
219 delphine 186
	 var ongletsDefaut = [<?= $blocs; ?>];
187
 
201 gduche 188
	/** Classe Module
189
	* Définit un module de type portlet
190
	**/
203 gduche 191
	function Module(id, module, onglet, statique) {
201 gduche 192
 
193
		// Variables de classe : identifiant, titre, et le HTML du résumé à afficher dans le contenu
194
		this.id = id;
203 gduche 195
		this.titre;
196
		this.htmlResume;
201 gduche 197
		this.statique = statique;
198
 
199
		// Les objets Portlet et Onglet que l'ont garde en mémoire pour pouvoir y accéder facilement
203 gduche 200
		this.portlet = module;
201 gduche 201
		this.onglet;
202
 
203
		// creerPortlet
204
		// Créer l'objet Portlet HTML à afficher et le stocker dans les variables de classe
205
		this.creerPortlet = function() {
206
			var objet = this;
207
 
203 gduche 208
			var titre = $(module).children('.titre');
201 gduche 209
			titre.className = 'titre ui-widget-header ui-corner-all';
210
			titre.id = 'titre-' + this.id;
211
 
203 gduche 212
			var contenu = $(module).children('.contenu');
201 gduche 213
			contenu.id = 'contenu-' + this.id;
214
			contenu.className ='contenu';
215
 
216
			var lienToggle = document.createElement('span');
217
			lienToggle.className = 'lienToggle ui-icon ui-icon-minusthick';
203 gduche 218
			$(titre).append(lienToggle);
201 gduche 219
			$(lienToggle).click(function() {
212 aurelien 220
				objet.afficherCacherModule();
201 gduche 221
			});
222
 
223
			this.portlet = module;
224
			return module;
225
		}
226
 
227
		// creerOnglet
228
		// Créer l'objet Onglet HTML
229
		this.creerOnglet = function() {
230
			var objet = this;
231
 
203 gduche 232
			var a = $(onglet).find("a");
201 gduche 233
 
234
			// Gestion du clic sur le lien
235
			// Comme les liens sont mis en place par jqueryui tabs, il faut ajouter une surcouche pour
236
			// déplacer vers la page du module
237
			$(a).click(function() {
211 aurelien 238
				// TODO : Changer l'url par celle du module et enregistrer la configuration actuelle des onglets.
201 gduche 239
				//$(location).attr('href',"http://www.google.fr");
240
			});
241
 
242
			if (!statique) {
243
				var span = document.createElement('span');
244
				span.className = "ui-icon ui-icon-close";
245
 
246
				// Gestion de la fermeture de l'onglet
247
				$(span).live( "click", function() {
212 aurelien 248
					objet.afficherCacherModule();
214 aurelien 249
					redimensionnerOnglets();
201 gduche 250
				});
251
 
203 gduche 252
				$(onglet).append(span);
201 gduche 253
			}
254
 
203 gduche 255
			this.onglet = onglet;
201 gduche 256
		}
257
 
258
		// Initialisation de l'objet
259
		this.creerPortlet();
260
		this.creerOnglet();
261
 
262
		// Accesseurs de la classe
263
		this.getOnglet = function() {
264
			return this.onglet;
265
		}
266
 
267
		this.getPortlet = function() {
268
 
269
			return this.portlet;
270
		}
211 aurelien 271
 
272
		// fonctions d'affichage et cachage (je sais pas si on dit ça comme ça) des onglets
273
		this.afficherCacherModule = function() {
274
			$(this.portlet).find(".lienToggle").toggleClass("ui-icon-plusthick");
275
			$(this.portlet).find(".lienToggle").toggleClass("ui-icon-minusthick");
276
			$(this.portlet).find(".contenu").toggle();
212 aurelien 277
			$(this.onglet).toggle();
214 aurelien 278
 
279
			redimensionnerOnglets();
211 aurelien 280
		}
201 gduche 281
	}
282
 
212 aurelien 283
	function afficherCacherMenuOnglets() {
211 aurelien 284
		if($("#conteneurMenuOnglets").html() != '') {
285
			$("#conteneurMenuOnglets").html('');
225 aurelien 286
			$('#lienOngletEtPlus').text('+');
211 aurelien 287
		} else {
288
			var htmlMenu = '<ul class="menuModules">';
219 delphine 289
			for (idOnglet in tableauOnglets) {
212 aurelien 290
				var classe = "elementMenuModules";
291
				if($(idOnglet).is(':visible')) {
292
					classe += " elementMenuModulesSelectionne";
293
				}
219 delphine 294
				htmlMenu += '<li class="'+classe+'" rel="'+idOnglet+'" id="menu_module_'+idOnglet+'">'+tableauOnglets[idOnglet].titre+'</li>';
211 aurelien 295
			}
296
			htmlMenu += '</ul>';
297
			$("#conteneurMenuOnglets").html(htmlMenu);
298
			$("#conteneurMenuOnglets").toggle();
225 aurelien 299
			$('#lienOngletEtPlus').text('-');
211 aurelien 300
		}
301
	}
302
 
214 aurelien 303
	function redimensionnerOnglets() {
304
		// 570 px au max
305
		// 18 largeur croix
306
		// 18 largeur texte
307
		// 36 largeur totale
308
		var liensVisibles = $('#zone_onglets > ul > li:visible > a');
309
		var longueurLiens = 0;
310
		liensVisibles.each(function() {
311
			longueurLiens += $(this).width();
312
		});
313
		var nbOnglets = $('#zone_onglets > ul > li:visible').length;
219 delphine 314
		var longueurMax =  535 - (nbOnglets * 36);
214 aurelien 315
		if(longueurLiens >= longueurMax || nbOnglets > 5) {
316
			$('#zone_onglets > ul > li > a').not('.lien-statique').width(longueurMax/nbOnglets);
317
		} else {
318
			$('#zone_onglets > ul > li > a').not('.lien-statique').css("width","auto");
319
		}
320
	}
321
 
203 gduche 322
	//Initialisation
201 gduche 323
	$(document).ready(function() {
203 gduche 324
		i = 1;
201 gduche 325
 
203 gduche 326
		//Parcourir la totalité des modules générés et les lier grâce à la classe Module
327
		$(".module").each(function () {
201 gduche 328
			i++;
203 gduche 329
			identifiantOnglet = "#zone_onglets>ul>li:nth-child(" + i +")";
330
			var module = new Module(i, this, $(identifiantOnglet));
211 aurelien 331
			module.titre = $(this).children('h3').text();
219 delphine 332
			tableauOnglets[identifiantOnglet] = module;
203 gduche 333
		});
201 gduche 334
 
335
		$( ".colonne" ).sortable({
336
			connectWith: ".colonne"
337
		});
338
 
339
		$( ".colonne" ).disableSelection();
214 aurelien 340
		$('#zone_onglets').tabs({
341
			add: function(event, ui) {
342
				redimensionnerOnglets();
343
			},
344
			remove: function(event, ui) {
345
				redimensionnerOnglets();
346
			}
347
		});
348
 
211 aurelien 349
		$("#ongletEtPlus").click(function() {
212 aurelien 350
			afficherCacherMenuOnglets();
211 aurelien 351
		});
352
 
353
		$('.elementMenuModules').live('click', function() {
354
			var idOnglet = $(this).attr('rel');
219 delphine 355
			var objet = tableauOnglets[idOnglet];
212 aurelien 356
			objet.afficherCacherModule();
357
			$(this).toggleClass("elementMenuModulesSelectionne");
214 aurelien 358
		});
359
 
219 delphine 360
		for(indice in tableauOnglets) {
361
			var ongletEnCours = tableauOnglets[indice];
362
			if (ongletsDefaut.indexOf(ongletEnCours.titre) == -1) {
363
				ongletEnCours.afficherCacherModule();
364
			}
365
		}
366
 
222 aurelien 367
		$('.lien-onglet').parent().each(function() {
368
			$(this).attr("title",$(this).children("a").text());
369
		});
370
 
214 aurelien 371
		redimensionnerOnglets();
201 gduche 372
	});
373
</script>