WebSVN – eFlore/Applications.cel – Diff – /trunk/widget/modules/saisie/squelettes/js/WidgetSaisie.js


import {WidgetsSaisiesCommun,utils} from './WidgetsSaisiesCommun.js';
import {valOk} from './Utils.js';
 
/**
 * Constructeur WidgetSaisie par défaut
 */
function WidgetSaisie(  ) {
	if  ( valOk(widgetProp) ) {
		this.urlWidgets                        = widgetProp.urlWidgets;
		this.projet                            = widgetProp.projet;
		this.idProjet                          = widgetProp.idProjet;
		this.tagsMotsCles                      = widgetProp.tagsMotsCles;
		this.mode                              = widgetProp.mode;
		this.langue                            = widgetProp.langue;
		this.serviceAnnuaireIdUrl              = widgetProp.serviceAnnuaireIdUrl;
		this.serviceNomCommuneUrl              = widgetProp.serviceNomCommuneUrl;
		this.serviceNomCommuneUrlAlt           = widgetProp.serviceNomCommuneUrlAlt;
		this.debug                             = widgetProp.debug;
		this.html5                             = widgetProp.html5;
		this.serviceSaisieUrl                  = widgetProp.serviceSaisieUrl;
		this.serviceObsUrl                     = widgetProp.serviceObsUrl;
		this.chargementImageIconeUrl           = widgetProp.chargementImageIconeUrl;
		this.pasDePhotoIconeUrl                = widgetProp.pasDePhotoIconeUrl;
		this.autocompletionElementsNbre        = widgetProp.autocompletionElementsNbre;
		this.serviceAutocompletionNomSciUrl    = widgetProp.serviceAutocompletionNomSciUrl;
		this.serviceAutocompletionNomSciUrlTpl = widgetProp.serviceAutocompletionNomSciUrlTpl;
		this.dureeMessage                      = widgetProp.dureeMessage;
		this.obsMaxNbre                        = widgetProp.obsMaxNbre;
		this.tagImg                            = widgetProp.tagImg;
		this.tagObs                            = widgetProp.tagObs;
		this.obsId                             = widgetProp.obsId;
		this.nomSciReferentiel                 = widgetProp.nomSciReferentiel;
		this.especeImposee                     = widgetProp.especeImposee;
		this.infosEspeceImposee                = widgetProp.infosEspeceImposee;
		this.referentielImpose                 = widgetProp.referentielImpose;
		this.isTaxonListe                      = widgetProp.isTaxonListe;
	}
	this.urlRacine            = window.location.origin;
	this.obsNbre              = 0;
	this.nbObsEnCours         = 1;
	this.totalObsATransmettre = 0;
	this.nbObsTransmises      = 0;
	this.observer             = null;
	this.isASL                = false;
	this.geoloc               = {};
}
WidgetSaisie.prototype = new WidgetsSaisiesCommun();
 
/**
 * Initialise le formulaire, les validateurs, les listes de complétion...
 */
WidgetSaisie.prototype.initForm = function() {
	this.initFormConnection();
	if ( valOk( this.obsId ) ) {
		this.chargerInfoObs();
	}
	if( this.isTaxonListe ) {
		this.initFormTaxonListe();
	} else {
		this.ajouterAutocompletionNoms();
	}
	// au rafraichissement de la page,
	// les input date semblent conserver la valeur entrée précedemment
	// c'est voulu après la création d'une obs mais pas quand la page est actualisée
	// Déjà tenté: onbeforeunload avec un location.reload(true) n'a pas permis de le faire
	$( 'input[type=date]' ).each( function () {
		( valOk( $( this ).data( 'default' ) ) ) ? $( this ).val( $( this ).data( 'default' ) ) : $( this ).val( '' );
	});
	this.configurerFormValidator();
	this.definirReglesFormValidator();
 
	if( this.especeImposee ) {
		$( '#taxon' ).attr( 'disabled', 'disabled' );
		$( '#taxon-input-groupe' ).attr( 'title', '' );
		// Bricolage cracra pour avoir le nom retenu avec auteur (nom_retenu.libelle ne le mentionne pas)
		const infosEspeceImposee = $.parseJSON( this.infosEspeceImposee );
		let nomRetenuComplet   = infosEspeceImposee.nom_retenu_complet;
		const debutAnneRefBiblio = nomRetenuComplet.indexOf( ' [' );
 
		if ( -1 !== debutAnneRefBiblio ) {
			nomRetenuComplet = nomRetenuComplet.substr( 0, debutAnneRefBiblio );
		}
		// fin bricolage cracra
		const infosAssociee = {
			label : infosEspeceImposee.nom_sci_complet,
			value : infosEspeceImposee.nom_sci_complet,
			nt : infosEspeceImposee.num_taxonomique,
			nomSel : infosEspeceImposee.nom_sci,
			nomSelComplet : infosEspeceImposee.nom_sci_complet,
			numNomSel : infosEspeceImposee.id,
			nomRet : nomRetenuComplet,
			numNomRet : infosEspeceImposee['nom_retenu.id'],
			famille : infosEspeceImposee.famille,
			retenu : ( 'false' === infosEspeceImposee.retenu ) ? false : true
		};
		$( '#taxon' ).data( infosAssociee );
	}
};
 
