Subversion Repositories eFlore/Applications.cel

Rev

Rev 1461 | Details | Compare with Previous | Last modification | View Log | RSS feed

Rev Author Line No. Line
1438 aurelien 1 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
2 
<html>
3 
<head>
4 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
1441 aurelien 5 
<title>Générateur de widgets</title>
1438 aurelien 6 
<script type="text/javascript" src="http://www.tela-botanica.org/commun/jquery/1.6.2/jquery-1.6.2.min.js"></script>
7 
<script type="text/javascript">
8 
		//<![CDATA[
9 
 
1439 aurelien 10 
		var url_base_widget = 'http://localhost/widget:cel:';
1438 aurelien 11 
		var timer = null;
1439 aurelien 12 
 
13 
		var criteresPourWidget = new Object();
14 
		criteresPourWidget['carto'] = new Array('utilisateur', 'dept', 'commune', 'projet', 'taxon');
1461 aurelien 15 
		criteresPourWidget['cartoPoint'] =  new Array('utilisateur', 'dept', 'commune', 'projet', 'taxon', 'titre', 'logo', 'url_site','image', 'photos');
1439 aurelien 16 
		criteresPourWidget['observation'] = new Array('utilisateur', 'dept', 'commune', 'projet', 'taxon');
17 
		criteresPourWidget['photo'] = new Array('utilisateur', 'dept', 'commune', 'projet', 'taxon', 'titre');
1438 aurelien 18 
 
19 
		$(document).ready(function() {
20 
			$('#mise_a_jour_auto').change(function() {
21 
				if($('#mise_a_jour_auto').val() == 'on') {
22 
					activerTimerMaj();
23 
				} else {
24 
					desactiverTimerMaj();
25 
				}
26 
			});
27 
 
28 
			$('#mise_a_jour').click(function(event) {
29 
				mettreAjourApercu();
30 
			});
1439 aurelien 31 
 
32 
			$("#formulaire_widget_carto_point input").keypress(function (event) {
33 
			    if (event.which == 13) {
34 
			    	mettreAjourApercu();
35 
			    }
36 
			 });
37 
 
38 
			$('input[name=type_widget]').change(function(event){
1440 aurelien 39 
				afficherCriteresPourWidget();
1439 aurelien 40 
				mettreAjourApercu();
41 
			});
1440 aurelien 42 
 
43 
			$('#options').hide();
44 
			$('#options_secondaires').hide();
1438 aurelien 45 
		});
1440 aurelien 46 
 
47 
		function htmlEncode(value){
48 
		    if (value) {
49 
		        return jQuery('<div />').text(value).html();
50 
		    } else {
51 
		        return '';
52 
		    }
53 
		}
1438 aurelien 54 
 
1440 aurelien 55 
		Object.size = function(obj) {
56 
		    var size = 0, key;
57 
		    for (key in obj) {
58 
		        if (obj.hasOwnProperty(key)) size++;
59 
		    }
60 
		    return size;
61 
		};
62 
 
63 
 
64 
		function genererIFrame(url, hauteur, largeur) {
65 
			return '<iframe src="'+url+'" width="'+largeur+'" height="'+hauteur+'">';
66 
		}
67 
 
68 
		function afficherCriteresPourWidget() {
69 
			var type_widget = $('input[name=type_widget]:checked').val();
70 
			$('#options .critere').each(function() {
71 
				var nom = $(this).find('.modificateur').attr("name");
72 
				if(critereExistePourWidget(type_widget, nom)) {
73 
					$(this).fadeIn();
74 
				} else {
75 
					$(this).fadeOut();
76 
				}
77 
			});
78 
			$('#options').show();
79 
			$('#options_secondaires').show();
80 
		}
81 
 
1439 aurelien 82 
		function critereExistePourWidget(type_widget, nom) {
83 
			var champsAffiches = criteresPourWidget[type_widget];
84 
			return (champsAffiches.indexOf(nom) != -1);
85 
		}
86 
 
1438 aurelien 87 
		function activerTimerMaj() {
88 
			$('.modificateur').change(function(event) {
89 
				if(timer != null) {
90 
					clearTimeout(timer);
91 
				}
92 
				timer = setTimeout(function(){mettreAjourApercu();},500);
93 
			});
94 
		}
95 
 
96 
		function desactiverTimerMaj() {
97 
			if(timer != null) {
98 
				clearTimeout(timer);
99 
			}
100 
			$('.modificateur').unbind('change');
101 
		}
102 
 
103 
		function mettreAjourApercu() {
104 
			var valeurs_form = new Object();
1439 aurelien 105 
			var type_widget = $('input[name=type_widget]:checked').val();
106 
			$('#options .critere').each(function() {
107 
				var nom = $(this).find('.modificateur').attr("name");
108 
				var valeur = $(this).find('.modificateur').val();
109 
				if(critereExistePourWidget(type_widget, nom) && valeur != "") {
1438 aurelien 110 
					valeurs_form[nom] = valeur;
1439 aurelien 111 
				};
1438 aurelien 112 
			});
1439 aurelien 113 
 
114 
			var url_widget = url_base_widget+type_widget;
115 
			if(Object.keys(valeurs_form).length > 0) {
116 
				params_iframe = $.param(valeurs_form);
117 
				url_widget += "?"+params_iframe;
118 
			}
119 
 
1438 aurelien 120 
			var hauteur = $('#hauteur').val();
121 
			var largeur = $('#largeur').val();
122 
 
123 
			var lien_widget = '<a href="'+url_widget+'">'+url_widget+'</a>';
124 
			$('#code_widget').html("Vous pouvez voir ce widget en plein écran en cliquant sur ce lien "+lien_widget);
125 
			$('#code_widget').show();
126 
 
127 
			var code_widget_apercu = genererIFrame(url_widget, hauteur, largeur);
128 
			$('#apercu').html(code_widget_apercu);
129 
			$('#apercu').show();
130 
 
131 
			var code_widget_inclure = genererIFrame(url_widget, hauteur, largeur);
132 
			$('#code_widget').html("Copiez-collez ce code pour inclure le widget sur votre site "+"<pre>"+htmlEncode(code_widget_inclure)+"</pre>");
133 
			$('#code_widget').show();
134 
		}
