Subversion Repositories eFlore/Applications.cel

Rev

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