New file |
0,0 → 1,526 |
function UtilsLg() { |
// this.infosUtilisateur = null; |
this.langue = $( 'body' ).data( 'lang' ); |
this.urlRacine = window.location.origin; |
// système de traduction minimaliste |
this.msgs = { |
fr: { |
'arbre' : 'Arbre', |
'dupliquer' : 'Dupliquer', |
'saisir-lichens' : 'Saisir les lichens', |
'format-non-supporte' : 'Le format de fichier n\'est pas supporté, les formats acceptés sont', |
'image-deja-chargee' : 'Cette image a déjà été utilisée', |
'date-incomplete' : 'Format : jj/mm/aaaa.', |
'observations-transmises' : 'observations transmises', |
'supprimer-observation-liste' : 'Supprimer cette observation de la liste à transmettre', |
'milieu' : 'Milieu', |
'commentaires' : 'Commentaires', |
'non-lie-au-ref' : 'non lié au référentiel', |
'obs-le' : 'le', |
'non-connexion' : 'Veuillez entrer votre login et votre mot de passe', |
'obs-numero' : 'Observation n°', |
'erreur' : 'Erreur', |
'erreur-inconnue' : 'Erreur inconnue', |
'erreur-image' : 'Erreur lors du chargement des images', |
'erreur-ajax' : 'Erreur Ajax', |
'erreur-chargement' : 'Erreur lors du chargement de l\'observation', |
'erreur-chargement-obs-utilisateur' : 'Erreur lors du chargement des observations de cet utilisateur', |
'erreur-formulaire' : 'Erreur: impossible de charger le formulaire', |
'lieu-obs' : 'observé à', |
'lieu-dit' : 'Lieu-dit', |
'station' : 'Station', |
'date-rue' : 'Un releve existe dejà à cette date pour cette rue.', |
'rechargement-page' : 'Êtes vous sûr de vouloir quiter la page?\nLes observations saisies mais non transmises seront perdues.' |
}, |
en: { |
'arbre' : 'Tree', |
'dupliquer' : 'Duplicate', |
'saisir-lichens' : 'Enter the lichens', |
'format-non-supporte' : 'The file format is not supported, the accepted formats are', |
'image-deja-chargee' : 'This image has already been used', |
'date-incomplete' : 'Format: dd/mm/yyyy.', |
'observations-transmises' : 'observations transmitted', |
'supprimer-observation-liste' : 'Delete this observation from the list to be transmitted', |
'milieu' : 'Environment', |
'commentaires' : 'Comments', |
'non-lie-au-ref' : 'unrelated to the referencial ', |
'obs-le' : 'the', |
'non-connexion' : 'Please enter your login and password', |
'obs-numero' : 'Observation number ', |
'erreur' : 'Error', |
'erreur-inconnue' : 'Unknown error', |
'erreur-image' : 'Error loading the images', |
'erreur-ajax' : 'Ajax Error', |
'erreur-chargement' : 'Error loading the observation', |
'erreur-chargement-obs-utilisateur' : 'Error loading this user\'s observations', |
'erreur-formulaire' : 'Error: couldn\'t load form', |
'lieu-obs' : 'observed at', |
'lieu-dit' : 'Locality', |
'station' : 'Place', |
'date-rue' : 'A record already exists on this date for this street', |
'rechargement-page' : 'Are you sure you want to leave the page?\nAll untransmitted observations will be lost.' |
} |
}; |
} |
|
|
UtilsLg.prototype.chargerForm = function( nomSquelette, lgFormObj ) { |
const lthis = this; |
var urlSqueletteArbres = this.urlRacine + '/widget:cel:lg?squelette=' + nomSquelette; |
|
$.ajax({ |
url: urlSqueletteArbres, |
type: 'get', |
success: function( squelette ) { |
if ( lthis.valOk( squelette ) ) { |
lgFormObj.chargerSquelette( squelette, nomSquelette ); |
} |
}, |
error: function() { |
$( '#charger-form' ).html( lthis.msgTraduction( 'erreur-formulaire' ) ); |
} |
}); |
}; |
|
UtilsLg.prototype.chargerFormLichens = function( squelette, nomSquelette ) { |
if ( this.valOk( $( '#releve-data' ).val() ) ) { |
$( '#charger-form' ).html( squelette ); |
const releveDatas = $.parseJSON( $( '#releve-data' ).val() ); |
const nbArbres = releveDatas.length -1; |
|
for ( var i = 1; i <= nbArbres ; i++ ) { |
$( '#choisir-arbre' ).append( |
'<option value="' + i + '">'+ |
this.msgTraduction( 'arbre' ) + ' ' + i + |
'</option>' |
); |
} |
} |
}; |
|
/** |
* Stocke en Json les valeurs du relevé dans en value d'un input hidden |
*/ |
UtilsLg.prototype.formaterReleveData = function( releveDatas ) { |
var releve = [], |
obs = releveDatas.obs, |
obsE = releveDatas.obsE; |
|
releve[0] = { |
utilisateur : obs.ce_utilisateur, |
date : obs.date_observation, |
rue : obsE.rue, |
'commune-nom' : obs.zone_geo, |
'commune-insee' : obs.ce_zone_geo, |
pays : obs.pays, |
latitude : obs.latitude, |
longitude : obs.longitude, |
altitude : obs.altitude, |
commentaires : obs.commentaire |
}; |
return releve; |
}; |
|
/** |
* Stocke en Json les valeurs d'une obs |
*/ |
UtilsLg.prototype.formaterArbreData = function( arbresDatas ) { |
var retour = {}, |
obs = arbresDatas.obs, |
obsE = arbresDatas.obsE, |
miniatureImg = []; |
if( this.valOk( obs['miniature-img'] ) ) { |
miniatureImg = obs['miniature-img']; |
} else if ( this.valOk( obsE['miniature-img'] ) ) { |
miniatureImg = $.parseJSON( obsE['miniature-img'] ); |
} |
|
retour = { |
'date_rue_commune' : obs.date_observation + obsE.rue + obs.zone_geo, |
'num-arbre' : obsE.num_arbre, |
'id_observation' : obs.id_observation, |
'taxon' : { |
'numNomSel' : obs.nom_sel_nn, |
'value' : obs.nom_sel, |
'nomRet' : obs.nom_ret, |
'numNomRet' : obs.nom_ret_nn, |
'nt' : obs.nt, |
'famille' : obs.famille, |
}, |
'miniature-img' : miniatureImg, |
'referentiel' : obs.nom_referentiel, |
'certitude' : obs.certitude, |
'latitude-arbres' : obsE['latitude-arbres'], |
'longitude-arbres' : obsE['longitude-arbres'], |
'altitude-arbres' : obsE['altitude-arbres'], |
'circonference' : obsE.circonference, |
'surface-pied' : obsE['surface-pied'], |
'equipement-pied-arbre' : obsE['equipement-pied-arbre'], |
'tassement' : obsE.tassement, |
'dejections' : obsE.dejections, |
'face-ombre' : obsE['face-ombre'], |
'com-arbres' : obsE['com-arbres'] |
}; |
return retour; |
}; |
|
UtilsLg.prototype.fournirDate = function( dateObs ) { |
if ( /^[0-9]{2}\/[0-9]{2}\/[0-9]{4}$/.test( dateObs ) ) { |
return dateObs; |
} else if ( /^[0-9]{4}-[0-9]{2}-[0-9]{2}$/.test( dateObs ) ) { |
var dateArray = dateObs.split( '-' ); |
return dateArray[2] + '/' + dateArray[1] + '/' + dateArray[0] |
} else { |
console.log( 'erreur date : ' + dateObs ) |
} |
}; |
|
/** |
* Si la langue est définie dans this.langue, et si des messages sont définis |
* dans this.msgs, tente de trouver le message dont la clé est [cle] dans la |
* langue en cours. S'il n'est pas trouvé, retourne la version française (par |
* défaut); si celle-ci n'exite pas, retourne "N/A". |
*/ |
UtilsLg.prototype.msgTraduction = function( cle ) { |
var msg = 'N/A'; |
|
if ( this.msgs ) { |
if ( this.langue in this.msgs && cle in this.msgs[this.langue] ) { |
msg = this.msgs[this.langue][cle]; |
} else if ( cle in this.msgs['fr'] ) { |
msg = this.msgs['fr'][cle]; |
} |
} |
return msg; |
}; |
|
/** |
* Permet à la fois de vérifier qu'une valeur ou objet existe et n'est pas vide |
* et de comparer à une autre valeur : |
* Vérifie qu'une variable ou objet n'est pas : vide, null, undefined, NaN |
* Si comparer est défini on le compare à valeur en fonction de sensComparaison |
* Un booléen est une variable valide : on retourne true |
* @param { string || number || object || undefined } valeur |
* @param { boolean } sensComparaison : true = rechercher, false = refuser |
* @param { string || number || object || undefined || boolean } comparer :valeur à comparer |
* @returns {boolean} |
*/ |
UtilsLg.prototype.valOk = function( valeur, sensComparaison = true, comparer = undefined ) { |
var retour = true; |
if ( 'boolean' !== typeof valeur ) { |
switch( typeof valeur ) { |
case 'string' : |
retour = ( '' !== valeur ); |
break; |
case 'number' : |
retour = ( NaN !== valeur ); |
break; |
case 'object' : |
retour = ( null !== valeur && undefined !== valeur && !$.isEmptyObject( valeur ) ); |
if ( null !== valeur && undefined !== valeur.length ) { |
retour = ( retour && 0 < valeur.length ); |
} |
break; |
case 'undefined' : |
default : |
retour = false; |
} |
if ( retour && comparer !== undefined ) { |
var resultComparaison = ( comparer === valeur ); |
retour = ( sensComparaison ) ? resultComparaison : !resultComparaison ; |
} |
|
return retour; |
} else { |
// Un booléen est une valeur valable |
return true; |
} |
} |
|
// Lib hors objet |
|
/************************************* |
* Fonctions de Style et Affichage * |
* des éléments "spéciaux" * |
*************************************/ |
|
// Logique d'affichage pour le input type=file |
function inputFile() { |
// Initialisation des variables |
var $fileInput = $( '.input-file' ), |
$button = $( '.label-file' ); |
// Action lorsque la "barre d'espace" ou "Entrée" est pressée |
$( '#charger-form' ).on( 'keydown', '.label-file', function( event ) { |
if ( event.keyCode == 13 || event.keyCode == 32 ) { |
$( '#' + $( this ).attr( 'for' ) + '.input-file' ).click(); |
} |
}); |
} |
|
// Style et affichage des list-checkboxes |
function inputListCheckbox() { |
// On écoute le click sur une list-checkbox ('.selectBox') |
// à tout moment de son insertion dans le dom |
// _ S'assurer de bien viser la bonne list-checkbox |
// _ Au click sur un autre champ remballer la list-checkbox |
$( document ).click( function( event ) { |
var target = event.target; |
|
if ( !$( target ).is( '.overSelect' ) && 0 === $( target ).closest( '.checkboxes' ).length ) { |
$( '.checkboxes' ).each( function () { |
$( this ).addClass( 'hidden' ); |
}); |
$( '.selectBox select.focus', '#zone-appli' ).each( function() { |
$( this ).removeClass( 'focus' ); |
}); |
} |
}); |
$( '#zone-appli' ).on( 'click' , '.selectBox' , function() { |
// afficher/cacher le volet des checkboxes et focus |
$( this ).next().toggleClass( 'hidden' ); |
$( this ).find( 'select' ).toggleClass( 'focus' ); |
|
// Cacher le volet des autres checkboxes et retirer leur focus |
var $checkboxes = $( this ).next(), |
count = $( '.checkboxes' ).length; |
|
for ( var i = 0; i < count; i++ ) { |
if ( $( '.checkboxes' )[i] !== $checkboxes[0] && !$checkboxes.hasClass( 'hidden' ) ) { |
var $otherListCheckboxes = $( '.checkboxes' )[i]; |
if ( !$otherListCheckboxes.classList.contains( 'hidden' ) ) { |
$otherListCheckboxes.classList.add( 'hidden' ); |
} |
if( $otherListCheckboxes.previousElementSibling.firstElementChild.classList.contains( 'focus' ) ) { |
$otherListCheckboxes.previousElementSibling.firstElementChild.classList.remove( 'focus' ); |
} |
} |
} |
}); |
} |
|
// Style et affichage des input type="range" |
function inputRangeDisplayNumber() { |
$( 'input[type="range"]','#charger-form' ).each( function() { |
$( this ).siblings( '.range-live-value' ).text( $( this ).val() ); |
}); |
$( '#top' ).on( 'input' , 'input[type="range"]' , function () { |
$( this ).siblings( '.range-live-value' ).text( $( this ).val() ); |
}); |
$( '#top' ).on( 'click', '#ajouter-obs', function() { |
$( '.range-live-value' ).each( function() { |
var $this = $( this ); |
$this.text( '' ); |
}); |
}); |
} |
|
// Activation/Desactivation et contenu de la modale Bootstrap |
// https://getbootstrap.com/docs/3.3/javascript/#modals |
function newFieldsHelpModal() { |
$( '#zone-appli' ).on( 'click' , '.help-button' , function ( event ) { |
var thisFieldKey = $( this ).data( 'key' ), |
fileMimeType = $( this ).data( 'mime-type' ); |
|
// Titre |
$( '#help-modal-label' ).text( 'Aide pour : ' + $( this ).data( 'name' ) ); |
if( fileMimeType.match( 'image' ) ) { |
var extention = fileMimeType.replace( /(?:imag)?e\/?/g , '' ); |
// var extention = 'jpg'; |
$( '#print_content' ).append( '<img src="' + CHEMIN_FICHIERS + thisFieldKey + '.' + extention + '" style="max-width:100%" alt="' + thisFieldKey + '" />' ); |
} |
// Sortie avec la touche escape |
$( '#help-modal' ).modal( { keyboard : true } ); |
// Affichage |
$( '#help-modal' ).modal({ show: true }); |
// Remplacer l'autofocus qui ne fonctionne plus en HTML5 |
// Message dans la doc de bootstrap : |
// Due to how HTML5 defines its semantics, |
// the autofocus HTML attribute has no effect in Bootstrap modals. |
// To achieve the same effect, use some custom JavaScript |
$( '#help-modal' ).on( 'shown.bs.modal' , function () { |
$( '#myInput' ).trigger( 'focus' ); |
}) |
// Réinitialisation |
$( '#help-modal' ).on( 'hidden.bs.modal' , function () { |
$( '#help-modal-label' ).text(); |
$( '#print_content' ).empty(); |
}) |
}); |
} |
|
// Activation/Desactivation et contenu de la modale Bootstrap |
// https://getbootstrap.com/docs/3.3/javascript/#modals |
function projetHelpModale() { |
$( '#top' ).on ( 'click', '#info-button', function ( event ) { |
var fileMimeType = $( this ).data( 'mime-info' ); |
|
// Titre |
$( '#help-modal-label' ).text( 'Aide du projet : ' + $( '#titre-projet' ).text() ); |
if( fileMimeType.match( 'image' ) ) { |
var extention = fileMimeType.replace( /(?:imag)?e\/?/g , '' ); |
$( '#print_content' ).append( '<img src="' + CHEMIN_FICHIERS + 'info.' + extention + '" style="max-width:100%" alt="info projet" />' ); |
} |
// Sortie avec la touche escape |
$( '#help-modal' ).modal( { keyboard : true } ); |
// Affichage |
$( '#help-modal' ).modal({ show: true }); |
// Remplacer l'autofocus qui ne fonctionne plus en HTML5 |
// Message dans la doc de bootstrap : |
// Due to how HTML5 defines its semantics, |
// the autofocus HTML attribute has no effect in Bootstrap modals. |
// To achieve the same effect, use some custom JavaScript |
$( '#help-modal' ).on( 'shown.bs.modal' , function () { |
$( '#myInput' ).trigger( 'focus' ); |
}) |
// Réinitialisation |
$( '#help-modal' ).on( 'hidden.bs.modal' , function () { |
$( '#help-modal-label' ).text(); |
$( '#print_content' ).empty(); |
}); |
|
}); |
} |
|
// Faire apparaitre un champ text "Autre" |
function onOtherOption() { |
const PREFIX = 'collect-other-'; |
|
// Ajouter un champ texte pour "Autre" |
function optionAdd( otherId, $target, element, dataName ) { |
$target.after( |
'<div class="control-group">'+ |
'<label'+ |
' for="' + otherId + '"'+ |
' class="' + otherId + '"'+ |
'>'+ |
'Autre option :'+ |
'</label>'+ |
'<input'+ |
' type="text"'+ |
' id="' + otherId + '"'+ |
' name="' + otherId + '"'+ |
' class="collect-other form-control"'+ |
' data-name="' + dataName + '"'+ |
' data-element="' + element + '"'+ |
'>'+ |
'</div>' |
); |
$( '#' + otherId ).focus(); |
} |
|
// Supprimer un champ texte pour "Autre" |
function optionRemove( otherId ) { |
$( '.' + otherId + ', #' + otherId ).remove(); |
} |
|
$( '.other', '#form-arbre' ).each( function() { |
if( $( this ).hasClass( 'is-select' ) ) { |
var dataName = $( this ).data( 'name' ), |
otherId = PREFIX + dataName; |
|
// Insertion du champ "Autre" après les boutons |
optionAdd( otherId, $( this ).parent( '.add-field-select' ), 'select', dataName ); |
} else if ( $( this ).is( ':checked' ) ) { |
var dataName = $( this ).data( 'name' ), |
otherId = PREFIX + dataName, |
element = $( this ).data( 'element' ); |
// Insertion du champ "Autre" après les boutons |
optionAdd( otherId, $( this ).parent( 'label' ), element, dataName ); |
} |
}); |
|
$( '#charger-form' ).on( 'change', '.select', function () { |
var dataName = $( this ).data( 'name' ), |
otherId = PREFIX + dataName; |
|
if( 'other' === $( this ).val() ) { |
// Insertion du champ "Autre" après les boutons |
optionAdd( otherId, $( this ).parent( '.add-field-select' ), 'select', dataName ); |
} else { |
// Suppression du champ autre |
optionRemove( otherId ); |
$( this ).find( '.other' ).val( 'other' ); |
} |
}); |
|
$( '#charger-form' ).on( 'change', 'input[type=radio]', function () { |
var dataName = $( this ).data( 'name' ), |
otherId = PREFIX + dataName; |
|
if( 'other' === $( this ).val() ) { |
// Insertion du champ "Autre" après les boutons |
optionAdd( otherId, $( this ).parent( 'label' ), 'radio', dataName ); |
} else { |
// Suppression du champ autre |
optionRemove( otherId ); |
$( this ).closest( '.radio' ).find( '.other' ).val( 'other' ); |
} |
}); |
|
$( '#charger-form' ).on( 'click', '.list-checkbox .other,.checkbox .other', function () { |
var dataName = $( this ).data( 'name' ), |
otherId = PREFIX + dataName, |
element = $( this ).data( 'element' ); |
|
if( $( this ).is( ':checked' ) ) { |
// Insertion du champ "Autre" après les boutons |
optionAdd( otherId, $( this ).parent( 'label' ), element, dataName ); |
} else { |
// Suppression du champ autre |
optionRemove( otherId ); |
$( this ).val( 'other' ); |
} |
}); |
} |
|
function collectOtherOption() { |
$( '#charger-form' ).on( 'change', '.collect-other', function () { |
var otherIdSuffix = $( this ).data( 'name' ).replace( '[]', '' ); |
var element = $( this ).data( 'element' ); |
|
if ( '' === $( this ).val() ){ |
if ( 'select' === element ) { |
$( '#' + otherIdSuffix ).find( '.other' ).prop( 'selected', false ).val( 'other' ); |
} else { |
$( '#other-' + otherIdSuffix ).prop( 'checked', false ).val( 'other' ); |
} |
$( 'label.collect-other-' + otherIdSuffix ).remove(); |
$( this ).remove(); |
} else { |
if ( 'select' === element ) { |
$( '#' + otherIdSuffix ).find( '.other' ).val( $( this ).val() ); |
$( '#' + otherIdSuffix ).val( $( this ).val() ); |
$( '#' + otherIdSuffix + ' option').not( '.other' ).prop( 'selected', false ); |
$( '#' + otherIdSuffix ).find( '.other' ).prop( 'selected', true ); |
} else { |
if ( 'radio' === element ) { |
$( 'input[name=' + otherIdSuffix + ']' ).not( '#other-' + otherIdSuffix ).prop( 'checked', false ); |
} |
$( '#other-' + otherIdSuffix ).val( $( this ).val() ); |
$( '#other-' + otherIdSuffix ).prop( 'checked', true ); |
} |
} |
}); |
} |
|
/*************************** |
* Lancement des scripts * |
***************************/ |
const CHEMIN_FICHIERS = $( '#zone-appli' ).data('url-fichiers'); |
|
jQuery( document ).ready( function() { |
// Modale "aide" du projet |
projetHelpModale(); |
// Affichage input file |
inputFile(); |
// Affichage des List-checkbox |
inputListCheckbox(); |
// Affichage des Range |
inputRangeDisplayNumber() |
// Modale "aide" |
newFieldsHelpModal(); |
// Ajout/suppression d'un champ texte "Autre" |
onOtherOption(); |
// Récupérer les données entrées dans "Autre" |
collectOtherOption(); |
}); |