/**
 * Initialise les écouteurs d'événements
 */
WidgetSaisie.prototype.initEvts = function() {
	// identité
	this.initEvtsConnection();
	// on location, initialisation de la géoloc
	this.initEvtsGeoloc();
	// Sur téléchargement image
	this.initEvtsFichier();
 
	$( '#referentiel' ).on( 'change', this.surChangementReferentiel.bind( this ) );
	// Création / Suppression / Transmission des obs
	// Défilement des miniatures dans le résumé obs
	this.initEvtsObs();
	// Alertes et aides
	this.initEvtsAlertes();
	// message avant de quitter le formulaire
	this.confirmerSortie();
};
 
// Identité Observateur par courriel
WidgetSaisie.prototype.requeterIdentiteCourriel = function() {
	const lthis = this,
		courriel    = $( '#courriel' ).val(),
		urlAnnuaire = this.serviceAnnuaireIdUrl + courriel;
 
	if ( valOk( courriel ) ) {
		$.ajax({
			url : urlAnnuaire,
			type : 'GET',
			success : function( data, textStatus, jqXHR ) {
				if ( lthis.debug ) {
					console.log( 'SUCCESS: ' + textStatus );
				}
				if ( valOk( data ) && valOk( data[courriel] ) ) {
					const infos = data[courriel];
					lthis.surSuccesCompletionCourriel( infos, courriel );
				} else {
					lthis.surErreurCompletionCourriel();
				}
			},
			error : function( jqXHR, textStatus, errorThrown ) {
				if ( lthis.debug ) {
					console.log( 'ERREUR: '+ textStatus );
				}
				lthis.surErreurCompletionCourriel();
			},
			complete : function( jqXHR, textStatus ) {
				if ( lthis.debug ) {
					console.log( 'COMPLETE: '+ textStatus );
				}
			}
		});
	}
};
 
// se déclanche quand on choisit "Observation sans inscription" mais que le mail entré est incrit à Tela
WidgetSaisie.prototype.surSuccesCompletionCourriel = function( infos, courriel ) {
	if ( $( '#utilisateur-connecte' ).hasClass( 'hidden' ) ) {// si quelque chose a foiré après actualisation
		if ( !valOk( $( '#warning-identite' ) ) ) {
			$( '#zone-courriel' ).before( '<p id="warning-identite" class="warning"><i class="fas fa-exclamation-triangle"></i> ' + this.msgTraduction( 'courriel-connu' ) + '</p>' );
		}
		$( '#inscription, #zone-prenom-nom, #zone-courriel-confirmation' ).addClass( 'hidden' );
		$( '#prenom, #nom, #courriel_confirmation' ).attr( 'disabled', 'disabled' );
		$( '.nav.control-group' ).addClass( 'error' );
	}
};
 
// se déclanche quand on choisit "Observation sans inscription" et qu'effectivement le mail n'est pas connu de Tela
WidgetSaisie.prototype.surErreurCompletionCourriel = function() {
	$( '#creation-compte, #zone-prenom-nom, #zone-courriel-confirmation' ).removeClass( 'hidden' );
	$( '#warning-identite' ).remove();
	$( '.nav.control-group' ).removeClass( 'error' );
	$( '#prenom, #nom, #courriel_confirmation' ).val( '' ).removeAttr( 'disabled' );
};
 
WidgetSaisie.prototype.testerLancementRequeteIdentite = function( event ) {
	if ( valOk( event.which, true, 13 ) ) {
		this.requeterIdentiteCourriel();
		event.preventDefault();
		event.stopPropagation();
	}
};
 
