Subversion Repositories eFlore/Applications.eflore-consultation

Rev

Rev 208 | Rev 212 | Go to most recent revision | Only display areas with differences | Ignore whitespace | Details | Blame | Last modification | View Log | RSS feed

Rev 208 Rev 211
1 
<h1>Fiche</h1>
 1 
<h1>Fiche</h1>
2 
<style>
 2 
<style>
3 
	#zone_contenu_fiche {
 3 
	#zone_contenu_fiche {
4 
		border:solid 1px #DDD;
 4 
		border:solid 1px #DDD;
5 
		border-width:0px 1px 1px 1px;
 5 
		border-width:0px 1px 1px 1px;
6 
		width:100%;
 6 
		width:100%;
7 
		min-height:400px;
 7 
		min-height:400px;
8 
		clear:left;
 8 
		clear:left;
9
9
10 
	}
 10 
	}
11
11
12 
	.module {margin: 0 1em 1em 0;}
 12 
	.module {margin: 0 1em 1em 0;}
13 
	.module .titre{ margin: 0.3em; padding-bottom: 4px; padding-left: 0.2em; cursor:pointer;}
 13 
	.module .titre{ margin: 0.3em; padding-bottom: 4px; padding-left: 0.2em; cursor:pointer;}
14 
	.module .titre .ui-icon { float: right; }
 14 
	.module .titre .ui-icon { float: right; }
15 
	.module .contenu { padding: 0.4em; }
 15 
	.module .contenu { padding: 0.4em; }
16
16
17 
	.colonne {float:left; padding-bottom:100px; width:30%}
 17 
	.colonne {float:left; padding-bottom:100px; width:30%}
18
18
19 
	.ui-sortable-placeholder { border: 1px dotted black; visibility: visible !important; height: 50px !important; }
 19 
	.ui-sortable-placeholder { border: 1px dotted black; visibility: visible !important; height: 50px !important; }
20 
	.ui-sortable-placeholder * { visibility: hidden; }
 20 
	.ui-sortable-placeholder * { visibility: hidden; }
21
21
22 
	#zone_onglets ul li {list-style:none}
 22 
	#zone_onglets ul li {list-style:none}
23 
	.lienToggle {cursor:pointer}
 23 
	.lienToggle {cursor:pointer}
24
24
25
25
26 
	#dialog label, #dialog input { display:block; }
 26 
	#dialog label, #dialog input { display:block; }
27 
	#dialog label { margin-top: 0.5em; }
 27 
	#dialog label { margin-top: 0.5em; }
28 
	#dialog input, #dialog textarea { width: 95%; }
 28 
	#dialog input, #dialog textarea { width: 95%; }
29 
	#zone_onglets { margin-top: 1em; border-width: 1px 1px 0 1px; border-radius:0; width:99%; font-size:12px}
 29 
	#zone_onglets { margin-top: 1em; padding-right: 5px; border-width: 1px 1px 0 1px; border-radius:0; width:99%; font-size:12px}
30 
	#zone_onglets li {float:left}
 30 
	#zone_onglets li {float:left}
31 
	#zone_onglets li .ui-icon-close { float: left; margin: 0.4em 0.2em 0 0; cursor: pointer; }
 31 
	#zone_onglets li .ui-icon-close { float: left; margin: 0.4em 0.2em 0 0; cursor: pointer; }
- 
 
 32 
	#zone_onglets #ongletEtPlus { cursor: pointer; float:right;}
- 
 
 33
- 
 
 34 
	.elementMenuModules {
- 
 
 35 
		display:block;
- 
 
 36 
		border: 1px solid black;
- 
 
 37 
		width: 150px;
- 
 
 38 
		padding: 10px 10px 10px 25px;
- 
 
 39 
		margin:0px;
32 
	#add_tab { cursor: pointer; }
 40 
		cursor: pointer;
- 
 
 41 
	}
- 
 
 42
- 
 
 43 
	.elementMenuModules:hover {
- 
 
 44 
		background-color: grey;
- 
 
 45 
	}
- 
 
 46 
	.menuModules {left: 73%; position: absolute; border: 1px solid grey; margin: 0px; padding: 0px}
33 
</style>
 47 
</style>
34 
 
 48 
 
35 
<div id="zone_onglets" class="ui-tabs ui-widget ui-widget-content ui-corner-all">
 49 
<div id="zone_onglets" class="ui-tabs ui-widget ui-widget-content ui-corner-all">
36 
	<ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
 50 
	<ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
37 
		<li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active"><a href="#fiche">Accueil</a></li>
 51 
		<li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active"><a href="#fiche">Accueil</a></li>
38 
		<li class="ui-state-default ui-corner-top"><a href="#fiche">Illustrations</a></li>
 52 
		<li class="ui-state-default ui-corner-top"><a href="#fiche">Illustrations</a></li>
