Subversion Repositories eFlore/Applications.eflore-consultation

Rev

Rev 222 | Rev 224 | 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
	}
201 gduche 77
</style>
221 delphine 78
<div id="bloc-fiche" class="importance1">
219 delphine 79
	<h1>Fiche</h1>
80
	<div id="zone_onglets" class="ui-tabs ui-widget ui-widget-content ui-corner-all">
81
		<ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
82
			<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>
83
			<li class="ui-state-default ui-corner-top"><a class="lien-onglet" href="#fiche">Illustrations</a></li>
84
			<li class="ui-state-default ui-corner-top"><a class="lien-onglet" href="#fiche">Description</a></li>
85
			<li class="ui-state-default ui-corner-top"><a class="lien-onglet" href="#fiche">Classification</a></li>
86
			<li class="ui-state-default ui-corner-top"><a class="lien-onglet" href="#fiche">Bibliographie</a></li>
87
			<li class="ui-state-default ui-corner-top"><a class="lien-onglet" href="#fiche">Répartition</a></li>
88
			<li class="ui-state-default ui-corner-top"><a class="lien-onglet" href="#fiche">Ethnobotanique</a></li>
89
			<li class="ui-state-default ui-corner-top"><a class="lien-onglet" href="#fiche">Statut de protection</a></li>
90
			<li class="ui-state-default ui-corner-top"><a class="lien-onglet" href="#fiche">Nomenclature</a></li>
91
			<li class="ui-state-default ui-corner-top"><a class="lien-onglet" href="#fiche">Phytosociologie</a></li>
92
			<li id="ongletEtPlus" class="ui-state-default ui-corner-top"><a class="lien-statique" href="#fiche">+</a></li>
93
		</ul>
94
		<span id="conteneurMenuOnglets"></span>
214 aurelien 95
	</div>
219 delphine 96
 
97
	<div id="zone_contenu_fiche">
98
		<div class="colonne">
99
			<div id="illustrations" class="module ui-widget ui-widget-content ui-helper-clearfix ui-corner-all">
100
				<h3 class="titre ui-widget-header ui-corner-all" id="titre-0">Illustrations</h3>
101
				<span id="contenu-0" class="contenu">
102
				Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
103
				Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
104
				</span>
105
			</div>
106
			<div id="description" class="module ui-widget ui-widget-content ui-helper-clearfix ui-corner-all">
107
				<h3 class="titre ui-widget-header ui-corner-all" id="titre-1">Description</h3>
108
				<span id="contenu-0" class="contenu">
109
							Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
110
				Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
111
				</span>
112
			</div>
113
			<div id="classification" class="module ui-widget ui-widget-content ui-helper-clearfix ui-corner-all">
114
				<h3 class="titre ui-widget-header ui-corner-all" id="titre-2">Classification</h3>
115
				<span id="contenu-0" class="contenu">
116
										Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
117
							Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
118
							Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
119
							Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
120
				</span>
121
			</div>
203 gduche 122
		</div>
219 delphine 123
		<div class="colonne">
124
			<div id="bibliographie" class="module ui-widget ui-widget-content ui-helper-clearfix ui-corner-all">
125
				<h3 class="titre ui-widget-header ui-corner-all" id="titre-3">Bibliographie</h3>
126
				<span id="contenu-0" class="contenu">
127
				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.
128
				Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
129
				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.
130
				Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?
131
				</span>
132
			</div>
133
			<div id="repartition" class="module ui-widget ui-widget-content ui-helper-clearfix ui-corner-all">
134
				<h3 class="titre ui-widget-header ui-corner-all" id="titre-4">Répartition</h3>
135
				<span id="contenu-0" class="contenu">
136
							Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
137
				Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
138
				</span>
139
			</div>
140
			<div id="ethnobotanique" class="module ui-widget ui-widget-content ui-helper-clearfix ui-corner-all">
141
				<h3 class="titre ui-widget-header ui-corner-all" id="titre-5">Ethnobotanique<span class="lienToggle"></span></h3>
142
				<span id="contenu-0" class="contenu">
143
							Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
144
				Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
145
				</span>
146
			</div>
203 gduche 147
		</div>
219 delphine 148
		<div class="colonne">
149
			<div id="statutDeProtection" class="module ui-widget ui-widget-content ui-helper-clearfix ui-corner-all">
150
				<h3 class="titre ui-widget-header ui-corner-all" id="titre-7">Statut de protection<span class="lienToggle"></span></h3>
151
				<span id="contenu-0" class="contenu">
152
							Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
153
							Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
154
							Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
155
							Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
156
				</span>