WidgetSaisie.prototype.reduireVoletIdentite = function() {
	if ( $( '#form-observateur' ).valid() && $( '#courriel' ).valid() && $( '#courriel_confirmation' ).valid() ) {
		$( '#bouton-connexion, #creation-compte' ).addClass( 'hidden' );
		$( '#bienvenue').removeClass( 'hidden' );
		$( '#inscription, #zone-courriel' ).addClass( 'hidden' );
		if ( valOk( $( '#nom' ).val() ) && valOk( $( '#prenom' ).val() ) ) {
			$( '#zone-prenom-nom' ).addClass( 'hidden' );
			$( '#bienvenue-prenom' ).text( ' ' + $( '#prenom' ).val() );
			$( '#bienvenue-nom' ).text( ' ' + $( '#nom' ).val() );
		} else {
			$( '#zone-prenom-nom' ).removeClass( 'hidden' );
			$( '#bienvenue-prenom,#bienvenue-nom' ).text( '' );
		}
	} else {
		$( '#bouton-connexion, #creation-compte' ).removeClass( 'hidden' );
		$( '#bienvenue').addClass( 'hidden' );
	}
};
 
 
WidgetSaisie.prototype.formaterNom = function() {
	$( '#nom' ).val( $( '#nom' ).val().toUpperCase() );
};
 
WidgetSaisie.prototype.formaterPrenom = function() {
	const prenom   = [],
		mots       = $( '#prenom' ).val().split( ' ' ),
		motsLength = mots.length;
 
	for ( let i = 0; i < motsLength; i++ ) {
		let mot          = mots[i],
			motMajuscule = '';
 
		if ( 0 <= mot.indexOf( '-' ) ) {
			const prenomCompose    = new Array(),
				motsComposes       = mot.split( '-' ),
				motsComposesLength = motsComposes.length;
 
			for ( let j = 0; j < motsComposesLength; j++ ) {
				const motSimple    = motsComposes[j];
 
				motMajuscule = motSimple.charAt(0).toUpperCase() + motSimple.slice(1);
				prenomCompose.push( motMajuscule );
			}
			prenom.push( prenomCompose.join( '-' ) );
		} else {
			motMajuscule = mot.charAt(0).toUpperCase() + mot.slice(1);
			prenom.push( motMajuscule );
		}
	}
	$( '#prenom' ).val( prenom.join( ' ' ) );
};
 
WidgetSaisie.prototype.bloquerCopierCollerCourriel = function() {
	this.afficherPanneau( '#dialogue-bloquer-copier-coller' );
 
	return false;
};
 
// Préchargement des infos-obs ************************************************/
WidgetSaisie.prototype.chargerInfoObs = function() {
	const lthis = this,
		urlObs  = this.serviceObsUrl + '/' + this.obsId;
 
	$.ajax({
		url: urlObs,
		type: 'GET',
		success: function( data, textStatus, jqXHR ) {
			if ( valOk( data ) ) {
				lthis.prechargerForm( data );
			} else {
				lthis.surErreurChargementInfosObs.bind( lthis );
			}
		},
		error: function( jqXHR, textStatus, errorThrown ) {
			lthis.surErreurChargementInfosObs();
		}
	});
};
 
// @TODO faire mieux que ça !
WidgetSaisie.prototype.surErreurChargementInfosObs = function() {
	utils.activerModale( this.msgTraduction( 'erreur-chargement' ) );
};
 
WidgetSaisie.prototype.prechargerForm = function( data ) {
	$( '#milieu' ).val( data.milieu );
	$( '#commune-nom' ).text( data.zoneGeo );
	if( data.hasOwnProperty( 'codeZoneGeo' ) ) {
	  // TODO: trouver un moyen qui fonctionne lorsqu'on aura d'autres référentiels que INSEE
	  $( '#commune-insee' ).text( data.codeZoneGeo.replace( 'INSEE-C:', '' ) );
	}
 
	if( data.hasOwnProperty( 'latitude' ) && data.hasOwnProperty( 'longitude' ) ) {
		// $cartoRemplacee = $( '#tb-geolocation' ),
		// suffixe = '',
		// layer = 'osm',
		// zoomInit = 18
		const typeLocalisation = $( '#top' ).data( 'type-loc' ),
			donnesResetCarto   = {
			latitude         : data.latitude,
			longitude        : data.longitude,
			typeLocalisation : typeLocalisation,
			zoom             : 18
		};
		this.transfererCarto( donnesResetCarto );
	}
};
 
// Ajouter Obs ****************************************************************/
/**
 * Retourne un Array contenant les valeurs des champs étendus
 */