39 
		<li class="ui-state-default ui-corner-top"><a href="#fiche">Répartition</a></li>
 53 
		<li class="ui-state-default ui-corner-top"><a href="#fiche">Répartition</a></li>
40 
		<li class="ui-state-default ui-corner-top"><a href="#fiche">Wiki</a></li>
 54 
		<li class="ui-state-default ui-corner-top"><a href="#fiche">Wiki</a></li>
- 
 
 55 
		<li id="ongletEtPlus" class="ui-state-default ui-corner-top"><a href="#fiche">+</a></li>
41 
	</ul>
 56 
	</ul>
- 
 
 57 
	<span id="conteneurMenuOnglets"></span>
42 
</div>
 58 
</div>
43 
 
 59 
 
44 
<div id="zone_contenu_fiche">
 60 
<div id="zone_contenu_fiche">
45 
	<div class="colonne">
 61 
	<div class="colonne">
46 
		<div id="illustrations" class="module ui-widget ui-widget-content ui-helper-clearfix ui-corner-all">
 62 
		<div id="illustrations" class="module ui-widget ui-widget-content ui-helper-clearfix ui-corner-all">
47 
			<h3 class="titre ui-widget-header ui-corner-all" id="titre-0">Illustrations</h3>
 63 
			<h3 class="titre ui-widget-header ui-corner-all" id="titre-0">Illustrations</h3>
48 
			<span id="contenu-0" class="contenu">contenu-0</span>
 64 
			<span id="contenu-0" class="contenu">contenu-0</span>
49 
		</div>
 65 
		</div>
50
66
51 
		<div id="repartition" class="module ui-widget ui-widget-content ui-helper-clearfix ui-corner-all">
 67 
		<div id="repartition" class="module ui-widget ui-widget-content ui-helper-clearfix ui-corner-all">
52 
			<h3 class="titre ui-widget-header ui-corner-all" id="titre-0">Répartition</h3>
 68 
			<h3 class="titre ui-widget-header ui-corner-all" id="titre-0">Répartition</h3>
53 
			<span id="contenu-0" class="contenu">contenu-0</span>
 69 
			<span id="contenu-0" class="contenu">contenu-0</span>
54 
		</div>
 70 
		</div>
55
71
56 
		<div id="wiki" class="module ui-widget ui-widget-content ui-helper-clearfix ui-corner-all">
 72 
		<div id="wiki" class="module ui-widget ui-widget-content ui-helper-clearfix ui-corner-all">
57 
			<h3 class="titre ui-widget-header ui-corner-all" id="titre-0">Wiki<span class="lienToggle"></span></h3>
 73 
			<h3 class="titre ui-widget-header ui-corner-all" id="titre-0">Wiki<span class="lienToggle"></span></h3>
58 
			<span id="contenu-0" class="contenu">contenu-0</span>
 74 
			<span id="contenu-0" class="contenu">contenu-0</span>
59 
		</div>
 75 
		</div>
60
76
61
77
62 
	</div>
 78 
	</div>
63 
	<div class="colonne"></div>
 79 
	<div class="colonne"></div>
64 
	<div class="colonne"></div>
 80 
	<div class="colonne"></div>
65
81
66 
	<br style="clear:left" />
82 
	<br style="clear:left" />
67 
</div>
 83 
</div>
68 
 
 84 
 
69 
<script type="text/Javascript">
 85 
<script type="text/Javascript">
70 
	var modules = Array();
 86 
	var modules = Array();
- 
 
 87 
	var ongletsOuverts = Array();
71
88
72 
	/** Classe Module
 89 
	/** Classe Module
73 
	* Définit un module de type portlet
 90 
	* Définit un module de type portlet
74 
	**/
 91 
	**/
