Subversion Repositories eFlore/Applications.cel

Compare Revisions

No changes between revisions

Ignore whitespace Rev 1523 → Rev 1524

/trunk/widget/modules/saisie/squelettes/defaut/css/defaut.css
68,13 → 68,52
opacity:1;
}
.miniature{
max-width:100px;
float: left;
height: 130px;
padding-left: 15px;
padding-right: 15px;
}
 
.miniature-img {
height: 100px;
}
 
.miniature img {
display: block;
}
 
.miniature-chargement {
height:100px;
width: 100px;
}
 
.defilement-miniatures-gauche, .defilement-miniatures-droite {
float: left;
font-size: 1.2em;
font-weight: bold;
height: 62px;
margin: 5px;
padding-top: 30px;
width: 12px;
}
 
.defilement-miniatures {
width: 210px;
}
 
.defilement-miniatures-cache {
visibility: hidden;
}
 
.miniature-cachee {
display: none;
}
 
.miniature-selectionnee {
display: block;
width: 90px;
}
 
.referentiel-obs {
color:#3B9D3B;
}
86,6 → 125,40
position: relative;
top: -8px;
}
 
#fichier {
display: none;
}
 
#photos-conteneur {
height: 120px;
}
 
#photo-placeholder {
background: url("../img/icones/icone-photo.png");
background-size: 89px;
cursor: pointer;
margin-bottom: 15px;
margin-right: 15px;
float:left;
border: 5px dashed #CCCCCC;
border-radius: 8px 8px 8px 8px;
height: 100px;
margin: 2px 0 2px 2px;
text-align: center;
width: 98px;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
 
#photo-placeholder:hover {
background: url("../img/icones/icone-photo-hover.png");
background-size: 89px;
border: 5px dashed #111;
border-radius: 8px;
}
 