WidgetSaisie.prototype.getObsChpSpecifiques = function() {
	const lthis = this,
		champs    = [],
		$thisForm = $( '#form-supp' ),
		elements  =
			'input[type=text]:not(.collect-other),'+
			'input[type=checkbox]:checked,'+
			'input[type=radio]:checked,'+
			'input[type=email],'+
			'input[type=number],'+
			'input[type=range],'+
			'input[type=date],'+
			'textarea,'+
			'.select',
		retour    = [];
 
	$( elements, $thisForm ).each( function() {
		if ( valOk( $( this ).val() ) && ( valOk( $( this ).attr( 'name' ) ) || valOk( $( this ).data( 'name' ) ) ) ) {
			const valeur = $( this ).val(),
				cle    = ( valOk( $( this ).attr( 'name' ) ) ) ? $( this ).attr( 'name' ) : $( this ).data( 'name' );
			if ( cle in champs ) {
				champs[cle] += ';' + valeur;
			} else {
				champs[cle] = valeur;
			}
		}
	});
	for ( let key in champs ) {
		retour.push({ 'cle' : key , 'valeur' : champs[key] });
	}
	if ( valOk( $( '#coord-lineaire' ).val() ) ) {
		retour.push({ 'cle' : 'coordonnees-rue-ou-lineaire' , 'valeur' : $( '#coord-lineaire' ).val() });
	}
	return retour;
};
 
WidgetSaisie.prototype.reinitialiserForm = function() {
	this.supprimerMiniatures();
	if( !this.especeImposee ) {
		$( '#taxon' ).val( '' );
		$( '#taxon' ).data( 'numNomSel', '' )
			.data( 'nomRet','' )
			.data( 'numNomRet', '' )
			.data( 'nt', '' )
			.data( 'famille', '' );
		if( this.isTaxonListe ) {
			$( '#taxon-liste' ).find( 'option' ).each( function() {
				if ( $( this ).hasClass( 'choisir' ) ) {
					$( this ).attr( 'selected', true );
				} else {
					$( this ).attr( 'selected', false );
				}
			});
			$( '#taxon-input-groupe' ).addClass( 'hidden' );
			$('#taxon-autre').val('');
		}
	}
	if ( valOk( $( '#form-supp' ) ) ) {
		$( '#form-supp' ).validate().resetForm();
	}
};
 
// Géolocalisation *************************************************************/
/**
 * Fonction handler de l'évenement location du module tb-geoloc
 */
WidgetSaisie.prototype.locationHandler = function( location ) {
	const locDatas = location.originalEvent.detail;
 
	if ( valOk( locDatas ) ) {
		console.log( locDatas );
 
		const geometry = JSON.stringify( locDatas.geometry ),
			altitude   = ( valOk( locDatas.elevation ) ) ? locDatas.elevation : '',
			pays       = ( valOk( locDatas.osmCountryCode ) ) ? locDatas.osmCountryCode.toUpperCase() : 'FR',
			rue        = ( valOk( locDatas.osmRoad ) ) ? locDatas.osmRoad : '';
		let latitude      = '',
			longitude     = '',
			coordLineaire = '',
			nomCommune    = '',
			communeInsee  = '';
 
		if ( valOk( locDatas.geometry.coordinates ) &&
			valOk( locDatas.centroid.coordinates ) &&
			valOk( locDatas.centroid.coordinates[0] ) &&
			valOk( locDatas.centroid.coordinates[1] )
		) {
			latitude = locDatas.centroid.coordinates[0];
			longitude = locDatas.centroid.coordinates[1];
		}
		if ( valOk( locDatas.inseeData ) ) {
			nomCommune = locDatas.inseeData.nom;
			communeInsee = ( valOk( locDatas.inseeData.code ) ) ? locDatas.inseeData.code : '';
		} else if ( valOk( locDatas.locality ) ) {
			nomCommune = locDatas.locality;
		} else if ( valOk( locDatas.locality ) ) {
			nomCommune = locDatas.osmCounty;
		}
		$( '#geometry' ).val( geometry );
		$( '#coord-lineaire' ).val( coordLineaire );
		$( '#latitude' ).val( latitude );
		$( '#longitude' ).val( longitude );
		$( '#commune-nom' ).val( nomCommune );
		$( '#commune-insee' ).val( communeInsee );
		$( '#altitude' ).val( altitude );
		$( '#pays' ).val( pays );
		$( '#station' ).val( rue );
		if ( valOk( $( '#latitude' ).val() ) && valOk( $( '#longitude' ).val() ) ) {
			$( '#geoloc' ).closest( '.control-group' ).removeClass( 'error' );
		} else {
			$( '#geoloc' ).closest( '.control-group' ).addClass( 'error' );
		}
	} else {
		console.warn( 'Error location' );
	}
}
 