135 
		//]]>
136 
		</script>
137 
<style>
138 
	#formulaire_widget_carto_point {
139 
		padding:10px;
140 
		border:1px solid grey;
141 
		width: 30%;
142 
		float:left;
143 
	}
144 
	.critere {
1439 aurelien 145 
		padding:5px;
1438 aurelien 146 
	}
1439 aurelien 147 
 
148 
	.modificateur.droite {
149 
		float: right;
150 
   		width: 420px;
151 
	}
1438 aurelien 152 
	#url_widget {
153 
		border: 1px solid grey;
154 
		background-color : #F5F5F5;
155 
		padding: 10px;
156 
		display: none;
157 
	}
158 
 
159 
	#apercu {
160 
		border: 1px solid grey;
161 
		background-color : #F5F5F5;
162 
		padding: 10px;
163 
		display: none;
164 
		float: right;
165 
   		width: 60%;
166 
	}
167 
	#contenu_widget_apercu {
168 
		width: 100%;
169 
	}
170 
 
171 
	.nettoyage {
172 
		visibility: hidden;
173 
		clear: both;
174 
	}
175 
</style>
176 
</head>
177 
<body>
178 
<div id="formulaire_widget_carto_point">
1439 aurelien 179 
	<div class="critere"><label for="utilisateur">Type de widget : </label><br />
1440 aurelien 180 
		<input autocomplete="off" class="modificateur" type="radio" name="type_widget" value="carto">Carto à la commune<br />
181 
		<input autocomplete="off" class="modificateur" type="radio" name="type_widget" value="cartoPoint">Carto au point précis <br />
182 
		<input autocomplete="off" class="modificateur" type="radio" name="type_widget" value="observation">Observations <br />
183 
		<input autocomplete="off" class="modificateur" type="radio" name="type_widget" value="photo">Photos <br />
1438 aurelien 184 
	</div>
1439 aurelien 185 
	<div id="options">
186 
		<div class="critere"><label for="utilisateur">Utilisateur : </label><input class="modificateur droite" type="text" name="utilisateur" id="utilisateur" /></div>
187 
		<div class="critere"><label for="dept">Département : </label><input type="text" class="modificateur droite" name="dept" id="dept" /></div>
188 
		<div class="critere"><label for="commune">Commune : </label><input type="text" class="modificateur droite" name="commune" id="commune" /></div>
189 
		<div class="critere"><label for="projet">Projet : </label><input type="text" class="modificateur droite" name="projet" id="projet" /></div>
190 
		<div class="critere"><label for="taxon">Taxon : </label><input type="text" class="modificateur droite" name="taxon" id="taxon" /></div>
191 
		<div class="critere"><label for="titre">Titre : </label><input type="text" class="modificateur droite" name="titre" id="titre" /></div>
192 
		<div class="critere"><label for="logo">Url du logo : </label><input type="text" class="modificateur droite" name="logo" id="logo" /></div>
1461 aurelien 193 
		<div class="critere"><label for="image">Url de l'image : </label><input type="text" class="modificateur droite" name="image" id="image" /></div>
1439 aurelien 194 
		<div class="critere"><label for="url_site">Url du site : </label><input type="text" class="modificateur droite" name="url_site" id="url_site" /></div>
195 
		<div class="critere"><label for="photos">Présence de photos : </label>
196 
			<select class="modificateur" name="photos" id="photos">
197 
				<option selected="selected" value="">Toutes les observations</option>
198 
			  	<option value="1">Uniquement avec photos</option>
199 
			</select>
200 
		</div>
201 
	</div>
1440 aurelien 202 
	<div id="options_secondaires">
203 
		<div class="critere"><label for="largeur">Largeur : </label>
204 
							<input type="text" class="modificateur" size="10" name="largeur" id="largeur" value="700"/>
205 
							<label for="hauteur">Hauteur : </label>
206 
							<input type="text" class="modificateur" size="10" name="hauteur" id="hauteur" value="700"/>
207 
							</div>
208 
		<div>
209 
			<label for="mise_a_jour_auto">Maj auto de la carte à chaque changement : </label>
210 
			<input type="checkbox" id="mise_a_jour_auto" name="mise_a_jour_auto" />
211 
		</div>
1438 aurelien 212 
	</div>
1440 aurelien 213 
	<button id="mise_a_jour" name="mise_a_jour">Rafraichir</button>
1438 aurelien 214 
</div>
215 
<div id="apercu">Aperçu en temps réel
216 
	<div id="contenu_widget_apercu"></div>
217 
</div>
218 
<hr class="nettoyage" />
219 
<div id="code_widget"></div>
220 
</body>
221 
</html>