Subversion Repositories eFlore/Applications.cel

Rev

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

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