/*+--------------------------------------------------------------------------------------------------------+*/
/* Correction style CSS Bootstrap */
.well {
/trunk/widget/modules/saisie/squelettes/defaut/defaut.tpl.html
406,16 → 406,18
</form>
<form id="form-upload" class="form-horizontal" action="<?=$url_base?>saisie?projet=sauvages&amp;service=upload-image"
method="post" enctype="multipart/form-data">
<div rel="tooltip"
title="Ajouter une photo de votre observation. Elle doit être au
format JPEG et ne doit pas excéder 5Mo.">
<label>Photo</label>
<h2>Images</h2>
<strong>Cliquez sur l'icone pour ajouter une image</strong>
<p class="miniature-info" class="discretion help-inline">Les photos doivent être au format JPEG et ne doivent pas excéder 5Mo chacunes.</p>
<div id ="photos-conteneur">
<div id="photo-placeholder" rel="tooltip"
title="Cliquez pour ajouter une photo de votre observation. Elle doit être au
format JPEG et ne doit pas excéder 5Mo."></div>
<input type="file" id="fichier" name="fichier" accept="image/jpeg" />
<input type="hidden" name="MAX_FILE_SIZE" value="5242880"/>
<p id="miniature-info" class="discretion help-inline">La photo doit être au format JPEG et ne doit pas excéder 5Mo.</p>
<div id="miniature"></div>
<button id="effacer-miniature" type="button" style="display:none;">Effacer</button>
<p id="miniature-msg" class="span12">&nbsp;</p>
<div id="miniatures">
</div>
<p class="miniature-msg" class="span12">&nbsp;</p>
</div>
</form>
</div>
/trunk/widget/modules/saisie/squelettes/defaut/img/icones/icone-photo.png
Cannot display: file marked as a binary type.
svn:mime-type = image/png
/trunk/widget/modules/saisie/squelettes/defaut/img/icones/icone-photo.png
New file
Property changes:
Added: svn:mime-type
+image/png
\ No newline at end of property
/trunk/widget/modules/saisie/squelettes/defaut/js/defaut.js
44,31 → 44,30
//UPLOAD PHOTO : Traitement de l'image
$(document).ready(function() {
$("#effacer-miniature").click(function () {
supprimerMiniature();
$(".effacer-miniature").click(function () {
supprimerMiniatures($(this));
});
if (HTML5 && window.File && window.FileReader && isCanvasSupported()) {
if (DEBUG) {
console.log("Support OK pour : API File et Canvas.");
$('#photo-placeholder').click(function(event) {
$("#fichier").click();
});
$("#fichier").bind('change', function (e) {
arreter(e);
var options = {
success: afficherMiniature, // post-submit callback
dataType: 'xml', // 'xml', 'script', or 'json' (expected server response type)
resetForm: true // reset the form after successful submit
};
$("#miniature").append('<img id="miniature-chargement" class="miniature" alt="chargement" src="'+CHARGEMENT_IMAGE_URL+'"/>');
$("#ajouter-obs").attr('disabled', 'disabled');
if(verifierFormat($("#fichier").val())) {
$("#form-upload").ajaxSubmit(options);
} else {
window.alert("Le format de fichier n'est pas supporté, les formats acceptés sont "+ $("#fichier").attr("accept"));
}
$('#fichier').bind('change', function(e) {
afficherMiniatureHtml5(e);
});
} else {
$("#fichier").bind('change', function (e) {
arreter(e);
var options = {
success: afficherMiniature, // post-submit callback
dataType: 'xml', // 'xml', 'script', or 'json' (expected server response type)
resetForm: true // reset the form after successful submit
};
$("#miniature").append('<img id="miniature-chargement" class="miniature" alt="chargement" src="'+CHARGEMENT_IMAGE_URL+'"/>');
$("#ajouter-obs").attr('disabled', 'disabled');
$("#form-upload").ajaxSubmit(options);
return false;
});
}
return false;
});
if(ESPECE_IMPOSEE) {
$("#taxon").attr("disabled", "disabled");
86,98 → 85,19
infosAssociee.retenu = (INFOS_ESPECE_IMPOSEE.retenu == 'false') ? false : true;
$("#taxon").data(infosAssociee);
}
$('.effacer-miniature').live('click', function() {
$(this).parent().remove();
});
});
 
function isCanvasSupported(){
var elem = document.createElement('canvas');
return !!(elem.getContext && elem.getContext('2d'));
function verifierFormat(nom) {
var parts = nom.split('.');
extension = parts[parts.length - 1];
return (extension.toLowerCase() == 'jpeg' || extension.toLowerCase() == 'jpg');
}
 
function afficherMiniatureHtml5(evt) {
supprimerMiniature();
var selectedfiles = evt.target.files;
var f = selectedfiles[0];// Nous récupérons seulement le premier fichier.
if (f.type != 'image/jpeg') {
var message = "Seule les images JPEG sont supportées.";
$("#miniature-msg").append(message);
} else if (f.size > 5242880) {
var message = "Votre image à un poids supérieur à 5Mo.";
$("#miniature-msg").append(message);
} else {
var reader = new FileReader();
// Lit le fichier image commune url de données
reader.readAsDataURL(f);
var imgNom = f.name;
// Closure pour capturer les infos du fichier
reader.onload = (function(theFile) {
return function(e) {
// Rendre la miniature
var imageBase64 = e.target.result;
//$("#miniature").append('<img id="miniature-img" class="miniature b64" src="'+imageBase64+'" alt="'+imgNom+'"/>');
// HTML5 Canvas
var img = new Image();
img.src = imageBase64;
img.alt = imgNom;
img.onload = function() {
transformerImgEnCanvas(this, 100, 100, false, 'white');
};
};
})(f);
}
$("#effacer-miniature").show();
}
 
function transformerImgEnCanvas(img, thumbwidth, thumbheight, crop, background) {
var canvas = document.createElement('canvas');
canvas.width = thumbwidth;
canvas.height = thumbheight;
var dimensions = calculerDimenssions(img.width, img.height, thumbwidth, thumbheight);
if (crop) {
canvas.width = dimensions.w;
canvas.height = dimensions.h;
dimensions.x = 0;
dimensions.y = 0;
}
cx = canvas.getContext('2d');
if (background !== 'transparent') {
cx.fillStyle = background;
cx.fillRect(0, 0, thumbwidth, thumbheight);
}
cx.drawImage(img, dimensions.x, dimensions.y, dimensions.w, dimensions.h);
afficherMiniatureCanvas(img, canvas);
}
 
function calculerDimenssions(imagewidth, imageheight, thumbwidth, thumbheight) {
var w = 0, h = 0, x = 0, y = 0,
widthratio = imagewidth / thumbwidth,
heightratio = imageheight / thumbheight,
maxratio = Math.max(widthratio, heightratio);
if (maxratio > 1) {
w = imagewidth / maxratio;
h = imageheight / maxratio;
} else {
w = imagewidth;
h = imageheight;
}
x = (thumbwidth - w) / 2;
y = (thumbheight - h) / 2;
return {w:w, h:h, x:x, y:y};
}
 
function afficherMiniatureCanvas(imgB64, canvas) {
var url = canvas.toDataURL('image/jpeg' , 0.8);
var alt = imgB64.alt;
var title = Math.round(url.length / 1000 * 100) / 100 + ' KB';
var miniature = '<img id="miniature-img" class="miniature b64-canvas" src="'+url+'" alt="'+alt+'" title="'+title+'" />';
$("#miniature").append(miniature);
$("#miniature-img").data('b64', imgB64.src);
}
 
function afficherMiniature(reponse) {
supprimerMiniature();
if (DEBUG) {
var debogage = $("debogage", reponse).text();
console.log("Débogage upload : "+debogage);
186,18 → 106,25
if (message != '') {
$("#miniature-msg").append(message);
} else {
var miniatureUrl = $("miniature-url", reponse).text();
var imgNom = $("image-nom", reponse).text();
$("#miniature").append('<img id="miniature-img" class="miniature" alt="'+imgNom+'" src="'+miniatureUrl+'"/>');
$("#miniatures").append(creerWidgetMiniature(reponse));
}
$('#ajouter-obs').removeAttr('disabled');
$("#effacer-miniature").show();
$('#ajouter-obs').removeAttr('disabled');
}
 
function supprimerMiniature() {
$("#miniature").empty();
function creerWidgetMiniature(reponse) {
var miniatureUrl = $("miniature-url", reponse).text();
var imgNom = $("image-nom", reponse).text();
var html =
'<div class="miniature">'+
'<img class="miniature-img" class="miniature" alt="'+imgNom+'" src="'+miniatureUrl+'"/>'+
'<button class="effacer-miniature" type="button">Effacer</button>'+
'</div>'
return html;
}
 
function supprimerMiniatures() {
$("#miniatures").empty();
$("#miniature-msg").empty();
$("#effacer-miniature").hide();
}
 
//+----------------------------------------------------------------------------------------------------------+
372,11 → 299,6
$(function() {
var url_service = SERVICE_NOM_COMMUNE_URL;
/*if(NOM_SCI_PROJET != "bdtfx") {
// Dans le cas d'autres référentiels comme les Antilles, on utilise
// une localisation mondiale mais approximative (c'est mieux que rien)
url_service = SERVICE_NOM_COMMUNE_URL_ALT
}*/
var urlNomCommuneFormatee = url_service.replace('{lat}', pos.lat()).replace('{lon}', pos.lng());
$.ajax({
530,6 → 452,16
$("#transmettre-obs").on('click', transmettreObs);
$("#referentiel").on('change', surChangementReferentiel);
$("body").on('click', ".defilement-miniatures-gauche", function(event) {
event.preventDefault();
defilerMiniatures($(this));
});
$("body").on('click', ".defilement-miniatures-droite", function(event) {
event.preventDefault();
defilerMiniatures($(this));
});
});
 
function configurerFormValidator() {
677,7 → 609,7
$(".obs-nbre").triggerHandler('changement');
afficherObs();
stockerObsData();
supprimerMiniature();
supprimerMiniatures();
$("#taxon").val("");
$("#taxon").data("numNomSel",undefined);
} else {
750,8 → 682,8
'milieu' : $("#milieu").val(),
//Ajout des champs images
'image_nom' : $("#miniature-img").attr('alt'),
'image_b64' : getB64ImgOriginal()
'image_nom' : getNomsImgsOriginales(),
'image_b64' : getB64ImgsOriginales()
});
}
 
776,6 → 708,7
 
function transmettreObs() {
var observations = $("#liste-obs").data();
console.log(observations);
if (observations == undefined || jQuery.isEmptyObject(observations)) {
afficherPanneau("#dialogue-zero-obs");
812,7 → 745,7
},
success : function(data, textStatus, jqXHR) {
$('#dialogue-obs-transaction-ok .alert-txt').append($("#tpl-transmission-ok").clone().html());
supprimerMiniature();
supprimerMiniatures();
},
statusCode : {
500 : function(jqXHR, textStatus, errorThrown) {
869,13 → 802,24
return ($observateur == true && $station == true && $obs == true) ? true : false;
}
 
function getB64ImgOriginal() {
var b64 = '';
if ($("#miniature-img").hasClass('b64')) {
b64 = $("#miniature-img").attr('src');
} else if ($("#miniature-img").hasClass('b64-canvas')) {
b64 = $("#miniature-img").data('b64');
}
function getNomsImgsOriginales() {
var noms = new Array();
$(".miniature-img").each(function() {
noms.push($(this).attr('alt'));
});
return noms;
}
 
function getB64ImgsOriginales() {
var b64 = new Array();
$(".miniature-img").each(function() {
if ($(this).hasClass('b64')) {
b64.push($(this).attr('src'));
} else if ($(this).hasClass('b64-canvas')) {
b64.push($(this).data('b64'));
}
});
 
return b64;
}
 
903,18 → 847,57
}
 
function ajouterImgMiniatureAuTransfert() {
var miniature = '';
if ($("#miniature img").length == 1) {
var css = $("#miniature-img").hasClass('b64') ? 'miniature b64' : 'miniature';
var src = $("#miniature-img").attr("src");
var alt = $("#miniature-img").attr("alt");
miniature = '<img class="'+css+' " alt="'+alt+'"src="'+src+'" />';
var html = '';
var miniatures = '';
var premiere = true;
if ($("#miniatures img").length >= 1) {
$("#miniatures img").each(function() {
var visible = premiere ? 'miniature-selectionnee' : 'miniature-cachee';
premiere = false;
var css = $(this).hasClass('b64') ? 'miniature b64' : 'miniature';
var src = $(this).attr("src");
var alt = $(this).attr("alt");
miniature = '<img class="'+css+' '+visible+'" alt="'+alt+'"src="'+src+'" />';
miniatures += miniature;
});
visible = ($("#miniatures img").length > 1) ? '' : 'defilement-miniatures-cache';
var html =
'<div class="defilement-miniatures">'+
'<a href="#" class="defilement-miniatures-gauche '+visible+'">&#60;</a>'+
miniatures+
'<a href="#" class="defilement-miniatures-droite '+visible+'">&#62;</a>'+
'</div>';
} else {
miniature = '<img class="miniature" alt="Aucune photo"src="'+PAS_DE_PHOTO_ICONE_URL+'" />';
html = '<img class="miniature" alt="Aucune photo"src="'+PAS_DE_PHOTO_ICONE_URL+'" />';
}
return miniature;
return html;
}
 
function defilerMiniatures(element) {
var miniatureSelectionne = element.siblings("img.miniature-selectionnee");
miniatureSelectionne.removeClass('miniature-selectionnee');
miniatureSelectionne.addClass('miniature-cachee');
var miniatureAffichee = miniatureSelectionne;
if(element.hasClass('defilement-miniatures-gauche')) {
if(miniatureSelectionne.prev('.miniature').length != 0) {
miniatureAffichee = miniatureSelectionne.prev('.miniature');
} else {
miniatureAffichee = miniatureSelectionne.siblings(".miniature").last();
}
} else {
if(miniatureSelectionne.next('.miniature').length != 0) {
miniatureAffichee = miniatureSelectionne.next('.miniature');
} else {
miniatureAffichee = miniatureSelectionne.siblings(".miniature").first();
}
}
console.log(miniatureAffichee);
miniatureAffichee.addClass('miniature-selectionnee');
miniatureAffichee.removeClass('miniature-cachee');
}
 
function ajouterNumNomSel() {
var nn = '';
if ($("#taxon").data("numNomSel") == undefined) {