Subversion Repositories eFlore/Applications.cel

Compare Revisions

Ignore whitespace Rev 1437 → Rev 1438

/trunk/widget/generateur.html
New file
0,0 → 1,159
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Générateur de widget carto</title>
<script type="text/javascript" src="http://www.tela-botanica.org/commun/jquery/1.6.2/jquery-1.6.2.min.js"></script>
<script type="text/javascript">
//<![CDATA[
var url_base_widget = 'http://localhost/widget:cel:cartoPoint';
var timer = null;
function htmlEncode(value){
if (value) {
return jQuery('<div />').text(value).html();
} else {
return '';
}
}
function genererIFrame(url, hauteur, largeur) {
return '<iframe src='+url+' width="'+largeur+'" height="'+hauteur+'">';
}
$(document).ready(function() {
$('#mise_a_jour_auto').change(function() {
if($('#mise_a_jour_auto').val() == 'on') {
activerTimerMaj();
} else {
desactiverTimerMaj();
}
});
$('#mise_a_jour').click(function(event) {
mettreAjourApercu();
});
});
function activerTimerMaj() {
$('.modificateur').change(function(event) {
if(timer != null) {
clearTimeout(timer);
}
timer = setTimeout(function(){mettreAjourApercu();},500);
});
}
function desactiverTimerMaj() {
if(timer != null) {
clearTimeout(timer);
}
$('.modificateur').unbind('change');
}
function mettreAjourApercu() {
var valeurs_form = new Object();
$('#formulaire_widget_carto_point').children().find('input').each(function() {
var valeur = $(this).val();
var nom = $(this).attr("name");
if(valeur != null && valeur != "" && nom != 'mise_a_jour_auto' && nom != 'hauteur' && nom != 'largeur') {
valeurs_form[nom] = valeur;
}
});
$('#formulaire_widget_carto_point').children().find('select').each(function() {
var valeur = $(this).val();
var nom = $(this).attr("name");
valeurs_form[nom] = valeur;
});
params_iframe = $.param(valeurs_form);
var url_widget = url_base_widget+"?"+params_iframe;
var hauteur = $('#hauteur').val();
var largeur = $('#largeur').val();
var lien_widget = '<a href="'+url_widget+'">'+url_widget+'</a>';
$('#code_widget').html("Vous pouvez voir ce widget en plein écran en cliquant sur ce lien "+lien_widget);
$('#code_widget').show();
var code_widget_apercu = genererIFrame(url_widget, hauteur, largeur);
$('#apercu').html(code_widget_apercu);
$('#apercu').show();
var code_widget_inclure = genererIFrame(url_widget, hauteur, largeur);
$('#code_widget').html("Copiez-collez ce code pour inclure le widget sur votre site "+"<pre>"+htmlEncode(code_widget_inclure)+"</pre>");
$('#code_widget').show();
}
//]]>
</script>
<style>
#formulaire_widget_carto_point {
padding:10px;
border:1px solid grey;
width: 30%;
float:left;
}
.critere {
padding:2px;
}
#url_widget {
border: 1px solid grey;
background-color : #F5F5F5;
padding: 10px;
display: none;
}
#apercu {
border: 1px solid grey;
background-color : #F5F5F5;
padding: 10px;
display: none;
float: right;
width: 60%;
}
#contenu_widget_apercu {
width: 100%;
}
.nettoyage {
visibility: hidden;
clear: both;
}
</style>
</head>
<body>
<div id="formulaire_widget_carto_point">
<div class="critere"><label for="utilisateur">Utilisateur : </label><input class="modificateur" type="text" name="utilisateur" id="utilisateur" /></div>
<div class="critere"><label for="dept">Département : </label><input type="text" class="modificateur" name="dept" id="dept" /></div>
<div class="critere"><label for="dept">Commune : </label><input type="text" class="modificateur" name="commune" id="commune" /></div>
<div class="critere"><label for="projet">Projet : </label><input type="text" class="modificateur" name="projet" id="projet" /></div>
<div class="critere"><label for="taxon">Taxon : </label><input type="text" class="modificateur" name="taxon" id="taxon" /></div>
<div class="critere"><label for="titre">Titre : </label><input type="text" class="modificateur" name="titre" id="titre" /></div>
<div class="critere"><label for="logo">Url du logo : </label><input type="text" class="modificateur" name="logo" id="logo" /></div>
<div class="critere"><label for="url_site">Url du site : </label><input type="text" class="modificateur" name="url_site" id="url_site" /></div>
<div class="critere"><label for="photos">Présence de photos : </label>
<select class="modificateur" name="photos" id="photos">
<option selected="selected" value="">Toutes les observations</option>
<option value="1">Uniquement avec photos</option>
</select>
</div>
<div class="critere"><label for="largeur">Largeur : </label>
<input type="text" class="modificateur" size="10" name="largeur" id="largeur" value="700"/>
<label for="hauteur">Hauteur : </label>
<input type="text" class="modificateur" size="10" name="hauteur" id="hauteur" value="700"/>
</div>
<div>
<label for="mise_a_jour_auto">Maj auto de la carte à chaque changement : </label>
<input type="checkbox" id="mise_a_jour_auto" name="mise_a_jour_auto" />
</div>
<button id="mise_a_jour" name="mise_a_jour">OK</button>
</div>
<div id="apercu">Aperçu en temps réel
<div id="contenu_widget_apercu"></div>
</div>
<hr class="nettoyage" />
<div id="code_widget"></div>
</body>
</html>