// Form Validator *************************************************************/
WidgetSaisie.prototype.chpEtendusValidation = function() {
	const lthis = this,
		$thisForm = $( '#form-supp' ),
		elements  =
			'.checkbox,'+
			'.radio,'+
			'.checkboxes,'+
			'.select,'+
			'textarea,'+
			'input[type=text]:not(.collect-other),'+
			'input[type=email],'+
			'input[type=number],'+
			'input[type=range],'+
			'input[type=date]',
		speFields = ['checkbox','radio','checkboxes','select'],
		spefieldsCount = speFields.length,
		chpSuppValidation = {
			rules : {},
			messages : {},
			minmax : []
		},
		errors = {},
		namesListFields = [];
	let picked = '';
 
	$( elements, $thisForm ).each( function() {
		for( let fieldsClass = 0; spefieldsCount > fieldsClass; fieldsClass++ ) {
				const dataName = $( this ).data( 'name' );
 
			if ( valOk( $( this ).attr( 'required' ) ) && $( this ).hasClass( speFields[fieldsClass] ) && !valOk( chpSuppValidation.rules[ dataName ] ) ) {
				namesListFields.push( dataName );
				chpSuppValidation.rules[ dataName ] = { required : true };
				if ( valOk( $( '.other', $( this ) ) ) ) {
					picked = ( 'select' === speFields[fieldsClass] ) ? ':selected' : ':checked';
					chpSuppValidation.rules[ 'collect-other-' + dataName.replace( '[]', '' ) ] = {
						required : '#other-' + dataName.replace( '[]', '' ) + picked,
						minlength: 1
					};
					chpSuppValidation.messages[ 'collect-other-' + dataName.replace( '[]', '' ) ] = false;
				}
				chpSuppValidation.rules[ dataName ]['listFields'] = true;
				chpSuppValidation.messages[ dataName ] = 'Ce champ est requis :\nVeuillez choisir une option, ou entrer une valeur autre valide.';
				errors[dataName] = '.' + speFields[fieldsClass];
			}
		}
		if ( valOk( $( this ).attr( 'name' ) ) && valOk ( $( this ).attr( 'required' ) ) && 0 > $.inArray( $( this ).attr( 'name' ) , namesListFields ) ) {
			chpSuppValidation.rules[ $( this ).attr( 'name' ) ] = { required : true, minlength: 1 };
			if(
				( valOk( $( this ).attr( 'type' ), true, 'number' ) || valOk( $( this ).attr( 'type' ), true, 'range' ) ) &&
				( valOk( $( this )[0].min ) || valOk( $( this )[0].max ) )
			) {
				chpSuppValidation.rules[ $( this ).attr('name') ]['minMaxOk'] = true;
				chpSuppValidation.messages[ $( this ).attr('name') ] = lthis.validerMinMax( $( this )[0] ).message;
			}
		}
	});
	if ( valOk( chpSuppValidation.rules ) ) {
		$.each( chpSuppValidation.rules, function( key ) {
			if ( !valOk( chpSuppValidation.messages[key] ) ) {
				chpSuppValidation.messages[key] = 'Ce champ est requis :\nVeuillez entrer une valeur valide.';
			}
		});
		if ( 0 < Object.keys( errors ).length ) {
			chpSuppValidation['errors'] = errors;
		}
	}
	return chpSuppValidation;
};
 
WidgetSaisie.prototype.validerMinMax = function( element ) {
	const minCond  = parseFloat( element.value ) >= parseFloat( element.min ),
		maxCond    = parseFloat( element.value ) <= parseFloat( element.max ),
		returnMnMx = { cond : true , message : '' };
	let mnMxCond    = new Boolean(),
		messageMnMx = 'La valeur entrée doit être';
 
	if(
		( valOk( element.type, true, 'number' ) || valOk( element.type, true, 'range' ) ) &&
		( valOk( element.min ) || valOk( element.max ) )
	) {
		if ( element.min && element.max ) {
			messageMnMx += ' comprise entre ' + element.min + ' et ' + element.max;
			mnMxCond     = ( minCond && maxCond );
		} else if ( element.min ) {
			messageMnMx += ' supérieure à ' + element.min;
			mnMxCond     = minCond;
		} else {
			messageMnMx += ' inférieure à ' + element.max;
			mnMxCond     = maxCond;
		}
		returnMnMx.cond    = mnMxCond;
		returnMnMx.message = messageMnMx;
	}
	return returnMnMx;
 
};
 