157
			</div>
158
			<div id="nomenclature" class="module ui-widget ui-widget-content ui-helper-clearfix ui-corner-all">
159
				<h3 class="titre ui-widget-header ui-corner-all" id="titre-8">Nomenclature<span class="lienToggle"></span></h3>
160
				<span id="contenu-0" class="contenu">
161
							Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
162
				Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
163
				</span>
164
			</div>
165
			<div id="phytosociologie" class="module ui-widget ui-widget-content ui-helper-clearfix ui-corner-all">
166
				<h3 class="titre ui-widget-header ui-corner-all" id="titre-9">Phytosociologie<span class="lienToggle"></span></h3>
167
				<span id="contenu-0" class="contenu">
168
							Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
169
				Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
170
				</span>
171
			</div>
172
		</div>
173
 
174
		<br style="clear:left" />
203 gduche 175
	</div>
221 delphine 176
</div>
201 gduche 177
 
178
<script type="text/Javascript">
179
	var modules = Array();
219 delphine 180
	var tableauOnglets = Array();
201 gduche 181
 
219 delphine 182
	 var ongletsDefaut = [<?= $blocs; ?>];
183
 
201 gduche 184
	/** Classe Module
185
	* Définit un module de type portlet
186
	**/
203 gduche 187
	function Module(id, module, onglet, statique) {
201 gduche 188
 
189
		// Variables de classe : identifiant, titre, et le HTML du résumé à afficher dans le contenu
190
		this.id = id;
203 gduche 191
		this.titre;
192
		this.htmlResume;
201 gduche 193
		this.statique = statique;
194
 
195
		// Les objets Portlet et Onglet que l'ont garde en mémoire pour pouvoir y accéder facilement
203 gduche 196
		this.portlet = module;
201 gduche 197
		this.onglet;
198
 
199
		// creerPortlet
200
		// Créer l'objet Portlet HTML à afficher et le stocker dans les variables de classe
201
		this.creerPortlet = function() {
202
			var objet = this;
203
 
203 gduche 204
			var titre = $(module).children('.titre');
201 gduche 205
			titre.className = 'titre ui-widget-header ui-corner-all';
206
			titre.id = 'titre-' + this.id;
207
 
203 gduche 208
			var contenu = $(module).children('.contenu');
201 gduche 209
			contenu.id = 'contenu-' + this.id;
210
			contenu.className ='contenu';
211
 
212
			var lienToggle = document.createElement('span');
213
			lienToggle.className = 'lienToggle ui-icon ui-icon-minusthick';
203 gduche 214
			$(titre).append(lienToggle);
201 gduche 215
			$(lienToggle).click(function() {
212 aurelien 216
				objet.afficherCacherModule();
201 gduche 217
			});
218
 
219
			this.portlet = module;
220
			return module;
221
		}
222
 
223
		// creerOnglet
224
		// Créer l'objet Onglet HTML
225
		this.creerOnglet = function() {
226
			var objet = this;
227
 
203 gduche 228
			var a = $(onglet).find("a");
201 gduche 229
 
230
			// Gestion du clic sur le lien
231
			// Comme les liens sont mis en place par jqueryui tabs, il faut ajouter une surcouche pour
232
			// déplacer vers la page du module
233
			$(a).click(function() {
211 aurelien 234
				// TODO : Changer l'url par celle du module et enregistrer la configuration actuelle des onglets.
201 gduche 235
				//$(location).attr('href',"http://www.google.fr");
236
			});
237
 
238
			if (!statique) {
239
				var span = document.createElement('span');
240
				span.className = "ui-icon ui-icon-close";
241
 
242
				// Gestion de la fermeture de l'onglet
243
				$(span).live( "click", function() {
212 aurelien 244
					objet.afficherCacherModule();
214 aurelien 245
					redimensionnerOnglets();
201 gduche 246
				});
247
 
203 gduche 248
				$(onglet).append(span);
201 gduche 249
			}
250
 
203 gduche 251
			this.onglet = onglet;
201 gduche 252
		}
253
 
254
		// Initialisation de l'objet
255
		this.creerPortlet();
256
		this.creerOnglet();
257
 
258
		// Accesseurs de la classe
259
		this.getOnglet = function() {
260
			return this.onglet;
261
		}
262
 
263
		this.getPortlet = function() {
264
 
265
			return this.portlet;
266
		}
211 aurelien 267
 
268
		// fonctions d'affichage et cachage (je sais pas si on dit ça comme ça) des onglets
269
		this.afficherCacherModule = function() {
270
			$(this.portlet).find(".lienToggle").toggleClass("ui-icon-plusthick");
271
			$(this.portlet).find(".lienToggle").toggleClass("ui-icon-minusthick");
272
			$(this.portlet).find(".contenu").toggle();
212 aurelien 273
			$(this.onglet).toggle();
214 aurelien 274
 
275
			redimensionnerOnglets();
211 aurelien 276
		}
277
 
201 gduche 278
	}
