New file |
0,0 → 1,221 |
<!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 widgets</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:'; |
var timer = null; |
|
var criteresPourWidget = new Object(); |
criteresPourWidget['carto'] = new Array('utilisateur', 'dept', 'commune', 'projet', 'taxon'); |
criteresPourWidget['cartoPoint'] = new Array('utilisateur', 'dept', 'commune', 'projet', 'taxon', 'titre', 'logo', 'url_site','image', 'photos'); |
criteresPourWidget['observation'] = new Array('utilisateur', 'dept', 'commune', 'projet', 'taxon'); |
criteresPourWidget['photo'] = new Array('utilisateur', 'dept', 'commune', 'projet', 'taxon', 'titre'); |
|
$(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(); |
}); |
|
$("#formulaire_widget_carto_point input").keypress(function (event) { |
if (event.which == 13) { |
mettreAjourApercu(); |
} |
}); |
|
$('input[name=type_widget]').change(function(event){ |
afficherCriteresPourWidget(); |
mettreAjourApercu(); |
}); |
|
$('#options').hide(); |
$('#options_secondaires').hide(); |
}); |
|
function htmlEncode(value){ |
if (value) { |
return jQuery('<div />').text(value).html(); |
} else { |
return ''; |
} |
} |
|
Object.size = function(obj) { |
var size = 0, key; |
for (key in obj) { |
if (obj.hasOwnProperty(key)) size++; |
} |
return size; |
}; |
|
|
function genererIFrame(url, hauteur, largeur) { |
return '<iframe src="'+url+'" width="'+largeur+'" height="'+hauteur+'">'; |
} |
|
function afficherCriteresPourWidget() { |
var type_widget = $('input[name=type_widget]:checked').val(); |
$('#options .critere').each(function() { |
var nom = $(this).find('.modificateur').attr("name"); |
if(critereExistePourWidget(type_widget, nom)) { |
$(this).fadeIn(); |
} else { |
$(this).fadeOut(); |
} |
}); |
$('#options').show(); |
$('#options_secondaires').show(); |
} |
|
function critereExistePourWidget(type_widget, nom) { |
var champsAffiches = criteresPourWidget[type_widget]; |
return (champsAffiches.indexOf(nom) != -1); |
} |
|
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(); |
var type_widget = $('input[name=type_widget]:checked').val(); |
$('#options .critere').each(function() { |
var nom = $(this).find('.modificateur').attr("name"); |
var valeur = $(this).find('.modificateur').val(); |
if(critereExistePourWidget(type_widget, nom) && valeur != "") { |
valeurs_form[nom] = valeur; |
}; |
}); |
|
var url_widget = url_base_widget+type_widget; |
if(Object.keys(valeurs_form).length > 0) { |
params_iframe = $.param(valeurs_form); |
url_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:5px; |
} |
|
.modificateur.droite { |
float: right; |
width: 420px; |
} |
#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">Type de widget : </label><br /> |
<input autocomplete="off" class="modificateur" type="radio" name="type_widget" value="carto">Carto à la commune<br /> |
<input autocomplete="off" class="modificateur" type="radio" name="type_widget" value="cartoPoint">Carto au point précis <br /> |
<input autocomplete="off" class="modificateur" type="radio" name="type_widget" value="observation">Observations <br /> |
<input autocomplete="off" class="modificateur" type="radio" name="type_widget" value="photo">Photos <br /> |
</div> |
<div id="options"> |
<div class="critere"><label for="utilisateur">Utilisateur : </label><input class="modificateur droite" type="text" name="utilisateur" id="utilisateur" /></div> |
<div class="critere"><label for="dept">Département : </label><input type="text" class="modificateur droite" name="dept" id="dept" /></div> |
<div class="critere"><label for="commune">Commune : </label><input type="text" class="modificateur droite" name="commune" id="commune" /></div> |
<div class="critere"><label for="projet">Projet : </label><input type="text" class="modificateur droite" name="projet" id="projet" /></div> |
<div class="critere"><label for="taxon">Taxon : </label><input type="text" class="modificateur droite" name="taxon" id="taxon" /></div> |
<div class="critere"><label for="titre">Titre : </label><input type="text" class="modificateur droite" name="titre" id="titre" /></div> |
<div class="critere"><label for="logo">Url du logo : </label><input type="text" class="modificateur droite" name="logo" id="logo" /></div> |
<div class="critere"><label for="image">Url de l'image : </label><input type="text" class="modificateur droite" name="image" id="image" /></div> |
<div class="critere"><label for="url_site">Url du site : </label><input type="text" class="modificateur droite" 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> |
<div id="options_secondaires"> |
<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> |
</div> |
<button id="mise_a_jour" name="mise_a_jour">Rafraichir</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> |