WidgetSaisie.prototype.definirReglesFormValidator = function() {
	const lthis = this,
		formSuppValidation = this.chpEtendusValidation();
 
	$( '#form-supp' ).validate({
		onclick : function( element ) {
			if (
				(
					valOk( element.type, true, 'checkbox' ) ||
					valOk( element.type, true, 'radio' )
				) &&
				(
					!valOk( $( '.' + $( element ).attr( 'name' ).replace( '[]', '' ) + ':checked' ) ) ||
					valOk( $( '.' + $( element ).attr( 'name' ).replace( '[]', '' ) + ':not(.other):checked' ) ) ||
					!valOk( $( '#other-' + $( element ).attr( 'name' ).replace( '[]', '' ) ) ) ||
					$( '#other-' + $( element ).attr( 'name' ).replace( '[]', '' ) ).is( ':checked' ) ||
					(
						$( '#other-' + $( element ).attr( 'name' ).replace( '[]', '' ) ).is( ':checked' ) &&
						$( element ).closest( '.control-group' ).hasClass('error')
					)
				)
			) {
				$( element ).valid();
				if ( $( element ).valid() ) {
					$( element ).closest( '.control-group' ).removeClass( 'error' );
					$( element ).next( $( 'span.error' ) ).remove();
				} else {
					$( element ).closest( '.control-group' ).addClass( 'error' );
				}
			}
			return false;
		},
		rules : formSuppValidation.rules,
		messages : formSuppValidation.messages,
		errorPlacement : function( error , element ) {
			if ( 0 < Object.keys( formSuppValidation.errors ).length ) {
				const errorsKeys = Object.keys( formSuppValidation.errors );
				let thisKey    = '',
					errorsFlag = true;
 
				for ( let i = 0 ; i < errorsKeys.length ; i++ ) {
					thisKey = errorsKeys[i];
					if( $( element ).attr( 'name' ) === thisKey ) {
						$( formSuppValidation.errors[thisKey] ).append( error );
						errorsFlag = false;
					}
				}
				if ( errorsFlag ) {
					error.insertAfter( element );
				}
			} else {
				error.insertAfter( element );
			}
		}
	});
	$( '#form-supp .select' ).change( function() {
		$( this ).valid();
	});
	$( 'input[type=date]' ).on( 'input', function() {
		$( this ).valid();
	});
	// Validation Taxon si pas de miniature
	$( '#taxon' ).on( 'change', function() {
		const images = valOk( $( '#miniatures .miniature' ) );
 
		lthis.validerTaxonImage( valOk( $( this ).val() ), images );
	});
	// Validation miniatures avec MutationObserver
	this.surPresenceAbsenceMiniature();
	$( '#form-observation' ).validate({
		rules : {
			date_releve : {
				required : true,
				'dateCel' : true
			},
			latitude : {
				required : true,
				minlength : 1,
				range : [-90, 90]
			},
			longitude : {
				required : true,
				minlength : 1,
				range : [-180, 180]
			}
		}
	});
	$( '#form-observateur' ).validate({
		rules : {
			courriel : {
				required : true,
				email : true,
				'userEmailOk' : true
			},
			courriel_confirmation : {
				required : true,
				equalTo : '#courriel'
			}
		}
	});
	$( '#connexion,#inscription,#bouton-anonyme' ).on( 'click', function( event ) {
		$( '.nav.control-group' ).removeClass( 'error' );
	});
};
 
WidgetSaisie.prototype.validerTaxonImage = function( taxon = false, images = false ) {
	const taxonOuImage = images || taxon;
 
	if ( taxonOuImage ) {
		this.masquerPanneau( '#dialogue-taxon-or-image' );
		$( '#bloc-taxon' ).removeClass( 'error' )
			.find( 'span.error' ).hide();
		$( '#fichier' ).parent( 'label.label-file' ).removeClass( 'error' );
		$( '#photos-conteneur').removeClass( 'error' ).find( 'span.error' ).hide();
	} else {
		this.afficherPanneau( '#dialogue-taxon-or-image' );
		$( '#bloc-taxon' ).addClass( 'error' )
			.find( 'span.error' ).show();
		$( '#fichier' ).parent( 'label.label-file' ).addClass( 'error' );
		$( '#photos-conteneur').addClass( 'error' ).find( 'span.error' ).show();
	}
	return taxonOuImage;
};
 