75 
	function Module(id, module, onglet, statique) {
 92 
	function Module(id, module, onglet, statique) {
76
93
77 
		// Variables de classe : identifiant, titre, et le HTML du résumé à afficher dans le contenu
 94 
		// Variables de classe : identifiant, titre, et le HTML du résumé à afficher dans le contenu
78 
		this.id = id;
 95 
		this.id = id;
79 
		this.titre;
 96 
		this.titre;
80 
		this.htmlResume;
 97 
		this.htmlResume;
81 
		this.statique = statique;
 98 
		this.statique = statique;
82
99
83 
		// Les objets Portlet et Onglet que l'ont garde en mémoire pour pouvoir y accéder facilement
100 
		// Les objets Portlet et Onglet que l'ont garde en mémoire pour pouvoir y accéder facilement
84 
		this.portlet = module;
 101 
		this.portlet = module;
85 
		this.onglet;
 102 
		this.onglet;
86
103
87 
		// creerPortlet
104 
		// creerPortlet
88 
		// Créer l'objet Portlet HTML à afficher et le stocker dans les variables de classe
 105 
		// Créer l'objet Portlet HTML à afficher et le stocker dans les variables de classe
89 
		this.creerPortlet = function() {
 106 
		this.creerPortlet = function() {
90 
			var objet = this;
 107 
			var objet = this;
91
108
92 
			var titre = $(module).children('.titre');
 109 
			var titre = $(module).children('.titre');
93 
			titre.className = 'titre ui-widget-header ui-corner-all';
 110 
			titre.className = 'titre ui-widget-header ui-corner-all';
94 
			titre.id = 'titre-' + this.id;
 111 
			titre.id = 'titre-' + this.id;
95
112
96 
			var contenu = $(module).children('.contenu');
 113 
			var contenu = $(module).children('.contenu');
97 
			contenu.id = 'contenu-' + this.id;
 114 
			contenu.id = 'contenu-' + this.id;
98 
			contenu.className ='contenu';
 115 
			contenu.className ='contenu';
99
116
100 
			var lienToggle = document.createElement('span');
 117 
			var lienToggle = document.createElement('span');
101 
			lienToggle.className = 'lienToggle ui-icon ui-icon-minusthick';
 118 
			lienToggle.className = 'lienToggle ui-icon ui-icon-minusthick';
102 
			$(titre).append(lienToggle);
 119 
			$(titre).append(lienToggle);
103 
			$(lienToggle).click(function() {
 120 
			$(lienToggle).click(function() {
104 
				$(contenu).toggle();
 121 
				$(contenu).toggle();
105 
				$(this).toggleClass("ui-icon-plusthick");
 122 
				$(this).toggleClass("ui-icon-plusthick");
106 
				$(this).toggleClass("ui-icon-minusthick");
 123 
				$(this).toggleClass("ui-icon-minusthick");
107 
				$(objet.onglet).toggle();
 124 
				$(objet.onglet).toggle();
108 
			});
 125 
			});
109
126
110 
			this.portlet = module;
 127 
			this.portlet = module;
111 
			return module;
128 
			return module;
112 
		}
129 
		}
113
130
114 
		// creerOnglet
 131 
		// creerOnglet
115 
		// Créer l'objet Onglet HTML
 132 
		// Créer l'objet Onglet HTML
116 
		this.creerOnglet = function() {
 133 
		this.creerOnglet = function() {
117 
			var objet = this;
 134 
			var objet = this;
118
135
119 
			var a = $(onglet).find("a");
 136 
			var a = $(onglet).find("a");
120
137
121 
			// Gestion du clic sur le lien
138 
			// Gestion du clic sur le lien
122 
			// Comme les liens sont mis en place par jqueryui tabs, il faut ajouter une surcouche pour
139 
			// Comme les liens sont mis en place par jqueryui tabs, il faut ajouter une surcouche pour
123 
			// déplacer vers la page du module
 140 
			// déplacer vers la page du module
124 
			$(a).click(function() {
 141 
			$(a).click(function() {
125 
				// TODO : Changer l'url par celle du module.
 142 
				// TODO : Changer l'url par celle du module et enregistrer la configuration actuelle des onglets.
126 
				//$(location).attr('href',"http://www.google.fr");
 143 
				//$(location).attr('href',"http://www.google.fr");
127 
			});
 144 
			});
128
145
129 
			if (!statique) {
 146 
			if (!statique) {
130 
				var span = document.createElement('span');
 147 
				var span = document.createElement('span');
131 
				span.className = "ui-icon ui-icon-close";
 148 
				span.className = "ui-icon ui-icon-close";
132
149
133 
				// Gestion de la fermeture de l'onglet
 150 
				// Gestion de la fermeture de l'onglet
134 
				$(span).live( "click", function() {
 151 
				$(span).live( "click", function() {
135 
					$(span).parent().toggle();
 152 
					$(span).parent().toggle();
136 
					$(objet.portlet).find(".lienToggle").toggleClass("ui-icon-plusthick");
 153 
					$(objet.portlet).find(".lienToggle").toggleClass("ui-icon-plusthick");
137 
					$(objet.portlet).find(".lienToggle").toggleClass("ui-icon-minusthick");
 154 
					$(objet.portlet).find(".lienToggle").toggleClass("ui-icon-minusthick");
138 
					$(objet.portlet).find(".contenu").toggle(false);
 155 
					$(objet.portlet).find(".contenu").toggle(false);
139 
				});
 156 
				});
140
157
141 
				$(onglet).append(span);
 158 
				$(onglet).append(span);
142 
			}
 159 
			}
143
160
144 
			this.onglet = onglet;
 161 
			this.onglet = onglet;
145 
		}
 162 
		}
146
163
147 
		// Initialisation de l'objet
 164 
		// Initialisation de l'objet
148 
		this.creerPortlet();
 165 
		this.creerPortlet();
149 
		this.creerOnglet();
 166 
		this.creerOnglet();
150
167
151 
		// Accesseurs de la classe
 168 
		// Accesseurs de la classe
152 
		this.getOnglet = function() {
 169 
		this.getOnglet = function() {
153 
			return this.onglet;
170 
			return this.onglet;
154 
		}
 171 
		}
155
172
156 
		this.getPortlet = function() {
 173 
		this.getPortlet = function() {
157
174
158 
			return this.portlet;
 175 
			return this.portlet;
159 
		}
 176 
		}
- 
 
 177
- 
 
 178 
		// fonctions d'affichage et cachage (je sais pas si on dit ça comme ça) des onglets
- 
 
 179 
		this.afficherCacherModule = function() {
- 
 
 180 
			$(this.portlet).find(".lienToggle").toggleClass("ui-icon-plusthick");
- 
 
 181 
			$(this.portlet).find(".lienToggle").toggleClass("ui-icon-minusthick");
- 
 
 182 
			$(this.portlet).find(".contenu").toggle();
- 
 
 183 
		}
- 
 
 184 
 
- 
 
 185 
	}
- 
 
 186
- 
 
 187 
	function afficherMenuOnglets() {
- 
 
 188 
		if($("#conteneurMenuOnglets").html() != '') {
- 
 
 189 
			$("#conteneurMenuOnglets").html('');
- 
 
 190 
		} else {
- 
 
 191 
			console.log(ongletsOuverts);
- 
 
 192 
			var htmlMenu = '<ul class="menuModules">';
- 
 
 193 
			for (idOnglet in ongletsOuverts) {
- 
 
 194 
				htmlMenu += '<li class="elementMenuModules" rel="'+idOnglet+'" id="menu_module_'+idOnglet+'">'+ongletsOuverts[idOnglet].titre+'</li>';
- 
 
 195 
			}
- 
 
 196 
			htmlMenu += '</ul>';
- 
 
 197 
			$("#conteneurMenuOnglets").html(htmlMenu);
- 
 
 198 
			$("#conteneurMenuOnglets").toggle();
- 
 
 199 
		}
160 
	}
 200 
	}
