7,8 → 7,14 |
<script type="text/javascript"> |
//<![CDATA[ |
|
var url_base_widget = 'http://localhost/widget:cel:cartoPoint'; |
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', 'photos'); |
criteresPourWidget['observation'] = new Array('utilisateur', 'dept', 'commune', 'projet', 'taxon'); |
criteresPourWidget['photo'] = new Array('utilisateur', 'dept', 'commune', 'projet', 'taxon', 'titre'); |
|
function htmlEncode(value){ |
if (value) { |
18,8 → 24,17 |
} |
} |
|
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+'">'; |
return '<iframe src="'+url+'" width="'+largeur+'" height="'+hauteur+'">'; |
} |
|
$(document).ready(function() { |
34,8 → 49,32 |
$('#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){ |
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(); |
} |
}); |
mettreAjourApercu(); |
}); |
}); |
|
function critereExistePourWidget(type_widget, nom) { |
var champsAffiches = criteresPourWidget[type_widget]; |
return (champsAffiches.indexOf(nom) != -1); |
} |
|
function activerTimerMaj() { |
$('.modificateur').change(function(event) { |
if(timer != null) { |
54,23 → 93,21 |
|
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') { |
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; |
} |
}; |
}); |
|
$('#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 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(); |
|
96,8 → 133,13 |
float:left; |
} |
.critere { |
padding:2px; |
padding:5px; |
} |
|
.modificateur.droite { |
float: right; |
width: 420px; |
} |
#url_widget { |
border: 1px solid grey; |
background-color : #F5F5F5; |
125,20 → 167,28 |
</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 class="critere"><label for="utilisateur">Type de widget : </label><br /> |
<input class="modificateur" type="radio" name="type_widget" value="carto" checked="checked">Carto à la commune<br /> |
<input class="modificateur" type="radio" name="type_widget" value="cartoPoint">Carto au point précis <br /> |
<input class="modificateur" type="radio" name="type_widget" value="observation">Observations <br /> |
<input 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="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 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> |