1,1867 → 1,24 |
"use strict"; |
import {potDeMiel} from './utils.js'; |
import {displayFields} from './display.js'; |
import {initGeoloc} from './geoloc.js'; |
import {displayClassicFields} from './preview.js'; |
import {ChampsSupp} from './ChampsSupp.js'; |
|
/************************************* |
* Fonctions de Style et Affichage * |
* des éléments "spéciaux" * |
*************************************/ |
jQuery( document ).ready(function () { |
const champsSupp = new ChampsSupp(); |
|
// Logique d'affichage pour le input type=file |
function inputFile() { |
// Initialisation des variables |
var $fileInput = $( '.input-file' ), |
$button = $( '.label-file' ), |
thisId = ''; |
// Action lorsque la "barre d'espace" ou "Entrée" est pressée |
$( '.label-file' ).keydown( function( event ) { |
if ( event.keyCode == 13 || event.keyCode == 32 ) { |
$( '#' + $( this ).attr( 'for' ) + '.input-file' ).focus(); |
} |
}); |
// Action lorsque le label est cliqué |
$( '.label-file' ).click( function(event) { |
$( '#' + $( this ).attr( 'for' ) + '.input-file' ).focus(); |
return false; |
}); |
// Affiche un retour visuel dès que input:file change |
$fileInput.change( function( event ) { |
// Il est possible de supprimer un fichier |
// donc on vérifie que le 'change' est un ajout ou modificationis-defaut-value |
if( !$.isEmptyObject( event.target.files[0] ) ) { |
|
var file = event.target.files[0], |
fileInputId = $( this ).attr( 'id' ), |
$theReturn = $( '.' + fileInputId ); |
// Affichage du nom du fichier |
$theReturn.text( file.name ).removeClass( 'hidden') ; |
|
if( 5242880 < file.size ) { |
$theReturn.append( |
'<p class="message">'+ |
'<i class="fa fa-exclamation-triangle" aria-hidden="true" style="color:#ff5d55"></i> '+ |
'La taille du fichier ne doit pas dépasser 5Mo'+ |
'</p>' |
) |
.addClass( 'invalid' ); |
// lib : https://resources.tela-botanica.org/jquery/form/3.51/jquery.form.min.js |
$( this ).clearInputs(); |
console.log(file); |
|
} else if( file.type.match( 'image/*' ) && 'especes' !== fileInputId ) { |
// Si le fichier est une image (et qu'on est pas sur "especes") on l'affiche |
// Chemin temporaire de l'image et affichage |
var tmppath = URL.createObjectURL( file ); |
$theReturn.append( '<img src="' + tmppath + '" width="50%">' ).removeClass( 'invalid' );; |
|
} else if ( !( 'especes' === fileInputId && file.type.match( 'text/(:?csv|tab-separated-values)' ) ) ) { |
// on a pas un type image, ou on est sur une liste d'espèces mais on a pas un csv |
console.log(file.type); |
|
if( 'especes' === fileInputId ) {// cas où on demandait un csv |
$theReturn.append( |
'<p class="message">'+ |
'<i class="fa fa-exclamation-triangle" aria-hidden="true" style="color:#ff5d55"></i> '+ |
'Le fichier doit être au format csv ou tsv'+ |
'</p>' |
) |
.addClass( 'invalid' ); |
} else { // cas où on demandait un format image |
$theReturn.append( |
'<p class="message">'+ |
'<i class="fa fa-exclamation-triangle" aria-hidden="true" style="color:#ff5d55"></i> '+ |
'Le fichier doit être au format image (jpg, png, etc.)'+ |
'</p>' |
) |
.addClass( 'invalid' ); |
} |
// lib : https://resources.tela-botanica.org/jquery/form/3.51/jquery.form.min.js |
$( this ).clearInputs(); |
console.log(file); |
} else {// file "especes" csv ok |
$theReturn.append( ' <i class="fa fa-check-circle" aria-hidden="true" style="color:#B3C954;font-size:1.3rem"></i>' ).removeClass( 'invalid' ); |
} |
} |
}); |
// Annuler le téléchargement |
$( '.remove-file' ).click( function() { |
var $thisFileInput = $( this ).prev( '.input-file-container' ).find( '.input-file' ); |
// lib : https://resources.tela-botanica.org/jquery/form/3.51/jquery.form.min.js |
$thisFileInput.clearInputs(); |
$thisFileInput.triggerHandler( 'change' ); |
// $thisFileInput.unwrap(); |
$( this ).next( '.file-return' ).addClass( 'hidden' ).empty(); |
}); |
} |
|
// 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 |
$( '#zone-appli' ).on( 'click' , '.selectBox' , function() { |
$( '.checkboxes[data-id="' + $(this).data( 'id' ) + '"]' ).toggleClass( 'hidden' ); |
}); |
} |
|
// Style et affichage des input type="range" |
function inputRangeDisplayNumber() { |
$( '#zone-appli' ).on( 'input' , 'input[type="range"]' , function () { |
$( this ).siblings( '.range-live-value' ).text( $( this ).val() ); |
}); |
} |
|
/*********************************************************** |
* Fonctions pour la création des champs supplémentaires * |
***********************************************************/ |
|
// Logique globale pour l'ajout de nouveaux champs |
function onClickAddNewFields( fieldIndex ) { |
// Bouton ajouter un champ |
$( '#add-fields' ).click( function() { |
// Affichage du formulaire pour un champ |
displayNewField( fieldIndex ); |
// Affichage du nom du champ |
onChangeDisplayFieldLabel( fieldIndex ); |
// Empêcher de créer plus d'une fois la même clé |
onChangeCheckKeyUnique(); |
// Affichage des images/nom des documents importés dans les champs ajoutés |
inputFile(); |
// Recueil des informations correspondantes au nouveau champ |
onChangeFieldTypeCollectDetails( fieldIndex ); |
// Suppression d'un champ |
onClickRemoveField(); |
|
fieldIndex++; |
}); |
} |
|
// Création/affichage du formulaire d'un nouveau champ |
function displayNewField( fieldIndex ) { |
// Html du formulaire du nouveaux champs inséré dans le dom |
$( '#new-fields' ).append( |
'<fieldset data-id="' + fieldIndex + '" class="new-field">'+ |
'<h3>Nouveau champ :<br><strong class="field-title" data-id="' + fieldIndex + '"></strong></h3>'+ |
// Nom du champ |
'<div class="row">'+ |
'<div class="col-sm-12 mt-3 mb-3">'+ |
'<label for="field-name" title="Donnez un titre à votre champ">Nom du champ *</label>'+ |
'<input type="text" name="field-name" data-id="' + fieldIndex + '" class="field-name form-control" placeholder="Titre de votre champ" title="Le titre du champ" required>'+ |
'</div>'+ |
// Clé du champ |
'<div class="col-sm-12 mt-3 mb-3">'+ |
'<label for="field-key" title="Nom du champ dans la base de données">'+ |
'Clé du champ *'+ |
'</label>'+ |
'<input type="text" name="field-key" data-id="' + fieldIndex + '" class="field-key form-control" placeholder="Clé du champ" pattern="^(?:[a-z]+(?:(?:[A-Z]+[a-z]+)+)?|[a-z]+(?:(?:-[a-z]+)+)?)$" title="Clé Unique en Camelcase ou minuscule séparés par tirets, pas d\'accents pas de caractères spéciaux." required>'+ |
'</div>'+ |
'<p class="message m-2">' + |
'<i class="fa fa-exclamation-triangle" aria-hidden="true" style="color:#ff5d55"></i> '+ |
'Une clé doit être unique<br>' + |
'En "camelCase" (ecriture chameau)<br>'+ |
'Ou en minuscule avec tirets ("-") si nécessaire<br>'+ |
'Pas d\'espaces, aucuns caractères spéciaux (accents, cédilles, etc.).' + |
'</p>' + |
// Type de champ |
'<div class="col-sm-12 mt-3 mb-3 add-field-select" data-id="' + fieldIndex + '">'+ |
'<label for="field-element" title="Quel type de champ">Type de champ *</label>'+ |
'<select name="field-element" data-id="' + fieldIndex + '" class="field-element form-control custom-select">'+ |
'<option value="text">Champ texte</option>'+ |
'<option value="email">Champ email</option>'+ |
'<option value="textarea">Champ rédaction</option>'+ |
'<option value="select">Menu déroulant</option>'+ |
'<option value="checkbox">Cases à cocher</option>'+ |
'<option value="list-checkbox">Liste de cases à cocher</option>'+ |
'<option value="radio">Boutons radio</option>'+ |
'<option value="date">Calendrier</option>'+ |
'<option value="range">Curseur (entre 2 bornes)</option>'+ |
'<option value="number">Nombre</option>'+ |
'</select>'+ |
'</div>'+ |
// Checkbox "champ requis" |
'<div class="col-sm-12 radio mt-3 mb-3">'+ |
'<label class="radio-label" for="field-is_mandatory" title="Ce champ est obligatoire">'+ |
'<input type="checkbox" name="field-is_mandatory" data-id="' + fieldIndex + '" class="field-is_mandatory form-control">'+ |
'Champ requis ?'+ |
'</label>'+ |
'</div>'+ |
// Unité des valeurs |
'<div class="col-sm-12 mt-3 mb-3">'+ |
'<label for="field-unit" title="Unité de mesure de vos valeurs">Unités ( cm, kg, ha, etc.)</label>'+ |
'<input type="text" name="field-unit" data-id="' + fieldIndex + '" class="field-unit form-control" placeholder="symbole de vos unités">'+ |
'</div>'+ |
// Tooltip |
'<div class="col-sm-12 mt-3 mb-3">'+ |
'<label for="field-description" title="Ajoutez une info-bulle">Info-bulle</label>'+ |
'<input type="text" name="field-description" data-id="' + fieldIndex + '" class="field-description form-control" placeholder="Quelques mots">'+ |
'</div>'+ |
// Import d'une image d'aide à afficher en popup |
'<div class="input-file-row row">'+ |
'<div class="input-file-container col-sm-10">'+ |
'<input type="file" class="input-file field-help" name="field-help' + fieldIndex + '" data-id="' + fieldIndex + '" id="help-doc-' + fieldIndex + '" accept="image/*">'+ |
'<label for="field-help' + fieldIndex + '" class="label-file"><i class="fas fa-download"></i> Popup aide image (.jpg)</label>'+ |
'</div>'+ |
'<div class="btn btn-danger btn-sm remove-file" name="remove-file" data-id="' + fieldIndex + '" title="Supprimer le fichier"><i class="fas fa-times" aria-hidden="true"></i></div>'+ |
'<div class="file-return help-doc-' + fieldIndex + ' hidden"></div>'+ |
'</div>'+ |
// Boutons supprimer |
'<div class="col-sm-12 mt-3 mb-3">'+ |
'<label for="remove-field">Supprimer</label>'+ |
'<div class="remove-field button" name="remove-field" data-id="' + fieldIndex + '" title="Supprimer un champ"><i class="fa fa-skull" aria-hidden="true"></i></div>'+ |
'</div>'+ |
'</div>'+ |
'</fieldset>' |
); |
// Animation de l'affichage |
$( 'fieldset.new-field[data-id="' + fieldIndex + '"]').hide().show( 200 ); |
$( 'html, body' ).stop().animate({ |
scrollTop: $( 'fieldset.new-field[data-id="' + fieldIndex + '"]' ).offset().top |
}, 300 ); |
} |
|
// Affichage du nom du champ dès qu'il est renseigné |
function onChangeDisplayFieldLabel( fieldIndex ) { |
$('.field-name[data-id="' + fieldIndex + '"]').change( function() { |
$( '.field-title[data-id="' + fieldIndex + '"]' ).text( $( this ).val() ); |
}); |
} |
|
// Supprimer un nouveau champ |
function onClickRemoveField () { |
$( '.remove-field' ).click( function() { |
$( this ).closest('fieldset').hide( 200 , function () { |
$( this ).remove(); |
}); |
}); |
} |
|
|
/**** Recueil des informations et détails qui dépendent du type de champ choisi ****/ |
|
// Logique de recueil d'informations en fonction du type de champ choisi |
function onChangeFieldTypeCollectDetails( fieldIndex ) { |
// On insère les champs par défaut de recueil d'informations |
displayFieldDetailsCollect( |
fieldIndex, |
// Placeholder (champ type text par défaut) |
'<div class="col-sm-12 mt-3">'+ |
'<label for="aide-saisie" title="Aidez les utilisateurs en deux ou 3 mots ou chiffres à comprendre ce que doit contenir ce champ">Texte d\'aide à la saisie</label>'+ |
'<input type="text" name="aide-saisie" data-id="' + fieldIndex + '" class="aide-saisie form-control" placeholder="Ce que doit contenir ce champ">'+ |
'</div>' |
); |
// Sinon : |
$( '.field-element[data-id="' + fieldIndex + '"]' ).change( function() { |
// On intialise l'index pour les listes la variable qui contiendra un id pour chaque option |
var valueIndex = 0; |
// Si on hésite on qu'on se trompe dans la liste : |
// les champs de détails de l'option précédente doivent être supprimés |
$( '.field-details[data-id="' + fieldIndex + '"]' ).hide( 200 , function () { |
$( this ).remove(); |
}); |
|
// Html de recueil de données en fonction de l'élément choisi |
switch( $( this ).val() ) { |
case 'range': |
case 'number': |
displayFieldDetailsCollect( |
fieldIndex, |
'<p class="message">'+ |
'<i class="fa fa-exclamation-triangle" aria-hidden="true" style="color:#ff5d55"></i> '+ |
'Ne pas oublier de prévisualiser !!<br>'+ |
'Vérifier le bon fonctionnement et changer, si nécessaire, les valeurs de défaut, incrémentation (step), min et max.<br>'+ |
'Si le navigateur considère que certaines valeurs sont incohérentes il pourrait les modifier automatiquement'+ |
'</p>' + |
// Placeholder |
'<div class="col-sm-12 mt-3">'+ |
'<label for="aide-saisie" title="Deux ou 3 mots ou chiffres pour comprendre ce que doit contenir ce champ (ex: min 20, 10 par 10, etc.)">Texte d\'aide à la saisie</label>'+ |
'<input type="text" name="aide-saisie" data-id="' + fieldIndex + '" class="aide-saisie form-control" placeholder="Ce que doit contenir ce champ">'+ |
'</div>'+ |
// Valeur par défaut |
'<div class="col-sm-12 mt-3">'+ |
'<label for="default" title="Valeur par défaut">Valeur par défaut</label>'+ |
'<input type="number" name="default" data-id="' + fieldIndex + '" class="default form-control" step="0.01" lang="en">'+ |
'</div>'+ |
// Incrémentation ( attribut step="" ) |
'<div class="col-sm-12 mt-3">'+ |
'<label for="step" title="De 10 en 10, de 0.5 en 0.5, etc.">Incrémentation (step)</label>'+ |
'<input type="number" name="step" data-id="' + fieldIndex + '" class="step form-control" step="0.01" value="1" lang="en">'+ |
'</div>'+ |
// Min |
'<div class="col-sm-12 mt-3">'+ |
'<label for="min" title="valeur min">Valeur minimale</label>'+ |
'<input type="number" name="min" data-id="' + fieldIndex + '" class="min form-control" step="0.01" value="0" lang="en">'+ |
'</div>'+ |
// Max |
'<div class="col-sm-12 mt-3">'+ |
'<label for="max" title="valeur max">Valeur maximale</label>'+ |
'<input type="number" name="max" data-id="' + fieldIndex + '" class="max form-control" step="0.01" value="1" lang="en">'+ |
'</div>' |
); |
break; |
|
case 'date': |
displayFieldDetailsCollect( |
fieldIndex, |
// Date min |
'<div class="col-sm-12 mt-3">'+ |
'<label for="min" title="date min">Date minimale</label>'+ |
'<input type="date" name="min" data-id="' + fieldIndex + '" class="min form-control" pattern="(^(((0[1-9]|1[0-9]|2[0-8])[\/](0[1-9]|1[012]))|((29|30|31)[\/](0[13578]|1[02]))|((29|30)[\/](0[4,6,9]|11)))[\/](19|[2-9][0-9])\d\d$)|(^29[\/]02[\/](19|[2-9][0-9])(00|04|08|12|16|20|24|28|32|36|40|44|48|52|56|60|64|68|72|76|80|84|88|92|96)$)" title="jj/mm/aaaa">'+ |
'</div>'+ |
// Date max |
'<div class="col-sm-12 mt-3">'+ |
'<label for="max" title="date max">Date maximale</label>'+ |
'<input type="date" name="max" data-id="' + fieldIndex + '" class="max form-control" pattern="(^(((0[1-9]|1[0-9]|2[0-8])[\/](0[1-9]|1[012]))|((29|30|31)[\/](0[13578]|1[02]))|((29|30)[\/](0[4,6,9]|11)))[\/](19|[2-9][0-9])\d\d$)|(^29[\/]02[\/](19|[2-9][0-9])(00|04|08|12|16|20|24|28|32|36|40|44|48|52|56|60|64|68|72|76|80|84|88|92|96)$)" title="jj/mm/aaaa">'+ |
'</div>' |
); |
break; |
|
case 'select': |
case 'checkbox': |
case 'list-checkbox': |
case 'radio': |
displayFieldDetailsCollect( |
fieldIndex, |
'<p class="message element-message">' + |
'<i class="fa fa-exclamation-triangle" aria-hidden="true" style="color:#ff5d55"></i> ' + |
'Entrez au moins une valeur de ' + $( this ).children( 'option:selected' ).text() + |
'<br>Si aucun label à afficher n\'est indiqué, la valeur entrée sera utilisée (première lettre en majuscule).'+ |
'</p>'+ |
// Première option |
'<div class="new-value center-block row" data-list-value-id="' + valueIndex +'">'+ |
// Recueil d'une valeur de la liste |
'<div class="col-sm-12 mt-3">'+ |
'<label for="list-value">Valeur *</label>'+ |
'<input type="text" name="list-value" data-id="' + fieldIndex + '" class="list-value form-control" data-list-value-id="' + valueIndex +'" placeholder="Une des valeurs de la liste" required>'+ |
'</div>' + |
// Recueil du label à afficher |
'<div class="col-sm-12 mt-3">'+ |
'<label for="displayed-label">Label</label>'+ |
'<input type="text" name="displayed-label" data-id="' + fieldIndex + '" class="displayed-label form-control" data-list-value-id="' + valueIndex +'" placeholder="Label à afficher">'+ |
'</div>' + |
// Checkbox valeur par défaut |
'<div class="col-sm-12 radio mt-3">'+ |
'<label for="is-defaut-value" title="Ceci est la valeur par défaut" class="radio-label">'+ |
'<input type="checkbox" name="is-defaut-value" data-id="' + fieldIndex + '" class="is-defaut-value" title="entrez une valeur pour activer cette case" data-list-value-id="' + valueIndex +'" disabled >'+ |
'Valeur par défaut'+ |
'</label>'+ |
'</div>' + |
'</div>' + |
// Bouton ajout d'une valeur à la liste |
'<div class="col-sm-12 mt-3 add-value-container" data-id="' + fieldIndex + '">'+ |
'<label for="add-value" class="add-value" data-id="' + fieldIndex + '" title="Ajouter une valeur à la liste">Ajouter une valeur</label>'+ |
'<div class="button add-value-button" name="add-value" data-id="' + fieldIndex + '" title="Ajouter une valeur à la liste"><i class="fa fa-puzzle-piece" aria-hidden="true"></i></div>'+ |
'</div>' + |
// checkbox ajouter une valeur "Autre:" |
'<div class="col-sm-12 radio mt-3">'+ |
'<label for="option-other-value" title="Ajouter une option \'Autre:\' à la fin" class="radio-label">'+ |
'<input type="checkbox" name="option-other-value" data-id="' + fieldIndex + '" class="option-other-value" title="Ajouter une option \'Autre\' à la fin">'+ |
'Valeur "Autre"'+ |
'</label>'+ |
'</div>' |
); |
break; |
|
case 'email': |
case 'text': |
case 'textarea': |
default: |
displayFieldDetailsCollect( |
fieldIndex, |
// Placeholder |
'<div class="col-sm-12 mt-3">'+ |
'<label for="aide-saisie" title="Aidez les utilisateurs en deux ou 3 mots ou chiffres à comprendre ce que doit contenir ce champ">Texte d\'aide à la saisie</label>'+ |
'<input type="text" name="aide-saisie" data-id="' + fieldIndex + '" class="aide-saisie form-control" placeholder="Ce que doit contenir ce champ">'+ |
'</div>' |
); |
break; |
} |
// Ajout des valeurs possibles |
// lorsque le champ est une liste ou case à cocher |
onClickAddNewValueToList( fieldIndex , valueIndex ); |
}); |
} |
|
// Insertion dans le dom des champs de recueil d'informations |
function displayFieldDetailsCollect( fieldIndex , fieldDetails ) { |
$( '.add-field-select[data-id="' + fieldIndex + '"]' ).after( |
'<div class="field-details col-sm-11 mt-3 row" data-id="' + fieldIndex + '">' + |
fieldDetails + |
'</div>' |
).hide().show( 200); |
} |
|
/**** Ajout des valeurs (options) des "champs de listes" (select, checkbox, radio, etc.) ****/ |
|
// Ajout des options des listes (deroulantes, cases à cocher etc.) |
function onClickAddNewValueToList( fieldIndex , valueIndex ) { |
$( '.add-value-button[data-id="' + fieldIndex + '"]' ).click( function() { |
valueIndex++; |
$( '.add-value-container[data-id="' + fieldIndex + '"]' ).before( |
'<div class="new-value center-block row" data-list-value-id="' + valueIndex +'">'+ |
// Recueil d'une valeur de la liste |
'<div class="col-sm-12 mt-3">'+ |
'<label for="list-value">Valeur *</label>'+ |
'<input type="text" name="list-value" data-id="' + fieldIndex + '" class="list-value form-control" data-list-value-id="' + valueIndex +'" placeholder="Une des valeurs de la liste" required>'+ |
'</div>' + |
// Recueil du label à afficher |
'<div class="col-sm-12 mt-3">'+ |
'<label for="displayed-label">Label</label>'+ |
'<input type="text" name="displayed-label" data-id="' + fieldIndex + '" class="displayed-label form-control" data-list-value-id="' + valueIndex +'" placeholder="Label à afficher">'+ |
'</div>' + |
// Checkbox valeur par défaut+bouton supprimer |
'<div class="col-sm-12 mt-3 row">'+ |
// Bouton supprimer une option |
'<div class="col-sm-5">'+ |
'<div class="remove-value button" name="remove-value" data-id="' + fieldIndex + '" data-list-value-id="' + valueIndex + '" title="Supprimer une valeur"><i class="fa fa-trash" aria-hidden="true"></i></div>'+ |
'</div>'+ |
// Valeur par défaut |
'<div class="col-sm-7 radio">'+ |
'<label for="is-defaut-value" title="Ceci est la valeur par défaut" class="radio-label">'+ |
'<input type="checkbox" name="is-defaut-value" data-id="' + fieldIndex + '" class="is-defaut-value" title="entrez une valeur pour activer cette case" data-list-value-id="' + valueIndex +'" disabled >'+ |
'Valeur défaut'+ |
'</label>'+ |
'</div>'+ |
'</div>'+ |
'</div>' |
).hide().show( 200); |
// Une seule valeur par défaut pour select et radio |
onClickDefaultValueRemoveOthers( fieldIndex ); |
// Supprimer une valeur |
onClickRemoveListValue( fieldIndex ); |
}); |
} |
|
// Activer la checkbox de valeur par default uniquement si une valeur est entrée |
function onInputListValueLabelEnableDefaultCheckbox() { |
$( '#new-fields' ).on( 'input' , '.list-value' , function() { |
var $thisDefautValue = $( '.is-defaut-value[data-id="' + $( this ).data( 'id' ) + '"][data-list-value-id="' + $( this ).data( 'list-value-id' ) + '"]' ); |
if( '' !== $( this ).val() ) { |
$thisDefautValue.removeAttr( 'disabled' ); |
} else { |
$thisDefautValue.attr( 'disabled', true ).attr( 'checked' , false ); |
} |
}); |
} |
|
// Pour les éléments "select" et "radio" il ne peut y avoir qu'une valeur par défaut cochée |
function onClickDefaultValueRemoveOthers( fieldIndex ) { |
var selectedFieldElement = $( '.field-element[data-id="' + fieldIndex + '"]' ).val(); |
|
if( selectedFieldElement === 'select' || selectedFieldElement === 'radio' ) { |
$( '.is-defaut-value[data-id="' + fieldIndex + '"]' ).click( function() { |
if( $( this ).is( ':checked' ) ) { |
// Décocher tous les autres |
$( '.is-defaut-value[data-id="' + fieldIndex + '"]:checked' ).not( $( this) ).attr( 'checked' , false ); |
} |
}); |
} |
} |
|
// Bouton supprimer une valeur |
function onClickRemoveListValue( fieldIndex ) { |
$( '.remove-value.button[data-id="' + fieldIndex + '"]' ).click( function() { |
$( '.new-value[data-list-value-id="' + $( this ).data( 'list-value-id' ) + '"]' ).hide( 200 , function () { |
$( this ).remove(); |
}); |
}); |
} |
|
/********************************************* |
* Validation et envoi des nouveaux champs * |
*********************************************/ |
|
// Empêcher de créer plus d'une fois la même clé |
function onChangeCheckKeyUnique() { |
if( 1 < $( '.field-key' ).length ) { |
// Marqueur de valeur dupliquée |
var notUnique = false; |
|
$( '.field-key' ).change( function () { |
let count = $( '.field-key' ).length; |
|
for(var index = 0 ; index < count ; index++) { |
let thisFieldKey = $( '.field-key[data-id="' + index + '"]' ); |
// Le champ avec cet index pourrait avoir été supprimé |
if( 0 < thisFieldKey.length ) { |
for( var otherIndex = 0 ; otherIndex < count ; otherIndex++ ) { |
let otherFieldKey = $( '.field-key[data-id="' + otherIndex + '"]' ); |
// Le champ avec cet index pourrait avoir été supprimé |
// On vérifie qu'on ne compare pas un champ avec lui-même |
// Que les champs ne sont pas vides |
// Les champs dupliqués déclanchent le marqueur et les alertes |
if( |
0 < otherFieldKey.length && |
index !== otherIndex && |
'' !== otherFieldKey.val() && |
'' !== thisFieldKey.val() && |
thisFieldKey.val() === otherFieldKey.val() |
) { |
// Le marqueur de valeur dupliquée passe à true |
notUnique = true; |
if( 0 === $( '.invalid-field-key[data-id="' + index + '"]' ).length ) { |
// Le champ est signalé en rouge |
// Un message d'alerte apparait sous le champ |
thisFieldKey.addClass( 'invalid-key' ); |
thisFieldKey.after( |
'<p class="message invalid-field-key" data-id="' + index + '">' + |
'<i class="fa fa-exclamation-triangle" aria-hidden="true" style="color:#ff5d55"></i>' + |
' Vérifiez qu\'aucune clé n\'ait été utilisée plus d\'une fois' + |
'</p>' |
); |
} |
} |
} |
} |
} |
if( notUnique ) { |
// Un message d'alerte apparait au dessus des boutons prévisualiser/valider |
if( 0 === $( '.invalid-field-key-bottom' ).length ) { |
$( '#new-fields' ).after( |
'<p class="message invalid-field-key-bottom">' + |
'<i class="fa fa-exclamation-triangle" aria-hidden="true" style="color:#ff5d55"></i>' + |
' Une clé a été utilisée plusieurs fois' + |
'</p>' |
); |
} |
// Les boutons prévisualiser/valider sont désactivés et signalés en rouge |
$( '#preview-field , #validate-new-fields' ).addClass( 'invalid-key' ).css( 'pointer-events', 'none' ); |
} else {// Si on est ok on retire toutes les alertes |
// signalements rouges |
$( '.field-key' ).each( function() { |
$( this ).removeClass( 'invalid-key' ); |
}); |
$( '#preview-field , #validate-new-fields' ).removeClass( 'invalid-key' ); |
// messages d'alerte |
$( '.invalid-field-key' ).each( function() { |
$( this ).hide( 200 , function () { |
$( this ).remove(); |
}); |
}); |
$( '.invalid-field-key-bottom' ).hide( 200 , function () { |
$( this ).remove(); |
}); |
//réactivation des boutons prévisualiser/valider |
$( '#preview-field' )[0].style.removeProperty( 'pointer-events' ); |
$( '#validate-new-fields' )[0].style.removeProperty( 'pointer-events' ) |
} |
// Réinitialisation |
notUnique = false; |
}); |
} |
} |
|
// Activation/desactivation des champs valider/previsualiser |
function onClickButtonsTagMissingValues() { |
$( '#preview-field , #validate-new-fields' ).on( 'click' , function() { |
var $button = $( this ); |
//S'il n'y a pas (plus) de bloc nouveau champ |
if( 0 === $( 'fieldset' ).length ) { |
return; |
} |
// Classe "invalid" |
missingValuesClass(); |
if( !$( this ).hasClass( 'invalid' ) ) { |
if( $( this ).is( '#validate-new-fields') ) { |
// Lancement de l'enregistrement des valeurs à transmettre |
onClickStoreNewFields(); |
} else if( $( this ).is( '#preview-field') ) { |
// Lancement de la prévisualisation |
newFieldsPreview(); |
} |
} |
}); |
// Si un champ manquant est renseigné |
// ou on choisit nouvel élément liste (au moins une option) |
// Cette action doit être prise en compte dans la validation |
$( '#new-fields' ).on( 'change' , '.invalid[type="text"] , .field-element' , function() { |
// S'il on a pas encore cliqué sur prévisualiser/valider |
// changer l'élément ne doit pas déclancher le signalement en rouge |
if( $( this ).is( '.field-element' ) && !$( '#preview-field , #validate-new-fields' ).hasClass( 'invalid' ) ) { |
return; |
} else { |
// Classe "invalid" |
missingValuesClass(); |
} |
}); |
} |
|
// Classe "invalid" |
function missingValuesClass() { |
// Si au moins un champ "required" n'est pas rempli |
$( '#new-fields input[required]' ).each( function() { |
if( 0 === $( this ).val().length ) { |
// Le champ est signalé en rouge |
$( this ).addClass( 'invalid' ); |
// Un message d'alerte apparait après le champ |
if( 0 === $( this ).next( '.validation-warning' ).length ) { |
$( this ).after( |
'<p class="validation-warning message">' + |
'<i class="fa fa-exclamation-triangle" aria-hidden="true" style="color:#ff5d55"></i>' + |
' Ce champ est requis' + |
'</p>' |
); |
} |
} else { |
// Le champ est signalé en rouge |
$( this ).removeClass( 'invalid' ); |
// Le message d'alerte du champ est supprimé |
if( 0 < $( this ).next( '.validation-warning' ).length ) { |
$( this ).next( '.validation-warning' ).hide( 200 , function () { |
$( this ).remove(); |
}); |
} |
} |
}); |
// Si on a des champs à compléter |
if( 0 < $( '.invalid[type="text"]' ).length ) { |
// Les boutons sont signalés en rouge |
$( '#preview-field , #validate-new-fields' ).addClass( 'invalid' ); |
// Un message d'alerte apparait avant les boutons |
if( 0 === $( '#new-fields' ).next( '.validation-warning' ).length ) { |
$( '#new-fields' ).after( |
'<p class="validation-warning message">' + |
'<i class="fa fa-exclamation-triangle" aria-hidden="true" style="color:#ff5d55"></i>' + |
' Des informations sont manquantes pour certains champs,' + |
' vérifiez ceux signalés en rouge' + |
'</p>' |
); |
} |
} else { |
// Les signalements et messages sont supprimés |
$( '#preview-field , #validate-new-fields' ).removeClass( 'invalid' ); |
$( '#new-fields' ).next( '.validation-warning' ).hide( 200 , function () { |
$( this ).remove(); |
}); |
} |
} |
|
/**** Envoi des nouveaux champs ****/ |
|
// Enregistrement des valeurs à transmettre |
function onClickStoreNewFields() { |
// Lorsqu'on valide |
var resultArrayIndex = 0; |
var count = $( 'fieldset' ).last().data( 'id' ); |
var helpFileExists = false; |
// Savoir si au moins un fichier "aide" est enregistré |
$( '.field-help' ).each( function () { |
if( '' !== $( this ).val() ){ |
helpFileExists = true; |
} |
}) |
// dans ce cas intégrer dans le formulaire à soumettre un bloc |
// qui contiendra une copie de chacun de ces input[type="file"] |
if( helpFileExists ){ |
$( '#submit-button' ).before( '<div id="help-doc-submit" style="position:fixed;visibility:hidden;"></div>' ); |
} |
// On déroule les blocs de champs supplémentaires |
for( var index = $( 'fieldset' ).first().data( 'id' ) ; index <= count ; index++ ) { |
var thisFieldset = $( 'fieldset[data-id="' + index + '"]'); |
// Certains indices peuvent correspondre à un champ supprimé |
if( 0 < $( thisFieldset ).length ) { |
// initialisation du tableau de résultats |
datasToSubmit[ resultArrayIndex ] = { fieldValues:{} }; |
// Ajout de la clé au tableau de resultats |
datasToSubmit[ resultArrayIndex ].key = $( '.field-key' , thisFieldset ).val(); |
// Ajout de le nom au tableau de resultats |
datasToSubmit[ resultArrayIndex ].name = $( '.field-name' , thisFieldset ).val(); |
// Recueil de l'élément choisi pour le tableau de resultats |
datasToSubmit[ resultArrayIndex ].element = $( '.field-element' , thisFieldset ).val(); |
// Ajout de la valeur 'requis' ou non au tableau de resultats |
datasToSubmit[ resultArrayIndex ].mandatory = $( '.field-is_mandatory' , thisFieldset ).is( ':checked' ); |
// Ajout de l'unité au tableau de resultats |
datasToSubmit[ resultArrayIndex ].unit = $( '.field-unit' , thisFieldset ).val() || null; |
// Ajout du tooltip au tableau de resultats |
datasToSubmit[ resultArrayIndex ].description = $( '.field-description' , thisFieldset ).val() || null; |
// Collecte les des données dépendantes de l'élément choisi |
// sous forme d'un tableau de resultats |
onSelectCollectDataValuesToSubmit( datasToSubmit[ resultArrayIndex ] , thisFieldset ); |
|
if( $.isEmptyObject( datasToSubmit[ resultArrayIndex ].fieldValues ) ){ |
delete datasToSubmit[ resultArrayIndex ].fieldValues; |
} |
// Copie d'un champ de fichier d'aide dans le bloc d'envoi |
if( 0 < $( '.field-help' , thisFieldset ).get(0).files.length ) { |
// Présence d'un document d'aide |
datasToSubmit[ resultArrayIndex ].help = $( '.field-help' , thisFieldset ).get(0).files[0].type; |
$( '.field-help' , thisFieldset ).clone() |
.attr( 'name' , 'help-' + datasToSubmit[ resultArrayIndex ].key )// l'attribut name prend la valeur de la clé |
.appendTo( '#help-doc-submit' ); |
} else { |
datasToSubmit[ resultArrayIndex ].help = null; |
} |
resultArrayIndex++; |
} |
} |
|
var resultsArrayJson = JSON.stringify( datasToSubmit , replacer ); |
|
// JSON.stringify : Gestion des apostrophes dans les valeurs : |
function replacer( key , value ) { |
if ( 'fieldValues' === key && 'object' === typeof value ) { |
for ( var i in value ) { |
if ( typeof value[i] === 'string' ) { |
// value[i] = value[i].replace( /\u0027/g, "''" ); |
// La solution ci-dessus convient pour stockage dans la base mais pas pour la lecture dans saisie |
// du coup astuce moisie: |
value[i] = value[i].replace( /\u0027/g, "@apos@" ).replace( /\u0022/g, '@quot@' ) |
} |
} |
} else if ( typeof value === 'string' ) { |
// value = value.replace( /\u0027/g, "''" ); |
// La solution ci-dessus convient pour stockage dans la base mais pas pour la lecture dans saisie |
// du coup astuce moisie: |
value = value.replace( /\u0027/g, "@apos@" ).replace( /\u0022/g, '@quot@' ) |
} |
return value; |
} |
|
console.log( resultsArrayJson ); |
|
// Désactivation de tous les champs et boutons (nouveaux champs) |
$( '#new-fields, #new-fields .button , #add-fields , #preview-field' ).addClass( 'disabled' ); |
$( '#validate-new-fields' ).addClass( 'validated' ); |
$( '.validate-new-fields' ).text( 'Champs validés' ); |
// Mise à disposition des données pour le bouron submit |
$( '#submit-button' ).before( |
//la value est passée avec des apostrophes pour que les guillemets de la string json passent bien en string de l'attribut |
'<input type="hidden" name="champs-supp" id="champs-supp" value=\'' + resultsArrayJson + '\'>' |
); |
} |
|
// Renseigne le tableau de resultat |
// pour les données dépendant de l'élément choisi |
function onSelectCollectDataValuesToSubmit( datasToSubmitObject , thisFieldset ) { |
switch( datasToSubmitObject.element ) { |
case 'select': |
case 'checkbox': |
case 'list-checkbox': |
case 'radio': |
datasToSubmitObject.fieldValues.listValue = []; |
// Ajout des valeurs de liste |
onChangeStoreListValueLabel( datasToSubmitObject , thisFieldset ); |
// S'il y a une valeur 'autre' on l'indique à la fin de la liste |
if( $( '.option-other-value' , thisFieldset ).is( ':checked' ) && -1 === datasToSubmitObject.fieldValues.listValue.indexOf( 'other' ) ) { |
datasToSubmitObject.fieldValues.listValue.push( 'other' ); |
} |
break; |
|
case 'number': |
case 'range': |
// Placeholder |
datasToSubmitObject.fieldValues.placeholder = $( '.aide-saisie' , thisFieldset ).val() || null; |
// Valeur par défaut |
datasToSubmitObject.fieldValues.default = $( '.default' , thisFieldset ).val() || null; |
// Incrémentation ( attribut step="" ) |
datasToSubmitObject.fieldValues.step = $( '.step' , thisFieldset ).val() || null; |
// Min |
datasToSubmitObject.fieldValues.min = $( '.min' , thisFieldset ).val() || null; |
// Max |
datasToSubmitObject.fieldValues.max = $( '.max' , thisFieldset ).val() || null; |
break; |
|
case 'date': |
// Min |
datasToSubmitObject.fieldValues.min = $( '.min' , thisFieldset ).val() || null; |
// Max |
datasToSubmitObject.fieldValues.max = $( '.max' , thisFieldset ).val() || null; |
break; |
|
case 'email': |
case 'text': |
case 'textarea': |
default: |
// Placeholder |
datasToSubmitObject.fieldValues.placeholder = $( '.aide-saisie' , thisFieldset ).val() || null; |
break; |
} |
return datasToSubmitObject; |
} |
|
// Ajout d'une valeur d'un élément liste (select, checkbox etc.) |
// dans le tableau de resultats |
function onChangeStoreListValueLabel( datasToSubmitObject , thisFieldset ) { |
$( '.list-value' , thisFieldset ).each( function() { |
var valueId = $( this ).data( 'list-value-id' ); |
var selectedFieldElement = $( '.field-element' , thisFieldset ).val(); |
var displayedLabel = ''; |
|
if ( valeurOk( $( '.displayed-label[data-list-value-id="' + valueId + '"]', thisFieldset ).val() ) ) { |
displayedLabel = $( '.displayed-label[data-list-value-id="' + valueId + '"]', thisFieldset ).val(); |
} |
if( $( this ).val() ){ |
// Is-default-value non cochée |
if( !$( '.is-defaut-value[data-list-value-id="' + valueId + '"]' , thisFieldset ).is( ':checked' ) ) { |
datasToSubmitObject.fieldValues.listValue.push( [ $( this ).val(), displayedLabel ] ); |
// Is-default-value cochée pour select/radio |
} else if( 'select' === selectedFieldElement || 'radio' === selectedFieldElement ) { |
// Une seule valeur par defaut, devient la première valeur du tableau + '#' |
datasToSubmitObject.fieldValues.listValue.unshift( [ $( this ).val() + '#', displayedLabel ] ); |
// Is-default-value cochée pour checkbox/list-checkbox |
} else { |
// On ajoute simplement la valeur au tableau + '#' |
datasToSubmitObject.fieldValues.listValue.push( [ $( this ).val() + '#', displayedLabel ] ); |
} |
} |
}); |
} |
|
/************************************************ |
* Fonction d'affichage des champs classiques * |
************************************************/ |
|
// Prévisualisation |
function DisplayClassicFields() { |
// Affichage du titre du widget |
renderFields( $( '#titre' ) , $( '.widget-renderer h1' ) ); |
// Affichage de la description |
renderFields( $( '#description' ) , $( '.preview-description' ) ); |
// Affichage referentiel |
$( '#label-taxon span' ).text( ' (' + $( '#referentiel' ).val() + ')' ); |
$( '#referentiel' ).change( function() { |
$( '#label-taxon span' ).text( ' (' + $( this ).val() + ')' ); |
}); |
|
// Affichage du logo s'il existe déjà |
if( 0 !== $( '#logo' ).val().length || $( '#logo' )[0].defaultValue ) { |
$( '#preview-logo' ).append( |
'<img src="' + |
$( '#group-settings-form .logo img' ).prop( 'src' ) + |
'" width="75%"' + |
'>' |
); |
} |
// Affichage du logo chargé |
$( '#logo.input-file' ).change( function( event ) { |
// Si le 'change' n'était pas une suppression |
if( $.isEmptyObject( event.target.files[0] ) ) { |
$( '#preview-logo img' ).remove(); |
// Si on a chargé un logo ou changé le fichier |
} else { |
$( '#preview-logo' ).append( |
'<img src="' + |
URL.createObjectURL( event.target.files[0] ) + |
'" width="75%"' + |
'>' |
); |
} |
}); |
// Affichage de l'image de fond |
$('#image_fond.input-file').change( function ( event ) { |
if( !$.isEmptyObject( event.target.files[0] ) ) { |
$( '.widget-renderer' ).css('background' ,'url(' + URL.createObjectURL( event.target.files[0] ) + ') no-repeat fixed center center'); |
} else { |
$( '.widget-renderer' )[0].style.removeProperty( 'background' ); |
} |
}); |
} |
|
// Affichage des infos dès que disponibles |
// pour les champs classiques |
function renderFields( $source , $taget ) { |
var text = new DOMParser().parseFromString($source.val(), 'text/html'); |
|
text = text.body.textContent || ''; |
if( $source.val() ) { |
$taget.text( text ); |
} |
$source.change( function () { |
$taget.text( text ); |
}); |
} |
|
|
/***************************************************** |
* Fonction d'affichage des champs supplémentaires * |
*****************************************************/ |
|
// Construction des éléments à visualiser |
function onClickPreviewField( thisFieldset , index ) { |
// Récupération des données |
// Tous les champs |
var fieldLabel = $( '.field-name' , thisFieldset ).val() || '',//nom |
fieldKey = $( '.field-key' , thisFieldset ).val() || '',//clé |
fieldElement = $( '.field-element' , thisFieldset ).val() || '',//élément |
fieldIsMandatory = $( '.field-is_mandatory' , thisFieldset ).is( ':checked' ),//champ requis |
fieldUnit = $( '.field-unit' , thisFieldset ).val() || '',//unités |
fieldTooltip = $( '.field-description' , thisFieldset ).val() || '',//info-bulle |
fieldHelp = $( '.file-return.help-doc-' + index ).text() || '',//nom du fichier d'aide |
fieldPlaceholder = $( '.aide-saisie' , thisFieldset ).val() || '',//placeholder |
// Champs à valeur numérique ou date |
fieldStep = $( '.step' , thisFieldset ).val() || '', |
fieldMin = $( '.min' , thisFieldset ).val() || '', |
fieldMax = $( '.max' , thisFieldset ).val() || '', |
// Champs "listes" |
fieldDefaultNum = $( '.default' , thisFieldset ).val() || '',// value range/number par default |
fieldOtherValue = $( '.option-other-value' , thisFieldset ).is( ':checked' ),//option autre |
fieldOptions = collectListOptions( thisFieldset );//Array: toutes les options |
// Variables d'affichage |
var fieldHtml = '',//variable contenant tout le html à afficher |
commonFieldsHtml = {},//Éléments simples ou chaînes communes aux "listes" |
listFieldsHtml = {},//chaînes & html pour les listes mais non spécifiques |
listFieldsHtml = {},//chaînes & html spécifiques aux listes |
count = fieldOptions.length;//nombre d'options, pour les boucles for |
fieldLabel = fieldLabel.replace( /(')/gm, ''' ).replace( /(")/gm, '"' ); |
fieldTooltip = fieldTooltip.replace( /(')/gm, ''' ).replace( /(")/gm, '"' ); |
fieldPlaceholder = fieldPlaceholder.replace( /(')/gm, ''' ).replace( /(")/gm, '"' ); |
|
//valeurs initiales des chaînes de caractères |
//Éléments simples ou chaînes communes aux "listes" |
commonFieldsHtml = { |
dataIdAttr : ' data-id="' + index + '"', |
helpButton : '',//bouton aide |
helpClass : '',//classe de l'élément associé au bouton aide |
titleAttr : '',//info-bulle |
fieldInput : {//attributs de l'élément |
typeAttr : ' type="' + fieldElement + '"', |
nameAttr : ' name="' + fieldKey + '"', |
classAttr : ' class="' + fieldKey + '"', |
placeholderAttr : '', |
mandatoryAttr : '',//required |
otherAttr : '' |
}, |
fieldLabel : {//attributs et contenu du label |
labelContent : fieldLabel,//label |
forAttr : ' for="' + fieldKey + '"',//attribut for |
classAttr : '',//classe du label |
otherAttr : ''//tous autres attributs |
} |
} |
// Pour les éléments de listes (select, checkbox, etc.) |
listFieldsHtml = { |
containerContent : fieldLabel,//les options peuvent avoir chacune un label |
containerClass : '',//une classe pour le conteneur |
forAttr : '',//correspond à l'id d'une checkbox/radio/list-checkbox |
optionIdAttr : '',//value-id |
defaultAttr : ''//default |
}; |
// Changement d'un élément existant: |
// supprimer le précédent pour ajouter le nouveau |
if( 0 < $( '.preview-fields' , thisFieldset ).length ) { |
$( '.preview-fields' , thisFieldset ).remove(); |
} |
// Élément requis |
if( fieldIsMandatory ) { |
// Attribut required pour le listes |
commonFieldsHtml.fieldInput.mandatoryAttr = ' required="required"'; |
// Nom du champ (éléments listes) |
listFieldsHtml.containerContent = '* ' + listFieldsHtml.containerContent; |
// Nom du champ (éléments simples) |
commonFieldsHtml.fieldLabel.labelContent = '* ' + commonFieldsHtml.fieldLabel.labelContent; |
} |
// Infobulle |
if( '' !== fieldTooltip ) { |
commonFieldsHtml.titleAttr = ' title="' + fieldTooltip + '"'; |
} |
// Placeholder |
if( '' !== fieldPlaceholder ) { |
commonFieldsHtml.fieldInput.placeholderAttr = ' placeholder="' + fieldPlaceholder + '"'; |
} |
// Fichier d'aide |
if( '' !== fieldHelp ) { |
// Bouton 'aide' |
commonFieldsHtml.helpButton = '<div class="help-button btn btn-outline-info btn-sm border-0"><i class="fas fa-info-circle"></i></div>'; |
// classe 'aide' |
commonFieldsHtml.helpClass = ' and-help'; |
} |
// html à ajouter en fonction de l'élément choisi |
switch( fieldElement ) { |
case 'checkbox' : |
case 'radio' : |
listFieldsHtml.containerClass = ' class="' + fieldElement +'"'; |
commonFieldsHtml.fieldLabel.classAttr = ' class="radio-label"'; |
fieldHtml = |
// Conteneur |
'<div style="width:100%"' + |
// Class="L'élément choisi" |
listFieldsHtml.containerClass + |
// DataId |
commonFieldsHtml.dataIdAttr + |
// Required |
commonFieldsHtml.fieldInput.mandatoryAttr + |
// Info bulle |
commonFieldsHtml.titleAttr + |
' >'+ |
// Nom du champ |
// Classe 'and-help' |
'<div class="mt-3 list-label' + commonFieldsHtml.helpClass + '">' + |
// Label |
listFieldsHtml.containerContent + |
// Bouton 'help' |
commonFieldsHtml.helpButton + |
'</div>'; |
// On déroule les différentes valeurs |
for( let i = 0; i < count; i++ ) { |
let fieldOption = fieldOptions[i]; |
// L'id de input |
listFieldsHtml.inputIdAttr = ' id="' + fieldOption.optionValue + '"'; |
listFieldsHtml.forAttr = ' for="' + fieldOption.optionValue + '"'; |
// Default |
listFieldsHtml.defaultAttr = '';//réinitialisation |
if( fieldOption.isDefault ) {//affectation |
listFieldsHtml.defaultAttr = ' checked'; |
} |
// L'indice de chaque option |
// L'option "autre" n'en a pas |
if( '' !== fieldOption.optionIndex ) { |
listFieldsHtml.optionIdAttr = ' value-id="' + fieldOption.optionIndex + '"'; |
} |
|
fieldHtml += |
'<label' + |
// For |
listFieldsHtml.forAttr + |
// value-id |
listFieldsHtml.optionIdAttr + |
// Class du label |
commonFieldsHtml.fieldLabel.classAttr + |
'>' + |
'<input' + |
// Type |
commonFieldsHtml.fieldInput.typeAttr + |
// Id |
listFieldsHtml.inputIdAttr + |
// DataId |
commonFieldsHtml.dataIdAttr + |
// value-id |
listFieldsHtml.optionIdAttr + |
// Name |
commonFieldsHtml.fieldInput.nameAttr + |
// Value |
' value="' + fieldOption.optionValue.replace( /(')/gm, ''' ).replace( /(")/gm, '"' ) + '"' + |
// Checked |
listFieldsHtml.defaultAttr + |
// Class="nom du champ" |
commonFieldsHtml.fieldInput.classAttr + |
'>' + |
// Label de l'option |
fieldOption.optionText.replace( /(')/gm, ''' ).replace( /(")/gm, '"' ) + |
'</label>'; |
} |
// Si valeur "autre" est cochée |
if( fieldOtherValue ) { |
fieldHtml += |
'<label for="other"' + |
commonFieldsHtml.dataIdAttr + |
commonFieldsHtml.fieldLabel.classAttr + |
'>' + |
'<input' + |
commonFieldsHtml.fieldInput.typeAttr + |
' id="other-' + fieldElement + '-' + index + '"' + |
commonFieldsHtml.fieldInput.nameAttr + |
' value="other"' + |
commonFieldsHtml.fieldInput.classAttr + |
commonFieldsHtml.dataIdAttr + |
'>' + |
'Autre</label>'; |
} |
// Fin du conteneur |
fieldHtml += '</div>'; |
break; |
|
case 'list-checkbox': |
commonFieldsHtml.fieldLabel.classAttr = ' class="radio-label"'; |
fieldHtml = |
// Classe 'and-help' |
'<div class="multiselect add-field-select' + commonFieldsHtml.helpClass + '"' + |
// DataId |
commonFieldsHtml.dataIdAttr + |
'>' + |
'<label style="width:100%">' + |
// Nom du champ |
listFieldsHtml.containerContent + |
// Bouton 'help' |
commonFieldsHtml.helpButton + |
'</label>' + |
'<div class="mt-3">'+ |
'<div class="selectBox"' + |
// DataId |
commonFieldsHtml.dataIdAttr + |
'>' + |
'<select' + |
// DataId |
commonFieldsHtml.dataIdAttr + |
// Required |
commonFieldsHtml.fieldInput.mandatoryAttr + |
// Info bulle |
commonFieldsHtml.titleAttr + |
// Class |
' class="form-control custom-select ' + fieldElement + '"' + |
'>' + |
// Apparait dans la barre de sélection |
'<option>Plusieurs choix possibles</option>' + |
'</select>' + |
'<div class="overSelect"></div>' + |
'</div>' + |
'<div class="checkboxes hidden"' + |
// DataId |
commonFieldsHtml.dataIdAttr + |
'>'; |
// On déroule les différentes valeurs |
for( let i = 0; i < count; i++ ) { |
let fieldOption = fieldOptions[i]; |
// Type="checkbox" |
commonFieldsHtml.fieldInput.typeAttr = ' type="checkbox"'; |
// Id |
listFieldsHtml.inputIdAttr = ' id="' + fieldOption.optionValue.replace( /(')/gm, ''' ).replace( /(")/gm, '"' ).toLowerCase() + '"'; |
// For |
listFieldsHtml.forAttr = ' for="' + fieldOption.optionValue.replace( /(')/gm, ''' ).replace( /(")/gm, '"' ).toLowerCase() + '"'; |
// Default |
listFieldsHtml.defaultAttr = '';//réinitialisation |
if( fieldOption.isDefault ) { |
listFieldsHtml.defaultAttr = ' checked';//affectation |
} |
// value-id |
if( '' !== fieldOption.optionIndex ) { |
listFieldsHtml.optionIdAttr = ' value-id="' + fieldOption.optionIndex + '"'; |
} |
|
fieldHtml += |
'<label' + |
// For |
listFieldsHtml.forAttr + |
// value-id |
listFieldsHtml.optionIdAttr + |
// Class du label |
commonFieldsHtml.fieldLabel.classAttr+ |
'>' + |
'<input type="checkbox"' + |
// Id |
listFieldsHtml.inputIdAttr + |
// value-id |
listFieldsHtml.optionIdAttr + |
// Name |
commonFieldsHtml.fieldInput.nameAttr + |
// Value |
' value="' + fieldOption.optionValue.replace( /(')/gm, ''' ).replace( /(")/gm, '"' ) + '"' + |
// Checked |
listFieldsHtml.defaultAttr + |
// Class="nom du champ" |
commonFieldsHtml.fieldInput.classAttr + |
// DataId |
commonFieldsHtml.dataIdAttr + |
'>' + |
// Label de l'option |
fieldOption.optionText.replace( /(')/gm, ''' ).replace( /(")/gm, '"' ) + |
'</label>'; |
} |
// Si valeur "autre" est cochée |
if( fieldOtherValue ) { |
fieldHtml += |
'<label for="other"' + |
// DataId |
commonFieldsHtml.dataIdAttr + |
'>' + |
'<input type="checkbox"' + |
' id="other-' + fieldElement + '-' + index + '"' + |
commonFieldsHtml.fieldInput.nameAttr + |
' value="other"' + |
commonFieldsHtml.fieldInput.classAttr + |
// DataId |
commonFieldsHtml.dataIdAttr + |
'>' + |
'Autre</label>'; |
} |
// Fermeture des conteneurs .multiselect .checkboxes |
fieldHtml += |
'</div>'+ |
'</div>'+ |
'</div>'; |
break; |
|
case 'select': |
commonFieldsHtml.fieldInput.classAttr = commonFieldsHtml.fieldInput.classAttr.slice(0, -1); |
commonFieldsHtml.fieldInput.classAttr += ' form-control custom-select"'; |
fieldHtml = |
// Conteneur/Wrapper |
// +Classe 'and-help' |
'<div class="add-field-select ' + fieldElement + commonFieldsHtml.helpClass + '"' + |
// DataID |
commonFieldsHtml.dataIdAttr + |
'>' + |
'<label class="mt-3" style="width:100%"' + |
commonFieldsHtml.fieldLabel.forAttr + |
// Info bulle |
commonFieldsHtml.titleAttr + |
'>' + |
// Nom du champ |
listFieldsHtml.containerContent + |
// Bouton 'help' |
commonFieldsHtml.helpButton + |
'</label>' + |
'<select' + |
commonFieldsHtml.fieldInput.nameAttr + |
' id="' + fieldKey + '"' + |
// Class |
commonFieldsHtml.fieldInput.classAttr + |
// Required |
commonFieldsHtml.fieldInput.mandatoryAttr + |
// DataId |
commonFieldsHtml.dataIdAttr + |
'>'; |
|
// On déroule les différentes valeurs |
for( let i = 0; i < count; i++ ) { |
let fieldOption = fieldOptions[i]; |
// Default |
listFieldsHtml.defaultAttr = '';//réinitialisation |
if( fieldOption.isDefault ) {//affectation |
listFieldsHtml.defaultAttr = ' selected="selected"'; |
} |
// value-id |
if( '' !== fieldOption.optionIndex ) { |
listFieldsHtml.optionIdAttr = ' value-id="' + fieldOption.optionIndex + '"'; |
} |
|
fieldHtml += |
'<option' + |
// Value |
' value="' + fieldOption.optionValue.replace( /(')/gm, ''' ).replace( /(")/gm, '"' ) + '"' + |
// Value-id |
listFieldsHtml.optionIdAttr + |
// Selected |
listFieldsHtml.defaultAttr + |
'>' + |
// Option |
fieldOption.optionText.replace( /(')/gm, ''' ).replace( /(")/gm, '"' ) + |
'</option>'; |
} |
// Si valeur "autre" est cochée |
if( fieldOtherValue ) { |
fieldHtml += |
'<option class="other" value="other"' + commonFieldsHtml.dataIdAttr + '>' + |
'Autre' + |
'</option>'; |
} |
// Fermeture des conteneurs |
fieldHtml += |
'</select>' + |
// Fin du conteneur/wrapper |
'</div>'; |
break; |
|
case 'textarea': |
// Ouvrir l'attribut class (suppression de '"') |
commonFieldsHtml.fieldInput.classAttr = commonFieldsHtml.fieldInput.classAttr.slice(0, -1); |
// Classe 'custom-range' |
commonFieldsHtml.fieldInput.classAttr += ' form-control"'; |
// Classe 'and-help' |
commonFieldsHtml.fieldLabel.classAttr = ' class="mt-3 ' + commonFieldsHtml.helpClass + '"'; |
// Autres attributs |
commonFieldsHtml.fieldInput.otherAttr += ' id="' + fieldKey + '"'; |
|
fieldHtml = |
'<label style="width:100%"' + |
// For |
commonFieldsHtml.fieldLabel.forAttr + |
// Class |
commonFieldsHtml.fieldLabel.classAttr + |
// Info-bulle |
commonFieldsHtml.titleAttr + |
// Autres attributs |
commonFieldsHtml.fieldLabel.otherAttr + |
'>' + |
// Nom du champ |
commonFieldsHtml.fieldLabel.labelContent + |
// Bouton 'help' |
commonFieldsHtml.helpButton + |
'</label>' + |
'<textarea' + |
// Name |
commonFieldsHtml.fieldInput.nameAttr + |
// DataId |
commonFieldsHtml.dataIdAttr + |
// Class |
commonFieldsHtml.fieldInput.classAttr + |
// Info-bulle |
commonFieldsHtml.titleAttr + |
// Info-bulle |
commonFieldsHtml.fieldInput.placeholderAttr + |
// Required |
commonFieldsHtml.fieldInput.mandatoryAttr + |
// Autres attributs |
commonFieldsHtml.fieldInput.otherAttr + |
'></textarea>'; |
break; |
|
case 'range': |
// Ouvrir l'attribut class (suppression de '"') |
commonFieldsHtml.fieldInput.classAttr = commonFieldsHtml.fieldInput.classAttr.slice(0, -1); |
// Classe 'custom-range' |
commonFieldsHtml.fieldInput.classAttr += ' custom-range form-control pl-3"'; |
// Classe 'and-help' |
commonFieldsHtml.fieldLabel.classAttr = ' class="mt-3 ' + commonFieldsHtml.helpClass + '"'; |
// Step |
if( '' !== fieldStep ) { |
commonFieldsHtml.fieldInput.otherAttr += ' step="' + fieldStep + '"'; |
} |
// Min |
if( '' !== fieldMin ) { |
commonFieldsHtml.fieldInput.otherAttr += ' min="' + fieldMin + '"'; |
} |
//Max |
if( '' !== fieldMax ) { |
commonFieldsHtml.fieldInput.otherAttr += ' max="' + fieldMax + '"'; |
} |
fieldHtml = |
'<div' + |
' class="range"' + |
' id="' + fieldKey + '"' + |
'>' + |
'<label style="width:100%"' + |
// For |
commonFieldsHtml.fieldLabel.forAttr + |
// Class |
commonFieldsHtml.fieldLabel.classAttr + |
// Info-bulle |
commonFieldsHtml.titleAttr + |
// Autres attributs |
commonFieldsHtml.fieldLabel.otherAttr + |
'>' + |
// Nom du champ |
commonFieldsHtml.fieldLabel.labelContent + |
// Bouton 'help' |
commonFieldsHtml.helpButton + |
'</label>' + |
'<div class="col-sm-12 row" style="max-width=100%">' + |
// Visualiser min max et la valeur de range |
'<p class="col-sm-2 range-values text-center font-weight-bold">'+ |
'Min ' + fieldMin + |
'</p>'+ |
'<div class="range-live-value range-values text-center font-weight-bold col-sm-7">'+ |
fieldDefaultNum + |
'</div>'+ |
'<p class="col-sm-2 range-values text-center font-weight-bold">'+ |
'Max ' + fieldMax + |
'</p>' + |
|
'<input' + |
// Type |
commonFieldsHtml.fieldInput.typeAttr + |
// Name |
commonFieldsHtml.fieldInput.nameAttr + |
// DataId |
commonFieldsHtml.dataIdAttr + |
// Class |
commonFieldsHtml.fieldInput.classAttr + |
// Info-bulle |
commonFieldsHtml.titleAttr + |
// Required |
commonFieldsHtml.fieldInput.mandatoryAttr + |
// Default |
' value="' + fieldDefaultNum + '"' + |
// Autres attributs |
commonFieldsHtml.fieldInput.otherAttr + |
'>' + |
'</div>' |
'</div>'; |
break; |
|
case 'number': |
// Step |
if( '' !== fieldStep ) { |
commonFieldsHtml.fieldInput.otherAttr += ' step="' + fieldStep + '"'; |
} |
case 'date': |
// Ouvrir l'attribut class (suppression de '"') |
commonFieldsHtml.fieldInput.classAttr = commonFieldsHtml.fieldInput.classAttr.slice(0, -1); |
// Classe 'and-help' |
commonFieldsHtml.fieldInput.classAttr += commonFieldsHtml.helpClass + ' form-control"'; |
// Min |
if( '' !== fieldMin ) { |
commonFieldsHtml.fieldInput.otherAttr += ' min="' + fieldMin + '"'; |
} |
// Max |
if( '' !== fieldMax ) { |
commonFieldsHtml.fieldInput.otherAttr += ' max="' + fieldMax + '"'; |
} |
// Class du label |
commonFieldsHtml.fieldLabel.classAttr = 'class="mt-3"'; |
fieldHtml = |
'<div class="number">' + |
'<label style="width:100%"' + |
// For |
commonFieldsHtml.fieldLabel.forAttr + |
// Class |
commonFieldsHtml.fieldLabel.classAttr + |
// Info-bulle |
commonFieldsHtml.titleAttr + |
// Autres attributs |
commonFieldsHtml.fieldLabel.otherAttr + |
'>' + |
// Nom du champ |
commonFieldsHtml.fieldLabel.labelContent + |
// Bouton 'help' |
commonFieldsHtml.helpButton + |
'</label>' + |
'<input' + |
// Type |
commonFieldsHtml.fieldInput.typeAttr + |
// Name |
commonFieldsHtml.fieldInput.nameAttr + |
// DataId |
commonFieldsHtml.dataIdAttr + |
// Class |
commonFieldsHtml.fieldInput.classAttr + |
// Info-bulle |
commonFieldsHtml.titleAttr + |
// Placeholder |
commonFieldsHtml.fieldInput.placeholderAttr + |
// Required |
commonFieldsHtml.fieldInput.mandatoryAttr + |
// Default |
' value="' + fieldDefaultNum + '"' + |
// Autres attributs |
commonFieldsHtml.fieldInput.otherAttr + |
'>' + |
'</div>'; |
break; |
|
case 'text' : |
case 'email': |
default: |
// Ouvrir l'attribut class (suppression de '"') |
commonFieldsHtml.fieldInput.classAttr = commonFieldsHtml.fieldInput.classAttr.slice(0, -1); |
// Classe 'and-help' |
commonFieldsHtml.fieldInput.classAttr += commonFieldsHtml.helpClass + ' form-control"'; |
// Class du label |
commonFieldsHtml.fieldLabel.classAttr = 'class="mt-3"'; |
|
fieldHtml = |
'<label style="width:100%"' + |
// For |
commonFieldsHtml.fieldLabel.forAttr + |
// Class |
commonFieldsHtml.fieldLabel.classAttr + |
// Info-bulle |
commonFieldsHtml.titleAttr + |
// Autres attributs |
commonFieldsHtml.fieldLabel.otherAttr + |
'>' + |
// Nom du champ |
commonFieldsHtml.fieldLabel.labelContent + |
// Bouton 'help' |
commonFieldsHtml.helpButton + |
'</label>' + |
'<input' + |
// Type |
commonFieldsHtml.fieldInput.typeAttr + |
// Name |
commonFieldsHtml.fieldInput.nameAttr + |
// DataId |
commonFieldsHtml.dataIdAttr + |
// Class |
commonFieldsHtml.fieldInput.classAttr + |
// Info-bulle |
commonFieldsHtml.titleAttr + |
// Placeholder |
commonFieldsHtml.fieldInput.placeholderAttr + |
// Required |
commonFieldsHtml.fieldInput.mandatoryAttr + |
// Autres attributs |
commonFieldsHtml.fieldInput.otherAttr + |
'>'; |
break; |
} |
return fieldHtml; |
} |
|
// Construire un tableau des options pour chaque élément de listes |
function collectListOptions( thisFieldset ) { |
var $details = $( '.field-details' , thisFieldset ), |
options = []; |
|
$details.find( '.new-value' ).each( function() { |
options.push({ |
// Valeur transmise (value) |
optionValue : $( this ).find( '.list-value' ).val().toLowerCase(), |
// Valeur Visible |
optionText : $( this ).find( '.displayed-label' ).val(), |
// Booléen "default" |
isDefault : $( this ).find( '.is-defaut-value' ).is( ':checked' ), |
// Indice de l'option |
optionIndex : $( this ).data( 'list-value-id' ) |
}); |
}); |
return options; |
} |
|
// Faire apparaitre un champ text "Autre" |
function onOtherOption( thisFieldset , index ) { |
// Ce champ (dans la prévisualisation) |
var thisPreviewFieldset = $( '.preview-fields[data-id="' + index + '"]'), |
// L'élément choisi |
element = $('.field-element' , thisFieldset ).val(), |
// Où insérer le champ "Autre" |
$element = $( '.' + element , thisPreviewFieldset ), |
// html du champ "Autre" |
collectOther = |
'<div class="col-sm-12 mt-1 collect-other-block">'+ |
'<label data-id="' + index + '" for="collect-other" style="font-weight:300">Autre option :</label>' + |
'<input type="text" name="collect-other" data-id="' + index + '" class="collect-other form-control" >'+ |
'</div>'; |
// Pouvoir supprimer le champ "Autre" |
function optionRemove( thisPreviewFieldset ) { |
$( '.collect-other-block' , thisPreviewFieldset ).remove(); |
} |
|
switch( element ) { |
case 'radio' : |
// Lorsqu'un nouveau bouton est coché |
$( 'input' , thisPreviewFieldset ).on( 'change' , function () { |
if( 'other' === $( this ).val() ) { |
// Insertion du champ "Autre" après les boutons |
$element.after( collectOther ); |
} else { |
// Suppression du champ autre |
optionRemove( thisPreviewFieldset ); |
} |
}); |
break; |
|
case 'select' : |
// Lorsque l'option "Autre" est selectionnée |
$( 'select' , thisPreviewFieldset ).on( 'change' , function () { |
if( 'other' === $( this).val() ) { |
// Insertion du champ "Autre" après les boutons |
$element.after( collectOther ); |
// Suppression du champ autre |
} else { |
optionRemove( thisPreviewFieldset ); |
} |
}); |
break; |
|
case 'list-checkbox' : |
// Lorsque "Autre" est coché |
$( 'input#other-' + element + '-' + index, thisPreviewFieldset ).on( 'click' , function () { |
// Insertion du champ "Autre" après les boutons |
if( $( this ).is( ':checked' ) ) { |
$( '.checkboxes', thisPreviewFieldset ).append( collectOther ); |
} else { |
// Suppression du champ autre |
optionRemove( thisPreviewFieldset ); |
} |
}); |
break; |
case 'checkbox' : |
// Lorsque "Autre" est coché |
$( 'input#other-' + element + '-' + index, thisPreviewFieldset ).on( 'click' , function () { |
// Insertion du champ "Autre" après les boutons |
if( $( this ).is( ':checked' ) ) { |
$element.after( collectOther ); |
} else { |
// Suppression du champ autre |
optionRemove( thisPreviewFieldset ); |
} |
}); |
break; |
|
default : |
break; |
} |
} |
|
// Prévisualisation des nouveaux champs |
function newFieldsPreview() { |
var count = $( 'fieldset' ).last().data( 'id' ); |
// Si on a déjà prévisualisé on efface tout pour recommencer |
if( 0 < $( '.preview-fields' ).length ) { |
$( '.preview-fields' ).each( function () { |
$( this ).remove(); |
}); |
} |
// Au premier ajout d'un champ dans la prévisualisation on ajoute un titre et un message |
if( true === firstClick ) { |
$( '#zone-supp' ).prepend( |
'<h2>Informations propres au projet</h2>' + |
'<div class="message">L\'objectif principal de cet aperçu est de vérifier les contenus et repérer d\'éventuelles erreurs</div>' |
); |
} |
// Parcourir tous les blocs d'infos de champs supplémentaires |
for( var index = $( 'fieldset' ).first().data( 'id' ) ; index <= count ; index++ ) { |
var thisFieldset = $( 'fieldset[data-id="' + index + '"]'); |
// Certains indices peuvent correspondre à un champ supprimé |
if( 0 < $( thisFieldset ).length ) { |
// Prévisualisation d'un champ |
$( '#zone-supp .preview-container' ).append( |
'<div class="preview-fields col-sm-12 row" data-id="' + index + '">'+ |
onClickPreviewField( thisFieldset , index ) + |
'</div>' |
); |
// Ajout/suppression d'un champ texte "Autre" |
if( $( '.option-other-value' , thisFieldset ).is( ':checked' ) ) { |
onOtherOption( thisFieldset , index); |
} |
} |
} |
// Le titre + message de la section prévisualisation ne sont ajoutés qu'une fois |
firstClick = false; |
} |
|
// Activation/Desactivation et contenu de la modale Bootstrap |
// https://getbootstrap.com/docs/3.3/javascript/#modals |
function previewFieldHelpModal() { |
$( '#zone-supp' ).on( 'click' , '.help-button' , function ( event ) { |
var index = $( this ).closest( '.preview-fields' ).data( 'id' ), |
thisFieldset = $( '.new-field[data-id="' + index + '"]' ), |
file = $( '.field-help' , thisFieldset )[0].files[0], |
tmppath = URL.createObjectURL( file ); |
// Titre |
$( '#help-modal-label' ).text( 'Aide pour : ' + $( '.field-name' , thisFieldset ).val() ); |
// Contenu |
if( file.type.match( 'image/*' ) ) { |
$( '#print_content' ).append( '<img src="' + tmppath + '" style="max-width:100%">' ); |
} else { |
$( '#print_content' ).append( '<p>Erreur : le fichier n\'est pas une image</p>' ); |
} |
// 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(); |
}) |
}); |
} |
|
function potDeMiel() { |
if( !valeurOk( $( '#basic-widget-form #email' ).val() ) ) { |
$( '#signup_submit' ).prop( 'disabled', false ); |
} |
$( '#signup_submit' ).off().on( 'click dblclick mousedown submit focus keydown keypress keyup touchstart touchend', function() { |
if( valeurOk( $( '#basic-widget-form #email' ).val() ) ) { |
return false; |
} |
}); |
$( '#basic-widget-form #email' ).css({ position : 'absolute', left : '-2000px' }).on( 'input blur change', function( event ) { |
event.preventDefault(); |
if( valeurOk( $( this ).val() ) ) { |
$( 'form' ).each( function() { |
$( this )[0].reset(); |
}); |
$( '#signup_submit' ).prop( 'disabled', true ); |
} |
}); |
} |
|
function onGeoloc() { |
// Empêcher que le module carto ne bind ses events partout |
$( '#tb-geolocation' ).on( 'submit blur click focus mousedown mouseleave mouseup change', '*', function( event ) { |
event.preventDefault(); |
return false; |
}); |
// evenement location |
$( '#tb-geolocation' ).on( 'location' , function( location ) { |
var locDatas = location.originalEvent.detail; |
|
if ( valeurOk( locDatas ) ) { |
console.dir( locDatas ); |
|
var latitude = ''; |
var longitude = ''; |
if ( valeurOk( locDatas.geometry.coordinates ) ) { |
if ( 'Point' === locDatas.geometry.type ) { |
if ( valeurOk( locDatas.geometry.coordinates[0] ) ) { |
longitude = locDatas.geometry.coordinates[0].toFixed( 5 ); |
} |
if ( valeurOk( locDatas.geometry.coordinates[1] ) ) { |
latitude = locDatas.geometry.coordinates[1].toFixed( 5 ); |
} |
} else if ( 'LineString' === locDatas.geometry.type ) { |
if(this.valOk( locDatas.centroid.coordinates )){ |
if ( this.valOk( locDatas.centroid.coordinates[0] ) ) { |
longitude = locDatas.centroid.coordinates[0]; |
} |
if ( this.valOk( locDatas.centroid.coordinates[1] ) ) { |
latitude = locDatas.centroid.coordinates[1]; |
} |
} else {// on ne prend qu'un point de la ligne |
if ( valeurOk( locDatas.geometry.coordinates[0][0] ) ) { |
longitude = locDatas.geometry.coordinates[0][0]; |
longitude = longitude.toFixed( 5 ); |
} |
if ( valeurOk( locDatas.geometry.coordinates[0][1] ) ){ |
latitude = locDatas.geometry.coordinates[0][1]; |
latitude = latitude.toFixed( 5 ); |
} |
} |
} |
} |
if ( valeurOk( latitude ) && valeurOk( longitude ) ) { |
$( '#latitude' ).val( latitude ); |
$( '#longitude' ).val( longitude ); |
} |
} |
}); |
} |
|
function onGeolocManuelle() { |
const coords = ['latitude','longitude','zoom']; |
$( '#latitude,#longitude,#zoom' ).on( 'change', function( event ) { |
var thisCoord = this.id, |
thisVal = $( this ).val(), |
valeur = ''; |
|
if ( $.isNumeric( thisVal ) ) { |
switch( thisCoord ) { |
case 'zoom': |
if( 0 < parseInt( thisVal, 10 ) && 18 >= parseInt( thisVal, 10 ) ) { |
valeur = thisVal; |
} |
break; |
case 'latitude': |
if ( 90 > Math.abs( parseInt( thisVal, 10 ) ) ) { |
valeur = parseFloat( thisVal, 10 ).toFixed( 5 ); |
$( '#latitude' ).val( valeur ); |
} |
break; |
case 'longitude': |
if ( 180 >= Math.abs( parseInt( thisVal, 10 ) ) ) { |
valeur = parseFloat( thisVal, 10 ).toFixed( 5 ); |
$( '#longitude' ).val( valeur ); |
} |
break; |
default: |
break; |
} |
} |
//un champ vide n'est pas une erreur |
if ( $.isNumeric( valeur ) ) { |
$( this ).siblings( 'span.error' ).remove(); |
} else if ( 0 <= $.inArray( thisCoord, coords ) ) { |
// on ne signale pas d'erreur si il n'y a rien dans le champ |
if ( !valeurOk( $( this ).siblings( 'span.error' ) ) && valeurOk( $( this ).val() ) ) { |
$( this ).after( '<span class="error">mauvais format pour ce champ<span>' ); |
} else { |
$( this ).siblings( 'span.error' ).remove(); |
} |
} |
}); |
} |
|
function geolocValidationEtStockage() { |
$( '#signup_submit' ).off().on( 'click', function( event ) { |
var localisation = '', |
latitude = $( '#latitude' ).val(), |
longitude = $( '#longitude' ).val(), |
zoom = $( '#zoom' ).val(); |
|
if ( ( valeurOk( longitude ) && !valeurOk( latitude ) ) || ( !valeurOk( longitude ) && valeurOk( latitude ) ) ) { |
if( !valeurOk( $( '.warning-carto' ) ) ) { |
$( '#new-fields-buttons' ).after( |
'<p class="message warning-carto">'+ |
'<i class="fa fa-exclamation-triangle" aria-hidden="true" style="color:#ff5d55"></i> Vous avez entré des coordonnées incomplètes<br>'+ |
'Complétez latitude ou longitude, ou placez un marqueur sur la carto, ou effacez ces deux champs'+ |
'</p>' |
); |
} |
return false; |
} else if( valeurOk( $( '.warning-carto' ) ) ) { |
$( '.warning-carto' ).remove(); |
} |
if ( valeurOk( latitude ) && valeurOk( longitude ) ) { |
localisation += 'latitude:' + latitude + ';'; |
localisation += 'longitude:' + longitude; |
} |
if ( valeurOk( zoom ) ) { |
if( valeurOk( localisation ) ) { |
localisation += ';'; |
} |
localisation += 'zoom:' + zoom; |
} |
if ( valeurOk( localisation ) ) { |
$( '#localisation' ).val( localisation ); |
} |
}); |
} |
|
/** |
* 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} |
*/ |
function valeurOk( valeur, sensComparaison = true, comparer = undefined ) { |
var retour; |
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 ( 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; |
} |
} |
|
/*************************** |
* Lancement des scripts * |
***************************/ |
|
// Tableau d'envoi des données |
var datasToSubmit = new Array(); |
// Variable permettant un seul affichage du titre |
// de la prévisualisation pour les nouveaux champs |
var firstClick = true; |
|
jQuery( document ).ready( function() { |
// reset de tous les formulaires |
$( 'form' ).each( function() { |
$( this )[0].reset(); |
$('form').each(function () { |
$(this)[0].reset(); |
}); |
// Gestion du champ pot de miel |
potDeMiel(); |
// Geoloc |
onGeoloc(); |
onGeolocManuelle(); |
geolocValidationEtStockage(); |
// Identifiant de champ |
var fieldIndex = 0; |
// Ajout de nouveaux champs |
onClickAddNewFields( fieldIndex ); |
// Activation/Desactivation des boutons valider et prévisualiser |
onClickButtonsTagMissingValues(); |
initGeoloc(); |
// style et affichage de certains champs |
displayFields(); |
// affichage et recueil des données des champs supp |
champsSupp.init(); |
// Prévisualisation des champs classiques |
DisplayClassicFields(); |
// Affichage des images ou nom des documents importés |
inputFile(); |
// Affichage des List-checkbox |
inputListCheckbox(); |
// Activer la checkbox de valeur par default uniquement si une valeur est entrée |
onInputListValueLabelEnableDefaultCheckbox(); |
// Affichage des Range |
inputRangeDisplayNumber(); |
// Modale "aide" |
previewFieldHelpModal(); |
}); |
displayClassicFields(); |
}); |