| New file |
|---|
| 0,0 → 1,436 |
|---|
| export function Utils() { |
| this.cheminFichiers = $( '#zone-appli' ).data( 'url-fichiers' ); |
| // système de traduction minimaliste |
| this.msgs = { |
| fr: { |
| 'arbre' : 'Arbre', |
| 'dupliquer' : 'Dupliquer', |
| 'saisir-plantes' : 'Saisir les plantes', |
| 'saisir-lichens' : 'Saisir les lichens', |
| 'upload-non-suppote' : 'Votre navigateur ne permet pas le téléchargement de fichiers.', |
| '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', |
| 'confirmation-suppression' : 'Êtes-vous sûr de vouloir supprimer cette observation', |
| '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', |
| 'taxon-ou-image' : 'Veuillez transmettre au moins, soit une image, soit une espèce', |
| '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.', |
| 'courriel-connu' : 'Un compte existe pour ce courriel, connectez-vous pour saisir votre observation' |
| }, |
| en: { |
| 'arbre' : 'Tree', |
| 'dupliquer' : 'Duplicate', |
| 'saisir-plantes' : 'Enter the plants', |
| 'saisir-lichens' : 'Enter the lichens', |
| 'upload-non-suppote' : 'Your browser does not support file upload.', |
| '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', |
| 'confirmation-suppression' : 'Are you sure you want to delete this observation', |
| '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', |
| 'taxon-ou-image' : 'Please transmit at least one image or one species', |
| '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.', |
| 'courriel-connu' : 'An account exists for this email, log in to enter your observation' |
| } |
| }; |
| }; |
| |
| Utils.prototype.init = function() { |
| // Modale "aide" du projet |
| this.projetHelpModale(); |
| // Affichage input file |
| this.inputFile(); |
| // Affichage des List-checkbox |
| this.inputListCheckbox(); |
| // Affichage des Range |
| this.inputRangeDisplayNumber() |
| // Modale "aide" |
| this.newFieldsHelpModal(); |
| // Ajout/suppression d'un champ texte "Autre" |
| this.onOtherOption(); |
| // Récupérer les données entrées dans "Autre" |
| this.collectOtherOption(); |
| }; |
| |
| // aide dans le titre du projet |
| Utils.prototype.projetHelpModale = function() { |
| const lthis = this; |
| |
| $( '#top' ).on ( 'click', '#info-button', function ( event ) { |
| const fileMimeType = $( this ).data( 'mime-info' ), |
| label = 'Aide du projet : ' + $( '#titre-projet' ).text(); |
| |
| if( fileMimeType.match( 'image' ) ) { |
| const extention = fileMimeType.replace( /(?:imag)?e\/?/g , '' ), |
| content = '<img id="modale-aide-img" src="' + lthis.cheminFichiers + 'info.' + extention + '" style="" alt="info projet" />'; |
| } |
| lthis.activerModale( label, content ); |
| }); |
| }; |
| |
| // Logique d'affichage pour le input type=file |
| Utils.prototype.inputFile = function() { |
| // Action lorsque la "barre d'espace" ou "Entrée" est pressée |
| $( '#formulaire' ).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 |
| Utils.prototype.inputListCheckbox = function() { |
| // 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 ) { |
| const 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 |
| const $checkboxes = $( this ).next(), |
| count = $( '.checkboxes' ).length; |
| |
| for ( let i = 0; i < count; i++ ) { |
| if ( $( '.checkboxes' )[i] !== $checkboxes[0] && !$checkboxes.hasClass( 'hidden' ) ) { |
| const $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" |
| Utils.prototype.inputRangeDisplayNumber = function() { |
| $( 'input[type="range"]' ).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() { |
| $( this ).text( '' ); |
| }); |
| }); |
| }; |
| |
| // Activation/Desactivation et contenu de la modale Bootstrap |
| // https://getbootstrap.com/docs/3.3/javascript/#modals |
| Utils.prototype.newFieldsHelpModal = function() { |
| const lthis = this; |
| |
| $( '#zone-appli' ).on( 'click' , '.help-button' , function ( event ) { |
| const thisFieldKey = $( this ).data( 'key' ), |
| fileMimeType = $( this ).data( 'mime-type' ), |
| label = 'Aide pour : ' + $( this ).data( 'name' ); |
| |
| if( fileMimeType.match( 'image' ) ) { |
| const extention = fileMimeType.replace( /(?:imag)?e\/?/g , '' ), |
| content = '<img id="modale-aide-img" src="' + lthis.cheminFichiers + thisFieldKey + '.' + extention + '" style="" alt="' + thisFieldKey + '" />'; |
| } |
| lthis.activerModale( label, content ); |
| }); |
| }; |
| |
| // Activation/Desactivation et contenu de la modale Bootstrap |
| // https://getbootstrap.com/docs/3.3/javascript/#modals |
| Utils.prototype.activerModale = function( label, content = '', buttons = [] ) { |
| const lthis = this, |
| buttonsHtmlBase = '<button type="button" class="btn btn-secondary" data-dismiss="modal">Fermer</button>'; |
| let dismiss = '', |
| buttonsHtml = buttonsHtmlBase; |
| |
| // Titre |
| $( '#fenetre-modal-label' ).text( label ); |
| if ( '' !== content ) { |
| $( '#print_content' ).append( content ); |
| } |
| // Sortie avec la touche escape |
| $( '#fenetre-modal' ).modal( { keyboard : true } ); |
| // Affichage |
| $( '#fenetre-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 |
| $( '#fenetre-modal' ).off( 'shown.bs.modal' ).on( 'shown.bs.modal' , function () { |
| $( '#myInput' ).trigger( 'focus' ); |
| if( valOk( $( '#modale-aide-img' ) ) ) { |
| lthis.redimentionnerImgAide(); |
| $( window ).on( 'resize', lthis.redimentionnerImgAide.bind( lthis ) ); |
| } |
| }); |
| if ( valOk( buttons ) ) { |
| buttonsHtml = ''; |
| $.each( buttons, function( i, button ) { |
| dismiss = button.dismiss ? 'data-dismiss="modal"' : ''; |
| buttonsHtml += '<button type="button" class="btn ' + button.class + '" ' + dismiss + '>' + button.label + '</button>'; |
| }); |
| } |
| $( '.modal-footer' ).html( buttonsHtml ); |
| // Réinitialisation |
| $( '#fenetre-modal' ).on( 'hidden.bs.modal' , function () { |
| $( '#confirm-modal-label' ).text(); |
| $( '#print_content' ).empty(); |
| $( '.modal-footer' ).html( buttonsHtmlBase ); |
| }); |
| }; |
| |
| Utils.prototype.redimentionnerImgAide = function() { |
| const espHorizDisp = $( '.modal-dialog' ).innerWidth() <= 1200 ? $( '.modal-dialog' ).innerWidth() - 30 : 1200, |
| cssImg = { |
| 'width': espHorizDisp, |
| 'height' : 'auto' |
| }; |
| |
| $( '#modale-aide-img' ).css(cssImg).show(50); |
| }; |
| |
| // Faire apparaitre un champ text "Autre" |
| Utils.prototype.onOtherOption = function() { |
| const lthis = this, |
| PREFIX = 'collect-other-'; |
| // Ajouter un champ texte pour "Autre" |
| const optionAdd = ( |
| otherId, |
| $target, |
| element, |
| dataName, |
| dataLabel |
| ) => { |
| $target.after( |
| '<div class="control-group">'+ |
| '<label'+ |
| ' for="' + otherId + '"'+ |
| ' class="' + otherId + '"'+ |
| '>'+ |
| 'Autre option "' + dataLabel.toLowerCase() + '" :'+ |
| '</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" |
| const optionRemove = otherId => $( '#' + otherId ).closest('.control-group').remove(); |
| |
| let dataName = '', |
| otherId = '', |
| dataLabel = '', |
| element = ''; |
| |
| $( '.other', '#formulaire' ).each( function() { |
| if( $( this ).hasClass( 'is-select' ) ) { |
| dataName = $( this ).data( 'name' ); |
| otherId = PREFIX + dataName; |
| dataLabel = $( '.select' ).data( 'label' ); |
| // Insertion du champ "Autre" après les boutons |
| if ( !valOk( $( '#'+otherId ) ) ) { |
| optionAdd( otherId, $( this ).parent( '.add-field-select' ), 'select', dataName, dataLabel ); |
| } |
| } else if ( $( this ).is( ':checked' ) ) { |
| dataName = $( this ).data( 'name' ); |
| otherId = PREFIX + dataName; |
| dataLabel = $( this ).data( 'label' ); |
| element = $( this ).data( 'element' ); |
| // Insertion du champ "Autre" après les boutons |
| if ( !valOk( $( '#'+ otherId ) ) ) { |
| optionAdd( otherId, $( this ).parent( 'label' ), element, dataName, dataLabel ); |
| } |
| } |
| }); |
| |
| $( '#formulaire' ).on( 'change', '.select', function () { |
| dataName = $( this ).data( 'name' ); |
| otherId = PREFIX + dataName; |
| dataLabel = $( this ).data( 'label' ); |
| if( 'other' === $( this ).val() ) { |
| // Insertion du champ "Autre" après les boutons |
| if ( !valOk( $( '#'+otherId ) ) ) { |
| optionAdd( otherId, $( this ).parent( '.add-field-select' ), 'select', dataName, dataLabel ); |
| } |
| } else { |
| // Suppression du champ autre |
| optionRemove( otherId ); |
| $( this ).find( '.other' ).val( 'other' ); |
| } |
| }); |
| |
| $( '#formulaire' ).on( 'change', 'input[type=radio]', function () { |
| dataName = $( this ).data( 'name' ); |
| otherId = PREFIX + dataName; |
| dataLabel = $( this ).data( 'label' ); |
| if( 'other' === $( this ).val() ) { |
| // Insertion du champ "Autre" après les boutons |
| if ( !valOk( $( '#'+otherId ) ) ) { |
| optionAdd( otherId, $( this ).parent( 'label' ), 'radio', dataName, dataLabel ); |
| } |
| } else { |
| // Suppression du champ autre |
| optionRemove( otherId ); |
| $( this ).closest( '.radio' ).find( '.other' ).val( 'other' ); |
| } |
| }); |
| |
| $( '#formulaire' ).on( 'click', '.list-checkbox .other,.checkbox .other', function () { |
| dataName = $( this ).data( 'name' ); |
| otherId = PREFIX + dataName; |
| dataLabel = $( this ).data( 'label' ); |
| element = $( this ).data( 'element' ); |
| if( $( this ).is( ':checked' ) ) { |
| // Insertion du champ "Autre" après les boutons |
| if ( !valOk( $( '#'+otherId ) ) ) { |
| optionAdd( otherId, $( this ).parent( 'label' ), element, dataName, dataLabel ); |
| } |
| } else { |
| // Suppression du champ autre |
| optionRemove( otherId ); |
| $( this ).val( 'other' ); |
| } |
| }); |
| }; |
| |
| Utils.prototype.collectOtherOption = function() { |
| $( '#formulaire' ).on( 'change', '.collect-other', function () { |
| const otherIdSuffix = $( this ).data( 'name' ).replace( '[]', '' ), |
| 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 ); |
| } |
| } |
| }); |
| }; |
| |
| /** |
| * 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} |
| */ |
| export const valOk = ( |
| valeur, |
| sensComparaison = true, |
| comparer = undefined |
| ) => { |
| let 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 ) { |
| const resultComparaison = ( comparer === valeur ); |
| |
| retour = ( sensComparaison ) ? resultComparaison : !resultComparaison ; |
| } |
| |
| return retour; |
| |
| } else { |
| // Un booléen est une valeur valable |
| return true; |
| } |
| }; |