Subversion Repositories eFlore/Applications.eflore-consultation

Rev

Rev 225 | Rev 227 | 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 
	.ui-tabs { padding:0; position: relative; }
201 gduche 3 
</style>
221 delphine 4 
<div id="bloc-fiche" class="importance1">
219 delphine 5 
	<h1>Fiche</h1>
6 
	<div id="zone_onglets" class="ui-tabs ui-widget ui-widget-content ui-corner-all">
7 
		<ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
8 
			<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>
226 delphine 9 
			<li class="ui-state-default ui-corner-top"><a class="lien-onglet" href="#illustrations">Illustrations</a></li>
10 
			<li class="ui-state-default ui-corner-top"><a class="lien-onglet" href="#description">Description</a></li>
11 
			<li class="ui-state-default ui-corner-top"><a class="lien-onglet" href="#classification">Classification</a></li>
12 
			<li class="ui-state-default ui-corner-top"><a class="lien-onglet" href="#bibliographie">Bibliographie</a></li>
13 
			<li class="ui-state-default ui-corner-top"><a class="lien-onglet" href="#repartition">Répartition</a></li>
14 
			<li class="ui-state-default ui-corner-top"><a class="lien-onglet" href="#ethnobotanique">Ethnobotanique</a></li>
15 
			<li class="ui-state-default ui-corner-top"><a class="lien-onglet" href="#statut">Statut de protection</a></li>
16 
			<li class="ui-state-default ui-corner-top"><a class="lien-onglet" href="#nomenclature">Nomenclature</a></li>
17 
			<li class="ui-state-default ui-corner-top"><a class="lien-onglet" href="#phytosociologie">Phytosociologie</a></li>
225 aurelien 18 
			<li id="ongletEtPlus" class="ui-state-default ui-corner-top"><a id="lienOngletEtPlus" class="lien-statique" href="#fiche">+</a></li>
219 delphine 19 
		</ul>
20 
		<span id="conteneurMenuOnglets"></span>
214 aurelien 21 
	</div>
219 delphine 22 
 
23 
	<div id="zone_contenu_fiche">
24 
		<div class="colonne">
25 
			<div id="illustrations" class="module ui-widget ui-widget-content ui-helper-clearfix ui-corner-all">
26 
				<h3 class="titre ui-widget-header ui-corner-all" id="titre-0">Illustrations</h3>
27 
				<span id="contenu-0" class="contenu">
28 
				Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
29 
				Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
30 
				</span>
31 
			</div>
32 
			<div id="description" class="module ui-widget ui-widget-content ui-helper-clearfix ui-corner-all">
33 
				<h3 class="titre ui-widget-header ui-corner-all" id="titre-1">Description</h3>
34 
				<span id="contenu-0" class="contenu">
35 
							Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
36 
				Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
37 
				</span>
38 
			</div>
39 
			<div id="classification" class="module ui-widget ui-widget-content ui-helper-clearfix ui-corner-all">
40 
				<h3 class="titre ui-widget-header ui-corner-all" id="titre-2">Classification</h3>
41 
				<span id="contenu-0" class="contenu">
42 
										Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
43 
							Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
44 
							Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
45 
							Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
46 
				</span>
47 
			</div>
203 gduche 48 
		</div>
219 delphine 49 
		<div class="colonne">
50 
			<div id="bibliographie" class="module ui-widget ui-widget-content ui-helper-clearfix ui-corner-all">
51 
				<h3 class="titre ui-widget-header ui-corner-all" id="titre-3">Bibliographie</h3>
52 
				<span id="contenu-0" class="contenu">
53 
				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.
54 
				Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
55 
				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.
56 
				Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?
57 
				</span>
58 
			</div>
59 
			<div id="repartition" class="module ui-widget ui-widget-content ui-helper-clearfix ui-corner-all">
60 
				<h3 class="titre ui-widget-header ui-corner-all" id="titre-4">Répartition</h3>
61 
				<span id="contenu-0" class="contenu">
