| New file |
|---|
| 0,0 → 1,746 |
|---|
| 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 ); |
| $( '#latitude, #longitude' ).valid(); |
| 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 |
| // et gestion des messages d'erreur taxon et images en fonction de la certitude |
| $( '#taxon, #certitude' ).on( 'change', function() { |
| lthis.validerTaxonRequis( valOk( $( '#taxon' ).val() ) ); |
| }); |
| // 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.validerCertitudeTaxonImage = function( hasTaxon = false, hasImages = false ) { |
| if( 'certain' === $( '#certitude' ).val() ) { |
| return this.validerTaxonRequis( hasTaxon ); |
| } else { |
| return this.validerImageRequise( hasImages ); |
| } |
| }; |
| |
| WidgetSaisie.prototype.validerTaxonRequis = function( hasTaxon = false ) { |
| const taxonEstRequis = 'certain' === $( '#certitude' ).val(); |
| |
| $( '#photos-conteneur').removeClass( 'error' ) |
| .find( 'span.error' ).hide(); |
| |
| if ( !hasTaxon && taxonEstRequis ) { |
| this.afficherPanneau( '#dialogue-taxon-or-image' ); |
| $( '#bloc-taxon' ).addClass( 'error' ) |
| .find( 'span.error' ).show(); |
| } else { |
| this.masquerPanneau( '#dialogue-taxon-or-image' ); |
| $( '#bloc-taxon' ).removeClass( 'error' ) |
| .find( 'span.error' ).hide(); |
| } |
| |
| if ( taxonEstRequis ) { |
| return hasTaxon; |
| } |
| }; |
| |
| WidgetSaisie.prototype.validerImageRequise = function( hasImages = false ) { |
| $( '#bloc-taxon' ).removeClass( 'error' ) |
| .find( 'span.error' ).hide(); |
| |
| if ( hasImages ) { |
| this.masquerPanneau( '#dialogue-taxon-or-image' ); |
| $( '#fichier' ).parent( 'label.label-file' ).removeClass( 'error' ); |
| $( '#photos-conteneur').removeClass( 'error' ).find( 'span.error' ).hide(); |
| } else { |
| this.afficherPanneau( '#dialogue-taxon-or-image' ); |
| $( '#fichier' ).parent( 'label.label-file' ).addClass( 'error' ); |
| $( '#photos-conteneur').addClass( 'error' ).find( 'span.error' ).show(); |
| } |
| return hasImages; |
| }; |
| |
| 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 => { |
| for( let mutation of mutationsList ) { |
| lthis.validerCertitudeTaxonImage( |
| valOk( $( '#taxon' ).val() ), |
| 0 < mutation.target.childElementCount |
| ); |
| } |
| }; |
| // 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() ) ) , |
| // validation et panneau taxon/images |
| certitudeTaxonImage = this.validerCertitudeTaxonImage( |
| valOk( $( '#taxon' ).val() ), |
| valOk( $( '#miniatures .miniature' ) ) |
| ); |
| 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 && certitudeTaxonImage && 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(); |
| }); |