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