62 
							Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
63 
				Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
64 
				</span>
65 
			</div>
66 
			<div id="ethnobotanique" class="module ui-widget ui-widget-content ui-helper-clearfix ui-corner-all">
67 
				<h3 class="titre ui-widget-header ui-corner-all" id="titre-5">Ethnobotanique<span class="lienToggle"></span></h3>
68 
				<span id="contenu-0" class="contenu">
69 
							Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
70 
				Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
71 
				</span>
72 
			</div>
203 gduche 73 
		</div>
219 delphine 74 
		<div class="colonne">
75 
			<div id="statutDeProtection" class="module ui-widget ui-widget-content ui-helper-clearfix ui-corner-all">
76 
				<h3 class="titre ui-widget-header ui-corner-all" id="titre-7">Statut de protection<span class="lienToggle"></span></h3>
77 
				<span id="contenu-0" class="contenu">
78 
							Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
79 
							Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
80 
							Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
81 
							Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
82 
				</span>
83 
			</div>
84 
			<div id="nomenclature" class="module ui-widget ui-widget-content ui-helper-clearfix ui-corner-all">
85 
				<h3 class="titre ui-widget-header ui-corner-all" id="titre-8">Nomenclature<span class="lienToggle"></span></h3>
86 
				<span id="contenu-0" class="contenu">
87 
							Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
88 
				Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
89 
				</span>
90 
			</div>
91 
			<div id="phytosociologie" class="module ui-widget ui-widget-content ui-helper-clearfix ui-corner-all">
92 
				<h3 class="titre ui-widget-header ui-corner-all" id="titre-9">Phytosociologie<span class="lienToggle"></span></h3>
93 
				<span id="contenu-0" class="contenu">
94 
							Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
95 
				Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
96 
				</span>
97 
			</div>
98 
		</div>
99 
 
100 
		<br style="clear:left" />
203 gduche 101 
	</div>
221 delphine 102 
</div>
201 gduche 103 
 
104 
<script type="text/Javascript">
105 
	var modules = Array();
219 delphine 106 
	var tableauOnglets = Array();
201 gduche 107 
 
219 delphine 108 
	 var ongletsDefaut = [<?= $blocs; ?>];
109 
 
201 gduche 110 
	/** Classe Module
111 
	* Définit un module de type portlet
112 
	**/
203 gduche 113 
	function Module(id, module, onglet, statique) {
201 gduche 114 
 
115 
		// Variables de classe : identifiant, titre, et le HTML du résumé à afficher dans le contenu
116 
		this.id = id;
203 gduche 117 
		this.titre;
118 
		this.htmlResume;
201 gduche 119 
		this.statique = statique;
120 
 
121 
		// Les objets Portlet et Onglet que l'ont garde en mémoire pour pouvoir y accéder facilement
203 gduche 122 
		this.portlet = module;
201 gduche 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 
 
203 gduche 130 
			var titre = $(module).children('.titre');
201 gduche 131 
			titre.className = 'titre ui-widget-header ui-corner-all';
132 
			titre.id = 'titre-' + this.id;
133 
 
203 gduche 134 
			var contenu = $(module).children('.contenu');
201 gduche 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';
203 gduche 140 
			$(titre).append(lienToggle);
201 gduche 141 
			$(lienToggle).click(function() {
212 aurelien 142 
				objet.afficherCacherModule();
201 gduche 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 
 
203 gduche 154 
			var a = $(onglet).find("a");
201 gduche 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() {
211 aurelien 160 
				// TODO : Changer l'url par celle du module et enregistrer la configuration actuelle des onglets.
201 gduche 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() {
212 aurelien 170 
					objet.afficherCacherModule();
214 aurelien 171 
					redimensionnerOnglets();
201 gduche 172 
				});
173 
 
203 gduche 174 
				$(onglet).append(span);
201 gduche 175 
			}
176 
 
203 gduche 177 
			this.onglet = onglet;
201 gduche 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 
		}
211 aurelien 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();
212 aurelien 199 
			$(this.onglet).toggle();
214 aurelien 200 
 
201 
			redimensionnerOnglets();
211 aurelien 202 
		}