WidgetSaisie.prototype.surPresenceAbsenceMiniature = function() {
	const lthis = this;
	// voir : https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver/disconnect
	// Selectionne le noeud dont les mutations seront observées
	const targetNode = document.getElementById( 'miniatures' );
	// Fonction callback à éxécuter quand une mutation est observée
	const callback = mutationsList => {
		let taxon;
 
		for( let mutation of mutationsList ) {
			taxon = valOk( $( '#taxon' ).val() );
			images = ( 0 < mutation.target.childElementCount );
			lthis.validerTaxonImage( taxon, images );
		}
	};
	// Créé une instance de l'observateur lié à la fonction de callback
	this.observer = new MutationObserver( callback );
	// Commence à observer le noeud cible pour les mutations précédemment configurées
	this.observer.observe( targetNode, { childList: true } );
};
 
WidgetSaisie.prototype.validerForm = function() {
	const observateur = ( $( '#form-observateur' ).valid() && $( '#courriel' ).valid() && $( '#courriel_confirmation' ).valid() ),
		obs           = $( '#form-observation' ).valid(),
		geoloc        = ( valOk( $( '#latitude' ).val() ) && valOk( $( '#longitude' ).val() ) ) ,
		images        = valOk( $( '#miniatures .miniature' ) ),
		taxon         = valOk( $( '#taxon' ).val() ),
		// validation et panneau taxon/images
		taxonOuImage  = this.validerTaxonImage( taxon, images );
	let chpsSupp = true;
 
	if ( valOk( $( '#form-supp' ) ) ) {
		chpsSupp = ( function () {
			let otherFlag = $( '#form-supp' ).valid();
 
			if( valOk( $( '.other', $( '#form-supp' ) ) ) ) {
				$( '.other', $( '#form-supp' ) ).each( function() {
					const picked = ( $( this ).data( 'element' ) !== 'select' ) ? ':checked' : ':selected';
 
						if ( $( this ).is( picked ) && valOk( $( this ).val(), true, 'other' ) ) {
							otherFlag = false;
						}
				});
			}
 
			return otherFlag;
		})();
	}
	// panneau geoloc
	if ( geoloc ) {
		this.masquerPanneau( '#dialogue-geoloc-ko' );
		$( '#geoloc-datas' ).closest( '.control-group' ).removeClass( 'error' );
	} else{
		this.afficherPanneau( '#dialogue-geoloc-ko' );
		$( '#geoloc-datas' ).closest( '.control-group' ).addClass( 'error' );
	}
	// panneau observateur
	if ( observateur ) {
		this.masquerPanneau( '#dialogue-utilisateur-non-identifie' );
		$( '.nav.control-group' ).removeClass( 'error' );
	} else {
		this.afficherPanneau( '#dialogue-utilisateur-non-identifie' );
		$( '.nav.control-group' ).addClass( 'error' );
	}
	return ( observateur && obs && geoloc && taxonOuImage && chpsSupp );
};
 
// Referentiel ****************************************************************/
// N'est pas utilisé en cas de taxon-liste
WidgetSaisie.prototype.surChangementReferentiel = function() {
	this.nomSciReferentiel = $( '#referentiel' ).val();
	//réinitialise taxon.val
	$( '#taxon' ).val( '' );
	$( '#taxon' ).data( 'numNomSel', '' );
};
 
 
$( document ).ready( function() {
	const widget = new WidgetSaisie();
	widget.init();
	// Fonctions de Style et Affichage des éléments "spéciaux"
	utils.init();
});

Subversion Repositories eFlore/Applications.cel

(root)/trunk/widget/modules/saisie/squelettes/js/WidgetSaisie.js – Rev 3844 → 3850

