Subversion Repositories eFlore/Applications.eflore-consultation

Rev

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