201 gduche 203 
	}
204 
 
212 aurelien 205 
	function afficherCacherMenuOnglets() {
211 aurelien 206 
		if($("#conteneurMenuOnglets").html() != '') {
207 
			$("#conteneurMenuOnglets").html('');
225 aurelien 208 
			$('#lienOngletEtPlus').text('+');
211 aurelien 209 
		} else {
210 
			var htmlMenu = '<ul class="menuModules">';
219 delphine 211 
			for (idOnglet in tableauOnglets) {
212 aurelien 212 
				var classe = "elementMenuModules";
213 
				if($(idOnglet).is(':visible')) {
214 
					classe += " elementMenuModulesSelectionne";
215 
				}
219 delphine 216 
				htmlMenu += '<li class="'+classe+'" rel="'+idOnglet+'" id="menu_module_'+idOnglet+'">'+tableauOnglets[idOnglet].titre+'</li>';
211 aurelien 217 
			}
218 
			htmlMenu += '</ul>';
219 
			$("#conteneurMenuOnglets").html(htmlMenu);
220 
			$("#conteneurMenuOnglets").toggle();
225 aurelien 221 
			$('#lienOngletEtPlus').text('-');
211 aurelien 222 
		}
223 
	}
224 
 
214 aurelien 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;
219 delphine 236 
		var longueurMax =  535 - (nbOnglets * 36);
214 aurelien 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 
 
203 gduche 244 
	//Initialisation
201 gduche 245 
	$(document).ready(function() {
203 gduche 246 
		i = 1;
201 gduche 247 
 
203 gduche 248 
		//Parcourir la totalité des modules générés et les lier grâce à la classe Module
249 
		$(".module").each(function () {
201 gduche 250 
			i++;
203 gduche 251 
			identifiantOnglet = "#zone_onglets>ul>li:nth-child(" + i +")";
252 
			var module = new Module(i, this, $(identifiantOnglet));
211 aurelien 253 
			module.titre = $(this).children('h3').text();
219 delphine 254 
			tableauOnglets[identifiantOnglet] = module;
203 gduche 255 
		});
201 gduche 256 
 
257 
		$( ".colonne" ).sortable({
258 
			connectWith: ".colonne"
259 
		});
260 
 
261 
		$( ".colonne" ).disableSelection();
214 aurelien 262 
		$('#zone_onglets').tabs({
263 
			add: function(event, ui) {
264 
				redimensionnerOnglets();
265 
			},
266 
			remove: function(event, ui) {
267 
				redimensionnerOnglets();
268 
			}
269 
		});
270 
 
211 aurelien 271 
		$("#ongletEtPlus").click(function() {
212 aurelien 272 
			afficherCacherMenuOnglets();
211 aurelien 273 
		});
274 
 
275 
		$('.elementMenuModules').live('click', function() {
276 
			var idOnglet = $(this).attr('rel');
219 delphine 277 
			var objet = tableauOnglets[idOnglet];
212 aurelien 278 
			objet.afficherCacherModule();
279 
			$(this).toggleClass("elementMenuModulesSelectionne");
214 aurelien 280 
		});
281 
 
219 delphine 282 
		for(indice in tableauOnglets) {
283 
			var ongletEnCours = tableauOnglets[indice];
284 
			if (ongletsDefaut.indexOf(ongletEnCours.titre) == -1) {
285 
				ongletEnCours.afficherCacherModule();
286 
			}
287 
		}
288 
 
222 aurelien 289 
		$('.lien-onglet').parent().each(function() {
290 
			$(this).attr("title",$(this).children("a").text());
291 
		});
292 
 
214 aurelien 293 
		redimensionnerOnglets();
201 gduche 294 
	});
295 
</script>