Rev 3844		Rev 3850
1	`import {WidgetsSaisiesCommun,utils} from './WidgetsSaisiesCommun.js';`	1	`import {WidgetsSaisiesCommun,utils} from './WidgetsSaisiesCommun.js';`
2	`import {valOk} from './Utils.js';`	2	`import {valOk} from './Utils.js';`
3		3
4	`/**`	4	`/**`
5	`* Constructeur WidgetSaisie par défaut`	5	`* Constructeur WidgetSaisie par défaut`
6	`*/`	6	`*/`
7	`function WidgetSaisie( ) {`	7	`function WidgetSaisie( ) {`
8	`if ( valOk(widgetProp) ) {`	8	`if ( valOk(widgetProp) ) {`
9	`this.urlWidgets = widgetProp.urlWidgets;`	9	`this.urlWidgets = widgetProp.urlWidgets;`
10	`this.projet = widgetProp.projet;`	10	`this.projet = widgetProp.projet;`
11	`this.idProjet = widgetProp.idProjet;`	11	`this.idProjet = widgetProp.idProjet;`
12	`this.tagsMotsCles = widgetProp.tagsMotsCles;`	12	`this.tagsMotsCles = widgetProp.tagsMotsCles;`
13	`this.mode = widgetProp.mode;`	13	`this.mode = widgetProp.mode;`
14	`this.langue = widgetProp.langue;`	14	`this.langue = widgetProp.langue;`
15	`this.serviceAnnuaireIdUrl = widgetProp.serviceAnnuaireIdUrl;`	15	`this.serviceAnnuaireIdUrl = widgetProp.serviceAnnuaireIdUrl;`
16	`this.serviceNomCommuneUrl = widgetProp.serviceNomCommuneUrl;`	16	`this.serviceNomCommuneUrl = widgetProp.serviceNomCommuneUrl;`
17	`this.serviceNomCommuneUrlAlt = widgetProp.serviceNomCommuneUrlAlt;`	17	`this.serviceNomCommuneUrlAlt = widgetProp.serviceNomCommuneUrlAlt;`
18	`this.debug = widgetProp.debug;`	18	`this.debug = widgetProp.debug;`
19	`this.html5 = widgetProp.html5;`	19	`this.html5 = widgetProp.html5;`
20	`this.serviceSaisieUrl = widgetProp.serviceSaisieUrl;`	20	`this.serviceSaisieUrl = widgetProp.serviceSaisieUrl;`
21	`this.serviceObsUrl = widgetProp.serviceObsUrl;`	21	`this.serviceObsUrl = widgetProp.serviceObsUrl;`
22	`this.chargementImageIconeUrl = widgetProp.chargementImageIconeUrl;`	22	`this.chargementImageIconeUrl = widgetProp.chargementImageIconeUrl;`
23	`this.pasDePhotoIconeUrl = widgetProp.pasDePhotoIconeUrl;`	23	`this.pasDePhotoIconeUrl = widgetProp.pasDePhotoIconeUrl;`
24	`this.autocompletionElementsNbre = widgetProp.autocompletionElementsNbre;`	24	`this.autocompletionElementsNbre = widgetProp.autocompletionElementsNbre;`
25	`this.serviceAutocompletionNomSciUrl = widgetProp.serviceAutocompletionNomSciUrl;`	25	`this.serviceAutocompletionNomSciUrl = widgetProp.serviceAutocompletionNomSciUrl;`
26	`this.serviceAutocompletionNomSciUrlTpl = widgetProp.serviceAutocompletionNomSciUrlTpl;`	26	`this.serviceAutocompletionNomSciUrlTpl = widgetProp.serviceAutocompletionNomSciUrlTpl;`
27	`this.dureeMessage = widgetProp.dureeMessage;`	27	`this.dureeMessage = widgetProp.dureeMessage;`
28	`this.obsMaxNbre = widgetProp.obsMaxNbre;`	28	`this.obsMaxNbre = widgetProp.obsMaxNbre;`
29	`this.tagImg = widgetProp.tagImg;`	29	`this.tagImg = widgetProp.tagImg;`
30	`this.tagObs = widgetProp.tagObs;`	30	`this.tagObs = widgetProp.tagObs;`
31	`this.obsId = widgetProp.obsId;`	31	`this.obsId = widgetProp.obsId;`
32	`this.nomSciReferentiel = widgetProp.nomSciReferentiel;`	32	`this.nomSciReferentiel = widgetProp.nomSciReferentiel;`
33	`this.especeImposee = widgetProp.especeImposee;`	33	`this.especeImposee = widgetProp.especeImposee;`
34	`this.infosEspeceImposee = widgetProp.infosEspeceImposee;`	34	`this.infosEspeceImposee = widgetProp.infosEspeceImposee;`
35	`this.referentielImpose = widgetProp.referentielImpose;`	35	`this.referentielImpose = widgetProp.referentielImpose;`
36	`this.isTaxonListe = widgetProp.isTaxonListe;`	36	`this.isTaxonListe = widgetProp.isTaxonListe;`
37	`}`	37	`}`
38	`this.urlRacine = window.location.origin;`	38	`this.urlRacine = window.location.origin;`
39	`this.obsNbre = 0;`	39	`this.obsNbre = 0;`
40	`this.nbObsEnCours = 1;`	40	`this.nbObsEnCours = 1;`