161
201
162 
	//Initialisation
 202 
	//Initialisation
163 
	$(document).ready(function() {
 203 
	$(document).ready(function() {
164 
		i = 1;
 204 
		i = 1;
165
205
166 
		//Parcourir la totalité des modules générés et les lier grâce à la classe Module
 206 
		//Parcourir la totalité des modules générés et les lier grâce à la classe Module
167 
		$(".module").each(function () {
 207 
		$(".module").each(function () {
168 
			i++;
 208 
			i++;
169 
			identifiantOnglet = "#zone_onglets>ul>li:nth-child(" + i +")";
 209 
			identifiantOnglet = "#zone_onglets>ul>li:nth-child(" + i +")";
170 
			var module = new Module(i, this, $(identifiantOnglet));
 210 
			var module = new Module(i, this, $(identifiantOnglet));
171
- 
 
- 
 
 211 
			module.titre = $(this).children('h3').text();
- 
 
 212 
			ongletsOuverts[identifiantOnglet] = module;
172 
		});
 213 
		});
173
214
174 
		$( ".colonne" ).sortable({
 215 
		$( ".colonne" ).sortable({
175 
			connectWith: ".colonne"
 216 
			connectWith: ".colonne"
176 
		});
 217 
		});
177 
 
 218 
 
178 
		$( ".colonne" ).disableSelection();
 219 
		$( ".colonne" ).disableSelection();
179 
		$('#zone_onglets').tabs();
 220 
		$('#zone_onglets').tabs();
- 
 
 221 
		$("#ongletEtPlus").click(function() {
- 
 
 222 
			afficherMenuOnglets();
- 
 
 223 
		});
- 
 
 224
- 
 
 225 
		$('.elementMenuModules').live('click', function() {
- 
 
 226 
			var idOnglet = $(this).attr('rel');
- 
 
 227 
			var objet = ongletsOuverts[idOnglet];
- 
 
 228 
			$(idOnglet).toggle();
- 
 
 229 
			$(objet.portlet).find(".lienToggle").toggleClass("ui-icon-plusthick");
- 
 
 230 
			$(objet.portlet).find(".lienToggle").toggleClass("ui-icon-minusthick");
- 
 
 231 
			$(objet.portlet).find(".contenu").toggle();
- 
 
 232 
		})
180 
	});
 233 
	});
181 
</script>
 234 
</script>