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
 
10
		var url_base_widget = 'http://localhost/widget:cel:cartoPoint';
11
		var timer = null;
12
 
13
		function htmlEncode(value){
14
		    if (value) {
15
		        return jQuery('<div />').text(value).html();
16
		    } else {
17
		        return '';
18
		    }
19
		}
20
 
21
		function genererIFrame(url, hauteur, largeur) {
22
			return '<iframe src='+url+' width="'+largeur+'" height="'+hauteur+'">';
23
		}
24
 
25
		$(document).ready(function() {
26
			$('#mise_a_jour_auto').change(function() {
27
				if($('#mise_a_jour_auto').val() == 'on') {
28
					activerTimerMaj();
29
				} else {
30
					desactiverTimerMaj();
31
				}
32
			});
33
 
34
			$('#mise_a_jour').click(function(event) {
35
				mettreAjourApercu();
36
			});
37
		});
38
 
39
		function activerTimerMaj() {
40
			$('.modificateur').change(function(event) {
41
				if(timer != null) {
42
					clearTimeout(timer);
43
				}
44
				timer = setTimeout(function(){mettreAjourApercu();},500);
45
			});
46
		}
47
 
48
		function desactiverTimerMaj() {
49
			if(timer != null) {
50
				clearTimeout(timer);
51
			}
52
			$('.modificateur').unbind('change');
53
		}
54
 
55
		function mettreAjourApercu() {
56
			var valeurs_form = new Object();
57
			$('#formulaire_widget_carto_point').children().find('input').each(function() {
58
				var valeur = $(this).val();
59
				var nom = $(this).attr("name");
60
				if(valeur != null && valeur != "" && nom != 'mise_a_jour_auto' && nom != 'hauteur' && nom != 'largeur') {
61
					valeurs_form[nom] = valeur;
62
				}
63
			});
64
 
65
			$('#formulaire_widget_carto_point').children().find('select').each(function() {
66
				var valeur = $(this).val();
67
				var nom = $(this).attr("name");
68
				valeurs_form[nom] = valeur;
69
			});
70
 
71
			params_iframe = $.param(valeurs_form);
72
			var url_widget = url_base_widget+"?"+params_iframe;
73
 
74
			var hauteur = $('#hauteur').val();
75
			var largeur = $('#largeur').val();
76
 
77
			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);
79
			$('#code_widget').show();
80
 
81
			var code_widget_apercu = genererIFrame(url_widget, hauteur, largeur);
82
			$('#apercu').html(code_widget_apercu);
83
			$('#apercu').show();
84
 
85
			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>");
87
			$('#code_widget').show();
88
		}
89
		//]]>
90
		</script>
91
<style>
92
	#formulaire_widget_carto_point {
93
		padding:10px;
94
		border:1px solid grey;
95
		width: 30%;
96
		float:left;
97
	}
98
	.critere {
99
		padding:2px;
100
	}
101
	#url_widget {
102
		border: 1px solid grey;
103
		background-color : #F5F5F5;
104
		padding: 10px;
105
		display: none;
106
	}
107
 
108
	#apercu {
109
		border: 1px solid grey;
110
		background-color : #F5F5F5;
111
		padding: 10px;
112
		display: none;
113
		float: right;
114
   		width: 60%;
115
	}
116
	#contenu_widget_apercu {
117
		width: 100%;
118
	}
119
 
120
	.nettoyage {
121
		visibility: hidden;
122
		clear: both;
123
	}
124
</style>
125
</head>
126
<body>
127
<div id="formulaire_widget_carto_point">
128
	<div class="critere"><label for="utilisateur">Utilisateur : </label><input class="modificateur" 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>
130
	<div class="critere"><label for="dept">Commune : </label><input type="text" class="modificateur" name="commune" id="commune" /></div>
131
	<div class="critere"><label for="projet">Projet : </label><input type="text" class="modificateur" name="projet" id="projet" /></div>
132
	<div class="critere"><label for="taxon">Taxon : </label><input type="text" class="modificateur" name="taxon" id="taxon" /></div>
133
	<div class="critere"><label for="titre">Titre : </label><input type="text" class="modificateur" 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>
135
	<div class="critere"><label for="url_site">Url du site : </label><input type="text" class="modificateur" name="url_site" id="url_site" /></div>
136
	<div class="critere"><label for="photos">Présence de photos : </label>
137
		<select class="modificateur" name="photos" id="photos">
138
			<option selected="selected" value="">Toutes les observations</option>
139
		  	<option value="1">Uniquement avec photos</option>
140
		</select>
141
	</div>
142
	<div class="critere"><label for="largeur">Largeur : </label>
143
						<input type="text" class="modificateur" size="10" name="largeur" id="largeur" value="700"/>
144
						<label for="hauteur">Hauteur : </label>
145
						<input type="text" class="modificateur" size="10" name="hauteur" id="hauteur" value="700"/>
146
						</div>
147
	<div>
148
		<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" />
150
	</div>
151
	<button id="mise_a_jour" name="mise_a_jour">OK</button>
152
</div>
153
<div id="apercu">Aperçu en temps réel
154
	<div id="contenu_widget_apercu"></div>
155
</div>
156
<hr class="nettoyage" />
157
<div id="code_widget"></div>
158
</body>
159
</html>