[(#REM)

/*******************************************************************************\
 * BIODIV, plugin et squelette pour SPIP - https://www.spip.net/               *
 *         dédié à la gestion d'observations naturalistes                      *
 *                                                                             *
 *         Copyright (C) 2008-2020 Renaud LAURETTE                             *
 *                                                                             *
 * BIODIV a été développé initialement pour le projet Biodiv.Balma de l'APCVEB *
 * (Association de Protection du Cadre de Vie et de l'Environnement balmanais) * 
 *     voir Biodiv.Balma : https://balma.biodiv.fr/                            *
 *     voir APCVEB : http://apcveb.free.fr/                                    *
 *                                                                             *
 *  Ce programme est un logiciel libre distribué sous licence GNU/GPL.         *
 *  Pour plus de détails voir les fichier COPYING.txt et LICENCE-BIODIV.md     *
\*******************************************************************************/

]


<div class='wrapper'>
	<!-- <br class='bugajaxie' /> -->
	[<p class="bg-sucess">(#ENV*{message_ok})</p>]
	[<p class="bg-danger">(#ENV*{message_erreur})</p>]
	
	[(#ENV{editable}|oui)

	<form id="photoform" method='post' action='#ENV{action}' class="form-horizontal" enctype='multipart/form-data'>
		#ACTION_FORMULAIRE{#ENV{action}}
	  <input type='hidden' name='id_observation' value='#ENV{id_observation}' />
	  <input type='hidden' name='rg_document' value='#ENV{rg_document}' />
	  <input type="hidden" name="MAX_FILE_SIZE" value="1048576" />

	    
	  <div id="mesImages"></div>
	  <div class="grids">
	    <div class="grid-8 grid">
	      <h3>Ajouter des photos</h3>
	      	<p>Vérifiez/modifiez le nom du photographe et définissez si vous souhaitez ou non signer les photos.
	      	Un <b>nouveau nom</b> de photographe et la présence ou l'absence 
	      	de bandeau de signature peuvent être choisis <b>avant</b> chaque sélection d'une ou plusieurs photos.</p>
		  <fieldset id="dropbox">	    
		    <legend> Nouvelle sélection</legend>
	  	  	<input type="checkbox" id="signer" name="signer" checked="checked"/><label for="signer"> Signer les photos au nom de </label>
		  	<input type="text" id='signature'/>
		  	<p>Glissez-déposez les photos dans ce cadre ou sélectionnez-les manuellement.</p>
		  	<input type='file' id='photos' accept="image/*" multiple=""/>	
		  </fieldset>
		  <p>Vous pouvez effectuer plusieurs sélections avant d'enregistrer.</p>
		  <button type="submit" class="btn btn-primary"><:bouton_enregistrer:></button>
		  <br/><br/>
		</div>
		<div class="grid-8 grid">
		   <h3>Photos sélectionnées</h3>
		   <button type="button" id="btnAnnuler" class="btn btn-default">Vider la sélection</button>
		   <br/><br/>
		   <div id="preview" ></div>
		   <div id="msg"></div>
		</div>
	  </div>

	</form>
	
	]
</div>
<script type="text/javascript" src="#CHEMIN{lib/vignetteur/exif.js}"> </script>
<script type="text/javascript" src="#CHEMIN{lib/vignetteur/vignetteur.js}"> </script>

<script>

  $(function(){
<BOUCLE_who(AUTEURS) {tous} {id_auteur=#SESSION{id_auteur}}>
    $("#signature").val("#NOM");
</BOUCLE_who>


  	// On met en place la mécanique Vignetteur
    // qui réduit les images, les signe, extrait les infos EXIF, etc ...
    // Ici, pas de callback, donc pas d'extraction des infos EXIF
	 var vignette = new Vignetteur('dropbox','preview','mesImages',null);
	 // On déclare la fonction qui servira à signer les photos
	 vignette.setSignature(function() {
	 	var sig = document.getElementById("signature").value;
	 	var data;
	 	if($("#signer").is(":checked")) {	 		
	 		var sign = "(CC) BY-NC-SA     "+sig+" @ #NOM_SITE_SPIP"; 
	 		data = {
	 			signature: sign,
	 			name: sig
	 		};
	 	} else {
	 		data = {
	 			signature: "",
	 			name: sig
	 		};
	 	}
	 	return data;
	 })
	 // et on charge l'image qui a été choisie à l'étape de création de l'observation
	 // (si elle existe) pour initialiser la liste des photos
	 .loadSessionImage(); 
	 // On attache le traitement de Vignetteur à la sélection manuelle
	 // de fichiers dans le formulaire.
	 $("#photos").change(function(){
  		vignette.handleFiles(this.files);
  		});
  	 // et on gère les boutons
  	 $("#btnSkip").click(function() {
  			window.location='[(#URL_OBSERVATION{#ENV{id_observation}}|parametre_url{var_mode,calcul})]';
  		});
  	$("#btnEnd").click(function() {
  			window.location='[(#URL_OBSERVATION{#ENV{id_observation}}|parametre_url{var_mode,calcul})]';
  		});
  	$("#btnAnnuler").click(function() {
  		$("#preview > div").remove();
  		$("#mesImages > input").remove();
  		vignette.reset();
  		});
	});
</script>