279
 
212 aurelien 280
	function afficherCacherMenuOnglets() {
211 aurelien 281
		if($("#conteneurMenuOnglets").html() != '') {
282
			$("#conteneurMenuOnglets").html('');
283
		} else {
219 delphine 284
			console.log(tableauOnglets);
211 aurelien 285
			var htmlMenu = '<ul class="menuModules">';
219 delphine 286
			for (idOnglet in tableauOnglets) {
212 aurelien 287
				var classe = "elementMenuModules";
288
				if($(idOnglet).is(':visible')) {
289
					classe += " elementMenuModulesSelectionne";
290
				}
219 delphine 291
				htmlMenu += '<li class="'+classe+'" rel="'+idOnglet+'" id="menu_module_'+idOnglet+'">'+tableauOnglets[idOnglet].titre+'</li>';
211 aurelien 292
			}
293
			htmlMenu += '</ul>';
294
			$("#conteneurMenuOnglets").html(htmlMenu);
295
			$("#conteneurMenuOnglets").toggle();
296
		}
297
	}
298
 
214 aurelien 299
	function redimensionnerOnglets() {
300
		// 570 px au max
301
		// 18 largeur croix
302
		// 18 largeur texte
303
		// 36 largeur totale
304
		var liensVisibles = $('#zone_onglets > ul > li:visible > a');
305
		var longueurLiens = 0;
306
		liensVisibles.each(function() {
307
			longueurLiens += $(this).width();
308
		});
309
		var nbOnglets = $('#zone_onglets > ul > li:visible').length;
219 delphine 310
		var longueurMax =  535 - (nbOnglets * 36);
214 aurelien 311
		if(longueurLiens >= longueurMax || nbOnglets > 5) {
312
			$('#zone_onglets > ul > li > a').not('.lien-statique').width(longueurMax/nbOnglets);
313
		} else {
314
			$('#zone_onglets > ul > li > a').not('.lien-statique').css("width","auto");
315
		}
316
	}
317
 
203 gduche 318
	//Initialisation
201 gduche 319
	$(document).ready(function() {
203 gduche 320
		i = 1;
201 gduche 321
 
203 gduche 322
		//Parcourir la totalité des modules générés et les lier grâce à la classe Module
323
		$(".module").each(function () {
201 gduche 324
			i++;
203 gduche 325
			identifiantOnglet = "#zone_onglets>ul>li:nth-child(" + i +")";
326
			var module = new Module(i, this, $(identifiantOnglet));
211 aurelien 327
			module.titre = $(this).children('h3').text();
219 delphine 328
			tableauOnglets[identifiantOnglet] = module;
203 gduche 329
		});
201 gduche 330
 
331
		$( ".colonne" ).sortable({
332
			connectWith: ".colonne"
333
		});
334
 
335
		$( ".colonne" ).disableSelection();
214 aurelien 336
		$('#zone_onglets').tabs({
337
			add: function(event, ui) {
338
				redimensionnerOnglets();
339
			},
340
			remove: function(event, ui) {
341
				redimensionnerOnglets();
342
			}
343
		});
344
 
211 aurelien 345
		$("#ongletEtPlus").click(function() {
212 aurelien 346
			afficherCacherMenuOnglets();
211 aurelien 347
		});
348
 
349
		$('.elementMenuModules').live('click', function() {
350
			var idOnglet = $(this).attr('rel');
219 delphine 351
			var objet = tableauOnglets[idOnglet];
212 aurelien 352
			objet.afficherCacherModule();
353
			$(this).toggleClass("elementMenuModulesSelectionne");
214 aurelien 354
		});
355
 
219 delphine 356
		for(indice in tableauOnglets) {
357
			var ongletEnCours = tableauOnglets[indice];
358
			if (ongletsDefaut.indexOf(ongletEnCours.titre) == -1) {
359
				ongletEnCours.afficherCacherModule();
360
			}
361
		}
362
 
222 aurelien 363
		$('.lien-onglet').parent().each(function() {
364
			$(this).attr("title",$(this).children("a").text());
365
		});
366
 
214 aurelien 367
		redimensionnerOnglets();
201 gduche 368
	});
369
</script>